From db58882a15fc70818e5f64da11081753976ed5a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 26 Jul 2017 16:11:23 +0100
Subject: [PATCH] fix(ui-toolkit): make Card compatible with grid system

---
 packages/cp-frontend/package.json             |  2 +-
 .../src/containers/services/list.js           |  4 +-
 .../.snapguidist/__snapshots__/Card-0.snap    |  2 +-
 .../.snapguidist/__snapshots__/Card-10.snap   | 10 +--
 .../.snapguidist/__snapshots__/Card-2.snap    |  2 +-
 .../.snapguidist/__snapshots__/Card-4.snap    |  4 +-
 .../.snapguidist/__snapshots__/Card-6.snap    |  4 +-
 .../.snapguidist/__snapshots__/Card-8.snap    |  2 +-
 .../__snapshots__/Checkbox-0.snap             |  8 +-
 .../__snapshots__/Checkbox-10.snap            | 32 +++----
 .../__snapshots__/Checkbox-12.snap            | 32 +++----
 .../__snapshots__/Checkbox-14.snap            |  8 +-
 .../__snapshots__/Checkbox-16.snap            | 16 ++--
 .../__snapshots__/Checkbox-2.snap             |  8 +-
 .../__snapshots__/Checkbox-4.snap             |  8 +-
 .../__snapshots__/Checkbox-6.snap             |  8 +-
 .../__snapshots__/Checkbox-8.snap             | 32 +++----
 .../__snapshots__/CloseButton-0.snap          |  2 +-
 .../__snapshots__/Dropdown-0.snap             |  6 +-
 .../.snapguidist/__snapshots__/Header-0.snap  |  6 +-
 .../.snapguidist/__snapshots__/Input-10.snap  |  4 +-
 .../.snapguidist/__snapshots__/Input-2.snap   |  4 +-
 .../.snapguidist/__snapshots__/Input-4.snap   | 16 ++--
 .../.snapguidist/__snapshots__/Input-6.snap   | 16 ++--
 .../.snapguidist/__snapshots__/Input-8.snap   | 16 ++--
 .../__snapshots__/ProgressBar-0.snap          | 24 ++---
 .../.snapguidist/__snapshots__/Radio-0.snap   | 28 +++---
 .../.snapguidist/__snapshots__/Radio-10.snap  | 22 ++---
 .../.snapguidist/__snapshots__/Radio-2.snap   | 22 ++---
 .../.snapguidist/__snapshots__/Radio-4.snap   | 88 +++++++++----------
 .../.snapguidist/__snapshots__/Radio-6.snap   | 88 +++++++++----------
 .../.snapguidist/__snapshots__/Radio-8.snap   | 88 +++++++++----------
 .../__snapshots__/SectionList-0.snap          | 26 +++---
 .../.snapguidist/__snapshots__/Select-0.snap  |  6 +-
 .../.snapguidist/__snapshots__/Select-10.snap | 24 ++---
 .../.snapguidist/__snapshots__/Select-12.snap | 24 ++---
 .../.snapguidist/__snapshots__/Select-14.snap | 24 ++---
 .../.snapguidist/__snapshots__/Select-16.snap |  6 +-
 .../.snapguidist/__snapshots__/Select-2.snap  |  2 +-
 .../.snapguidist/__snapshots__/Select-4.snap  |  6 +-
 .../.snapguidist/__snapshots__/Select-6.snap  |  6 +-
 .../.snapguidist/__snapshots__/Select-8.snap  |  6 +-
 .../.snapguidist/__snapshots__/Toggle-0.snap  | 28 +++---
 .../.snapguidist/__snapshots__/Toggle-2.snap  | 28 +++---
 .../.snapguidist/__snapshots__/Toggle-4.snap  | 20 ++---
 .../.snapguidist/__snapshots__/Toggle-6.snap  | 28 +++---
 packages/ui-toolkit/src/card/card.js          |  3 +
 47 files changed, 427 insertions(+), 422 deletions(-)

diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json
index 91320367..e6949b06 100644
--- a/packages/cp-frontend/package.json
+++ b/packages/cp-frontend/package.json
@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 react-scripts start",
     "start": "PORT=3069 react-scripts start",
-    "build": "react-scripts build",
+    "build": "NODE_ENV=production react-scripts build",
     "lint:css": "echo 0",
     "lint:js": "eslint . --fix",
     "lint": "redrun -s lint:*",
diff --git a/packages/cp-frontend/src/containers/services/list.js b/packages/cp-frontend/src/containers/services/list.js
index ff67ea62..36317813 100644
--- a/packages/cp-frontend/src/containers/services/list.js
+++ b/packages/cp-frontend/src/containers/services/list.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
+import forceArray from 'force-array';
+
 import ServicesQuery from '@graphql/Services.gql';
 import ServicesRestartMutation from '@graphql/ServicesRestartMutation.gql';
 import ServicesStopMutation from '@graphql/ServicesStopMutation.gql';
