@blerp/design 1.4.4 → 1.4.6

package/dist/cjs/BlerpListViewPremium.js

@@ -8,9 +8,13 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var React = require('react');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
 var Icons = require('./Icons/Icons.js');
-var index = require('./index.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');
+var Text = require('./neo-components/Text.js');
+var Misc = require('./neo-components/Misc.js');
+var IconButton = require('./neo-components/IconButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,7 +37,7 @@ const Icon = _ref => {
   } = _ref,
       props = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-  return /*#__PURE__*/React__default["default"].createElement(index.Box, _extends__default["default"]({
+  return /*#__PURE__*/React__default["default"].createElement(Box.Box, _extends__default["default"]({
     component: "svg",
     viewBox: "0 0 24 24",
     width: size,
@@ -137,7 +141,7 @@ const BlerpListViewPremium = _ref2 => {
     sizeParams = variantSize === "small" ? smallSize : variantSize === "medium" ? mediumSize : largeSize;
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     onMouseEnter: () => setIsBlerpHovered(true),
     onMouseLeave: () => setIsBlerpHovered(false),
     sx: {
@@ -151,7 +155,7 @@ const BlerpListViewPremium = _ref2 => {
         bgcolor: hoverColor ? hoverColor : "grey2.main"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       position: "absolute",
       top: 0,
@@ -163,7 +167,7 @@ const BlerpListViewPremium = _ref2 => {
       transition: "opacity .15s ease-in-out",
       opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     onClick: e => {
       e.stopPropagation();
       handleClickBackground();
@@ -180,7 +184,7 @@ const BlerpListViewPremium = _ref2 => {
       transition: "0.3s",
       position: "relative"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     width: "70%",
     alignItems: "center",
@@ -188,7 +192,7 @@ const BlerpListViewPremium = _ref2 => {
       cursor: "pointer",
       minWidth: "30%"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       height: sizeParams.imageSize,
       width: sizeParams.imageSize,
@@ -201,7 +205,7 @@ const BlerpListViewPremium = _ref2 => {
         transform: "scale(1.1)"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     onClick: e => {
       if (handleClickPlay) {
         e.stopPropagation();
@@ -233,13 +237,13 @@ const BlerpListViewPremium = _ref2 => {
       height: "30px",
       color: "white.override"
     }
-  }))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }))), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "column",
     alignItems: "flex-start",
     sx: {
       width: "80%"
     }
-  }, isLinkTitle ? /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, isLinkTitle ? /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -263,7 +267,7 @@ const BlerpListViewPremium = _ref2 => {
       textDecoration: "none",
       color: "white"
     }
-  }, bite.title)) : /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, bite.title)) : /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -281,7 +285,7 @@ const BlerpListViewPremium = _ref2 => {
         handleClickTitle();
       }
     }
-  }, bite.title), biteSubtitle && /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     textAlign: "left",
     fontSize: sizeParams.smallFontSize,
     noWrap: true,
@@ -294,10 +298,10 @@ const BlerpListViewPremium = _ref2 => {
         handleSubtitleClick();
       }
     }
