@blerp/design 1.4.5 → 1.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/cjs/Blerp/BlerpImageRow.js +22 -15
  2. package/dist/cjs/Blerp/BlerpSavePopup.js +20 -11
  3. package/dist/cjs/Blerp/BlerpTitleRow.js +16 -10
  4. package/dist/cjs/Blerp/BlerpTopRow.js +45 -27
  5. package/dist/cjs/Blerp.js +8 -20
  6. package/dist/cjs/BlerpListViewPremium.js +25 -21
  7. package/dist/cjs/BlerpListViewSkeleton.js +6 -6
  8. package/dist/cjs/CollectionCard.js +27 -36
  9. package/dist/cjs/CollectionListViewPremium.js +17 -14
  10. package/dist/cjs/CollectionSkeleton.js +5 -5
  11. package/dist/cjs/Dropdown.js +27 -24
  12. package/dist/cjs/EllipsisLoader.js +4 -3
  13. package/dist/cjs/GroupCard.js +8 -7
  14. package/dist/cjs/ImageEditor.js +4 -1
  15. package/dist/cjs/ImageUpload.js +23 -16
  16. package/dist/cjs/NewBlerp.js +41 -37
  17. package/dist/cjs/NewCollectionModal.js +27 -22
  18. package/dist/cjs/PremiumCollectionCard.js +10 -8
  19. package/dist/cjs/PurchaseModals/CheckoutModal.js +7 -3
  20. package/dist/cjs/PurchaseModals/PremiumBlerpCheckoutModal.js +7 -3
  21. package/dist/cjs/PurchaseModals/PremiumCollectionCheckoutModal.js +7 -3
  22. package/dist/cjs/PurchaseModals/PremiumSubscriptionCheckoutModal.js +7 -3
  23. package/dist/cjs/ReactionButtons.js +10 -5
  24. package/dist/cjs/Theme.js +6 -132
  25. package/dist/cjs/Toggle.js +2 -1
  26. package/dist/cjs/UserCard.js +13 -12
  27. package/dist/cjs/UserPage/LibraryControls.js +40 -29
  28. package/dist/cjs/UserPage/UserLibraryHeader.js +7 -96
  29. package/dist/cjs/UserPage/UserProfileHeader.js +6 -291
  30. package/dist/cjs/UsernameWithPopout.js +6 -4
  31. package/dist/cjs/icons.js +4 -1
  32. package/dist/cjs/index.js +135 -216
  33. package/dist/cjs/neo-components/Navigation.js +0 -2
  34. package/dist/cjs/neo-components/withSx.js +0 -1
  35. package/dist/cjs/neo-utils/sxToStyle.js +0 -2
  36. package/dist/esm/Blerp/BlerpImageRow.js +7 -2
  37. package/dist/esm/Blerp/BlerpSavePopup.js +9 -2
  38. package/dist/esm/Blerp/BlerpTitleRow.js +6 -2
  39. package/dist/esm/Blerp/BlerpTopRow.js +19 -3
  40. package/dist/esm/Blerp.js +3 -14
  41. package/dist/esm/BlerpListViewPremium.js +6 -2
  42. package/dist/esm/BlerpListViewSkeleton.js +1 -1
  43. package/dist/esm/CollectionCard.js +8 -17
  44. package/dist/esm/CollectionListViewPremium.js +5 -2
  45. package/dist/esm/CollectionSkeleton.js +1 -1
  46. package/dist/esm/Dropdown.js +4 -1
  47. package/dist/esm/EllipsisLoader.js +3 -2
  48. package/dist/esm/GroupCard.js +2 -1
  49. package/dist/esm/ImageEditor.js +2 -1
  50. package/dist/esm/ImageUpload.js +7 -2
  51. package/dist/esm/NewBlerp.js +5 -1
  52. package/dist/esm/NewCollectionModal.js +8 -3
  53. package/dist/esm/PremiumCollectionCard.js +4 -2
  54. package/dist/esm/PurchaseModals/CheckoutModal.js +4 -2
  55. package/dist/esm/PurchaseModals/PremiumBlerpCheckoutModal.js +4 -2
  56. package/dist/esm/PurchaseModals/PremiumCollectionCheckoutModal.js +4 -2
  57. package/dist/esm/PurchaseModals/PremiumSubscriptionCheckoutModal.js +4 -2
  58. package/dist/esm/ReactionButtons.js +5 -2
  59. package/dist/esm/Theme.js +5 -130
  60. package/dist/esm/Toggle.js +2 -2
  61. package/dist/esm/UserCard.js +2 -1
  62. package/dist/esm/UserPage/LibraryControls.js +20 -11
  63. package/dist/esm/UserPage/UserLibraryHeader.js +6 -92
  64. package/dist/esm/UserPage/UserProfileHeader.js +5 -285
  65. package/dist/esm/UsernameWithPopout.js +3 -1
  66. package/dist/esm/icons.js +2 -1
  67. package/dist/esm/index.js +44 -129
  68. package/dist/esm/neo-components/Navigation.js +0 -2
  69. package/dist/esm/neo-components/ThemeProvider.js +1 -1
  70. package/dist/esm/neo-components/withSx.js +0 -1
  71. package/dist/esm/neo-utils/sxToStyle.js +0 -2
  72. package/package.json +31 -9
