@blerp/design 1.4.5 → 1.4.7

package/dist/cjs/NewBlerp.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var UsernameWithPopout = require('./UsernameWithPopout.js');
-var index = require('./index.js');
 var Icons = require('./Icons/Icons.js');
+var Box = require('./neo-components/Box.js');
+var Stack = require('./neo-components/Stack.js');
+var Text = require('./neo-components/Text.js');
+var Misc = require('./neo-components/Misc.js');
+var Button = require('./neo-components/Button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -237,7 +241,7 @@ const FavoriteIconWithCounter = _ref10 => {
     notation: "compact"
   });
   let savedCount = formatter.format(count);
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "center",
     onClick: onClick
@@ -259,7 +263,7 @@ const FavoriteIconWithCounter = _ref10 => {
       opacity: 0.5,
       color: "#ffffff"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "400"
@@ -274,7 +278,7 @@ const AddedToIcons = _ref11 => {
     hovering,
     hide = false
   } = _ref11;
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     sx: {
       transition: "0.3s",
@@ -284,35 +288,35 @@ const AddedToIcons = _ref11 => {
       flexWrap: "wrap",
       flex: 1
     }
-  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Added to Universal Extension"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ExtensionIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Added to Channel Points"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Icons.ChannelPointsIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Added to Bits Library"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Icons.TwitchBitIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Added to WalkOn"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Icons.WalkonIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Added to Group"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(LayersIcon, {
     sx: {
@@ -328,9 +332,9 @@ const RatingInfoItem = _ref12 => {
     tooltipText,
     displayText
   } = _ref12;
-  return /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  return /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: tooltipText
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     sx: {
       fontSize: "9px",
       fontWeight: "600",
@@ -365,7 +369,7 @@ const RatingInfo = _ref13 => {
       ratingText.text = "UNRATED";
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
       direction: "row",
       alignItems: "start",
       sx: {
@@ -417,13 +421,13 @@ const RatingInfo = _ref13 => {
     ratingText.text = "UNRATED";
   }
 
-  if (!ratingText.tooltipText) return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  if (!ratingText.tooltipText) return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     sx: {
       flex: 0
     }
   });
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "start",
     sx: {
@@ -456,13 +460,13 @@ const ReportedWarning = _ref14 => {
         sx: {
           marginBottom: "20px"
         }
-      }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+      }), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
         sx: {
           fontSize: "18px",
           fontWeight: "600",
           color: "white.override"
         }
-      }, "Blocked"), hovering && /*#__PURE__*/React__default["default"].createElement(index.Button, {
+      }, "Blocked"), hovering && /*#__PURE__*/React__default["default"].createElement(Button.Button, {
         color: "whiteOverride",
         variant: "outlined",
         sx: {
@@ -478,21 +482,21 @@ const ReportedWarning = _ref14 => {
       sx: {
         marginBottom: "20px"
       }
-    }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    }), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       sx: {
         fontSize: "18px",
         fontWeight: "600",
         color: "white.override",
         marginBottom: "10px"
       }
-    }, "Hold Up"), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    }, "Hold Up"), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       sx: {
         fontSize: "14px",
         fontWeight: "400",
         color: "white.override",
         textAlign: "center"
       }
-    }, "This content has been", /*#__PURE__*/React__default["default"].createElement("br", null), " reported and may be unsafe."), hovering && /*#__PURE__*/React__default["default"].createElement(index.Button, {
+    }, "This content has been", /*#__PURE__*/React__default["default"].createElement("br", null), " reported and may be unsafe."), hovering && /*#__PURE__*/React__default["default"].createElement(Button.Button, {
       color: "whiteOverride",
       variant: "outlined",
       sx: {
@@ -504,7 +508,7 @@ const ReportedWarning = _ref14 => {
     }, "View"));
   };
 
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       position: "absolute",
       top: "0",
