@blerp/design 1.3.17 → 1.4.1

package/dist/cjs/UserPage/UserProfileHeader.js

@@ -1,128 +1,141 @@
 'use strict';
 
+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 AddRoundedIcon = require('@mui/icons-material/AddRounded');
-var FacebookIcon = require('@mui/icons-material/Facebook');
-var InstagramIcon = require('@mui/icons-material/Instagram');
-var ModeEditRoundedIcon = require('@mui/icons-material/ModeEditRounded');
-var PersonAddRoundedIcon = require('@mui/icons-material/PersonAddRounded');
-var PinterestIcon = require('@mui/icons-material/Pinterest');
-var TwitterIcon = require('@mui/icons-material/Twitter');
-var YouTubeIcon = require('@mui/icons-material/YouTube');
-var PersonRemoveRoundedIcon = require('@mui/icons-material/PersonRemoveRounded');
 var index = require('../index.js');
 var ScreenSizeHook = require('../ScreenSizeHook.js');
-var styled = require('styled-components');
-var reactColorExtractor = require('react-color-extractor');
+var helpers = require('../helpers.js');
+var Theme = require('../Theme.js');
 var Icons = require('../Icons/Icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
-var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
-var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon);
-var ModeEditRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ModeEditRoundedIcon);
-var PersonAddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonAddRoundedIcon);
-var PinterestIcon__default = /*#__PURE__*/_interopDefaultLegacy(PinterestIcon);
-var TwitterIcon__default = /*#__PURE__*/_interopDefaultLegacy(TwitterIcon);
-var YouTubeIcon__default = /*#__PURE__*/_interopDefaultLegacy(YouTubeIcon);
-var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
 