@@ -1,102 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- var React = require('react');
5
- var index = require('../index.js');
6
- var ScreenSizeHook = require('../ScreenSizeHook.js');
7
- var LibraryControls = require('./LibraryControls.js');
3
+ Object.defineProperty(exports, '__esModule', { value: true });
8
4
 
9
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
5
+ // TODO: If this component is needed, import dependencies directly (not from ../index)
10
6
 
11
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
12
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
-
14
- 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; }
15
-
16
- 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; }
17
-
18
- const UserLibraryHeader = _ref => {
19
- let {
20
- sx,
21
- tabs,
22
- tabSelection,
23
- setTabSelection,
24
- setShowSearch,
25
- setSearchTerm,
26
- searchTerm,
27
- setActiveBoard,
28
- hideSearch,
29
- setSort,
30
- sort,
31
- hideLayoutButtons
32
- } = _ref;
33
- const size = ScreenSizeHook.useWindowSize();
34
- return /*#__PURE__*/React__default["default"].createElement(index.Box, {
35
- sx: _objectSpread({
36
- backgroundColor: "grey2.main",
37
- position: "sticky",
38
- top: size.width >= 1000 ? "80px" : "110px",
39
- zIndex: "5"
40
- }, sx)
41
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
42
- direction: "row",
43
- style: {
44
- padding: "20px 10px",
45
- maxWidth: "1300px",
46
- margin: "0 auto",
47
- width: "95%"
48
- }
49
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
50
- direction: "row",
51
- width: "100%",
52
- justifyContent: size.width <= 675 ? "center" : "space-between",
53
- alignItems: "center",
54
- flexWrap: "wrap"
55
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
56
- direction: "row",
57
- flexWrap: "inherit"
58
- }, tabs === null || tabs === void 0 ? void 0 : tabs.map(tab => /*#__PURE__*/React__default["default"].createElement(index.Button, {
59
- key: "tab-".concat(tab),
60
- onClick: () => {
61
- setActiveBoard(null);
62
-
63
- if (tabSelection.includes(tab)) {
64
- let newTabs = tabSelection.filter(item => item !== tab);
65
- setTabSelection(newTabs);
66
- } else {
67
- setTabSelection([...tabSelection, tab]);
68
- }
69
- },
70
- variant: tabSelection.includes(tab) ? "contained" : "outlined",
71
- size: "small",
72
- endIcon: tabSelection.includes(tab) && /*#__PURE__*/React__default["default"].createElement("svg", {
73
- width: "18",
74
- height: "18",
75
- viewBox: "0 0 24 24",
76
- fill: "currentColor"
77
- }, /*#__PURE__*/React__default["default"].createElement("path", {
78
- 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"
79
- })),
80
- sx: {
81
- fontWeight: "normal",
82
- marginRight: "10px",
83
- marginBottom: "10px",
84
- backgroundColor: tabSelection.includes(tab) && "grey4.main"
85
- },
86
- color: tabSelection.includes(tab) ? "grey3" : "notBlack",
87
- disableElevation: true
88
- }, tab))), /*#__PURE__*/React__default["default"].createElement(LibraryControls, {
89
- currentSort: sort,
90
- setActiveBoard: setActiveBoard,
91
- setSort: value => {
92
- setSort(value); // refetch({ variables: options });
93
- },
94
- searchTerm: searchTerm,
95
- hideSearch: hideSearch,
96
- setSearchTerm: setSearchTerm,
97
- setShowSearch: setShowSearch,
98
- hideLayoutButtons: hideLayoutButtons
99
- }))));
7
+ const UserProfileHeader = () => {
8
+ return null;
100
9
  };
