@pareto-engineering/design-system 2.0.0-alpha.18 → 2.0.0-alpha.21

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

@@ -6,7 +6,7 @@
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
 $triangle-border-size: 15px;
@@ -147,15 +147,3 @@ $triangle-after-side:25px;
     }
   }
 }
-
-//@keyframes fadeIn {
-//  from {
-//    opacity: 0;
-//    transform: translate3d(0, 50%, 0);
-//  }
-//
-//  to {
-//    opacity: 1;
-//    transform: translate3d(0, 0, 0);
-//  }
-//}

package/dist/cjs/a/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "OvalIllustration", {
     return _OvalIllustration.OvalIllustration;
   }
 });
+Object.defineProperty(exports, "SnapScroller", {
+  enumerable: true,
+  get: function get() {
+    return _SnapScroller.SnapScroller;
+  }
+});
 Object.defineProperty(exports, "BackgroundGradient", {
   enumerable: true,
   get: function get() {
@@ -204,4 +210,6 @@ var _Shapes = require("./Shapes");
 
 var _OvalIllustration = require("./OvalIllustration");
 
+var _SnapScroller = require("./SnapScroller");
+
 var _BackgroundGradient = require("./BackgroundGradient");

package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -128,7 +128,7 @@ HorizontalMenu.propTypes = {
   hideBackIcon: _propTypes.default.bool
 };
 HorizontalMenu.defaultProps = {
-  logoColor: 'main2',
+  logoColor: 'paragraph',
   stepsBackwards: 1
 };
 var _default = HorizontalMenu;

package/dist/cjs/c/ContentSlides/styles.scss

@@ -14,7 +14,7 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background:var(--y);
+$default-content-background: var(--background1);
 $default-padding:var(--u);
 
 $mobile-content-margin:6em;
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
 
   //.#{$class-main-container} {
   main {
-    background: var(--dark-y);
     overflow: hidden;
     position: relative;
 
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
         .#{bem.$element-content} {
           background: $default-content-background;
 
-          border: $default-border;
+          border: var(--theme-border);
           border-radius: $default-border-radius;
           max-width: 600px;
           padding: $default-padding;
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
 
   .#{$class-horizontal-menu} {
     background: $default-content-background;
-    border-bottom: $default-border;
+    border-bottom: var(--theme-border);
     color: var(--heading);
+    z-index: 1;
 
     .#{bem.$element-content} {
       display: grid;

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

@@ -6,7 +6,7 @@
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
 $triangle-border-size: 15px;
@@ -147,15 +147,3 @@ $triangle-after-side:25px;
     }
   }
 }
-
-//@keyframes fadeIn {
-//  from {
-//    opacity: 0;
-//    transform: translate3d(0, 50%, 0);
-//  }
-//
-//  to {
-//    opacity: 1;
-//    transform: translate3d(0, 0, 0);
-//  }
-//}

package/dist/es/a/index.js

@@ -20,4 +20,5 @@ export { DotInfo } from "./DotInfo";
 export { Timestamp } from "./Timestamp";
 export { Shapes } from "./Shapes";
 export { OvalIllustration } from "./OvalIllustration";
+export { SnapScroller } from "./SnapScroller";
 export { BackgroundGradient } from "./BackgroundGradient";

package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -108,7 +108,7 @@ HorizontalMenu.propTypes = {
   hideBackIcon: PropTypes.bool
 };
 HorizontalMenu.defaultProps = {
-  logoColor: 'main2',
+  logoColor: 'paragraph',
   stepsBackwards: 1
 };
 export default HorizontalMenu;

package/dist/es/c/ContentSlides/styles.scss

@@ -14,7 +14,7 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background:var(--y);
+$default-content-background: var(--background1);
 $default-padding:var(--u);
 
 $mobile-content-margin:6em;
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
 
   //.#{$class-main-container} {
   main {
-    background: var(--dark-y);
     overflow: hidden;
     position: relative;
 
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
         .#{bem.$element-content} {
           background: $default-content-background;
 
-          border: $default-border;
+          border: var(--theme-border);
           border-radius: $default-border-radius;
           max-width: 600px;
           padding: $default-padding;
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
 
   .#{$class-horizontal-menu} {
     background: $default-content-background;
-    border-bottom: $default-border;
+    border-bottom: var(--theme-border);
     color: var(--heading);
+    z-index: 1;
 
     .#{bem.$element-content} {
       display: grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.21",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

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

@@ -1871,6 +1871,160 @@ exports[`Storyshots a/Shapes Triangle 1`] = `
 
 exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
 
+exports[`Storyshots a/SnapScroller Base 1`] = `
+<div
+  className="base snap-scroller u1 pv-u"
+  style={
+    Object {
+      "background": "var(--background4)",
+    }
+  }
+>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Some content here
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus. Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh non euismod condimentum. Aenean non neque sem.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus pretium feugiat lorem nec varius.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi. Pellentesque euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum, sodales facilisis nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
+<div
+  className="base snap-scroller u1 pv-u desktop-no-scroll"
+  style={
+    Object {
+      "background": "var(--background4)",
+    }
+  }
+>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Some content here
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus. Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh non euismod condimentum. Aenean non neque sem.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus pretium feugiat lorem nec varius.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi. Pellentesque euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum, sodales facilisis nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Spinner Base 1`] = `
 <div
   className="y-background1 b-y"
@@ -8413,7 +8567,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
   }
 >
   <div
-    className="base content-slides y-background1 u1 md-u2"
+    className="base content-slides y-background1 b-dark-y u1 md-u2"
   >
     <nav
       className="sidebar"
@@ -8562,7 +8716,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             Welcome
           </span>
           <svg
-            className="base svg base logo x-main2 xs-h sm-h"
+            className="base svg base logo x-paragraph xs-h sm-h"
             height="2em"
             preserveAspectRatio="xMinYMin meet"
             version="1.1"
@@ -8785,8 +8939,287 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
 
 exports[`Storyshots c/ContentSlides Simple 1`] = `
 <div
-  className="base content-slides y-background1 simple u1 md-u2"
+  className="base content-slides y-background1 b-dark-y simple u1 md-u2"
+>
+  <div
+    className="horizontal-menu"
+  >
+    <div
+      className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
+      data-length="50%"
+      style={
+        Object {
+          "--height": ".4em",
+          "--progress": 40,
+        }
+      }
+    />
+    <div
+      className="elementContent"
+    >
+      <div
+        className="left"
+      />
+      <div
+        className="title"
+      >
+        <span
+          className="md-h lg-h"
+        >
+          Welcome
+        </span>
+        <svg
+          className="base svg base logo x-paragraph xs-h sm-h"
+          height="2em"
+          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>
+  </div>
+   
+  <main>
+    <div
+      className="modifierActive slide"
+    >
+      <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-main2 next x-main1 modifierCompact"
+              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-main2 next x-main1 modifierCompact"
+              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-main2 next x-main1 modifierCompact"
+              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-main2 next x-main1 modifierCompact"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+`;
+
+exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
+<div
+  className="base content-slides y-background4 b-light-y simple u1 md-u2"
 >
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "flex-start",
+        "--overflow": "hidden",
+        "--shape-height": "65em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="spiral"
+    >
+      <div
+        className="circle-one"
+      />
+      <div
+        className="circle-two"
+      />
+      <div
+        className="circle-three"
+      />
+      <div
+        className="circle-four"
+      />
+    </div>
+  </div>
   <div
     className="horizontal-menu"
   >
@@ -8815,7 +9248,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           Welcome
         </span>
         <svg
-          className="base svg base logo x-main2 xs-h sm-h"
+          className="base svg base logo x-paragraph xs-h sm-h"
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"

package/src/stories/a/SnapScroller.stories.jsx

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { SnapScroller } from 'ui'
+
+export default {
+  title        :'a/SnapScroller',
+  component    :SnapScroller,
+  subcomponents:{
+    // Item:SnapScroller.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  // eslint-disable-next-line react/prop-types
+  const Card = ({ children }) => (
+    <div
+      className="card"
+      style={{
+        background:'var(--background1)', minWidth:'330px', height:'400px', padding:'var(--u)',
+      }}
+    >
+      { children }
+    </div>
+
+  )
+
+  return (
+    <SnapScroller style={{ background: 'var(--background4)' }} className="u1 pv-u">
+      <Card>
+        Some content here
+      </Card>
+      <Card>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus.
+        Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh
+        non euismod condimentum. Aenean non neque sem.
+      </Card>
+      <Card>
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Phasellus pretium feugiat lorem nec varius.
+      </Card>
+      <Card>
+        Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi.
+        Pellentesque euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum,
+        sodales facilisis nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+      </Card>
+      <Card>
+        Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+      </Card>
+    </SnapScroller>
+  )
+}
+
+export const NoScrollOnDesktop = () => {
+  // eslint-disable-next-line react/prop-types
+  const Card = ({ children }) => (
+    <div
+      className="card"
+      style={{
+        background:'var(--background1)', width:'330px', height:'400px', padding:'var(--u)',
+      }}
+    >
+      { children }
+    </div>
+
+  )
+
+  return (
+    <SnapScroller style={{ background: 'var(--background4)' }} className="u1 pv-u" noScrollOnDesktop>
+      <Card>
+        Some content here
+      </Card>
+      <Card>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus.
+        Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh
+        non euismod condimentum. Aenean non neque sem.
+      </Card>
+      <Card>
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Phasellus pretium feugiat lorem nec varius.
+      </Card>
+      <Card>
+        Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi. Pellentesque
+        euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum, sodales facilisis
+        nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+      </Card>
+      <Card>
+        Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+      </Card>
+    </SnapScroller>
+  )
+}

package/src/stories/c/ContentSlides.stories.jsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import {
   ContentSlides,
   SiteContextProvider,
+  Shapes,
   useContentSlides,
   Title,
   Logo,
@@ -74,7 +75,7 @@ export const Base = () => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background1" steps={steps}>
+        <ContentSlides className="y-background1 b-dark-y" steps={steps}>
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
@@ -341,7 +342,158 @@ export const Simple = () => {
     )
   }
   return (
-    <ContentSlides className="y-background1" steps={steps} simple>
+    <ContentSlides className="y-background1 b-dark-y" steps={steps} simple>
+      <Main />
+    </ContentSlides>
+  )
+}
+
+export const WithBackgroundShape = () => {
+  const steps = [
+    {
+      id      :'welcome',
+      title   :'Welcome',
+      progress:40,
+      location:'welcome',
+    },
+    {
+      id      :'plan',
+      title   :'Choose your plan',
+      progress:60,
+      location:'select-plan',
+    },
+    {
+      id      :'details',
+      title   :'Personal details',
+      progress:70,
+      location:'personal-details',
+    },
+    {
+      id      :'payment',
+      title   :'Payment',
+      progress:90,
+      location:'payment',
+    },
+  ]
+
+  const Main = () => {
+    const { isLastStep } = useContentSlides()
+
+    return (
+      <>
+        <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
+        {' '}
+        <main>
+          <ContentSlides.Slide
+            index={0}
+          >
+            <Title
+              heading="Welcome"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide
+      >
+          <ContentSlides.Slide
+            index={1}
+          >
+            <Title
+              heading="Part 2"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <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>
+
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide>
+          <ContentSlides.Slide
+            index={2}
+          >
+            <Title
+              heading="Part 3"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide>
+          <ContentSlides.Slide
+            index={3}
+          >
+            <Title
+              heading="Part 4"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide>
+        </main>
+      </>
+    )
+  }
+  return (
+    <ContentSlides className="y-background4 b-light-y" steps={steps} simple>
+      <Shapes
+        height="65em"
+        verticalAlign="center"
+        horizontalAlign="flex-start"
+        shape="spiral"
+      />
       <Main />
     </ContentSlides>
   )

package/src/ui/a/Conversation/styles.scss

@@ -6,7 +6,7 @@
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
 $triangle-border-size: 15px;
@@ -147,15 +147,3 @@ $triangle-after-side:25px;
     }
   }
 }
