@biggive/components 202309201242.0.0 → 202309211700.0.0

package/dist/collection/components/biggive-biography-card/biggive-biography-card.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -111,6 +113,31 @@ a:hover {
   background-color: #F07D00;
 }
 
+.background-colour-hover-brand-cc-red:hover,
+.background-colour-brand-cc-red {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-wgmf-purple:hover,
+.background-colour-brand-wgmf-purple {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-gmf-green:hover,
+.background-colour-brand-gmf-green {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-emf-yellow:hover,
+.background-colour-brand-emf-yellow {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-c4c-orange:hover,
+.background-colour-brand-c4c-orange {
+  background-color: #F07D00;
+}
+
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
@@ -201,6 +228,31 @@ a:hover {
   color: #F07D00;
 }
 
+.text-colour-hover-brand-cc-red:hover,
+.text-colour-brand-cc-red {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-wgmf-purple:hover,
+.text-colour-brand-wgmf-purple {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-gmf-green:hover,
+.text-colour-brand-gmf-green {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-emf-yellow:hover,
+.text-colour-brand-emf-yellow {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-c4c-orange:hover,
+.text-colour-brand-c4c-orange {
+  color: #F07D00;
+}
+
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;
@@ -282,12 +334,30 @@ a:hover {
 .container.background-colour-brand-5 .image-wrap {
   background-color: #F07D00;
 }
-.container.background-colour-brand-6 .image-wrap {
-  background-color: #62CFC9;
+.container.background-colour-brand-cc-red .image-wrap {
+  background-color: #B30510;
+}
+.container.background-colour-brand-wgmf-purple .image-wrap {
+  background-color: #6E0887;
+}
+.container.background-colour-brand-gmf-green .image-wrap {
+  background-color: #50B400;
+}
+.container.background-colour-brand-emf-yellow .image-wrap {
+  background-color: #FFE500;
+}
+.container.background-colour-brand-c4c-orange .image-wrap {
+  background-color: #F07D00;
 }
 .container.background-colour-brand-afa-pink .image-wrap {
   background-color: #BF387D;
 }
+.container.background-colour-brand-mhf-turquoise .image-wrap {
+  background-color: #62CFC9;
+}
+.container.background-colour-brand-grey .image-wrap {
+  background-color: #CBC8C8;
+}
 .container.background-colour-white .image-wrap {
   background-color: #FFFFFF;
 }
@@ -306,6 +376,9 @@ a:hover {
 .container.background-colour-grey-dark .image-wrap {
   background-color: #4A4A4A;
 }
+.container.background-colour-brand-6 .image-wrap {
+  background-color: #62CFC9;
+}
 .container.text-align-center {
   text-align: center;
 }
@@ -470,23 +543,95 @@ a:hover {
 .container .sleeve.border-width-6.border-colour-brand-5 {
   border: 60px solid #F07D00;
 }
-.container .sleeve.border-width-1.border-colour-brand-6 {
-  border: 5px solid #62CFC9;
+.container .sleeve.border-width-1.border-colour-brand-cc-red {
+  border: 5px solid #B30510;
 }
-.container .sleeve.border-width-2.border-colour-brand-6 {
-  border: 10px solid #62CFC9;
+.container .sleeve.border-width-2.border-colour-brand-cc-red {
+  border: 10px solid #B30510;
 }
-.container .sleeve.border-width-3.border-colour-brand-6 {
-  border: 15px solid #62CFC9;
+.container .sleeve.border-width-3.border-colour-brand-cc-red {
+  border: 15px solid #B30510;
 }
-.container .sleeve.border-width-4.border-colour-brand-6 {
-  border: 30px solid #62CFC9;
+.container .sleeve.border-width-4.border-colour-brand-cc-red {
+  border: 30px solid #B30510;
 }
-.container .sleeve.border-width-5.border-colour-brand-6 {
-  border: 45px solid #62CFC9;
+.container .sleeve.border-width-5.border-colour-brand-cc-red {
+  border: 45px solid #B30510;
 }
-.container .sleeve.border-width-6.border-colour-brand-6 {
-  border: 60px solid #62CFC9;
+.container .sleeve.border-width-6.border-colour-brand-cc-red {
+  border: 60px solid #B30510;
+}
+.container .sleeve.border-width-1.border-colour-brand-wgmf-purple {
+  border: 5px solid #6E0887;
+}
+.container .sleeve.border-width-2.border-colour-brand-wgmf-purple {
+  border: 10px solid #6E0887;
+}
+.container .sleeve.border-width-3.border-colour-brand-wgmf-purple {
+  border: 15px solid #6E0887;
+}
+.container .sleeve.border-width-4.border-colour-brand-wgmf-purple {
+  border: 30px solid #6E0887;
+}
+.container .sleeve.border-width-5.border-colour-brand-wgmf-purple {
+  border: 45px solid #6E0887;
+}
+.container .sleeve.border-width-6.border-colour-brand-wgmf-purple {
+  border: 60px solid #6E0887;
+}
+.container .sleeve.border-width-1.border-colour-brand-gmf-green {
+  border: 5px solid #50B400;
+}
+.container .sleeve.border-width-2.border-colour-brand-gmf-green {
+  border: 10px solid #50B400;
+}
+.container .sleeve.border-width-3.border-colour-brand-gmf-green {
+  border: 15px solid #50B400;
+}
+.container .sleeve.border-width-4.border-colour-brand-gmf-green {
+  border: 30px solid #50B400;
+}
+.container .sleeve.border-width-5.border-colour-brand-gmf-green {
+  border: 45px solid #50B400;
+}
+.container .sleeve.border-width-6.border-colour-brand-gmf-green {
+  border: 60px solid #50B400;
+}
+.container .sleeve.border-width-1.border-colour-brand-emf-yellow {
+  border: 5px solid #FFE500;
+}
+.container .sleeve.border-width-2.border-colour-brand-emf-yellow {
+  border: 10px solid #FFE500;
+}
+.container .sleeve.border-width-3.border-colour-brand-emf-yellow {
+  border: 15px solid #FFE500;
+}
+.container .sleeve.border-width-4.border-colour-brand-emf-yellow {
+  border: 30px solid #FFE500;
+}
+.container .sleeve.border-width-5.border-colour-brand-emf-yellow {
+  border: 45px solid #FFE500;
+}
+.container .sleeve.border-width-6.border-colour-brand-emf-yellow {
+  border: 60px solid #FFE500;
+}
+.container .sleeve.border-width-1.border-colour-brand-c4c-orange {
+  border: 5px solid #F07D00;
+}
+.container .sleeve.border-width-2.border-colour-brand-c4c-orange {
+  border: 10px solid #F07D00;
+}
+.container .sleeve.border-width-3.border-colour-brand-c4c-orange {
+  border: 15px solid #F07D00;
+}
+.container .sleeve.border-width-4.border-colour-brand-c4c-orange {
+  border: 30px solid #F07D00;
+}
+.container .sleeve.border-width-5.border-colour-brand-c4c-orange {
+  border: 45px solid #F07D00;
+}
+.container .sleeve.border-width-6.border-colour-brand-c4c-orange {
+  border: 60px solid #F07D00;
 }
 .container .sleeve.border-width-1.border-colour-brand-afa-pink {
   border: 5px solid #BF387D;
@@ -506,6 +651,42 @@ a:hover {
 .container .sleeve.border-width-6.border-colour-brand-afa-pink {
   border: 60px solid #BF387D;
 }
+.container .sleeve.border-width-1.border-colour-brand-mhf-turquoise {
+  border: 5px solid #62CFC9;
+}
+.container .sleeve.border-width-2.border-colour-brand-mhf-turquoise {
+  border: 10px solid #62CFC9;
+}
+.container .sleeve.border-width-3.border-colour-brand-mhf-turquoise {
+  border: 15px solid #62CFC9;
+}
+.container .sleeve.border-width-4.border-colour-brand-mhf-turquoise {
+  border: 30px solid #62CFC9;
+}
+.container .sleeve.border-width-5.border-colour-brand-mhf-turquoise {
+  border: 45px solid #62CFC9;
+}
+.container .sleeve.border-width-6.border-colour-brand-mhf-turquoise {
+  border: 60px solid #62CFC9;
+}
+.container .sleeve.border-width-1.border-colour-brand-grey {
+  border: 5px solid #CBC8C8;
+}
+.container .sleeve.border-width-2.border-colour-brand-grey {
+  border: 10px solid #CBC8C8;
+}
+.container .sleeve.border-width-3.border-colour-brand-grey {
+  border: 15px solid #CBC8C8;
+}
+.container .sleeve.border-width-4.border-colour-brand-grey {
+  border: 30px solid #CBC8C8;
+}
+.container .sleeve.border-width-5.border-colour-brand-grey {
+  border: 45px solid #CBC8C8;
+}
+.container .sleeve.border-width-6.border-colour-brand-grey {
+  border: 60px solid #CBC8C8;
+}
 .container .sleeve.border-width-1.border-colour-white {
   border: 5px solid #FFFFFF;
 }
@@ -614,6 +795,24 @@ a:hover {
 .container .sleeve.border-width-6.border-colour-grey-dark {
   border: 60px solid #4A4A4A;
 }
+.container .sleeve.border-width-1.border-colour-brand-6 {
+  border: 5px solid #62CFC9;
+}
+.container .sleeve.border-width-2.border-colour-brand-6 {
+  border: 10px solid #62CFC9;
+}
+.container .sleeve.border-width-3.border-colour-brand-6 {
+  border: 15px solid #62CFC9;
+}
+.container .sleeve.border-width-4.border-colour-brand-6 {
+  border: 30px solid #62CFC9;
+}
+.container .sleeve.border-width-5.border-colour-brand-6 {
+  border: 45px solid #62CFC9;
+}
+.container .sleeve.border-width-6.border-colour-brand-6 {
+  border: 60px solid #62CFC9;
+}
 .container .sleeve.circle-true {
   overflow: hidden;
   border-radius: 50%;

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

@@ -139,7 +139,7 @@ export class BiggiveBiographyCard {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -162,7 +162,7 @@ export class BiggiveBiographyCard {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",

package/dist/collection/components/biggive-boxed-content/biggive-boxed-content.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -50,6 +52,31 @@ a:hover {
   background-color: #F07D00;
 }
 
+.background-colour-hover-brand-cc-red:hover,
+.background-colour-brand-cc-red {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-wgmf-purple:hover,
+.background-colour-brand-wgmf-purple {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-gmf-green:hover,
+.background-colour-brand-gmf-green {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-emf-yellow:hover,
+.background-colour-brand-emf-yellow {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-c4c-orange:hover,
+.background-colour-brand-c4c-orange {
+  background-color: #F07D00;
+}
+
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;

package/dist/collection/components/biggive-branded-image/biggive-branded-image.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-button/biggive-button.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -208,6 +210,56 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-brand-cc-red {
+  color: #FFFFFF;
+  background-color: #B30510;
+  border-color: #B30510;
+}
+.button-brand-cc-red:hover {
+  color: #B30510;
+  background-color: #FFFFFF;
+}
+
+.button-brand-wgmf-purple {
+  color: #FFFFFF;
+  background-color: #6E0887;
+  border-color: #6E0887;
+}
+.button-brand-wgmf-purple:hover {
+  color: #6E0887;
+  background-color: #FFFFFF;
+}
+
+.button-brand-gmf-green {
+  color: #FFFFFF;
+  background-color: #50B400;
+  border-color: #50B400;
+}
+.button-brand-gmf-green:hover {
+  color: #50B400;
+  background-color: #FFFFFF;
+}
+
+.button-brand-emf-yellow {
+  color: #FFFFFF;
+  background-color: #FFE500;
+  border-color: #FFE500;
+}
+.button-brand-emf-yellow:hover {
+  color: #FFE500;
+  background-color: #FFFFFF;
+}
+
+.button-brand-c4c-orange {
+  color: #FFFFFF;
+  background-color: #F07D00;
+  border-color: #F07D00;
+}
+.button-brand-c4c-orange:hover {
+  color: #F07D00;
+  background-color: #FFFFFF;
+}
+
 .button-brand-afa-pink {
   color: #FFFFFF;
   background-color: #BF387D;
@@ -497,6 +549,76 @@ a:hover {
   background-color: transparent;
 }
 
+.button-clear-brand-cc-red {
+  color: #B30510;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-cc-red:hover {
+  color: #B30510;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-wgmf-purple {
+  color: #6E0887;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-wgmf-purple:hover {
+  color: #6E0887;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-gmf-green {
+  color: #50B400;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-gmf-green:hover {
+  color: #50B400;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-emf-yellow {
+  color: #FFE500;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-emf-yellow:hover {
+  color: #FFE500;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-c4c-orange {
+  color: #F07D00;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-c4c-orange:hover {
+  color: #F07D00;
+  text-decoration: none;
+  background-color: transparent;
+}
+
 .button-clear-brand-afa-pink {
   color: #BF387D;
   background-color: transparent;

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -136,6 +138,31 @@ h5, .heading-5 {
   color: #F07D00;
 }
 
+.text-colour-hover-brand-cc-red:hover,
+.text-colour-brand-cc-red {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-wgmf-purple:hover,
+.text-colour-brand-wgmf-purple {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-gmf-green:hover,
+.text-colour-brand-gmf-green {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-emf-yellow:hover,
+.text-colour-brand-emf-yellow {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-c4c-orange:hover,
+.text-colour-brand-c4c-orange {
+  color: #F07D00;
+}
+
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;

package/dist/collection/components/biggive-campaign-card/biggive-campaign-card.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-carousel/biggive-carousel.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -106,6 +108,31 @@ a:hover {
   color: #F07D00;
 }
 
+.text-colour-hover-brand-cc-red:hover,
+.text-colour-brand-cc-red {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-wgmf-purple:hover,
+.text-colour-brand-wgmf-purple {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-gmf-green:hover,
+.text-colour-brand-gmf-green {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-emf-yellow:hover,
+.text-colour-brand-emf-yellow {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-c4c-orange:hover,
+.text-colour-brand-c4c-orange {
+  color: #F07D00;
+}
+
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;

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

@@ -128,7 +128,7 @@ export class BiggiveCarousel {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -151,7 +151,7 @@ export class BiggiveCarousel {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",