@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

package/dist/cjs/a/Label/Label.js

@@ -0,0 +1,74 @@
+"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 = 'label';
+
+/**
+ * This is the component description.
+ */
+var Label = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    children,
+    color,
+    isCompact,
+    isGhost
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isCompact && _bem.default.modifierCompact, isGhost && _bem.default.modifierGhost].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
+Label.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),
+  /**
+   * Whether the button has the ghost style
+   */
+  isGhost: _propTypes.default.bool,
+  /**
+   * Whether the button is compact
+   */
+  isCompact: _propTypes.default.bool,
+  /**
+   *  The default font color to display for the label
+   */
+  color: _propTypes.default.string,
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node
+};
+Label.defaultProps = {
+  color: 'main1'
+};
+var _default = Label;
+exports.default = _default;

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

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

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

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding-bottom: .4em;
+$default-padding-side: .7em;
+$default-padding-top: .5em;
+
+$compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
+$default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
+
+$default-color: primary;
+$default-image-size: 2em;
+$default-font-size: calc(1em * var(--s-1));
+
+.#{bem.$base}.label {
+    align-items: center;
+    background: var(--x, var(--#{$default-color}));
+    border-radius: 3em;
+    color: var(--on-x, var(--on-#{$default-color}));
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    &.#{bem.$modifier-compact} {
+        padding: $compact-padding;
+    }
+
+    &.#{bem.$modifier-ghost} {
+        background: transparent;
+        border: 1px solid var(--x, var(--#{$default-color}));
+        color: var(--x, var(--#{$default-color}));
+    }
+}

package/dist/cjs/a/LoadingCircle/LoadingCircle.js

@@ -0,0 +1,107 @@
+"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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = 'loading-circle';
+
+/**
+ * This is the component description.
+ */
+var LoadingCircle = _ref => {
+  var {
+    id,
+    className: userClassName,
+    heightWidth,
+    strokeLinecap,
+    strokeWidth,
+    animationDuration,
+    style
+    // ...otherProps
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: _objectSpread({
+      '--height-width': heightWidth,
+      '--stroke-width': strokeWidth
+    }, style)
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "25 25 50 50",
+    className: "svg-circle",
+    id: id,
+    x: "0px",
+    y: "0px",
+    xmlSpace: "preserve",
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: "xMinYMin meet",
+    style: {
+      '--animation-duration': "".concat(animationDuration, "s")
+    }
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "path",
+    cx: "50",
+    cy: "50",
+    r: "20",
+    fill: "none",
+    strokeLinecap: strokeLinecap,
+    strokeMiterlimit: "10"
+  })));
+};
+LoadingCircle.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The height width of the loading div/circle
+   */
+  heightWidth: _propTypes.default.string,
+  /**
+   * The SVG property stroke-linecap
+   */
+  strokeLinecap: _propTypes.default.oneOf(['round', 'square', 'butt']),
+  /**
+   * The SVG property stroke-width
+   */
+  strokeWidth: _propTypes.default.string,
+  /**
+   * The duration of the animation in seconds
+   */
+  animationDuration: _propTypes.default.number,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string)
+};
+LoadingCircle.defaultProps = {
+  strokeLinecap: 'round',
+  animationDuration: 2,
+  heightWidth: '1.15em'
+};
+var _default = LoadingCircle;
+exports.default = _default;

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

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

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