-const UserProfileHeader = _ref => {
-  var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
+const _excluded = ["path", "sx", "size"];
+
+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 Icon = _ref => {
+  let {
+    path,
+    sx,
+    size = "24px"
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, _extends__default["default"]({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: 'inline-block',
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: path
+  }));
+};
+
+const paths = {
+  add: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z",
+  edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+  personAdd: "M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
+  personRemove: "M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
+  // Simplified
+  facebook: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z",
+  twitter: "M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.48.75 2.78 1.89 3.54-.7 0-1.35-.2-1.92-.53v.05c0 2.03 1.44 3.73 3.35 4.12-.35.1-.73.15-1.12.15-.27 0-.54-.03-.8-.08.54 1.66 2.08 2.87 3.91 2.91-1.42 1.12-3.23 1.78-5.2 1.78-.34 0-.67-.02-1-.06C3.04 20.1 5.31 20.8 7.72 20.8c9.27 0 14.34-7.68 14.34-14.34 0-.22 0-.44-.01-.66.98-.7 1.84-1.59 2.51-2.6z",
+  instagram: "M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z",
+  youtube: "M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z",
+  pinterest: "M12.2 2C7.12 2 3 6.12 3 11.2c0 3.9 2.42 7.23 5.87 8.58-.08-.72-.15-1.83.03-2.62.16-.71 1.05-4.44 1.05-4.44s-.27-.54-.27-1.33c0-1.25.72-2.18 1.63-2.18.77 0 1.14.58 1.14 1.27 0 .77-.49 1.93-.74 3-.21.87.44 1.58 1.29 1.58 1.55 0 2.74-1.64 2.74-4 0-2.09-1.5-3.55-3.64-3.55-2.48 0-3.93 1.86-3.93 3.77 0 .75.29 1.55.65 1.99.07.09.08.17.06.25-.07.28-.22.88-.25.99-.04.16-.14.2-.32.11-1.19-.55-1.93-2.3-1.93-3.7 0-3.02 2.2-5.78 6.32-5.78 3.32 0 5.89 2.36 5.89 5.52 0 3.3-2.08 5.96-4.97 5.96-.97 0-1.88-.5-2.2-.1l-.59 2.27c-.22.82-.8 1.85-1.19 2.48 1.1.34 2.26.52 3.47.52 5.08 0 9.2-4.12 9.2-9.2C21.4 6.12 17.28 2 12.2 2z"
+};
+
+const UserProfileHeader = _ref2 => {
+  var _userData$profileImag3, _userData$profileImag4, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag5, _userData$profileImag6, _userData$socialLinks2;
 
   let {
     followUser,
     isOwner,
     userData,
     openEdit
-  } = _ref;
-  const theme = React.useContext(styled.ThemeContext);
+  } = _ref2;
+  const theme = Theme.useBlerpTheme();
   const [profileColors, setProfileColors] = React.useState(null);
   const size = ScreenSizeHook.useWindowSize();
+  React.useEffect(() => {
+    var _userData$profileImag, _userData$profileImag2;
+
+    if (userData !== null && userData !== void 0 && (_userData$profileImag = userData.profileImage) !== null && _userData$profileImag !== void 0 && (_userData$profileImag2 = _userData$profileImag.original) !== null && _userData$profileImag2 !== void 0 && _userData$profileImag2.url) {
+      helpers.extractDominantColor(userData.profileImage.original.url, setProfileColors);
+    }
+  }, [userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url]);
 
   const renderSocialLinks = () => {
     var _userData$socialLinks;
 
     return userData === null || userData === void 0 ? void 0 : (_userData$socialLinks = userData.socialLinks) === null || _userData$socialLinks === void 0 ? void 0 : _userData$socialLinks.map((socialItem, index) => {
       let icon;
+      const commonSx = {
+        color: "notBlack.main",
+        cursor: "pointer",
+        ":hover": {
+          color: "starling.main"
+        }
+      };
 
       switch (socialItem.name) {
         case "twitch":
-          icon = /*#__PURE__*/React__default['default'].createElement(Icons.TwitchIcon, {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React__default["default"].createElement(Icons.TwitchIcon, {
+            sx: commonSx
           });
           break;
 
         case "twitter":
-          icon = /*#__PURE__*/React__default['default'].createElement(TwitterIcon__default['default'], {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
+            path: paths.twitter,
+            sx: commonSx
           });
           break;
 
         case "youtube":
-          icon = /*#__PURE__*/React__default['default'].createElement(YouTubeIcon__default['default'], {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
+            path: paths.youtube,
+            sx: commonSx
           });
           break;
 
         case "instagram":
-          icon = /*#__PURE__*/React__default['default'].createElement(InstagramIcon__default['default'], {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
+            path: paths.instagram,
+            sx: commonSx
           });
           break;
 
         case "pinterest":
-          icon = /*#__PURE__*/React__default['default'].createElement(PinterestIcon__default['default'], {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
+            path: paths.pinterest,
+            sx: commonSx
           });
           break;
 
         case "facebook":
-          icon = /*#__PURE__*/React__default['default'].createElement(FacebookIcon__default['default'], {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
+            path: paths.facebook,
+            sx: commonSx
           });
           break;
       }
 
-      return /*#__PURE__*/React__default['default'].createElement("a", {
+      return /*#__PURE__*/React__default["default"].createElement("a", {
         key: socialItem.name + index,
         target: "_blank",
         href: socialItem.link,
@@ -135,10 +148,7 @@ const UserProfileHeader = _ref => {
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
-    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
-    getColors: colors => setProfileColors(colors)
-  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     width: "100%",
     sx: {
       height: "250px",
@@ -151,7 +161,7 @@ const UserProfileHeader = _ref => {
       position: "relative",
       overflow: "hidden"
     }
-  }, isOwner && /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, isOwner && /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     sx: {
       position: "absolute",
       top: "10px",
@@ -164,9 +174,10 @@ const UserProfileHeader = _ref => {
       }
     },
     onClick: () => openEdit()
-  }, /*#__PURE__*/React__default['default'].createElement(ModeEditRoundedIcon__default['default'], {
-    fontSize: "16px"
-  })), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.edit,
+    size: "16px"
+  })), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     width: "80%",
     maxWidth: "1300px",
@@ -175,7 +186,7 @@ const UserProfileHeader = _ref => {
     justifyContent: "space-between",
     alignItems: "flex-end",
     height: "50%"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
     sx: {
       background: "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
       boxShadow: "5px 5px 15px #0000009c"
@@ -183,12 +194,12 @@ const UserProfileHeader = _ref => {
     borderRadius: "8px",
     width: "400px",
     height: "100%"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     height: "100%",
     alignItems: "center",
     position: "relative"
-  }, /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     sx: {
       position: "absolute",
       padding: "5px",
@@ -211,13 +222,16 @@ const UserProfileHeader = _ref => {
         }
       });
     }
-  }, isOwner ? /*#__PURE__*/React__default['default'].createElement(ModeEditRoundedIcon__default['default'], {
-    fontSize: "small"
-  }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React__default['default'].createElement(PersonRemoveRoundedIcon__default['default'], {
-    fontSize: "small"
-  }) : /*#__PURE__*/React__default['default'].createElement(PersonAddRoundedIcon__default['default'], {
-    fontSize: "small"
-  })), /*#__PURE__*/React__default['default'].createElement("img", {
+  }, isOwner ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.edit,
+    size: "20px"
+  }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.personRemove,
+    size: "20px"
+  }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.personAdd,
+    size: "20px"
+  })), /*#__PURE__*/React__default["default"].createElement("img", {
     style: {
       borderRadius: "50%",
       objectFit: "cover",
@@ -226,20 +240,20 @@ const UserProfileHeader = _ref => {
       margin: "0 20px"
     },
     alt: "profile img",
-    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
-  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag5 = userData.profileImage) === null || _userData$profileImag5 === void 0 ? void 0 : (_userData$profileImag6 = _userData$profileImag5.original) === null || _userData$profileImag6 === void 0 ? void 0 : _userData$profileImag6.url
+  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     marginLeft: "20px"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     noWrap: true,
     maxWidth: "200px",
     color: "white.override",
     lineHeight: "51px",
     fontSize: size.width <= 600 ? "30px" : "47px"
-  }, userData === null || userData === void 0 ? void 0 : userData.username)), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, userData === null || userData === void 0 ? void 0 : userData.username)), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
-    divider: /*#__PURE__*/React__default['default'].createElement(index.Divider, {
+    divider: /*#__PURE__*/React__default["default"].createElement(index.Divider, {
       orientation: "vertical",
       flexItem: true,
       sx: {
@@ -247,13 +261,13 @@ const UserProfileHeader = _ref => {
         margin: "5px"
       }
     })
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     color: "white.override",
     fontSize: "16px"
-  }, userData === null || userData === void 0 ? void 0 : userData.followerCount, " Followers"), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, userData === null || userData === void 0 ? void 0 : userData.followerCount, " Followers"), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     color: "white.override",
     fontSize: "16px"
