@biggive/components 202305101345.0.0 → 202305161606.0.0

package/dist/types/components.d.ts

@@ -515,10 +515,18 @@ export namespace Components {
     interface BiggiveForm {
     }
     interface BiggiveFormFieldSelect {
+        /**
+          * Must match background of containing element, or unintended shape will appear.
+         */
+        "backgroundColour": 'white' | 'grey';
         /**
           * Placeholder
          */
         "placeholder": string;
+        /**
+          * Displayed as 'eyebrow' label over the top border of the box.
+         */
+        "prompt": string | null;
         "selectStyle": 'bordered' | 'underlined';
         "selectedLabel": string | null;
         "selectedValue": string | null;
@@ -949,12 +957,16 @@ export namespace Components {
     /**
      * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
      * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
+     * Please ensure input is styled as width: 100%.
      */
     interface BiggiveTextInput {
         /**
           * ISO-4217 currency code if input is for a money value
          */
         "currency": 'GBP' | 'USD' | undefined;
+        /**
+          * Displayed as 'eyebrow' label over the top border of the box.
+         */
         "prompt": string;
         "selectStyle": 'bordered' | 'underlined';
         "spaceBelow": number;
@@ -1411,6 +1423,7 @@ declare global {
     /**
      * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
      * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
+     * Please ensure input is styled as width: 100%.
      */
     interface HTMLBiggiveTextInputElement extends Components.BiggiveTextInput, HTMLStencilElement {
     }
@@ -2036,6 +2049,10 @@ declare namespace LocalJSX {
     interface BiggiveForm {
     }
     interface BiggiveFormFieldSelect {
+        /**
+          * Must match background of containing element, or unintended shape will appear.
+         */
+        "backgroundColour"?: 'white' | 'grey';
         /**
           * This event `doChange` event is emitted and propogates to the parent component which handles it
          */
@@ -2044,6 +2061,10 @@ declare namespace LocalJSX {
           * Placeholder
          */
         "placeholder"?: string;
+        /**
+          * Displayed as 'eyebrow' label over the top border of the box.
+         */
+        "prompt": string | null;
         "selectStyle"?: 'bordered' | 'underlined';
         "selectedLabel"?: string | null;
         "selectedValue"?: string | null;
@@ -2477,12 +2498,16 @@ declare namespace LocalJSX {
     /**
      * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
      * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
+     * Please ensure input is styled as width: 100%.
      */
     interface BiggiveTextInput {
         /**
           * ISO-4217 currency code if input is for a money value
          */
         "currency"?: 'GBP' | 'USD' | undefined;
+        /**
+          * Displayed as 'eyebrow' label over the top border of the box.
+         */
         "prompt": string;
         "selectStyle"?: 'bordered' | 'underlined';
         "spaceBelow"?: number;
@@ -2736,6 +2761,7 @@ declare module "@stencil/core" {
             /**
              * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
              * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
+             * Please ensure input is styled as width: 100%.
              */
             "biggive-text-input": LocalJSX.BiggiveTextInput & JSXBase.HTMLAttributes<HTMLBiggiveTextInputElement>;
             "biggive-timeline": LocalJSX.BiggiveTimeline & JSXBase.HTMLAttributes<HTMLBiggiveTimelineElement>;

package/hydrate/index.js

@@ -6750,17 +6750,17 @@ class BiggiveCampaignCard {
   }; }
 }
 
-const biggiveCampaignCardFilterGridCss = "/*!@a*/a.sc-biggive-campaign-card-filter-grid{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-campaign-card-filter-grid:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-campaign-card-filter-grid{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-campaign-card-filter-grid{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-campaign-card-filter-grid{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-campaign-card-filter-grid{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-campaign-card-filter-grid{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-campaign-card-filter-grid{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-campaign-card-filter-grid{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-campaign-card-filter-grid{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-campaign-card-filter-grid{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-campaign-card-filter-grid{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-campaign-card-filter-grid{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-campaign-card-filter-grid{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-campaign-card-filter-grid{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-campaign-card-filter-grid{margin-bottom:60px}/*!@:host*/.sc-biggive-campaign-card-filter-grid-h{display:content}/*!@.container*/.container.sc-biggive-campaign-card-filter-grid{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}/*!@.container .search-wrap*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid{background-color:#FFFFFF;padding:15px 30px;margin-bottom:15px}/*!@.container .search-wrap h4*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid h4.sc-biggive-campaign-card-filter-grid{margin-bottom:15px}/*!@.container .search-wrap .field-wrap*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid{display:flex;justify-content:space-between}/*!@.container .search-wrap .field-wrap .input-wrap*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid .input-wrap.sc-biggive-campaign-card-filter-grid{display:flex;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #000000;margin-right:30px;flex-grow:1}/*!@.container .search-wrap .field-wrap .input-wrap input*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid .input-wrap.sc-biggive-campaign-card-filter-grid input.sc-biggive-campaign-card-filter-grid{border:0}/*!@.container .search-wrap .field-wrap button*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid button.sc-biggive-campaign-card-filter-grid{padding:5px 30px}/*!@.selected-filter-wrap*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid{display:flex;margin-bottom:30px}/*!@.selected-filter-wrap .button*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .button.sc-biggive-campaign-card-filter-grid{cursor:pointer;border-radius:20px;padding:5px 50px 5px 20px;margin-right:15px;background-color:#FF7272;color:#000000;border:1px solid #FF7272;text-decoration:none;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:right 20px center;background-size:12px auto}/*!@.selected-filter-wrap .button:hover*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .button.sc-biggive-campaign-card-filter-grid:hover{background-color:#FFFFFF;color:#000000}/*!@.selected-filter-wrap .clear-all*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid{margin-left:auto}/*!@.selected-filter-wrap .clear-all a*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid a.sc-biggive-campaign-card-filter-grid{cursor:pointer;border-radius:20px;padding:5px 20px;margin-right:15px;background-color:#2C089B;color:#FFFFFF;border:1px solid #2C089B;text-decoration:none}/*!@.selected-filter-wrap .clear-all a:hover*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid a.sc-biggive-campaign-card-filter-grid:hover{background-color:#FFFFFF;color:#2C089B}/*!@.sort-filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid{display:flex;justify-content:flex-end;margin-bottom:30px;text-align:right;display:flex}/*!@.sort-filter-wrap .clear-all*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid{cursor:pointer;vertical-align:center;margin-top:auto;margin-bottom:auto}/*!@.sort-filter-wrap .sort-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .sort-wrap.sc-biggive-campaign-card-filter-grid{margin-left:15px}/*!@.sort-filter-wrap .filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid{margin-left:15px}/*!@.sort-filter-wrap .filter-wrap .button.filter*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid{padding-left:60px;padding-right:30px}/*!@.sort-filter-wrap .filter-wrap .button.filter .filter-icon*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid .filter-icon.sc-biggive-campaign-card-filter-grid{content:\"\";display:block;position:absolute;left:25px;top:17px;width:13px;height:13px}/*!@.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid .filter-icon.sc-biggive-campaign-card-filter-grid svg.sc-biggive-campaign-card-filter-grid{width:100%;height:auto;vertical-align:top}/*!@.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg:hover*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid .filter-icon.sc-biggive-campaign-card-filter-grid svg.sc-biggive-campaign-card-filter-grid:hover{fill:#2C089B}/*!@.icon*/.icon.sc-biggive-campaign-card-filter-grid{height:1rem;width:2rem;vertical-align:-0.125rem;margin:auto}/*!@.icon > path*/.icon.sc-biggive-campaign-card-filter-grid>path.sc-biggive-campaign-card-filter-grid{fill:#2C089B}/*!@.icon-clear-all > path*/.icon-clear-all.sc-biggive-campaign-card-filter-grid>path.sc-biggive-campaign-card-filter-grid{fill:#000000}@media screen and (max-width: 450px){/*!@.sort-filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid{flex-direction:column-reverse}/*!@.sort-filter-wrap .sort-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .sort-wrap.sc-biggive-campaign-card-filter-grid{margin-top:20px;margin-bottom:20px}}@media screen and (max-width: 350px){/*!@.sort-filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid{justify-content:space-between}/*!@.sort-filter-wrap .sort-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .sort-wrap.sc-biggive-campaign-card-filter-grid{margin-left:0px}/*!@.sort-filter-wrap .filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid{margin-left:3px}}/*!@.align-right*/.align-right.sc-biggive-campaign-card-filter-grid{text-align:right}/*!@.input-text*/.input-text.sc-biggive-campaign-card-filter-grid{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}/*!@.input-text:focus*/.input-text.sc-biggive-campaign-card-filter-grid:focus{outline:0}/*!@.input-text:placeholder*/.input-text.sc-biggive-campaign-card-filter-grid:placeholder{color:#4A4A4A}/*!@.text-colour-primary*/.text-colour-primary.sc-biggive-campaign-card-filter-grid{color:#2C089B}";
+const biggiveCampaignCardFilterGridCss = "/*!@a*/a.sc-biggive-campaign-card-filter-grid{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-campaign-card-filter-grid:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-campaign-card-filter-grid{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-campaign-card-filter-grid{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-campaign-card-filter-grid{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-campaign-card-filter-grid{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-campaign-card-filter-grid{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-campaign-card-filter-grid{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-campaign-card-filter-grid{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-campaign-card-filter-grid{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-campaign-card-filter-grid{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-campaign-card-filter-grid{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-campaign-card-filter-grid{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-campaign-card-filter-grid{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-campaign-card-filter-grid{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-campaign-card-filter-grid{margin-bottom:60px}/*!@:host*/.sc-biggive-campaign-card-filter-grid-h{display:content}/*!@.select-wrapper-1, .select-wrapper-2, .select-wrapper-3, .select-wrapper-4*/.select-wrapper-1.sc-biggive-campaign-card-filter-grid,.select-wrapper-2.sc-biggive-campaign-card-filter-grid,.select-wrapper-3.sc-biggive-campaign-card-filter-grid,.select-wrapper-4.sc-biggive-campaign-card-filter-grid{position:relative}/*!@.select-wrapper-1*/.select-wrapper-1.sc-biggive-campaign-card-filter-grid{z-index:4}/*!@.select-wrapper-2*/.select-wrapper-2.sc-biggive-campaign-card-filter-grid{z-index:3}/*!@.select-wrapper-3*/.select-wrapper-3.sc-biggive-campaign-card-filter-grid{z-index:2}/*!@.select-wrapper-4*/.select-wrapper-4.sc-biggive-campaign-card-filter-grid{z-index:1}/*!@.container*/.container.sc-biggive-campaign-card-filter-grid{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}/*!@.container .search-wrap*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid{background-color:#FFFFFF;padding:15px 30px;margin-bottom:15px}/*!@.container .search-wrap h4*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid h4.sc-biggive-campaign-card-filter-grid{margin-bottom:15px}/*!@.container .search-wrap .field-wrap*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid{display:flex;justify-content:space-between}/*!@.container .search-wrap .field-wrap .input-wrap*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid .input-wrap.sc-biggive-campaign-card-filter-grid{display:flex;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #000000;margin-right:30px;flex-grow:1}/*!@.container .search-wrap .field-wrap .input-wrap input*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid .input-wrap.sc-biggive-campaign-card-filter-grid input.sc-biggive-campaign-card-filter-grid{border:0}/*!@.container .search-wrap .field-wrap button*/.container.sc-biggive-campaign-card-filter-grid .search-wrap.sc-biggive-campaign-card-filter-grid .field-wrap.sc-biggive-campaign-card-filter-grid button.sc-biggive-campaign-card-filter-grid{padding:5px 30px}/*!@.selected-filter-wrap*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid{display:flex;margin-bottom:30px}/*!@.selected-filter-wrap .button*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .button.sc-biggive-campaign-card-filter-grid{cursor:pointer;border-radius:20px;padding:5px 50px 5px 20px;margin-right:15px;background-color:#FF7272;color:#000000;border:1px solid #FF7272;text-decoration:none;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:right 20px center;background-size:12px auto}/*!@.selected-filter-wrap .button:hover*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .button.sc-biggive-campaign-card-filter-grid:hover{background-color:#FFFFFF;color:#000000}/*!@.selected-filter-wrap .clear-all*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid{margin-left:auto}/*!@.selected-filter-wrap .clear-all a*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid a.sc-biggive-campaign-card-filter-grid{cursor:pointer;border-radius:20px;padding:5px 20px;margin-right:15px;background-color:#2C089B;color:#FFFFFF;border:1px solid #2C089B;text-decoration:none}/*!@.selected-filter-wrap .clear-all a:hover*/.selected-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid a.sc-biggive-campaign-card-filter-grid:hover{background-color:#FFFFFF;color:#2C089B}/*!@.sort-filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid{display:flex;justify-content:flex-end;margin-bottom:30px;text-align:right;display:flex}/*!@.sort-filter-wrap .clear-all*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .clear-all.sc-biggive-campaign-card-filter-grid{cursor:pointer;vertical-align:center;margin-top:auto;margin-bottom:auto}/*!@.sort-filter-wrap .sort-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .sort-wrap.sc-biggive-campaign-card-filter-grid{margin-left:15px}/*!@.sort-filter-wrap .filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid{margin-left:15px}/*!@.sort-filter-wrap .filter-wrap .button.filter*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid{padding-left:60px;padding-right:30px}/*!@.sort-filter-wrap .filter-wrap .button.filter .filter-icon*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid .filter-icon.sc-biggive-campaign-card-filter-grid{content:\"\";display:block;position:absolute;left:25px;top:17px;width:13px;height:13px}/*!@.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid .filter-icon.sc-biggive-campaign-card-filter-grid svg.sc-biggive-campaign-card-filter-grid{width:100%;height:auto;vertical-align:top}/*!@.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg:hover*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid .button.filter.sc-biggive-campaign-card-filter-grid .filter-icon.sc-biggive-campaign-card-filter-grid svg.sc-biggive-campaign-card-filter-grid:hover{fill:#2C089B}/*!@.icon*/.icon.sc-biggive-campaign-card-filter-grid{height:1rem;width:2rem;vertical-align:-0.125rem;margin:auto}/*!@.icon > path*/.icon.sc-biggive-campaign-card-filter-grid>path.sc-biggive-campaign-card-filter-grid{fill:#2C089B}/*!@.icon-clear-all > path*/.icon-clear-all.sc-biggive-campaign-card-filter-grid>path.sc-biggive-campaign-card-filter-grid{fill:#000000}@media screen and (max-width: 450px){/*!@.sort-filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid{flex-direction:column-reverse}/*!@.sort-filter-wrap .sort-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .sort-wrap.sc-biggive-campaign-card-filter-grid{margin-top:20px;margin-bottom:20px}}@media screen and (max-width: 350px){/*!@.sort-filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid{justify-content:space-between}/*!@.sort-filter-wrap .sort-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .sort-wrap.sc-biggive-campaign-card-filter-grid{margin-left:0px}/*!@.sort-filter-wrap .filter-wrap*/.sort-filter-wrap.sc-biggive-campaign-card-filter-grid .filter-wrap.sc-biggive-campaign-card-filter-grid{margin-left:3px}}/*!@.align-right*/.align-right.sc-biggive-campaign-card-filter-grid{text-align:right}/*!@.input-text*/.input-text.sc-biggive-campaign-card-filter-grid{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}/*!@.input-text:focus*/.input-text.sc-biggive-campaign-card-filter-grid:focus{outline:0}/*!@.input-text:placeholder*/.input-text.sc-biggive-campaign-card-filter-grid:placeholder{color:#4A4A4A}/*!@.text-colour-primary*/.text-colour-primary.sc-biggive-campaign-card-filter-grid{color:#2C089B}";
 
 class BiggiveCampaignCardFilterGrid {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.doSearchAndFilterUpdate = createEvent(this, "doSearchAndFilterUpdate", 7);
     this.sortByPlaceholderText = 'Sort by';
-    this.beneficiariesPlaceHolderText = 'Beneficiary';
-    this.categoriesPlaceHolderText = 'Category';
-    this.locationsPlaceHolderText = 'Location';
-    this.fundingPlaceHolderText = 'Funding';
+    this.beneficiariesPlaceHolderText = 'Select beneficiary';
+    this.categoriesPlaceHolderText = 'Select category';
+    this.locationsPlaceHolderText = 'Select location';
+    this.fundingPlaceHolderText = 'Select funding';
     this.handleApplyFilterButtonClick = () => {
       const searchAndFilterObj = this.getSearchAndFilterObject();
       this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
@@ -6902,15 +6902,15 @@ class BiggiveCampaignCardFilterGrid {
   }
   render() {
     var _a;
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "search-wrap" }, hAsync("h4", null, this.intro), hAsync("div", { class: "field-wrap" }, hAsync("div", { class: "input-wrap" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, hAsync("path", { d: faMagnifyingGlass.icon[4].toString() })), hAsync("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), hAsync("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), hAsync("div", { class: "sort-filter-wrap" }, hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), hAsync("biggive-form-field-select", { placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "search-wrap" }, hAsync("h4", null, this.intro), hAsync("div", { class: "field-wrap" }, hAsync("div", { class: "input-wrap" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, hAsync("path", { d: faMagnifyingGlass.icon[4].toString() })), hAsync("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), hAsync("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), hAsync("div", { class: "sort-filter-wrap" }, hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), hAsync("div", { class: "select-wrapper-1" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
-      : (Array.isArray(this.categoryOptions) ? this.categoryOptions : JSON.parse(this.categoryOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
+      : (Array.isArray(this.categoryOptions) ? this.categoryOptions : JSON.parse(this.categoryOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option }))))), hAsync("div", { class: "select-wrapper-2" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined
-      : (Array.isArray(this.beneficiaryOptions) ? this.beneficiaryOptions : JSON.parse(this.beneficiaryOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, id: "locations", "space-below": "2" }, this.locationOptions.length === 0
+      : (Array.isArray(this.beneficiaryOptions) ? this.beneficiaryOptions : JSON.parse(this.beneficiaryOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option }))))), hAsync("div", { class: "select-wrapper-3" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, id: "locations", "space-below": "2" }, this.locationOptions.length === 0
       ? undefined
-      : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
+      : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option }))))), hAsync("div", { class: "select-wrapper-4" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
       ? undefined
-      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
+      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option }))))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
   }
   get el() { return getElement(this); }
   static get style() { return biggiveCampaignCardFilterGridCss; }
@@ -7294,15 +7294,17 @@ class BiggiveForm {
   }; }
 }
 
-const biggiveFormFieldSelectCss = "/*!@a*/a.sc-biggive-form-field-select{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-form-field-select:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-form-field-select{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-form-field-select{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-form-field-select{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-form-field-select{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-form-field-select{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-form-field-select{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-form-field-select{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-form-field-select{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-form-field-select{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-form-field-select{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-form-field-select{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-form-field-select{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-form-field-select{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-form-field-select{margin-bottom:60px}/*!@:host*/.sc-biggive-form-field-select-h{display:contents}/*!@.dropdown*/.dropdown.sc-biggive-form-field-select{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}/*!@.dropdown.select-style-bordered .sleeve*/.dropdown.select-style-bordered.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select{font-size:17px;line-height:24px;padding:1px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.dropdown.select-style-bordered .sleeve span.placeholder*/.dropdown.select-style-bordered.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select{background-color:#FFFFFF;color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.dropdown.select-style-bordered .sleeve span.placeholder:after*/.dropdown.select-style-bordered.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center}/*!@.dropdown.select-style-underlined .sleeve*/.dropdown.select-style-underlined.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}/*!@.dropdown.select-style-underlined .sleeve span.placeholder*/.dropdown.select-style-underlined.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select{background-color:#FFFFFF;color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;cursor:pointer}/*!@.dropdown.select-style-underlined .sleeve span.placeholder:after*/.dropdown.select-style-underlined.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center}/*!@.dropdown .options*/.dropdown.sc-biggive-form-field-select .options.sc-biggive-form-field-select{max-height:200px;overflow-x:hidden;overflow-y:scroll;background-color:#FFFFFF;position:absolute;display:none;z-index:1;left:0;right:0;border-left:1px solid #2C089B;border-right:1px solid #2C089B;border-bottom:1px solid #2C089B}/*!@.dropdown.active .options*/.dropdown.active.sc-biggive-form-field-select .options.sc-biggive-form-field-select{display:block}";
+const biggiveFormFieldSelectCss = "/*!@a*/a.sc-biggive-form-field-select{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-form-field-select:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-form-field-select{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-form-field-select{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-form-field-select{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-form-field-select{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-form-field-select{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-form-field-select{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-form-field-select{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-form-field-select{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-form-field-select{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-form-field-select{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-form-field-select{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-form-field-select{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-form-field-select{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-form-field-select{margin-bottom:60px}/*!@:host*/.sc-biggive-form-field-select-h{display:contents}/*!@.prompt*/.prompt.sc-biggive-form-field-select{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}/*!@.prompt.grey*/.prompt.grey.sc-biggive-form-field-select{background-color:#F4F4F4}/*!@.dropdown*/.dropdown.sc-biggive-form-field-select{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;margin-top:1em;text-align:left}/*!@.dropdown.select-style-bordered .sleeve*/.dropdown.select-style-bordered.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select{font-size:17px;line-height:24px;padding:1px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.dropdown.select-style-bordered .sleeve span.placeholder*/.dropdown.select-style-bordered.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select{background-color:#FFFFFF;color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.dropdown.select-style-bordered .sleeve span.placeholder:after*/.dropdown.select-style-bordered.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center}/*!@.dropdown.select-style-underlined .sleeve*/.dropdown.select-style-underlined.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}/*!@.dropdown.select-style-underlined .sleeve span.placeholder*/.dropdown.select-style-underlined.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select{background-color:#FFFFFF;color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;cursor:pointer}/*!@.dropdown.select-style-underlined .sleeve span.placeholder:after*/.dropdown.select-style-underlined.sc-biggive-form-field-select .sleeve.sc-biggive-form-field-select span.placeholder.sc-biggive-form-field-select:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center}/*!@.dropdown .options*/.dropdown.sc-biggive-form-field-select .options.sc-biggive-form-field-select{max-height:200px;overflow-x:hidden;overflow-y:scroll;background-color:#FFFFFF;position:absolute;display:none;z-index:1;left:0;right:0;border-left:1px solid #2C089B;border-right:1px solid #2C089B;border-bottom:1px solid #2C089B}/*!@.dropdown.active .options*/.dropdown.active.sc-biggive-form-field-select .options.sc-biggive-form-field-select{display:block}/*!@.dropdown.noprompt*/.dropdown.noprompt.sc-biggive-form-field-select{margin-top:0}/*!@.options.grey*/.options.grey.sc-biggive-form-field-select{background-color:#F4F4F4}";
 
 class BiggiveFormFieldSelect {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.doSelectChange = createEvent(this, "doSelectChange", 7);
+    this.prompt = undefined;
     this.selectedValue = undefined;
     this.selectedLabel = undefined;
     this.selectStyle = 'bordered';
+    this.backgroundColour = undefined;
     this.spaceBelow = 0;
     this.placeholder = undefined;
   }
@@ -7331,7 +7333,7 @@ class BiggiveFormFieldSelect {
     }
   }
   render() {
-    return (hAsync("div", { class: 'dropdown space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, hAsync("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, hAsync("span", { class: "placeholder" }, this.selectedLabel === null || this.selectedLabel === undefined ? this.placeholder : this.selectedLabel)), hAsync("div", { class: "options" }, hAsync("slot", null))));
+    return (hAsync("div", { class: 'dropdown space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + (this.prompt === null ? '  noprompt' : '') }, hAsync("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, hAsync("span", { class: "placeholder" }, this.selectedLabel === null || this.selectedLabel === undefined ? this.placeholder : this.selectedLabel)), hAsync("div", { class: 'options' + (this.backgroundColour === 'grey' ? ' grey' : '') }, hAsync("slot", null)), this.prompt && hAsync("div", { class: 'prompt' + (this.backgroundColour === 'grey' ? ' grey' : '') }, this.prompt)));
   }
   get el() { return getElement(this); }
   static get style() { return biggiveFormFieldSelectCss; }
@@ -7339,9 +7341,11 @@ class BiggiveFormFieldSelect {
     "$flags$": 9,
     "$tagName$": "biggive-form-field-select",
     "$members$": {
+      "prompt": [1],
       "selectedValue": [1, "selected-value"],
       "selectedLabel": [1, "selected-label"],
       "selectStyle": [1, "select-style"],
+      "backgroundColour": [1, "background-colour"],
       "spaceBelow": [2, "space-below"],
       "placeholder": [1]
     },
@@ -7351,7 +7355,7 @@ class BiggiveFormFieldSelect {
   }; }
 }
 
-const biggiveFormFieldSelectOptionCss = "/*!@a*/a.sc-biggive-form-field-select-option{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-form-field-select-option:hover{text-decoration:none}/*!@:host*/.sc-biggive-form-field-select-option-h{display:contents}/*!@.option*/.option.sc-biggive-form-field-select-option{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;padding:2px 10px}/*!@.option:hover*/.option.sc-biggive-form-field-select-option:hover{background-color:#2C089B;color:#FFFFFF;cursor:pointer}";
+const biggiveFormFieldSelectOptionCss = "/*!@a*/a.sc-biggive-form-field-select-option{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-form-field-select-option:hover{text-decoration:none}/*!@:host*/.sc-biggive-form-field-select-option-h{display:contents}/*!@.option*/.option.sc-biggive-form-field-select-option{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;padding:2px 10px;z-index:3}/*!@.option:hover*/.option.sc-biggive-form-field-select-option:hover{background-color:#2C089B;color:#FFFFFF;cursor:pointer}";
 
 class BiggiveFormFieldSelectOption {
   constructor(hostRef) {
@@ -8555,11 +8559,13 @@ class BiggiveTable {
   }; }
 }
 
-const biggiveTextInputCss = "/*!@a*/a.sc-biggive-text-input{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-text-input:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-text-input{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-text-input{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-text-input{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-text-input{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-text-input{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-text-input{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-text-input{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-text-input{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-text-input{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-text-input{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-text-input{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-text-input{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-text-input{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-text-input{margin-bottom:60px}/*!@:host*/.sc-biggive-text-input-h{display:contents}/*!@.text-input*/.text-input.sc-biggive-text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}/*!@.text-input .currency-symbol*/.text-input.sc-biggive-text-input .currency-symbol.sc-biggive-text-input{float:left}/*!@.text-input .prompt*/.text-input.sc-biggive-text-input .prompt.sc-biggive-text-input{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}/*!@.text-input.select-style-bordered .sleeve*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave:after*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
+const biggiveTextInputCss = "/*!@a*/a.sc-biggive-text-input{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-text-input:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-text-input{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-text-input{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-text-input{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-text-input{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-text-input{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-text-input{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-text-input{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-text-input{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-text-input{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-text-input{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-text-input{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-text-input{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-text-input{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-text-input{margin-bottom:60px}/*!@:host*/.sc-biggive-text-input-h{display:contents}/*!@.text-input*/.text-input.sc-biggive-text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}/*!@.text-input .currency-symbol*/.text-input.sc-biggive-text-input .currency-symbol.sc-biggive-text-input{position:absolute}/*!@.text-input .prompt*/.text-input.sc-biggive-text-input .prompt.sc-biggive-text-input{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}/*!@.text-input.select-style-bordered .sleeve*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave:after*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
 
 /**
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
+ *
+ * Please ensure input is styled as width: 100%.
  */
 class BiggiveTextInput {
   constructor(hostRef) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@biggive/components",
   "_comment": "Version number below is automatically replaced during CircleCI build.",
-  "version": "202305101345.0.0",
+  "version": "202305161606.0.0",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",