-
-//@keyframes fadeIn {
-//  from {
-//    opacity: 0;
-//    transform: translate3d(0, 50%, 0);
-//  }
-//
-//  to {
-//    opacity: 1;
-//    transform: translate3d(0, 0, 0);
-//  }
-//}

package/src/ui/a/SnapScroller/SnapScroller.jsx

@@ -0,0 +1,83 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'snap-scroller'
+
+/**
+ * This is the component description.
+ */
+const SnapScroller = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  noScrollOnDesktop,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        noScrollOnDesktop && 'desktop-no-scroll',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+SnapScroller.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * Whether to snap scroll on desktop (false will enable a flexbox)
+   */
+  noScrollOnDesktop:PropTypes.bool,
+}
+
+SnapScroller.defaultProps = {
+  noScrollOnDesktop:false,
+}
+
+export default SnapScroller

package/src/ui/a/SnapScroller/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as SnapScroller } from './SnapScroller'

package/src/ui/a/SnapScroller/styles.scss

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-spacing:var(--spacing, var(--u));
+
+.#{bem.$base}.snap-scroller {
+  display: flex;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  overflow-x: auto;
+  scroll-padding: calc(#{$default-spacing} *2);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+
+  > * {
+    &:first-child {
+      margin-left: $default-spacing;
+    }
+    display: inline-block;
+    margin-right: $default-spacing;
+    scroll-snap-align: start;
+  }
+
+
+  @include mixins.media($from:$sm-md) {
+    &.desktop-no-scroll {
+      overflow: auto;
+      -ms-overflow-style: unset; /* for Internet Explorer, Edge */
+      scroll-snap-type: none;
+      scrollbar-width: unset;
+    }
+  }
+}
+
+