-  }, userData === null || userData === void 0 ? void 0 : userData.followingCount, " Following"))))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, userData === null || userData === void 0 ? void 0 : userData.followingCount, " Following"))))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     backgroundColor: "grey2.main",
     borderRadius: "8px",
@@ -261,10 +275,10 @@ const UserProfileHeader = _ref => {
     alignItems: "center",
     marginTop: "20px",
     justifyContent: "space-around"
-  }, isOwner ? (userData === null || userData === void 0 ? void 0 : (_userData$socialLinks2 = userData.socialLinks) === null || _userData$socialLinks2 === void 0 ? void 0 : _userData$socialLinks2.length) === 0 ? /*#__PURE__*/React__default['default'].createElement(index.Button, {
+  }, isOwner ? (userData === null || userData === void 0 ? void 0 : (_userData$socialLinks2 = userData.socialLinks) === null || _userData$socialLinks2 === void 0 ? void 0 : _userData$socialLinks2.length) === 0 ? /*#__PURE__*/React__default["default"].createElement(index.Button, {
     variant: "text",
     onClick: () => openEdit()
-  }, "+ New Social") : /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, "+ New Social") : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     sx: {
       cursor: "pointer",
       color: "notBlack.main",
@@ -275,9 +289,10 @@ const UserProfileHeader = _ref => {
       }
     },
     onClick: () => openEdit()
-  }, /*#__PURE__*/React__default['default'].createElement(AddRoundedIcon__default['default'], {
-    fontSize: "16px"
-  })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), renderSocialLinks()))));
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.add,
+    size: "16px"
+  })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null), renderSocialLinks()))));
 };
 
 module.exports = UserProfileHeader;

package/dist/cjs/UsernameWithPopout.js

@@ -2,14 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var index = require('./index.js');
 var UserCard = require('./UserCard.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+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 UsernameWithPopout = _ref => {
   let {
     user,
@@ -21,7 +26,7 @@ const UsernameWithPopout = _ref => {
   } = _ref;
   const [userCardRef, setUserCardRef] = React.useState(null);
   const openUserCard = Boolean(userCardRef);
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     onClick: e => {
       setUserCardRef(e.target);
@@ -34,7 +39,7 @@ const UsernameWithPopout = _ref => {
     onMouseLeave: e => {
       setUserCardRef(null);
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Popover, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Popover, {
     open: openUserCard,
     anchorEl: userCardRef,
     anchorOrigin: {
@@ -65,14 +70,14 @@ const UsernameWithPopout = _ref => {
       }
     } // onClose={() => setUserCardRef(null)}
 
-  }, /*#__PURE__*/React__default['default'].createElement(UserCard.UserCard, {
+  }, /*#__PURE__*/React__default["default"].createElement(UserCard.UserCard, {
     onUsernameClick: onUsernameClick,
     onFollowerClick: onFollowerClick,
     onCreatedClick: onCreatedClick,
     collapsed: collapsed,
     user: user
-  })), /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    sx: {
+  })), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    sx: _objectSpread({
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main",
@@ -83,9 +88,8 @@ const UsernameWithPopout = _ref => {
       cursor: "pointer",
       "&:hover": {
         textDecoration: "underline"
-      },
-      ...textStyle
-    },
+      }
+    }, textStyle),
     onClick: onUsernameClick
   }, user === null || user === void 0 ? void 0 : user.username));
 };