@@ -45,7 +47,7 @@ class ServiceList extends Component {
     } = this.props;
 
     if (
-      loading ||
+      (loading && !forceArray(services).length) ||
       (deploymentGroup.status === 'PROVISIONING' && !services.length)
     ) {
       return (
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-0.snap
index 35114ca8..d10854b9 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-0.snap
@@ -1,6 +1,6 @@
 exports[`Card-0 1`] = `
 <div
-  className="baseline-bICRiI vuCxY sc-gzVnrw hbXjIj"
+  className="baseline-bICRiI vuCxY sc-gzVnrw hTpgYp"
   name="card">
   <div
     className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-10.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-10.snap
index f3538188..28b4cedb 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-10.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-10.snap
@@ -1,9 +1,9 @@
 exports[`Card-10 1`] = `
 <div
-  className="baseline-bICRiI vuCxY sc-gzVnrw hbXjIj"
+  className="baseline-bICRiI vuCxY sc-gzVnrw hTpgYp"
   name="card">
   <div
-    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw EEjfB"
+    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw hZSQIi"
     name="card-header">
     <div
       className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
@@ -61,7 +61,7 @@ exports[`Card-10 1`] = `
     className="baseline-iMHSlr gIqaSF sc-gZMcBi uLhlE sc-iwsKbI fJJDmf"
     name="card-view">
     <div
-      className="baseline-bICRiI vuCxY sc-gzVnrw gFFWSQ"
+      className="baseline-bICRiI vuCxY sc-gzVnrw kZZgWu"
       name="card">
       <div
         className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
@@ -89,7 +89,7 @@ exports[`Card-10 1`] = `
       </div>
     </div>
     <div
-      className="baseline-bICRiI vuCxY sc-gzVnrw gFFWSQ"
+      className="baseline-bICRiI vuCxY sc-gzVnrw kZZgWu"
       name="card">
       <div
         className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
@@ -133,7 +133,7 @@ exports[`Card-10 1`] = `
       </div>
     </div>
     <div
-      className="baseline-bICRiI vuCxY sc-gzVnrw dTVoUi"
+      className="baseline-bICRiI vuCxY sc-gzVnrw fSUqRX"
       name="card">
       <div
         className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-2.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-2.snap
index 08f6adc3..3ea39c42 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-2.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-2.snap
@@ -1,6 +1,6 @@
 exports[`Card-2 1`] = `
 <div
-  className="baseline-bICRiI vuCxY sc-gzVnrw kzwIJz"
+  className="baseline-bICRiI vuCxY sc-gzVnrw esssyn"
   name="card">
   <div
     className="baseline-fRqHUu hfQLiT sc-iwsKbI jwPBgV"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-4.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-4.snap
index c680de36..71d00002 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-4.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-4.snap
@@ -1,9 +1,9 @@
 exports[`Card-4 1`] = `
 <div
-  className="baseline-bICRiI vuCxY sc-gzVnrw hbXjIj"
+  className="baseline-bICRiI vuCxY sc-gzVnrw hTpgYp"
   name="card">
   <div
-    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw EEjfB"
+    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw hZSQIi"
     name="card-header">
     <div
       className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-6.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-6.snap
index fdcc95b1..02c5eb9d 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-6.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-6.snap
@@ -1,9 +1,9 @@
 exports[`Card-6 1`] = `
 <div
-  className="baseline-bICRiI vuCxY sc-gzVnrw EEjfB"
+  className="baseline-bICRiI vuCxY sc-gzVnrw hZSQIi"
   name="card">
   <div
-    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw EEjfB"
+    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw hZSQIi"
     name="card-header">
     <div
       className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-8.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-8.snap
index d2d76e65..71e91158 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-8.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-8.snap
@@ -1,6 +1,6 @@
 exports[`Card-8 1`] = `
 <div
-  className="baseline-bICRiI vuCxY sc-gzVnrw jNGRmm"
+  className="baseline-bICRiI vuCxY sc-gzVnrw gnczvm"
   name="card">
   <div
     className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-0.snap
index 02906594..f3559c5e 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-0.snap
@@ -6,16 +6,16 @@ exports[`Checkbox-0 1`] = `
       className="toggle__InnerContainer-hKefxl bVmJyd"
       type="checkbox">
       <input
-        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-        id="bQgEPp"
+        className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+        id="kUzaG"
         type="checkbox" />
       <label
         className="toggle__Label-soSmI bQFovI"
-        htmlFor="bQgEPp" />
+        htmlFor="kUzaG" />
     </div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="tdcPZ">
+      htmlFor="cyGqyE">
       Check this out!
     </label>
   </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-10.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-10.snap
index 29c6c2de..46af1fdd 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-10.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-10.snap
@@ -7,16 +7,16 @@ exports[`Checkbox-10 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="bOhIC"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="IDtdS"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI HHzKC"
-          htmlFor="bOhIC" />
+          htmlFor="IDtdS" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cgtlqe">
+        htmlFor="bhyXCk">
         Check this out!
       </label>
       <label
@@ -32,16 +32,16 @@ exports[`Checkbox-10 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="bTsBJN"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="pMmOw"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI HHzKC"
-          htmlFor="bTsBJN" />
+          htmlFor="pMmOw" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="nyTFu">
+        htmlFor="bAWgBn">
         Check this out!
       </label>
       <label
@@ -57,16 +57,16 @@ exports[`Checkbox-10 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="cswYPr"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="bEpWDI"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI bQFovI"
-          htmlFor="cswYPr" />
+          htmlFor="bEpWDI" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="BXMBi">
+        htmlFor="jCrwp">
         Check this out!
       </label>
       <label
@@ -82,16 +82,16 @@ exports[`Checkbox-10 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="aojPD"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="wIZLF"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI bQFovI"
-          htmlFor="aojPD" />
+          htmlFor="wIZLF" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="clbhyR">
+        htmlFor="cvcpKh">
         Check this out!
       </label>
       <label
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-12.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-12.snap
index 1030df7a..27229462 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-12.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-12.snap
@@ -7,16 +7,16 @@ exports[`Checkbox-12 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="ctqvdl"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="bPNkcB"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI lfNAGO"
-          htmlFor="ctqvdl" />
+          htmlFor="bPNkcB" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="clZmCy">
+        htmlFor="bEKWvT">
         Check this out!
       </label>
       <label
@@ -32,16 +32,16 @@ exports[`Checkbox-12 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="bwNeCf"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="vINnJ"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI lfNAGO"
-          htmlFor="bwNeCf" />
+          htmlFor="vINnJ" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cpvAPz">
+        htmlFor="cqeJQP">
         Check this out!
       </label>
       <label
@@ -57,16 +57,16 @@ exports[`Checkbox-12 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="cFlJXg"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="bjdpqt"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI bQFovI"
-          htmlFor="cFlJXg" />
+          htmlFor="bjdpqt" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="VJJOi">
+        htmlFor="bQKDFf">
         Check this out!
       </label>
       <label
@@ -82,16 +82,16 @@ exports[`Checkbox-12 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="bqKDgl"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="bOznTu"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI bQFovI"
-          htmlFor="bqKDgl" />
+          htmlFor="bOznTu" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bMjwds">
+        htmlFor="bmKqRv">
         Check this out!
       </label>
       <label
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-14.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-14.snap
index aadd1fc9..71807e76 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-14.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-14.snap
@@ -4,19 +4,19 @@ exports[`Checkbox-14 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="cSnJm">
+      htmlFor="bODLFl">
       Check this out!
     </label>
     <div
       className="toggle__InnerContainer-hKefxl bVmJyd"
       type="checkbox">
       <input
-        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-        id="befxrm"
+        className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+        id="cmEOVu"
         type="checkbox" />
       <label
         className="toggle__Label-soSmI bQFovI"
-        htmlFor="befxrm" />
+        htmlFor="cmEOVu" />
     </div>
     <label
       className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-16.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-16.snap
index d8214043..640f9e8b 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-16.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-16.snap
@@ -12,19 +12,19 @@ exports[`Checkbox-16 1`] = `
             className="Col__Col-hCQanm rqKxU">
             <label
               className="sc-kpOJdX gxFurI"
-              htmlFor="cENLAs">
+              htmlFor="IzwYT">
               Check this out!
             </label>
             <div
               className="toggle__InnerContainer-hKefxl bVmJyd"
               type="checkbox">
               <input
-                className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-                id="ccSzsU"
+                className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+                id="jEKoe"
                 type="checkbox" />
               <label
                 className="toggle__Label-soSmI bQFovI"
-                htmlFor="ccSzsU" />
+                htmlFor="jEKoe" />
             </div>
           </div>
         </div>
@@ -62,19 +62,19 @@ exports[`Checkbox-16 1`] = `
             className="Col__Col-hCQanm rqKxU">
             <label
               className="sc-kpOJdX gxFurI"
-              htmlFor="cjXfAZ">
+              htmlFor="Pnanx">
               Check this out!
             </label>
             <div
               className="toggle__InnerContainer-hKefxl bVmJyd"
               type="checkbox">
               <input
-                className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-                id="bwLwZw"
+                className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+                id="XNyNQ"
                 type="checkbox" />
               <label
                 className="toggle__Label-soSmI bQFovI"
-                htmlFor="bwLwZw" />
+                htmlFor="XNyNQ" />
             </div>
           </div>
         </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-2.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-2.snap
index c7e0a4f7..8c6e46df 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-2.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-2.snap
@@ -7,16 +7,16 @@ exports[`Checkbox-2 1`] = `
       type="checkbox">
       <input
         checked={true}
-        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-        id="hPPAv"
+        className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+        id="bhKCLO"
         type="checkbox" />
       <label
         className="toggle__Label-soSmI bQFovI"
-        htmlFor="hPPAv" />
+        htmlFor="bhKCLO" />
     </div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="PDamN">
+      htmlFor="blXsWJ">
       Check this out!
     </label>
   </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-4.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-4.snap
index 1e98d2ce..ce6eedb7 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-4.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-4.snap
@@ -6,17 +6,17 @@ exports[`Checkbox-4 1`] = `
       className="toggle__InnerContainer-hKefxl bVmJyd"
       type="checkbox">
       <input
-        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+        className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
         disabled={true}
-        id="PdtKx"
+        id="DuxoD"
         type="checkbox" />
       <label
         className="toggle__Label-soSmI bQFovI"
-        htmlFor="PdtKx" />
+        htmlFor="DuxoD" />
     </div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="bMuPIw">
+      htmlFor="ceELTy">
       Check this out!
     </label>
   </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-6.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-6.snap
index d5bfd94a..4b0b1095 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-6.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-6.snap
@@ -4,19 +4,19 @@ exports[`Checkbox-6 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="cAuiJz">
+      htmlFor="henyP">
       Check this out!
     </label>
     <div
       className="toggle__InnerContainer-hKefxl bVmJyd"
       type="checkbox">
       <input
-        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-        id="kgvuK"
+        className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+        id="bfCqtj"
         type="checkbox" />
       <label
         className="toggle__Label-soSmI bQFovI"
-        htmlFor="kgvuK" />
+        htmlFor="bfCqtj" />
     </div>
   </div>
 </fieldset>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-8.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-8.snap
index 84418f24..3abc09b4 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-8.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-8.snap
@@ -7,16 +7,16 @@ exports[`Checkbox-8 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="FsQmq"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="xwaPA"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI ertJBI"
-          htmlFor="FsQmq" />
+          htmlFor="xwaPA" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cBGrDG">
+        htmlFor="GChbR">
         Check this out!
       </label>
       <label
@@ -32,16 +32,16 @@ exports[`Checkbox-8 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="beCzTQ"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="twcGD"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI ertJBI"
-          htmlFor="beCzTQ" />
+          htmlFor="twcGD" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bYpTvV">
+        htmlFor="BXFfu">
         Check this out!
       </label>
       <label
@@ -57,16 +57,16 @@ exports[`Checkbox-8 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="bhTblN"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="EqsYt"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI bQFovI"
-          htmlFor="bhTblN" />
+          htmlFor="EqsYt" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="KJKut">
+        htmlFor="dYYRh">
         Check this out!
       </label>
       <label
@@ -82,16 +82,16 @@ exports[`Checkbox-8 1`] = `
         className="toggle__InnerContainer-hKefxl bVmJyd"
         type="checkbox">
         <input
-          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
-          id="ckCLtp"
+          className="baseline-enlQhH klPuEH sc-iAyFgw gjtXtj"
+          id="UZaej"
           type="checkbox" />
         <label
           className="toggle__Label-soSmI bQFovI"
-          htmlFor="ckCLtp" />
+          htmlFor="UZaej" />
       </div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cwutRI">
+        htmlFor="RlpUg">
         Check this out!
       </label>
       <label
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/CloseButton-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/CloseButton-0.snap
index 3baa3a45..0dea6d18 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/CloseButton-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/CloseButton-0.snap
@@ -1,6 +1,6 @@
 exports[`CloseButton-0 1`] = `
 <button
-  className="sc-gipzik ebGrvT sc-bxivhb bOlNJJ">
+  className="sc-Rmtcm kVAySX sc-bxivhb bOlNJJ">
   <svg
     className="baseline-hRjYWa iAaryv"
     height="12"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Dropdown-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Dropdown-0.snap
index 78d1c176..f16c5cf4 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Dropdown-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Dropdown-0.snap
@@ -12,9 +12,9 @@ exports[`Dropdown-0 1`] = `
     Service
   </label>
   <div
-    className="baseline-eePMVW jLRdeT dropdown__Container-kTmGgR iFAKgB">
+    className="baseline-eDpFvF hpgOJY dropdown__Container-kTmGgR iFAKgB">
     <select
-      className="dropdown__StyledSelect-dniSqW iGqWTY baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+      className="dropdown__StyledSelect-dniSqW iGqWTY baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
       defaultValue="Choose"
       id="">
       <option
@@ -36,7 +36,7 @@ exports[`Dropdown-0 1`] = `
       </option>
     </select>
     <svg
-      className="dropdown__StyledArrowIcon-dcjYYg XaxjJ baseline-dvzlav jFVXMX"
+      className="dropdown__StyledArrowIcon-dcjYYg XaxjJ baseline-gnLaHO kbiDZr"
       height="6"
       viewBox="0 0 9 6"
       width="9"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Header-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Header-0.snap
index 2571706c..090614e0 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Header-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Header-0.snap
@@ -4,21 +4,21 @@ exports[`Header-0 1`] = `
   <div
     className="brand__Box-cSEQoZ eHrgNF">
     <h2
-      className="sc-brqgnP imvidU">
+      className="sc-jAaTju jPOEQf">
       Triton
     </h2>
   </div>
   <div
     className="item__Box-hzIdkQ xujDc">
     <p
-      className="sc-cMljjf jpHqrX">
+      className="sc-jDwBTQ dzLVZS">
       eu-east-1
     </p>
   </div>
   <div
     className="item__Box-hzIdkQ xujDc">
     <p
-      className="sc-cMljjf jpHqrX">
+      className="sc-jDwBTQ dzLVZS">
       Nicola
     </p>
   </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-10.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-10.snap
index 4473bd40..6f2f76d9 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-10.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-10.snap
@@ -4,12 +4,12 @@ exports[`Input-10 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="bwQQBD">
+      htmlFor="tshLM">
       Email Address
     </label>
     <input
       className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-      id="bwQQBD"
+      id="tshLM"
       placeholder="Enter email"
       type="email" />
     <label
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-2.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-2.snap
index 6d96e64d..7ce09340 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-2.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-2.snap
@@ -4,12 +4,12 @@ exports[`Input-2 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="KxDLL">
+      htmlFor="bTKoLq">
       Email Address
     </label>
     <input
       className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-      id="KxDLL"
+      id="bTKoLq"
       placeholder="Enter email"
       type="email" />
     <small
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-4.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-4.snap
index a9009ce9..ca8504b4 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-4.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-4.snap
@@ -5,12 +5,12 @@ exports[`Input-4 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bWTjQB">
+        htmlFor="bWzNQD">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-        id="bWTjQB"
+        id="bWzNQD"
         placeholder="Enter email"
         type="email" />
       <label
@@ -24,12 +24,12 @@ exports[`Input-4 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cCZWIJ">
+        htmlFor="ciukjy">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV coHhQj"
-        id="cCZWIJ"
+        id="ciukjy"
         placeholder="Enter email"
         type="email" />
       <label
@@ -43,12 +43,12 @@ exports[`Input-4 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cgBbsv">
+        htmlFor="cxOzWU">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV coHhQj"
-        id="cgBbsv"
+        id="cxOzWU"
         placeholder="Enter email"
         type="email" />
       <label
@@ -62,12 +62,12 @@ exports[`Input-4 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cchqFe">
+        htmlFor="YncF">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-        id="cchqFe"
+        id="YncF"
         placeholder="Enter email"
         type="email" />
       <label
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-6.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-6.snap
index 6d472f8c..f7ff09d5 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-6.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-6.snap
@@ -5,12 +5,12 @@ exports[`Input-6 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="CZllp">
+        htmlFor="cDdTWR">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-        id="CZllp"
+        id="cDdTWR"
         placeholder="Enter email"
         type="email" />
       <label
@@ -24,12 +24,12 @@ exports[`Input-6 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bCBhHX">
+        htmlFor="bwrAKk">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV jgvuqV"
-        id="bCBhHX"
+        id="bwrAKk"
         placeholder="Enter email"
         type="email" />
       <label
@@ -43,12 +43,12 @@ exports[`Input-6 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="IHrIh">
+        htmlFor="bYgGTg">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV jgvuqV"
-        id="IHrIh"
+        id="bYgGTg"
         placeholder="Enter email"
         type="email" />
       <label
@@ -62,12 +62,12 @@ exports[`Input-6 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bwCYUK">
+        htmlFor="HORSO">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-        id="bwCYUK"
+        id="HORSO"
         placeholder="Enter email"
         type="email" />
       <label
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-8.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-8.snap
index 72ff73cb..28d3170c 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Input-8.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Input-8.snap
@@ -5,12 +5,12 @@ exports[`Input-8 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="XPDYM">
+        htmlFor="qdhV">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-        id="XPDYM"
+        id="qdhV"
         placeholder="Enter email"
         type="email" />
       <label
@@ -24,12 +24,12 @@ exports[`Input-8 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="qdROV">
+        htmlFor="dlDoD">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV jicOQn"
-        id="qdROV"
+        id="dlDoD"
         placeholder="Enter email"
         type="email" />
       <label
@@ -43,12 +43,12 @@ exports[`Input-8 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bOhxeq">
+        htmlFor="bkqhjy">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV jicOQn"
-        id="bOhxeq"
+        id="bkqhjy"
         placeholder="Enter email"
         type="email" />
       <label
@@ -62,12 +62,12 @@ exports[`Input-8 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bpZMvk">
+        htmlFor="bcKrpP">
         Email Address
       </label>
       <input
         className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
-        id="bpZMvk"
+        id="bcKrpP"
         placeholder="Enter email"
         type="email" />
       <label
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/ProgressBar-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/ProgressBar-0.snap
index a37d3d99..74493e89 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/ProgressBar-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/ProgressBar-0.snap
@@ -2,13 +2,13 @@ exports[`ProgressBar-0 1`] = `
 <ul
   className="progress-bar__StyledList-fBsebO fWFANq">
   <li
-    className="baseline-iIgrag kHxfDo item__StyledItem-lfMPWI bnmuPO">
+    className="baseline-eePMVW jLRdeT item__StyledItem-lfMPWI bnmuPO">
     <div
-      className="baseline-BQWPM lnCTlm button__StyledContainer-HJcao mNxum">
+      className="baseline-dGYsfJ jNkStq button__StyledContainer-HJcao mNxum">
       <span
-        className="baseline-dGYsfJ jNkStq indicator__StyledIndicator-jnpRni limCBi">
+        className="baseline-iIgrag kHxfDo indicator__StyledIndicator-jnpRni limCBi">
         <svg
-          className="indicator__Tick-emlwMD iuRSnB baseline-ekKPvj fmhsHq"
+          className="indicator__Tick-emlwMD iuRSnB baseline-dvzlav jFVXMX"
           completed={true}
           first={true}
           height="9"
@@ -32,14 +32,14 @@ exports[`ProgressBar-0 1`] = `
     </div>
   </li>
   <li
-    className="baseline-iIgrag kHxfDo item__StyledItem-lfMPWI bnmuPO">
+    className="baseline-eePMVW jLRdeT item__StyledItem-lfMPWI bnmuPO">
     <div
-      className="baseline-BQWPM lnCTlm button__StyledContainer-HJcao jrPVRk">
+      className="baseline-dGYsfJ jNkStq button__StyledContainer-HJcao jrPVRk">
       <span
-        className="baseline-dGYsfJ jNkStq indicator__StyledIndicator-jnpRni jSkXBk">
+        className="baseline-iIgrag kHxfDo indicator__StyledIndicator-jnpRni jSkXBk">
         <svg
           active={true}
-          className="indicator__Tick-emlwMD jJvzny baseline-ekKPvj fmhsHq"
+          className="indicator__Tick-emlwMD jJvzny baseline-dvzlav jFVXMX"
           height="9"
           viewBox="0 0 9 9"
           width="9"
@@ -61,13 +61,13 @@ exports[`ProgressBar-0 1`] = `
     </div>
   </li>
   <li
-    className="baseline-iIgrag kHxfDo item__StyledItem-lfMPWI bnmuPO">
+    className="baseline-eePMVW jLRdeT item__StyledItem-lfMPWI bnmuPO">
     <div
-      className="baseline-BQWPM lnCTlm button__StyledContainer-HJcao bZSrGl">
+      className="baseline-dGYsfJ jNkStq button__StyledContainer-HJcao bZSrGl">
       <span
-        className="baseline-dGYsfJ jNkStq indicator__StyledIndicator-jnpRni haBONg">
+        className="baseline-iIgrag kHxfDo indicator__StyledIndicator-jnpRni haBONg">
         <svg
-          className="indicator__Tick-emlwMD fNWovh baseline-ekKPvj fmhsHq"
+          className="indicator__Tick-emlwMD fNWovh baseline-dvzlav jFVXMX"
           height="9"
           last={true}
           viewBox="0 0 9 9"
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-0.snap
index ec50de63..4649e08a 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-0.snap
@@ -3,11 +3,11 @@ exports[`Radio-0 1`] = `
   className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
   <div>
     <legend
-      className="sc-iAyFgw fDDYCs">
+      className="sc-eHgmQL jXHmLG">
       Who killed the radio star?
     </legend>
     <ul
-      className="sc-hSdWYo bIDotp">
+      className="sc-cvbbAY fOGvPE">
       <li
         className="radio__Li-hRYgmp dhbKVQ">
         <div
@@ -15,18 +15,18 @@ exports[`Radio-0 1`] = `
           type="radio">
           <input
             checked={true}
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-            id="BvHkn"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+            id="ctoAYM"
             name="who-killed"
             type="radio"
             value="video" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="BvHkn" />
+            htmlFor="ctoAYM" />
         </div>
         <label
           className="sc-kpOJdX gxFurI"
-          htmlFor="BvHkn">
+          htmlFor="ctoAYM">
           Video
         </label>
       </li>
@@ -36,18 +36,18 @@ exports[`Radio-0 1`] = `
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-            id="crRuJS"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+            id="ctIWjX"
             name="who-killed"
             type="radio"
             value="tv" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="crRuJS" />
+            htmlFor="ctIWjX" />
         </div>
         <label
           className="sc-kpOJdX gxFurI"
-          htmlFor="crRuJS">
+          htmlFor="ctIWjX">
           TV
         </label>
       </li>
@@ -57,18 +57,18 @@ exports[`Radio-0 1`] = `
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-            id="bpkHF"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+            id="bfgVhF"
             name="who-killed"
             type="radio"
             value="netflix" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="bpkHF" />
+            htmlFor="bfgVhF" />
         </div>
         <label
           className="sc-kpOJdX gxFurI"
-          htmlFor="bpkHF">
+          htmlFor="bfgVhF">
           Netflix
         </label>
       </li>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-10.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-10.snap
index 1ea496c3..fdd842d9 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-10.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-10.snap
@@ -3,7 +3,7 @@ exports[`Radio-10 1`] = `
   className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
   <div>
     <legend
-      className="sc-iAyFgw fDDYCs">
+      className="sc-eHgmQL jXHmLG">
       Who killed the radio star?
     </legend>
     <label
@@ -11,21 +11,21 @@ exports[`Radio-10 1`] = `
       I\'m a children of meta
     </label>
     <ul
-      className="sc-hSdWYo bIDotp">
+      className="sc-cvbbAY fOGvPE">
       <li
         className="radio__Li-hRYgmp dhbKVQ">
         <div
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-            id="xqZtm"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+            id="ckWPHU"
             name="who-killed"
             type="radio"
             value="video" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="xqZtm" />
+            htmlFor="ckWPHU" />
         </div>
         Video
       </li>
@@ -35,14 +35,14 @@ exports[`Radio-10 1`] = `
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-            id="wLgbp"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+            id="xWSsg"
             name="who-killed"
             type="radio"
             value="tv" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="wLgbp" />
+            htmlFor="xWSsg" />
         </div>
         TV
       </li>
@@ -52,14 +52,14 @@ exports[`Radio-10 1`] = `
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-            id="bVQcBn"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+            id="bCafNV"
             name="who-killed"
             type="radio"
             value="netflix" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="bVQcBn" />
+            htmlFor="bCafNV" />
         </div>
         Netflix
       </li>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-2.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-2.snap
index 1a084629..c0bb74bf 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-2.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-2.snap
@@ -3,26 +3,26 @@ exports[`Radio-2 1`] = `
   className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
   <div>
     <legend
-      className="sc-iAyFgw fDDYCs">
+      className="sc-eHgmQL jXHmLG">
       Who killed the radio star?
     </legend>
     <ul
-      className="sc-hSdWYo bIDotp">
+      className="sc-cvbbAY fOGvPE">
       <li
         className="radio__Li-hRYgmp dhbKVQ">
         <div
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
             disabled={true}
-            id="ckSJIN"
+            id="canBBP"
             name="who-killed"
             type="radio"
             value="video" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="ckSJIN" />
+            htmlFor="canBBP" />
         </div>
         Video
       </li>
@@ -32,15 +32,15 @@ exports[`Radio-2 1`] = `
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
             disabled={true}
-            id="fvuEh"
+            id="IODVO"
             name="who-killed"
             type="radio"
             value="tv" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="fvuEh" />
+            htmlFor="IODVO" />
         </div>
         TV
       </li>
@@ -50,15 +50,15 @@ exports[`Radio-2 1`] = `
           className="toggle__InnerContainer-hKefxl bVmJyd"
           type="radio">
           <input
-            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
             disabled={true}
-            id="omgcA"
+            id="cwICbp"
             name="who-killed"
             type="radio"
             value="netflix" />
           <label
             className="toggle__Label-soSmI gCagwo"
-            htmlFor="omgcA" />
+            htmlFor="cwICbp" />
         </div>
         Netflix
       </li>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-4.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-4.snap
index 53b1cd67..55301958 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-4.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-4.snap
@@ -4,7 +4,7 @@ exports[`Radio-4 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -12,21 +12,21 @@ exports[`Radio-4 1`] = `
         Unexpected inline error!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cgTtxc"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="cEJkGq"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="cgTtxc" />
+              htmlFor="cEJkGq" />
           </div>
           Video
         </li>
@@ -36,14 +36,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="qGHRS"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="HQjoh"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="qGHRS" />
+              htmlFor="HQjoh" />
           </div>
           TV
         </li>
@@ -53,14 +53,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="dhYkV"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bJIDsV"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="dhYkV" />
+              htmlFor="bJIDsV" />
           </div>
           Netflix
         </li>
@@ -71,7 +71,7 @@ exports[`Radio-4 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -79,21 +79,21 @@ exports[`Radio-4 1`] = `
         Unexpected group error!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="ckfzgF"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bKVvJE"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI cuZNED"
-              htmlFor="ckfzgF" />
+              htmlFor="bKVvJE" />
           </div>
           Video
         </li>
@@ -103,14 +103,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bqPlCY"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bcIuTu"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI cuZNED"
-              htmlFor="bqPlCY" />
+              htmlFor="bcIuTu" />
           </div>
           TV
         </li>
@@ -120,14 +120,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="txghV"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="fwNEe"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI cuZNED"
-              htmlFor="txghV" />
+              htmlFor="fwNEe" />
           </div>
           Netflix
         </li>
@@ -138,7 +138,7 @@ exports[`Radio-4 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -146,21 +146,21 @@ exports[`Radio-4 1`] = `
         Unexpected meta error!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="crhMGo"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="BDjtv"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI cuZNED"
-              htmlFor="crhMGo" />
+              htmlFor="BDjtv" />
           </div>
           Video
         </li>
@@ -170,14 +170,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bqBuCE"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="IMZia"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI cuZNED"
-              htmlFor="bqBuCE" />
+              htmlFor="IMZia" />
           </div>
           TV
         </li>
@@ -187,14 +187,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cqZXwC"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="JORVW"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI cuZNED"
-              htmlFor="cqZXwC" />
+              htmlFor="JORVW" />
           </div>
           Netflix
         </li>
@@ -205,7 +205,7 @@ exports[`Radio-4 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -213,21 +213,21 @@ exports[`Radio-4 1`] = `
         Unexpected children error!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="brvELW"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bqtNrS"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="brvELW" />
+              htmlFor="bqtNrS" />
           </div>
           Video
         </li>
@@ -237,14 +237,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cAlLld"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="cUZLi"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="cAlLld" />
+              htmlFor="cUZLi" />
           </div>
           TV
         </li>
@@ -254,14 +254,14 @@ exports[`Radio-4 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="JRBUI"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="iVBnQ"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="JRBUI" />
+              htmlFor="iVBnQ" />
           </div>
           Netflix
         </li>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-6.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-6.snap
index 0421789f..0e1b2ee9 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-6.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-6.snap
@@ -4,7 +4,7 @@ exports[`Radio-6 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -12,21 +12,21 @@ exports[`Radio-6 1`] = `
         Unexpected inline warning!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bWQEBf"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="FEHSq"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="bWQEBf" />
+              htmlFor="FEHSq" />
           </div>
           Video
         </li>
@@ -36,14 +36,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bJSqSe"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bwsmNG"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="bJSqSe" />
+              htmlFor="bwsmNG" />
           </div>
           TV
         </li>
@@ -53,14 +53,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cBrBsk"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="cdDybd"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="cBrBsk" />
+              htmlFor="cdDybd" />
           </div>
           Netflix
         </li>
@@ -71,7 +71,7 @@ exports[`Radio-6 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -79,21 +79,21 @@ exports[`Radio-6 1`] = `
         Unexpected group warning!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bPqPGO"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="mKpUJ"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI iPYvFO"
-              htmlFor="bPqPGO" />
+              htmlFor="mKpUJ" />
           </div>
           Video
         </li>
@@ -103,14 +103,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bHUcSW"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bhUdTP"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI iPYvFO"
-              htmlFor="bHUcSW" />
+              htmlFor="bhUdTP" />
           </div>
           TV
         </li>
@@ -120,14 +120,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="aLCiX"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="caBqYt"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI iPYvFO"
-              htmlFor="aLCiX" />
+              htmlFor="caBqYt" />
           </div>
           Netflix
         </li>
@@ -138,7 +138,7 @@ exports[`Radio-6 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -146,21 +146,21 @@ exports[`Radio-6 1`] = `
         Unexpected meta warning!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bKyptB"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="KuIqw"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI iPYvFO"
-              htmlFor="bKyptB" />
+              htmlFor="KuIqw" />
           </div>
           Video
         </li>
@@ -170,14 +170,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="Tplcf"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bDvFNB"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI iPYvFO"
-              htmlFor="Tplcf" />
+              htmlFor="bDvFNB" />
           </div>
           TV
         </li>
@@ -187,14 +187,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="ciCbft"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="EmZwa"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI iPYvFO"
-              htmlFor="ciCbft" />
+              htmlFor="EmZwa" />
           </div>
           Netflix
         </li>
@@ -205,7 +205,7 @@ exports[`Radio-6 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -213,21 +213,21 @@ exports[`Radio-6 1`] = `
         Unexpected children warning!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bzjYaT"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="Dsxgp"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="bzjYaT" />
+              htmlFor="Dsxgp" />
           </div>
           Video
         </li>
@@ -237,14 +237,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="RSKvU"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="WtwmZ"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="RSKvU" />
+              htmlFor="WtwmZ" />
           </div>
           TV
         </li>
@@ -254,14 +254,14 @@ exports[`Radio-6 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bHbNwI"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="ckdQLu"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="bHbNwI" />
+              htmlFor="ckdQLu" />
           </div>
           Netflix
         </li>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-8.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-8.snap
index 45bf00c5..29a0ccb1 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-8.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Radio-8.snap
@@ -4,7 +4,7 @@ exports[`Radio-8 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -12,21 +12,21 @@ exports[`Radio-8 1`] = `
         Unexpected inline success!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cGdKXP"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bmpXFA"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="cGdKXP" />
+              htmlFor="bmpXFA" />
           </div>
           Video
         </li>
@@ -36,14 +36,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="beMXau"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bSzaRC"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="beMXau" />
+              htmlFor="bSzaRC" />
           </div>
           TV
         </li>
@@ -53,14 +53,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bEShBt"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="pNb"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="bEShBt" />
+              htmlFor="pNb" />
           </div>
           Netflix
         </li>
@@ -71,7 +71,7 @@ exports[`Radio-8 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -79,21 +79,21 @@ exports[`Radio-8 1`] = `
         Unexpected group success!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="jrXgk"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bvKZsn"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI ecfPhl"
-              htmlFor="jrXgk" />
+              htmlFor="bvKZsn" />
           </div>
           Video
         </li>
@@ -103,14 +103,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cmSnhh"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="eVUE"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI ecfPhl"
-              htmlFor="cmSnhh" />
+              htmlFor="eVUE" />
           </div>
           TV
         </li>
@@ -120,14 +120,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="hPEzV"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bebREK"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI ecfPhl"
-              htmlFor="hPEzV" />
+              htmlFor="bebREK" />
           </div>
           Netflix
         </li>
@@ -138,7 +138,7 @@ exports[`Radio-8 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -146,21 +146,21 @@ exports[`Radio-8 1`] = `
         Unexpected meta success!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cspGMm"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="qbxXr"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI ecfPhl"
-              htmlFor="cspGMm" />
+              htmlFor="qbxXr" />
           </div>
           Video
         </li>
@@ -170,14 +170,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bhvMKn"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="qqhkh"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI ecfPhl"
-              htmlFor="bhvMKn" />
+              htmlFor="qqhkh" />
           </div>
           TV
         </li>
@@ -187,14 +187,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="bTCglY"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="NOCSo"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI ecfPhl"
-              htmlFor="bTCglY" />
+              htmlFor="NOCSo" />
           </div>
           Netflix
         </li>
@@ -205,7 +205,7 @@ exports[`Radio-8 1`] = `
     className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
     <div>
       <legend
-        className="sc-iAyFgw fDDYCs">
+        className="sc-eHgmQL jXHmLG">
         Who killed the radio star?
       </legend>
       <label
@@ -213,21 +213,21 @@ exports[`Radio-8 1`] = `
         Unexpected children success!
       </label>
       <ul
-        className="sc-hSdWYo bIDotp">
+        className="sc-cvbbAY fOGvPE">
         <li
           className="radio__Li-hRYgmp dhbKVQ">
           <div
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="hGiUq"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="lXBpo"
               name="who-killed"
               type="radio"
               value="video" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="hGiUq" />
+              htmlFor="lXBpo" />
           </div>
           Video
         </li>
@@ -237,14 +237,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="cGmweu"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="bBvMQB"
               name="who-killed"
               type="radio"
               value="tv" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="cGmweu" />
+              htmlFor="bBvMQB" />
           </div>
           TV
         </li>
@@ -254,14 +254,14 @@ exports[`Radio-8 1`] = `
             className="toggle__InnerContainer-hKefxl bVmJyd"
             type="radio">
             <input
-              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
-              id="RMsNf"
+              className="baseline-eRtFHU czaTJi sc-iAyFgw gjtXtj"
+              id="zZwfw"
               name="who-killed"
               type="radio"
               value="netflix" />
             <label
               className="toggle__Label-soSmI gCagwo"
-              htmlFor="RMsNf" />
+              htmlFor="zZwfw" />
           </div>
           Netflix
         </li>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/SectionList-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/SectionList-0.snap
index 19eb79a3..cc6b14ca 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/SectionList-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/SectionList-0.snap
@@ -1,45 +1,45 @@
 exports[`SectionList-0 1`] = `
 <ul
-  className="baseline-LlDMp hhjWUX section-list__UnorderedList-fejFlV jlJaVM">
+  className="baseline-jwGfhW dhkNKl section-list__UnorderedList-fejFlV jlJaVM">
   <li
-    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    className="baseline-BQWPM lnCTlm item__Li-bkOqhh gpsnTo">
     <a
-      className="active sc-jDwBTQ iVPvUR">
+      className="active sc-iRbamj jVGhjZ">
       Overview
     </a>
   </li>
   <li
-    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    className="baseline-BQWPM lnCTlm item__Li-bkOqhh gpsnTo">
     <a
-      className="sc-jDwBTQ iVPvUR">
+      className="sc-iRbamj jVGhjZ">
       Services
     </a>
   </li>
   <li
-    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    className="baseline-BQWPM lnCTlm item__Li-bkOqhh gpsnTo">
     <a
-      className="sc-jDwBTQ iVPvUR">
+      className="sc-iRbamj jVGhjZ">
       Instances
     </a>
   </li>
   <li
-    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    className="baseline-BQWPM lnCTlm item__Li-bkOqhh gpsnTo">
     <a
-      className="sc-jDwBTQ iVPvUR">
+      className="sc-iRbamj jVGhjZ">
       Versions
     </a>
   </li>
   <li
-    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    className="baseline-BQWPM lnCTlm item__Li-bkOqhh gpsnTo">
     <a
-      className="sc-jDwBTQ iVPvUR">
+      className="sc-iRbamj jVGhjZ">
       Manifest
     </a>
   </li>
   <li
-    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    className="baseline-BQWPM lnCTlm item__Li-bkOqhh gpsnTo">
     <a
-      className="sc-jDwBTQ iVPvUR">
+      className="sc-iRbamj jVGhjZ">
       Settings
     </a>
   </li>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-0.snap
index 709ceebc..8ea6648c 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-0.snap
@@ -4,12 +4,12 @@ exports[`Select-0 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="btFTGx">
+      htmlFor="bvLIng">
       Your location
     </label>
     <select
-      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-      id="btFTGx"
+      className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+      id="bvLIng"
       placeholder="Select Location">
       <option
         value="1">
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-10.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-10.snap
index e9f40801..a0cb8b1d 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-10.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-10.snap
@@ -5,12 +5,12 @@ exports[`Select-10 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bWPctT">
+        htmlFor="zLBBA">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-        id="bWPctT">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+        id="zLBBA">
         <option>
           Amsterdam, EU
         </option>
@@ -35,12 +35,12 @@ exports[`Select-10 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="gknAd">
+        htmlFor="curMvx">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL cEWfwg"
-        id="gknAd">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP fdhrAk"
+        id="curMvx">
         <option>
           Amsterdam, EU
         </option>
@@ -65,12 +65,12 @@ exports[`Select-10 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bmjoRO">
+        htmlFor="VCnhI">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL cEWfwg"
-        id="bmjoRO">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP fdhrAk"
+        id="VCnhI">
         <option>
           Amsterdam, EU
         </option>
@@ -95,12 +95,12 @@ exports[`Select-10 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="cuCWwE">
+        htmlFor="bYblUz">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-        id="cuCWwE">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+        id="bYblUz">
         <option>
           Amsterdam, EU
         </option>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-12.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-12.snap
index 25d72729..3b465704 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-12.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-12.snap
@@ -5,12 +5,12 @@ exports[`Select-12 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="keUQa">
+        htmlFor="XHHqb">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-        id="keUQa">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+        id="XHHqb">
         <option>
           Amsterdam, EU
         </option>
@@ -35,12 +35,12 @@ exports[`Select-12 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="iwFBn">
+        htmlFor="bvtgDf">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL dHVowQ"
-        id="iwFBn">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP VVNEI"
+        id="bvtgDf">
         <option>
           Amsterdam, EU
         </option>
@@ -65,12 +65,12 @@ exports[`Select-12 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bHPIwo">
+        htmlFor="bonmtu">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL dHVowQ"
-        id="bHPIwo">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP VVNEI"
+        id="bonmtu">
         <option>
           Amsterdam, EU
         </option>
@@ -95,12 +95,12 @@ exports[`Select-12 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="fxnTI">
+        htmlFor="jsoip">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-        id="fxnTI">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+        id="jsoip">
         <option>
           Amsterdam, EU
         </option>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-14.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-14.snap
index 2a7560b2..3d32fbb9 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-14.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-14.snap
@@ -5,12 +5,12 @@ exports[`Select-14 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="bhLOPM">
+        htmlFor="cBXCyy">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-        id="bhLOPM">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+        id="cBXCyy">
         <option>
           Amsterdam, EU
         </option>
@@ -35,12 +35,12 @@ exports[`Select-14 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="ccbPvB">
+        htmlFor="oVNem">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL dqhDPf"
-        id="ccbPvB">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP cttmNV"
+        id="oVNem">
         <option>
           Amsterdam, EU
         </option>
@@ -65,12 +65,12 @@ exports[`Select-14 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="czSslB">
+        htmlFor="oFxLS">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL dqhDPf"
-        id="czSslB">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP cttmNV"
+        id="oFxLS">
         <option>
           Amsterdam, EU
         </option>
@@ -95,12 +95,12 @@ exports[`Select-14 1`] = `
     <div>
       <label
         className="sc-kpOJdX gxFurI"
-        htmlFor="begiLB">
+        htmlFor="caFxDw">
         Your location
       </label>
       <select
-        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-        id="begiLB">
+        className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+        id="caFxDw">
         <option>
           Amsterdam, EU
         </option>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-16.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-16.snap
index dcea1cbe..05544919 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-16.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-16.snap
@@ -4,12 +4,12 @@ exports[`Select-16 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="bQztBr">
+      htmlFor="KRekN">
       Your location
     </label>
     <select
-      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-      id="bQztBr">
+      className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+      id="KRekN">
       <option>
         Amsterdam, EU
       </option>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-2.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-2.snap
index 9e0c462a..ae1ceada 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-2.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-2.snap
@@ -1,6 +1,6 @@
 exports[`Select-2 1`] = `
 <select
-  className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+  className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
   id="">
   <option
     disabled={true}
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-4.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-4.snap
index d5b83190..f8b88ca4 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-4.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-4.snap
@@ -4,13 +4,13 @@ exports[`Select-4 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="bTuDhz">
+      htmlFor="KJVIH">
       Your location
     </label>
     <select
-      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+      className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
       disabled={true}
-      id="bTuDhz">
+      id="KJVIH">
       <option
         disabled={true}
         selected={true}>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-6.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-6.snap
index b81fb72f..0bdb0c20 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-6.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-6.snap
@@ -4,12 +4,12 @@ exports[`Select-6 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="bqstTY">
+      htmlFor="cyCJTT">
       Your location
     </label>
     <select
-      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
-      id="bqstTY">
+      className="baseline-imhrAe cnnTnF sc-jWBwVP kNsReO"
+      id="cyCJTT">
       <option
         disabled={true}
         selected={true}>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-8.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-8.snap
index f6fa822b..9f65fd85 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Select-8.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Select-8.snap
@@ -4,12 +4,12 @@ exports[`Select-8 1`] = `
   <div>
     <label
       className="sc-kpOJdX gxFurI"
-      htmlFor="YiYIR">
+      htmlFor="bgkQnH">
       Your location
     </label>
     <select
-      className="baseline-isNNDV dMweWC sc-eHgmQL ljfWFB"
-      id="YiYIR"
+      className="baseline-imhrAe cnnTnF sc-jWBwVP kvlLEl"
+      id="bgkQnH"
       multiple={true}>
       <option>
         Amsterdam, EU
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-0.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-0.snap
index 1d69b8cb..bbd05014 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-0.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-0.snap
@@ -3,64 +3,64 @@ exports[`Toggle-0 1`] = `
   className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
   <div>
     <legend
-      className="sc-iAyFgw fDDYCs">
+      className="sc-eHgmQL jXHmLG">
       Who killed the radio star?
     </legend>
     <ul
-      className="sc-jWBwVP kOnUfl">
+      className="sc-cMljjf iJHuNY">
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="emnfZ">
+        id="bjmOak">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="mftvO"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="xDTom"
             name="who-killed"
             type="radio"
             value="video" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="mftvO">
+            htmlFor="xDTom">
             Video
           </label>
         </div>
       </li>
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="emnfZ">
+        id="bjmOak">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="cbaohD"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="PWAtJ"
             name="who-killed"
             type="radio"
             value="tv" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="cbaohD">
+            htmlFor="PWAtJ">
             TV
           </label>
         </div>
       </li>
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="emnfZ">
+        id="bjmOak">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="bQoRat"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="bIivwK"
             name="who-killed"
             type="radio"
             value="netflix" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="bQoRat">
+            htmlFor="bIivwK">
             Netflix
           </label>
         </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-2.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-2.snap
index 556b1404..1f07d41b 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-2.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-2.snap
@@ -3,64 +3,64 @@ exports[`Toggle-2 1`] = `
   className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
   <div>
     <legend
-      className="sc-iAyFgw fDDYCs">
+      className="sc-eHgmQL jXHmLG">
       Who killed the radio star?
     </legend>
     <ul
-      className="sc-jWBwVP kOnUfl">
+      className="sc-cMljjf iJHuNY">
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="XXgft">
+        id="bEWxMO">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={true}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="chLDPo"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="cmHWld"
             name="who-killed"
             type="radio"
             value="video" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="chLDPo">
+            htmlFor="cmHWld">
             Video
           </label>
         </div>
       </li>
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="XXgft">
+        id="bEWxMO">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="bONojW"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="ZwyOT"
             name="who-killed"
             type="radio"
             value="tv" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="bONojW">
+            htmlFor="ZwyOT">
             TV
           </label>
         </div>
       </li>
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="XXgft">
+        id="bEWxMO">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="bEadAF"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="VHwBB"
             name="who-killed"
             type="radio"
             value="netflix" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="bEadAF">
+            htmlFor="VHwBB">
             Netflix
           </label>
         </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-4.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-4.snap
index d0700dcb..9cea076e 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-4.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-4.snap
@@ -3,45 +3,45 @@ exports[`Toggle-4 1`] = `
   className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
   <div>
     <legend
-      className="sc-iAyFgw fDDYCs">
+      className="sc-eHgmQL jXHmLG">
       Who killed the radio star?
     </legend>
     <ul
-      className="sc-jWBwVP kOnUfl">
+      className="sc-cMljjf iJHuNY">
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="IHOBE">
+        id="bFWzCR">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={true}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="cgQHuW"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="cCXrXZ"
             name="who-killed"
             type="radio"
             value="tv" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="cgQHuW">
+            htmlFor="cCXrXZ">
             TV
           </label>
         </div>
       </li>
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="IHOBE">
+        id="bFWzCR">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
-            id="bkDCZy"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
+            id="bmyBGU"
             name="who-killed"
             type="radio"
             value="netflix" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="bkDCZy">
+            htmlFor="bmyBGU">
             Netflix
           </label>
         </div>
diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-6.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-6.snap
index 6529c1a8..e615642e 100644
--- a/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-6.snap
+++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-6.snap
@@ -3,67 +3,67 @@ exports[`Toggle-6 1`] = `
   className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
   <div>
     <legend
-      className="sc-iAyFgw fDDYCs">
+      className="sc-eHgmQL jXHmLG">
       Who killed the radio star?
     </legend>
     <ul
-      className="sc-jWBwVP kOnUfl">
+      className="sc-cMljjf iJHuNY">
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="cuAoVE">
+        id="caDOlS">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
             disabled={true}
-            id="bvuirh"
+            id="ckPCiG"
             name="who-killed"
             type="radio"
             value="video" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="bvuirh">
+            htmlFor="ckPCiG">
             Video
           </label>
         </div>
       </li>
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="cuAoVE">
+        id="caDOlS">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
             disabled={true}
-            id="cotudm"
+            id="csdkdW"
             name="who-killed"
             type="radio"
             value="tv" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="cotudm">
+            htmlFor="csdkdW">
             TV
           </label>
         </div>
       </li>
       <li
         className="toggle__Li-NAdHA fguoyM"
-        id="cuAoVE">
+        id="caDOlS">
         <div
           className="toggle__InputContainer-jJfPwy gGKbok">
           <input
             checked={false}
-            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            className="baseline-isNNDV dMweWC sc-brqgnP lhSyiT"
             disabled={true}
-            id="DWepz"
+            id="bSqIcr"
             name="who-killed"
             type="radio"
             value="netflix" />
           <label
             className="toggle__Label-biqdhu cWnfSi"
-            htmlFor="DWepz">
+            htmlFor="bSqIcr">
             Netflix
           </label>
         </div>
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index 14a98963..3aa45070 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/packages/ui-toolkit/src/card/card.js
@@ -18,6 +18,9 @@ const StyledCard = Row.extend`
   box-shadow: ${bottomShaddow};
   flex-direction: column;
 
+  margin-right: ${remcalc(0)};
+  margin-left: ${remcalc(0)};
+
   ${is('collapsed')`
     min-height: auto;
     height: ${remcalc(48)};