@@ -528,7 +532,7 @@ const ReportedWarning = _ref14 => {
     onMouseLeave: () => {
       setHovering(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       position: "absolute",
       top: "20px",
@@ -554,7 +558,7 @@ const BlerpTopRow = _ref15 => {
     hoveringAddTo,
     setHovering
   } = _ref15;
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     justifyContent: "space-between",
     width: "100%",
@@ -562,7 +566,7 @@ const BlerpTopRow = _ref15 => {
       position: "relative",
       minHeight: "20px"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "start",
     justifyContent: "space-between",
@@ -716,13 +720,13 @@ const NewBlerp = _ref16 => {
   };
 
   if (!isOwner && ((bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" || (bite === null || bite === void 0 ? void 0 : bite.redactionType) === "PRIVATE")) {
-    return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
       sx: _objectSpread(_objectSpread({}, premiumContainerStyles), {}, {
         background: getPremiumContainerBackground()
       })
-    }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
       sx: getContainerStyles(false, false)
-    }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
       sx: {
         backgroundColor: "grey4.main",
         width: "100%",
@@ -735,10 +739,10 @@ const NewBlerp = _ref16 => {
         alignItems: "center",
         justifyContent: "center"
       }
-    }, /*#__PURE__*/React__default["default"].createElement(LockIcon, null), /*#__PURE__*/React__default["default"].createElement(index.Text, null, "Private Blerp"))));
+    }, /*#__PURE__*/React__default["default"].createElement(LockIcon, null), /*#__PURE__*/React__default["default"].createElement(Text.Text, null, "Private Blerp"))));
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: _objectSpread(_objectSpread({}, premiumContainerStyles), {}, {
       background: getPremiumContainerBackground()
     })
@@ -749,9 +753,9 @@ const NewBlerp = _ref16 => {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
     onClick: onFavoriteClick
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: getContainerStyles(addToOpen, bite === null || bite === void 0 ? void 0 : bite.isPremium)
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
       backgroundSize: "cover",
@@ -777,7 +781,7 @@ const NewBlerp = _ref16 => {
         return;
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     className: "blerp-hover",
     onClick: () => {
@@ -810,7 +814,7 @@ const NewBlerp = _ref16 => {
     setAddToOpen: setAddToOpen,
     hoveringAddTo: hoveringAddTo,
     setHovering: setHovering
-  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       transition: "0.3s",
       opacity: hovering && !hoveringAddTo || defaultHovering ? "1" : "0",
@@ -819,7 +823,7 @@ const NewBlerp = _ref16 => {
     }
   }, renderPlayStateIcon()), Waveform({
     hovering: hovering
-  })), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  })), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: getHoverScrollTextStyles(shouldScrollTitle),
     onClick: onTitleClick
   }, /*#__PURE__*/React__default["default"].createElement("a", {
@@ -827,14 +831,14 @@ const NewBlerp = _ref16 => {
     style: {
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     ref: titleRef,
     sx: {
       fontSize: "16px",
       fontWeight: "400",
       lineHeight: "1"
     }
-  }, bite === null || bite === void 0 ? void 0 : bite.title)), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, bite === null || bite === void 0 ? void 0 : bite.title)), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       position: "absolute",
       right: "0",
@@ -846,7 +850,7 @@ const NewBlerp = _ref16 => {
       justifyContent: "center",
       background: bite !== null && bite !== void 0 && bite.isPremium ? "linear-gradient(270deg, rgb(49 62 65) 40%, rgba(0,0,0,0) 100%)" : "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
     }