-  }, biteSubtitle))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, biteSubtitle))), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "center"
-  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     onClick: e => {
       e.stopPropagation();
       if (handleClickLock) handleClickLock();
@@ -322,7 +326,7 @@ const BlerpListViewPremium = _ref2 => {
         color: theme.colors.override
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       position: "relative",
       top: "1px",
@@ -330,7 +334,7 @@ const BlerpListViewPremium = _ref2 => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }, /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Unlock Premium"
   }, actionButtonHovered ? /*#__PURE__*/React__default["default"].createElement(Icons.OpenLockIcon, {
     sx: {
@@ -345,7 +349,7 @@ const BlerpListViewPremium = _ref2 => {
       position: "relative",
       bottom: "1px"
     }
-  })))) : null, !!handleClickPremium && /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  })))) : null, !!handleClickPremium && /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     onClick: e => {
       e.stopPropagation();
       handleClickPremium();
@@ -371,13 +375,13 @@ const BlerpListViewPremium = _ref2 => {
       marginRight: "4px",
       color: "white.override"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     sx: {
       marginRight: "4px",
       color: "white.override",
       fontSize: "12px"
     }
-  }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
     onClick: e => {
       e.stopPropagation();
       if (handleClickUnsave) handleClickUnsave();
@@ -400,7 +404,7 @@ const BlerpListViewPremium = _ref2 => {
     sx: {
       color: "starling.main"
     }
-  })) : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  })) : /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
     onClick: e => {
       e.stopPropagation();
       if (handleClickSave) handleClickSave();

package/dist/cjs/BlerpListViewSkeleton.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index = require('./index.js');
 var Theme = require('./Theme.js');
+var Box = require('./neo-components/Box.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const BlerpListViewSkeleton = () => {
   const theme = Theme.useBlerpTheme();
-  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "flex",
       flexDirection: "row",
@@ -35,7 +35,7 @@ const BlerpListViewSkeleton = () => {
         }
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       height: "38px",
       width: "38px",
@@ -43,7 +43,7 @@ const BlerpListViewSkeleton = () => {
       borderRadius: "8px",
       marginLeft: "4px"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "flex",
       flexDirection: "row",
@@ -52,7 +52,7 @@ const BlerpListViewSkeleton = () => {
       width: "80px",
       marginRight: "10px"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "flex",
       height: "34px",
@@ -60,7 +60,7 @@ const BlerpListViewSkeleton = () => {
       backgroundColor: theme.colors.white,
       borderRadius: "50%"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "flex",
       height: "34px",

package/dist/cjs/CollectionCard.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index = require('./index.js');
 var PremiumCollectionCard = require('./PremiumCollectionCard.js');
 var helpers = require('./helpers.js');
+var Box = require('./neo-components/Box.js');
+var Stack = require('./neo-components/Stack.js');
+var Misc = require('./neo-components/Misc.js');
+var Text = require('./neo-components/Text.js');
 var Icons = require('./Icons/Icons.js');
+var IconButton = require('./neo-components/IconButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -127,7 +131,7 @@ const CollectionCard = _ref6 => {
   const renderProfileImage = () => {
     var _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$ownerObje4, _collection$ownerObje5, _collection$ownerObje6;
 
-    return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
       sx: {
         zIndex: "3",
         justifyContent: "center",
@@ -141,7 +145,7 @@ const CollectionCard = _ref6 => {
         padding: "2px",
         transition: "all .1s ease-in-out"
       }
-    }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    }, /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
       sx: {
         backgroundColor: "notBlack.override",
         width: "20px",
@@ -173,7 +177,7 @@ const CollectionCard = _ref6 => {
   };
 
   const renderPrimaryActionButton = () => {
-    return primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    return primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
       sx: {
         width: "16px",
         height: "16px",
@@ -220,7 +224,7 @@ const CollectionCard = _ref6 => {
   }
 
   if (isPremium) {
-    return /*#__PURE__*/React__default["default"].createElement(PremiumCollectionCard.Blerp, {
+    return /*#__PURE__*/React__default["default"].createElement(PremiumCollectionCard["default"], {
       collection: collection,
       variantSize: variantSize,
       handleClickBackground: handleClickBackground,
@@ -248,14 +252,14 @@ const CollectionCard = _ref6 => {
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "flex",
       alignItems: "center",
       width: fluid ? "80%" : sizeParams.width,
       height: fluid ? "80%" : sizeParams.height
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     onClick: () => {
       handleClickBackground();
     },
@@ -278,7 +282,7 @@ const CollectionCard = _ref6 => {
         top: "24px"
       }
     }
-  }, variantSize !== "small" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, variantSize !== "small" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       backgroundColor: "white.override",
       borderRadius: "8px",
@@ -288,7 +292,7 @@ const CollectionCard = _ref6 => {
       top: "0",
       zIndex: "3"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     id: "collection-background-1",
     sx: {
       backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
@@ -302,7 +306,7 @@ const CollectionCard = _ref6 => {
       zIndex: "2",
       transition: "0.2s ease-out"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     id: "collection-background-2",
     sx: {
       backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
@@ -316,7 +320,7 @@ const CollectionCard = _ref6 => {
       zIndex: "1",
       transition: "0.2s ease-out"
     }
-  }), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && !isOwner ? /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && !isOwner ? /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       backgroundColor: "grey3.main",
       backgroundSize: "cover",
@@ -336,7 +340,7 @@ const CollectionCard = _ref6 => {
     style: {
       height: "20%"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     sx: {
       position: "absolute",
@@ -349,14 +353,14 @@ const CollectionCard = _ref6 => {
       boxSizing: "border-box",
       alignItems: "center"
     }
-  }, renderPrimaryActionButton()), renderProfileImage(), /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }, renderPrimaryActionButton()), renderProfileImage(), /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "This collection has been removed or hidden"
   }, /*#__PURE__*/React__default["default"].createElement(BookmarkIconIcon, {
     sx: {
       color: "white.override",
       fontSize: "35px"
     }
-  })), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  })), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "-webkit-box",
       WebkitLineClamp: "1",
@@ -365,14 +369,14 @@ const CollectionCard = _ref6 => {
       margin: "5px 0",
       maxWidth: "92%"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
     textAlign: "center",
     sx: {
       color: "white.override"
     }
-  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url, ")"),
       backgroundSize: "cover",
@@ -387,7 +391,7 @@ const CollectionCard = _ref6 => {
       position: "absolute",
       zIndex: "3"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     sx: {
       position: "absolute",
@@ -400,9 +404,9 @@ const CollectionCard = _ref6 => {
       boxSizing: "border-box",
       alignItems: "center"
     }
-  }, (collection === null || collection === void 0 ? void 0 : collection.edgeType) !== "NewTwitchGroupEdge" && renderPrimaryActionButton(), (collection === null || collection === void 0 ? void 0 : collection.edgeType) === "NewTwitchGroupEdge" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }, (collection === null || collection === void 0 ? void 0 : collection.edgeType) !== "NewTwitchGroupEdge" && renderPrimaryActionButton(), (collection === null || collection === void 0 ? void 0 : collection.edgeType) === "NewTwitchGroupEdge" && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Featured on Twitch Bits"
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       alignItems: "center"
     }
@@ -412,7 +416,7 @@ const CollectionCard = _ref6 => {
       zIndex: "1",
       fontSize: "18px"
     }
-  }))), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  }))), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Private"
   }, /*#__PURE__*/React__default["default"].createElement(BookmarkIconIcon, {
     sx: {
@@ -420,7 +424,7 @@ const CollectionCard = _ref6 => {
       fontSize: "16px",
       color: "white.override"
     }
-  })), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "UNLISTED" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+  })), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "UNLISTED" && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
     title: "Unlisted"
   }, /*#__PURE__*/React__default["default"].createElement(VisibilityOffIcon, {
     sx: {
@@ -428,7 +432,7 @@ const CollectionCard = _ref6 => {
       fontSize: "16px",
       color: "white.override"
     }
-  }))), secondaryActionButton ? secondaryActionButton : renderProfileImage(), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }))), secondaryActionButton ? secondaryActionButton : renderProfileImage(), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "-webkit-box",
       WebkitLineClamp: "1",