101
10
 
102
- module.exports = UserLibraryHeader;
11
+ var UserProfileHeader$1 = UserProfileHeader;
12
+
13
+ exports["default"] = UserProfileHeader$1;
@@ -1,298 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var _extends = require('@babel/runtime/helpers/extends');
4
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
6
- var React = require('react');
7
- var index = require('../index.js');
8
- var ScreenSizeHook = require('../ScreenSizeHook.js');
9
- var helpers = require('../helpers.js');
10
- var Theme = require('../Theme.js');
11
- var Icons = require('../Icons/Icons.js');
3
+ Object.defineProperty(exports, '__esModule', { value: true });
12
4
 
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
5
+ // TODO: If this component is needed, import dependencies directly (not from ../index)
14
6
 
15
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
16
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
17
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
-
20
- const _excluded = ["path", "sx", "size"];
21
-
22
- 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; }
23
-
24
- 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; }
25
-
26
- const Icon = _ref => {
27
- let {
28
- path,
29
- sx,
30
- size = "24px"
31
- } = _ref,
32
- props = _objectWithoutProperties__default["default"](_ref, _excluded);
33
-
34
- return /*#__PURE__*/React__default["default"].createElement(index.Box, _extends__default["default"]({
35
- component: "svg",
36
- viewBox: "0 0 24 24",
37
- width: size,
38
- height: size,
39
- fill: "currentColor",
40
- sx: _objectSpread({
41
- display: 'inline-block',
42
- flexShrink: 0
43
- }, sx)
44
- }, props), /*#__PURE__*/React__default["default"].createElement("path", {
45
- d: path
46
- }));
7
+ const UserProfileHeader = () => {
8
+ return null;
47
9
  };
48
10
 
49
- const paths = {
50
- 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",
51
- 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",
52
- 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",
53
- 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",
54
- // Simplified
55
- 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",
56
- 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",
57
- 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",
58
- 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",
59
- 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"
60
- };
61
-
62
- const UserProfileHeader = _ref2 => {
63
- var _userData$profileImag3, _userData$profileImag4, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag5, _userData$profileImag6, _userData$socialLinks2;
64
-
65
- let {
66
- followUser,
67
- isOwner,
68
- userData,
69
- openEdit
70
- } = _ref2;
71
- const theme = Theme.useBlerpTheme();
72
- const [profileColors, setProfileColors] = React.useState(null);
73
- const size = ScreenSizeHook.useWindowSize();
74
- React.useEffect(() => {
75
- var _userData$profileImag, _userData$profileImag2;
76
-
77
- 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) {
78
- helpers.extractDominantColor(userData.profileImage.original.url, setProfileColors);
79
- }
80
- }, [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]);
81
-
82
- const renderSocialLinks = () => {
83
- var _userData$socialLinks;
84
-
85
- return userData === null || userData === void 0 ? void 0 : (_userData$socialLinks = userData.socialLinks) === null || _userData$socialLinks === void 0 ? void 0 : _userData$socialLinks.map((socialItem, index) => {
86
- let icon;
87
- const commonSx = {
88
- color: "notBlack.main",
89
- cursor: "pointer",
90
- ":hover": {
91
- color: "starling.main"
92
- }
93
- };
94
-
95
- switch (socialItem.name) {
96
- case "twitch":
97
- icon = /*#__PURE__*/React__default["default"].createElement(Icons.TwitchIcon, {
98
- sx: commonSx
99
- });
100
- break;
101
-
102
- case "twitter":
103
- icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
104
- path: paths.twitter,
105
- sx: commonSx
106
- });
107
- break;
108
-
109
- case "youtube":
110
- icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
111
- path: paths.youtube,
112
- sx: commonSx
113
- });
114
- break;
115
-
116
- case "instagram":
117
- icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
118
- path: paths.instagram,
119
- sx: commonSx
120
- });
121
- break;
122
-
123
- case "pinterest":
124
- icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
125
- path: paths.pinterest,
126
- sx: commonSx
127
- });
128
- break;
129
-
130
- case "facebook":
131
- icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
132
- path: paths.facebook,
133
- sx: commonSx
134
- });
135
- break;
136
- }
137
-
138
- return /*#__PURE__*/React__default["default"].createElement("a", {
139
- key: socialItem.name + index,
140
- target: "_blank",
141
- href: socialItem.link,
142
- style: {
143
- margin: "5px",
144
- height: "65%"
145
- },
146
- rel: "nofollow noreferrer"
147
- }, icon);
148
- });
149
- };
150
-
151
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
152
- width: "100%",
153
- sx: {
154
- height: "250px",
155
- justifyContent: size.width <= 600 ? "space-around" : "center",
156
- alignItems: "center",
157
- background: userData !== null && userData !== void 0 && (_userData$headerImage = userData.headerImage) !== null && _userData$headerImage !== void 0 && (_userData$headerImage2 = _userData$headerImage.original) !== null && _userData$headerImage2 !== void 0 && _userData$headerImage2.url ? "linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(".concat(userData === null || userData === void 0 ? void 0 : (_userData$headerImage3 = userData.headerImage) === null || _userData$headerImage3 === void 0 ? void 0 : (_userData$headerImage4 = _userData$headerImage3.original) === null || _userData$headerImage4 === void 0 ? void 0 : _userData$headerImage4.url, ")") : "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
158
- backgroundRepeat: "no-repeat",
159
- backgroundSize: "cover",
160
- backgroundPosition: "center",
161
- position: "relative",
162
- overflow: "hidden"
163
- }
164
- }, isOwner && /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
165
- sx: {
166
- position: "absolute",
167
- top: "10px",
168
- right: "10px",
169
- cursor: "pointer",
170
- color: "white.main",
171
- ":hover": {
172
- color: "notBlack.main",
173
- backgroundColor: "white.main"
174
- }
175
- },
176
- onClick: () => openEdit()
177
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
178
- path: paths.edit,
179
- size: "16px"
180
- })), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
181
- direction: "row",
182
- width: "80%",
183
- maxWidth: "1300px",
184
- flexWrap: "wrap",
185
- margin: "0 auto",
186
- justifyContent: "space-between",
187
- alignItems: "flex-end",
188
- height: "50%"
189
- }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
190
- sx: {
191
- background: "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
192
- boxShadow: "5px 5px 15px #0000009c"
193
- },
194
- borderRadius: "8px",
195
- width: "400px",
196
- height: "100%"
197
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
198
- direction: "row",
199
- height: "100%",
200
- alignItems: "center",
201
- position: "relative"
202
- }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
203
- sx: {
204
- position: "absolute",
205
- padding: "5px",
206
- top: "5px",
207
- right: "5px",
208
- cursor: "pointer",
209
- color: "white.override",
210
- fontSize: "12px",
211
- ":hover": {
212
- color: "notBlack.main",
213
- backgroundColor: "white.main"
214
- }
215
- },
216
- onClick: () => {
217
- isOwner ? openEdit() : followUser({
218
- variables: {
219
- record: {
220
- userIdToFollow: userData._id
221
- }
222
- }
223
- });
224
- }
225
- }, isOwner ? /*#__PURE__*/React__default["default"].createElement(Icon, {
226
- path: paths.edit,
227
- size: "20px"
228
- }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React__default["default"].createElement(Icon, {
229
- path: paths.personRemove,
230
- size: "20px"
231
- }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
232
- path: paths.personAdd,
233
- size: "20px"
234
- })), /*#__PURE__*/React__default["default"].createElement("img", {
235
- style: {
236
- borderRadius: "50%",
237
- objectFit: "cover",
238
- width: "90px",
239
- height: "90px",
240
- margin: "0 20px"
241
- },
242
- alt: "profile img",
243
- 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
244
- }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
245
- marginLeft: "20px"
246
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
247
- direction: "row"
248
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
249
- noWrap: true,
250
- maxWidth: "200px",
251
- color: "white.override",
252
- lineHeight: "51px",
253
- fontSize: size.width <= 600 ? "30px" : "47px"
254
- }, userData === null || userData === void 0 ? void 0 : userData.username)), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
255
- direction: "row",
256
- divider: /*#__PURE__*/React__default["default"].createElement(index.Divider, {
257
- orientation: "vertical",
258
- flexItem: true,
259
- sx: {
260
- borderColor: "white.override",
261
- margin: "5px"
262
- }
263
- })
264
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
265
- color: "white.override",
266
- fontSize: "16px"
267
- }, userData === null || userData === void 0 ? void 0 : userData.followerCount, " Followers"), /*#__PURE__*/React__default["default"].createElement(index.Text, {
268
- color: "white.override",
269
- fontSize: "16px"
270
- }, userData === null || userData === void 0 ? void 0 : userData.followingCount, " Following"))))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
271
- direction: "row",
272
- backgroundColor: "grey2.main",
273
- borderRadius: "8px",
274
- height: "30%",
275
- alignItems: "center",
276
- marginTop: "20px",
277
- justifyContent: "space-around"
278
- }, 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, {
279
- variant: "text",
280
- onClick: () => openEdit()
281
- }, "+ New Social") : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
282
- sx: {
283
- cursor: "pointer",
284
- color: "notBlack.main",
285
- padding: "5px",
286
- backgroundColor: "grey2.main",
287
- ":hover": {
288
- backgroundColor: "white.main"
289
- }
290
- },
291
- onClick: () => openEdit()
292
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
293
- path: paths.add,
294
- size: "16px"
295
- })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null), renderSocialLinks()))));
296
- };
11
+ var UserProfileHeader$1 = UserProfileHeader;
297
12
 
