@blerp/design 1.3.17 → 1.4.1

package/dist/esm/UserPage/LibraryControls.js

@@ -1,20 +1,131 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { Stack, Text, Box, Input, Button, Popover, IconButton, Divider } from '../index.js';
-import { InputAdornment } from '@mui/material';
-import React, { useContext, useState, useRef } from 'react';
-import '@mui/icons-material/FilterAltRounded';
-import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
-import ViewModuleRoundedIcon from '@mui/icons-material/ViewModuleRounded';
-import '@mui/icons-material/SettingsRounded';
-import { ThemeContext } from 'styled-components';
-import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
-import SortRoundedIcon from '@mui/icons-material/SortRounded';
-import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import React, { useState, useRef } from 'react';
 import { useWindowSize } from '../ScreenSizeHook.js';
-import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
-import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
-const LibraryControls = _ref => {
+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 IconPerson = _ref => {
+  let {
+    color = "currentColor"
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+  }));
+};
+
+const IconSearch = _ref2 => {
+  let {
+    color = "currentColor"
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+  }));
+};
+
+const IconClose = _ref3 => {
+  let {
+    color = "currentColor",
+    onClick,
+    style
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color,
+    onClick: onClick,
+    style: _objectSpread({
+      cursor: "pointer"
+    }, style)
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+  }));
+};
+
+const IconMenu = _ref4 => {
+  let {
+    color = "currentColor"
+  } = _ref4;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+  }));
+};
+
+const IconGrid = _ref5 => {
+  let {
+    color = "currentColor"
+  } = _ref5;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"
+  }));
+};
+
+const IconMoreHoriz = _ref6 => {
+  let {
+    color = "currentColor"
+  } = _ref6;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+  }));
+};
+
+const IconSort = _ref7 => {
+  let {
+    color = "currentColor"
+  } = _ref7;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"
+  }));
+};
+
+const IconChevronRight = _ref8 => {
+  let {
+    color = "currentColor"
+  } = _ref8;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+  }));
+};
+
+const LibraryControls = _ref9 => {
   var _activeBoard$ownerObj;
 
   let {
@@ -26,8 +137,7 @@ const LibraryControls = _ref => {
     setShowSearch,
     setActiveBoard,
     hideLayoutButtons
-  } = _ref;
-  useContext(ThemeContext);
+  } = _ref9;
   const size = useWindowSize();
   const [anchor, setAnchor] = useState(null);
   const [filterAnchor, setFilterAnchor] = useState(null);
@@ -36,16 +146,19 @@ const LibraryControls = _ref => {
   const [inputValue, setInputValue] = useState("");
   const open = Boolean(anchor);
   const openFilter = Boolean(filterAnchor);
-  let timeout = null;
+  let timeout = null; // Get theme color for icons (you may need to adjust based on your theme setup)
+
+  const iconColor = "#333"; // notBlack.main equivalent
+
+  const greyColor = "#888"; // grey6.main equivalent
+
   return /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     alignItems: "center",
     justifyContent: "space-around",
     marginTop: size.width <= 675 && "20px"
-  }, activeBoard && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PersonRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, activeBoard && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPerson, {
+    color: iconColor
   }), /*#__PURE__*/React.createElement(Text, null, activeBoard === null || activeBoard === void 0 ? void 0 : (_activeBoard$ownerObj = activeBoard.ownerObject) === null || _activeBoard$ownerObj === void 0 ? void 0 : _activeBoard$ownerObj.username)), !hideSearch && /*#__PURE__*/React.createElement(Box, {
     sx: {
       display: "flex",
@@ -59,14 +172,12 @@ const LibraryControls = _ref => {
     value: inputValue,
     onChange: e => {
       setInputValue(e.target.value);
-      clearTimeout(timeout); // Make a new timeout set to go off in 1000ms (1 second)
-
+      clearTimeout(timeout);
       timeout = setTimeout(() => {
         setSearchTerm(e.target.value);
       }, 1000);
     },
     onKeyDown: e => {
-      // e.preventDefault();
       if (e.key === "Enter") {
         setShowSearch(true);
       }
@@ -85,20 +196,15 @@ const LibraryControls = _ref => {
         color: "grey6.main",
         borderColor: "grey6.main"
       },
-      startAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
-        position: "start"
-      }, /*#__PURE__*/React.createElement(SearchRoundedIcon, {
-        sx: {
-          color: "grey6.main"
-        }
+      startAdornment: /*#__PURE__*/React.createElement(Stack, {
+        position: "center"
+      }, /*#__PURE__*/React.createElement(IconSearch, {
+        color: greyColor
       })),
-      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
+      endAdornment: /*#__PURE__*/React.createElement(Stack, {
         position: "end"
-      }, inputValue && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CloseRoundedIcon, {
-        sx: {
-          cursor: "pointer",
-          color: "grey6.main"
-        },
+      }, inputValue && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconClose, {
+        color: greyColor,
         onClick: () => {
           setSearchTerm("");
           setInputValue("");
@@ -184,21 +290,17 @@ const LibraryControls = _ref => {
     color: "notBlack",
     ref: filterRef,
     onClick: () => setFilterAnchor(filterRef.current)
-  }, /*#__PURE__*/React.createElement(Text, null, "Sort"), /*#__PURE__*/React.createElement(SortRoundedIcon, null)), /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(MenuRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
-  })), /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(ViewModuleRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, /*#__PURE__*/React.createElement(Text, null, "Sort"), /*#__PURE__*/React.createElement(IconSort, {
+    color: iconColor
+  })), /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(IconMenu, {
+    color: iconColor
+  })), /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(IconGrid, {
+    color: iconColor
   }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
     ref: divRef,
     onClick: () => setAnchor(divRef.current)
-  }, /*#__PURE__*/React.createElement(MoreHorizRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, /*#__PURE__*/React.createElement(IconMoreHoriz, {
+    color: iconColor
   })), /*#__PURE__*/React.createElement(Popover, {
     id: "library-controls-popover",
     open: open,
@@ -238,10 +340,8 @@ const LibraryControls = _ref => {
         backgroundColor: "grey2.main"
       }
     }
-  }, /*#__PURE__*/React.createElement(MenuRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, /*#__PURE__*/React.createElement(IconMenu, {
+    color: iconColor
   }), /*#__PURE__*/React.createElement(Text, {
     color: "notBlack.main",
     margin: "0 15px",
@@ -257,10 +357,8 @@ const LibraryControls = _ref => {
         backgroundColor: "grey2.main"
       }
     }
-  }, /*#__PURE__*/React.createElement(ViewModuleRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, /*#__PURE__*/React.createElement(IconGrid, {
+    color: iconColor
   }), /*#__PURE__*/React.createElement(Text, {
     color: "notBlack.main",
     margin: "0 15px",
@@ -283,19 +381,15 @@ const LibraryControls = _ref => {
     }
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row"
-  }, /*#__PURE__*/React.createElement(SortRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, /*#__PURE__*/React.createElement(IconSort, {
+    color: iconColor
   }), /*#__PURE__*/React.createElement(Text, {
     fontSize: "18px",
     color: "notBlack.main",
     margin: "0 15px"
-  }, "Sort")), /*#__PURE__*/React.createElement(ChevronRightRoundedIcon, {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, "Sort")), /*#__PURE__*/React.createElement(IconChevronRight, {
+    color: iconColor
   }))))));
 };
 
-export default LibraryControls;
+export { LibraryControls as default };

package/dist/esm/UserPage/UserLibraryHeader.js

@@ -1,10 +1,13 @@
-import { CancelRounded } from '@mui/icons-material';
-import React, { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React from 'react';
 import { Box, Stack, Button } from '../index.js';
 import { useWindowSize } from '../ScreenSizeHook.js';
 import LibraryControls from './LibraryControls.js';
 
+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 UserLibraryHeader = _ref => {
   let {
     sx,
@@ -21,15 +24,13 @@ const UserLibraryHeader = _ref => {
     hideLayoutButtons
   } = _ref;
   const size = useWindowSize();
-  useContext(ThemeContext);
   return /*#__PURE__*/React.createElement(Box, {
-    sx: {
+    sx: _objectSpread({
       backgroundColor: "grey2.main",
       position: "sticky",
       top: size.width >= 1000 ? "80px" : "110px",
-      zIndex: "5",
-      ...sx
-    }
+      zIndex: "5"
+    }, sx)
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     style: {
@@ -61,7 +62,14 @@ const UserLibraryHeader = _ref => {
     },
     variant: tabSelection.includes(tab) ? "contained" : "outlined",
     size: "small",
-    endIcon: tabSelection.includes(tab) && /*#__PURE__*/React.createElement(CancelRounded, null),
+    endIcon: tabSelection.includes(tab) && /*#__PURE__*/React.createElement("svg", {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+    })),
     sx: {
       fontWeight: "normal",
       marginRight: "10px",
@@ -84,4 +92,4 @@ const UserLibraryHeader = _ref => {
   }))));
 };
 
-export default UserLibraryHeader;
+export { UserLibraryHeader as default };

package/dist/esm/UserPage/UserProfileHeader.js

@@ -1,108 +1,127 @@
-import React, { useContext, useState } from 'react';
-import AddRoundedIcon from '@mui/icons-material/AddRounded';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import InstagramIcon from '@mui/icons-material/Instagram';
-import ModeEditRoundedIcon from '@mui/icons-material/ModeEditRounded';
-import PersonAddRoundedIcon from '@mui/icons-material/PersonAddRounded';
-import PinterestIcon from '@mui/icons-material/Pinterest';
-import TwitterIcon from '@mui/icons-material/Twitter';
-import YouTubeIcon from '@mui/icons-material/YouTube';
-import PersonRemoveRoundedIcon from '@mui/icons-material/PersonRemoveRounded';
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState, useEffect } from 'react';
 import { Stack, IconButton, Box, Text, Divider, Button } from '../index.js';
 import { useWindowSize } from '../ScreenSizeHook.js';
-import { ThemeContext } from 'styled-components';
-import { ColorExtractor } from 'react-color-extractor';
+import { extractDominantColor } from '../helpers.js';
+import { useBlerpTheme } from '../Theme.js';
 import { TwitchIcon } from '../Icons/Icons.js';
 
-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(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(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: 'inline-block',
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React.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 = useContext(ThemeContext);
+  } = _ref2;
+  const theme = useBlerpTheme();
   const [profileColors, setProfileColors] = useState(null);
   const size = useWindowSize();
+  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) {
+      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.createElement(TwitchIcon, {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+            sx: commonSx
           });
           break;
 
         case "twitter":
-          icon = /*#__PURE__*/React.createElement(TwitterIcon, {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React.createElement(Icon, {
+            path: paths.twitter,
+            sx: commonSx
           });
           break;
 
         case "youtube":
-          icon = /*#__PURE__*/React.createElement(YouTubeIcon, {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React.createElement(Icon, {
+            path: paths.youtube,
+            sx: commonSx
           });
           break;
 
         case "instagram":
-          icon = /*#__PURE__*/React.createElement(InstagramIcon, {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React.createElement(Icon, {
+            path: paths.instagram,
+            sx: commonSx
           });
           break;
 
         case "pinterest":
-          icon = /*#__PURE__*/React.createElement(PinterestIcon, {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React.createElement(Icon, {
+            path: paths.pinterest,
+            sx: commonSx
           });
           break;
 
         case "facebook":
-          icon = /*#__PURE__*/React.createElement(FacebookIcon, {
-            sx: {
-              color: "notBlack.main",
-              cursor: "pointer",
-              ":hover": {
-                color: "starling.main"
-              }
-            }
+          icon = /*#__PURE__*/React.createElement(Icon, {
+            path: paths.facebook,
+            sx: commonSx
           });
           break;
       }
@@ -120,10 +139,7 @@ const UserProfileHeader = _ref => {
     });
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
     width: "100%",
     sx: {
       height: "250px",
@@ -149,8 +165,9 @@ const UserProfileHeader = _ref => {
       }
     },
     onClick: () => openEdit()
-  }, /*#__PURE__*/React.createElement(ModeEditRoundedIcon, {
-    fontSize: "16px"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: paths.edit,
+    size: "16px"
   })), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     width: "80%",
@@ -196,12 +213,15 @@ const UserProfileHeader = _ref => {
         }
       });
     }
-  }, isOwner ? /*#__PURE__*/React.createElement(ModeEditRoundedIcon, {
-    fontSize: "small"
-  }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React.createElement(PersonRemoveRoundedIcon, {
-    fontSize: "small"
-  }) : /*#__PURE__*/React.createElement(PersonAddRoundedIcon, {
-    fontSize: "small"
+  }, isOwner ? /*#__PURE__*/React.createElement(Icon, {
+    path: paths.edit,
+    size: "20px"
+  }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React.createElement(Icon, {
+    path: paths.personRemove,
+    size: "20px"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    path: paths.personAdd,
+    size: "20px"
   })), /*#__PURE__*/React.createElement("img", {
     style: {
       borderRadius: "50%",
@@ -211,7 +231,7 @@ 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
+    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.createElement(Stack, {
     marginLeft: "20px"
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -260,9 +280,10 @@ const UserProfileHeader = _ref => {
       }
     },
     onClick: () => openEdit()
-  }, /*#__PURE__*/React.createElement(AddRoundedIcon, {
-    fontSize: "16px"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: paths.add,
+    size: "16px"
   })) : /*#__PURE__*/React.createElement(React.Fragment, null), renderSocialLinks()))));
 };
 
-export default UserProfileHeader;
+export { UserProfileHeader as default };

package/dist/esm/UsernameWithPopout.js

@@ -1,7 +1,11 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useState } from 'react';
 import { Stack, Popover, Text } from './index.js';
 import { UserCard } from './UserCard.js';
 
+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 UsernameWithPopout = _ref => {
   let {
     user,
@@ -64,7 +68,7 @@ const UsernameWithPopout = _ref => {
     collapsed: collapsed,
     user: user
   })), /*#__PURE__*/React.createElement(Text, {
-    sx: {
+    sx: _objectSpread({
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main",
@@ -75,9 +79,8 @@ const UsernameWithPopout = _ref => {
       cursor: "pointer",
       "&:hover": {
         textDecoration: "underline"
-      },
-      ...textStyle
-    },
+      }
+    }, textStyle),
     onClick: onUsernameClick
   }, user === null || user === void 0 ? void 0 : user.username));
 };