From 092bda67d4ba3de8565493882370b516f1206c14 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:40:18 -0500
Subject: [PATCH] test: update snapshots

---
 __snapshots__/storybook.test.ts.snap | 1305 ++++++++++++++++++++++++++
 1 file changed, 1305 insertions(+)

diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index ea2ca378f..923597c7c 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -1,5 +1,1310 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Building-Blocks/Colors Blue 1`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en-US"
+  fallbackOnEmptyString={true}
+  formats={Object {}}
+  locale="en-US"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <ColorPalette
+    color={
+      Object {
+        "100": "#CCDAE7",
+        "200": "#B2C7DB",
+        "300": "#99B5CF",
+        "400": "#7FA2C2",
+        "50": "#E5ECF3",
+        "500": "#6690B7",
+        "600": "#4D7EAB",
+        "700": "#336B9E",
+        "800": "#1A5992",
+        "900": "#004686",
+      }
+    }
+  />
+</IntlProvider>
+`;
+
+exports[`Storyshots Building-Blocks/Colors Blue 2`] = `
+Array [
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #E5ECF3;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      50
+    </p>
+    <p>
+      #E5ECF3
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #CCDAE7;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      100
+    </p>
+    <p>
+      #CCDAE7
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #B2C7DB;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      200
+    </p>
+    <p>
+      #B2C7DB
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #99B5CF;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      300
+    </p>
+    <p>
+      #99B5CF
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #7FA2C2;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      400
+    </p>
+    <p>
+      #7FA2C2
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #6690B7;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      500
+    </p>
+    <p>
+      #6690B7
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #4D7EAB;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      600
+    </p>
+    <p>
+      #4D7EAB
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #336B9E;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      700
+    </p>
+    <p>
+      #336B9E
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #1A5992;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      800
+    </p>
+    <p>
+      #1A5992
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #004686;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      900
+    </p>
+    <p>
+      #004686
+    </p>
+  </div>,
+]
+`;
+
+exports[`Storyshots Building-Blocks/Colors Grey 1`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en-US"
+  fallbackOnEmptyString={true}
+  formats={Object {}}
+  locale="en-US"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <ColorPalette
+    color={
+      Object {
+        "100": "#D9D9D9",
+        "200": "#C5C5C5",
+        "300": "#B3B3B3",
+        "400": "#9F9F9F",
+        "50": "#ECECEC",
+        "500": "#8C8C8C",
+        "600": "#797979",
+        "700": "#666666",
+        "800": "#535353",
+        "900": "#404040",
+      }
+    }
+  />
+</IntlProvider>
+`;
+
+exports[`Storyshots Building-Blocks/Colors Grey 2`] = `
+Array [
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #ECECEC;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      50
+    </p>
+    <p>
+      #ECECEC
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #D9D9D9;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      100
+    </p>
+    <p>
+      #D9D9D9
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #C5C5C5;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      200
+    </p>
+    <p>
+      #C5C5C5
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #B3B3B3;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      300
+    </p>
+    <p>
+      #B3B3B3
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #9F9F9F;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      400
+    </p>
+    <p>
+      #9F9F9F
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #8C8C8C;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      500
+    </p>
+    <p>
+      #8C8C8C
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #797979;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      600
+    </p>
+    <p>
+      #797979
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #666666;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      700
+    </p>
+    <p>
+      #666666
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #535353;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      800
+    </p>
+    <p>
+      #535353
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #404040;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      900
+    </p>
+    <p>
+      #404040
+    </p>
+  </div>,
+]
+`;
+
+exports[`Storyshots Building-Blocks/Colors Red 1`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en-US"
+  fallbackOnEmptyString={true}
+  formats={Object {}}
+  locale="en-US"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <ColorPalette
+    color={
+      Object {
+        "100": "#EFCFCE",
+        "200": "#E7B6B4",
+        "300": "#DF9E9C",
+        "400": "#D78683",
+        "50": "#F7E7E6",
+        "500": "#CF6E6B",
+        "600": "#C75652",
+        "700": "#BF3E3A",
+        "800": "#B72620",
+        "900": "#AF0E08",
+      }
+    }
+  />
+</IntlProvider>
+`;
+
+exports[`Storyshots Building-Blocks/Colors Red 2`] = `
+Array [
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F7E7E6;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      50
+    </p>
+    <p>
+      #F7E7E6
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EFCFCE;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      100
+    </p>
+    <p>
+      #EFCFCE
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #E7B6B4;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      200
+    </p>
+    <p>
+      #E7B6B4
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #DF9E9C;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      300
+    </p>
+    <p>
+      #DF9E9C
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #D78683;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      400
+    </p>
+    <p>
+      #D78683
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #CF6E6B;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      500
+    </p>
+    <p>
+      #CF6E6B
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #C75652;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      600
+    </p>
+    <p>
+      #C75652
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #BF3E3A;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      700
+    </p>
+    <p>
+      #BF3E3A
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #B72620;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      800
+    </p>
+    <p>
+      #B72620
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #AF0E08;
+  color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      900
+    </p>
+    <p>
+      #AF0E08
+    </p>
+  </div>,
+]
+`;
+
 exports[`Storyshots EndpointsOverlay Endpoints Overlay With Custom Map Markers 1`] = `
 <IntlProvider
   defaultFormats={Object {}}