@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

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

@@ -1,221 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-ellipse-height:50em;
-$default-diamond-height:40em;
-$default-circle-height:50em;
-$default-triangle-height:40em;
-$default-rectangle-height:50em;
-$default-shapes-opacity:.8;
-
-.#{bem.$base}.shapes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: var(--overflow);
-    justify-content: var(--vertical-align);
-    align-items: var(--horizontal-align);
-    height: 100%;
-    width: 100%;
-
-    .triangle {
-      background-image: linear-gradient(transparent, var(--dark-y));
-      clip-path: polygon(0 0, 50% 100%, 100% 0);
-      height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-triangle-height});
-    }
-
-    .half-ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-
-      .up {
-        background-image: radial-gradient(ellipse at center bottom, var(--y) 5%, transparent 65%);
-        clip-path: ellipse(35% 100% at 50% 0%);
-        height: 50%;
-      }
-
-      .down {
-        background-image: radial-gradient(ellipse at center top, var(--y) 5%, transparent 65%);
-        clip-path: ellipse(35% 100% at 50% 100%);
-        height: 50%;
-      }
-    }
-
-    .ellipse {
-      background-image: linear-gradient(var(--dark-y), var(--light-y));
-      clip-path: ellipse(50% 50% at 50% 50%);
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-    }
-
-    .diamonds {
-      height: var(--shape-height, #{$default-diamond-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      width: var(--shape-height, #{$default-diamond-height});
-
-      .top-right {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 0 0, 100% 0);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-
-      .bottom-left {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-        clip-path: polygon(0 100%, 0 0, 100% 100%);
-        height: 100%;
-        opacity: .95;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .bottom-right {
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 100% 0, 0 100%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-    }
-
-    .rectangles {
-      display: grid;
-      grid-template-rows: repeat(3, 1fr);
-      height: var(--shape-height, #{$default-rectangle-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-rectangle-height});
-
-      .top {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-
-      .center {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-      }
-
-      .bottom {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-    }
-
-    .half-ellipse {
-      background-image: radial-gradient(ellipse at center bottom, var(--y) 10%, transparent 65%);
-      clip-path: ellipse(60% 100% at 50% 0%);
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-    }
-
-    .circle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: circle(50% at 50% 50%);
-      height: var(--shape-height, #{$default-circle-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-circle-height});
-    }
-
-    .half-circle {
-      background: linear-gradient(var(--light-y) 30%, var(--dark-y) 100%);
-      clip-path: circle(50% at 50% 100%);
-      height: var(--shape-height, #{$default-circle-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
-    }
-
-    .ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      width: var(--shape-height, #{$default-ellipse-height});
-
-      .first {
-        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
-        clip-path: ellipse(50% 20% at 50% 60%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .second {
-        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
-        clip-path: ellipse(50% 20% at 50% 40%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-    }
-
-    .spiral {
-      height: var(--shape-height, #{$default-ellipse-height});
-      width: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      > * {
-        border-radius: 50%;
-        background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
-        position: absolute;
-        opacity: .5;
-      }
-
-       .circle-one {
-        transform: rotate(45deg);
-        height:calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
-      }
-
-       .circle-two {
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
-      }
-
-       .circle-three {
-        transform: rotate(-45deg);
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
-      }
-
-       .circle-four {
-        transform: rotate(-90deg);
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 1);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 1);
-      }
-    }
-    .rotated-ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-ellipse-height});
-      display: flex;
-
-      > *{
-        width: 100%;
-        height: 100%;
-      }
-
-      .ellipse-one {
-        background-image: radial-gradient(ellipse at bottom left, var(--y) 30%, transparent 65%);
-        transform: rotate(-15deg);
-        clip-path: ellipse(50% 35% at 50% 50%);
-      }
-
-      .ellipse-two {
-        background-image: radial-gradient(ellipse at top right, var(--y) 30%, transparent 65%);
-        transform: rotate(-15deg);
-        clip-path: ellipse(50% 35% at 50% 50%);
-      }
-    }
-}

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

@@ -1,102 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'team-info';
-/**
- * This is the component description.
- */
-
-var SiteTeamInfo = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    description,
-    img,
-    name,
-    role // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "description s-1 md-s0"
-  }, description), /*#__PURE__*/React.createElement("div", {
-    className: "content"
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "img mr-u",
-    src: img,
-    alt: "".concat(name, ", ").concat(role, " at Pareto")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "team-member"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "name s-1"
-  }, name), /*#__PURE__*/React.createElement("span", {
-    className: "role s-2"
-  }, role))));
-};
-
-SiteTeamInfo.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The react-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   *  The team description
-   */
-  description: _propTypes.default.string.isRequired,
-
-  /**
-   *  The team member image
-   */
-  img: _propTypes.default.string.isRequired,
-
-  /**
-   *  The team member name
-   */
-  name: _propTypes.default.string.isRequired,
-
-  /**
-   *  The team member role
-   */
-  role: _propTypes.default.string.isRequired
-};
-SiteTeamInfo.defaultProps = {// someProp:false
-};
-var _default = SiteTeamInfo;
-exports.default = _default;

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

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TeamInfo", {
-  enumerable: true,
-  get: function get() {
-    return _TeamInfo.default;
-  }
-});
-
-var _TeamInfo = _interopRequireDefault(require("./TeamInfo"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -1,58 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$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(--metadata);
-$default-name-color:var(--main1);
-$box-shadow:0 .45em 1em 0 var(--background1);
-
-.#{bem.$base}.team-info {
-  align-items: flex-start;
-  background: var(--light-y, var(--light-background1));
-  box-shadow: $box-shadow;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: $team-info-padding;
-  width: 100%;
-
-
-  .description {
-    color: $p-h4-color;
-  }
-
-  .content {
-    display: flex;
-    width: 100%;
-
-    .img {
-      border-radius: $img-border-radius;
-      height: $img-height-width;
-      object-fit: cover;
-      width: $img-height-width;
-    }
-
-    .team-member {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-
-      .name {
-        color: $default-name-color;
-      }
-
-      .role {
-        color: $role-color;
-        margin: 0;
-      }
-    }
-  }
-}
-
-

package/dist/cjs/b/Card/Card.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-var _common = require("./common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss"))); // Helper Definition
-
-var baseClassName = _bem.default.base;
-var componentClassName = 'card';
-
-var Card = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    children // ...otherProps
-
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, children);
-};
-
-Card.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   *  The children JSX
-   */
-  children: _propTypes.default.node
-};
-Card.defaultProps = {// someProp:false
-};
-Card.Group = _common.Group;
-var _default = Card;
-exports.default = _default;

