From 8d4d80f3a6636757cc2fe3d4bbcb753042656dcd Mon Sep 17 00:00:00 2001
From: phrough <git@phrough.com>
Date: Sun, 1 May 2022 10:29:55 -0500
Subject: [PATCH 1/7] feat: add Slider component

---
 config/jest/identity-obj-proxy-revised.js     |    16 +
 package.json                                  |     3 +-
 src/__snapshots__/storybook.test.js.snap      | 10178 +++-------------
 src/components/Dialog/Dialog.test.tsx         |    10 +-
 src/components/Modal/Modal.test.tsx           |     6 +-
 src/components/Panel/Panel.test.tsx           |     6 +-
 src/components/Slider/Slider.stories.tsx      |    47 +
 src/components/Slider/Slider.test.tsx         |    88 +
 src/components/Slider/Slider.tsx              |   241 +
 src/components/Slider/Slider.types.ts         |    81 +
 src/components/Slider/index.ts                |     2 +
 src/components/Slider/slider.module.scss      |   171 +
 .../Tabs/__snapshots__/Tabs.test.tsx.snap     |    12 +-
 src/hooks/useEffectOnlyOnUpdate.tsx           |    21 +
 yarn.lock                                     |    12 -
 15 files changed, 2468 insertions(+), 8426 deletions(-)
 create mode 100644 config/jest/identity-obj-proxy-revised.js
 create mode 100644 src/components/Slider/Slider.stories.tsx
 create mode 100644 src/components/Slider/Slider.test.tsx
 create mode 100644 src/components/Slider/Slider.tsx
 create mode 100644 src/components/Slider/Slider.types.ts
 create mode 100644 src/components/Slider/index.ts
 create mode 100644 src/components/Slider/slider.module.scss
 create mode 100644 src/hooks/useEffectOnlyOnUpdate.tsx

diff --git a/config/jest/identity-obj-proxy-revised.js b/config/jest/identity-obj-proxy-revised.js
new file mode 100644
index 000000000..38ee4e299
--- /dev/null
+++ b/config/jest/identity-obj-proxy-revised.js
@@ -0,0 +1,16 @@
+// Proxy for jest tests to convert css moodule class names.
+// Based on https://medium.com/trabe/testing-css-modules-in-react-components-with-jest-enzyme-and-a-custom-modulenamemapper-8ff86c7d18a2
+
+module.exports = new Proxy(
+    {},
+    {
+        get: function getter(target, key) {
+            if (key === '__esModule') {
+                return false;
+            }
+
+            // Convert camelCase to kebab-case for class selectors in unit tests.
+            return key.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+        },
+    }
+);
diff --git a/package.json b/package.json
index ca540cd93..c583326af 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,6 @@
         "html-webpack-plugin": "5.5.0",
         "husky": "7.0.4",
         "icomoon-react": "^3.0.0",
-        "identity-obj-proxy": "3.0.0",
         "install-peers": "1.0.3",
         "install-peers-cli": "2.2.0",
         "jest": "27.4.3",