@@ -443,7 +447,7 @@ const CollectionCard = _ref6 => {
       color: "white",
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
     textAlign: "center",
@@ -453,14 +457,14 @@ const CollectionCard = _ref6 => {
         textDecoration: "underline"
       }
     }
-  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
     textAlign: "center",
     sx: {
       color: "white.override"
     }
-  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
       backgroundSize: "cover",

package/dist/cjs/CollectionListViewPremium.js

@@ -6,11 +6,14 @@ var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var index = require('./index.js');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
 var helpers = require('./helpers.js');
 var Theme = require('./Theme.js');
+var Stack = require('./neo-components/Stack.js');
+var Box = require('./neo-components/Box.js');
+var Text = require('./neo-components/Text.js');
 var Icons = require('./Icons/Icons.js');
+var IconButton = require('./neo-components/IconButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,7 +36,7 @@ const Icon = _ref => {
   } = _ref,
       props = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-  return /*#__PURE__*/React__default["default"].createElement(index.Box, _extends__default["default"]({
+  return /*#__PURE__*/React__default["default"].createElement(Box.Box, _extends__default["default"]({
     component: "svg",
     viewBox: "0 0 24 24",
     width: size,
@@ -264,7 +267,7 @@ const CollectionListViewPremium = _ref2 => {
     style: gradientBackgroundStyle
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: interactionBoxStyle
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     justifyContent: "flex-start",
     alignItems: "center",
@@ -273,7 +276,7 @@ const CollectionListViewPremium = _ref2 => {
       width: "calc(100% - 180px)",
       left: "2px"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       position: "relative",
       borderRadius: "4px",
@@ -286,7 +289,7 @@ const CollectionListViewPremium = _ref2 => {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: saveBoxTopStyle
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       position: "absolute",
       top: 0,
@@ -316,7 +319,7 @@ const CollectionListViewPremium = _ref2 => {
       position: "relative",
       left: "12px"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -335,7 +338,7 @@ const CollectionListViewPremium = _ref2 => {
         handleClickTitle();
       }
     }
-  }, collection.title)) : /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, collection.title)) : /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -350,14 +353,14 @@ const CollectionListViewPremium = _ref2 => {
         maxWidth: "133px"
       }
     }
-  }, collection.title)), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, collection.title)), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     justifyContent: "flex-end",
     alignItems: "center",
     sx: {
       height: "70%"
     }
-  }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     justifyContent: "space-around",
     alignItems: "center",
@@ -366,7 +369,7 @@ const CollectionListViewPremium = _ref2 => {
       width: "102px",
       position: "relative"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       borderRadius: "20px",
       position: "absolute",
@@ -384,7 +387,7 @@ const CollectionListViewPremium = _ref2 => {
       color: "white.override",
       height: "18px"
     }
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     sx: {
       zIndex: "2",
       color: "white.override",
@@ -401,7 +404,7 @@ const CollectionListViewPremium = _ref2 => {
       zIndex: "2",
       color: "white.override"
     }
-  })), secondaryActionButton || /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  })), secondaryActionButton || /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
     onClick: e => {
       e.stopPropagation();
     },
@@ -410,7 +413,7 @@ const CollectionListViewPremium = _ref2 => {
         backgroundColor: "grey6.main"
       }
     })
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       borderRadius: "20px",
       position: "absolute",

package/dist/cjs/CollectionSkeleton.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var index = require('./index.js');
 var Theme = require('./Theme.js');
+var Box = require('./neo-components/Box.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,7 +59,7 @@ const CollectionSkeleton = () => {
     }
   };
 
-  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       position: "relative",
       height: "200px",
@@ -77,11 +77,11 @@ const CollectionSkeleton = () => {
         }
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: getSquareStyles("1")
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: getSquareStyles("2")
-  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: getSquareStyles("3")
   }));
 };