@pareto-engineering/design-system 0.0.1-alpha.60 → 0.0.1-alpha.64

package/dist/cjs/a/TeamInfo/TeamInfo.js

@@ -72,7 +72,7 @@ SiteTeamInfo.propTypes = {
   className: _propTypes.default.string,
 
   /**
-   * The React-written, css properties for this element.
+   * The react-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
 

package/dist/cjs/a/TeamInfo/styles.scss

@@ -8,7 +8,8 @@ $team-info-padding:var(--u);
 $img-height-width: 3.5em;
 $img-border-radius: var(--theme-border-radius);
 $p-h4-color:var(--subtitle);
-$role-color:var(-grey);
+$role-color:var(--metadata);
+$default-name-color:var(--main1);
 $box-shadow:0 .45em 1em 0 var(--background);
 
 .#{bem.$base}.team-info {
@@ -43,7 +44,7 @@ $box-shadow:0 .45em 1em 0 var(--background);
       justify-content: space-around;
 
       .name {
-        color: $p-h4-color;
+        color: $default-name-color;
       }
 
       .role {

package/dist/cjs/b/QuestionDropdown/QuestionDropdown.js

@@ -35,13 +35,14 @@ var QuestionDropdown = _ref => {
     style,
     question,
     children,
-    isFAQSchema // ...otherProps
+    isFAQSchema,
+    defaultIsOpen // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  var [isOpen, setIsOpen] = (0, React.useState)(false);
+  var [isOpen, setIsOpen] = (0, React.useState)(defaultIsOpen);
 
   var toggleOpen = () => setIsOpen(!isOpen);
 
@@ -104,9 +105,15 @@ QuestionDropdown.propTypes = {
   /**
    *  Whether element is part of SEO schema
    */
-  isFAQSchema: _propTypes.default.bool
+  isFAQSchema: _propTypes.default.bool,
+
+  /**
+   * Whether the question drop down should be opened by default
+   */
+  defaultIsOpen: _propTypes.default.bool
 };
-QuestionDropdown.defaultProps = {// someProp:false
+QuestionDropdown.defaultProps = {
+  defaultIsOpen: false
 };
 var _default = QuestionDropdown;
 exports.default = _default;

package/dist/cjs/c/index.js

@@ -3,30 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TeamGallery", {
-  enumerable: true,
-  get: function get() {
-    return _TeamGallery.TeamGallery;
-  }
-});
 Object.defineProperty(exports, "Hero", {
   enumerable: true,
   get: function get() {
     return _Hero.Hero;
   }
 });
