@guardian/interactive-component-library 0.1.0-alpha.24 → 0.1.0-alpha.26

package/dist/style.css

@@ -299,8 +299,11 @@ button {
 .bg-color--dup {
   background-color: var(--dup) !important;
 }
-.bg-color--al {
-  background-color: var(--al) !important;
+.bg-color--alliance {
+  background-color: var(--alliance) !important;
+}
+.bg-color--alba {
+  background-color: var(--alba) !important;
 }
 .bg-color--uup {
   background-color: var(--uup) !important;
@@ -326,9 +329,6 @@ button {
 .bg-color--speaker {
   background-color: var(--speaker) !important;
 }
-.bg-color--tig {
-  background-color: var(--tig) !important;
-}
 .bg-color--undeclared {
   background-color: var(--undeclared) !important;
 }
@@ -357,8 +357,11 @@ button {
 .fill-color--dup {
   fill: var(--dup) !important;
 }
-.fill-color--al {
-  fill: var(--al) !important;
+.fill-color--alliance {
+  fill: var(--alliance) !important;
+}
+.fill-color--alba {
+  fill: var(--alba) !important;
 }
 .fill-color--uup {
   fill: var(--uup) !important;
@@ -384,9 +387,6 @@ button {
 .fill-color--speaker {
   fill: var(--speaker) !important;
 }
-.fill-color--tig {
-  fill: var(--tig) !important;
-}
 .fill-color--undeclared {
   fill: var(--undeclared) !important;
 }
@@ -415,8 +415,11 @@ button {
 .stop-color--dup {
   stop-color: var(--dup) !important;
 }
-.stop-color--al {
-  stop-color: var(--al) !important;
+.stop-color--alliance {
+  stop-color: var(--alliance) !important;
+}
+.stop-color--alba {
+  stop-color: var(--alba) !important;
 }
 .stop-color--uup {
   stop-color: var(--uup) !important;
@@ -442,9 +445,6 @@ button {
 .stop-color--speaker {
   stop-color: var(--speaker) !important;
 }
-.stop-color--tig {
-  stop-color: var(--tig) !important;
-}
 .stop-color--undeclared {
   stop-color: var(--undeclared) !important;
 }
@@ -473,8 +473,11 @@ button {
 .stroke-color--dup {
   stroke: var(--dup) !important;
 }
-.stroke-color--al {
-  stroke: var(--al) !important;
+.stroke-color--alliance {
+  stroke: var(--alliance) !important;
+}
+.stroke-color--alba {
+  stroke: var(--alba) !important;
 }
 .stroke-color--uup {
   stroke: var(--uup) !important;
@@ -500,9 +503,6 @@ button {
 .stroke-color--speaker {
   stroke: var(--speaker) !important;
 }
-.stroke-color--tig {
-  stroke: var(--tig) !important;
-}
 .stroke-color--undeclared {
   stroke: var(--undeclared) !important;
 }
@@ -531,8 +531,11 @@ button {
 .color--dup {
   color: var(--dup) !important;
 }
-.color--al {
-  color: var(--al) !important;
+.color--alliance {
+  color: var(--alliance) !important;
+}
+.color--alba {
+  color: var(--alba) !important;
 }
 .color--uup {
   color: var(--uup) !important;
@@ -558,9 +561,6 @@ button {
 .color--speaker {
   color: var(--speaker) !important;
 }
-.color--tig {
-  color: var(--tig) !important;
-}
 .color--undeclared {
   color: var(--undeclared) !important;
 }
@@ -586,8 +586,11 @@ button {
 .border-color--dup {
   border-color: var(--dup) !important;
 }
-.border-color--al {
-  border-color: var(--al) !important;
+.border-color--alliance {
+  border-color: var(--alliance) !important;
+}
+.border-color--alba {
+  border-color: var(--alba) !important;
 }
 .border-color--uup {
   border-color: var(--uup) !important;
@@ -613,9 +616,6 @@ button {
 .border-color--speaker {
   border-color: var(--speaker) !important;
 }
-.border-color--tig {
-  border-color: var(--tig) !important;
-}
 .border-color--undeclared {
   border-color: var(--undeclared) !important;
 }
@@ -644,8 +644,11 @@ button {
 .before-color--dup:before {
   background-color: var(--dup) !important;
 }
-.before-color--al:before {
-  background-color: var(--al) !important;
+.before-color--alliance:before {
+  background-color: var(--alliance) !important;
+}
+.before-color--alba:before {
+  background-color: var(--alba) !important;
 }
 .before-color--uup:before {
   background-color: var(--uup) !important;
@@ -671,9 +674,6 @@ button {
 .before-color--speaker:before {
   background-color: var(--speaker) !important;
 }
-.before-color--tig:before {
-  background-color: var(--tig) !important;
-}
 .before-color--undeclared:before {
   background-color: var(--undeclared) !important;
 }
@@ -750,6 +750,12 @@ button {
 .bg-color--undeclared {
   background-color: var(--undeclared) !important;
 }
+.bg-color--declared {
+  background-color: var(--declared) !important;
+}
+.bg-color--new-group-01 {
+  background-color: var(--new-group-01) !important;
+}
 /* FILL ----------------------------------------------------------- */
 .fill-color--left {
   fill: var(--left) !important;
@@ -781,6 +787,9 @@ button {
 .fill-color--undeclared {
   fill: var(--undeclared) !important;
 }
+.fill-color--new-group-01 {
+  fill: var(--new-group-01) !important;
+}
 /* STROKE-COLOR --------------------------------------------------- */
 .stroke-color--left {
   stroke: var(--left) !important;
@@ -812,6 +821,9 @@ button {
 .stroke-color--undeclared {
   stroke: var(--undeclared) !important;
 }
+.stroke-color--new-group-01 {
+  stroke: var(--new-group-01) !important;
+}
 /* COLOR ----------------------------------------------------------- */
 .color--left {
   color: var(--left) !important;
@@ -843,6 +855,9 @@ button {
 .color--undeclared {
   color: var(--undeclared) !important;
 }
+.color--new-group-01 {
+  color: var(--new-group-01) !important;
+}
 /* BORDER-COLOR ----------------------------------------------------- */
 .border-color--left {
   border-color: var(--left) !important;
@@ -874,6 +889,9 @@ button {
 .border-color--undeclared {
   border-color: var(--undeclared) !important;
 }
+.border-color--new-group-01 {
+  border-color: var(--undeclared) !important;
+}
 /* BEFORE-ELEMENT-COLOR ----------------------------------------------------- */
 .before-color--left:before {
   background-color: var(--left) !important;
@@ -905,6 +923,9 @@ button {
 .before-color--undeclared:before {
   background-color: var(--undeclared) !important;
 }
+.before-color--new-group-01:before {
+  background-color: var(--new-group-01) !important;
+}
 body {
   --border-divider-color: #DCDCDC;
   --primary-text-color: #121212;
@@ -934,49 +955,51 @@ body {
   --news-grey-04: #BABABA;
   --news-grey-05: #DCDCDC;
   --news-grey-06: #F3F3F3;
-  --con: #0077B6;
-  --lab: #C70000;
-  --libdem: #E05E00;
-  --green: #39A566;
-  --ukip: #BB3B80;
-  --snp: #F5DC00;
-  --dup: #8B0000;
-  --al: #C9BB19;
+  --con: #0077b6;
+  --lab: #c70000;
+  --libdem: #e05e00;
+  --green: #39a566;
+  --ukip: #bb3b80;
+  --snp: #f5dc00;
+  --dup: #8b0000;
+  --alliance: #c9bb19;
+  --alba: #2f3192;
   --uup: #004975;
-  --sdlp: #23B4A9;
-  --pc: #135E58;
-  --sf: #22874D;
-  --reform: #3DBBE2;
+  --sdlp: #23b4a9;
+  --pc: #135e58;
+  --sf: #22874d;
+  --reform: #3dbbe2;
   --ind: #333333;
   --other: #848484;
+  --speaker: #848484;
   --noc: #c8c8c8;
-  --speaker: #767676;
-  --tig: #333;
-  --undeclared: #E7E7E7;
-  --left: #8B0000;
+  --undeclared: #e7e7e7;
+  --left: #8b0000;
   --left-01: #e3b0a3;
   --left-02: #bc634f;
-  --sd: #C70000;
-  --sd-01:#fbb8a6;
-  --sd-02:#e77054;
-  --greenefa: #39A566;
+  --sd: #c70000;
+  --sd-01: #fbb8a6;
+  --sd-02: #e77054;
+  --greenefa: #39a566;
   --greenefa-01: #c1e1ca;
   --greenefa-02: #82c397;
-  --renew: #FF7F0F;
+  --renew: #ff7f0f;
   --renew-01: #ffd8ba;
   --renew-02: #ffaf71;
-  --epp: #3dBBE2;
+  --epp: #3dbbe2;
   --epp-01: #cae8f5;
   --epp-02: #8fd1ec;
-  --ecr: #0079B7;
+  --ecr: #0079b7;
   --ecr-01: #bdcfe7;
   --ecr-02: #77a2ce;
-  --id:#DC559D;
-  --id-01:#edc0d3;
-  --id-02:#d681a9;
+  --id: #dc559d;
+  --id-01: #edc0d3;
+  --id-02: #d681a9;
   --ni: #606060;
   --other: #a0a0a0;
   --undeclared: #ededed;
+  --declared: #fff;
+  --new-group-01: #333333;
 }
 @media (prefers-color-scheme: dark) {
   body.ios,
@@ -1010,46 +1033,49 @@ body {
     --news-grey-06: #383838;
     --con: #009ae1;
     --lab: #dc2e1c;
-    --libdem: #FF7F0F;
-    --green: #39A566;
-    --ukip: #DC559D;
-    --snp: #F5DC00;
-    --dup: #B23C2D;
-    --al: #ab9f00;
+    --libdem: #ff7f0f;
+    --green: #39a566;
+    --ukip: #dc559d;
+    --snp: #f5dc00;
+    --alba: #3c3eb9;
+    --dup: #b23c2d;
+    --alliance: #ab9f00;
     --uup: #346896;
     --sdlp: #28b8ad;
     --pc: #37716b;
-    --sf: #22874D;
-    --reform: #3DBBE2;
-    --ind: #A1A1A1;
+    --sf: #22874d;
+    --reform: #3dbbe2;
+    --ind: #a1a1a1;
+    --noc: #333333;
     --other: #707070;
     --speaker: #707070;
-    --tig: #494949;
     --undeclared: #494949;
-    --left: #8B0000;
+    --left: #8b0000;
     --left-01: #e3b0a3;
     --left-02: #bc634f;
-    --sd: #C70000;
-    --sd-01:#fbb8a6;
-    --sd-02:#e77054;
-    --greenefa: #39A566;
+    --sd: #c70000;
+    --sd-01: #fbb8a6;
+    --sd-02: #e77054;
+    --greenefa: #39a566;
     --greenefa-01: #c1e1ca;
     --greenefa-02: #82c397;
-    --renew: #FF7F0F;
+    --renew: #ff7f0f;
     --renew-01: #ffd8ba;
     --renew-02: #ffaf71;
-    --epp: #3dBBE2;
+    --epp: #3dbbe2;
     --epp-01: #cae8f5;
     --epp-02: #8fd1ec;
-    --ecr: #0079B7;
+    --ecr: #0079b7;
     --ecr-01: #bdcfe7;
     --ecr-02: #77a2ce;
-    --id:#DC559D;
-    --id-01:#edc0d3;
-    --id-02:#d681a9;
-    --ni: #A1A1A1;
+    --id: #dc559d;
+    --id-01: #edc0d3;
+    --id-02: #d681a9;
+    --ni: #a1a1a1;
     --other: #a0a0a0;
     --undeclared: #ededed;
+    --declared: #bababa;
+    --new-group-01: #cccccc;
   }
 }._svg_b5io0_1 {
   display: block;
@@ -2193,12 +2219,12 @@ body.android {
     transform: translateY(0);
   }
 }
-._container_iozsb_1 {
+._container_1enis_1 {
   position: relative;
   display: inline-block;
 }
 
-._button_iozsb_6 {
+._button_1enis_6 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2209,24 +2235,24 @@ body.android {
   padding: var(--space-2) var(--space-3);
 }
 
-._button_iozsb_6:hover:enabled {
+._button_1enis_6:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._icon_iozsb_22 {
+._icon_1enis_22 {
   width: 17px;
   height: 17px;
 }
 
-._title_iozsb_27 {
+._title_1enis_27 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-medium);
   line-height: var(--sans-line-height);
 }
 
-._popout_iozsb_34 {
+._popout_1enis_34 {
   min-width: 100%;
   background-color: var(--secondary-bg-color);
 
@@ -2243,14 +2269,21 @@ body.android {
   gap: var(--space-2);
 }
 
-._hint_iozsb_51 {
+._hint_1enis_51 {
   color: var(--secondary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._option_iozsb_58 {
+._groupHeader_1enis_58 {
+  color: var(--primary-text-color);
+  font-family: var(--text-sans);
+  font-size: var(--sans-xsmall);
+  line-height: var(--sans-line-height);
+}
+
+._option_1enis_65 {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -2266,17 +2299,17 @@ body.android {
   background-color: var(--primary-bg-color);
 }
 
-._option_iozsb_58:hover:enabled {
+._option_1enis_65:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._optionIcon_iozsb_79 {
+._optionIcon_1enis_86 {
   width: 23px;
   height: 23px;
 }
 
-._optionTitle_iozsb_84 {
+._optionTitle_1enis_91 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
@@ -2284,22 +2317,23 @@ body.android {
   font-weight: 700;
 }
 
-._optionDescription_iozsb_92 {
+._optionDescription_1enis_99 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._checkmark_iozsb_99 {
+._checkmark_1enis_106 {
   position: absolute;
   top: 4px;
   right: 6px;
 }
 
-._checkmarkPath_iozsb_105 {
+._checkmarkPath_1enis_112 {
   fill: var(--primary-text-color);
-}body {
+}
+body {
   --top-inset: 0;
 }
 
@@ -2307,63 +2341,64 @@ body.android {
   --top-inset: 58px;
 }
 
-._coalitionsWrapper_1ahqy_9 {
+._coalitionsWrapper_4egbd_9 {
   max-width: 100%;
   position: relative;
 }
 
-._coalitionsContainer_1ahqy_14 {
+._coalitionsContainer_4egbd_14 {
   padding-top: 60px;
 }
 @media (min-width: 46.25em) {
-  ._coalitionsContainer_1ahqy_14 {
+  ._coalitionsContainer_4egbd_14 {
     padding-top: 0px;
   }
 }
 
-._coalition_1ahqy_9 {
-  margin-bottom: var(--space-4);
+._coalition_4egbd_9 {
+  margin-bottom: var(--space-0);
 }
 
-._title_1ahqy_27,
-._description_1ahqy_28 {
+._title_4egbd_27,
+._description_4egbd_28 {
   font-family: var(--text-sans);
   font-size: var(--sans-small);
   line-height: var(--sans-line-height);
   color: var(--primary-text-color);
 }
 
-._title_1ahqy_27 {
+._title_4egbd_27 {
   font-weight: 700;
 }
 
-._description_1ahqy_28 {
+._description_4egbd_28 {
   margin-bottom: var(--space-1);
 }
 
-._thresholdText_1ahqy_43 {
+._thresholdText_4egbd_43 {
   font-family: var(--text-sans);
   font-size: var(--sans-small);
   line-height: var(--sans-line-height);
   color: var(--primary-text-color);
   max-width: 150px;
 }
-._thresholdText_1ahqy_43 span {
+._thresholdText_4egbd_43 span {
   display: block;
 }
 
-._thresholdTextBold_1ahqy_54 {
+._thresholdTextBold_4egbd_54 {
   font-weight: 700;
   margin-bottom: var(--space-1);
   font-size: var(--sans-small);
   line-height: var(--sans-line-height);
 }
 
-._thresholdDot_1ahqy_61, ._thresholdLine_1ahqy_61 {
+._thresholdDot_4egbd_61,
+._thresholdLine_4egbd_62 {
   background: var(--primary-text-color);
 }
 
-._thresholdDot_1ahqy_61 {
+._thresholdDot_4egbd_61 {
   border-radius: 50px;
 }body {
   --top-inset: 0;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.24",
+  "version": "v0.1.0-alpha.26",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/guardian/interactive-component-library"
+    "url": "git+https://github.com/guardian/interactive-component-library.git"
   },
   "type": "module",
   "files": [