@@ -0,0 +1,49 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+
+$animation-duration:var(--animation-duration, 2s);
+$stroke-color:var(--x);
+
+.#{bem.$base}.loading-circle{
+
+    height: var(--height-width);
+    width: var(--height-width);
+
+    @keyframes rotate {
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes dash-anim {
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
+    }
+
+    svg.svg-circle {
+        transform-origin: center center;
+        margin: auto;
+        animation: rotate $animation-duration linear infinite;
+
+        circle {
+            animation: dash-anim $animation-duration ease-in-out infinite;
+            stroke: $stroke-color;
+            stroke-width: var(--stroke-width, 8);
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+    }
+}

package/dist/cjs/a/OvalIllustration/OvalIllustration.js

@@ -0,0 +1,115 @@
+"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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = 'oval-illustration';
+
+/**
+ * This is the component description.
+ */
+var OvalIllustration = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    layout,
+    src,
+    alt,
+    ovalBackground,
+    backgroundColor,
+    mobileSize,
+    tabletSize,
+    desktopSize
+    // ...otherProps
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, layout].filter(e => e).join(' '),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      '--mobile-size': mobileSize,
+      '--tablet-size': tabletSize,
+      '--desktop-size': desktopSize
+    })
+    // {...otherProps}
+  }, ovalBackground && /*#__PURE__*/React.createElement("div", {
+    className: "oval-background y-".concat(backgroundColor)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "illustration"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt
+  })));
+};
+OvalIllustration.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),
+  /**
+   * side definition of the illustration
+   */
+  layout: _propTypes.default.oneOf(['left', 'right']),
+  /**
+   * image url
+   */
+  src: _propTypes.default.string,
+  /**
+   * alt tag for the image
+   */
+  alt: _propTypes.default.string,
+  /**
+   * whether to have a oval shape as background
+   */
+  ovalBackground: _propTypes.default.bool,
+  /**
+   * background color of the oval behind the image
+   */
+  backgroundColor: _propTypes.default.string,
+  /**
+   * size of the oval for mobile screen
+   */
+  mobileSize: _propTypes.default.string,
+  /**
+   * size of the oval for tablet screen
+   */
+  tabletSize: _propTypes.default.string,
+  /**
+   * size of the oval for desktop screen
+   */
+  desktopSize: _propTypes.default.string
+};
+OvalIllustration.defaultProps = {
+  layout: 'left',
+  mobileSize: '20em',
+  tabletSize: '35em',
+  desktopSize: '45em'
+};
+var _default = OvalIllustration;
+exports.default = _default;

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

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

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

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-clockwise-degree:60deg;
+$default-counter-clockwise-degree:-60deg;
+$default-ellipse-size:30% 43% at 50% 50%;
+
+.#{bem.$base}.oval-illustration {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+
+  &.left {
+    .oval-background {
+      transform: rotate($default-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-counter-clockwise-degree);
+
+      > img {
+        transform: rotate($default-clockwise-degree);
+      }
+    }
+  }
+
+  &.right {
+    .oval-background {
+      transform: rotate($default-counter-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-clockwise-degree);
+
+      > img {
+        transform: rotate($default-counter-clockwise-degree);
+      }
+    }
+  }
+
+  .oval-background {
+    background: var(--y);
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+    position: absolute;
+    z-index: 0;
+  }
+
+  .illustration {
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+
+    > img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  // mobile style
+  @include mixins.media($to:$sm-md) {
+    .oval-background {
+      height: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+
+    .illustration {
+      height: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm, $to:$sm-md) {
+    .oval-background {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+
+    .illustration {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    .oval-background {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+
+    .illustration {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+  }
+}

package/dist/cjs/a/People/People.js

@@ -0,0 +1,80 @@
+"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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+var baseClassName = _bem.default.base;
+var componentClassName = 'people';
+
+/**
+ * This is the component description.
+ */
+var People = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    imageSize,
+    children,
+    columnWidth
+    // ...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: _objectSpread(_objectSpread({}, style), {}, {
+      '--image-size': imageSize,
+      '--column-width': columnWidth
+    })
+    // {...otherProps}
+  }, children);
+};
+People.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,
+  /**
+   * The height and width of all the person's image
+   */
+  imageSize: _propTypes.default.string,
+  /**
+   * The width of the a person's column
+   */
+  columnWidth: _propTypes.default.string
+};
+People.defaultProps = {
+  imageSize: '3em',
+  columnWidth: '12em'
+};
+People.Person = _common.Person;
+var _default = People;
+exports.default = _default;