@blerp/design 1.3.17 → 1.4.2

package/dist/esm/EllipsisLoader.js

@@ -1,17 +1,11 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
+import { Box } from './index.js';
 import colors from './colors.js';
 
-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 => keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
-
-const motion2 = props => keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: translate(0, 0);\n  }\n  100% {\n    transform: translate(19px, 0);\n  }\n"])));
-
-const motion3 = props => keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
-
-const EllipsisSpinner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(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,
@@ -19,12 +13,64 @@ const EllipsisLoader = _ref => {
     sizeUnit,
     style
   } = _ref;
-  return /*#__PURE__*/React.createElement(EllipsisSpinner, {
-    color: color,
-    size: size,
-    sizeUnit: sizeUnit,
-    style: { ...style
-    }
+  return /*#__PURE__*/React.createElement(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.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
 };
 EllipsisLoader.defaultProps = {
@@ -37,5 +83,4 @@ EllipsisLoader.defaultProps = {
   }
 };
 
-export default EllipsisLoader;
-export { EllipsisLoader };
+export { EllipsisLoader, EllipsisLoader as default };

package/dist/esm/GroupCard.js

@@ -1,17 +1,42 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useState } from 'react';
-import styled from 'styled-components';
 import { Stack, Text } from './index.js';
 import { AddedToIcons, FavoriteIconWithCounter } from './NewBlerp.js';
 
-var _templateObject;
-const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(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.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] = useState(false);
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
@@ -27,58 +52,44 @@ 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");
@@ -101,12 +112,8 @@ const GroupCard = _ref => {
       flex: "1",
       overflow: "hidden"
     },
-    onMouseEnter: () => {
-      setHovering(true);
-    },
-    onMouseLeave: () => {
-      setHovering(false);
-    }
+    onMouseEnter: () => setHovering(true),
+    onMouseLeave: () => setHovering(false)
   }, /*#__PURE__*/React.createElement(Stack, {
     height: "100%"
   }, /*#__PURE__*/React.createElement(Text, {
@@ -143,12 +150,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.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: {