package/dist/cjs/b/Card/common/Group/Group.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Component-level imports
-Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss"))); // Helper Definition
-
-var baseClassName = _bem.default.base;
-var componentClassName = 'card-group';
-
-var Group = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    children,
-    isGhost // ...otherProps
-
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, isGhost && _bem.default.modifierGhost].filter(e => e).join(' '),
-    style: style
-  }, children);
-};
-
-Group.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   *  The children JSX
-   */
-  children: _propTypes.default.node,
-
-  /**
-   * Whether the button has the ghost style
-   */
-  isGhost: _propTypes.default.bool
-};
-Group.defaultProps = {// someProp:false
-};
-var _default = Group;
-exports.default = _default;

package/dist/cjs/b/Card/common/Group/styles.scss

@@ -1,61 +0,0 @@
-/* @pareto-engineering/generator-front 0.2.4 */
-
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-@use "@pareto-engineering/bem" ;
-
-$separator-width:2px;
-$separator-color:var(--metadata);
-
-.#{bem.$base}.card-group {
-  //TODO temp
-  background: #dfdfdf;
-  padding: 1em;
-
-  @include mixins.media($from:$sm-md) {
-    display: grid;
-    grid-auto-flow: column;
-  }
-
-  &.#{bem.$modifier-ghost} {
-    //background: red;
-
-    .#{bem.$base}.card {
-      //background: yellow;
-      border: 0;
-      border-radius: 0;
-
-      + .#{bem.$base}.card {
-        //border-left: 2px solid red;
-        position: relative;
-
-        &::before {
-          background: $separator-color;
-          content: "";
-          display: block;
-          left: 0;
-          position: absolute;
-          top: 0;
-        }
-
-        @include mixins.media($to:$sm-md) {
-          &::before {
-            height: $separator-width;
-            transform: translateY(-50%);
-            width: 100%;
-          }
-        }
-
-        @include mixins.media($from:$sm-md) {
-          &::before {
-            height: 100%;
-            transform: translateX(-50%);
-            width: $separator-width;
-          }
-        }
-      }
-    }
-  }
-}
-
-

package/dist/cjs/b/Card/common/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Group", {
-  enumerable: true,
-  get: function get() {
-    return _Group.Group;
-  }
-});
-
-var _Group = require("./Group");

package/dist/cjs/b/Card/styles.scss

@@ -1,12 +0,0 @@
-/* @pareto-engineering/generator-front 0.2.4 */
-
-@use "@pareto-engineering/bem" ;
-$padding:.5em 1em;
-
-.#{bem.$base}.card {
-  border: var(--theme-border);
-  border-radius: var(--border-radius);
-  padding: $padding;
-}
-
-