@blerp/design 1.3.17 → 1.4.1

package/dist/cjs/EllipsisLoader.js

@@ -2,26 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styled = require('styled-components');
+var index = require('./index.js');
 var colors = require('./colors.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-const motion1 = props => styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
-
-const motion2 = props => styled.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: translate(0, 0);\n  }\n  100% {\n    transform: translate(19px, 0);\n  }\n"])));
-
-const motion3 = props => styled.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
-
-const EllipsisSpinner = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    div {\n        position: absolute;\n        width: 11px;\n        height: 11px;\n        border-radius: 50%;\n        background: ", ";\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    }\n    div:nth-child(1) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(2) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(3) {\n        left: 26px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(4) {\n        left: 45px;\n        animation: ", " 0.6s infinite;\n    }\n"])), p => "".concat(p.size).concat(p.sizeUnit), p => "".concat(p.size).concat(p.sizeUnit), p => p.color, p => motion1(), p => motion2(), p => motion2(), p => motion3());
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const EllipsisLoader = _ref => {
   let {
     color,
@@ -29,17 +22,69 @@ const EllipsisLoader = _ref => {
     sizeUnit,
     style
   } = _ref;
-  return /*#__PURE__*/React__default['default'].createElement(EllipsisSpinner, {
-    color: color,
-    size: size,
-    sizeUnit: sizeUnit,
-    style: { ...style
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: _objectSpread(_objectSpread({
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
+      width: "".concat(size).concat(sizeUnit),
+      height: "".concat(size).concat(sizeUnit)
+    }, style), {}, {
+      "& > div": {
+        position: "absolute",
+        width: "11px",
+        height: "11px",
+        borderRadius: "50%",
+        background: color,
+        animationTimingFunction: "cubic-bezier(0, 1, 1, 0)"
+      },
+      "& > div:nth-of-type(1)": {
+        left: "6px",
+        animation: "ellipsis-motion1 0.6s infinite"
+      },
+      "& > div:nth-of-type(2)": {
+        left: "6px",
+        animation: "ellipsis-motion2 0.6s infinite"
+      },
+      "& > div:nth-of-type(3)": {
+        left: "26px",
+        animation: "ellipsis-motion2 0.6s infinite"
+      },
+      "& > div:nth-of-type(4)": {
+        left: "45px",
+        animation: "ellipsis-motion3 0.6s infinite"
+      },
+      "@keyframes ellipsis-motion1": {
+        "0%": {
+          transform: "scale(0)"
+        },
+        "100%": {
+          transform: "scale(1)"
+        }
+      },
+      "@keyframes ellipsis-motion2": {
+        "0%": {
+          transform: "translate(0, 0)"
+        },
+        "100%": {
+          transform: "translate(19px, 0)"
+        }
+      },
+      "@keyframes ellipsis-motion3": {
+        "0%": {
+          transform: "scale(1)"
+        },
+        "100%": {
+          transform: "scale(0)"
+        }
+      }
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("div", null), /*#__PURE__*/React__default["default"].createElement("div", null), /*#__PURE__*/React__default["default"].createElement("div", null), /*#__PURE__*/React__default["default"].createElement("div", null));
 };
 EllipsisLoader.defaultProps = {
   size: 24,
-  color: colors['default'].notBlack,
+  color: colors["default"].notBlack,
   sizeUnit: "px",
   style: {
     width: "60px",
@@ -48,4 +93,4 @@ EllipsisLoader.defaultProps = {
 };
 
 exports.EllipsisLoader = EllipsisLoader;
-exports.default = EllipsisLoader;
+exports["default"] = EllipsisLoader;

package/dist/cjs/GroupCard.js

@@ -2,26 +2,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styled = require('styled-components');
 var index = require('./index.js');
 var NewBlerp = require('./NewBlerp.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject;
-const BlerpImage = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    background-image: url(", ");\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 140px;\n    height: 140px;\n    border-radius: 12px;\n    transition: 0.3s;\n    position: absolute;\n    opacity: ", ";\n    transform: rotate(", ");\n"])), props => props.image, props => props.firstImage ? "1" : props.hovering ? "1" : "0.5", props => props.hovering ? "45deg" : "20deg");
-const GroupCard = _ref => {
-  var _group$blerps14;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const BlerpImage = _ref => {
   let {
-    group
+    image,
+    firstImage,
+    hovering,
+    index,
+    style
   } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: _objectSpread({
+      backgroundImage: "url(".concat(image, ")"),
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "cover",
+      width: "140px",
+      height: "140px",
+      borderRadius: "12px",
+      transition: "0.3s",
+      position: "absolute",
+      opacity: firstImage ? 1 : hovering ? 1 : 0.5,
+      transform: "rotate(".concat(hovering ? "45deg" : "20deg", ")")
+    }, style)
+  });
+};
+
+const GroupCard = _ref2 => {
+  var _group$blerps2;
+
+  let {
+    group
+  } = _ref2;
   const [hovering, setHovering] = React.useState(false);
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
@@ -37,64 +61,50 @@ const GroupCard = _ref => {
   };
 
   const calculateLeft = index => {
-    var _group$blerps, _group$blerps2, _group$blerps5, _group$blerps8, _group$blerps11;
+    var _group$blerps;
+
+    const length = group === null || group === void 0 ? void 0 : (_group$blerps = group.blerps) === null || _group$blerps === void 0 ? void 0 : _group$blerps.length;
 
-    if ((group === null || group === void 0 ? void 0 : (_group$blerps = group.blerps) === null || _group$blerps === void 0 ? void 0 : _group$blerps.length) === 1) {
+    if (length === 1) {
       return "25%";
     }
 
-    if ((group === null || group === void 0 ? void 0 : (_group$blerps2 = group.blerps) === null || _group$blerps2 === void 0 ? void 0 : _group$blerps2.length) === 2) {
-      var _group$blerps4;
-
+    if (length === 2) {
       if (hovering) {
-        var _group$blerps3;
-
-        return "".concat((index - 0.05) / (group === null || group === void 0 ? void 0 : (_group$blerps3 = group.blerps) === null || _group$blerps3 === void 0 ? void 0 : _group$blerps3.length) * 100, "%");
+        return "".concat((index - 0.05) / length * 100, "%");
       }
 
-      return "".concat((index + 0.5) / ((group === null || group === void 0 ? void 0 : (_group$blerps4 = group.blerps) === null || _group$blerps4 === void 0 ? void 0 : _group$blerps4.length) + 2.5) * 100, "%");
+      return "".concat((index + 0.5) / (length + 2.5) * 100, "%");
     }
 
-    if ((group === null || group === void 0 ? void 0 : (_group$blerps5 = group.blerps) === null || _group$blerps5 === void 0 ? void 0 : _group$blerps5.length) === 3) {
-      var _group$blerps7;
-
+    if (length === 3) {
       if (hovering) {
-        var _group$blerps6;
-
-        return "".concat((index - 0.35) / (group === null || group === void 0 ? void 0 : (_group$blerps6 = group.blerps) === null || _group$blerps6 === void 0 ? void 0 : _group$blerps6.length) * 100, "%");
+        return "".concat((index - 0.35) / length * 100, "%");
       }
 
-      return "".concat((index + 0.4) / ((group === null || group === void 0 ? void 0 : (_group$blerps7 = group.blerps) === null || _group$blerps7 === void 0 ? void 0 : _group$blerps7.length) + 2.5) * 100, "%");
+      return "".concat((index + 0.4) / (length + 2.5) * 100, "%");
     }
 
-    if ((group === null || group === void 0 ? void 0 : (_group$blerps8 = group.blerps) === null || _group$blerps8 === void 0 ? void 0 : _group$blerps8.length) === 4) {
-      var _group$blerps10;
-
+    if (length === 4) {
       if (hovering) {
-        var _group$blerps9;
-
-        return "".concat((index - 0.6) / (group === null || group === void 0 ? void 0 : (_group$blerps9 = group.blerps) === null || _group$blerps9 === void 0 ? void 0 : _group$blerps9.length) * 100, "%");
+        return "".concat((index - 0.6) / length * 100, "%");
       }
 
-      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps10 = group.blerps) === null || _group$blerps10 === void 0 ? void 0 : _group$blerps10.length) + 2.5) * 100, "%");
+      return "".concat((index + 0.2) / (length + 2.5) * 100, "%");
     }
 
-    if ((group === null || group === void 0 ? void 0 : (_group$blerps11 = group.blerps) === null || _group$blerps11 === void 0 ? void 0 : _group$blerps11.length) === 5) {
-      var _group$blerps13;
-
+    if (length === 5) {
       if (hovering) {
-        var _group$blerps12;
-
-        return "".concat((index - 0.7) / (group === null || group === void 0 ? void 0 : (_group$blerps12 = group.blerps) === null || _group$blerps12 === void 0 ? void 0 : _group$blerps12.length) * 100, "%");
+        return "".concat((index - 0.7) / length * 100, "%");
       }
 
-      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps13 = group.blerps) === null || _group$blerps13 === void 0 ? void 0 : _group$blerps13.length) + 2.5) * 100, "%");
+      return "".concat((index + 0.2) / (length + 2.5) * 100, "%");
     }
 
     return "".concat((index - 2) * 10, "px");
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       minWidth: "250px",
       maxWidth: "290px",
@@ -111,21 +121,17 @@ const GroupCard = _ref => {
       flex: "1",
       overflow: "hidden"
     },
-    onMouseEnter: () => {
-      setHovering(true);
-    },
-    onMouseLeave: () => {
-      setHovering(false);
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    onMouseEnter: () => setHovering(true),
+    onMouseLeave: () => setHovering(false)
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     height: "100%"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       color: "grey5.main",
       fontSize: "12px",
       fontWeight: "300"
     }
-  }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       whiteSpace: "nowrap",
       overflowX: "hidden",
@@ -137,15 +143,15 @@ const GroupCard = _ref => {
       height: "31px",
       marginBottom: "5px"
     }
-  }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row"
-  }, /*#__PURE__*/React__default['default'].createElement(NewBlerp.AddedToIcons, {
+  }, /*#__PURE__*/React__default["default"].createElement(NewBlerp.AddedToIcons, {
     item: group,
     hovering: true
-  }), /*#__PURE__*/React__default['default'].createElement(NewBlerp.FavoriteIconWithCounter, {
+  }), /*#__PURE__*/React__default["default"].createElement(NewBlerp.FavoriteIconWithCounter, {
     saved: group === null || group === void 0 ? void 0 : group.saved,
     count: saveCount
-  })), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  })), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     sx: {
       width: "100%",
@@ -153,12 +159,13 @@ const GroupCard = _ref => {
       right: "0",
       bottom: "0"
     }
-  }, (_group$blerps14 = group.blerps) === null || _group$blerps14 === void 0 ? void 0 : _group$blerps14.map((blerp, index) => {
-    var _group$blerps15, _blerp$image, _blerp$image$original;
+  }, (_group$blerps2 = group.blerps) === null || _group$blerps2 === void 0 ? void 0 : _group$blerps2.map((blerp, index) => {
+    var _group$blerps3, _blerp$image, _blerp$image$original;
 
-    return /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
+    return /*#__PURE__*/React__default["default"].createElement(BlerpImage, {
+      key: (blerp === null || blerp === void 0 ? void 0 : blerp._id) || index,
       index: index,
-      firstImage: index === ((_group$blerps15 = group.blerps) === null || _group$blerps15 === void 0 ? void 0 : _group$blerps15.length) - 1,
+      firstImage: index === ((_group$blerps3 = group.blerps) === null || _group$blerps3 === void 0 ? void 0 : _group$blerps3.length) - 1,
       hovering: hovering,
       image: blerp === null || blerp === void 0 ? void 0 : (_blerp$image = blerp.image) === null || _blerp$image === void 0 ? void 0 : (_blerp$image$original = _blerp$image.original) === null || _blerp$image$original === void 0 ? void 0 : _blerp$image$original.url,
       style: {