298
- module.exports = UserProfileHeader;
13
+ exports["default"] = UserProfileHeader$1;
@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
6
  var React = require('react');
7
- var index = require('./index.js');
8
7
  var UserCard = require('./UserCard.js');
8
+ var Stack = require('./neo-components/Stack.js');
9
+ var Navigation = require('./neo-components/Navigation.js');
10
+ var Text = require('./neo-components/Text.js');
9
11
 
10
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
13
 
@@ -26,7 +28,7 @@ const UsernameWithPopout = _ref => {
26
28
  } = _ref;
27
29
  const [userCardRef, setUserCardRef] = React.useState(null);
28
30
  const openUserCard = Boolean(userCardRef);
29
- return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
31
+ return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
30
32
  direction: "row",
31
33
  onClick: e => {
32
34
  setUserCardRef(e.target);
@@ -39,7 +41,7 @@ const UsernameWithPopout = _ref => {
39
41
  onMouseLeave: e => {
40
42
  setUserCardRef(null);
41
43
  }
42
- }, /*#__PURE__*/React__default["default"].createElement(index.Popover, {
44
+ }, /*#__PURE__*/React__default["default"].createElement(Navigation.Popover, {
43
45
  open: openUserCard,
44
46
  anchorEl: userCardRef,
45
47
  anchorOrigin: {
@@ -76,7 +78,7 @@ const UsernameWithPopout = _ref => {
76
78
  onCreatedClick: onCreatedClick,
77
79
  collapsed: collapsed,
78
80
  user: user
79
- })), /*#__PURE__*/React__default["default"].createElement(index.Text, {
81
+ })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
80
82
  sx: _objectSpread({
81
83
  fontWeight: "300",
82
84
  fontSize: "12px",
package/dist/cjs/icons.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  const icons = {
4
6
  white: {
5
7
  account: "https://cdn.blerp.com/blerp_products/Icons/Account-White.svg",
@@ -157,5 +159,6 @@ const icons = {
157
159
  tabView: "https://cdn.blerp.com/blerp_products/Icons/Tabview-Starling.svg"
158
160
  }
159
161
  };
162
+ var icons$1 = icons;
160
163
 
161
- module.exports = icons;
164
+ exports["default"] = icons$1;