package/src/ui/a/index.js

@@ -25,4 +25,5 @@ export { DotInfo } from './DotInfo'
 export { Timestamp } from './Timestamp'
 export { Shapes } from './Shapes'
 export { OvalIllustration } from './OvalIllustration'
+export { SnapScroller } from './SnapScroller'
 export { BackgroundGradient } from './BackgroundGradient'

package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx

@@ -131,7 +131,7 @@ HorizontalMenu.propTypes = {
 }
 
 HorizontalMenu.defaultProps = {
-  logoColor     :'main2',
+  logoColor     :'paragraph',
   stepsBackwards:1,
 }
 

package/src/ui/c/ContentSlides/styles.scss

@@ -14,7 +14,7 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background:var(--y);
+$default-content-background: var(--background1);
 $default-padding:var(--u);
 
 $mobile-content-margin:6em;
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
 
   //.#{$class-main-container} {
   main {
-    background: var(--dark-y);
     overflow: hidden;
     position: relative;
 
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
         .#{bem.$element-content} {
           background: $default-content-background;
 
-          border: $default-border;
+          border: var(--theme-border);
           border-radius: $default-border-radius;
           max-width: 600px;
           padding: $default-padding;
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
 
   .#{$class-horizontal-menu} {
     background: $default-content-background;
-    border-bottom: $default-border;
+    border-bottom: var(--theme-border);
     color: var(--heading);
+    z-index: 1;
 
     .#{bem.$element-content} {
       display: grid;