-  }, renderThreeDot())), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, renderThreeDot())), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
@@ -921,7 +925,7 @@ const NewBlerp = _ref16 => {
     onUsernameClick: onUsernameClick,
     user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
     collapsed: false
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     sx: {
       fontWeight: "300",
       fontSize: "12px",

package/dist/cjs/NewCollectionModal.js

@@ -6,8 +6,13 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var ImageUpload = require('./ImageUpload.js');
-var index = require('./index.js');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
+var Dropdown = require('./Dropdown.js');
+var Toggle = require('./Toggle.js');
+var Button = require('./neo-components/Button.js');
+var Stack = require('./neo-components/Stack.js');
+var Text = require('./neo-components/Text.js');
+var Input = require('./neo-components/Input.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -149,7 +154,7 @@ const NewCollectionModal = _ref4 => {
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, trigger && !isControlled ? /*#__PURE__*/React.cloneElement(trigger, {
     onClick: () => setInternalOpen(true)
-  }) : !isControlled && !trigger ? /*#__PURE__*/React__default["default"].createElement(index.Button, {
+  }) : !isControlled && !trigger ? /*#__PURE__*/React__default["default"].createElement(Button.Button, {
     onClick: () => setInternalOpen(true),
     color: "grey4",
     sx: {
@@ -159,7 +164,7 @@ const NewCollectionModal = _ref4 => {
     isOpen: isOpen,
     onClose: handleClose,
     zIndex: 1300
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       width: isMobile ? "100vw" : "600px",
       maxHeight: "90vh",
@@ -183,14 +188,14 @@ const NewCollectionModal = _ref4 => {
     }
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     path: paths.close
-  })), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     fontSize: "28px",
     fontWeight: "700",
     fontColor: COLORS.textMain,
     sx: {
       mb: 4
     }
-  }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: isMobile ? "column" : "row",
     spacing: 4
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -216,26 +221,26 @@ const NewCollectionModal = _ref4 => {
       height: "100%",
       objectFit: "cover"
     }
-  }) : /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     alignItems: "center"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     path: paths.upload,
     style: {
       color: COLORS.textMuted
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
       mt: 1
     }
-  }, "Upload"))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, "Upload"))), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     spacing: 3,
     sx: {
       flex: 1,
       width: "100%"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Input.Input, {
     label: "Name",
     value: titleInput,
     onChange: e => setTitleInput(e.target.value),
@@ -252,7 +257,7 @@ const NewCollectionModal = _ref4 => {
         backgroundColor: COLORS.bgInput
       }
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Input, {
+  }), /*#__PURE__*/React__default["default"].createElement(Input.Input, {
     label: "Description",
     value: descriptionInput,
     onChange: e => setDescriptionInput(e.target.value),
@@ -270,18 +275,18 @@ const NewCollectionModal = _ref4 => {
         backgroundColor: COLORS.bgInput
       }
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     spacing: 2,
     justifyContent: "space-between",
     flexWrap: "wrap"
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, null, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, null, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
       mb: 1
     }
-  }, "VISIBILITY"), /*#__PURE__*/React__default["default"].createElement(index.Dropdown, {
+  }, "VISIBILITY"), /*#__PURE__*/React__default["default"].createElement(Dropdown.Dropdown, {
     sx: {
       height: "40px",
       color: COLORS.textMain,
@@ -297,22 +302,22 @@ const NewCollectionModal = _ref4 => {
     }, {
       name: "UNLISTED"
     }]
-  })), isAdmin && /*#__PURE__*/React__default["default"].createElement(index.Stack, null, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  })), isAdmin && /*#__PURE__*/React__default["default"].createElement(Stack.Stack, null, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
       mb: 1
     }
-  }, "PREMIUM"), /*#__PURE__*/React__default["default"].createElement(index.Toggle, {
+  }, "PREMIUM"), /*#__PURE__*/React__default["default"].createElement(Toggle.Toggle, {
     checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
     onClick: () => handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium))