-Object.defineProperty(exports, "Testimonials", {
-  enumerable: true,
-  get: function get() {
-    return _Testimonials.Testimonials;
-  }
-});
-Object.defineProperty(exports, "SiteNavigation", {
-  enumerable: true,
-  get: function get() {
-    return _SiteNavigation.SiteNavigation;
-  }
-});
 Object.defineProperty(exports, "ContentSlides", {
   enumerable: true,
   get: function get() {
@@ -39,113 +21,7 @@ Object.defineProperty(exports, "useContentSlides", {
     return _ContentSlides.useContentSlides;
   }
 });
-Object.defineProperty(exports, "SiteFooter", {
-  enumerable: true,
-  get: function get() {
-    return _SiteFooter.SiteFooter;
-  }
-});
-Object.defineProperty(exports, "SiteServices", {
-  enumerable: true,
-  get: function get() {
-    return _SiteServices.SiteServices;
-  }
-});
-Object.defineProperty(exports, "SiteOnboardingStep", {
-  enumerable: true,
-  get: function get() {
-    return _SiteOnboardingStep.SiteOnboardingStep;
-  }
-});
-Object.defineProperty(exports, "SitePricing", {
-  enumerable: true,
-  get: function get() {
-    return _SitePricing.SitePricing;
-  }
-});
-Object.defineProperty(exports, "SiteMission", {
-  enumerable: true,
-  get: function get() {
-    return _SiteMission.SiteMission;
-  }
-});
-Object.defineProperty(exports, "SiteHeaderCTA", {
-  enumerable: true,
-  get: function get() {
-    return _SiteHeaderCTA.SiteHeaderCTA;
-  }
-});
-Object.defineProperty(exports, "BlogPostsList", {
-  enumerable: true,
-  get: function get() {
-    return _BlogPostsList.BlogPostsList;
-  }
-});
-Object.defineProperty(exports, "BlogPost", {
-  enumerable: true,
-  get: function get() {
-    return _BlogPost.BlogPost;
-  }
-});
-Object.defineProperty(exports, "BlogContext", {
-  enumerable: true,
-  get: function get() {
-    return _BlogContext.BlogContext;
-  }
-});
-Object.defineProperty(exports, "BlogContextProvider", {
-  enumerable: true,
-  get: function get() {
-    return _BlogContext.BlogContextProvider;
-  }
-});
-Object.defineProperty(exports, "useBlog", {
-  enumerable: true,
-  get: function get() {
-    return _BlogContext.useBlog;
-  }
-});
-Object.defineProperty(exports, "BlogCategoryButton", {
-  enumerable: true,
-  get: function get() {
-    return _BlogCategoryButton.BlogCategoryButton;
-  }
-});
-Object.defineProperty(exports, "AcceptCookies", {
-  enumerable: true,
-  get: function get() {
-    return _AcceptCookies.AcceptCookies;
-  }
-});
-
-var _TeamGallery = require("./TeamGallery");
 
 var _Hero = require("./Hero");
 
-var _Testimonials = require("./Testimonials");
-
-var _SiteNavigation = require("./SiteNavigation");
-
-var _ContentSlides = require("./ContentSlides");
-
-var _SiteFooter = require("./SiteFooter");
-
-var _SiteServices = require("./SiteServices");
-
-var _SiteOnboardingStep = require("./SiteOnboardingStep");
-
-var _SitePricing = require("./SitePricing");
-
-var _SiteMission = require("./SiteMission");
-
-var _SiteHeaderCTA = require("./SiteHeaderCTA");
-
-var _BlogPostsList = require("./BlogPostsList");
-
-var _BlogPost = require("./BlogPost");
-
-var _BlogContext = require("./BlogContext");
-
-var _BlogCategoryButton = require("./BlogCategoryButton");
-
-var _AcceptCookies = require("./AcceptCookies");
+var _ContentSlides = require("./ContentSlides");

package/dist/cjs/f/fields/SelectInput/styles.scss

@@ -5,18 +5,22 @@
 @use "../../../form.scss";
 
 
-$label-input-width: 100%;
+$default-padding: 0.75em 0.75em 0.55em;
 
 
 .#{bem.$base}.select-input {
+  display: flex;
+  flex-direction: column;
+
+
   .input-label {
     color: var(--main1);
   }
 
   .input {
-    background: var(--background);
+    background: var(--light-background);
     color: var(--on-background);
-    width: $label-input-width;
+    padding: $default-padding;
 
     &:focus {
       background: var(--dark-background);

package/dist/es/a/TeamInfo/TeamInfo.js

@@ -57,7 +57,7 @@ SiteTeamInfo.propTypes = {
   className: PropTypes.string,
 
   /**
-   * The React-written, css properties for this element.
+   * The react-written, css properties for this element.
    */
   style: PropTypes.objectOf(PropTypes.string),
 

package/dist/es/a/TeamInfo/styles.scss

@@ -8,7 +8,8 @@ $team-info-padding:var(--u);
 $img-height-width: 3.5em;
 $img-border-radius: var(--theme-border-radius);
 $p-h4-color:var(--subtitle);
-$role-color:var(-grey);
+$role-color:var(--metadata);
+$default-name-color:var(--main1);
 $box-shadow:0 .45em 1em 0 var(--background);
 
 .#{bem.$base}.team-info {
@@ -43,7 +44,7 @@ $box-shadow:0 .45em 1em 0 var(--background);
       justify-content: space-around;
 
       .name {
-        color: $p-h4-color;
+        color: $default-name-color;
       }
 
       .role {

package/dist/es/b/QuestionDropdown/QuestionDropdown.js

@@ -21,13 +21,14 @@ const QuestionDropdown = ({
   style,
   question,
   children,
-  isFAQSchema // ...otherProps
+  isFAQSchema,
+  defaultIsOpen // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
 
   const toggleOpen = () => setIsOpen(!isOpen);
 
@@ -90,8 +91,14 @@ QuestionDropdown.propTypes = {
   /**
    *  Whether element is part of SEO schema
    */
-  isFAQSchema: PropTypes.bool
+  isFAQSchema: PropTypes.bool,
+
+  /**
+   * Whether the question drop down should be opened by default
+   */
+  defaultIsOpen: PropTypes.bool
 };
-QuestionDropdown.defaultProps = {// someProp:false
+QuestionDropdown.defaultProps = {
+  defaultIsOpen: false
 };
 export default QuestionDropdown;

package/dist/es/c/index.js

@@ -1,16 +1,2 @@
-export { TeamGallery } from "./TeamGallery";
 export { Hero } from "./Hero";
-export { Testimonials } from "./Testimonials";
-export { SiteNavigation } from "./SiteNavigation";
-export { ContentSlides, useContentSlides } from "./ContentSlides";
-export { SiteFooter } from "./SiteFooter";
-export { SiteServices } from "./SiteServices";
-export { SiteOnboardingStep } from "./SiteOnboardingStep";
-export { SitePricing } from "./SitePricing";
-export { SiteMission } from "./SiteMission";
-export { SiteHeaderCTA } from "./SiteHeaderCTA";
-export { BlogPostsList } from "./BlogPostsList";
-export { BlogPost } from "./BlogPost";
-export { BlogContext, BlogContextProvider, useBlog } from "./BlogContext";
-export { BlogCategoryButton } from "./BlogCategoryButton";
-export { AcceptCookies } from "./AcceptCookies";
+export { ContentSlides, useContentSlides } from "./ContentSlides";

package/dist/es/f/fields/SelectInput/styles.scss

@@ -5,18 +5,22 @@
 @use "../../../form.scss";
 
 
-$label-input-width: 100%;
+$default-padding: 0.75em 0.75em 0.55em;
 
 
 .#{bem.$base}.select-input {
+  display: flex;
+  flex-direction: column;
+
+
   .input-label {
     color: var(--main1);
   }
 
   .input {
-    background: var(--background);
+    background: var(--light-background);
     color: var(--on-background);
-    width: $label-input-width;
+    padding: $default-padding;
 
     &:focus {
       background: var(--dark-background);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "0.0.1-alpha.60",
+  "version": "0.0.1-alpha.64",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -79,9 +79,9 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^0.0.15",
+    "@pareto-engineering/assets": "^0.0.16",
     "@pareto-engineering/bem": "^0.1.5",
-    "@pareto-engineering/styles": "^0.1.0-alpha.10",
+    "@pareto-engineering/styles": "^0.1.0-alpha.13",
     "date-fns": "^2.22.1",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -3111,6 +3111,45 @@ exports[`Storyshots b/QuestionDropdown Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots b/QuestionDropdown Open Question Dropdown 1`] = `
+<div
+  className="base question-dropdown open"
+>
+  <div
+    className="accordion"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex={0}
+  >
+    <span
+      className="caret"
+    >
+      ^
+    </span>
+    <div
+      className="question-content"
+    >
+      What is Pareto?
+    </div>
+  </div>
+  <div
+    className="answer-content"
+  >
+    <div
+      className="answer-text"
+    >
+      <p>
+        Pareto is a female-owned and operated virtual workforce helping startups and small businesses automate day-to-day data processing, sales outreach, product research, and admin operations. We combine the quality and care of real people with the efficiency of machine automation to get the job done.
+      </p>
+      <p>
+        At the same time, we’re a WBENC-certified business, empowering women in developing countries with meaningful economic opportunities.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots b/QuestionDropdown With SEO 1`] = `
 <div
   className="base question-dropdown"
@@ -3463,347 +3502,6 @@ exports[`Storyshots b/Title With Subtitle 1`] = `
 </div>
 `;
 
-exports[`Storyshots c/AcceptCookies Base 1`] = `
-<div
-  className="y-background b-dark-y"
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
->
-  <div
-    className="base accept-cookies x-main1 u1"
-  >
-    <div
-      className="elementContent"
-    >
-      <p
-        className="s0"
-      >
-        This website uses cookies.
-      </p>
-      <p
-        className="s-1"
-      >
-        We use cookies to personalise content and ads, to provide social medial features and to analyse our traffic.
-      </p>
-      <div
-        className="buttons s-1"
-      >
-        <button
-          className="base button allow x-main1"
-          onClick={[Function]}
-          type="button"
-        >
-          Allow
-        </button>
-        <button
-          className="base button decline v1 ml-v x-main1"
-          onClick={[Function]}
-          type="button"
-        >
-          Decline
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/BlogCategoryButton Base 1`] = `
-<a
-  href="#/blog/c/productivity"
-  onClick={[Function]}
->
-  <button
-    className="base button base blog-category-button x-secondary1 modifierCompact"
-    type="button"
-  >
-    Sample BlogCategoryButton
-  </button>
-</a>
-`;
-
-exports[`Storyshots c/BlogPost Base 1`] = `
-<div
-  className="base blog-post u1 md-u2"
->
-  <div
-    className="y-red b-y uc article-head ph-u pv-v v4 md-v6"
-  >
-    <div
-      className="v2 mv-v"
-    >
-      <a
-        href="#/blog/c/business-tips"
-        onClick={[Function]}
-      >
-        <button
-          className="base button base blog-category-button s-1 x-main1 modifierCompact"
-          type="button"
-        >
-          Business Tips
-        </button>
-      </a>
-    </div>
-    <div
-      className="base title"
-    >
-      <h1
-        className="heading"
-      >
-        10 productivity tips you didnt know
-      </h1>
-      <p
-        className="x-subtitle c-x subtitle"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus lectus nisl, ac maximus ex convallis sed. Donec quis eros vehicula, hendrerit enim sit amet, varius libero. Nullam vel nulla a ipsum cursus molestie. Phasellus ut sodales justo. Pellentesque maximus nulla in nibh condimentum, et eleifend turpis molestie.
-      </p>
-    </div>
-    <p
-      className="x-metadata c-x v2 mt-v"
-    >
-      Published on 
-      July 1st, 2021
-      .
-    </p>
-    <p
-      className="x-metadata c-x v1 mt-v"
-    >
-      Melissa Lee
-    </p>
-  </div>
-  <div
-    className="article-illustration v4 md-v6 mb-v"
-  >
-    <img
-      alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus lectus nisl, ac maximus ex convallis sed. Donec quis eros vehicula, hendrerit enim sit amet, varius libero. Nullam vel nulla a ipsum cursus molestie. Phasellus ut sodales justo. Pellentesque maximus nulla in nibh condimentum, et eleifend turpis molestie."
-      src="https://images.pexels.com/photos/8647586/pexels-photo-8647586.jpeg?cs=srgb&dl=pexels-maxim-kovalev-8647586.jpg&fm=jpg"
-    />
-  </div>
-  <div
-    className="article-body p-u s0 md-s1"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-    <p>For new business owners, it is a challenge to avoid <strong>startup mistakes</strong> . But, identifying those mistakes at an early stage of business will give you an edge and a higher chance of success. While there isn't a fool-proof plan to reach small business startup success, there are several reasons why tech startups fail. According to the data provided by the <u>U.S. Bureau of Labor Statistics</u>, 20% of new businesses fail during the first two years of operation, and roughly half of all businesses don't survive past the fifth year.</p>
-
-<p>
-In business, prevention is always better than cure, and while it’s not always possible to prevent problems, being prepared usually pays off. But if a problem or mistake already occured, how do you ensure that it won’t happen again? Here are some common startup mistakes that you can prevent to improve your chances of success.
-</p>
-
-<p>
-There are a lot of reasons why a business startup fails. It is why you have to know the most significant causes so you can avoid them as early as possible. 
-</p>
-
-<h2 id=\\"1-doing-it-alone\\">1. Doing It All Alone</h2>
-<p>Don’t try to complete all of your business tasks on your own – learn to delegate. Keep the 80/20 principle in mind and try to focus on the stuff that you deem the most important. Doing it all alone is a <strong>startup mistake</strong>. In reality, it requires a lot more than a single individual to launch a business. There are highs and lows, not to mention tasks that few can undertake alone. <em>Delegate all the non-essential stuff to others. This will also help you keep your productivity up – a must for all startup entrepreneurs.</em></p>
-
-<h2 id=\\"2-doing-it-alone\\">2. No Concise Vision and Direction</h2>
-<p>Another big <strong>startup mistake</strong> is disregarding the value of setting a concise startup vision. Jay DesMarteau, head of small business banking at TD Bank, said an entrepreneur’s vision, whether in words, photos, graphs or other images—helps drive the business’ development and the owner’s decisions. <u>TD Bank</u> survey found that one in five small business owners used a vision board or other visual representations <strong>when starting their business</strong>; 76% of those business owners said that today their business is where they envisioned it would be when they started it. When the vision is clear, everyone has a good understanding of what needs to happen and will be more productive and motivated to excel.</p>
-    ",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`Storyshots c/BlogPostsList Base 1`] = `
-<div
-  className="base blog-posts-list u1"
-  style={
-    Object {
-      "background": "green",
-    }
-  }
->
-  <div
-    className="base article-card y-background size-lg"
-    updatedAt="2021-07-07T14:47:46.963221+00:00"
-  >
-    <div
-      className="header"
-    >
-      <span>
-        July 1st, 2021
-      </span>
-      <a
-        href="#/blog/c/productivity"
-        onClick={[Function]}
-      >
-        <button
-          className="base button base blog-category-button s-1 x-main1 modifierCompact"
-          type="button"
-        >
-          Productivity
-        </button>
-      </a>
-    </div>
-    <div
-      className="illustration"
-    >
-      <img
-        alt="In this article you will find some tips to increase your productivity"
-        src="https://images.pexels.com/photos/4297441/pexels-photo-4297441.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
-      />
-    </div>
-    <div
-      className="title"
-    >
-      <a
-        href="#/blog/some-slug1"
-        onClick={[Function]}
-      >
-        <p
-          className="h3"
-        >
-          Some title
-        </p>
-      </a>
-    </div>
-    <div
-      className="elementContent"
-    >
-      <p>
-        In this article you will find some tips to increase your productivity
-      </p>
-      <p
-        className="word-count"
-      >
-        Reading Time :
-         
-        3
-         
-        minutes.
-      </p>
-    </div>
-  </div>
-  <div
-    className="base article-card y-background size-undefined"
-    updatedAt="2021-07-07T14:47:46.963221+00:00"
-  >
-    <div
-      className="header"
-    >
-      <span>
-        July 2nd, 2021
-      </span>
-      <a
-        href="#/blog/c/business"
-        onClick={[Function]}
-      >
-        <button
-          className="base button base blog-category-button s-1 x-main1 modifierCompact"
-          type="button"
-        >
-          Business
-        </button>
-      </a>
-    </div>
-    <div
-      className="illustration"
-    >
-      <img
-        alt="In this article you will find some tips to increase your productivity"
-        src="https://images.pexels.com/photos/8557946/pexels-photo-8557946.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
-      />
-    </div>
-    <div
-      className="title"
-    >
-      <a
-        href="#/blog/some-slug2"
-        onClick={[Function]}
-      >
-        <p
-          className="h3"
-        >
-          Some Other Article
-        </p>
-      </a>
-    </div>
-    <div
-      className="elementContent"
-    >
-      <p>
-        In this article you will find some tips to increase your productivity
-      </p>
-      <p
-        className="word-count"
-      >
-        Reading Time :
-         
-        8
-         
-        minutes.
-      </p>
-    </div>
-  </div>
-  <div
-    className="base article-card y-secondary1 size-undefined"
-    updatedAt="2021-07-07T14:47:46.963221+00:00"
-  >
-    <div
-      className="header"
-    >
-      <span>
-        June 27th, 2021
-      </span>
-      <a
-        href="#/blog/c/productivity"
-        onClick={[Function]}
-      >
-        <button
-          className="base button base blog-category-button s-1 x-main1 modifierCompact"
-          type="button"
-        >
-          Productivity
-        </button>
-      </a>
-    </div>
-    <div
-      className="illustration"
-    >
-      <img
-        alt="In this article you will find some tips to increase your productivity"
-        src="https://images.pexels.com/photos/5039042/pexels-photo-5039042.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
-      />
-    </div>
-    <div
-      className="title"
-    >
-      <a
-        href="#/blog/some-slug3"
-        onClick={[Function]}
-      >
-        <p
-          className="h3"
-        >
-          Some title
-        </p>
-      </a>
-    </div>
-    <div
-      className="elementContent"
-    >
-      <p>
-        In this article you will find some tips to increase your productivity
-      </p>
-      <p
-        className="word-count"
-      >
-        Reading Time :
-         
-        5
-         
-        minutes.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots c/ContentSlides Base 1`] = `
 <div
   className="ui-light"
@@ -4264,1505 +3962,238 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
     >
       <div
         className="wrapper"
-      >
-        <div
-          className="content"
-        >
-          <div
-            className="base title"
-          >
-            <h1
-              className="small heading"
-            >
-              Welcome
-            </h1>
-            <p
-              className="subtitle"
-            >
-              Welcome to this site. We hope you will have an amazing experience here.
-            </p>
-          </div>
-          <div
-            className="navigator"
-          >
-            <span />
-            <button
-              className="base button x-main1 next x-main1"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="slide"
-    >
-      <div
-        className="wrapper"
-      >
-        <div
-          className="content"
-        >
-          <div
-            className="base title"
-          >
-            <h1
-              className="small heading"
-            >
-              Part 2
-            </h1>
-            <p
-              className="subtitle"
-            >
-              Welcome to this site. We hope you will have an amazing experience here.
-            </p>
-          </div>
-          <p>
-            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-             
-          </p>
-          <p>
-            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-             
-          </p>
-          <p>
-            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-             
-          </p>
-          <p>
-            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-             
-          </p>
-          <div
-            className="navigator"
-          >
-            <span />
-            <button
-              className="base button x-main1 next x-main1"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="slide"
-    >
-      <div
-        className="wrapper"
-      >
-        <div
-          className="content"
-        >
-          <div
-            className="base title"
-          >
-            <h1
-              className="small heading"
-            >
-              Part 3
-            </h1>
-            <p
-              className="subtitle"
-            >
-              Welcome to this site. We hope you will have an amazing experience here.
-            </p>
-          </div>
-          <div
-            className="navigator"
-          >
-            <span />
-            <button
-              className="base button x-main1 next x-main1"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="slide"
-    >
-      <div
-        className="wrapper"
-      >
-        <div
-          className="content"
-        >
-          <div
-            className="base title"
-          >
-            <h1
-              className="small heading"
-            >
-              Part 4
-            </h1>
-            <p
-              className="subtitle"
-            >
-              Welcome to this site. We hope you will have an amazing experience here.
-            </p>
-          </div>
-          <div
-            className="navigator"
-          >
-            <span />
-            <button
-              className="base button x-main1 next x-main1"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-</div>
-`;
-
-exports[`Storyshots c/Hero Base 1`] = `
-<div
-  className="base hero"
->
-  <div
-    className="title"
-  >
-    <div
-      className="base title"
-    >
-      <h1
-        className="heading"
-      >
-        Say no to busywork.
-        <br />
-        Get back to changing the world
-      </h1>
-      <p
-        className="subtitle"
-      >
-        Send us the repetitive tasks you don't have time for. Focus on the critical tasks only you can do.
-      </p>
-    </div>
-  </div>
-  <div
-    className="illustration"
-  >
-    <svg
-      className="base svg"
-      height="512"
-      preserveAspectRatio="xMinYMin meet"
-      version="1.1"
-      viewBox="0 0 512 512"
-      width="512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <use
-        className=""
-        href="/sprite.svg"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-    </svg>
-  </div>
-  <div
-    className="cta"
-  >
-    <button
-      className="base button x-primary x-main1"
-      type="button"
-    >
-      Free trial
-    </button>
-    <p
-      className="s-1 v1 mt-v"
-    >
-      No credit card required. Cancel anytime.
-    </p>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/SiteFooter Base 1`] = `
-<footer
-  className="base site-footer y-main1"
->
-  <div
-    className="base elementSection"
-    style={
-      Object {
-        "--span": 3,
-      }
-    }
-  >
-    <svg
-      className="base svg base logo x-secondary1"
-      height="4em"
-      preserveAspectRatio="xMinYMin meet"
-      version="1.1"
-      viewBox="0 0 688 250"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <use
-        className=""
-        href="/logo_parts.svg#logo__p"
-        id="logo__p"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-      <use
-        className=""
-        href="/logo_parts.svg#logo__areto"
-        id="logo__areto"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-      <use
-        className=""
-        href="/logo_parts.svg#logo__t"
-        id="logo__t"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-    </svg>
-  </div>
-  <div
-    className="base elementSection"
-    style={
-      Object {
-        "--span": 2,
-      }
-    }
-  >
-    <div
-      className="base title"
-    >
-      <p
-        className="h4 c-on-y heading"
-      >
-        Our services
-      </p>
-    </div>
-    Column 1
-  </div>
-  <div
-    className="base elementSection"
-    style={
-      Object {
-        "--span": 2,
-      }
-    }
-  >
-    <div
-      className="base title"
-    >
-      <p
-        className="h4 c-on-y heading"
-      >
-        Social networks
-      </p>
-    </div>
-    Column 2
-  </div>
-</footer>
-`;
-
-exports[`Storyshots c/SiteHeaderCTA Base 1`] = `
-<div
-  className="base header-c-t-a"
->
-  <div
-    className="uc s-1 md-s0"
-  >
-    <div
-      className="base title"
-    >
-      <h1
-        className="title uc s4 md-s6 heading"
-      >
-         Supercharge your business
-      </h1>
-    </div>
-    <br />
-    <span
-      className="typed-content s4 md-s6"
-    >
-      startup busywork
-    </span>
-  </div>
-  <p
-    className="description uc s0 md-s1 v2 mt-v"
-  >
-    Pareto helps you delegate time consuming business tasks so you can focus on the work that matters most. We combine the quality and care of real people with the efficiency of machine automation to help entrepreneurs get more done — fast.
-  </p>
-  <a
-    className="v3 mt-v"
-    href="https://survey.hellopareto.com/"
-    rel="noreferrer"
-  >
-    <button
-      className="base button s-1 md-s0 x-main1"
-      type="button"
-    >
-      Get started in 5 min
-    </button>
-  </a>
-  <span
-    className="no-credit-card u1 mt-u md-s0 s-1"
-  >
-    No credit card required
-  </span>
-</div>
-`;
-
-exports[`Storyshots c/SiteMission Base 1`] = `
-<div
-  className="base mission u2 x-main1"
->
-  <div
-    className="review-content s-1 md-s0"
-  >
-    <div
-      className="base animated-counter x-main1"
-    >
-      <div
-        className="count s3"
-      >
-        <span />
-        <span>
-          %
-        </span>
-      </div>
-      <p
-        className="info uc s-1 md-s0 v50 mt-v"
-      >
-        graduated from college
-      </p>
-    </div>
-    <div
-      className="base animated-counter x-main1"
-    >
-      <div
-        className="count s3"
-      >
-        <span />
-        <span>
-          yrs
-        </span>
-      </div>
-      <p
-        className="info uc s-1 md-s0 v50 mt-v"
-      >
-        average work experience
-      </p>
-    </div>
-    <div
-      className="base animated-counter x-main1"
-    >
-      <div
-        className="count s3"
-      >
-        <span />
-        <span>
-          hrs
-        </span>
-      </div>
-      <p
-        className="info uc s-1 md-s0 v50 mt-v"
-      >
-        of training to join Pareto
-      </p>
-    </div>
-    <div
-      className="base animated-counter x-main1"
-    >
-      <div
-        className="count s3"
-      >
-        <span />
-        <span>
-          %
-        </span>
-      </div>
-      <p
-        className="info uc s-1 md-s0 v50 mt-v"
-      >
-        are work-at-home moms
-      </p>
-    </div>
-    <div
-      className="base animated-counter x-main1"
-    >
-      <div
-        className="count s3"
-      >
-        <span />
-        <span>
-          %
-        </span>
-      </div>
-      <p
-        className="info uc s-1 md-s0 v50 mt-v"
-      >
-        own their own businesses
-      </p>
-    </div>
-  </div>
-  <div
-    className="team-info-content v2 mv-v"
-  >
-    <div
-      className="base team-info u1"
-    >
-      <p
-        className="description s-1 md-s0"
-      >
-        Working at Pareto allows me to learn something new. The team gives everyone a strong support system and never leaves anyone behind, especially when tasks get difficult.
-      </p>
-      <div
-        className="content"
-      >
-        <img
-          alt="Mary Joy Montenegro, Associate at Pareto"
-          className="img mr-u"
-          src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Mary%20Joy-Montenegro.jpg"
-        />
-        <div
-          className="team-member"
-        >
-          <span
-            className="name s-1"
-          >
-            Mary Joy Montenegro
-          </span>
-          <span
-            className="role s-2"
-          >
-            Associate
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      className="base team-info u1"
-    >
-      <p
-        className="description s-1 md-s0"
-      >
-        Working at Pareto constantly allows me to learn something new. The team gives everyone a strong support system and never leaves anyone behind, especially when tasks get difficult.
-      </p>
-      <div
-        className="content"
-      >
-        <img
-          alt="Lanie Col-long, Associate at Pareto"
-          className="img mr-u"
-          src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Mary%20Joy-Bataller.jpg"
-        />
-        <div
-          className="team-member"
-        >
-          <span
-            className="name s-1"
-          >
-            Lanie Col-long
-          </span>
-          <span
-            className="role s-2"
-          >
-            Associate
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      className="base team-info u1"
-    >
-      <p
-        className="description s-1 md-s0"
-      >
-        Every task that's assigned to me excites me! Especially those that are my firsts.
-      </p>
-      <div
-        className="content"
-      >
-        <img
-          alt="Mary Joy Bataller, Partner at Pareto"
-          className="img mr-u"
-          src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png"
-        />
-        <div
-          className="team-member"
-        >
-          <span
-            className="name s-1"
-          >
-            Mary Joy Bataller
-          </span>
-          <span
-            className="role s-2"
-          >
-            Partner
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      className="base team-info u1"
-    >
-      <p
-        className="description s-1 md-s0"
-      >
-        Being able to test my limits, explore unique tasks, and see myself grow personally and professionally has helped me become someone I never imagined I could be!
-      </p>
-      <div
-        className="content"
-      >
-        <img
-          alt="Joyce Cordero, Partner at Pareto"
-          className="img mr-u"
-          src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Marie%20Joyce-Cordero.png"
-        />
-        <div
-          className="team-member"
-        >
-          <span
-            className="name s-1"
-          >
-            Joyce Cordero
-          </span>
-          <span
-            className="role s-2"
-          >
-            Partner
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/SiteNavigation Base 1`] = `
-<main
-  className="u1"
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
->
-  <nav
-    className="base site-navigation y-background b-y"
-  >
-    <div
-      className="hamburger"
-    >
-      <button
-        aria-controls="navigation"
-        aria-label="Menu"
-        className="base hamburger-button md-h lg-h x-main1 hamburger hamburger--squeeze"
-        onClick={[Function]}
-        type="button"
-      >
-        <span
-          className="hamburger-box"
-        >
-          <span
-            className="hamburger-inner"
-          />
-        </span>
-      </button>
-    </div>
-    <div
-      className="wrapper"
-    >
-      <div
-        className="title"
-      >
-        <svg
-          className="base svg base logo x-main1 xs-h sm-h"
-          height="2.5em"
-          preserveAspectRatio="xMinYMin meet"
-          version="1.1"
-          viewBox="0 0 688 250"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <use
-            className=""
-            href="/logo_parts.svg#logo__p"
-            id="logo__p"
-            style={
-              Object {
-                "style": undefined,
-              }
-            }
-          />
-          <use
-            className=""
-            href="/logo_parts.svg#logo__areto"
-            id="logo__areto"
-            style={
-              Object {
-                "style": undefined,
-              }
-            }
-          />
-          <use
-            className=""
-            href="/logo_parts.svg#logo__t"
-            id="logo__t"
-            style={
-              Object {
-                "style": undefined,
-              }
-            }
-          />
-        </svg>
-      </div>
-      <div
-        className="menu"
-      >
-        <ul
-          className="s3 md-s1"
-        >
-          <li
-            className=""
-          >
-            <a
-              href="#/"
-              onClick={[Function]}
-            >
-              Home
-            </a>
-          </li>
-          <li
-            className=""
-          >
-            <a
-              href="#/pricing"
-              onClick={[Function]}
-            >
-              Pricing
-            </a>
-          </li>
-          <li
-            className=""
-          >
-            <a
-              href="#/team"
-              onClick={[Function]}
-            >
-              Team
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div
-        className="cta"
-      >
-        <button
-          className="base button x-main1 s1 md-s-1 x-main1"
-          type="button"
-        >
-          Create account
-        </button>
-      </div>
-    </div>
-  </nav>
-  <p
-    style={
-      Object {
-        "width": "200px",
-      }
-    }
-  >
-    orem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat risus eget metus hendrerit, a hendrerit mi sodales. Sed ullamcorper blandit auctor. Pellentesque et pulvinar tortor, at auctor augue. Vestibulum lacus turpis, porta eu aliquam vitae, sollicitudin eget mauris. Donec mollis nisl tellus, et maximus quam porttitor ac. Proin mollis consequat purus non iaculis. Phasellus hendrerit et ligula id semper. Ut vehicula faucibus nisl, ac mollis nulla cursus et. Aliquam rhoncus ipsum ac diam vehicula, id eleifend mauris dictum. Mauris maximus massa id dolor feugiat, eu viverra erat finibus. Proin vel congue odio. Fusce varius augue sit amet felis convallis, at euismod felis rhoncus. Aliquam consectetur iaculis porta. Etiam vel leo libero. Praesent et metus quis orci pellentesque finibus id hendrerit dui. Duis et ipsum tristique, lacinia justo ac, iaculis erat. Nunc mattis urna ut ligula convallis, sed blandit tellus blandit. Suspendisse urna arcu, luctus ac urna eu, mollis pharetra diam. Duis facilisis, elit in iaculis bibendum, leo lectus ullamcorper massa, sit amet elementum erat massa id lacus. Mauris ut quam vestibulum, pellentesque dui sit amet, volutpat ipsum. Cras pellentesque risus sed leo efficitur, id rhoncus enim varius.
-  </p>
-</main>
-`;
-
-exports[`Storyshots c/SiteOnboardingStep Base 1`] = `
-<div
-  className="base onboarding-step y-secondary1 u2"
->
-  <div
-    className="y-background b-y content s0 md-s1 v1"
-  >
-    <svg
-      className="base svg m-v"
-      height="10em"
-      preserveAspectRatio="xMinYMin meet"
-      version="1.1"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <use
-        className=""
-        href="/illustrations.sprite.svg#handshake"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-    </svg>
-    <span
-      className="index uc mb-v"
-    >
-      Step 1
-    </span>
-    <span
-      className="title uc mb-v"
-    >
-      <strong>
-        Meet your Pareto Partner
-      </strong>
-    </span>
-    <p
-      className="description uc"
-    >
-      Hop on a free coaching call to learn how to effectively delegate to Pareto and identify tasks to hand-off.
-    </p>
-  </div>
-  <div
-    className="y-background b-y content s0 md-s1 v1"
-  >
-    <svg
-      className="base svg m-v"
-      height="10em"
-      preserveAspectRatio="xMinYMin meet"
-      version="1.1"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <use
-        className=""
-        href="/illustrations.sprite.svg#rocket"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-    </svg>
-    <span
-      className="index uc mb-v"
-    >
-      Step 2
-    </span>
-    <span
-      className="title uc mb-v"
-    >
-      <strong>
-        Launch projects in minutes
-      </strong>
-    </span>
-    <p
-      className="description uc"
-    >
-      Email or Slack your Pareto Partner simple instructions to quickly hand-off repetitive business processes.
-    </p>
-  </div>
-  <div
-    className="y-background b-y content s0 md-s1 v1"
-  >
-    <svg
-      className="base svg m-v"
-      height="10em"
-      preserveAspectRatio="xMinYMin meet"
-      version="1.1"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <use
-        className=""
-        href="/illustrations.sprite.svg#graph"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-    </svg>
-    <span
-      className="index uc mb-v"
-    >
-      Step 3
-    </span>
-    <span
-      className="title uc mb-v"
-    >
-      <strong>
-        Focus on strategic work
-      </strong>
-    </span>
-    <p
-      className="description uc"
-    >
-      Your Partner recruits trained experts to execute your tasks, manages progress, and shares insightful updates.
-    </p>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/SitePricing Base 1`] = `
-<div
-  className="y-main1 b-y"
->
-  <div
-    className="base pricing y-main1 u2"
-  >
-    <div
-      className="content s-1 md-s0"
-    >
-      <div
-        className="info-content md-u2 u1 p-u"
-      >
-        <div
-          className="info md-v2 v1"
-        >
-          <span
-            className="plan-name uc s1 mb-v"
-          >
-            Pareto's Time
-          </span>
-          <span
-            className="plan-price uc s5 mb-v"
-          >
-            $20/hr
-          </span>
-          <ul>
-            <li
-              className="mb-v"
-            >
-              🎁 Outsource 100s of tasks
-            </li>
-            <li
-              className="mb-v"
-            >
-              🙋🏻‍♀️ Trusted, on-demand support
-            </li>
-            <li
-              className="mb-v"
-            >
-              💸 Pay as you go, no minimums
-            </li>
-            <li
-              className="mb-v"
-            >
-              📈 Scale with volume discounts
-            </li>
-          </ul>
-        </div>
-        <div
-          className="cta"
-        >
-          <a
-            rel="noreferrer"
-          >
-            <button
-              className="base button x-main1"
-              type="button"
-            >
-              Get started in 5 min
-            </button>
-          </a>
-        </div>
-      </div>
-      <div
-        className="info-content md-u2 u1 p-u"
-      >
-        <div
-          className="info md-v2 v1"
-        >
-          <span
-            className="plan-name uc s1 mb-v"
-          >
-            Your Time
-          </span>
-          <span
-            className="plan-price uc s5 mb-v"
-          >
-            Priceless
-          </span>
-          <ul>
-            <li
-              className="mb-v"
-            >
-              🌟 Focus on the work that matters most
-            </li>
-            <li
-              className="mb-v"
-            >
-              💫 Skip the hassle of vetting and hiring
-            </li>
-            <li
-              className="mb-v"
-            >
-              ⚡️ 10x productivity with smart delegation
-            </li>
-            <li
-              className="mb-v"
-            >
-              💃🏻 Support women-owned & operated teams
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/SiteServices Base 1`] = `
-<div
-  className="y-main1 b-y"
->
-  <div
-    className="base services u2 v1"
-  >
-    <div
-      className="btn-content v1 s-1 md-s0"
-    >
-      <button
-        className="s1 active-service-btn"
-        onClick={[Function]}
-        type="button"
-      >
-        sales
-      </button>
-      <button
-        className="s1 false"
-        onClick={[Function]}
-        type="button"
-      >
-        product
-      </button>
-      <button
-        className="s1 false"
-        onClick={[Function]}
-        type="button"
-      >
-        hiring
-      </button>
-      <button
-        className="s1 false"
-        onClick={[Function]}
-        type="button"
-      >
-        admin
-      </button>
-    </div>
-    <div
-      className="tasks-and-content s-1 md-s0"
-    >
-      <div
-        className="tasks"
-      >
-        <button
-          className="v1 mb-v b-dark-y c-on-y"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="v50 m-v"
-          >
-            ✨
-          </span>
-          <p
-            className="ul"
-          >
-            Generate sales leads
-          </p>
-        </button>
-        <button
-          className="v1 mb-v b-on-y"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="v50 m-v"
-          >
-            💡
-          </span>
-          <p
-            className="ul"
-          >
-            Enrich customer data
-          </p>
-        </button>
-        <button
-          className="v1 mb-v b-on-y"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="v50 m-v"
-          >
-            🎤
-          </span>
-          <p
-            className="ul"
-          >
-            Engage social media
-          </p>
-        </button>
-        <button
-          className="v1 mb-v b-on-y"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="v50 m-v"
-          >
-            💬
-          </span>
-          <p
-            className="ul"
-          >
-            Prospect on LinkedIn
-          </p>
-        </button>
-      </div>
-      <div
-        className="task-email b-on-y u2 p-u"
-      >
-        <div
-          className="task-email-header"
-        >
-          <span>
-            To
-          </span>
-          <span
-            className="ml-u"
-          >
-            camille@hellopareto.com
-          </span>
-        </div>
-        <span
-          className="v1 mv-v"
-        >
-          Fintech founder lead generation
-        </span>
-        <p
-          className="email-content v25 pb-v"
-        >
-          Hi Camille,
-          <br />
-          <br />
-          I need a list of all fintech founders featured in Forbes, Business Insider, CB Insights, and AngelList newsletters. Please send me a spreadsheet containing their name, title, company website, and email address within the week.
-          <br />
-          <br />
-          Warmly,
-          <br />
-          Phoebe
-        </p>
-        <div
-          className="u1 task-email-footer"
-        >
-          <div
-            className="task-footer-text"
-          >
-            <span
-              className="mr-u"
-            >
-              Send
-            </span>
-            <span
-              className="mr-u"
-            >
-              Send later
-            </span>
-            <span
-              className="mr-u"
-            >
-              Remind me
-            </span>
-          </div>
-          <div
-            className="task-footer-icons"
-          >
-            <img
-              alt="attach"
-              className="ml-u"
-              src="/email-attach.svg"
-            />
-            <img
-              alt="delete"
-              className="ml-u"
-              src="/email-delete.svg"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/TeamGallery Base 1`] = `
-<div
-  className="base team-gallery"
->
-  <div
-    className="title"
-  >
-    Leadership
-  </div>
-  <div
-    className="content"
-  >
-    <div
-      className="base person-card"
-    >
-      <header>
-        <img
-          alt=""
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
-        />
-      </header>
-      <main>
-        <p
-          className="name"
-        >
-          <strong>
-            Phoebe Yao
-          </strong>
-        </p>
-        <p
-          className="position"
-        >
-          CEO & Founder
-        </p>
-      </main>
-    </div>
-    <div
-      className="base person-card"
-    >
-      <header>
-        <img
-          alt=""
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
-        />
-      </header>
-      <main>
-        <p
-          className="name"
-        >
-          <strong>
-            Dulce May Tigol
-          </strong>
-        </p>
-        <p
-          className="position"
-        >
-          Accounting
-        </p>
-      </main>
-    </div>
-    <div
-      className="base person-card"
-    >
-      <header>
-        <img
-          alt=""
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
-        />
-      </header>
-      <main>
-        <p
-          className="name"
-        >
-          <strong>
-            Ellen Free
-          </strong>
-        </p>
-        <p
-          className="position"
-        >
-          Growth
-        </p>
-      </main>
-    </div>
-    <div
-      className="base person-card"
-    >
-      <header>
-        <img
-          alt=""
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
-        />
-      </header>
-      <main>
-        <p
-          className="name"
-        >
-          <strong>
-            Collins Mbulakyalo
-          </strong>
-        </p>
-        <p
-          className="position"
-        >
-          Software
-        </p>
-      </main>
-    </div>
-    <div
-      className="base person-card"
-    >
-      <header>
-        <img
-          alt=""
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
-        />
-      </header>
-      <main>
-        <p
-          className="name"
-        >
-          <strong>
-            Kaylin Hu
-          </strong>
-        </p>
-        <p
-          className="position"
-        >
-          Operations
-        </p>
-      </main>
-    </div>
-    <div
-      className="base person-card"
-    >
-      <header>
-        <img
-          alt=""
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
-        />
-      </header>
-      <main>
-        <p
-          className="name"
-        >
-          <strong>
-            Diza Hendrawan
-          </strong>
-        </p>
-        <p
-          className="position"
-        >
-          Marketing
-        </p>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/Testimonials Base 1`] = `
-<div
-  className="base testimonials u3 x-main1"
->
-  <div
-    className="swiper-container"
-  >
-    <div
-      className="swiper-button-prev"
-    />
-    <div
-      className="swiper-button-next"
-    />
-    <div
-      className="swiper-pagination"
-    />
-    <div
-      className="swiper-wrapper"
-    >
-      <div
-        className="swiper-slide swiper-slide-duplicate"
-        data-swiper-slide-index={1}
-      >
-        <div
-          className="slide s-1 md-s0 u4 md-u3 md-v3 v1 pv-u ph-v"
-        >
-          <span
-            className="openning-quote"
-          >
-            “
-          </span>
-          <img
-            alt=""
-            className="img"
-            src="https://pareto-v1.s3-us-west-2.amazonaws.com/testimonials/user-headshots/avni-levy-headshot.png"
-          />
-          <span
-            className="name v50 mt-v"
-          >
-            Avni Levy
-          </span>
-          <span
-            className="company v50 mb-v s-1"
-          >
-            CEO at Avni Creates
-          </span>
-          <p
-            className="uc s1 testimonial-content"
+      >
+        <div
+          className="content"
+        >
+          <div
+            className="base title"
           >
-            Pareto is like an extension of our team. Love how fast and convenient it is to outsource important tasks and have the trust of the Pareto team to get it done at the highest quality.
-          </p>
-          <span
-            className="closing-quote"
+            <h1
+              className="small heading"
+            >
+              Welcome
+            </h1>
+            <p
+              className="subtitle"
+            >
+              Welcome to this site. We hope you will have an amazing experience here.
+            </p>
+          </div>
+          <div
+            className="navigator"
           >
-            ”
-          </span>
+            <span />
+            <button
+              className="base button x-main1 next x-main1"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Next
+            </button>
+          </div>
         </div>
       </div>
+    </div>
+    <div
+      className="slide"
+    >
       <div
-        className="swiper-slide"
-        data-swiper-slide-index={0}
+        className="wrapper"
       >
         <div
-          className="slide s-1 md-s0 u4 md-u3 md-v3 v1 pv-u ph-v"
+          className="content"
         >
-          <span
-            className="openning-quote"
-          >
-            “
-          </span>
-          <img
-            alt=""
-            className="img"
-            src="https://pareto-v1.s3-us-west-2.amazonaws.com/testimonials/user-headshots/david-head-headshot.png"
-          />
-          <span
-            className="name v50 mt-v"
-          >
-            David Head
-          </span>
-          <span
-            className="company v50 mb-v s-1"
-          >
-            CEO at Bridge
-          </span>
-          <p
-            className="uc s1 testimonial-content"
+          <div
+            className="base title"
           >
-            I’ve been impressed with the breadth of tasks Pareto can tackle. Everything from research, to organization, to helping plan social activities. Highly recommend!
+            <h1
+              className="small heading"
+            >
+              Part 2
+            </h1>
+            <p
+              className="subtitle"
+            >
+              Welcome to this site. We hope you will have an amazing experience here.
+            </p>
+          </div>
+          <p>
+            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
+             
           </p>
-          <span
-            className="closing-quote"
+          <p>
+            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
+             
+          </p>
+          <p>
+            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
+             
+          </p>
+          <p>
+            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
+             
+          </p>
+          <div
+            className="navigator"
           >
-            ”
-          </span>
+            <span />
+            <button
+              className="base button x-main1 next x-main1"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Next
+            </button>
+          </div>
         </div>
       </div>
+    </div>
+    <div
+      className="slide"
+    >
       <div
-        className="swiper-slide"
-        data-swiper-slide-index={1}
+        className="wrapper"
       >
         <div
-          className="slide s-1 md-s0 u4 md-u3 md-v3 v1 pv-u ph-v"
+          className="content"
         >
-          <span
-            className="openning-quote"
-          >
-            “
-          </span>
-          <img
-            alt=""
-            className="img"
-            src="https://pareto-v1.s3-us-west-2.amazonaws.com/testimonials/user-headshots/avni-levy-headshot.png"
-          />
-          <span
-            className="name v50 mt-v"
-          >
-            Avni Levy
-          </span>
-          <span
-            className="company v50 mb-v s-1"
-          >
-            CEO at Avni Creates
-          </span>
-          <p
-            className="uc s1 testimonial-content"
+          <div
+            className="base title"
           >
-            Pareto is like an extension of our team. Love how fast and convenient it is to outsource important tasks and have the trust of the Pareto team to get it done at the highest quality.
-          </p>
-          <span
-            className="closing-quote"
+            <h1
+              className="small heading"
+            >
+              Part 3
+            </h1>
+            <p
+              className="subtitle"
+            >
+              Welcome to this site. We hope you will have an amazing experience here.
+            </p>
+          </div>
+          <div
+            className="navigator"
           >
-            ”
-          </span>
+            <span />
+            <button
+              className="base button x-main1 next x-main1"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Next
+            </button>
+          </div>
         </div>
       </div>
+    </div>
+    <div
+      className="slide"
+    >
       <div
-        className="swiper-slide swiper-slide-duplicate"
-        data-swiper-slide-index={0}
+        className="wrapper"
       >
         <div
-          className="slide s-1 md-s0 u4 md-u3 md-v3 v1 pv-u ph-v"
+          className="content"
         >
-          <span
-            className="openning-quote"
-          >
-            “
-          </span>
-          <img
-            alt=""
-            className="img"
-            src="https://pareto-v1.s3-us-west-2.amazonaws.com/testimonials/user-headshots/david-head-headshot.png"
-          />
-          <span
-            className="name v50 mt-v"
-          >
-            David Head
-          </span>
-          <span
-            className="company v50 mb-v s-1"
-          >
-            CEO at Bridge
-          </span>
-          <p
-            className="uc s1 testimonial-content"
+          <div
+            className="base title"
           >
-            I’ve been impressed with the breadth of tasks Pareto can tackle. Everything from research, to organization, to helping plan social activities. Highly recommend!
-          </p>
-          <span
-            className="closing-quote"
+            <h1
+              className="small heading"
+            >
+              Part 4
+            </h1>
+            <p
+              className="subtitle"
+            >
+              Welcome to this site. We hope you will have an amazing experience here.
+            </p>
+          </div>
+          <div
+            className="navigator"
           >
-            ”
-          </span>
+            <span />
+            <button
+              className="base button x-main1 next x-main1"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Next
+            </button>
+          </div>
         </div>
       </div>
     </div>
+  </main>
+</div>
+`;
+
+exports[`Storyshots c/Hero Base 1`] = `
+<div
+  className="base hero"
+>
+  <div
+    className="title"
+  >
+    <div
+      className="base title"
+    >
+      <h1
+        className="heading"
+      >
+        Say no to busywork.
+        <br />
+        Get back to changing the world
+      </h1>
+      <p
+        className="subtitle"
+      >
+        Send us the repetitive tasks you don't have time for. Focus on the critical tasks only you can do.
+      </p>
+    </div>
+  </div>
+  <div
+    className="illustration"
+  >
+    <svg
+      className="base svg"
+      height="512"
+      preserveAspectRatio="xMinYMin meet"
+      version="1.1"
+      viewBox="0 0 512 512"
+      width="512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <use
+        className=""
+        href="/sprite.svg"
+        style={
+          Object {
+            "style": undefined,
+          }
+        }
+      />
+    </svg>
+  </div>
+  <div
+    className="cta"
+  >
+    <button
+      className="base button x-primary x-main1"
+      type="button"
+    >
+      Free trial
+    </button>
+    <p
+      className="s-1 v1 mt-v"
+    >
+      No credit card required. Cancel anytime.
+    </p>
   </div>
 </div>
 `;
@@ -7134,42 +5565,31 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
   >
     <label
       className="base label input-label"
-      htmlFor="companySize"
+      htmlFor="workType"
     >
-      Company size
+      Work Type
     </label>
     <select
       className="input v25 pv-v"
-      id="companySize"
-      name="companySize"
+      id="workType"
+      name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value=""
     >
       <option
-        value="1-10"
-      >
-        1-10
-      </option>
-      <option
-        value="11-50"
-      >
-        11-50
-      </option>
-      <option
-        value="51-200"
+        value="Work"
       >
-        51-200
+        Work
       </option>
       <option
-        value="201-1000"
+        value="Managing"
       >
-        201-1000
+        Managing
       </option>
       <option
-        value="1001-5000"
+        value="Training"
       >
-        1001-5000
+        Training
       </option>
     </select>
   </div>