@@ -209,7 +208,7 @@
         "modulePaths": [],
         "moduleNameMapper": {
             "^react-native$": "react-native-web",
-            "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+            "^.+\\.module\\.(css|sass|scss)$": "<rootDir>/config/jest/identity-obj-proxy-revised.js"
         },
         "moduleFileExtensions": [
             "web.js",
diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
index e5b9f4989..9b9ab4c68 100644
--- a/src/__snapshots__/storybook.test.js.snap
+++ b/src/__snapshots__/storybook.test.js.snap
@@ -17,10 +17,10 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
     </h2>
   </div>
   <ul
-    className="listContainer"
+    className="list-container"
   >
     <li
-      className="listItem my-list-item-class"
+      className="list-item my-list-item-class"
       style={
         Object {
           "padding": "8px",
@@ -28,12 +28,12 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
       }
     >
       <div
-        className="accordionContainer"
+        className="accordion-container"
       >
         <div
           aria-controls="1-content"
           aria-expanded={false}
-          className="accordionSummary"
+          className="accordion-summary"
           id="1-header"
           onClick={[Function]}
           onKeyDown={[Function]}
@@ -50,7 +50,7 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
           >
             <span
               aria-hidden={false}
-              className="iconWrapper"
+              className="icon-wrapper"
               role="presentation"
             >
               <svg
@@ -90,7 +90,7 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
           </div>
           <span
             aria-hidden={false}
-            className="accordionIcon iconWrapper"
+            className="accordion-icon icon-wrapper"
             role="presentation"
           >
             <svg
@@ -116,12 +116,12 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
         </div>
         <div
           aria-labelledby="1-header"
-          className="accordionBodyContainer"
+          className="accordion-body-container"
           id="1-content"
           role="region"
         >
           <div
-            className="accordionBody showBorderTop"
+            className="accordion-body show-border-top"
           >
             Body 2 text used here. Bottom bars are sticky sections that
         can be used to highlight a few actions that are out of the
@@ -135,7 +135,7 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
       </div>
     </li>
     <li
-      className="listItem my-list-item-class"
+      className="list-item my-list-item-class"
       style={
         Object {
           "padding": "8px",
@@ -143,12 +143,12 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
       }
     >
       <div
-        className="accordionContainer"
+        className="accordion-container"
       >
         <div
           aria-controls="2-content"
           aria-expanded={false}
-          className="accordionSummary"
+          className="accordion-summary"
           id="2-header"
           onClick={[Function]}
           onKeyDown={[Function]}
@@ -165,7 +165,7 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
           >
             <span
               aria-hidden={false}
-              className="iconWrapper"
+              className="icon-wrapper"
               role="presentation"
             >
               <svg
@@ -205,7 +205,7 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
           </div>
           <span
             aria-hidden={false}
-            className="accordionIcon iconWrapper"
+            className="accordion-icon icon-wrapper"
             role="presentation"
           >
             <svg
@@ -231,12 +231,12 @@ exports[`Storyshots Accordion List Horizontal 1`] = `
         </div>
         <div
           aria-labelledby="2-header"
-          className="accordionBodyContainer"
+          className="accordion-body-container"
           id="2-content"
           role="region"
         >
           <div
-            className="accordionBody showBorderTop"
+            className="accordion-body show-border-top"
           >
             Body 2 text used here. Bottom bars are sticky sections that
         can be used to highlight a few actions that are out of the
@@ -281,10 +281,10 @@ exports[`Storyshots Accordion List Vertical 1`] = `
     </h2>
   </div>
   <ul
-    className="listContainer vertical"
+    className="list-container vertical"
   >
     <li
-      className="listItem my-list-item-class"
+      className="list-item my-list-item-class"
       style={
         Object {
           "padding": "8px 16px",
@@ -292,12 +292,12 @@ exports[`Storyshots Accordion List Vertical 1`] = `
       }
     >
       <div
-        className="accordionContainer"
+        className="accordion-container"
       >
         <div
           aria-controls="1-content"
           aria-expanded={false}
-          className="accordionSummary"
+          className="accordion-summary"
           id="1-header"
           onClick={[Function]}
           onKeyDown={[Function]}
@@ -314,7 +314,7 @@ exports[`Storyshots Accordion List Vertical 1`] = `
           >
             <span
               aria-hidden={false}
-              className="iconWrapper"
+              className="icon-wrapper"
               role="presentation"
             >
               <svg
@@ -354,7 +354,7 @@ exports[`Storyshots Accordion List Vertical 1`] = `
           </div>
           <span
             aria-hidden={false}
-            className="accordionIcon iconWrapper"
+            className="accordion-icon icon-wrapper"
             role="presentation"
           >
             <svg
@@ -380,12 +380,12 @@ exports[`Storyshots Accordion List Vertical 1`] = `
         </div>
         <div
           aria-labelledby="1-header"
-          className="accordionBodyContainer"
+          className="accordion-body-container"
           id="1-content"
           role="region"
         >
           <div
-            className="accordionBody showBorderTop"
+            className="accordion-body show-border-top"
           >
             Body 2 text used here. Bottom bars are sticky sections that
         can be used to highlight a few actions that are out of the
@@ -399,7 +399,7 @@ exports[`Storyshots Accordion List Vertical 1`] = `
       </div>
     </li>
     <li
-      className="listItem my-list-item-class"
+      className="list-item my-list-item-class"
       style={
         Object {
           "padding": "8px 16px",
@@ -407,12 +407,12 @@ exports[`Storyshots Accordion List Vertical 1`] = `
       }
     >
       <div
-        className="accordionContainer"
+        className="accordion-container"
       >
         <div
           aria-controls="2-content"
           aria-expanded={false}
-          className="accordionSummary"
+          className="accordion-summary"
           id="2-header"
           onClick={[Function]}
           onKeyDown={[Function]}
@@ -429,7 +429,7 @@ exports[`Storyshots Accordion List Vertical 1`] = `
           >
             <span
               aria-hidden={false}
-              className="iconWrapper"
+              className="icon-wrapper"
               role="presentation"
             >
               <svg
@@ -469,7 +469,7 @@ exports[`Storyshots Accordion List Vertical 1`] = `
           </div>
           <span
             aria-hidden={false}
-            className="accordionIcon iconWrapper"
+            className="accordion-icon icon-wrapper"
             role="presentation"
           >
             <svg
@@ -495,12 +495,12 @@ exports[`Storyshots Accordion List Vertical 1`] = `
         </div>
         <div
           aria-labelledby="2-header"
-          className="accordionBodyContainer"
+          className="accordion-body-container"
           id="2-content"
           role="region"
         >
           <div
-            className="accordionBody showBorderTop"
+            className="accordion-body show-border-top"
           >
             Body 2 text used here. Bottom bars are sticky sections that
         can be used to highlight a few actions that are out of the
@@ -530,12 +530,12 @@ exports[`Storyshots Accordion List Vertical 1`] = `
 
 exports[`Storyshots Accordion Single 1`] = `
 <div
-  className="accordionContainer"
+  className="accordion-container"
 >
   <div
     aria-controls="myAccordionId-content"
     aria-expanded={false}
-    className="accordionSummary"
+    className="accordion-summary"
     id="myAccordionId-header"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -545,7 +545,7 @@ exports[`Storyshots Accordion Single 1`] = `
     Accordion Header
     <span
       aria-hidden={false}
-      className="accordionIcon iconWrapper"
+      className="accordion-icon icon-wrapper"
       role="presentation"
     >
       <svg
@@ -571,12 +571,12 @@ exports[`Storyshots Accordion Single 1`] = `
   </div>
   <div
     aria-labelledby="myAccordionId-header"
-    className="accordionBodyContainer"
+    className="accordion-body-container"
     id="myAccordionId-content"
     role="region"
   >
     <div
-      className="accordionBody showBorderTop"
+      className="accordion-body show-border-top"
     >
       <div
         style={
@@ -607,7 +607,7 @@ exports[`Storyshots Avatar Avatar Default 1`] = `
 >
   <img
     alt="random profile image"
-    className="imageStyle"
+    className="image-style"
     height="40px"
     src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
     width="40px"
@@ -617,7 +617,7 @@ exports[`Storyshots Avatar Avatar Default 1`] = `
 
 exports[`Storyshots Avatar Avatar Fallback 1`] = `
 <div
-  className="wrapperStyle my-avatar-class imageStyle roundImage green"
+  className="wrapper-style my-avatar-class image-style round-image green"
   style={
     Object {
       "fontSize": "18px",
@@ -634,7 +634,7 @@ exports[`Storyshots Avatar Avatar Fallback 1`] = `
 
 exports[`Storyshots Avatar Avatar Icon 1`] = `
 <div
-  className="wrapperStyle my-avatar-class imageStyle"
+  className="wrapper-style my-avatar-class image-style"
   style={
     Object {
       "backgroundColor": "grey",
@@ -648,7 +648,7 @@ exports[`Storyshots Avatar Avatar Icon 1`] = `
 >
   <span
     aria-hidden={false}
-    className="iconWrapper"
+    className="icon-wrapper"
     role="presentation"
   >
     <svg
@@ -689,7 +689,7 @@ exports[`Storyshots Avatar Avatar Round 1`] = `
 >
   <img
     alt="random profile image"
-    className="imageStyle roundImage"
+    className="image-style round-image"
     height="40px"
     src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
     width="40px"
@@ -699,7 +699,7 @@ exports[`Storyshots Avatar Avatar Round 1`] = `
 
 exports[`Storyshots Avatar Avatar Round Icon 1`] = `
 <div
-  className="wrapperStyle my-avatar-class imageStyle roundImage"
+  className="wrapper-style my-avatar-class image-style round-image"
   style={
     Object {
       "backgroundColor": "grey",
@@ -713,7 +713,7 @@ exports[`Storyshots Avatar Avatar Round Icon 1`] = `
 >
   <span
     aria-hidden={false}
-    className="iconWrapper"
+    className="icon-wrapper"
     role="presentation"
   >
     <svg
@@ -770,7 +770,7 @@ exports[`Storyshots Button Counter 1`] = `
 <button
   aria-disabled={false}
   aria-label="Primary Button"
-  className="my-btn-class button buttonPrimary iconLeft"
+  className="my-btn-class button button-primary icon-left"
   data-test-id="my-btn-test-id"
   defaultChecked={false}
   disabled={false}
@@ -781,7 +781,7 @@ exports[`Storyshots Button Counter 1`] = `
   <span>
     <span
       aria-hidden={true}
-      className="icon my-btn-icon iconWrapper"
+      className="icon my-btn-icon icon-wrapper"
       data-test-id="myButtonIconTestId"
       id="myButtonIcon"
       role="presentation"
@@ -824,7 +824,7 @@ exports[`Storyshots Button Default 1`] = `
 <button
   aria-disabled={false}
   aria-label="Default Button"
-  className="my-btn-class button buttonDefault iconLeft"
+  className="my-btn-class button button-default icon-left"
   data-test-id="my-btn-test-id"
   defaultChecked={false}
   disabled={false}
@@ -835,7 +835,7 @@ exports[`Storyshots Button Default 1`] = `
   <span>
     <span
       aria-hidden={true}
-      className="icon my-btn-icon iconWrapper"
+      className="icon my-btn-icon icon-wrapper"
       data-test-id="myButtonIconTestId"
       id="myButtonIcon"
       role="presentation"
@@ -873,7 +873,7 @@ exports[`Storyshots Button Neutral 1`] = `
 <button
   aria-disabled={false}
   aria-label="Neutral Button"
-  className="my-btn-class button buttonNeutral iconLeft"
+  className="my-btn-class button button-neutral icon-left"
   data-test-id="my-btn-test-id"
   defaultChecked={false}
   disabled={false}
@@ -884,7 +884,7 @@ exports[`Storyshots Button Neutral 1`] = `
   <span>
     <span
       aria-hidden={true}
-      className="icon my-btn-icon iconWrapper"
+      className="icon my-btn-icon icon-wrapper"
       data-test-id="myButtonIconTestId"
       id="myButtonIcon"
       role="presentation"
@@ -922,7 +922,7 @@ exports[`Storyshots Button Primary 1`] = `
 <button
   aria-disabled={false}
   aria-label="Primary Button"
-  className="my-btn-class button buttonPrimary iconLeft"
+  className="my-btn-class button button-primary icon-left"
   data-test-id="my-btn-test-id"
   defaultChecked={false}
   disabled={false}
@@ -933,7 +933,7 @@ exports[`Storyshots Button Primary 1`] = `
   <span>
     <span
       aria-hidden={true}
-      className="icon my-btn-icon iconWrapper"
+      className="icon my-btn-icon icon-wrapper"
       data-test-id="myButtonIconTestId"
       id="myButtonIcon"
       role="presentation"
@@ -971,7 +971,7 @@ exports[`Storyshots Button Secondary 1`] = `
 <button
   aria-disabled={false}
   aria-label="Secondary Button"
-  className="my-btn-class button buttonSecondary iconLeft"
+  className="my-btn-class button button-secondary icon-left"
   data-test-id="my-btn-test-id"
   defaultChecked={false}
   disabled={false}
@@ -982,7 +982,7 @@ exports[`Storyshots Button Secondary 1`] = `
   <span>
     <span
       aria-hidden={true}
-      className="icon my-btn-icon iconWrapper"
+      className="icon my-btn-icon icon-wrapper"
       data-test-id="myButtonIconTestId"
       id="myButtonIcon"
       role="presentation"
@@ -1021,7 +1021,7 @@ Array [
   <button
     aria-disabled={false}
     aria-label="Split Button"
-    className="my-btn-class button buttonPrimary splitLeft"
+    className="my-btn-class button button-primary split-left"
     data-test-id="my-btn-test-id"
     defaultChecked={false}
     disabled={false}
@@ -1039,14 +1039,14 @@ Array [
     aria-checked={false}
     aria-disabled={false}
     aria-pressed={false}
-    className="my-btn-class button buttonPrimary undefined splitButton splitRight"
+    className="my-btn-class button button-primary undefined split-button split-right"
     defaultChecked={false}
     disabled={false}
     type="button"
   >
     <span
       aria-hidden={false}
-      className="icon iconWrapper"
+      className="icon icon-wrapper"
       role="presentation"
     >
       <svg
@@ -1071,7 +1071,7 @@ Array [
     </span>
     <span
       aria-hidden="true"
-      className="splitDivider splitDividerPrimary"
+      className="split-divider split-divider-primary"
     />
   </button>,
 ]
@@ -1082,7 +1082,7 @@ Array [
   <button
     aria-disabled={false}
     aria-label="Split Button"
-    className="my-btn-class button buttonPrimary splitLeft"
+    className="my-btn-class button button-primary split-left"
     data-test-id="my-btn-test-id"
     defaultChecked={false}
     disabled={false}
@@ -1105,14 +1105,14 @@ Array [
     aria-checked={false}
     aria-disabled={false}
     aria-pressed={false}
-    className="my-btn-class button buttonPrimary undefined splitButton splitRight"
+    className="my-btn-class button button-primary undefined split-button split-right"
     defaultChecked={false}
     disabled={false}
     type="button"
   >
     <span
       aria-hidden={false}
-      className="icon iconWrapper"
+      className="icon icon-wrapper"
       role="presentation"
     >
       <svg
@@ -1137,7 +1137,7 @@ Array [
     </span>
     <span
       aria-hidden="true"
-      className="splitDivider splitDividerPrimary"
+      className="split-divider split-divider-primary"
     />
   </button>,
 ]
@@ -1149,7 +1149,7 @@ exports[`Storyshots Button Toggle 1`] = `
   aria-disabled={false}
   aria-label="Toggle Button"
   aria-pressed={false}
-  className="my-btn-class button buttonPrimary iconRight"
+  className="my-btn-class button button-primary icon-right"
   data-test-id="my-btn-test-id"
   defaultChecked={false}
   disabled={false}
@@ -1160,7 +1160,7 @@ exports[`Storyshots Button Toggle 1`] = `
   <span>
     <span
       aria-hidden={true}
-      className="icon my-btn-icon iconWrapper"
+      className="icon my-btn-icon icon-wrapper"
       data-test-id="myButtonIconTestId"
       id="myButtonIcon"
       role="presentation"
@@ -1200,7 +1200,7 @@ exports[`Storyshots Button Toggle With Counter 1`] = `
   aria-disabled={false}
   aria-label="Toggle Button"
   aria-pressed={false}
-  className="my-btn-class button buttonPrimary iconRight"
+  className="my-btn-class button button-primary icon-right"
   data-test-id="my-btn-test-id"
   defaultChecked={false}
   disabled={false}
@@ -1211,7 +1211,7 @@ exports[`Storyshots Button Toggle With Counter 1`] = `
   <span>
     <span
       aria-hidden={true}
-      className="icon my-btn-icon iconWrapper"
+      className="icon my-btn-icon icon-wrapper"
       data-test-id="myButtonIconTestId"
       id="myButtonIcon"
       role="presentation"
@@ -1256,7 +1256,7 @@ exports[`Storyshots Button Two State Button 1`] = `
   aria-disabled={false}
   aria-label="Two State Button"
   aria-pressed={false}
-  className="my-two-state-btn-class button twoStateButton"
+  className="my-two-state-btn-class button two-state-button"
   defaultChecked={false}
   disabled={false}
   id="myTwoStateButton"
@@ -1264,14 +1264,14 @@ exports[`Storyshots Button Two State Button 1`] = `
   type="button"
 >
   <span
-    className="twoStateButtonContent"
+    className="two-state-button-content"
   >
     <span
-      className="column columnOne"
+      className="column column-one"
     >
       <span
         aria-hidden={true}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         data-test-id="myTwoStateButtonIconOneTestId"
         id="myTwoStateButtonIconOne"
         role="presentation"
@@ -1312,7 +1312,7 @@ exports[`Storyshots Button Two State Button 1`] = `
     >
       <span
         aria-hidden={true}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         data-test-id="myTwoStateButtonIconTwoTestId"
         id="myTwoStateButtonIconTwo"
         role="presentation"
@@ -1365,7 +1365,7 @@ exports[`Storyshots Check Box Check Box 1`] = `
       className="checkmark"
     />
     <span
-      className="selectorLabel"
+      className="selector-label"
     >
       Label
     </span>
@@ -1376,7 +1376,7 @@ exports[`Storyshots Check Box Check Box 1`] = `
 exports[`Storyshots Check Box Check Box Group 1`] = `
 <div
   checked={true}
-  className="checkboxGroup"
+  className="checkbox-group"
   defaultChecked={
     Array [
       "First",
@@ -1405,7 +1405,7 @@ exports[`Storyshots Check Box Check Box Group 1`] = `
         className="checkmark"
       />
       <span
-        className="selectorLabel"
+        className="selector-label"
       >
         First
       </span>
@@ -1432,7 +1432,7 @@ exports[`Storyshots Check Box Check Box Group 1`] = `
         className="checkmark"
       />
       <span
-        className="selectorLabel"
+        className="selector-label"
       >
         Second
       </span>
@@ -1459,7 +1459,7 @@ exports[`Storyshots Check Box Check Box Group 1`] = `
         className="checkmark"
       />
       <span
-        className="selectorLabel"
+        className="selector-label"
       >
         Third
       </span>
@@ -1468,7188 +1468,823 @@ exports[`Storyshots Check Box Check Box Group 1`] = `
 </div>
 `;
 
-exports[`Storyshots Config Provider Theming 1`] = `
+exports[`Storyshots Dialog Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open dialog
+  </span>
+</button>
+`;
+
+exports[`Storyshots Dialog Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary button-primary-disruptive"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open dialog
+  </span>
+</button>
+`;
+
+exports[`Storyshots Dropdown Dropdown Button 1`] = `
 <div
-  className="stack vertical xxl"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
+  className="my-dropdown-class main-wrapper"
+  style={Object {}}
 >
-  <h1
-    style={
-      Object {
-        "marginBottom": 0,
-      }
-    }
+  <button
+    aria-controls="dropdown-3"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="button button-default icon-right"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
   >
-    Selected Theme:
-    <span
-      style={
-        Object {
-          "color": "var(--primary-color)",
-          "marginLeft": "4px",
-          "textTransform": "capitalize",
-        }
-      }
-    >
-      blue
+    <span>
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className=""
+      >
+        Click button start
+      </span>
     </span>
-  </h1>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Dropdown Dropdown Div 1`] = `
+<div
+  className="my-dropdown-class main-wrapper"
+  style={Object {}}
+>
   <div
-    className="stack horizontal m"
+    aria-controls="dropdown-4"
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="reference-wrapper"
+    onClick={[Function]}
+    role="button"
     style={
       Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-        "marginTop": 0,
+        "display": "flex",
       }
     }
+    tabIndex="0"
   >
-    <div>
-      <p>
-        Predefined
-      </p>
-      <select
-        onChange={[Function]}
+    <code>
+      HTMLDivElement
+    </code>
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
         style={
           Object {
-            "fontSize": "1rem",
+            "height": "20px",
+            "width": "20px",
           }
         }
-        value="blue"
+        viewBox="0 0 24 24"
       >
-        <option
-          value="red"
-        >
-          red
-        </option>
-        <option
-          value="orange"
-        >
-          orange
-        </option>
-        <option
-          value="yellow"
-        >
-          yellow
-        </option>
-        <option
-          value="green"
-        >
-          green
-        </option>
-        <option
-          value="bluegreen"
-        >
-          bluegreen
-        </option>
-        <option
-          value="blue"
-        >
-          blue
-        </option>
-        <option
-          value="violet"
-        >
-          violet
-        </option>
-        <option
-          value="grey"
-        >
-          grey
-        </option>
-      </select>
-    </div>
-    <div>
-      <p>
-        Custom
-      </p>
-      <div
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Custom Image 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+    style={Object {}}
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
         style={
           Object {
-            "display": "inline-block",
-            "position": "relative",
+            "height": "200px",
+            "width": "200px",
           }
         }
+        viewBox="0 0 24 24"
       >
-        <div
+        <path
+          d="M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z"
           style={
             Object {
-              "MozBorderRadius": 2,
-              "MozBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "OBorderRadius": 2,
-              "OBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "WebkitBorderRadius": 2,
-              "WebkitBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "background": "#fff",
-              "borderRadius": 2,
-              "bottom": "0px",
-              "boxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "left": "0px",
-              "msBorderRadius": 2,
-              "msBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "position": "absolute",
-              "right": "0px",
-              "top": "0px",
+              "fill": "#8ED0FA",
             }
           }
         />
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            className="compact-picker "
-            style={
-              Object {
-                "boxSizing": "initial",
-                "paddingLeft": "5px",
-                "paddingTop": "5px",
-                "width": "240px",
-              }
-            }
-          >
-            <div>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#4D4D4D",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#4D4D4D"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#999999",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#999999"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "MozBoxShadow": "inset 0 0 0 1px #ddd",
-                      "OBoxShadow": "inset 0 0 0 1px #ddd",
-                      "WebkitBoxShadow": "inset 0 0 0 1px #ddd",
-                      "background": "#FFFFFF",
-                      "boxShadow": "inset 0 0 0 1px #ddd",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "msBoxShadow": "inset 0 0 0 1px #ddd",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FFFFFF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#F44E3B",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#F44E3B"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FE9200",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FE9200"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FCDC00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FCDC00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#DBDF00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#DBDF00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#A4DD00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#A4DD00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#68CCCA",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#68CCCA"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#73D8FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#73D8FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#AEA1FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#AEA1FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FDA1FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FDA1FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#333333",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#333333"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#808080",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#808080"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#cccccc",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#cccccc"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#D33115",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#D33115"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#E27300",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#E27300"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FCC400",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FCC400"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#B0BC00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#B0BC00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#68BC00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#68BC00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#16A5A5",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#16A5A5"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#009CE0",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#009CE0"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#7B64FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#7B64FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FA28FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FA28FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#000000",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#000000"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "1",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#666666",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#666666"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#B3B3B3",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#B3B3B3"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#9F0500",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#9F0500"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#C45100",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#C45100"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FB9E00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FB9E00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#808900",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#808900"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#194D33",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#194D33"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#0C797D",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#0C797D"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#0062B1",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#0062B1"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#653294",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#653294"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#AB149E",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#AB149E"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <div
-                style={
-                  Object {
-                    "clear": "both",
-                  }
-                }
-              />
-            </div>
-            <div
-              className="flexbox-fix"
-              style={
-                Object {
-                  "display": "flex",
-                  "paddingBottom": "6px",
-                  "paddingRight": "5px",
-                  "position": "relative",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "background": "#000000",
-                    "height": "9px",
-                    "left": "5px",
-                    "position": "absolute",
-                    "top": "6px",
-                    "width": "9px",
-                  }
-                }
-              />
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "6",
-                    "WebkitBoxFlex": "6",
-                    "WebkitFlex": "6",
-                    "flex": "6",
-                    "msFlex": "6",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-1"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "20%",
-                      "width": "80%",
-                    }
-                  }
-                  value="#000000"
-                />
-                <label
-                  htmlFor="rc-editable-input-1"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "display": "none",
-                    }
-                  }
-                >
-                  hex
-                </label>
-              </div>
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "3",
-                    "WebkitBoxFlex": "3",
-                    "WebkitFlex": "3",
-                    "flex": "3",
-                    "msFlex": "3",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-2"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "30%",
-                      "width": "70%",
-                    }
-                  }
-                  value="0"
-                />
-                <label
-                  htmlFor="rc-editable-input-2"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "color": "#999",
-                      "fontSize": "12px",
-                      "left": "0px",
-                      "lineHeight": "16px",
-                      "position": "absolute",
-                      "textTransform": "uppercase",
-                      "top": "3px",
-                    }
-                  }
-                >
-                  r
-                </label>
-              </div>
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "3",
-                    "WebkitBoxFlex": "3",
-                    "WebkitFlex": "3",
-                    "flex": "3",
-                    "msFlex": "3",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-3"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "30%",
-                      "width": "70%",
-                    }
-                  }
-                  value="0"
-                />
-                <label
-                  htmlFor="rc-editable-input-3"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "color": "#999",
-                      "fontSize": "12px",
-                      "left": "0px",
-                      "lineHeight": "16px",
-                      "position": "absolute",
-                      "textTransform": "uppercase",
-                      "top": "3px",
-                    }
-                  }
-                >
-                  g
-                </label>
-              </div>
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "3",
-                    "WebkitBoxFlex": "3",
-                    "WebkitFlex": "3",
-                    "flex": "3",
-                    "msFlex": "3",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-4"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "30%",
-                      "width": "70%",
-                    }
-                  }
-                  value="0"
-                />
-                <label
-                  htmlFor="rc-editable-input-4"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "color": "#999",
-                      "fontSize": "12px",
-                      "left": "0px",
-                      "lineHeight": "16px",
-                      "position": "absolute",
-                      "textTransform": "uppercase",
-                      "top": "3px",
-                    }
-                  }
-                >
-                  b
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="stack horizontal m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <button
-      aria-disabled={false}
-      aria-label="Primary Button"
-      className="button buttonPrimary buttonSize3"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        className="buttonText3"
-      >
-        Primary Button
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Primary Button"
-      className="button buttonPrimary buttonSize3 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "16px",
-              "width": "16px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Primary Button"
-      className="button buttonPrimary buttonSize3 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText3"
-        >
-          Primary Button
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="stack horizontal m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <button
-      aria-disabled={false}
-      aria-label="Secondary Button"
-      className="button buttonSecondary buttonSize3"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        className="buttonText3"
-      >
-        Secondary Button
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Secondary Button"
-      className="button buttonSecondary buttonSize3 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "16px",
-              "width": "16px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Secondary Button"
-      className="button buttonSecondary buttonSize3 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText3"
-        >
-          Secondary Button
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="stack horizontal m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <button
-      aria-disabled={false}
-      aria-label="Default Button"
-      className="button buttonDefault buttonSize3"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        className="buttonText3"
-      >
-        Default Button
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Default Button"
-      className="button buttonDefault buttonSize3 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "16px",
-              "width": "16px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Default Button"
-      className="button buttonDefault buttonSize3 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText3"
-        >
-          Default Button
-        </span>
-      </span>
-    </button>
-  </div>
-  <div>
-    <div
-      className="tabWrap"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 1
-        </span>
-        <div
-          className="tabIndicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 2
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 3
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 4
-        </span>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div
-      className="tabWrap"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <div
-          className="tabIndicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div
-      className="tabWrap small"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 1
-        </span>
-        <div
-          className="tabIndicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 2
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 3
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 4
-        </span>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div
-      className="tabWrap pill"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 1
-        </span>
-        <div
-          className="tabIndicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 2
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 3
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 4
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    aria-label="score"
-    className="matchScoreContainer"
-  >
-    <div
-      className="matchScoreCircle full"
-    />
-    <div
-      className="matchScoreCircle full"
-    />
-    <div
-      className="matchScoreCircle full"
-    />
-    <div
-      className="matchScoreCircle"
-    />
-    <div
-      className="matchScoreCircle"
-    />
-    <p
-      className="label"
-    >
-      3
-      /
-      5
-    </p>
-  </div>
-  <span
-    aria-hidden={false}
-    className="spinner iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "48px",
-          "width": "48px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <style>
-        @keyframes spin { to { transform: rotate(360deg) } }
-      </style>
-      <g
-        style={
-          Object {
-            "animation": "spin linear 0.8s infinite",
-            "transformOrigin": "center",
-          }
-        }
-      >
-        <path
-          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-        <rect
-          fill="transparent"
-          height="24"
-          width="24"
-        />
-      </g>
-    </svg>
-  </span>
-  <div
-    className="checkboxGroup"
-    defaultChecked={
-      Array [
-        "First",
-      ]
-    }
-    role="group"
-  >
-    <div
-      className="selector"
-    >
-      <input
-        checked={true}
-        disabled={false}
-        id="test-1"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="checkbox"
-        value="First"
-      />
-      <label
-        className=""
-        htmlFor="test-1"
-      >
-        <span
-          className="checkmark"
-        />
-        <span
-          className="selectorLabel"
-        >
-          First
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="test-2"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="checkbox"
-        value="Second"
-      />
-      <label
-        className=""
-        htmlFor="test-2"
-      >
-        <span
-          className="checkmark"
-        />
-        <span
-          className="selectorLabel"
-        >
-          Second
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="test-3"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="checkbox"
-        value="Third"
-      />
-      <label
-        className=""
-        htmlFor="test-3"
-      >
-        <span
-          className="checkmark"
-        />
-        <span
-          className="selectorLabel"
-        >
-          Third
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    aria-label="Radio Group"
-    className="radioGroup"
-    role="group"
-  >
-    <div
-      className="selector"
-    >
-      <input
-        checked={true}
-        disabled={false}
-        id="oea2exk-1"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="radio"
-        value="Radio1"
-      />
-      <label
-        className=""
-        htmlFor="oea2exk-1"
-      >
-        <span
-          className="radioButton"
-          id="oea2exk-1-custom-radio"
-        />
-        <span
-          className="selectorLabel"
-        >
-          Radio1
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="oea2exk-2"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="radio"
-        value="Radio2"
-      />
-      <label
-        className=""
-        htmlFor="oea2exk-2"
-      >
-        <span
-          className="radioButton"
-          id="oea2exk-2-custom-radio"
-        />
-        <span
-          className="selectorLabel"
-        >
-          Radio2
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="oea2exk-3"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="radio"
-        value="Radio3"
-      />
-      <label
-        className=""
-        htmlFor="oea2exk-3"
-      >
-        <span
-          className="radioButton"
-          id="oea2exk-3-custom-radio"
-        />
-        <span
-          className="selectorLabel"
-        >
-          Radio3
-        </span>
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Dialog Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open dialog
-  </span>
-</button>
-`;
-
-exports[`Storyshots Dialog Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary buttonPrimaryDisruptive"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open dialog
-  </span>
-</button>
-`;
-
-exports[`Storyshots Dropdown Dropdown Button 1`] = `
-<div
-  className="my-dropdown-class mainWrapper"
-  style={Object {}}
->
-  <button
-    aria-controls="dropdown-3"
-    aria-disabled={false}
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="button buttonDefault iconRight"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
-  >
-    <span>
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className=""
-      >
-        Click button start
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Dropdown Dropdown Div 1`] = `
-<div
-  className="my-dropdown-class mainWrapper"
-  style={Object {}}
->
-  <div
-    aria-controls="dropdown-4"
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="referenceWrapper"
-    onClick={[Function]}
-    role="button"
-    style={
-      Object {
-        "display": "flex",
-      }
-    }
-    tabIndex="0"
-  >
-    <code>
-      HTMLDivElement
-    </code>
-    <span
-      aria-hidden={false}
-      className="iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Custom Image 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="emptyImage"
-    style={Object {}}
-  >
-    <span
-      aria-hidden={false}
-      className="iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "200px",
-            "width": "200px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z"
-          style={
-            Object {
-              "fill": "#8ED0FA",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-  <div
-    className="emptyTitle"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="emptyDescription"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Empty Messages 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="emptyImage"
-  >
-    <svg
-      className="empty-messages-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
-        fill="white"
-        stroke="#8ED0FA"
-        stroke-width="6"
-      />
-      <path
-        d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <path
-        d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <path
-        d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-    </svg>
-  </div>
-  <div
-    className="emptyTitle"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="emptyDescription"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Error State 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="emptyImage"
-  >
-    <svg
-      className="server-error-image-default"
-      fill="none"
-      height="185"
-      viewBox="0 0 200 185"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 178.839C21.8078 172.861 3.66074 163.325 0.510726 151.175C-2.63929 139.025 9.18787 124.359 24.8068 116.637C40.5358 109.029 59.9069 108.449 71.9662 103.257C83.9156 97.9498 88.5731 87.9309 99.9189 78.9985C111.265 70.066 129.299 62.2199 140.372 65.9517C151.555 69.798 155.648 85.2069 164.716 97.6426C173.785 110.078 187.68 119.625 194.904 132.657C202.237 145.804 202.768 162.422 189.061 167.219C175.355 172.016 147.3 164.877 128.36 166.625C109.569 168.288 99.7624 178.823 86.4541 182.955C73.2954 187.004 56.4854 184.734 39.0718 178.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M49.2784 101.405C39.3247 57.4604 105.676 18.8428 136.863 78.7671C196.578 76.1036 191.934 156.002 145.489 158L107.668 158L46.6243 158C12.7837 158 0.841885 104.068 49.2784 101.405Z"
-        fill="white"
-        stroke="#8ED0FA"
-        stroke-width="6"
-      />
-      <path
-        d="M76.0193 103.097L82.4167 109.495L86.6594 105.252L80.2619 98.8548L76.0193 103.097ZM82.4167 108.081L76.38 114.117L80.6226 118.36L86.6594 112.323L82.4167 108.081ZM82.4167 109.495C82.0262 109.104 82.0262 108.471 82.4167 108.081L86.6594 112.323C88.612 110.371 88.612 107.205 86.6594 105.252L82.4167 109.495Z"
-        fill="#8ED0FA"
-      />
-      <path
-        d="M128.572 114.117L122.175 107.72L117.932 111.963L124.33 118.36L128.572 114.117ZM122.175 109.134L128.212 103.097L123.969 98.8548L117.932 104.892L122.175 109.134ZM122.175 107.72C122.566 108.111 122.566 108.744 122.175 109.134L117.932 104.892C115.98 106.844 115.98 110.01 117.932 111.963L122.175 107.72Z"
-        fill="#8ED0FA"
-      />
-      <path
-        d="M102 142C107.192 142 111 137.516 111 132.5C111 127.484 107.192 123 102 123C96.8079 123 93 127.484 93 132.5C93 137.516 96.8079 142 102 142Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <path
-        d="M161 68C166.192 68 170 63.5161 170 58.5C170 53.4839 166.192 49 161 49C155.808 49 152 53.4839 152 58.5C152 63.5161 155.808 68 161 68Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <path
-        d="M55 22C60.1921 22 64 17.5161 64 12.5C64 7.48391 60.1921 3 55 3C49.8079 3 46 7.48391 46 12.5C46 17.5161 49.8079 22 55 22Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <ellipse
-        cx="108"
-        cy="29.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <ellipse
-        cx="28"
-        cy="89.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="161.334"
-        x2="148.606"
-        y1="11.6067"
-        y2="24.3346"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="161.335"
-        x2="148.608"
-        y1="24.3345"
-        y2="11.6065"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31.334"
-        x2="18.6061"
-        y1="38.6067"
-        y2="51.3346"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31.3355"
-        x2="18.6076"
-        y1="51.3345"
-        y2="38.6065"
-      />
-    </svg>
-  </div>
-  <div
-    className="emptyTitle"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="emptyDescription"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty No Data 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="emptyImage"
-  >
-    <svg
-      className="empty-data-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
-        fill="white"
-      />
-      <path
-        clipRule="evenodd"
-        d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
-        fill="#B0F3FE"
-        fillRule="evenodd"
-      />
-      <path
-        clipRule="evenodd"
-        d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
-        fill="#8ED0FA"
-        fillRule="evenodd"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        width="13.3333"
-        x="93.334"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        transform="rotate(-30 46.666 6.66675)"
-        width="13.3333"
-        x="46.666"
-        y="6.66675"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        transform="rotate(30 141.666 0)"
-        width="13.3333"
-        x="141.666"
-      />
-    </svg>
-  </div>
-  <div
-    className="emptyTitle"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="emptyDescription"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty No Search Results 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="emptyImage"
-  >
-    <svg
-      className="empty-search-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M183 91C188.192 91 192 86.5161 192 81.5C192 76.4839 188.192 72 183 72C177.808 72 174 76.4839 174 81.5C174 86.5161 177.808 91 183 91Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <circle
-        cx="139"
-        cy="47"
-        fill="#B0F3FE"
-        r="5"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="10"
-        rx="5"
-        width="20"
-        x="148"
-        y="42"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="10"
-        rx="5"
-        width="30"
-        x="10"
-        y="83"
-      />
-      <path
-        d="M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412Z"
-        fill="white"
-      />
-      <path
-        d="M127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693Z"
-        fill="white"
-      />
-      <path
-        d="M125.26 118.259L118.189 111.187M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412ZM155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664Z"
-        stroke="#8ED0FA"
-        stroke-width="6"
-        strokeLinecap="round"
-      />
-      <path
-        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-    </svg>
-  </div>
-  <div
-    className="emptyTitle"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="emptyDescription"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Tasks Complete 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="emptyImage"
-  >
-    <svg
-      className="tasks-complete-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M180 98C185.192 98 189 93.5161 189 88.5C189 83.4839 185.192 79 180 79C174.808 79 171 83.4839 171 88.5C171 93.5161 174.808 98 180 98Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <circle
-        cx="139"
-        cy="47"
-        fill="#B0F3FE"
-        r="5"
-      />
-      <path
-        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <circle
-        cx="98"
-        cy="79"
-        fill="white"
-        r="60"
-        stroke="#8ED0FA"
-        stroke-width="6"
-        strokeLinecap="round"
-      />
-      <path
-        d="M80.9802 73.3685C79.5239 72.0567 77.2649 72.1574 75.9346 73.5935C74.6043 75.0295 74.7064 77.2571 76.1627 78.569L92.971 93.7098C95.0099 95.5463 98.1725 95.4053 100.035 93.3948C100.113 93.3094 100.113 93.3094 100.188 93.2217L124.175 64.7735C125.436 63.2779 125.228 61.0574 123.712 59.8139C122.195 58.5703 119.943 58.7747 118.682 60.2703L96.1309 87.0162L80.9802 73.3685Z"
-        fill="#B0F3FE"
-      />
-      <path
-        d="M16 26C21.1921 26 25 21.5161 25 16.5C25 11.4839 21.1921 7 16 7C10.8079 7 7 11.4839 7 16.5C7 21.5161 10.8079 26 16 26Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <ellipse
-        cx="38"
-        cy="35.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <ellipse
-        cx="171"
-        cy="35.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="160"
-        x2="142"
-        y1="13"
-        y2="13"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="151"
-        x2="151"
-        y1="22"
-        y2="4"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31"
-        x2="13"
-        y1="87"
-        y2="87"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="22"
-        x2="22"
-        y1="96"
-        y2="78"
-      />
-    </svg>
-  </div>
-  <div
-    className="emptyTitle"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="emptyDescription"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Icon Basic 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class iconWrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    aria-labelledby="icon_labelledby_37 icon_describedby_37"
-    style={
-      Object {
-        "height": "20px",
-        "width": "20px",
-      }
-    }
-    viewBox="0 0 24 24"
-  >
-    <title
-      id="icon_labelledby_37"
-    >
-      My icon title.
-    </title>
-    <desc
-      id="icon_describedby_37"
-    >
-      My icon description.
-    </desc>
-    <path
-      d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      style={
-        Object {
-          "fill": "#000000",
-        }
-      }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Icon Icomoon 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class iconWrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    className=""
-    height="20px"
-    role="presentation"
-    style={
-      Object {
-        "display": "inline-block",
-        "verticalAlign": "middle",
-      }
-    }
-    viewBox="0 0 1024 1024"
-    width="20px"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
-      style={
-        Object {
-          "fill": "#000000",
-        }
-      }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Icon Icomoon Multicolor 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class iconWrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    className=""
-    height="24px"
-    role="presentation"
-    style={
-      Object {
-        "display": "inline-block",
-        "verticalAlign": "middle",
-      }
-    }
-    viewBox="0 0 1024 1024"
-    width="24px"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M102.4 153.6v716.8h241.912v-139.999h79.375v139.999h241.912v-716.8h-563.2zM181.777 233.867h81.268v78.399h-81.268v-78.399zM344.312 233.867h79.375v78.399h-79.375v-78.399zM504.955 233.867h81.267v78.399h-81.267v-78.399zM181.777 392.532h81.268v80.269h-81.268v-80.269zM344.312 392.532h79.375v80.269h-79.375v-80.269zM504.955 392.532h81.267v80.269h-81.267v-80.269zM181.777 551.201h81.268v80.266h-81.268v-80.266zM344.312 551.201h79.375v80.266h-79.375v-80.266zM504.955 551.201h81.267v80.266h-81.267v-80.266zM181.777 711.734h81.268v78.4h-81.268v-78.4zM504.955 711.734h81.267v78.4h-81.267v-78.4z"
-      fill="rgb(80, 206, 225)"
-      style={
-        Object {
-          "fill": undefined,
-        }
-      }
-    />
-    <path
-      d="M598.536 358.4h108.529c14.303 0 26.501 5.478 36.598 16.435 10.936 10.112 16.404 22.333 16.404 36.662v54.359h108.531c14.303 0 26.501 5.478 36.598 16.435 10.936 10.115 16.404 22.756 16.404 37.926v295.821c0 15.171-5.468 28.234-16.404 39.191-10.097 10.115-22.295 15.171-36.598 15.171h-431.596c-14.303 0-26.921-5.056-37.86-15.171-10.094-10.957-15.142-24.020-15.142-39.191v-295.821c0-15.171 5.048-27.812 15.142-37.926 10.939-10.957 23.557-16.435 37.86-16.435h108.531v-54.359c0-14.328 5.046-26.55 15.142-36.662 10.936-10.957 23.557-16.435 37.86-16.435zM707.064 465.856v-54.359h-108.529v54.359h108.529z"
-      fill="rgb(20, 109, 166)"
-      opacity={0.6}
-      style={
-        Object {
-          "fill": undefined,
-        }
-      }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Info Bar Disruptive 1`] = `
-<div
-  className="infoBar my-info-bar-class disruptive"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button buttonNeutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button buttonNeutral iconLeft"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Neutral 1`] = `
-<div
-  className="infoBar my-info-bar-class neutral"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button buttonNeutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button buttonNeutral iconLeft"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Positive 1`] = `
-<div
-  className="infoBar my-info-bar-class positive"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button buttonNeutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button buttonNeutral iconLeft"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Warning 1`] = `
-<div
-  className="infoBar my-info-bar-class warning"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button buttonNeutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button buttonNeutral iconLeft"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Input Search Box 1`] = `
-<form
-  role="search"
->
-  <div
-    className="inputWrapper"
-  >
-    <div
-      className="fieldLabel medium"
-    >
-      <label
-        className="textStyle medium"
-      >
-        Label
-      </label>
-      <span
-        className="fieldLabelIconButton medium"
-      >
-        <div
-          className="referenceWrapper"
-          id="4fzzzxj"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <button
-            aria-disabled={false}
-            className="labelIconButton button buttonDefault buttonSize3 iconLeft"
-            defaultChecked={false}
-            disabled={false}
-          >
-            <span
-              aria-hidden={false}
-              className="icon iconWrapper"
-              role="presentation"
-            >
-              <svg
-                role="presentation"
-                style={
-                  Object {
-                    "height": "16px",
-                    "width": "16px",
-                  }
-                }
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                    }
-                  }
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </span>
-    </div>
-    <input
-      aria-label="Search"
-      autoFocus={false}
-      className="my-searchbox-class withIcon withIconButton withIconAndIconButton"
-      disabled={false}
-      id="mySearchBoxId5"
-      maxLength={100}
-      minLength={0}
-      name="mySearchBox"
-      onChange={[Function]}
-      placeholder="Search"
-      readOnly={false}
-      required={false}
-      role="textbox"
-      style={Object {}}
-      tabIndex={0}
-      type="search"
-    />
-    <div
-      className="iconWrapper leftIcon"
-    >
-      <span
-        aria-hidden={false}
-        className="iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "red",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </div>
-    <button
-      aria-disabled={false}
-      className="iconButton leftIcon button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</form>
-`;
-
-exports[`Storyshots Input Text Area 1`] = `
-<div
-  className="inputWrapper"
->
-  <div
-    className="fieldLabel medium"
-  >
-    <label
-      className="textStyle medium"
-    >
-      Label
-    </label>
-    <span
-      className="fieldLabelIconButton medium"
-    >
-      <div
-        className="referenceWrapper"
-        id="4fzzzxj"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <button
-          aria-disabled={false}
-          className="labelIconButton button buttonDefault buttonSize3 iconLeft"
-          defaultChecked={false}
-          disabled={false}
-        >
-          <span
-            aria-hidden={false}
-            className="icon iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </span>
-  </div>
-  <textarea
-    aria-disabled={false}
-    aria-label="Sample text"
-    autoFocus={false}
-    className="my-textarea-class textArea"
-    cols={50}
-    disabled={false}
-    htmltype="text"
-    id="myTextAreaId6"
-    maxLength={300}
-    minLength={0}
-    name="myTextArea"
-    onChange={[Function]}
-    placeholder="Placeholder text"
-    required={false}
-    rows={5}
-    style={Object {}}
-    tabIndex={0}
-  />
-  <span
-    aria-hidden={false}
-    className="textAreaResizeIcon iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Input Text Input 1`] = `
-<div
-  className="inputWrapper"
->
-  <div
-    className="fieldLabel medium"
-  >
-    <label
-      className="textStyle medium"
-    >
-      Label
-    </label>
-    <span
-      className="fieldLabelIconButton medium"
-    >
-      <div
-        className="referenceWrapper"
-        id="4fzzzxj"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <button
-          aria-disabled={false}
-          className="labelIconButton button buttonDefault buttonSize3 iconLeft"
-          defaultChecked={false}
-          disabled={false}
-        >
-          <span
-            aria-hidden={false}
-            className="icon iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </span>
-  </div>
-  <input
-    aria-label="Sample text"
-    autoFocus={false}
-    className="my-textinput-class withIcon withIconButton withIconAndIconButton"
-    disabled={false}
-    htmltype="text"
-    id="myTextInputId7"
-    maxLength={100}
-    minLength={0}
-    name="myTextInput"
-    onChange={[Function]}
-    placeholder="Placeholder text"
-    readOnly={false}
-    required={false}
-    role="textbox"
-    style={Object {}}
-    tabIndex={0}
-    type="text"
-  />
-  <div
-    className="iconWrapper leftIcon"
-  >
-    <span
-      aria-hidden={false}
-      className="iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          style={
-            Object {
-              "fill": "red",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-  <button
-    aria-disabled={false}
-    className="iconButton leftIcon button buttonDefault buttonSize2 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Label Labels 1`] = `
-<div
-  className="fieldLabel medium my-label-class"
->
-  <label
-    className="textStyle medium"
-    htmlFor=""
-  >
-    This is a label
-  </label>
-  <span
-    className="fieldLabelIconButton medium"
-  >
-    <div
-      className="referenceWrapper"
-      id="4fzzzxj"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="labelIconButton button buttonDefault buttonSize3 iconLeft"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Link Default 1`] = `
-<a
-  className="linkStyle my-link-class"
-  href="https://www.twitter.com"
-  style={Object {}}
-  target="_self"
->
-  Twitter
-</a>
-`;
-
-exports[`Storyshots Link Default Disabled 1`] = `
-<a
-  className="linkStyle my-link-class"
-  href="https://www.facebook.com"
-  style={Object {}}
-  target="_self"
->
-  <span
-    aria-hidden={false}
-    className="iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  User Profile
-</a>
-`;
-
-exports[`Storyshots Link Primary 1`] = `
-<a
-  className="linkStyle my-link-class primary"
-  href="https://www.facebook.com"
-  style={
-    Object {
-      "maxWidth": "100px",
-    }
-  }
-  target="_self"
->
-  <span
-    aria-hidden={false}
-    className="iconWrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  User Profile
-</a>
-`;
-
-exports[`Storyshots List Horizontal 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="listContainer"
-    role=""
-  >
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 1
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 2
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 3
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 4
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 5
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-  </ul>
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h3>
-      Footer
-    </h3>
-  </div>
-</div>
-`;
-
-exports[`Storyshots List Vertical 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="listContainer vertical"
-    role=""
-  >
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 1
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 2
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 3
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 4
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="listItem my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 5
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-  </ul>
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h3>
-      Footer
-    </h3>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Match Score Default 1`] = `
-<div
-  aria-label="score"
-  className="my-match-score-class matchScoreContainer"
->
-  <div
-    className="matchScoreCircle full"
-  />
-  <div
-    className="matchScoreCircle full"
-  />
-  <div
-    className="matchScoreCircle full"
-  />
-  <div
-    className="matchScoreCircle"
-  />
-  <div
-    className="matchScoreCircle"
-  />
-  <p
-    className="label"
-  >
-    3
-    /
-    5
-  </p>
-</div>
-`;
-
-exports[`Storyshots Match Score Without Label 1`] = `
-<div
-  aria-label="score"
-  className="my-match-score-class matchScoreContainer"
->
-  <div
-    className="matchScoreCircle full"
-  />
-  <div
-    className="matchScoreCircle full"
-  />
-  <div
-    className="matchScoreCircle full"
-  />
-  <div
-    className="matchScoreCircle"
-  />
-  <div
-    className="matchScoreCircle"
-  />
-</div>
-`;
-
-exports[`Storyshots Menu Menus 1`] = `
-<div
-  className="mainWrapper"
->
-  <button
-    aria-controls="dropdown-8"
-    aria-disabled={false}
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="button buttonDefault"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
-  >
-    <span
-      className=""
-    >
-      Menu dropdown
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Modal Fullscreen 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Scrollable 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal X Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Pagination All Combined 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span
-    className="sizes"
-  >
-    <div
-      className="mainWrapper"
-    >
-      <button
-        aria-controls="dropdown-15"
-        aria-disabled={false}
-        aria-expanded={false}
-        aria-haspopup={true}
-        aria-label="Selected page size"
-        className="button buttonDefault buttonSize3 iconLeft"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-        role="button"
-        tabIndex="0"
-      >
-        <span>
-          <span
-            aria-hidden={false}
-            className="icon iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-          <span
-            className="buttonText3"
-          >
-            page / 100
-          </span>
-        </span>
-      </button>
-    </div>
-  </span>
-  <span
-    className="total"
-  >
-    400 Total
-  </span>
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="paginationButton active button buttonDefault buttonSize3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          4
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <span
-    className="jump"
-  >
-    <div
-      className="inputWrapper"
-    >
-      <input
-        autoFocus={false}
-        className="editor"
-        defaultValue={4}
-        disabled={false}
-        id="input-16"
-        minLength={1}
-        onChange={[Function]}
-        readOnly={false}
-        required={false}
-        role="textbox"
-        tabIndex={0}
-        type="number"
-      />
-    </div>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Pagination Basic Few 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="paginationButton active button buttonDefault buttonSize3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          5
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Basic Many 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="paginationButton active button buttonDefault buttonSize3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-disabled={false}
-        aria-label="Next 5"
-        className="paginationButton quicknext button buttonDefault buttonSize3 iconLeft"
-        defaultChecked={false}
-        disabled={false}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          100
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Change Page Size 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span
-    className="sizes"
-  >
-    <div
-      className="mainWrapper"
-    >
-      <button
-        aria-controls="dropdown-17"
-        aria-disabled={false}
-        aria-expanded={false}
-        aria-haspopup={true}
-        aria-label="Selected page size"
-        className="button buttonDefault buttonSize3 iconLeft"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-        role="button"
-        tabIndex="0"
-      >
-        <span>
-          <span
-            aria-hidden={false}
-            className="icon iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-          <span
-            className="buttonText3"
-          >
-            page / 1000
-          </span>
-        </span>
-      </button>
-    </div>
-  </span>
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="paginationButton active button buttonDefault buttonSize3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Dots 1`] = `
-<div
-  className="my-pagination-class pagination dots"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="paginationButton active button buttonDefault buttonSize3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          5
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Jump To 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          10
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <span
-    className="jump"
-  >
-    <div
-      className="inputWrapper"
-    >
-      <input
-        autoFocus={false}
-        className="editor"
-        defaultValue={5}
-        disabled={false}
-        id="input-18"
-        minLength={1}
-        onChange={[Function]}
-        readOnly={false}
-        required={false}
-        role="textbox"
-        tabIndex={0}
-        type="number"
-      />
-    </div>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Pagination Total Item Count 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span
-    className="total"
-  >
-    1000 Total
-  </span>
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="paginationButton active button buttonDefault buttonSize3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-disabled={false}
-        aria-label="Next 5"
-        className="paginationButton quicknext button buttonDefault buttonSize3 iconLeft"
-        defaultChecked={false}
-        disabled={false}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="paginationButton button buttonDefault buttonSize3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="buttonText3"
-        >
-          100
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="paginationButton button buttonDefault buttonSize3 iconLeft"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Panel Bottom 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Left 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Stacked 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
+      </svg>
+    </span>
+  </div>
+  <div
+    className="empty-title"
   >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Top 1`] = `
-<button
-  aria-disabled={false}
-  className="button buttonPrimary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
   >
-    Open panel
-  </span>
-</button>
+    More detail on how might the user be able to get around this
+  </div>
+</div>
 `;
 
-exports[`Storyshots Pill Closable 1`] = `
+exports[`Storyshots Empty Empty Messages 1`] = `
 <div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
+  className="empty"
+  style={Object {}}
 >
   <div
-    className="tagPills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-image"
   >
-    <span
-      className="label"
-    >
-      red
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
+    <svg
+      className="empty-messages-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
+        fill="white"
+        stroke="#8ED0FA"
+        stroke-width="6"
+      />
+      <path
+        d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+      <path
+        d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+      <path
+        d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+    </svg>
   </div>
   <div
-    className="tagPills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-title"
   >
-    <span
-      className="label"
-    >
-      orange
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+    Short Message Here
   </div>
   <div
-    className="tagPills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-description"
   >
-    <span
-      className="label"
-    >
-      yellow
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Error State 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="server-error-image-default"
+      fill="none"
+      height="185"
+      viewBox="0 0 200 185"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+      <path
+        d="M39.0718 178.839C21.8078 172.861 3.66074 163.325 0.510726 151.175C-2.63929 139.025 9.18787 124.359 24.8068 116.637C40.5358 109.029 59.9069 108.449 71.9662 103.257C83.9156 97.9498 88.5731 87.9309 99.9189 78.9985C111.265 70.066 129.299 62.2199 140.372 65.9517C151.555 69.798 155.648 85.2069 164.716 97.6426C173.785 110.078 187.68 119.625 194.904 132.657C202.237 145.804 202.768 162.422 189.061 167.219C175.355 172.016 147.3 164.877 128.36 166.625C109.569 168.288 99.7624 178.823 86.4541 182.955C73.2954 187.004 56.4854 184.734 39.0718 178.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M49.2784 101.405C39.3247 57.4604 105.676 18.8428 136.863 78.7671C196.578 76.1036 191.934 156.002 145.489 158L107.668 158L46.6243 158C12.7837 158 0.841885 104.068 49.2784 101.405Z"
+        fill="white"
+        stroke="#8ED0FA"
+        stroke-width="6"
+      />
+      <path
+        d="M76.0193 103.097L82.4167 109.495L86.6594 105.252L80.2619 98.8548L76.0193 103.097ZM82.4167 108.081L76.38 114.117L80.6226 118.36L86.6594 112.323L82.4167 108.081ZM82.4167 109.495C82.0262 109.104 82.0262 108.471 82.4167 108.081L86.6594 112.323C88.612 110.371 88.612 107.205 86.6594 105.252L82.4167 109.495Z"
+        fill="#8ED0FA"
+      />
+      <path
+        d="M128.572 114.117L122.175 107.72L117.932 111.963L124.33 118.36L128.572 114.117ZM122.175 109.134L128.212 103.097L123.969 98.8548L117.932 104.892L122.175 109.134ZM122.175 107.72C122.566 108.111 122.566 108.744 122.175 109.134L117.932 104.892C115.98 106.844 115.98 110.01 117.932 111.963L122.175 107.72Z"
+        fill="#8ED0FA"
+      />
+      <path
+        d="M102 142C107.192 142 111 137.516 111 132.5C111 127.484 107.192 123 102 123C96.8079 123 93 127.484 93 132.5C93 137.516 96.8079 142 102 142Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <path
+        d="M161 68C166.192 68 170 63.5161 170 58.5C170 53.4839 166.192 49 161 49C155.808 49 152 53.4839 152 58.5C152 63.5161 155.808 68 161 68Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <path
+        d="M55 22C60.1921 22 64 17.5161 64 12.5C64 7.48391 60.1921 3 55 3C49.8079 3 46 7.48391 46 12.5C46 17.5161 49.8079 22 55 22Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <ellipse
+        cx="108"
+        cy="29.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        cx="28"
+        cy="89.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="161.334"
+        x2="148.606"
+        y1="11.6067"
+        y2="24.3346"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="161.335"
+        x2="148.608"
+        y1="24.3345"
+        y2="11.6065"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="31.334"
+        x2="18.6061"
+        y1="38.6067"
+        y2="51.3346"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="31.3355"
+        x2="18.6076"
+        y1="51.3345"
+        y2="38.6065"
+      />
+    </svg>
   </div>
   <div
-    className="tagPills green"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-title"
   >
-    <span
-      className="label"
-    >
-      green
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+    Short Message Here
   </div>
   <div
-    className="tagPills bluegreen"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-description"
   >
-    <span
-      className="label"
-    >
-      bluegreen
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+    More detail on how might the user be able to get around this
   </div>
+</div>
+`;
+
+exports[`Storyshots Empty No Data 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
   <div
-    className="tagPills blue"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-image"
   >
-    <span
-      className="label"
-    >
-      blue
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
+    <svg
+      className="empty-data-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
+        fill="white"
+      />
+      <path
+        clipRule="evenodd"
+        d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
+        fill="#B0F3FE"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
+        fill="#8ED0FA"
+        fillRule="evenodd"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        width="13.3333"
+        x="93.334"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        transform="rotate(-30 46.666 6.66675)"
+        width="13.3333"
+        x="46.666"
+        y="6.66675"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        transform="rotate(30 141.666 0)"
+        width="13.3333"
+        x="141.666"
+      />
+    </svg>
   </div>
-  <div
-    className="tagPills violet"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      violet
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
   </div>
   <div
-    className="tagPills grey"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-description"
   >
-    <span
-      className="label"
-    >
-      grey
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeButton button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon iconWrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
+    More detail on how might the user be able to get around this
   </div>
 </div>
 `;
 
-exports[`Storyshots Pill Default 1`] = `
+exports[`Storyshots Empty No Search Results 1`] = `
 <div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
+  className="empty"
+  style={Object {}}
 >
   <div
-    className="tagPills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      red
-    </span>
-  </div>
-  <div
-    className="tagPills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      orange
-    </span>
-  </div>
-  <div
-    className="tagPills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-image"
   >
-    <span
-      className="label"
+    <svg
+      className="empty-search-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      yellow
-    </span>
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M183 91C188.192 91 192 86.5161 192 81.5C192 76.4839 188.192 72 183 72C177.808 72 174 76.4839 174 81.5C174 86.5161 177.808 91 183 91Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <circle
+        cx="139"
+        cy="47"
+        fill="#B0F3FE"
+        r="5"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="10"
+        rx="5"
+        width="20"
+        x="148"
+        y="42"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="10"
+        rx="5"
+        width="30"
+        x="10"
+        y="83"
+      />
+      <path
+        d="M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412Z"
+        fill="white"
+      />
+      <path
+        d="M127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693Z"
+        fill="white"
+      />
+      <path
+        d="M125.26 118.259L118.189 111.187M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412ZM155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664Z"
+        stroke="#8ED0FA"
+        stroke-width="6"
+        strokeLinecap="round"
+      />
+      <path
+        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+    </svg>
   </div>
   <div
-    className="tagPills green"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-title"
   >
-    <span
-      className="label"
-    >
-      green
-    </span>
+    Short Message Here
   </div>
   <div
-    className="tagPills bluegreen"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-description"
   >
-    <span
-      className="label"
-    >
-      bluegreen
-    </span>
+    More detail on how might the user be able to get around this
   </div>
+</div>
+`;
+
+exports[`Storyshots Empty Tasks Complete 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
   <div
-    className="tagPills blue"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-image"
   >
-    <span
-      className="label"
+    <svg
+      className="tasks-complete-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      blue
-    </span>
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M180 98C185.192 98 189 93.5161 189 88.5C189 83.4839 185.192 79 180 79C174.808 79 171 83.4839 171 88.5C171 93.5161 174.808 98 180 98Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <circle
+        cx="139"
+        cy="47"
+        fill="#B0F3FE"
+        r="5"
+      />
+      <path
+        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+      <circle
+        cx="98"
+        cy="79"
+        fill="white"
+        r="60"
+        stroke="#8ED0FA"
+        stroke-width="6"
+        strokeLinecap="round"
+      />
+      <path
+        d="M80.9802 73.3685C79.5239 72.0567 77.2649 72.1574 75.9346 73.5935C74.6043 75.0295 74.7064 77.2571 76.1627 78.569L92.971 93.7098C95.0099 95.5463 98.1725 95.4053 100.035 93.3948C100.113 93.3094 100.113 93.3094 100.188 93.2217L124.175 64.7735C125.436 63.2779 125.228 61.0574 123.712 59.8139C122.195 58.5703 119.943 58.7747 118.682 60.2703L96.1309 87.0162L80.9802 73.3685Z"
+        fill="#B0F3FE"
+      />
+      <path
+        d="M16 26C21.1921 26 25 21.5161 25 16.5C25 11.4839 21.1921 7 16 7C10.8079 7 7 11.4839 7 16.5C7 21.5161 10.8079 26 16 26Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <ellipse
+        cx="38"
+        cy="35.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        cx="171"
+        cy="35.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="160"
+        x2="142"
+        y1="13"
+        y2="13"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="151"
+        x2="151"
+        y1="22"
+        y2="4"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="31"
+        x2="13"
+        y1="87"
+        y2="87"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="22"
+        x2="22"
+        y1="96"
+        y2="78"
+      />
+    </svg>
   </div>
   <div
-    className="tagPills violet"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-title"
   >
-    <span
-      className="label"
-    >
-      violet
-    </span>
+    Short Message Here
   </div>
   <div
-    className="tagPills grey"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+    className="empty-description"
   >
-    <span
-      className="label"
-    >
-      grey
-    </span>
+    More detail on how might the user be able to get around this
   </div>
 </div>
 `;
 
-exports[`Storyshots Pill With Button 1`] = `
-<div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
+exports[`Storyshots Icon Basic 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
 >
-  <div
-    className="tagPills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      red
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tagPills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      orange
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tagPills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      yellow
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tagPills green"
+  <svg
+    aria-labelledby="icon_labelledby_26 icon_describedby_26"
     style={
       Object {
-        "color": undefined,
+        "height": "20px",
+        "width": "20px",
       }
     }
+    viewBox="0 0 24 24"
   >
-    <span
-      className="label"
+    <title
+      id="icon_labelledby_26"
     >
-      green
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
+      My icon title.
+    </title>
+    <desc
+      id="icon_describedby_26"
     >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tagPills bluegreen"
-    style={
-      Object {
-        "color": undefined,
+      My icon description.
+    </desc>
+    <path
+      d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+      style={
+        Object {
+          "fill": "#000000",
+        }
       }
-    }
-  >
-    <span
-      className="label"
-    >
-      bluegreen
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tagPills blue"
+    />
+  </svg>
+</span>
+`;
+
+exports[`Storyshots Icon Icomoon 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    className=""
+    height="20px"
+    role="presentation"
     style={
       Object {
-        "color": undefined,
+        "display": "inline-block",
+        "verticalAlign": "middle",
       }
     }
+    viewBox="0 0 1024 1024"
+    width="20px"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <span
-      className="label"
-    >
-      blue
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tagPills violet"
-    style={
-      Object {
-        "color": undefined,
+    <path
+      d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
+      style={
+        Object {
+          "fill": "#000000",
+        }
       }
-    }
-  >
-    <span
-      className="label"
-    >
-      violet
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tagPills grey"
+    />
+  </svg>
+</span>
+`;
+
+exports[`Storyshots Icon Icomoon Multicolor 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    className=""
+    height="24px"
+    role="presentation"
     style={
       Object {
-        "color": undefined,
+        "display": "inline-block",
+        "verticalAlign": "middle",
       }
     }
+    viewBox="0 0 1024 1024"
+    width="24px"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <span
-      className="label"
-    >
-      grey
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button buttonDefault buttonSize2 iconLeft"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon iconWrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="buttonText2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
+    <path
+      d="M102.4 153.6v716.8h241.912v-139.999h79.375v139.999h241.912v-716.8h-563.2zM181.777 233.867h81.268v78.399h-81.268v-78.399zM344.312 233.867h79.375v78.399h-79.375v-78.399zM504.955 233.867h81.267v78.399h-81.267v-78.399zM181.777 392.532h81.268v80.269h-81.268v-80.269zM344.312 392.532h79.375v80.269h-79.375v-80.269zM504.955 392.532h81.267v80.269h-81.267v-80.269zM181.777 551.201h81.268v80.266h-81.268v-80.266zM344.312 551.201h79.375v80.266h-79.375v-80.266zM504.955 551.201h81.267v80.266h-81.267v-80.266zM181.777 711.734h81.268v78.4h-81.268v-78.4zM504.955 711.734h81.267v78.4h-81.267v-78.4z"
+      fill="rgb(80, 206, 225)"
+      style={
+        Object {
+          "fill": undefined,
+        }
+      }
+    />
+    <path
+      d="M598.536 358.4h108.529c14.303 0 26.501 5.478 36.598 16.435 10.936 10.112 16.404 22.333 16.404 36.662v54.359h108.531c14.303 0 26.501 5.478 36.598 16.435 10.936 10.115 16.404 22.756 16.404 37.926v295.821c0 15.171-5.468 28.234-16.404 39.191-10.097 10.115-22.295 15.171-36.598 15.171h-431.596c-14.303 0-26.921-5.056-37.86-15.171-10.094-10.957-15.142-24.020-15.142-39.191v-295.821c0-15.171 5.048-27.812 15.142-37.926 10.939-10.957 23.557-16.435 37.86-16.435h108.531v-54.359c0-14.328 5.046-26.55 15.142-36.662 10.936-10.957 23.557-16.435 37.86-16.435zM707.064 465.856v-54.359h-108.529v54.359h108.529z"
+      fill="rgb(20, 109, 166)"
+      opacity={0.6}
+      style={
+        Object {
+          "fill": undefined,
+        }
+      }
+    />
+  </svg>
+</span>
 `;
 
-exports[`Storyshots Pill With Icon 1`] = `
+exports[`Storyshots Info Bar Disruptive 1`] = `
 <div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
+  className="info-bar my-info-bar-class disruptive"
+  role="presentation"
+  style={Object {}}
 >
-  <div
-    className="tagPills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
   >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
+    <svg
       role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
     >
-      <svg
-        role="presentation"
+      <path
+        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
         style={
           Object {
-            "height": "20px",
-            "width": "20px",
+            "fill": "currentColor",
           }
         }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
     <span
-      className="label"
+      className=""
     >
-      red
+      Action
     </span>
-  </div>
-  <div
-    className="tagPills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
   >
     <span
       aria-hidden={false}
-      className="icon iconWrapper"
+      className="icon icon-wrapper"
       role="presentation"
     >
       <svg
@@ -8663,7 +2298,7 @@ exports[`Storyshots Pill With Icon 1`] = `
         viewBox="0 0 24 24"
       >
         <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
           style={
             Object {
               "fill": "currentColor",
@@ -8672,23 +2307,73 @@ exports[`Storyshots Pill With Icon 1`] = `
         />
       </svg>
     </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Neutral 1`] = `
+<div
+  className="info-bar my-info-bar-class neutral"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
     <span
-      className="label"
+      className=""
     >
-      orange
+      Action
     </span>
-  </div>
-  <div
-    className="tagPills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
   >
     <span
       aria-hidden={false}
-      className="icon iconWrapper"
+      className="icon icon-wrapper"
       role="presentation"
     >
       <svg
@@ -8702,7 +2387,7 @@ exports[`Storyshots Pill With Icon 1`] = `
         viewBox="0 0 24 24"
       >
         <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
           style={
             Object {
               "fill": "currentColor",
@@ -8711,23 +2396,73 @@ exports[`Storyshots Pill With Icon 1`] = `
         />
       </svg>
     </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Positive 1`] = `
+<div
+  className="info-bar my-info-bar-class positive"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
     <span
-      className="label"
+      className=""
     >
-      yellow
+      Action
     </span>
-  </div>
-  <div
-    className="tagPills green"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
   >
     <span
       aria-hidden={false}
-      className="icon iconWrapper"
+      className="icon icon-wrapper"
       role="presentation"
     >
       <svg
@@ -8741,7 +2476,7 @@ exports[`Storyshots Pill With Icon 1`] = `
         viewBox="0 0 24 24"
       >
         <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
           style={
             Object {
               "fill": "currentColor",
@@ -8750,23 +2485,73 @@ exports[`Storyshots Pill With Icon 1`] = `
         />
       </svg>
     </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Warning 1`] = `
+<div
+  className="info-bar my-info-bar-class warning"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
     <span
-      className="label"
+      className=""
     >
-      green
+      Action
     </span>
-  </div>
-  <div
-    className="tagPills bluegreen"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
   >
     <span
       aria-hidden={false}
-      className="icon iconWrapper"
+      className="icon icon-wrapper"
       role="presentation"
     >
       <svg
@@ -8780,7 +2565,7 @@ exports[`Storyshots Pill With Icon 1`] = `
         viewBox="0 0 24 24"
       >
         <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
           style={
             Object {
               "fill": "currentColor",
@@ -8789,907 +2574,879 @@ exports[`Storyshots Pill With Icon 1`] = `
         />
       </svg>
     </span>
-    <span
-      className="label"
+  </button>
+</div>
+`;
+
+exports[`Storyshots Link Default 1`] = `
+<a
+  className="link-style my-link-class"
+  href="https://www.twitter.com"
+  style={Object {}}
+  target="_self"
+>
+  Twitter
+</a>
+`;
+
+exports[`Storyshots Link Default Disabled 1`] = `
+<a
+  className="link-style my-link-class"
+  href="https://www.facebook.com"
+  style={Object {}}
+  target="_self"
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
     >
-      bluegreen
-    </span>
+      <path
+        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  User Profile
+</a>
+`;
+
+exports[`Storyshots Link Primary 1`] = `
+<a
+  className="link-style my-link-class primary"
+  href="https://www.facebook.com"
+  style={
+    Object {
+      "maxWidth": "100px",
+    }
+  }
+  target="_self"
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  User Profile
+</a>
+`;
+
+exports[`Storyshots List Horizontal 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h2>
+      Header
+    </h2>
   </div>
+  <ul
+    className="list-container"
+    role=""
+  >
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 1
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 2
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 3
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 4
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 5
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+  </ul>
   <div
-    className="tagPills blue"
     style={
       Object {
-        "color": undefined,
+        "paddingLeft": "16px",
       }
     }
   >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      blue
-    </span>
+    <h3>
+      Footer
+    </h3>
   </div>
+</div>
+`;
+
+exports[`Storyshots List Vertical 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
   <div
-    className="tagPills violet"
     style={
       Object {
-        "color": undefined,
+        "paddingLeft": "16px",
       }
     }
   >
-    <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
+    <h2>
+      Header
+    </h2>
+  </div>
+  <ul
+    className="list-container vertical"
+    role=""
+  >
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
     >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
+      <div>
+        <p>
+          User 1
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
         }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
+      }
     >
-      violet
-    </span>
-  </div>
+      <div>
+        <p>
+          User 2
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 3
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 4
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 5
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+  </ul>
   <div
-    className="tagPills grey"
     style={
       Object {
-        "color": undefined,
+        "paddingLeft": "16px",
       }
     }
+  >
+    <h3>
+      Footer
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Match Score Default 1`] = `
+<div
+  aria-label="score"
+  className="my-match-score-class match-score-container"
+>
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <p
+    className="label"
+  >
+    3
+    /
+    5
+  </p>
+</div>
+`;
+
+exports[`Storyshots Match Score Without Label 1`] = `
+<div
+  aria-label="score"
+  className="my-match-score-class match-score-container"
+>
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <div
+    className="match-score-circle"
+  />
+</div>
+`;
+
+exports[`Storyshots Menu Menus 1`] = `
+<div
+  className="main-wrapper"
+>
+  <button
+    aria-controls="dropdown-5"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="button button-default"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
   >
     <span
-      aria-hidden={false}
-      className="icon iconWrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
+      className=""
     >
-      grey
+      Menu dropdown
     </span>
-  </div>
+  </button>
 </div>
 `;
 
-exports[`Storyshots Portal Default 1`] = `<div />`;
+exports[`Storyshots Modal Fullscreen 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
 
-exports[`Storyshots Radio Button Radio Button 1`] = `
-<div
-  className="selector my-radiobutton-class"
+exports[`Storyshots Modal Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <input
-    aria-label="Label"
-    checked={false}
-    disabled={false}
-    id="myRadioButtonId"
-    name="myRadioButtonName"
-    onChange={[Function]}
-    readOnly={true}
-    type="radio"
-    value="Label"
-  />
-  <label
+  <span
     className=""
-    htmlFor="myRadioButtonId"
   >
-    <span
-      className="radioButton"
-      id="myRadioButtonId-custom-radio"
-    />
-    <span
-      className="selectorLabel"
-    >
-      Label
-    </span>
-  </label>
-</div>
+    Open modal
+  </span>
+</button>
 `;
 
-exports[`Storyshots Radio Button Radio Group 1`] = `
-<div
-  aria-label="Radio Group"
-  className="radioGroup"
-  role="group"
+exports[`Storyshots Modal Scrollable 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="selector"
+  <span
+    className=""
   >
-    <input
-      checked={true}
-      disabled={false}
-      id="oea2exk-1"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio1"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-1"
-    >
-      <span
-        className="radioButton"
-        id="oea2exk-1-custom-radio"
-      />
-      <span
-        className="selectorLabel"
-      >
-        Radio1
-      </span>
-    </label>
-  </div>
-  <div
-    className="selector"
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
   >
-    <input
-      checked={false}
-      disabled={false}
-      id="oea2exk-2"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio2"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-2"
-    >
-      <span
-        className="radioButton"
-        id="oea2exk-2-custom-radio"
-      />
-      <span
-        className="selectorLabel"
-      >
-        Radio2
-      </span>
-    </label>
-  </div>
-  <div
-    className="selector"
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal X Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
   >
-    <input
-      checked={false}
-      disabled={false}
-      id="oea2exk-3"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio3"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-3"
-    >
-      <span
-        className="radioButton"
-        id="oea2exk-3-custom-radio"
-      />
-      <span
-        className="selectorLabel"
-      >
-        Radio3
-      </span>
-    </label>
-  </div>
-</div>
+    Open modal
+  </span>
+</button>
 `;
 
-exports[`Storyshots Select Basic 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+exports[`Storyshots Panel Bottom 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+  <span
+    className=""
   >
-    <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-19"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="selectInput withIcon inputStretch"
-          disabled={false}
-          id="input-20"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Left 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
 `;
 
-exports[`Storyshots Select Disabled 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+exports[`Storyshots Panel Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+  <span
+    className=""
   >
-    <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-21"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="selectInput withIcon inputStretch"
-          disabled={true}
-          id="input-22"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+    Open panel
+  </span>
+</button>
 `;
 
-exports[`Storyshots Select Dynamic 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+exports[`Storyshots Panel Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="selectWrapper"
+  <span
+    className=""
   >
-    <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-23"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="withIcon inputStretch"
-          disabled={false}
-          id="input-24"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={false}
-          required={false}
-          role="textbox"
-          style={
-            Object {
-              "minWidth": "unset",
-            }
-          }
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+    Open panel
+  </span>
+</button>
 `;
 
-exports[`Storyshots Select Filterable 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+exports[`Storyshots Panel Stacked 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+  <span
+    className=""
   >
-    <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-25"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="withIcon inputStretch"
-          disabled={false}
-          id="input-26"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={false}
-          required={false}
-          role="textbox"
-          style={
-            Object {
-              "minWidth": "unset",
-            }
-          }
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+    Open panel
+  </span>
+</button>
 `;
 
-exports[`Storyshots Select Multiple 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+exports[`Storyshots Panel Top 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+  <span
+    className=""
   >
-    <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-27"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="withIcon inputStretch"
-          disabled={false}
-          id="input-28"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={false}
-          required={false}
-          role="textbox"
-          style={
-            Object {
-              "minWidth": "unset",
-            }
-          }
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Portal Default 1`] = `<div />`;
+
+exports[`Storyshots Radio Button Radio Button 1`] = `
+<div
+  className="selector my-radiobutton-class"
+>
+  <input
+    aria-label="Label"
+    checked={false}
+    disabled={false}
+    id="myRadioButtonId"
+    name="myRadioButtonName"
+    onChange={[Function]}
+    readOnly={true}
+    type="radio"
+    value="Label"
+  />
+  <label
+    className=""
+    htmlFor="myRadioButtonId"
+  >
+    <span
+      className="radio-button"
+      id="myRadioButtonId-custom-radio"
+    />
+    <span
+      className="selector-label"
+    >
+      Label
+    </span>
+  </label>
 </div>
 `;
 
-exports[`Storyshots Select Multiple With No Filter 1`] = `
+exports[`Storyshots Radio Button Radio Group 1`] = `
 <div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+  aria-label="Radio Group"
+  className="radio-group"
+  role="group"
 >
   <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+    className="selector"
   >
-    <div
-      className="selectDropdownMainWrapper mainWrapper"
+    <input
+      checked={true}
+      disabled={false}
+      id="oea2exk-1"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio1"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-1"
     >
-      <div
-        className="inputWrapper inputStretch"
+      <span
+        className="radio-button"
+        id="oea2exk-1-custom-radio"
+      />
+      <span
+        className="selector-label"
       >
-        <input
-          aria-controls="dropdown-29"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="selectInput withIcon inputStretch"
-          disabled={false}
-          id="input-30"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
+        Radio1
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
+  >
+    <input
+      checked={false}
+      disabled={false}
+      id="oea2exk-2"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio2"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-2"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-2-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio2
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
+  >
+    <input
+      checked={false}
+      disabled={false}
+      id="oea2exk-3"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio3"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-3"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-3-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio3
+      </span>
+    </label>
   </div>
 </div>
 `;
 
-exports[`Storyshots Select Options Disabled 1`] = `
+exports[`Storyshots Slider Range Slider 1`] = `
 <div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+  className="slider-container"
 >
   <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+    className="slider"
   >
     <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-31"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="selectInput withIcon inputStretch"
-          disabled={false}
-          id="input-32"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
+      className="slider-rail"
+    />
+    <div
+      className="slider-track"
+    />
+    <input
+      className="thumb"
+      disabled={false}
+      max={200}
+      min={0}
+      onChange={[Function]}
+      step={10}
+      type="range"
+      value={110}
+    />
+    <input
+      className="thumb"
+      disabled={false}
+      max={200}
+      min={0}
+      onChange={[Function]}
+      step={10}
+      type="range"
+      value={150}
+    />
+  </div>
+  <div
+    className="slider-value label-visible"
+  >
+    110
+  </div>
+  <div
+    className="slider-value label-visible"
+  >
+    150
+  </div>
+  <div
+    className="extremity-label min-label label-visible"
+  >
+    0
+  </div>
+  <div
+    className="extremity-label max-label label-visible"
+  >
+    200
   </div>
 </div>
 `;
 
-exports[`Storyshots Select With Clear 1`] = `
+exports[`Storyshots Slider Standard Slider 1`] = `
 <div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
+  className="slider-container"
 >
   <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+    className="slider"
   >
     <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-33"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="selectInput withIcon inputStretch"
-          disabled={false}
-          id="input-34"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
+      className="slider-rail"
+    />
+    <div
+      className="slider-track"
+    />
+    <div
+      className="rail-marker active"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <input
+      className="thumb"
+      disabled={false}
+      max={5}
+      min={1}
+      onChange={[Function]}
+      step={1}
+      type="range"
+      value={2}
+    />
   </div>
-</div>
-`;
-
-exports[`Storyshots Select With Default Value 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
   <div
-    className="selectWrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
+    className="slider-value"
   >
-    <div
-      className="selectDropdownMainWrapper mainWrapper"
-    >
-      <div
-        className="inputWrapper inputStretch"
-      >
-        <input
-          aria-controls="dropdown-35"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="selectInput withIcon inputStretch"
-          disabled={false}
-          id="input-36"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="iconWrapper leftIcon"
-        >
-          <span
-            aria-hidden={false}
-            className="iconWrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
+    2
+  </div>
+  <div
+    className="extremity-label min-label"
+  >
+    1
+  </div>
+  <div
+    className="extremity-label max-label"
+  >
+    5
   </div>
 </div>
 `;
@@ -9697,13 +3454,13 @@ exports[`Storyshots Select With Default Value 1`] = `
 exports[`Storyshots Snack Bar Closable 1`] = `
 <button
   aria-disabled={false}
-  className="button buttonDefault buttonSize3"
+  className="button button-default button-size3"
   defaultChecked={false}
   disabled={false}
   onClick={[Function]}
 >
   <span
-    className="buttonText3"
+    className="button-text3"
   >
     Serve closable snack
   </span>
@@ -9713,13 +3470,13 @@ exports[`Storyshots Snack Bar Closable 1`] = `
 exports[`Storyshots Snack Bar Default 1`] = `
 <button
   aria-disabled={false}
-  className="button buttonDefault buttonSize3"
+  className="button button-default button-size3"
   defaultChecked={false}
   disabled={false}
   onClick={[Function]}
 >
   <span
-    className="buttonText3"
+    className="button-text3"
   >
     Serve snack
   </span>
@@ -9729,13 +3486,13 @@ exports[`Storyshots Snack Bar Default 1`] = `
 exports[`Storyshots Snack Bar With Action 1`] = `
 <button
   aria-disabled={false}
-  className="button buttonDefault buttonSize3"
+  className="button button-default button-size3"
   defaultChecked={false}
   disabled={false}
   onClick={[Function]}
 >
   <span
-    className="buttonText3"
+    className="button-text3"
   >
     Serve snack with action
   </span>
@@ -9745,7 +3502,7 @@ exports[`Storyshots Snack Bar With Action 1`] = `
 exports[`Storyshots Spinner Default 1`] = `
 <span
   aria-hidden={false}
-  className="spinner my-spinner-class iconWrapper"
+  className="spinner my-spinner-class icon-wrapper"
   role="presentation"
 >
   <svg
@@ -9787,354 +3544,10 @@ exports[`Storyshots Spinner Default 1`] = `
 </span>
 `;
 
-exports[`Storyshots Stack Horizontal 1`] = `
-<div
-  className="stack my-stack-class horizontal m"
-  style={
-    Object {
-      "alignItems": "",
-      "backgroundColor": "aquamarine",
-      "flexWrap": "",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`Storyshots Stack Responsive 1`] = `
-<div
-  className="stack my-stack-class vertical l"
-  style={
-    Object {
-      "alignItems": "",
-      "backgroundColor": "aquamarine",
-      "flexWrap": "",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`Storyshots Stack Sample Nav List 1`] = `
-<div
-  className="stack navListContainer horizontal"
-  style={
-    Object {
-      "alignItems": "",
-      "flexWrap": "wrap",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Stack Vertical 1`] = `
-<div
-  className="stack my-stack-class vertical l"
-  style={
-    Object {
-      "alignItems": "",
-      "backgroundColor": "aquamarine",
-      "flexWrap": "",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-</div>
-`;
-
 exports[`Storyshots Tabs Default 1`] = `
 <div>
   <div
-    className="tabWrap"
+    className="tab-wrap"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -10152,7 +3565,7 @@ exports[`Storyshots Tabs Default 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -10205,7 +3618,7 @@ exports[`Storyshots Tabs Default 1`] = `
 exports[`Storyshots Tabs Icon 1`] = `
 <div>
   <div
-    className="tabWrap"
+    className="tab-wrap"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -10219,7 +3632,7 @@ exports[`Storyshots Tabs Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10243,7 +3656,7 @@ exports[`Storyshots Tabs Icon 1`] = `
         </svg>
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -10258,7 +3671,7 @@ exports[`Storyshots Tabs Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10291,7 +3704,7 @@ exports[`Storyshots Tabs Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10325,7 +3738,7 @@ exports[`Storyshots Tabs Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10356,7 +3769,7 @@ exports[`Storyshots Tabs Icon 1`] = `
 exports[`Storyshots Tabs Icon Label 1`] = `
 <div>
   <div
-    className="tabWrap"
+    className="tab-wrap"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -10370,7 +3783,7 @@ exports[`Storyshots Tabs Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10399,7 +3812,7 @@ exports[`Storyshots Tabs Icon Label 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -10414,7 +3827,7 @@ exports[`Storyshots Tabs Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10452,7 +3865,7 @@ exports[`Storyshots Tabs Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10491,7 +3904,7 @@ exports[`Storyshots Tabs Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10527,7 +3940,7 @@ exports[`Storyshots Tabs Icon Label 1`] = `
 exports[`Storyshots Tabs Pill Default 1`] = `
 <div>
   <div
-    className="tabWrap pill"
+    className="tab-wrap pill"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -10545,7 +3958,7 @@ exports[`Storyshots Tabs Pill Default 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -10598,7 +4011,7 @@ exports[`Storyshots Tabs Pill Default 1`] = `
 exports[`Storyshots Tabs Pill Icon 1`] = `
 <div>
   <div
-    className="tabWrap pill"
+    className="tab-wrap pill"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -10612,7 +4025,7 @@ exports[`Storyshots Tabs Pill Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10636,7 +4049,7 @@ exports[`Storyshots Tabs Pill Icon 1`] = `
         </svg>
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -10651,7 +4064,7 @@ exports[`Storyshots Tabs Pill Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10684,7 +4097,7 @@ exports[`Storyshots Tabs Pill Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10718,7 +4131,7 @@ exports[`Storyshots Tabs Pill Icon 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10749,7 +4162,7 @@ exports[`Storyshots Tabs Pill Icon 1`] = `
 exports[`Storyshots Tabs Pill Icon Label 1`] = `
 <div>
   <div
-    className="tabWrap pill"
+    className="tab-wrap pill"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -10763,7 +4176,7 @@ exports[`Storyshots Tabs Pill Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10792,7 +4205,7 @@ exports[`Storyshots Tabs Pill Icon Label 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -10807,7 +4220,7 @@ exports[`Storyshots Tabs Pill Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10845,7 +4258,7 @@ exports[`Storyshots Tabs Pill Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10884,7 +4297,7 @@ exports[`Storyshots Tabs Pill Icon Label 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -10920,7 +4333,7 @@ exports[`Storyshots Tabs Pill Icon Label 1`] = `
 exports[`Storyshots Tabs Pill With Badge 1`] = `
 <div>
   <div
-    className="tabWrap pill"
+    className="tab-wrap pill"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -10938,7 +4351,7 @@ exports[`Storyshots Tabs Pill With Badge 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -11011,7 +4424,7 @@ exports[`Storyshots Tabs Pill With Badge 1`] = `
 exports[`Storyshots Tabs Scrollable 1`] = `
 <div>
   <div
-    className="tabWrap scrollable"
+    className="tab-wrap scrollable"
     role="tablist"
     style={
       Object {
@@ -11033,7 +4446,7 @@ exports[`Storyshots Tabs Scrollable 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -11164,7 +4577,7 @@ exports[`Storyshots Tabs Scrollable 1`] = `
 exports[`Storyshots Tabs Small 1`] = `
 <div>
   <div
-    className="tabWrap small"
+    className="tab-wrap small"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -11182,7 +4595,7 @@ exports[`Storyshots Tabs Small 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -11235,7 +4648,7 @@ exports[`Storyshots Tabs Small 1`] = `
 exports[`Storyshots Tabs With Badge 1`] = `
 <div>
   <div
-    className="tabWrap"
+    className="tab-wrap"
     role="tablist"
     style={Object {}}
     value="tab1"
@@ -11253,7 +4666,7 @@ exports[`Storyshots Tabs With Badge 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -11322,28 +4735,3 @@ exports[`Storyshots Tabs With Badge 1`] = `
   </div>
 </div>
 `;
-
-exports[`Storyshots Tooltip Tooltips 1`] = `
-<div
-  className="referenceWrapper"
-  id="4fzzzxj"
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
->
-  <button
-    aria-disabled={false}
-    aria-label="Show Tooltip"
-    className="button buttonPrimary buttonSize2"
-    defaultChecked={false}
-    disabled={false}
-  >
-    <span
-      className="buttonText2"
-    >
-      Show Tooltip
-    </span>
-  </button>
-</div>
-`;
diff --git a/src/components/Dialog/Dialog.test.tsx b/src/components/Dialog/Dialog.test.tsx
index fbc121003..c7ad0d0f5 100644
--- a/src/components/Dialog/Dialog.test.tsx
+++ b/src/components/Dialog/Dialog.test.tsx
@@ -63,10 +63,10 @@ describe('Dialog', () => {
             onCancel,
             onClose,
         });
-        wrapper.find('.buttonPrimary').at(0).simulate('click');
-        wrapper.find('.buttonDefault').at(0).simulate('click');
-        wrapper.find('.buttonNeutral').at(0).simulate('click');
-        wrapper.find('.dialogBackdrop').at(0).simulate('click');
+        wrapper.find('.button-primary').at(0).simulate('click');
+        wrapper.find('.button-default').at(0).simulate('click');
+        wrapper.find('.button-neutral').at(0).simulate('click');
+        wrapper.find('.dialog-backdrop').at(0).simulate('click');
 
         expect(onOk).toHaveBeenCalledTimes(1);
         expect(onCancel).toHaveBeenCalledTimes(1);
@@ -76,7 +76,7 @@ describe('Dialog', () => {
             maskClosable: false,
         });
 
-        wrapper.find('.dialogBackdrop').at(0).simulate('click');
+        wrapper.find('.dialog-backdrop').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
     });
 });
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index f304577d0..15b93ba57 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -53,8 +53,8 @@ describe('Modal', () => {
             body,
             onClose,
         });
-        wrapper.find('.buttonNeutral').at(0).simulate('click');
-        wrapper.find('.dialogBackdrop').at(0).simulate('click');
+        wrapper.find('.button-neutral').at(0).simulate('click');
+        wrapper.find('.dialog-backdrop').at(0).simulate('click');
 
         expect(onClose).toHaveBeenCalledTimes(2);
 
@@ -62,7 +62,7 @@ describe('Modal', () => {
             maskClosable: false,
         });
 
-        wrapper.find('.dialogBackdrop').at(0).simulate('click');
+        wrapper.find('.dialog-backdrop').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
     });
 });
diff --git a/src/components/Panel/Panel.test.tsx b/src/components/Panel/Panel.test.tsx
index e80ece51b..9d08f12a5 100644
--- a/src/components/Panel/Panel.test.tsx
+++ b/src/components/Panel/Panel.test.tsx
@@ -54,15 +54,15 @@ describe('Panel', () => {
             visible: true,
             onClose,
         });
-        wrapper.find('.panelBackdrop').at(0).simulate('click');
+        wrapper.find('.panel-backdrop').at(0).simulate('click');
 
-        wrapper.find('.buttonNeutral').at(0).simulate('click');
+        wrapper.find('.button-neutral').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
 
         wrapper.setProps({
             maskClosable: false,
         });
-        wrapper.find('.panelBackdrop').at(0).simulate('click');
+        wrapper.find('.panel-backdrop').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
     });
 });
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
new file mode 100644
index 000000000..1c7f2d8ea
--- /dev/null
+++ b/src/components/Slider/Slider.stories.tsx
@@ -0,0 +1,47 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import { Slider } from './';
+
+export default {
+    title: 'Slider',
+    component: Slider,
+} as ComponentMeta<typeof Slider>;
+
+const Slider_Story: ComponentStory<typeof Slider> = (args) => (
+    <Slider {...args} />
+);
+
+const sliderArgs: Object = {
+    ariaLabel: 'Slider',
+    autoFocus: false,
+    className: 'my-slider',
+    disabled: false,
+    id: 'mySliderId',
+    min: 100,
+    max: 200,
+    name: 'mySlider',
+    onChange: (value: number | number[]) => {
+        console.log(value);
+    },
+};
+
+export const StandardSlider = Slider_Story.bind({});
+StandardSlider.args = {
+    ...sliderArgs,
+    autoFocus: true,
+    min: 1,
+    max: 5,
+    showLabels: false,
+    value: 2,
+};
+
+export const RangeSlider = Slider_Story.bind({});
+RangeSlider.args = {
+    ...sliderArgs,
+    min: 0,
+    showLabels: true,
+    showMarkers: true,
+    step: 10,
+    value: [110, 150],
+};
diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx
new file mode 100644
index 000000000..b59401794
--- /dev/null
+++ b/src/components/Slider/Slider.test.tsx
@@ -0,0 +1,88 @@
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Enzyme, { mount, ReactWrapper } from 'enzyme';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import React from 'react';
+
+import { Slider } from './';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let matchMedia: any;
+
+describe('Slider', () => {
+    let wrapper: ReactWrapper;
+
+    beforeAll(() => {
+        matchMedia = new MatchMediaMock();
+    });
+    afterEach(() => {
+        matchMedia.clear();
+    });
+
+    test('Should render', () => {
+        wrapper = mount(<Slider min={20} max={40} value={30} />);
+        expect(wrapper.children().length).toEqual(1);
+    });
+
+    test('should correctly display markers and indicate when they are active', () => {
+        let markers;
+        let activeMarkers;
+
+        wrapper = mount(
+            <Slider min={20} max={40} value={30} showMarkers={true} />
+        );
+        markers = wrapper.find('.rail-marker');
+        expect(markers.length).toEqual(19);
+        activeMarkers = wrapper.find('.rail-marker.active');
+        expect(activeMarkers.length).toEqual(10);
+
+        wrapper = mount(
+            <Slider
+                min={0}
+                max={40}
+                step={10}
+                value={[10, 20]}
+                showMarkers={true}
+            />
+        );
+        markers = wrapper.find('.rail-marker');
+        expect(markers.length).toEqual(3);
+        activeMarkers = wrapper.find('.rail-marker.active');
+        expect(activeMarkers.length).toEqual(2);
+    });
+
+    test('should update values correctly', () => {
+        let val = 1;
+        wrapper = mount(
+            <Slider
+                min={0}
+                max={10}
+                value={val}
+                onChange={(newVal: number) => (val = newVal)}
+            />
+        );
+
+        let thumb = wrapper.find('input[type="range"]').at(0);
+        expect(thumb.prop('value')).toEqual(1);
+        thumb.simulate('change', { target: { value: 3 } });
+        expect(val).toEqual(3);
+
+        let vals = [0, 10];
+        wrapper = mount(
+            <Slider
+                min={0}
+                max={20}
+                value={vals}
+                onChange={(newVal: number[]) => (vals = [...newVal])}
+            />
+        );
+        let thumb1 = wrapper.find('input[type="range"]').at(0);
+        let thumb2 = wrapper.find('input[type="range"]').at(1);
+        expect(thumb1.prop('value')).toEqual(0);
+        expect(thumb2.prop('value')).toEqual(10);
+        thumb1.simulate('change', { target: { value: 3 } });
+        thumb2.simulate('change', { target: { value: 7 } });
+        expect(vals[0]).toEqual(3);
+        expect(vals[1]).toEqual(7);
+    });
+});
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
new file mode 100644
index 000000000..189ff4d2d
--- /dev/null
+++ b/src/components/Slider/Slider.tsx
@@ -0,0 +1,241 @@
+import React, { FC, useLayoutEffect, useRef, useState } from 'react';
+
+import { mergeClasses } from '../../shared/utilities';
+import styles from './slider.module.scss';
+import { SliderMarker, SliderProps } from './Slider.types';
+
+const thumbDiameter: number = +styles.thumbDiameter;
+const markerWidth: number = +styles.markerWidth;
+
+function asc(a: number, b: number) {
+    return a - b;
+}
+
+export function valueToPercent(value: number, min: number, max: number) {
+    return ((value - min) * 100) / (max - min);
+}
+
+export const Slider: FC<SliderProps> = ({
+    ariaLabel,
+    autoFocus = false,
+    className,
+    disabled = false,
+    id,
+    min = 0,
+    max = 100,
+    name,
+    onChange,
+    showLabels = true,
+    showMarkers = false,
+    step = 1,
+    value,
+}) => {
+    const isRange = Array.isArray(value);
+    const [values, setValues] = useState(isRange ? value.sort(asc) : [value]);
+    const railRef = useRef<HTMLDivElement>(null);
+    const lowerLabelRef = useRef<HTMLInputElement>(null);
+    const upperLabelRef = useRef<HTMLInputElement>(null);
+    const trackRef = useRef<HTMLDivElement>(null);
+    let [showMinLabel, setShowMinLabel] = useState(showLabels);
+    let [showMaxLabel, setShowMaxLabel] = useState(showLabels);
+    let [markers, setMarkers] = useState<SliderMarker[]>([]);
+
+    function getIdentifier(baseString: string, index: number): string {
+        if (!baseString) {
+            return '';
+        }
+        const idTokens: Array<string | number> = [baseString];
+        if (isRange) {
+            idTokens.push(index);
+        }
+        return idTokens.join('-');
+    }
+
+    function handleChange(newVal: number, index: number) {
+        const newValues = [...values];
+        newValues.splice(index, 1, newVal);
+        newValues.sort(asc);
+        setValues(newValues);
+        onChange?.(isRange ? [...newValues] : newValues[0]);
+    }
+
+    function isMarkerActive(markerValue: number): boolean {
+        const markerPct = valueToPercent(markerValue, min, max);
+        return isRange
+            ? markerPct >= valueToPercent(values[0], min, max) &&
+                  markerPct <= valueToPercent(values[1], min, max)
+            : markerPct <= valueToPercent(values[0], min, max);
+    }
+
+    const getValueOffset = (
+        val: number,
+        valDiameter: number,
+        inputWidth: number
+    ): number => {
+        const valRadius = valDiameter / 2;
+        return (
+            ((val - min) / (max - min)) * (inputWidth - valDiameter) + valRadius
+        );
+    };
+
+    // Set width of the range to decrease from the left side
+    useLayoutEffect(() => {
+        const inputWidth = railRef.current?.offsetWidth || 0;
+
+        setMarkers(
+            !showMarkers
+                ? []
+                : [...Array(Math.floor((max - min) / step) + 1)].map(
+                      (_, index) => {
+                          const markVal = min + step * index;
+                          return {
+                              value: markVal,
+                              offset: `${getValueOffset(
+                                  markVal,
+                                  markerWidth,
+                                  inputWidth
+                              )}px`,
+                          };
+                      }
+                  )
+        );
+
+        // Early exit if there is no ref available yet. The DOM has yet to initialize
+        // and its not possible to calculate positions.
+        if (!railRef.current) {
+            return;
+        }
+
+        const lowerThumbOffset = getValueOffset(
+            values[0],
+            thumbDiameter,
+            inputWidth
+        );
+        const upperThumbOffset = getValueOffset(
+            values[1],
+            thumbDiameter,
+            inputWidth
+        );
+        const rangeWidth = isRange
+            ? upperThumbOffset - lowerThumbOffset
+            : lowerThumbOffset;
+
+        // Hide the min/max markers if the value labels would collide.
+        const maxCollisionLabelRef = isRange ? upperLabelRef : lowerLabelRef;
+        const maxCollisionThumbOffset = isRange
+            ? upperThumbOffset
+            : lowerThumbOffset;
+        setShowMaxLabel(
+            showLabels &&
+                inputWidth - maxCollisionThumbOffset >
+                    (maxCollisionLabelRef.current?.offsetWidth || 0) + 15
+        );
+        setShowMinLabel(
+            showLabels &&
+                lowerThumbOffset > lowerLabelRef.current.offsetWidth + 15
+        );
+
+        const lowerLabelOffset = lowerLabelRef.current.offsetWidth / 2;
+        lowerLabelRef.current.style.left = `${
+            lowerThumbOffset - lowerLabelOffset
+        }px`;
+
+        // upper Label/thumb is only used in range mode.
+        if (isRange) {
+            const upperLabelOffset = upperLabelRef.current.offsetWidth / 2;
+            upperLabelRef.current.style.left = `${
+                upperThumbOffset - upperLabelOffset
+            }px`;
+        }
+
+        trackRef.current.style.left = isRange ? `${lowerThumbOffset}px` : '0';
+        trackRef.current.style.width = `${rangeWidth}px`;
+    }, values);
+
+    return (
+        // TODO: implement ResizeObserver to re-render the DOM on resize.
+        <div
+            className={mergeClasses(styles.sliderContainer, {
+                [styles.sliderDisabled]: disabled,
+            })}
+        >
+            <div className={mergeClasses(styles.slider, className)}>
+                <div ref={railRef} className={styles.sliderRail} />
+                <div ref={trackRef} className={styles.sliderTrack} />
+                {markers.map((mark, index) => {
+                    // Omitting the first and last marker based on design.
+                    const isVisuallyHidden =
+                        index === 0 || index === markers.length - 1;
+
+                    const style = { left: mark.offset };
+                    return isVisuallyHidden ? undefined : (
+                        <div
+                            key={index}
+                            className={mergeClasses(styles.railMarker, {
+                                [styles.active]: isMarkerActive(mark.value),
+                            })}
+                            style={style}
+                        />
+                    );
+                })}
+                {values.map((val, index) => (
+                    <input
+                        aria-label={ariaLabel}
+                        autoFocus={autoFocus && index === 0}
+                        className={styles.thumb}
+                        id={getIdentifier(id, index)}
+                        key={index}
+                        disabled={disabled}
+                        onChange={(event) =>
+                            handleChange(+event.target.value, index)
+                        }
+                        min={min}
+                        max={max}
+                        name={getIdentifier(name, index)}
+                        type="range"
+                        step={step}
+                        value={val}
+                    />
+                ))}
+            </div>
+            <>
+                <div
+                    className={mergeClasses(styles.sliderValue, {
+                        [styles.labelVisible]: showLabels,
+                    })}
+                    ref={lowerLabelRef}
+                >
+                    {values[0]}
+                </div>
+                {isRange && (
+                    <div
+                        className={mergeClasses(styles.sliderValue, {
+                            [styles.labelVisible]: showLabels,
+                        })}
+                        ref={upperLabelRef}
+                    >
+                        {values[1]}
+                    </div>
+                )}
+            </>
+            <div
+                className={mergeClasses(
+                    styles.extremityLabel,
+                    styles.minLabel,
+                    { [styles.labelVisible]: showMinLabel }
+                )}
+            >
+                {min}
+            </div>
+            <div
+                className={mergeClasses(
+                    styles.extremityLabel,
+                    styles.maxLabel,
+                    { [styles.labelVisible]: showMaxLabel }
+                )}
+            >
+                {max}
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/Slider/Slider.types.ts b/src/components/Slider/Slider.types.ts
new file mode 100644
index 000000000..8662bafb5
--- /dev/null
+++ b/src/components/Slider/Slider.types.ts
@@ -0,0 +1,81 @@
+export interface SliderMarker {
+    /**
+     * The step value of the marker.
+     */
+    value: number;
+    /**
+     * The left offset position for the marker. ex: "96px"
+     */
+    offset: string;
+}
+
+export interface SliderProps extends SliderInputProps {
+    /**
+     * Indicates if the value should be displayed under the slider.
+     * @default true
+     */
+    showLabels?: boolean;
+
+    /**
+     * Indicates if steps/markers should be displayed on the slider track.
+     * NOTE: initial implementation will put a marker at each step. This could
+     * be extended to provide explicit markers to change the behavior..
+     * @default false
+     */
+    showMarkers?: boolean;
+}
+
+export interface SliderInputProps {
+    /**
+     * The input aria label text.
+     */
+    ariaLabel?: string;
+    /**
+     * The input autoFocus attribute.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * The input class names.
+     * NOTE: For range sliders, each input's className will have an index value added.
+     */
+    className?: string;
+    /**
+     * The input disabled state.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The input id.
+     * NOTE: For range sliders, each input's id will have an index value added.
+     */
+    id?: string;
+    /**
+     * The maximum value of the slider.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The maximum value of the slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The input name.
+     * NOTE: For range sliders, each input's name will have an index value added.
+     */
+    name?: string;
+    /**
+     * The input onChange event handler.
+     */
+    onChange?: (value: number | number[]) => void;
+    /**
+     * Selected values must be a multiple of step.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The current slider value. Provide an array for range slider.
+     */
+    value: number | number[];
+}
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
new file mode 100644
index 000000000..1bf2619f9
--- /dev/null
+++ b/src/components/Slider/index.ts
@@ -0,0 +1,2 @@
+export * from './Slider';
+export * from './Slider.types';
diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
new file mode 100644
index 000000000..8a09c9ec7
--- /dev/null
+++ b/src/components/Slider/slider.module.scss
@@ -0,0 +1,171 @@
+@function strip-units($number) {
+    @return $number / ($number * 0 + 1);
+}
+
+// Represents the diameter of the thumb slider
+// and the overall height of the slider.
+$slider-height: 28px;
+$label-height: 20px;
+$track-height: 6px;
+$vertical-center: $slider-height / 2;
+$rail-top: $vertical-center - ($track-height / 2);
+
+$marker-height: 6px;
+$marker-width: 6px;
+$marker-top: $vertical-center - ($marker-height / 2);
+
+// Export these values for typescript consumption.
+:export {
+    thumbDiameter: strip-units($slider-height);
+    markerWidth: strip-units($marker-width);
+}
+
+.slider-container {
+    --slider-default-track-color: var(--primary-color-60);
+    --slider-default-rail-color: var(--primary-color-10);
+    --slider-default-rail-border-color: var(--primary-color-60);
+    --slider-default-value-text-color: var(--text-secondary-color);
+    --slider-min-max-labels-color: var(--grey-color-60);
+    --slider-default-thumb-color: var(--primary-color);
+    --slider-default-marker-background: var(--white-color);
+
+    position: relative;
+    height: $slider-height + $label-height;
+
+    .slider {
+        position: relative;
+        height: $slider-height;
+    }
+
+    .slider-rail,
+    .slider-track {
+        position: absolute;
+        top: $rail-top;
+        left: 0;
+    }
+
+    .slider-rail,
+    .slider-track {
+        height: $track-height;
+        border-radius: 8px;
+    }
+
+    .slider-rail {
+        background-color: var(--slider-default-rail-color);
+        border: 1px solid var(--slider-default-rail-border-color);
+        width: 100%;
+    }
+
+    .rail-marker {
+        height: $marker-height;
+        width: $marker-width;
+        position: absolute;
+        top: $marker-top;
+        margin-left: calc(($marker-height / 2) * -1);
+        background-color: var(--slider-default-marker-background);
+        border: 1px solid var(--slider-default-rail-border-color);
+
+        &.active {
+            background-color: var(--slider-default-marker-background);
+        }
+    }
+
+    .slider-track {
+        background-color: var(--slider-default-track-color);
+    }
+
+    .slider-value {
+        color: var(--slider-default-value-text-color);
+        font-size: 14px;
+        font-weight: 600;
+        position: absolute;
+        bottom: 0;
+        opacity: 0;
+    }
+
+    .extremity-label {
+        color: var(--slider-min-max-labels-color);
+        font-size: 14px;
+        font-weight: normal;
+        position: absolute;
+        bottom: 0;
+        opacity: 0;
+
+        &.min-label {
+            left: 2px;
+        }
+
+        &.max-label {
+            right: 2px;
+        }
+    }
+
+    .label-visible {
+        opacity: 1;
+    }
+
+    // Removing the default appearance
+    .thumb,
+    .thumb::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .thumb {
+        display: block;
+        width: 100%;
+        pointer-events: none;
+        position: absolute;
+        top: $rail-top;
+        height: 0;
+    }
+
+    .thumb {
+        &:focus::-webkit-slider-thumb {
+            // TODO: move this to a global mixin, update moz implementation below.
+            outline: 2px solid var(--primary-color-40);
+            outline-offset: 1px;
+        }
+
+        // For Chrome browsers
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            background-color: var(--slider-default-thumb-color);
+            border: none;
+            border-radius: 50%;
+            box-shadow: $shadow-object-s;
+            cursor: pointer;
+            height: $slider-height;
+            width: $slider-height;
+            margin-top: 4px;
+            pointer-events: all;
+            position: relative;
+        }
+
+        // For Firefox browsers
+        &::-moz-range-thumb {
+            background-color: var(--slider-default-thumb-color);
+            border: none;
+            border-radius: 50%;
+            box-shadow: $shadow-object-s;
+            cursor: pointer;
+            height: $slider-height;
+            width: $slider-height;
+            margin-top: 4px;
+            pointer-events: all;
+            position: relative;
+        }
+
+        &:focus::-moz-range-thumb {
+            // TODO: move this to a global mixin.
+            outline: 2px solid var(--primary-color-40);
+            outline-offset: 1px;
+        }
+    }
+}
+
+.slider-disabled {
+    .slider {
+        opacity: 0.5;
+    }
+}
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index 49fc351dc..c76e7b135 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Panel tabs snapshot 1`] = `
 <div>
   <div
-    className="tabWrap"
+    className="tab-wrap"
     role="tablist"
     value="tab1"
   >
@@ -16,7 +16,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -45,7 +45,7 @@ exports[`Panel tabs snapshot 1`] = `
         Tab 1
       </span>
       <div
-        className="tabIndicator"
+        className="tab-indicator"
         data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
         data-flip-id="tabIndicator"
         data-portal-key="portal"
@@ -60,7 +60,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -98,7 +98,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
@@ -137,7 +137,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="icon iconWrapper"
+        className="icon icon-wrapper"
         role="presentation"
       >
         <svg
diff --git a/src/hooks/useEffectOnlyOnUpdate.tsx b/src/hooks/useEffectOnlyOnUpdate.tsx
new file mode 100644
index 000000000..194724296
--- /dev/null
+++ b/src/hooks/useEffectOnlyOnUpdate.tsx
@@ -0,0 +1,21 @@
+import React, { useEffect, useRef } from 'react';
+
+/**
+ * Hook that doesn't run on initial value setting, only on updates.
+ * @param callback function to be executed on dep update.
+ * @param dependencies list of deps which will trigger callback on update.
+ */
+export const useEffectOnlyOnUpdate = (
+  callback: React.EffectCallback,
+  dependencies: React.DependencyList
+) => {
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (didMount.current) {
+      callback();
+    } else {
+      didMount.current = true;
+    }
+  }, [callback, dependencies]);
+};
diff --git a/yarn.lock b/yarn.lock
index 1245d81bd..bbdce59f3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9153,11 +9153,6 @@ hard-rejection@^2.1.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
-harmony-reflect@^1.4.6:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
-  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
-
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -9639,13 +9634,6 @@ idb@^6.1.4:
   resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b"
   integrity sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw==
 
-identity-obj-proxy@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
-  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
-  dependencies:
-    harmony-reflect "^1.4.6"
-
 ieee754@^1.1.4:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"

From cc41da9434c5b557cac5c7ba5dde4334f1191b26 Mon Sep 17 00:00:00 2001
From: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
Date: Thu, 16 Jun 2022 12:06:48 -0500
Subject: [PATCH 2/7] chore: update test snapshots

---
 src/__snapshots__/storybook.test.js.snap | 10127 +++++++++++++++++----
 1 file changed, 8501 insertions(+), 1626 deletions(-)

diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
index 9b9ab4c68..8dc0a10b7 100644
--- a/src/__snapshots__/storybook.test.js.snap
+++ b/src/__snapshots__/storybook.test.js.snap
@@ -1468,1086 +1468,7145 @@ exports[`Storyshots Check Box Check Box Group 1`] = `
 </div>
 `;
 
-exports[`Storyshots Dialog Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open dialog
-  </span>
-</button>
-`;
-
-exports[`Storyshots Dialog Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary button-primary-disruptive"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open dialog
-  </span>
-</button>
-`;
-
-exports[`Storyshots Dropdown Dropdown Button 1`] = `
+exports[`Storyshots Config Provider Theming 1`] = `
 <div
-  className="my-dropdown-class main-wrapper"
-  style={Object {}}
+  className="stack vertical xxl"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
 >
-  <button
-    aria-controls="dropdown-3"
-    aria-disabled={false}
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="button button-default icon-right"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
+  <h1
+    style={
+      Object {
+        "marginBottom": 0,
+      }
+    }
   >
-    <span>
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className=""
-      >
-        Click button start
-      </span>
+    Selected Theme:
+    <span
+      style={
+        Object {
+          "color": "var(--primary-color)",
+          "marginLeft": "4px",
+          "textTransform": "capitalize",
+        }
+      }
+    >
+      blue
     </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Dropdown Dropdown Div 1`] = `
-<div
-  className="my-dropdown-class main-wrapper"
-  style={Object {}}
->
+  </h1>
   <div
-    aria-controls="dropdown-4"
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="reference-wrapper"
-    onClick={[Function]}
-    role="button"
+    className="stack horizontal m"
     style={
       Object {
-        "display": "flex",
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+        "marginTop": 0,
       }
     }
-    tabIndex="0"
   >
-    <code>
-      HTMLDivElement
-    </code>
-    <span
-      aria-hidden={false}
-      className="icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
+    <div>
+      <p>
+        Predefined
+      </p>
+      <select
+        onChange={[Function]}
         style={
           Object {
-            "height": "20px",
-            "width": "20px",
+            "fontSize": "1rem",
           }
         }
-        viewBox="0 0 24 24"
+        value="blue"
       >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Custom Image 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-    style={Object {}}
-  >
-    <span
-      aria-hidden={false}
-      className="icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
+        <option
+          value="red"
+        >
+          red
+        </option>
+        <option
+          value="orange"
+        >
+          orange
+        </option>
+        <option
+          value="yellow"
+        >
+          yellow
+        </option>
+        <option
+          value="green"
+        >
+          green
+        </option>
+        <option
+          value="bluegreen"
+        >
+          bluegreen
+        </option>
+        <option
+          value="blue"
+        >
+          blue
+        </option>
+        <option
+          value="violet"
+        >
+          violet
+        </option>
+        <option
+          value="grey"
+        >
+          grey
+        </option>
+      </select>
+    </div>
+    <div>
+      <p>
+        Custom
+      </p>
+      <div
         style={
           Object {
-            "height": "200px",
-            "width": "200px",
+            "display": "inline-block",
+            "position": "relative",
           }
         }
-        viewBox="0 0 24 24"
       >
-        <path
-          d="M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z"
+        <div
           style={
             Object {
-              "fill": "#8ED0FA",
+              "MozBorderRadius": 2,
+              "MozBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "OBorderRadius": 2,
+              "OBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "WebkitBorderRadius": 2,
+              "WebkitBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "background": "#fff",
+              "borderRadius": 2,
+              "bottom": "0px",
+              "boxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "left": "0px",
+              "msBorderRadius": 2,
+              "msBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "position": "absolute",
+              "right": "0px",
+              "top": "0px",
             }
           }
         />
-      </svg>
-    </span>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Empty Messages 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-  >
-    <svg
-      className="empty-messages-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
-        fill="white"
-        stroke="#8ED0FA"
-        stroke-width="6"
-      />
-      <path
-        d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <path
-        d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <path
-        d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Error State 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-  >
-    <svg
-      className="server-error-image-default"
-      fill="none"
-      height="185"
-      viewBox="0 0 200 185"
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            className="compact-picker "
+            style={
+              Object {
+                "boxSizing": "initial",
+                "paddingLeft": "5px",
+                "paddingTop": "5px",
+                "width": "240px",
+              }
+            }
+          >
+            <div>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#4D4D4D",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#4D4D4D"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#999999",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#999999"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "MozBoxShadow": "inset 0 0 0 1px #ddd",
+                      "OBoxShadow": "inset 0 0 0 1px #ddd",
+                      "WebkitBoxShadow": "inset 0 0 0 1px #ddd",
+                      "background": "#FFFFFF",
+                      "boxShadow": "inset 0 0 0 1px #ddd",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "msBoxShadow": "inset 0 0 0 1px #ddd",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FFFFFF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#F44E3B",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#F44E3B"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FE9200",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FE9200"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FCDC00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FCDC00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#DBDF00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#DBDF00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#A4DD00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#A4DD00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#68CCCA",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#68CCCA"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#73D8FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#73D8FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#AEA1FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#AEA1FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FDA1FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FDA1FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#333333",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#333333"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#808080",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#808080"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#cccccc",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#cccccc"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#D33115",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#D33115"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#E27300",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#E27300"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FCC400",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FCC400"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#B0BC00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#B0BC00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#68BC00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#68BC00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#16A5A5",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#16A5A5"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#009CE0",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#009CE0"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#7B64FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#7B64FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FA28FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FA28FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#000000",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#000000"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "1",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#666666",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#666666"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#B3B3B3",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#B3B3B3"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#9F0500",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#9F0500"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#C45100",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#C45100"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FB9E00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FB9E00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#808900",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#808900"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#194D33",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#194D33"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#0C797D",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#0C797D"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#0062B1",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#0062B1"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#653294",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#653294"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#AB149E",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#AB149E"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <div
+                style={
+                  Object {
+                    "clear": "both",
+                  }
+                }
+              />
+            </div>
+            <div
+              className="flexbox-fix"
+              style={
+                Object {
+                  "display": "flex",
+                  "paddingBottom": "6px",
+                  "paddingRight": "5px",
+                  "position": "relative",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "background": "#000000",
+                    "height": "9px",
+                    "left": "5px",
+                    "position": "absolute",
+                    "top": "6px",
+                    "width": "9px",
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "6",
+                    "WebkitBoxFlex": "6",
+                    "WebkitFlex": "6",
+                    "flex": "6",
+                    "msFlex": "6",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-1"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "20%",
+                      "width": "80%",
+                    }
+                  }
+                  value="#000000"
+                />
+                <label
+                  htmlFor="rc-editable-input-1"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "display": "none",
+                    }
+                  }
+                >
+                  hex
+                </label>
+              </div>
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "3",
+                    "WebkitBoxFlex": "3",
+                    "WebkitFlex": "3",
+                    "flex": "3",
+                    "msFlex": "3",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-2"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "30%",
+                      "width": "70%",
+                    }
+                  }
+                  value="0"
+                />
+                <label
+                  htmlFor="rc-editable-input-2"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "color": "#999",
+                      "fontSize": "12px",
+                      "left": "0px",
+                      "lineHeight": "16px",
+                      "position": "absolute",
+                      "textTransform": "uppercase",
+                      "top": "3px",
+                    }
+                  }
+                >
+                  r
+                </label>
+              </div>
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "3",
+                    "WebkitBoxFlex": "3",
+                    "WebkitFlex": "3",
+                    "flex": "3",
+                    "msFlex": "3",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-3"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "30%",
+                      "width": "70%",
+                    }
+                  }
+                  value="0"
+                />
+                <label
+                  htmlFor="rc-editable-input-3"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "color": "#999",
+                      "fontSize": "12px",
+                      "left": "0px",
+                      "lineHeight": "16px",
+                      "position": "absolute",
+                      "textTransform": "uppercase",
+                      "top": "3px",
+                    }
+                  }
+                >
+                  g
+                </label>
+              </div>
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "3",
+                    "WebkitBoxFlex": "3",
+                    "WebkitFlex": "3",
+                    "flex": "3",
+                    "msFlex": "3",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-4"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "30%",
+                      "width": "70%",
+                    }
+                  }
+                  value="0"
+                />
+                <label
+                  htmlFor="rc-editable-input-4"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "color": "#999",
+                      "fontSize": "12px",
+                      "left": "0px",
+                      "lineHeight": "16px",
+                      "position": "absolute",
+                      "textTransform": "uppercase",
+                      "top": "3px",
+                    }
+                  }
+                >
+                  b
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="stack horizontal m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <button
+      aria-disabled={false}
+      aria-label="Primary Button"
+      className="button button-primary button-size3"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        className="button-text3"
+      >
+        Primary Button
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Primary Button"
+      className="button button-primary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Primary Button"
+      className="button button-primary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text3"
+        >
+          Primary Button
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="stack horizontal m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <button
+      aria-disabled={false}
+      aria-label="Secondary Button"
+      className="button button-secondary button-size3"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        className="button-text3"
+      >
+        Secondary Button
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Secondary Button"
+      className="button button-secondary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Secondary Button"
+      className="button button-secondary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text3"
+        >
+          Secondary Button
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="stack horizontal m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <button
+      aria-disabled={false}
+      aria-label="Default Button"
+      className="button button-default button-size3"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        className="button-text3"
+      >
+        Default Button
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Default Button"
+      className="button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Default Button"
+      className="button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text3"
+        >
+          Default Button
+        </span>
+      </span>
+    </button>
+  </div>
+  <div>
+    <div
+      className="tab-wrap"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 1
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 2
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 3
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 4
+        </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      className="tab-wrap"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      className="tab-wrap small"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 1
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 2
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 3
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 4
+        </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      className="tab-wrap pill"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 1
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 2
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 3
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 4
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    aria-label="score"
+    className="match-score-container"
+  >
+    <div
+      className="match-score-circle full"
+    />
+    <div
+      className="match-score-circle full"
+    />
+    <div
+      className="match-score-circle full"
+    />
+    <div
+      className="match-score-circle"
+    />
+    <div
+      className="match-score-circle"
+    />
+    <p
+      className="label"
+    >
+      3
+      /
+      5
+    </p>
+  </div>
+  <span
+    aria-hidden={false}
+    className="spinner icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "48px",
+          "width": "48px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <style>
+        @keyframes spin { to { transform: rotate(360deg) } }
+      </style>
+      <g
+        style={
+          Object {
+            "animation": "spin linear 0.8s infinite",
+            "transformOrigin": "center",
+          }
+        }
+      >
+        <path
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+        <rect
+          fill="transparent"
+          height="24"
+          width="24"
+        />
+      </g>
+    </svg>
+  </span>
+  <div
+    className="checkbox-group"
+    defaultChecked={
+      Array [
+        "First",
+      ]
+    }
+    role="group"
+  >
+    <div
+      className="selector"
+    >
+      <input
+        checked={true}
+        disabled={false}
+        id="test-1"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="checkbox"
+        value="First"
+      />
+      <label
+        className=""
+        htmlFor="test-1"
+      >
+        <span
+          className="checkmark"
+        />
+        <span
+          className="selector-label"
+        >
+          First
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="test-2"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="checkbox"
+        value="Second"
+      />
+      <label
+        className=""
+        htmlFor="test-2"
+      >
+        <span
+          className="checkmark"
+        />
+        <span
+          className="selector-label"
+        >
+          Second
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="test-3"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="checkbox"
+        value="Third"
+      />
+      <label
+        className=""
+        htmlFor="test-3"
+      >
+        <span
+          className="checkmark"
+        />
+        <span
+          className="selector-label"
+        >
+          Third
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    aria-label="Radio Group"
+    className="radio-group"
+    role="group"
+  >
+    <div
+      className="selector"
+    >
+      <input
+        checked={true}
+        disabled={false}
+        id="oea2exk-1"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="radio"
+        value="Radio1"
+      />
+      <label
+        className=""
+        htmlFor="oea2exk-1"
+      >
+        <span
+          className="radio-button"
+          id="oea2exk-1-custom-radio"
+        />
+        <span
+          className="selector-label"
+        >
+          Radio1
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="oea2exk-2"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="radio"
+        value="Radio2"
+      />
+      <label
+        className=""
+        htmlFor="oea2exk-2"
+      >
+        <span
+          className="radio-button"
+          id="oea2exk-2-custom-radio"
+        />
+        <span
+          className="selector-label"
+        >
+          Radio2
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="oea2exk-3"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="radio"
+        value="Radio3"
+      />
+      <label
+        className=""
+        htmlFor="oea2exk-3"
+      >
+        <span
+          className="radio-button"
+          id="oea2exk-3-custom-radio"
+        />
+        <span
+          className="selector-label"
+        >
+          Radio3
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Dialog Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open dialog
+  </span>
+</button>
+`;
+
+exports[`Storyshots Dialog Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary button-primary-disruptive"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open dialog
+  </span>
+</button>
+`;
+
+exports[`Storyshots Dropdown Dropdown Button 1`] = `
+<div
+  className="my-dropdown-class main-wrapper"
+  style={Object {}}
+>
+  <button
+    aria-controls="dropdown-3"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="button button-default icon-right"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    <span>
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className=""
+      >
+        Click button start
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Dropdown Dropdown Div 1`] = `
+<div
+  className="my-dropdown-class main-wrapper"
+  style={Object {}}
+>
+  <div
+    aria-controls="dropdown-4"
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="reference-wrapper"
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+    tabIndex="0"
+  >
+    <code>
+      HTMLDivElement
+    </code>
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Custom Image 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+    style={Object {}}
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "200px",
+            "width": "200px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z"
+          style={
+            Object {
+              "fill": "#8ED0FA",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Empty Messages 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="empty-messages-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
+        fill="white"
+        stroke="#8ED0FA"
+        stroke-width="6"
+      />
+      <path
+        d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+      <path
+        d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+      <path
+        d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Error State 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="server-error-image-default"
+      fill="none"
+      height="185"
+      viewBox="0 0 200 185"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 178.839C21.8078 172.861 3.66074 163.325 0.510726 151.175C-2.63929 139.025 9.18787 124.359 24.8068 116.637C40.5358 109.029 59.9069 108.449 71.9662 103.257C83.9156 97.9498 88.5731 87.9309 99.9189 78.9985C111.265 70.066 129.299 62.2199 140.372 65.9517C151.555 69.798 155.648 85.2069 164.716 97.6426C173.785 110.078 187.68 119.625 194.904 132.657C202.237 145.804 202.768 162.422 189.061 167.219C175.355 172.016 147.3 164.877 128.36 166.625C109.569 168.288 99.7624 178.823 86.4541 182.955C73.2954 187.004 56.4854 184.734 39.0718 178.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M49.2784 101.405C39.3247 57.4604 105.676 18.8428 136.863 78.7671C196.578 76.1036 191.934 156.002 145.489 158L107.668 158L46.6243 158C12.7837 158 0.841885 104.068 49.2784 101.405Z"
+        fill="white"
+        stroke="#8ED0FA"
+        stroke-width="6"
+      />
+      <path
+        d="M76.0193 103.097L82.4167 109.495L86.6594 105.252L80.2619 98.8548L76.0193 103.097ZM82.4167 108.081L76.38 114.117L80.6226 118.36L86.6594 112.323L82.4167 108.081ZM82.4167 109.495C82.0262 109.104 82.0262 108.471 82.4167 108.081L86.6594 112.323C88.612 110.371 88.612 107.205 86.6594 105.252L82.4167 109.495Z"
+        fill="#8ED0FA"
+      />
+      <path
+        d="M128.572 114.117L122.175 107.72L117.932 111.963L124.33 118.36L128.572 114.117ZM122.175 109.134L128.212 103.097L123.969 98.8548L117.932 104.892L122.175 109.134ZM122.175 107.72C122.566 108.111 122.566 108.744 122.175 109.134L117.932 104.892C115.98 106.844 115.98 110.01 117.932 111.963L122.175 107.72Z"
+        fill="#8ED0FA"
+      />
+      <path
+        d="M102 142C107.192 142 111 137.516 111 132.5C111 127.484 107.192 123 102 123C96.8079 123 93 127.484 93 132.5C93 137.516 96.8079 142 102 142Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <path
+        d="M161 68C166.192 68 170 63.5161 170 58.5C170 53.4839 166.192 49 161 49C155.808 49 152 53.4839 152 58.5C152 63.5161 155.808 68 161 68Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <path
+        d="M55 22C60.1921 22 64 17.5161 64 12.5C64 7.48391 60.1921 3 55 3C49.8079 3 46 7.48391 46 12.5C46 17.5161 49.8079 22 55 22Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <ellipse
+        cx="108"
+        cy="29.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        cx="28"
+        cy="89.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="161.334"
+        x2="148.606"
+        y1="11.6067"
+        y2="24.3346"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="161.335"
+        x2="148.608"
+        y1="24.3345"
+        y2="11.6065"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="31.334"
+        x2="18.6061"
+        y1="38.6067"
+        y2="51.3346"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="31.3355"
+        x2="18.6076"
+        y1="51.3345"
+        y2="38.6065"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty No Data 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="empty-data-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
+        fill="white"
+      />
+      <path
+        clipRule="evenodd"
+        d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
+        fill="#B0F3FE"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
+        fill="#8ED0FA"
+        fillRule="evenodd"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        width="13.3333"
+        x="93.334"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        transform="rotate(-30 46.666 6.66675)"
+        width="13.3333"
+        x="46.666"
+        y="6.66675"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        transform="rotate(30 141.666 0)"
+        width="13.3333"
+        x="141.666"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty No Search Results 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="empty-search-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M183 91C188.192 91 192 86.5161 192 81.5C192 76.4839 188.192 72 183 72C177.808 72 174 76.4839 174 81.5C174 86.5161 177.808 91 183 91Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <circle
+        cx="139"
+        cy="47"
+        fill="#B0F3FE"
+        r="5"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="10"
+        rx="5"
+        width="20"
+        x="148"
+        y="42"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="10"
+        rx="5"
+        width="30"
+        x="10"
+        y="83"
+      />
+      <path
+        d="M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412Z"
+        fill="white"
+      />
+      <path
+        d="M127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693Z"
+        fill="white"
+      />
+      <path
+        d="M125.26 118.259L118.189 111.187M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412ZM155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664Z"
+        stroke="#8ED0FA"
+        stroke-width="6"
+        strokeLinecap="round"
+      />
+      <path
+        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Tasks Complete 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="tasks-complete-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
       width="200"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M39.0718 178.839C21.8078 172.861 3.66074 163.325 0.510726 151.175C-2.63929 139.025 9.18787 124.359 24.8068 116.637C40.5358 109.029 59.9069 108.449 71.9662 103.257C83.9156 97.9498 88.5731 87.9309 99.9189 78.9985C111.265 70.066 129.299 62.2199 140.372 65.9517C151.555 69.798 155.648 85.2069 164.716 97.6426C173.785 110.078 187.68 119.625 194.904 132.657C202.237 145.804 202.768 162.422 189.061 167.219C175.355 172.016 147.3 164.877 128.36 166.625C109.569 168.288 99.7624 178.823 86.4541 182.955C73.2954 187.004 56.4854 184.734 39.0718 178.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M49.2784 101.405C39.3247 57.4604 105.676 18.8428 136.863 78.7671C196.578 76.1036 191.934 156.002 145.489 158L107.668 158L46.6243 158C12.7837 158 0.841885 104.068 49.2784 101.405Z"
-        fill="white"
-        stroke="#8ED0FA"
-        stroke-width="6"
-      />
-      <path
-        d="M76.0193 103.097L82.4167 109.495L86.6594 105.252L80.2619 98.8548L76.0193 103.097ZM82.4167 108.081L76.38 114.117L80.6226 118.36L86.6594 112.323L82.4167 108.081ZM82.4167 109.495C82.0262 109.104 82.0262 108.471 82.4167 108.081L86.6594 112.323C88.612 110.371 88.612 107.205 86.6594 105.252L82.4167 109.495Z"
-        fill="#8ED0FA"
-      />
-      <path
-        d="M128.572 114.117L122.175 107.72L117.932 111.963L124.33 118.36L128.572 114.117ZM122.175 109.134L128.212 103.097L123.969 98.8548L117.932 104.892L122.175 109.134ZM122.175 107.72C122.566 108.111 122.566 108.744 122.175 109.134L117.932 104.892C115.98 106.844 115.98 110.01 117.932 111.963L122.175 107.72Z"
-        fill="#8ED0FA"
-      />
-      <path
-        d="M102 142C107.192 142 111 137.516 111 132.5C111 127.484 107.192 123 102 123C96.8079 123 93 127.484 93 132.5C93 137.516 96.8079 142 102 142Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <path
-        d="M161 68C166.192 68 170 63.5161 170 58.5C170 53.4839 166.192 49 161 49C155.808 49 152 53.4839 152 58.5C152 63.5161 155.808 68 161 68Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <path
-        d="M55 22C60.1921 22 64 17.5161 64 12.5C64 7.48391 60.1921 3 55 3C49.8079 3 46 7.48391 46 12.5C46 17.5161 49.8079 22 55 22Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <ellipse
-        cx="108"
-        cy="29.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <ellipse
-        cx="28"
-        cy="89.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="161.334"
-        x2="148.606"
-        y1="11.6067"
-        y2="24.3346"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="161.335"
-        x2="148.608"
-        y1="24.3345"
-        y2="11.6065"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31.334"
-        x2="18.6061"
-        y1="38.6067"
-        y2="51.3346"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31.3355"
-        x2="18.6076"
-        y1="51.3345"
-        y2="38.6065"
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M180 98C185.192 98 189 93.5161 189 88.5C189 83.4839 185.192 79 180 79C174.808 79 171 83.4839 171 88.5C171 93.5161 174.808 98 180 98Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <circle
+        cx="139"
+        cy="47"
+        fill="#B0F3FE"
+        r="5"
+      />
+      <path
+        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        stroke-width="4"
+      />
+      <circle
+        cx="98"
+        cy="79"
+        fill="white"
+        r="60"
+        stroke="#8ED0FA"
+        stroke-width="6"
+        strokeLinecap="round"
+      />
+      <path
+        d="M80.9802 73.3685C79.5239 72.0567 77.2649 72.1574 75.9346 73.5935C74.6043 75.0295 74.7064 77.2571 76.1627 78.569L92.971 93.7098C95.0099 95.5463 98.1725 95.4053 100.035 93.3948C100.113 93.3094 100.113 93.3094 100.188 93.2217L124.175 64.7735C125.436 63.2779 125.228 61.0574 123.712 59.8139C122.195 58.5703 119.943 58.7747 118.682 60.2703L96.1309 87.0162L80.9802 73.3685Z"
+        fill="#B0F3FE"
+      />
+      <path
+        d="M16 26C21.1921 26 25 21.5161 25 16.5C25 11.4839 21.1921 7 16 7C10.8079 7 7 11.4839 7 16.5C7 21.5161 10.8079 26 16 26Z"
+        stroke="#B0F3FE"
+        stroke-width="6"
+      />
+      <ellipse
+        cx="38"
+        cy="35.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        cx="171"
+        cy="35.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="160"
+        x2="142"
+        y1="13"
+        y2="13"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="151"
+        x2="151"
+        y1="22"
+        y2="4"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="31"
+        x2="13"
+        y1="87"
+        y2="87"
+      />
+      <line
+        stroke="#B0F3FE"
+        stroke-width="6"
+        strokeLinecap="round"
+        x1="22"
+        x2="22"
+        y1="96"
+        y2="78"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Icon Basic 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    aria-labelledby="icon_labelledby_37 icon_describedby_37"
+    style={
+      Object {
+        "height": "20px",
+        "width": "20px",
+      }
+    }
+    viewBox="0 0 24 24"
+  >
+    <title
+      id="icon_labelledby_37"
+    >
+      My icon title.
+    </title>
+    <desc
+      id="icon_describedby_37"
+    >
+      My icon description.
+    </desc>
+    <path
+      d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+      style={
+        Object {
+          "fill": "#000000",
+        }
+      }
+    />
+  </svg>
+</span>
+`;
+
+exports[`Storyshots Icon Icomoon 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    className=""
+    height="20px"
+    role="presentation"
+    style={
+      Object {
+        "display": "inline-block",
+        "verticalAlign": "middle",
+      }
+    }
+    viewBox="0 0 1024 1024"
+    width="20px"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
+      style={
+        Object {
+          "fill": "#000000",
+        }
+      }
+    />
+  </svg>
+</span>
+`;
+
+exports[`Storyshots Icon Icomoon Multicolor 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    className=""
+    height="24px"
+    role="presentation"
+    style={
+      Object {
+        "display": "inline-block",
+        "verticalAlign": "middle",
+      }
+    }
+    viewBox="0 0 1024 1024"
+    width="24px"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M102.4 153.6v716.8h241.912v-139.999h79.375v139.999h241.912v-716.8h-563.2zM181.777 233.867h81.268v78.399h-81.268v-78.399zM344.312 233.867h79.375v78.399h-79.375v-78.399zM504.955 233.867h81.267v78.399h-81.267v-78.399zM181.777 392.532h81.268v80.269h-81.268v-80.269zM344.312 392.532h79.375v80.269h-79.375v-80.269zM504.955 392.532h81.267v80.269h-81.267v-80.269zM181.777 551.201h81.268v80.266h-81.268v-80.266zM344.312 551.201h79.375v80.266h-79.375v-80.266zM504.955 551.201h81.267v80.266h-81.267v-80.266zM181.777 711.734h81.268v78.4h-81.268v-78.4zM504.955 711.734h81.267v78.4h-81.267v-78.4z"
+      fill="rgb(80, 206, 225)"
+      style={
+        Object {
+          "fill": undefined,
+        }
+      }
+    />
+    <path
+      d="M598.536 358.4h108.529c14.303 0 26.501 5.478 36.598 16.435 10.936 10.112 16.404 22.333 16.404 36.662v54.359h108.531c14.303 0 26.501 5.478 36.598 16.435 10.936 10.115 16.404 22.756 16.404 37.926v295.821c0 15.171-5.468 28.234-16.404 39.191-10.097 10.115-22.295 15.171-36.598 15.171h-431.596c-14.303 0-26.921-5.056-37.86-15.171-10.094-10.957-15.142-24.020-15.142-39.191v-295.821c0-15.171 5.048-27.812 15.142-37.926 10.939-10.957 23.557-16.435 37.86-16.435h108.531v-54.359c0-14.328 5.046-26.55 15.142-36.662 10.936-10.957 23.557-16.435 37.86-16.435zM707.064 465.856v-54.359h-108.529v54.359h108.529z"
+      fill="rgb(20, 109, 166)"
+      opacity={0.6}
+      style={
+        Object {
+          "fill": undefined,
+        }
+      }
+    />
+  </svg>
+</span>
+`;
+
+exports[`Storyshots Info Bar Disruptive 1`] = `
+<div
+  className="info-bar my-info-bar-class disruptive"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Neutral 1`] = `
+<div
+  className="info-bar my-info-bar-class neutral"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Positive 1`] = `
+<div
+  className="info-bar my-info-bar-class positive"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Warning 1`] = `
+<div
+  className="info-bar my-info-bar-class warning"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Input Search Box 1`] = `
+<form
+  role="search"
+>
+  <div
+    className="input-wrapper"
+  >
+    <div
+      className="field-label medium"
+    >
+      <label
+        className="text-style medium"
+      >
+        Label
+      </label>
+      <span
+        className="field-label-icon-button medium"
+      >
+        <div
+          className="reference-wrapper"
+          id="4fzzzxj"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <button
+            aria-disabled={false}
+            className="label-icon-button button button-default button-size3 icon-left"
+            defaultChecked={false}
+            disabled={false}
+          >
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </span>
+    </div>
+    <input
+      aria-label="Search"
+      autoFocus={false}
+      className="my-searchbox-class with-icon with-icon-button with-icon-and-icon-button"
+      disabled={false}
+      id="mySearchBoxId5"
+      maxLength={100}
+      minLength={0}
+      name="mySearchBox"
+      onChange={[Function]}
+      placeholder="Search"
+      readOnly={false}
+      required={false}
+      role="textbox"
+      style={Object {}}
+      tabIndex={0}
+      type="search"
+    />
+    <div
+      className="icon-wrapper left-icon"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "red",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </div>
+    <button
+      aria-disabled={false}
+      className="icon-button left-icon button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots Input Text Area 1`] = `
+<div
+  className="input-wrapper"
+>
+  <div
+    className="field-label medium"
+  >
+    <label
+      className="text-style medium"
+    >
+      Label
+    </label>
+    <span
+      className="field-label-icon-button medium"
+    >
+      <div
+        className="reference-wrapper"
+        id="4fzzzxj"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <button
+          aria-disabled={false}
+          className="label-icon-button button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+        >
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </span>
+  </div>
+  <textarea
+    aria-disabled={false}
+    aria-label="Sample text"
+    autoFocus={false}
+    className="my-textarea-class text-area"
+    cols={50}
+    disabled={false}
+    htmltype="text"
+    id="myTextAreaId6"
+    maxLength={300}
+    minLength={0}
+    name="myTextArea"
+    onChange={[Function]}
+    placeholder="Placeholder text"
+    required={false}
+    rows={5}
+    style={Object {}}
+    tabIndex={0}
+  />
+  <span
+    aria-hidden={false}
+    className="text-area-resize-icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Input Text Input 1`] = `
+<div
+  className="input-wrapper"
+>
+  <div
+    className="field-label medium"
+  >
+    <label
+      className="text-style medium"
+    >
+      Label
+    </label>
+    <span
+      className="field-label-icon-button medium"
+    >
+      <div
+        className="reference-wrapper"
+        id="4fzzzxj"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <button
+          aria-disabled={false}
+          className="label-icon-button button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+        >
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </span>
+  </div>
+  <input
+    aria-label="Sample text"
+    autoFocus={false}
+    className="my-textinput-class with-icon with-icon-button with-icon-and-icon-button"
+    disabled={false}
+    htmltype="text"
+    id="myTextInputId7"
+    maxLength={100}
+    minLength={0}
+    name="myTextInput"
+    onChange={[Function]}
+    placeholder="Placeholder text"
+    readOnly={false}
+    required={false}
+    role="textbox"
+    style={Object {}}
+    tabIndex={0}
+    type="text"
+  />
+  <div
+    className="icon-wrapper left-icon"
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+          style={
+            Object {
+              "fill": "red",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+  <button
+    aria-disabled={false}
+    className="icon-button left-icon button button-default button-size2 icon-left"
+    defaultChecked={false}
+    disabled={false}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Label Labels 1`] = `
+<div
+  className="field-label medium my-label-class"
+>
+  <label
+    className="text-style medium"
+    htmlFor=""
+  >
+    This is a label
+  </label>
+  <span
+    className="field-label-icon-button medium"
+  >
+    <div
+      className="reference-wrapper"
+      id="4fzzzxj"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-disabled={false}
+        className="label-icon-button button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Link Default 1`] = `
+<a
+  className="link-style my-link-class"
+  href="https://www.twitter.com"
+  style={Object {}}
+  target="_self"
+>
+  Twitter
+</a>
+`;
+
+exports[`Storyshots Link Default Disabled 1`] = `
+<a
+  className="link-style my-link-class"
+  href="https://www.facebook.com"
+  style={Object {}}
+  target="_self"
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  User Profile
+</a>
+`;
+
+exports[`Storyshots Link Primary 1`] = `
+<a
+  className="link-style my-link-class primary"
+  href="https://www.facebook.com"
+  style={
+    Object {
+      "maxWidth": "100px",
+    }
+  }
+  target="_self"
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  User Profile
+</a>
+`;
+
+exports[`Storyshots List Horizontal 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h2>
+      Header
+    </h2>
+  </div>
+  <ul
+    className="list-container"
+    role=""
+  >
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 1
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 2
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 3
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 4
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 5
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h3>
+      Footer
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots List Vertical 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h2>
+      Header
+    </h2>
+  </div>
+  <ul
+    className="list-container vertical"
+    role=""
+  >
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 1
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 2
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 3
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 4
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      role=""
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 5
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h3>
+      Footer
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Match Score Default 1`] = `
+<div
+  aria-label="score"
+  className="my-match-score-class match-score-container"
+>
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <p
+    className="label"
+  >
+    3
+    /
+    5
+  </p>
+</div>
+`;
+
+exports[`Storyshots Match Score Without Label 1`] = `
+<div
+  aria-label="score"
+  className="my-match-score-class match-score-container"
+>
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <div
+    className="match-score-circle"
+  />
+</div>
+`;
+
+exports[`Storyshots Menu Menus 1`] = `
+<div
+  className="main-wrapper"
+>
+  <button
+    aria-controls="dropdown-8"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="button button-default"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    <span
+      className=""
+    >
+      Menu dropdown
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Modal Fullscreen 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Scrollable 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal X Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Pagination All Combined 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span
+    className="sizes"
+  >
+    <div
+      className="main-wrapper"
+    >
+      <button
+        aria-controls="dropdown-15"
+        aria-disabled={false}
+        aria-expanded={false}
+        aria-haspopup={true}
+        aria-label="Selected page size"
+        className="button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+        tabIndex="0"
+      >
+        <span>
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+          <span
+            className="button-text3"
+          >
+            page / 100
+          </span>
+        </span>
+      </button>
+    </div>
+  </span>
+  <span
+    className="total"
+  >
+    400 Total
+  </span>
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          4
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <span
+    className="jump"
+  >
+    <div
+      className="input-wrapper"
+    >
+      <input
+        autoFocus={false}
+        className="editor"
+        defaultValue={4}
+        disabled={false}
+        id="input-16"
+        minLength={1}
+        onChange={[Function]}
+        readOnly={false}
+        required={false}
+        role="textbox"
+        tabIndex={0}
+        type="number"
+      />
+    </div>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Pagination Basic Few 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          5
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Basic Many 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-disabled={false}
+        aria-label="Next 5"
+        className="pagination-button quicknext button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          100
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Change Page Size 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span
+    className="sizes"
+  >
+    <div
+      className="main-wrapper"
+    >
+      <button
+        aria-controls="dropdown-17"
+        aria-disabled={false}
+        aria-expanded={false}
+        aria-haspopup={true}
+        aria-label="Selected page size"
+        className="button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+        tabIndex="0"
+      >
+        <span>
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+          <span
+            className="button-text3"
+          >
+            page / 1000
+          </span>
+        </span>
+      </button>
+    </div>
+  </span>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Dots 1`] = `
+<div
+  className="my-pagination-class pagination dots"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          5
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Jump To 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          10
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <span
+    className="jump"
+  >
+    <div
+      className="input-wrapper"
+    >
+      <input
+        autoFocus={false}
+        className="editor"
+        defaultValue={5}
+        disabled={false}
+        id="input-18"
+        minLength={1}
+        onChange={[Function]}
+        readOnly={false}
+        required={false}
+        role="textbox"
+        tabIndex={0}
+        type="number"
       />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
+    </div>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Pagination Total Item Count 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span
+    className="total"
   >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
+    1000 Total
+  </span>
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-disabled={false}
+        aria-label="Next 5"
+        className="pagination-button quicknext button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          100
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
   >
-    More detail on how might the user be able to get around this
-  </div>
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
 </div>
 `;
 
-exports[`Storyshots Empty No Data 1`] = `
-<div
-  className="empty"
-  style={Object {}}
+exports[`Storyshots Panel Bottom 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="empty-image"
+  <span
+    className=""
   >
-    <svg
-      className="empty-data-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
-        fill="white"
-      />
-      <path
-        clipRule="evenodd"
-        d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
-        fill="#B0F3FE"
-        fillRule="evenodd"
-      />
-      <path
-        clipRule="evenodd"
-        d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
-        fill="#8ED0FA"
-        fillRule="evenodd"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        width="13.3333"
-        x="93.334"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        transform="rotate(-30 46.666 6.66675)"
-        width="13.3333"
-        x="46.666"
-        y="6.66675"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        transform="rotate(30 141.666 0)"
-        width="13.3333"
-        x="141.666"
-      />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
   >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Left 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
   >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
+    Open panel
+  </span>
+</button>
 `;
 
-exports[`Storyshots Empty No Search Results 1`] = `
-<div
-  className="empty"
-  style={Object {}}
+exports[`Storyshots Panel Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
 >
-  <div
-    className="empty-image"
+  <span
+    className=""
   >
-    <svg
-      className="empty-search-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M183 91C188.192 91 192 86.5161 192 81.5C192 76.4839 188.192 72 183 72C177.808 72 174 76.4839 174 81.5C174 86.5161 177.808 91 183 91Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <circle
-        cx="139"
-        cy="47"
-        fill="#B0F3FE"
-        r="5"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="10"
-        rx="5"
-        width="20"
-        x="148"
-        y="42"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="10"
-        rx="5"
-        width="30"
-        x="10"
-        y="83"
-      />
-      <path
-        d="M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412Z"
-        fill="white"
-      />
-      <path
-        d="M127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693Z"
-        fill="white"
-      />
-      <path
-        d="M125.26 118.259L118.189 111.187M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412ZM155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664Z"
-        stroke="#8ED0FA"
-        stroke-width="6"
-        strokeLinecap="round"
-      />
-      <path
-        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-    </svg>
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Stacked 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Top 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Pill Closable 1`] = `
+<div
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="tag-pills red"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      red
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
   </div>
   <div
-    className="empty-title"
+    className="tag-pills orange"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
-    Short Message Here
+    <span
+      className="label"
+    >
+      orange
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
   </div>
   <div
-    className="empty-description"
+    className="tag-pills yellow"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
-    More detail on how might the user be able to get around this
+    <span
+      className="label"
+    >
+      yellow
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
   </div>
-</div>
-`;
-
-exports[`Storyshots Empty Tasks Complete 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
   <div
-    className="empty-image"
+    className="tag-pills green"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
-    <svg
-      className="tasks-complete-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      className="label"
     >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M180 98C185.192 98 189 93.5161 189 88.5C189 83.4839 185.192 79 180 79C174.808 79 171 83.4839 171 88.5C171 93.5161 174.808 98 180 98Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <circle
-        cx="139"
-        cy="47"
-        fill="#B0F3FE"
-        r="5"
-      />
-      <path
-        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <circle
-        cx="98"
-        cy="79"
-        fill="white"
-        r="60"
-        stroke="#8ED0FA"
-        stroke-width="6"
-        strokeLinecap="round"
-      />
-      <path
-        d="M80.9802 73.3685C79.5239 72.0567 77.2649 72.1574 75.9346 73.5935C74.6043 75.0295 74.7064 77.2571 76.1627 78.569L92.971 93.7098C95.0099 95.5463 98.1725 95.4053 100.035 93.3948C100.113 93.3094 100.113 93.3094 100.188 93.2217L124.175 64.7735C125.436 63.2779 125.228 61.0574 123.712 59.8139C122.195 58.5703 119.943 58.7747 118.682 60.2703L96.1309 87.0162L80.9802 73.3685Z"
-        fill="#B0F3FE"
-      />
-      <path
-        d="M16 26C21.1921 26 25 21.5161 25 16.5C25 11.4839 21.1921 7 16 7C10.8079 7 7 11.4839 7 16.5C7 21.5161 10.8079 26 16 26Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <ellipse
-        cx="38"
-        cy="35.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <ellipse
-        cx="171"
-        cy="35.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="160"
-        x2="142"
-        y1="13"
-        y2="13"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="151"
-        x2="151"
-        y1="22"
-        y2="4"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31"
-        x2="13"
-        y1="87"
-        y2="87"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="22"
-        x2="22"
-        y1="96"
-        y2="78"
-      />
-    </svg>
+      green
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
   </div>
   <div
-    className="empty-title"
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
-    Short Message Here
+    <span
+      className="label"
+    >
+      bluegreen
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
   </div>
   <div
-    className="empty-description"
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
-    More detail on how might the user be able to get around this
+    <span
+      className="label"
+    >
+      blue
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
   </div>
-</div>
-`;
-
-exports[`Storyshots Icon Basic 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class icon-wrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    aria-labelledby="icon_labelledby_26 icon_describedby_26"
+  <div
+    className="tag-pills violet"
     style={
       Object {
-        "height": "20px",
-        "width": "20px",
+        "color": undefined,
       }
     }
-    viewBox="0 0 24 24"
   >
-    <title
-      id="icon_labelledby_26"
+    <span
+      className="label"
     >
-      My icon title.
-    </title>
-    <desc
-      id="icon_describedby_26"
+      violet
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
     >
-      My icon description.
-    </desc>
-    <path
-      d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      style={
-        Object {
-          "fill": "#000000",
-        }
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills grey"
+    style={
+      Object {
+        "color": undefined,
       }
-    />
-  </svg>
-</span>
+    }
+  >
+    <span
+      className="label"
+    >
+      grey
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
-exports[`Storyshots Icon Icomoon 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class icon-wrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
+exports[`Storyshots Pill Default 1`] = `
+<div
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
 >
-  <svg
-    className=""
-    height="20px"
-    role="presentation"
+  <div
+    className="tag-pills red"
     style={
       Object {
-        "display": "inline-block",
-        "verticalAlign": "middle",
+        "color": undefined,
       }
     }
-    viewBox="0 0 1024 1024"
-    width="20px"
-    xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
-      style={
-        Object {
-          "fill": "#000000",
-        }
+    <span
+      className="label"
+    >
+      red
+    </span>
+  </div>
+  <div
+    className="tag-pills orange"
+    style={
+      Object {
+        "color": undefined,
       }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Icon Icomoon Multicolor 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class icon-wrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    className=""
-    height="24px"
-    role="presentation"
+    }
+  >
+    <span
+      className="label"
+    >
+      orange
+    </span>
+  </div>
+  <div
+    className="tag-pills yellow"
     style={
       Object {
-        "display": "inline-block",
-        "verticalAlign": "middle",
+        "color": undefined,
       }
     }
-    viewBox="0 0 1024 1024"
-    width="24px"
-    xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M102.4 153.6v716.8h241.912v-139.999h79.375v139.999h241.912v-716.8h-563.2zM181.777 233.867h81.268v78.399h-81.268v-78.399zM344.312 233.867h79.375v78.399h-79.375v-78.399zM504.955 233.867h81.267v78.399h-81.267v-78.399zM181.777 392.532h81.268v80.269h-81.268v-80.269zM344.312 392.532h79.375v80.269h-79.375v-80.269zM504.955 392.532h81.267v80.269h-81.267v-80.269zM181.777 551.201h81.268v80.266h-81.268v-80.266zM344.312 551.201h79.375v80.266h-79.375v-80.266zM504.955 551.201h81.267v80.266h-81.267v-80.266zM181.777 711.734h81.268v78.4h-81.268v-78.4zM504.955 711.734h81.267v78.4h-81.267v-78.4z"
-      fill="rgb(80, 206, 225)"
-      style={
-        Object {
-          "fill": undefined,
-        }
-      }
-    />
-    <path
-      d="M598.536 358.4h108.529c14.303 0 26.501 5.478 36.598 16.435 10.936 10.112 16.404 22.333 16.404 36.662v54.359h108.531c14.303 0 26.501 5.478 36.598 16.435 10.936 10.115 16.404 22.756 16.404 37.926v295.821c0 15.171-5.468 28.234-16.404 39.191-10.097 10.115-22.295 15.171-36.598 15.171h-431.596c-14.303 0-26.921-5.056-37.86-15.171-10.094-10.957-15.142-24.020-15.142-39.191v-295.821c0-15.171 5.048-27.812 15.142-37.926 10.939-10.957 23.557-16.435 37.86-16.435h108.531v-54.359c0-14.328 5.046-26.55 15.142-36.662 10.936-10.957 23.557-16.435 37.86-16.435zM707.064 465.856v-54.359h-108.529v54.359h108.529z"
-      fill="rgb(20, 109, 166)"
-      opacity={0.6}
-      style={
-        Object {
-          "fill": undefined,
-        }
+    <span
+      className="label"
+    >
+      yellow
+    </span>
+  </div>
+  <div
+    className="tag-pills green"
+    style={
+      Object {
+        "color": undefined,
       }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Info Bar Disruptive 1`] = `
-<div
-  className="info-bar my-info-bar-class disruptive"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
+    }
   >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
+    <span
+      className="label"
+    >
+      green
+    </span>
+  </div>
+  <div
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
       }
-      viewBox="0 0 24 24"
+    }
+  >
+    <span
+      className="label"
     >
-      <path
-        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
+      bluegreen
+    </span>
+  </div>
   <div
-    className="message body2"
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
-    Body2 is used inside here.
+    <span
+      className="label"
+    >
+      blue
+    </span>
   </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
+  <div
+    className="tag-pills violet"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
-      className=""
+      className="label"
     >
-      Action
+      violet
     </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
+  </div>
+  <div
+    className="tag-pills grey"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
+      className="label"
     >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
+      grey
     </span>
-  </button>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Info Bar Neutral 1`] = `
+exports[`Storyshots Pill With Button 1`] = `
 <div
-  className="info-bar my-info-bar-class neutral"
-  role="presentation"
-  style={Object {}}
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
 >
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
+  <div
+    className="tag-pills red"
+    style={
+      Object {
+        "color": undefined,
       }
-      viewBox="0 0 24 24"
+    }
+  >
+    <span
+      className="label"
     >
-      <path
-        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
+      red
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
   <div
-    className="message body2"
+    className="tag-pills orange"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
-    Body2 is used inside here.
+    <span
+      className="label"
+    >
+      orange
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
   </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
+  <div
+    className="tag-pills yellow"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      yellow
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills green"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
-      className=""
+      className="label"
     >
-      Action
+      green
     </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
+      className="label"
     >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
+      bluegreen
     </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Positive 1`] = `
-<div
-  className="info-bar my-info-bar-class positive"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
     >
-      <path
-        d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
   </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
+  <div
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
-      className=""
+      className="label"
     >
-      Action
+      blue
     </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills violet"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
+      className="label"
     >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
+      violet
     </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Warning 1`] = `
-<div
-  className="info-bar my-info-bar-class warning"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
     >
-      <path
-        d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
   </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
+  <div
+    className="tag-pills grey"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
-      className=""
+      className="label"
     >
-      Action
+      grey
     </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Pill With Icon 1`] = `
+<div
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="tag-pills red"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
   >
     <span
       aria-hidden={false}
@@ -2565,7 +8624,7 @@ exports[`Storyshots Info Bar Warning 1`] = `
         viewBox="0 0 24 24"
       >
         <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
           style={
             Object {
               "fill": "currentColor",
@@ -2574,756 +8633,1063 @@ exports[`Storyshots Info Bar Warning 1`] = `
         />
       </svg>
     </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Link Default 1`] = `
-<a
-  className="link-style my-link-class"
-  href="https://www.twitter.com"
-  style={Object {}}
-  target="_self"
->
-  Twitter
-</a>
-`;
-
-exports[`Storyshots Link Default Disabled 1`] = `
-<a
-  className="link-style my-link-class"
-  href="https://www.facebook.com"
-  style={Object {}}
-  target="_self"
->
-  <span
-    aria-hidden={false}
-    className="icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  User Profile
-</a>
-`;
-
-exports[`Storyshots Link Primary 1`] = `
-<a
-  className="link-style my-link-class primary"
-  href="https://www.facebook.com"
-  style={
-    Object {
-      "maxWidth": "100px",
-    }
-  }
-  target="_self"
->
-  <span
-    aria-hidden={false}
-    className="icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
+    <span
+      className="label"
     >
-      <path
-        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  User Profile
-</a>
-`;
-
-exports[`Storyshots List Horizontal 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
+      red
+    </span>
+  </div>
   <div
+    className="tag-pills orange"
     style={
       Object {
-        "paddingLeft": "16px",
+        "color": undefined,
       }
     }
   >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="list-container"
-    role=""
-  >
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 1
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 2
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 3
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
     >
-      <div>
-        <p>
-          User 4
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
         }
-      }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
     >
-      <div>
-        <p>
-          User 5
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-  </ul>
+      orange
+    </span>
+  </div>
   <div
+    className="tag-pills yellow"
     style={
       Object {
-        "paddingLeft": "16px",
+        "color": undefined,
       }
     }
   >
-    <h3>
-      Footer
-    </h3>
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      yellow
+    </span>
   </div>
-</div>
-`;
-
-exports[`Storyshots List Vertical 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
   <div
+    className="tag-pills green"
     style={
       Object {
-        "paddingLeft": "16px",
+        "color": undefined,
       }
     }
   >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="list-container vertical"
-    role=""
-  >
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
     >
-      <div>
-        <p>
-          User 1
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
         }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      green
+    </span>
+  </div>
+  <div
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
       }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
     >
-      <div>
-        <p>
-          User 2
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
         }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      bluegreen
+    </span>
+  </div>
+  <div
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
       }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
     >
-      <div>
-        <p>
-          User 3
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
         }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      blue
+    </span>
+  </div>
+  <div
+    className="tag-pills violet"
+    style={
+      Object {
+        "color": undefined,
       }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
     >
-      <div>
-        <p>
-          User 4
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
         }
-      }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
     >
-      <div>
-        <p>
-          User 5
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-  </ul>
+      violet
+    </span>
+  </div>
   <div
+    className="tag-pills grey"
     style={
       Object {
-        "paddingLeft": "16px",
+        "color": undefined,
       }
     }
   >
-    <h3>
-      Footer
-    </h3>
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      grey
+    </span>
   </div>
 </div>
 `;
 
-exports[`Storyshots Match Score Default 1`] = `
-<div
-  aria-label="score"
-  className="my-match-score-class match-score-container"
->
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle"
-  />
-  <div
-    className="match-score-circle"
-  />
-  <p
-    className="label"
-  >
-    3
-    /
-    5
-  </p>
-</div>
-`;
-
-exports[`Storyshots Match Score Without Label 1`] = `
-<div
-  aria-label="score"
-  className="my-match-score-class match-score-container"
->
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle"
-  />
-  <div
-    className="match-score-circle"
-  />
-</div>
-`;
+exports[`Storyshots Portal Default 1`] = `<div />`;
 
-exports[`Storyshots Menu Menus 1`] = `
+exports[`Storyshots Radio Button Radio Button 1`] = `
 <div
-  className="main-wrapper"
+  className="selector my-radiobutton-class"
 >
-  <button
-    aria-controls="dropdown-5"
-    aria-disabled={false}
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="button button-default"
-    defaultChecked={false}
+  <input
+    aria-label="Label"
+    checked={false}
     disabled={false}
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
+    id="myRadioButtonId"
+    name="myRadioButtonName"
+    onChange={[Function]}
+    readOnly={true}
+    type="radio"
+    value="Label"
+  />
+  <label
+    className=""
+    htmlFor="myRadioButtonId"
   >
     <span
-      className=""
+      className="radio-button"
+      id="myRadioButtonId-custom-radio"
+    />
+    <span
+      className="selector-label"
     >
-      Menu dropdown
+      Label
     </span>
-  </button>
+  </label>
 </div>
 `;
 
-exports[`Storyshots Modal Fullscreen 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Scrollable 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal X Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
+exports[`Storyshots Radio Button Radio Group 1`] = `
+<div
+  aria-label="Radio Group"
+  className="radio-group"
+  role="group"
 >
-  <span
-    className=""
+  <div
+    className="selector"
   >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Bottom 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
+    <input
+      checked={true}
+      disabled={false}
+      id="oea2exk-1"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio1"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-1"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-1-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio1
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
   >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
+    <input
+      checked={false}
+      disabled={false}
+      id="oea2exk-2"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio2"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-2"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-2-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio2
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
   >
-    Open panel
-  </span>
-</button>
+    <input
+      checked={false}
+      disabled={false}
+      id="oea2exk-3"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio3"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-3"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-3-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio3
+      </span>
+    </label>
+  </div>
+</div>
 `;
 
-exports[`Storyshots Panel Left 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
+exports[`Storyshots Select Basic 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
 >
-  <span
-    className=""
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    Open panel
-  </span>
-</button>
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch"
+      >
+        <input
+          aria-controls="dropdown-19"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="select-input with-icon input-stretch"
+          disabled={false}
+          id="input-20"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={true}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots Panel Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
+exports[`Storyshots Select Disabled 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
 >
-  <span
-    className=""
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    Open panel
-  </span>
-</button>
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch"
+      >
+        <input
+          aria-controls="dropdown-21"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="select-input with-icon input-stretch"
+          disabled={true}
+          id="input-22"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={true}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots Panel Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
+exports[`Storyshots Select Dynamic 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
 >
-  <span
-    className=""
+  <div
+    className="select-wrapper"
   >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Stacked 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch"
+      >
+        <input
+          aria-controls="dropdown-23"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="with-icon input-stretch"
+          disabled={false}
+          id="input-24"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={false}
+          required={false}
+          role="textbox"
+          style={
+            Object {
+              "minWidth": "unset",
+            }
+          }
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select Filterable 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
 >
-  <span
-    className=""
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    Open panel
-  </span>
-</button>
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch"
+      >
+        <input
+          aria-controls="dropdown-25"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="with-icon input-stretch"
+          disabled={false}
+          id="input-26"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={false}
+          required={false}
+          role="textbox"
+          style={
+            Object {
+              "minWidth": "unset",
+            }
+          }
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots Panel Top 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
+exports[`Storyshots Select Multiple 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
 >
-  <span
-    className=""
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    Open panel
-  </span>
-</button>
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch"
+      >
+        <input
+          aria-controls="dropdown-27"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="with-icon input-stretch"
+          disabled={false}
+          id="input-28"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={false}
+          required={false}
+          role="textbox"
+          style={
+            Object {
+              "minWidth": "unset",
+            }
+          }
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots Portal Default 1`] = `<div />`;
-
-exports[`Storyshots Radio Button Radio Button 1`] = `
+exports[`Storyshots Select Multiple With No Filter 1`] = `
 <div
-  className="selector my-radiobutton-class"
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
 >
-  <input
-    aria-label="Label"
-    checked={false}
-    disabled={false}
-    id="myRadioButtonId"
-    name="myRadioButtonName"
-    onChange={[Function]}
-    readOnly={true}
-    type="radio"
-    value="Label"
-  />
-  <label
-    className=""
-    htmlFor="myRadioButtonId"
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    <span
-      className="radio-button"
-      id="myRadioButtonId-custom-radio"
-    />
-    <span
-      className="selector-label"
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
     >
-      Label
-    </span>
-  </label>
+      <div
+        className="input-wrapper input-stretch"
+      >
+        <input
+          aria-controls="dropdown-29"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="select-input with-icon input-stretch"
+          disabled={false}
+          id="input-30"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={true}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Radio Button Radio Group 1`] = `
+exports[`Storyshots Select Options Disabled 1`] = `
 <div
-  aria-label="Radio Group"
-  className="radio-group"
-  role="group"
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
 >
   <div
-    className="selector"
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    <input
-      checked={true}
-      disabled={false}
-      id="oea2exk-1"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio1"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-1"
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
     >
-      <span
-        className="radio-button"
-        id="oea2exk-1-custom-radio"
-      />
-      <span
-        className="selector-label"
+      <div
+        className="input-wrapper input-stretch"
       >
-        Radio1
-      </span>
-    </label>
+        <input
+          aria-controls="dropdown-31"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="select-input with-icon input-stretch"
+          disabled={false}
+          id="input-32"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={true}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
   </div>
+</div>
+`;
+
+exports[`Storyshots Select With Clear 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
   <div
-    className="selector"
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    <input
-      checked={false}
-      disabled={false}
-      id="oea2exk-2"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio2"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-2"
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
     >
-      <span
-        className="radio-button"
-        id="oea2exk-2-custom-radio"
-      />
-      <span
-        className="selector-label"
+      <div
+        className="input-wrapper input-stretch"
       >
-        Radio2
-      </span>
-    </label>
+        <input
+          aria-controls="dropdown-33"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="select-input with-icon input-stretch"
+          disabled={false}
+          id="input-34"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={true}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
   </div>
+</div>
+`;
+
+exports[`Storyshots Select With Default Value 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
   <div
-    className="selector"
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
   >
-    <input
-      checked={false}
-      disabled={false}
-      id="oea2exk-3"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio3"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-3"
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
     >
-      <span
-        className="radio-button"
-        id="oea2exk-3-custom-radio"
-      />
-      <span
-        className="selector-label"
+      <div
+        className="input-wrapper input-stretch"
       >
-        Radio3
-      </span>
-    </label>
+        <input
+          aria-controls="dropdown-35"
+          aria-expanded={false}
+          aria-haspopup={true}
+          autoFocus={false}
+          className="select-input with-icon input-stretch"
+          disabled={false}
+          id="input-36"
+          onChange={[Function]}
+          onClick={[Function]}
+          placeholder="Select"
+          readOnly={true}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="text"
+        />
+        <div
+          className="icon-wrapper left-icon"
+        >
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7,10L12,15L17,10H7Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -3333,29 +9699,189 @@ exports[`Storyshots Slider Range Slider 1`] = `
   className="slider-container"
 >
   <div
-    className="slider"
+    className="slider my-slider"
   >
     <div
-      className="slider-rail"
+      className="slider-rail"
+    />
+    <div
+      className="slider-track"
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker active"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker active"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker active"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker active"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker active"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
     />
     <div
-      className="slider-track"
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
+    />
+    <div
+      className="rail-marker"
+      style={
+        Object {
+          "left": "NaNpx",
+        }
+      }
     />
     <input
+      aria-label="Slider"
+      autoFocus={false}
       className="thumb"
       disabled={false}
+      id="mySliderId-0"
       max={200}
       min={0}
+      name="mySlider-0"
       onChange={[Function]}
       step={10}
       type="range"
       value={110}
     />
     <input
+      aria-label="Slider"
+      autoFocus={false}
       className="thumb"
       disabled={false}
+      id="mySliderId-1"
       max={200}
       min={0}
+      name="mySlider-1"
       onChange={[Function]}
       step={10}
       type="range"
@@ -3390,7 +9916,7 @@ exports[`Storyshots Slider Standard Slider 1`] = `
   className="slider-container"
 >
   <div
-    className="slider"
+    className="slider my-slider"
   >
     <div
       className="slider-rail"
@@ -3398,35 +9924,15 @@ exports[`Storyshots Slider Standard Slider 1`] = `
     <div
       className="slider-track"
     />
-    <div
-      className="rail-marker active"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
     <input
+      aria-label="Slider"
+      autoFocus={true}
       className="thumb"
       disabled={false}
+      id="mySliderId"
       max={5}
       min={1}
+      name="mySlider"
       onChange={[Function]}
       step={1}
       type="range"
@@ -3544,6 +10050,350 @@ exports[`Storyshots Spinner Default 1`] = `
 </span>
 `;
 
+exports[`Storyshots Stack Horizontal 1`] = `
+<div
+  className="stack my-stack-class horizontal m"
+  style={
+    Object {
+      "alignItems": "",
+      "backgroundColor": "aquamarine",
+      "flexWrap": "",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Storyshots Stack Responsive 1`] = `
+<div
+  className="stack my-stack-class vertical l"
+  style={
+    Object {
+      "alignItems": "",
+      "backgroundColor": "aquamarine",
+      "flexWrap": "",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Storyshots Stack Sample Nav List 1`] = `
+<div
+  className="stack nav-list-container horizontal"
+  style={
+    Object {
+      "alignItems": "",
+      "flexWrap": "wrap",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Stack Vertical 1`] = `
+<div
+  className="stack my-stack-class vertical l"
+  style={
+    Object {
+      "alignItems": "",
+      "backgroundColor": "aquamarine",
+      "flexWrap": "",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+</div>
+`;
+
 exports[`Storyshots Tabs Default 1`] = `
 <div>
   <div
@@ -4735,3 +11585,28 @@ exports[`Storyshots Tabs With Badge 1`] = `
   </div>
 </div>
 `;
+
+exports[`Storyshots Tooltip Tooltips 1`] = `
+<div
+  className="reference-wrapper"
+  id="4fzzzxj"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    aria-disabled={false}
+    aria-label="Show Tooltip"
+    className="button button-primary button-size2"
+    defaultChecked={false}
+    disabled={false}
+  >
+    <span
+      className="button-text2"
+    >
+      Show Tooltip
+    </span>
+  </button>
+</div>
+`;

From e3efcd67ae93b077ece5d11ccb68bd979c7068fd Mon Sep 17 00:00:00 2001
From: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
Date: Tue, 21 Jun 2022 14:57:28 -0500
Subject: [PATCH 3/7] chore: address PR feedback

---
 src/components/Slider/Slider.stories.tsx |  4 +-
 src/components/Slider/Slider.test.tsx    |  2 +-
 src/components/Slider/Slider.tsx         | 51 +++++++++++++++++-------
 src/components/Slider/Slider.types.ts    | 10 ++---
 4 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 1c7f2d8ea..acf41c5b0 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { Slider } from './';
 
@@ -15,7 +15,7 @@ const Slider_Story: ComponentStory<typeof Slider> = (args) => (
 const sliderArgs: Object = {
     ariaLabel: 'Slider',
     autoFocus: false,
-    className: 'my-slider',
+    classNames: 'my-slider',
     disabled: false,
     id: 'mySliderId',
     min: 100,
diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx
index b59401794..0a82a47f8 100644
--- a/src/components/Slider/Slider.test.tsx
+++ b/src/components/Slider/Slider.test.tsx
@@ -1,7 +1,7 @@
+import React from 'react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import MatchMediaMock from 'jest-matchmedia-mock';
-import React from 'react';
 
 import { Slider } from './';
 
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 189ff4d2d..65d77b82c 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -1,24 +1,43 @@
 import React, { FC, useLayoutEffect, useRef, useState } from 'react';
 
 import { mergeClasses } from '../../shared/utilities';
-import styles from './slider.module.scss';
 import { SliderMarker, SliderProps } from './Slider.types';
+import styles from './slider.module.scss';
 
 const thumbDiameter: number = +styles.thumbDiameter;
 const markerWidth: number = +styles.markerWidth;
 
-function asc(a: number, b: number) {
+/**
+ * For use with Array.sort to sort numbers in ascending order.
+ * @param a   The first number for sort comparison.
+ * @param b   The  vsecond number for sort comparison.
+ * @returns   The difference between the numbers.
+ */
+function asc(a: number, b: number): number {
     return a - b;
 }
 
-export function valueToPercent(value: number, min: number, max: number) {
+/**
+ * Provides the percentage representation of the provide value
+ * based upon where it sits between the minimum and maximum value.
+ *
+ * @param value   The value to convert to percentage.
+ * @param min     Minimum possible value.
+ * @param max     Maximum possible value.
+ * @returns       The percentage presentation of the provided value.
+ */
+export function valueToPercent(
+    value: number,
+    min: number,
+    max: number
+): number {
     return ((value - min) * 100) / (max - min);
 }
 
 export const Slider: FC<SliderProps> = ({
     ariaLabel,
     autoFocus = false,
-    className,
+    classNames,
     disabled = false,
     id,
     min = 0,
@@ -30,17 +49,19 @@ export const Slider: FC<SliderProps> = ({
     step = 1,
     value,
 }) => {
-    const isRange = Array.isArray(value);
-    const [values, setValues] = useState(isRange ? value.sort(asc) : [value]);
+    const isRange: boolean = Array.isArray(value);
+    const [values, setValues] = useState<number[]>(
+        isRange ? value.sort(asc) : [value]
+    );
     const railRef = useRef<HTMLDivElement>(null);
     const lowerLabelRef = useRef<HTMLInputElement>(null);
     const upperLabelRef = useRef<HTMLInputElement>(null);
     const trackRef = useRef<HTMLDivElement>(null);
-    let [showMinLabel, setShowMinLabel] = useState(showLabels);
-    let [showMaxLabel, setShowMaxLabel] = useState(showLabels);
+    let [showMinLabel, setShowMinLabel] = useState<boolean>(showLabels);
+    let [showMaxLabel, setShowMaxLabel] = useState<boolean>(showLabels);
     let [markers, setMarkers] = useState<SliderMarker[]>([]);
 
-    function getIdentifier(baseString: string, index: number): string {
+    const getIdentifier = (baseString: string, index: number): string => {
         if (!baseString) {
             return '';
         }
@@ -49,23 +70,23 @@ export const Slider: FC<SliderProps> = ({
             idTokens.push(index);
         }
         return idTokens.join('-');
-    }
+    };
 
-    function handleChange(newVal: number, index: number) {
+    const handleChange = (newVal: number, index: number) => {
         const newValues = [...values];
         newValues.splice(index, 1, newVal);
         newValues.sort(asc);
         setValues(newValues);
         onChange?.(isRange ? [...newValues] : newValues[0]);
-    }
+    };
 
-    function isMarkerActive(markerValue: number): boolean {
+    const isMarkerActive = (markerValue: number): boolean => {
         const markerPct = valueToPercent(markerValue, min, max);
         return isRange
             ? markerPct >= valueToPercent(values[0], min, max) &&
                   markerPct <= valueToPercent(values[1], min, max)
             : markerPct <= valueToPercent(values[0], min, max);
-    }
+    };
 
     const getValueOffset = (
         val: number,
@@ -159,7 +180,7 @@ export const Slider: FC<SliderProps> = ({
                 [styles.sliderDisabled]: disabled,
             })}
         >
-            <div className={mergeClasses(styles.slider, className)}>
+            <div className={mergeClasses(styles.slider, classNames)}>
                 <div ref={railRef} className={styles.sliderRail} />
                 <div ref={trackRef} className={styles.sliderTrack} />
                 {markers.map((mark, index) => {
diff --git a/src/components/Slider/Slider.types.ts b/src/components/Slider/Slider.types.ts
index 8662bafb5..91cf869d8 100644
--- a/src/components/Slider/Slider.types.ts
+++ b/src/components/Slider/Slider.types.ts
@@ -1,3 +1,5 @@
+import { OcBaseProps } from '../OcBase';
+
 export interface SliderMarker {
     /**
      * The step value of the marker.
@@ -25,7 +27,8 @@ export interface SliderProps extends SliderInputProps {
     showMarkers?: boolean;
 }
 
-export interface SliderInputProps {
+export interface SliderInputProps
+    extends Omit<OcBaseProps<HTMLInputElement>, 'onChange' | 'value'> {
     /**
      * The input aria label text.
      */
@@ -35,11 +38,6 @@ export interface SliderInputProps {
      * @default false
      */
     autoFocus?: boolean;
-    /**
-     * The input class names.
-     * NOTE: For range sliders, each input's className will have an index value added.
-     */
-    className?: string;
     /**
      * The input disabled state.
      * @default false

From 6623ad945650ff198aa6b70849adb313b6ec8b6e Mon Sep 17 00:00:00 2001
From: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
Date: Tue, 21 Jun 2022 16:41:31 -0500
Subject: [PATCH 4/7] fix: ensure marker and thumb align

---
 src/components/Slider/Slider.tsx         | 45 +++++++++---------------
 src/components/Slider/slider.module.scss |  1 -
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 65d77b82c..3a0e40056 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -1,11 +1,11 @@
 import React, { FC, useLayoutEffect, useRef, useState } from 'react';
 
-import { mergeClasses } from '../../shared/utilities';
+import { mergeClasses, visuallyHidden } from '../../shared/utilities';
 import { SliderMarker, SliderProps } from './Slider.types';
 import styles from './slider.module.scss';
 
 const thumbDiameter: number = +styles.thumbDiameter;
-const markerWidth: number = +styles.markerWidth;
+const thumbRadius = thumbDiameter / 2;
 
 /**
  * For use with Array.sort to sort numbers in ascending order.
@@ -88,14 +88,11 @@ export const Slider: FC<SliderProps> = ({
             : markerPct <= valueToPercent(values[0], min, max);
     };
 
-    const getValueOffset = (
-        val: number,
-        valDiameter: number,
-        inputWidth: number
-    ): number => {
-        const valRadius = valDiameter / 2;
+    const getValueOffset = (val: number): number => {
+        const inputWidth = railRef.current?.offsetWidth || 0;
         return (
-            ((val - min) / (max - min)) * (inputWidth - valDiameter) + valRadius
+            ((val - min) / (max - min)) * (inputWidth - thumbDiameter) +
+            thumbRadius
         );
     };
 
@@ -111,11 +108,7 @@ export const Slider: FC<SliderProps> = ({
                           const markVal = min + step * index;
                           return {
                               value: markVal,
-                              offset: `${getValueOffset(
-                                  markVal,
-                                  markerWidth,
-                                  inputWidth
-                              )}px`,
+                              offset: `${getValueOffset(markVal)}px`,
                           };
                       }
                   )
@@ -127,16 +120,8 @@ export const Slider: FC<SliderProps> = ({
             return;
         }
 
-        const lowerThumbOffset = getValueOffset(
-            values[0],
-            thumbDiameter,
-            inputWidth
-        );
-        const upperThumbOffset = getValueOffset(
-            values[1],
-            thumbDiameter,
-            inputWidth
-        );
+        const lowerThumbOffset = getValueOffset(values[0]);
+        const upperThumbOffset = getValueOffset(values[1]);
         const rangeWidth = isRange
             ? upperThumbOffset - lowerThumbOffset
             : lowerThumbOffset;
@@ -184,12 +169,14 @@ export const Slider: FC<SliderProps> = ({
                 <div ref={railRef} className={styles.sliderRail} />
                 <div ref={trackRef} className={styles.sliderTrack} />
                 {markers.map((mark, index) => {
-                    // Omitting the first and last marker based on design.
-                    const isVisuallyHidden =
+                    const isFirstOrLast =
                         index === 0 || index === markers.length - 1;
-
-                    const style = { left: mark.offset };
-                    return isVisuallyHidden ? undefined : (
+                    const style = {
+                        // Hiding the first and last marker based on design.
+                        ...(isFirstOrLast && visuallyHidden),
+                        left: mark.offset,
+                    };
+                    return (
                         <div
                             key={index}
                             className={mergeClasses(styles.railMarker, {
diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
index 8a09c9ec7..06ca5f3cb 100644
--- a/src/components/Slider/slider.module.scss
+++ b/src/components/Slider/slider.module.scss
@@ -17,7 +17,6 @@ $marker-top: $vertical-center - ($marker-height / 2);
 // Export these values for typescript consumption.
 :export {
     thumbDiameter: strip-units($slider-height);
-    markerWidth: strip-units($marker-width);
 }
 
 .slider-container {

From c418d6cdd805d8950bf86513f8fa59d7069926c5 Mon Sep 17 00:00:00 2001
From: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
Date: Wed, 22 Jun 2022 09:35:14 -0500
Subject: [PATCH 5/7] fix: eliminate race condition in Slider

---
 src/components/Slider/Slider.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 3a0e40056..568c6583f 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { mergeClasses, visuallyHidden } from '../../shared/utilities';
 import { SliderMarker, SliderProps } from './Slider.types';
@@ -72,14 +72,6 @@ export const Slider: FC<SliderProps> = ({
         return idTokens.join('-');
     };
 
-    const handleChange = (newVal: number, index: number) => {
-        const newValues = [...values];
-        newValues.splice(index, 1, newVal);
-        newValues.sort(asc);
-        setValues(newValues);
-        onChange?.(isRange ? [...newValues] : newValues[0]);
-    };
-
     const isMarkerActive = (markerValue: number): boolean => {
         const markerPct = valueToPercent(markerValue, min, max);
         return isRange
@@ -96,6 +88,17 @@ export const Slider: FC<SliderProps> = ({
         );
     };
 
+    const handleChange = (newVal: number, index: number) => {
+        const newValues = [...values];
+        newValues.splice(index, 1, newVal);
+        newValues.sort(asc);
+        setValues(newValues);
+    };
+
+    useEffect(() => {
+        onChange?.(isRange ? [...values] : values[0]);
+    }, [values]);
+
     // Set width of the range to decrease from the left side
     useLayoutEffect(() => {
         const inputWidth = railRef.current?.offsetWidth || 0;

From bdd8e42727c858b3dcb91b1635a1c89e89e84c6a Mon Sep 17 00:00:00 2001
From: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
Date: Wed, 22 Jun 2022 09:44:51 -0500
Subject: [PATCH 6/7] chore: clean up testing output

---
 src/components/Slider/Slider.stories.tsx    |  2 +-
 src/components/Slider/Slider.tsx            | 23 ++++++++++-----------
 src/hooks/useFocusVisible.test.tsx          |  6 ------
 src/hooks/useFocusVisibleClassName.test.tsx |  6 ------
 4 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index acf41c5b0..f630af889 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -22,7 +22,7 @@ const sliderArgs: Object = {
     max: 200,
     name: 'mySlider',
     onChange: (value: number | number[]) => {
-        console.log(value);
+        // handle change.
     },
 };
 
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 568c6583f..3c2be922f 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -172,21 +172,20 @@ export const Slider: FC<SliderProps> = ({
                 <div ref={railRef} className={styles.sliderRail} />
                 <div ref={trackRef} className={styles.sliderTrack} />
                 {markers.map((mark, index) => {
+                    // Hiding the first and last marker based on design.
                     const isFirstOrLast =
                         index === 0 || index === markers.length - 1;
-                    const style = {
-                        // Hiding the first and last marker based on design.
-                        ...(isFirstOrLast && visuallyHidden),
-                        left: mark.offset,
-                    };
+                    const style = { left: mark.offset };
                     return (
-                        <div
-                            key={index}
-                            className={mergeClasses(styles.railMarker, {
-                                [styles.active]: isMarkerActive(mark.value),
-                            })}
-                            style={style}
-                        />
+                        !isFirstOrLast && (
+                            <div
+                                key={index}
+                                className={mergeClasses(styles.railMarker, {
+                                    [styles.active]: isMarkerActive(mark.value),
+                                })}
+                                style={style}
+                            />
+                        )
                     );
                 })}
                 {values.map((val, index) => (
diff --git a/src/hooks/useFocusVisible.test.tsx b/src/hooks/useFocusVisible.test.tsx
index 40943a8c8..fc3908041 100644
--- a/src/hooks/useFocusVisible.test.tsx
+++ b/src/hooks/useFocusVisible.test.tsx
@@ -16,27 +16,21 @@ describe('useFocusVisible', () => {
 
     it('returns true', () => {
         render(<Foo />);
-        screen.debug();
         fireEvent.keyDown(screen.getByTestId('testDiv'), { KeyboardEvent });
         expect(screen.getByTestId('testDiv')).toHaveTextContent('true');
-        screen.debug();
     });
 
     it('returns false after true', () => {
         render(<Foo />);
-        screen.debug();
         fireEvent.keyDown(screen.getByTestId('testDiv'), { KeyboardEvent });
         expect(screen.getByTestId('testDiv')).toHaveTextContent('true');
         fireEvent.mouseMove(screen.getByTestId('testDiv'), { MouseEvent });
         expect(screen.getByTestId('testDiv')).toHaveTextContent('false');
-        screen.debug();
     });
 
     it('returns false', () => {
         render(<Foo />);
-        screen.debug();
         fireEvent.mouseMove(screen.getByTestId('testDiv'), { MouseEvent });
         expect(screen.getByTestId('testDiv')).toHaveTextContent('false');
-        screen.debug();
     });
 });
diff --git a/src/hooks/useFocusVisibleClassName.test.tsx b/src/hooks/useFocusVisibleClassName.test.tsx
index d996014c9..195ff3af3 100644
--- a/src/hooks/useFocusVisibleClassName.test.tsx
+++ b/src/hooks/useFocusVisibleClassName.test.tsx
@@ -20,27 +20,21 @@ describe('useFocusVisibleClassName', () => {
 
     it('uses className when keyboard is active', () => {
         render(<Foo />);
-        screen.debug();
         fireEvent.keyDown(screen.getByTestId('testDiv'), { KeyboardEvent });
         expect(screen.getByTestId('testDiv')).toHaveClass('focus-visible');
-        screen.debug();
     });
 
     it('uses className when keyboard is active, then does not when mouse is active', () => {
         render(<Foo />);
-        screen.debug();
         fireEvent.keyDown(screen.getByTestId('testDiv'), { KeyboardEvent });
         expect(screen.getByTestId('testDiv')).toHaveClass('focus-visible');
         fireEvent.mouseMove(screen.getByTestId('testDiv'), { MouseEvent });
         expect(screen.getByTestId('testDiv')).not.toHaveClass('focus-visible');
-        screen.debug();
     });
 
     it('does not use className when mouse is active', () => {
         render(<Foo />);
-        screen.debug();
         fireEvent.mouseMove(screen.getByTestId('testDiv'), { MouseEvent });
         expect(screen.getByTestId('testDiv')).not.toHaveClass('focus-visible');
-        screen.debug();
     });
 });

From d462f3d1e231381efcf40c4ef706f35dc7216c1b Mon Sep 17 00:00:00 2001
From: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
Date: Wed, 22 Jun 2022 09:57:59 -0500
Subject: [PATCH 7/7] fix: cleanup build errors

---
 src/components/Slider/Slider.stories.tsx | 2 +-
 src/components/Slider/Slider.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index f630af889..06c3e16d8 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -21,7 +21,7 @@ const sliderArgs: Object = {
     min: 100,
     max: 200,
     name: 'mySlider',
-    onChange: (value: number | number[]) => {
+    onChange: () => {
         // handle change.
     },
 };
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 3c2be922f..9a1641930 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -51,7 +51,7 @@ export const Slider: FC<SliderProps> = ({
 }) => {
     const isRange: boolean = Array.isArray(value);
     const [values, setValues] = useState<number[]>(
-        isRange ? value.sort(asc) : [value]
+        Array.isArray(value) ? value.sort(asc) : [value]
     );
     const railRef = useRef<HTMLDivElement>(null);
     const lowerLabelRef = useRef<HTMLInputElement>(null);