-  })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React__default["default"].createElement(index.Stack, null, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React__default["default"].createElement(Stack.Stack, null, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
       mb: 1
     }
-  }, "PRICE"), /*#__PURE__*/React__default["default"].createElement(index.Input, {
+  }, "PRICE"), /*#__PURE__*/React__default["default"].createElement(Input.Input, {
     value: price,
     onChange: e => setPrice(e.target.value),
     size: "small",
@@ -321,13 +326,13 @@ const NewCollectionModal = _ref4 => {
         color: COLORS.textMain
       }
     }
-  }))))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }))))), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     alignItems: "center",
     spacing: 2,
     sx: {
       mt: 5
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button.Button, {
     onClick: () => {
       handleCollection({
         _id: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited._id,
@@ -350,7 +355,7 @@ const NewCollectionModal = _ref4 => {
         opacity: 0.9
       }
     }
-  }, collectionToBeEdited ? "Save Changes" : "Create Collection"), /*#__PURE__*/React__default["default"].createElement(index.Button, {
+  }, collectionToBeEdited ? "Save Changes" : "Create Collection"), /*#__PURE__*/React__default["default"].createElement(Button.Button, {
     variant: "text",
     onClick: handleClose,
     sx: {
@@ -360,7 +365,7 @@ const NewCollectionModal = _ref4 => {
     isOpen: editImage,
     onClose: () => setEditImage(false),
     zIndex: 1400
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       backgroundColor: COLORS.bgModal,
       padding: "24px",
@@ -368,7 +373,7 @@ const NewCollectionModal = _ref4 => {
       width: isMobile ? "100vw" : "340px",
       border: "1px solid ".concat(COLORS.border)
     }
-  }, /*#__PURE__*/React__default["default"].createElement(ImageUpload, {
+  }, /*#__PURE__*/React__default["default"].createElement(ImageUpload["default"], {
     prevImage: collectionToBeEdited ? imageURL : undefined,
     updateImage: newImage => {
       setImageURL(URL.createObjectURL(newImage));

package/dist/cjs/PremiumCollectionCard.js

@@ -7,10 +7,11 @@ var BlerpImageRow = require('./Blerp/BlerpImageRow.js');
 var BlerpSavePopup = require('./Blerp/BlerpSavePopup.js');
 var BlerpTitleRow = require('./Blerp/BlerpTitleRow.js');
 var BlerpTopRow = require('./Blerp/BlerpTopRow.js');
-var index = require('./index.js');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
 var helpers = require('./helpers.js');
 var Theme = require('./Theme.js');
+var Box = require('./neo-components/Box.js');
+var Stack = require('./neo-components/Stack.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -139,7 +140,7 @@ const Blerp = _ref => {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     id: "blerp-component-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     onClick: e => {
       e.stopPropagation();
@@ -170,7 +171,7 @@ const Blerp = _ref => {
         border: isPremium ? "none" : "2px solid transparent"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       position: "absolute",
       top: "0",
@@ -181,7 +182,7 @@ const Blerp = _ref => {
       background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
       backgroundColor: isPremium && !profileColors && "grey5.override"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(BlerpTopRow, {
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpTopRow["default"], {
     bite: bite,
     isOwner: isOwner,
     sizeParams: sizeParams,
@@ -193,7 +194,7 @@ const Blerp = _ref => {
     secondaryActionButton: secondaryActionButton,
     isBlerpHovered: isBlerpHovered,
     handleClickThreeDot: handleClickThreeDot
-  }), /*#__PURE__*/React__default["default"].createElement(BlerpImageRow, {
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpImageRow["default"], {
     bite: bite,
     isOwner: isOwner,
     sizeParams: sizeParams,
@@ -207,7 +208,7 @@ const Blerp = _ref => {
     isBlerpHovered: isBlerpHovered,
     handleClickPlay: handleClickPlay,
     handleClickLock: handleClickLock
-  }), /*#__PURE__*/React__default["default"].createElement(BlerpTitleRow, {
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpTitleRow["default"], {
     bite: bite,
     title: title,
     isLinkTitle: isLinkTitle,
@@ -216,7 +217,7 @@ const Blerp = _ref => {
     isLocked: isLocked,
     isOwner: isOwner,
     sizeParams: sizeParams
-  }), openSave && /*#__PURE__*/React__default["default"].createElement(BlerpSavePopup, {
+  }), openSave && /*#__PURE__*/React__default["default"].createElement(BlerpSavePopup["default"], {
     bite: bite,
     anchorRef: anchorRef,
     setOpenSave: setOpenSave,
@@ -229,6 +230,7 @@ const Blerp = _ref => {
     handleClickOrganize: handleClickOrganize
   })));
 };
+var PremiumCollectionCard = Blerp;
 
 exports.Blerp = Blerp;
-exports["default"] = Blerp;
+exports["default"] = PremiumCollectionCard;

package/dist/cjs/PurchaseModals/CheckoutModal.js

@@ -1,14 +1,16 @@
 'use strict';
 
-var index = require('../index.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
+var Stack = require('../neo-components/Stack.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const NeedToReplace = props => {
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       backgroundColor: "white.main",
       width: "900px",
@@ -36,4 +38,6 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-module.exports = NeedToReplace;
+var NeedToReplace$1 = NeedToReplace;
+
+exports["default"] = NeedToReplace$1;

package/dist/cjs/PurchaseModals/PremiumBlerpCheckoutModal.js

@@ -1,14 +1,16 @@
 'use strict';
 
-var index = require('../index.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
+var Stack = require('../neo-components/Stack.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const NeedToReplace = props => {
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       backgroundColor: "white.main",
       width: "900px",
@@ -36,4 +38,6 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-module.exports = NeedToReplace;
+var NeedToReplace$1 = NeedToReplace;
+
+exports["default"] = NeedToReplace$1;

package/dist/cjs/PurchaseModals/PremiumCollectionCheckoutModal.js

@@ -1,14 +1,16 @@
 'use strict';
 
-var index = require('../index.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
+var Stack = require('../neo-components/Stack.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const NeedToReplace = props => {
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       backgroundColor: "white.main",
       width: "900px",
@@ -36,4 +38,6 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-module.exports = NeedToReplace;
+var NeedToReplace$1 = NeedToReplace;
+
+exports["default"] = NeedToReplace$1;