package/dist/cjs/colors.js

@@ -2,6 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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; }
+
 let colors = {
   white: "#ffffff",
   waxing: "#F3F3F3",
@@ -72,10 +82,8 @@ let overrideColors = {
   buntingBlueOverride: colors.buntingBlue,
   popnYellowOverride: colors.popnYellow
 };
-const lightColors = { ...colors,
-  ...overrideColors
-};
-const darkColors = {
+const lightColors = _objectSpread(_objectSpread({}, colors), overrideColors);
+const darkColors = _objectSpread({
   white: colors.black,
   waxwing: colors.grey8Dark,
   grey1: colors.grey1Dark,
@@ -97,9 +105,8 @@ const darkColors = {
   seafoam: colors.seafoam,
   seafoamDark: colors.seafoamDark,
   buntingBlue: colors.buntingBlue,
-  popnYellow: colors.popnYellow,
-  ...overrideColors
-};
+  popnYellow: colors.popnYellow
+}, overrideColors);
 const lightPalette = {
   primary: {
     light: colors.ibisRed,
@@ -362,7 +369,7 @@ const darkPalette = {
 
 exports.darkColors = darkColors;
 exports.darkPalette = darkPalette;
-exports.default = colors;
+exports["default"] = colors;
 exports.lightColors = lightColors;
 exports.lightPalette = lightPalette;
 exports.overrideColors = overrideColors;

package/dist/cjs/helpers.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+// Remove this import:
+
+const extractDominantColor = (imageUrl, callback) => {
+  const img = new Image();
+  img.crossOrigin = "Anonymous";
+  img.src = imageUrl;
+
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0);
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+    let r = 0,
+        g = 0,
+        b = 0;
+
+    for (let i = 0; i < data.length; i += 4) {
+      r += data[i];
+      g += data[i + 1];
+      b += data[i + 2];
+    }
+
+    const pixelCount = data.length / 4;
+    r = Math.floor(r / pixelCount);
+    g = Math.floor(g / pixelCount);
+    b = Math.floor(b / pixelCount);
+    callback(["rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")")]);
+  };
+}; // Custom palette extraction for components that need vibrant/darkVibrant colors
+
+const useCustomPalette = imageUrl => {
+  const [palette, setPalette] = React__default["default"].useState({
+    loading: true,
+    data: {
+      vibrant: null,
+      darkVibrant: null
+    },
+    error: null
+  });
+  React__default["default"].useEffect(() => {
+    if (!imageUrl) {
+      setPalette({
+        loading: false,
+        data: {
+          vibrant: null,
+          darkVibrant: null
+        },
+        error: null
+      });
+      return;
+    }
+
+    const img = new Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+        let r = 0,
+            g = 0,
+            b = 0;
+
+        for (let i = 0; i < data.length; i += 4) {
+          r += data[i];
+          g += data[i + 1];
+          b += data[i + 2];
+        }
+
+        const pixelCount = data.length / 4;
+        r = Math.floor(r / pixelCount);
+        g = Math.floor(g / pixelCount);
+        b = Math.floor(b / pixelCount);
+        const vibrant = "rgb(".concat(Math.min(r + 20, 255), ", ").concat(Math.min(g + 20, 255), ", ").concat(Math.min(b + 20, 255), ")");
+        const darkVibrant = "rgb(".concat(Math.floor(r * 0.6), ", ").concat(Math.floor(g * 0.6), ", ").concat(Math.floor(b * 0.6), ")");
+        setPalette({
+          loading: false,
+          data: {
+            vibrant,
+            darkVibrant
+          },
+          error: null
+        });
+      } catch (error) {
+        console.error("Palette extraction failed:", error);
+        setPalette({
+          loading: false,
+          data: {
+            vibrant: null,
+            darkVibrant: null
+          },
+          error: error.message
+        });
+      }
+    };
+
+    img.onerror = () => {
+      setPalette({
+        loading: false,
+        data: {
+          vibrant: null,
+          darkVibrant: null
+        },
+        error: "Image failed to load"
+      });
+    };
+  }, [imageUrl]);
+  return palette;
+};
+
+exports.extractDominantColor = extractDominantColor;
+exports.useCustomPalette = useCustomPalette;