@pingux/astro 2.94.0 → 2.95.0-alpha.1
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.
- package/lib/cjs/components/NavigationHeader/HeaderAccountMenu.js +47 -27
- package/lib/cjs/components/NavigationHeader/NavigationHeader.stories.js +85 -37
- package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +26 -32
- package/lib/cjs/styles/themes/next-gen/variants/button.d.ts +6 -5
- package/lib/cjs/styles/themes/next-gen/variants/button.js +5 -1
- package/lib/cjs/styles/themes/next-gen/variants/navigationHeader.d.ts +20 -27
- package/lib/cjs/styles/themes/next-gen/variants/navigationHeader.js +10 -8
- package/lib/components/NavigationHeader/HeaderAccountMenu.js +48 -28
- package/lib/components/NavigationHeader/NavigationHeader.stories.js +85 -32
- package/lib/styles/themes/next-gen/variants/button.js +5 -1
- package/lib/styles/themes/next-gen/variants/navigationHeader.js +10 -8
- package/package.json +1 -1
|
@@ -8,13 +8,21 @@ _Object$defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
var _ChevronDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronDownIcon"));
|
|
12
11
|
var _LogoutVariantIcon = _interopRequireDefault(require("@pingux/mdi-react/LogoutVariantIcon"));
|
|
13
12
|
var _ = require("../..");
|
|
13
|
+
var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
|
|
14
14
|
var _react2 = require("@emotion/react");
|
|
15
15
|
var HeaderAccountMenu = function HeaderAccountMenu(props) {
|
|
16
16
|
var userData = props.userData,
|
|
17
17
|
avatarProps = props.avatarProps;
|
|
18
|
+
var _ref = userData || {},
|
|
19
|
+
image = _ref.image,
|
|
20
|
+
firstName = _ref.firstName,
|
|
21
|
+
lastName = _ref.lastName,
|
|
22
|
+
email = _ref.email;
|
|
23
|
+
var _useGetTheme = (0, _useGetTheme2["default"])(),
|
|
24
|
+
icons = _useGetTheme.icons;
|
|
25
|
+
var MenuDown = icons.MenuDown;
|
|
18
26
|
return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.PopoverMenu, null, (0, _react2.jsx)(_.Button, {
|
|
19
27
|
variant: "navigationHeader.accountButton"
|
|
20
28
|
}, (0, _react2.jsx)(_.Box, {
|
|
@@ -22,54 +30,66 @@ var HeaderAccountMenu = function HeaderAccountMenu(props) {
|
|
|
22
30
|
alignItems: "center",
|
|
23
31
|
gap: "xs"
|
|
24
32
|
}, (0, _react2.jsx)(_.Avatar, (0, _extends2["default"])({
|
|
25
|
-
src:
|
|
33
|
+
src: image,
|
|
26
34
|
alt: "Avatar",
|
|
27
35
|
"aria-label": "Avatar"
|
|
28
36
|
}, avatarProps)), (0, _react2.jsx)(_.Icon, {
|
|
29
|
-
icon:
|
|
37
|
+
icon: MenuDown,
|
|
30
38
|
size: "16px",
|
|
31
|
-
|
|
39
|
+
title: {
|
|
40
|
+
name: 'Menu Up Icon'
|
|
41
|
+
},
|
|
42
|
+
color: "text.primary"
|
|
32
43
|
}))), (0, _react2.jsx)(_.Menu, {
|
|
33
|
-
|
|
44
|
+
p: "sm",
|
|
45
|
+
gap: "sm",
|
|
46
|
+
minWidth: "270px"
|
|
47
|
+
}, (0, _react2.jsx)(_.Section, {
|
|
48
|
+
key: "profile-section"
|
|
34
49
|
}, (0, _react2.jsx)(_.Item, {
|
|
35
|
-
key: "profile"
|
|
36
|
-
|
|
37
|
-
href: "#",
|
|
38
|
-
variant: "navigationHeader.dropdownMenuItem"
|
|
50
|
+
key: "profile",
|
|
51
|
+
textValue: "profile"
|
|
39
52
|
}, (0, _react2.jsx)(_.Box, {
|
|
40
53
|
isRow: true,
|
|
41
54
|
alignItems: "center",
|
|
42
|
-
gap: "md"
|
|
55
|
+
gap: "md",
|
|
56
|
+
px: "sm",
|
|
57
|
+
py: "xs"
|
|
43
58
|
}, (0, _react2.jsx)(_.Avatar, (0, _extends2["default"])({
|
|
44
|
-
src:
|
|
59
|
+
src: image,
|
|
45
60
|
alt: "Avatar",
|
|
46
61
|
"aria-label": "Avatar"
|
|
47
62
|
}, avatarProps)), (0, _react2.jsx)(_.Box, {
|
|
48
63
|
ml: "0"
|
|
49
64
|
}, (0, _react2.jsx)(_.Text, {
|
|
50
65
|
as: "h5",
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
66
|
+
mb: "0",
|
|
67
|
+
fontWeight: "2",
|
|
68
|
+
color: "text.primary"
|
|
69
|
+
}, firstName, ' ', lastName), (0, _react2.jsx)(_.Text, {
|
|
70
|
+
color: "text.secondary",
|
|
55
71
|
fontSize: "sm"
|
|
56
|
-
},
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
key: "signOut"
|
|
62
|
-
}, (0, _react2.jsx)(_.Link, {
|
|
63
|
-
color: "gray-700",
|
|
64
|
-
variant: "navigationHeader.dropdownMenuItem"
|
|
72
|
+
}, email))))), (0, _react2.jsx)(_.Section, {
|
|
73
|
+
key: "signOut-section"
|
|
74
|
+
}, (0, _react2.jsx)(_.Item, {
|
|
75
|
+
key: "signOut",
|
|
76
|
+
textValue: "signOut"
|
|
65
77
|
}, (0, _react2.jsx)(_.Box, {
|
|
66
78
|
isRow: true,
|
|
67
|
-
alignItems: "center"
|
|
79
|
+
alignItems: "center",
|
|
80
|
+
px: "sm",
|
|
81
|
+
py: "xs"
|
|
68
82
|
}, (0, _react2.jsx)(_.Icon, {
|
|
69
83
|
icon: _LogoutVariantIcon["default"],
|
|
70
84
|
size: "18px",
|
|
71
|
-
|
|
72
|
-
|
|
85
|
+
title: {
|
|
86
|
+
name: 'Sign Out Icon'
|
|
87
|
+
},
|
|
88
|
+
mr: "sm",
|
|
89
|
+
color: "text.primary"
|
|
90
|
+
}), (0, _react2.jsx)(_.Text, {
|
|
91
|
+
color: "text.primary"
|
|
92
|
+
}, "Sign Out")))))));
|
|
73
93
|
};
|
|
74
94
|
var _default = HeaderAccountMenu;
|
|
75
95
|
exports["default"] = _default;
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
3
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
4
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
8
5
|
_Object$defineProperty(exports, "__esModule", {
|
|
9
6
|
value: true
|
|
10
7
|
});
|
|
11
8
|
exports["default"] = exports.Default = void 0;
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
|
13
9
|
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
|
|
14
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
15
|
-
var _react =
|
|
11
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
12
|
var _HelpCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/HelpCircleOutlineIcon"));
|
|
17
13
|
var _MoonWaningCrescentIcon = _interopRequireDefault(require("@pingux/mdi-react/MoonWaningCrescentIcon"));
|
|
18
14
|
var _WhiteBalanceSunnyIcon = _interopRequireDefault(require("@pingux/mdi-react/WhiteBalanceSunnyIcon"));
|
|
@@ -23,8 +19,6 @@ var _images = require("../../utils/devUtils/constants/images");
|
|
|
23
19
|
var _HeaderAccountMenu = _interopRequireDefault(require("./HeaderAccountMenu"));
|
|
24
20
|
var _NavigationHeader = _interopRequireDefault(require("./NavigationHeader.mdx"));
|
|
25
21
|
var _react2 = require("@emotion/react");
|
|
26
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
28
22
|
var _default = {
|
|
29
23
|
title: 'Components/NavigationHeader',
|
|
30
24
|
component: _index.NavigationHeader,
|
|
@@ -57,7 +51,7 @@ var placeholderSeparator = {
|
|
|
57
51
|
bg: 'border.base',
|
|
58
52
|
flexShrink: 0,
|
|
59
53
|
mr: '0px',
|
|
60
|
-
ml: '
|
|
54
|
+
ml: 'md',
|
|
61
55
|
height: '28px'
|
|
62
56
|
};
|
|
63
57
|
|
|
@@ -70,14 +64,80 @@ var userData = {
|
|
|
70
64
|
lastName: 'Jensen',
|
|
71
65
|
image: _images.userImage
|
|
72
66
|
};
|
|
67
|
+
var logo = (0, _react2.jsx)("svg", {
|
|
68
|
+
height: "24",
|
|
69
|
+
viewBox: "0 0 2385 415",
|
|
70
|
+
fill: "none",
|
|
71
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
72
|
+
}, (0, _react2.jsx)("g", {
|
|
73
|
+
"clip-path": "url(#clip0_10475_59692)"
|
|
74
|
+
}, (0, _react2.jsx)("path", {
|
|
75
|
+
d: "M0 372.674H372.613V0.000147457H0V372.674Z",
|
|
76
|
+
fill: "#B3282D"
|
|
77
|
+
}), (0, _react2.jsx)("mask", {
|
|
78
|
+
id: "mask0_10475_59692",
|
|
79
|
+
maskUnits: "userSpaceOnUse",
|
|
80
|
+
x: "0",
|
|
81
|
+
y: "0",
|
|
82
|
+
width: "2385",
|
|
83
|
+
height: "415"
|
|
84
|
+
}, (0, _react2.jsx)("path", {
|
|
85
|
+
d: "M0 0H2385V415H0V0Z",
|
|
86
|
+
fill: "white"
|
|
87
|
+
})), (0, _react2.jsx)("g", {
|
|
88
|
+
mask: "url(#mask0_10475_59692)"
|
|
89
|
+
}, (0, _react2.jsx)("path", {
|
|
90
|
+
d: "M1974.57 113.426L2006.72 108.051V326.877H1974.57V113.426ZM2100.71 138.143V276.131C2100.71 299.777 2106.68 307.961 2126.13 307.961C2134.89 307.961 2132.57 308.056 2138.16 305.039L2142.53 326.545C2132.57 332.106 2128.91 333.724 2115 333.724C2104.67 333.724 2096.74 331.591 2089.17 327.727C2075.28 320.419 2070.12 306.666 2070.12 285.153V138.143H2044.3V112.787H2070.12V31.6623H2101.92V112.787H2151.58L2142.05 138.143H2100.71ZM2355.46 320.461C2343.1 320.461 2333.12 309.882 2333.12 295.254C2333.12 280.613 2343.1 270.051 2355.46 270.051C2367.81 270.051 2377.81 280.613 2377.81 295.254C2377.81 309.882 2367.81 320.461 2355.46 320.461ZM2355.46 263.967C2339.19 263.967 2325.91 278.01 2325.91 295.254C2325.91 312.485 2339.19 326.516 2355.46 326.516C2371.75 326.516 2385 312.485 2385 295.254C2385 278.01 2371.75 263.967 2355.46 263.967ZM2350.31 292.569V282.426H2355.86C2359.06 282.426 2362.66 283.107 2362.66 287.269C2362.66 292.037 2359.48 292.569 2355.79 292.569H2350.31ZM2368.88 287.813C2368.88 280.351 2364.54 277.4 2356.51 277.4H2344.09V312.862H2350.31V297.594H2354.06L2362.73 312.862H2369.12L2360.13 297.341C2365.61 296.802 2368.88 293.863 2368.88 287.813ZM2342.12 112.787L2274.19 334.583C2260.68 377.602 2244.77 405.967 2210.22 415.002L2201.08 392.218C2220.42 385.661 2230.56 376.129 2239.01 352.831C2235.84 335.936 2234.05 328.591 2234.05 328.591C2231.68 314.838 2220.94 273.113 2214.19 251.637L2171.65 117.513L2202.28 106.313L2242.81 245.167C2248.75 265.403 2254.71 298.487 2254.71 298.487H2255.51C2255.51 298.487 2263.04 270.985 2267.83 253.364L2306.76 112.787H2342.12ZM1385.26 272.263C1385.26 272.263 1381.67 281.293 1373.34 287.755C1360.6 297.623 1351.46 301.504 1335.21 301.504C1316.93 301.504 1304.59 294.2 1295.47 276.566C1289.1 264.108 1287.52 245.611 1287.52 220.674C1287.52 190.582 1290.68 175.12 1300.23 158.781C1308.57 144.169 1321.68 136.429 1337.2 136.429C1360.6 136.429 1375.34 143.754 1385.26 158.781V272.263ZM1416.66 31.6623H1385.65V102.918C1385.65 118.364 1386.04 135.997 1386.04 135.997C1374.15 118.812 1354.65 108.931 1332.42 108.931C1318.11 108.931 1306.99 112.786 1294.27 122.248C1267.25 142.426 1253.36 175.97 1253.36 221.537C1253.36 289.871 1282.76 329.852 1333.99 329.852C1357.04 329.852 1372.16 322.573 1386.45 304.952C1386.84 316.091 1390.82 326.877 1390.82 326.877H1422.61C1418.21 314.393 1416.66 294.615 1416.66 257.68V31.6623ZM1889.71 113.214H1940.82L1931.3 138.575H1888.51V276.566C1888.51 300.225 1894.47 308.405 1913.94 308.405C1922.69 308.405 1920.38 308.505 1925.96 305.467L1930.34 326.985C1920.38 332.554 1916.72 334.168 1902.8 334.168C1892.48 334.168 1884.55 332.039 1876.98 328.167C1863.09 320.859 1857.91 307.098 1857.91 285.597V138.575H1832.1V113.214H1857.91V32.1022H1889.71V113.214ZM1799.51 139.438C1802.68 147.173 1804.28 155.76 1804.28 164.375V326.893H1772.88V181.992C1772.88 159.196 1771.29 153.631 1765.72 146.31C1761.37 140.728 1753 137.28 1743.88 137.28C1727.95 137.28 1703.36 151.07 1689.05 167.384V326.893H1658.85V161.802C1658.85 131.266 1651.33 116.65 1651.33 116.65L1681.49 107.624C1681.49 107.624 1688.68 123.502 1688.68 141.164C1709.29 118.812 1729.95 108.051 1751.03 108.051C1772.49 108.051 1791.56 120.539 1799.51 139.438ZM1492.67 200.032C1494.24 155.747 1510.14 133.408 1538.35 133.408C1553.46 133.408 1567.34 140.728 1574.09 152.324C1580.07 162.636 1582.85 176.829 1583.24 200.032H1492.67ZM1539.93 107.176C1516.08 107.176 1496.63 116.65 1480.74 136.848C1464.05 158.378 1456.92 181.564 1456.92 217.678C1456.92 288.63 1489.86 331.591 1544.7 331.591C1570.14 331.591 1594 322.142 1611.44 304.952L1599.52 283.426C1585.63 297.204 1570.14 303.633 1551.05 303.633C1531.18 303.633 1512.91 295.909 1501.79 277.429C1495.03 266.278 1492.67 250.778 1492.67 230.58V225.401H1616.2V220.674C1615.44 169.538 1610.64 149.331 1593.59 130.391C1580.07 115.376 1561.39 107.176 1539.93 107.176ZM1178.26 31.9653H1210.05V326.877H1178.26V31.9653Z",
|
|
91
|
+
fill: "#263746"
|
|
92
|
+
}), (0, _react2.jsx)("path", {
|
|
93
|
+
d: "M836.686 159.866C826.225 159.866 812.64 167.269 800.607 178.756V327.575H748.544V175.05C748.544 156.969 746.208 139.705 741.561 125.724L787.752 111.763C792.428 120.403 795.146 129.43 795.146 138.062C802.905 132.289 809.511 127.359 818.063 122.437C828.54 116.697 842.142 113.415 853.781 113.415C875.918 113.415 895.338 125.724 901.545 143.83C904.259 151.636 905.429 160.667 905.429 173.826V327.575H854.159V190.684C854.159 166.85 850.283 159.866 836.686 159.866ZM985.056 184.927C985.056 165.207 996.326 153.682 1016.12 153.682C1035.95 153.682 1047.59 165.207 1047.59 184.927C1047.59 204.25 1036.33 214.932 1015.74 214.932C997.484 214.932 985.056 206.308 985.056 184.927ZM1035.95 273.729L1007.98 273.314C1002.53 273.314 999.446 271.247 999.446 268.372C999.446 262.632 1006.82 257.702 1020.01 251.103C1023.88 251.527 1025.44 251.527 1027.78 251.527C1070.11 251.527 1101.2 225.195 1101.2 189.028C1101.2 175.05 1097.28 164.356 1089.51 154.52C1092.62 154.935 1098.07 155.736 1103.13 155.736C1117.49 155.736 1128.34 151.209 1139.62 140.112L1117.88 105.164C1105.83 116.697 1091.08 123.275 1076.71 123.275C1070.11 123.275 1063.1 121.603 1052.25 118.739C1037.87 115.054 1027.78 113.415 1016.51 113.415C965.662 113.415 932.645 141.357 932.645 184.521C932.645 215.758 946.616 235.076 975.355 242.899C942.724 251.921 938.857 264.69 938.857 278.249C938.857 292.641 944.662 302.09 953.998 305.771C963.33 309.901 978.467 311.934 1001.75 312.357L1023.88 312.772C1044.49 313.183 1060.39 318.952 1060.39 337.847C1060.39 346.487 1055.35 354.289 1047.59 359.211C1039.45 364.577 1028.18 366.191 1014.99 366.191C990.907 366.191 977.678 357.169 977.678 340.299C977.678 334.552 978.073 331.692 980.027 326.758H931.869C929.919 330.85 927.213 336.631 927.213 348.139C927.213 362.494 932.645 374.856 943.521 385.53C961.375 403.217 990.513 408.135 1018.84 408.135C1049.9 408.135 1079.82 400.757 1097.28 381.007C1108.17 368.685 1113.22 355.131 1113.22 337.452C1113.22 318.528 1107.77 304.145 1096.13 292.641C1082.14 279.058 1066.22 274.128 1035.95 273.729ZM654.178 120.781L706.199 112.145V327.575H654.178V120.781ZM648.34 59.1327C648.34 40.2294 663.1 25.0155 680.959 25.0155C698.436 25.0155 712.428 40.2294 712.428 59.1327C712.428 78.0359 698.042 93.2581 680.174 93.2581C662.718 93.2581 648.34 78.0359 648.34 59.1327ZM566.36 160.667C559.003 172.59 552.393 175.474 530.265 175.474H501.924V88.3113H536.455C559.381 88.3113 572.962 104.351 572.962 131.069C572.962 144.648 571.045 152.881 566.36 160.667ZM593.572 55.85C578.41 46.7989 564.427 41.8729 518.609 41.8729H447.559V327.575H501.924V222.344H531.812C561.7 222.344 573.364 219.049 585.792 212.878C615.298 198.087 632.365 167.663 632.365 129.861C632.365 96.9516 618.784 70.6531 593.572 55.85Z",
|
|
94
|
+
fill: "#263746"
|
|
95
|
+
}))), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
|
|
96
|
+
id: "clip0_10475_59692"
|
|
97
|
+
}, (0, _react2.jsx)("rect", {
|
|
98
|
+
width: "2385",
|
|
99
|
+
height: "415",
|
|
100
|
+
fill: "white"
|
|
101
|
+
}))));
|
|
102
|
+
var whiteLogo = (0, _react2.jsx)("svg", {
|
|
103
|
+
height: "24",
|
|
104
|
+
viewBox: "0 0 2385 415",
|
|
105
|
+
fill: "none",
|
|
106
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
107
|
+
}, (0, _react2.jsx)("g", {
|
|
108
|
+
"clip-path": "url(#clip0_10543_71950)"
|
|
109
|
+
}, (0, _react2.jsx)("path", {
|
|
110
|
+
d: "M0 372.674H372.613V0.000147457H0V372.674Z",
|
|
111
|
+
fill: "white"
|
|
112
|
+
}), (0, _react2.jsx)("mask", {
|
|
113
|
+
id: "mask0_10543_71950",
|
|
114
|
+
maskUnits: "userSpaceOnUse",
|
|
115
|
+
x: "0",
|
|
116
|
+
y: "0",
|
|
117
|
+
width: "2385",
|
|
118
|
+
height: "415"
|
|
119
|
+
}, (0, _react2.jsx)("path", {
|
|
120
|
+
d: "M0 0H2385V415H0V0Z",
|
|
121
|
+
fill: "white"
|
|
122
|
+
})), (0, _react2.jsx)("g", {
|
|
123
|
+
mask: "url(#mask0_10543_71950)"
|
|
124
|
+
}, (0, _react2.jsx)("path", {
|
|
125
|
+
d: "M1974.57 113.426L2006.72 108.051V326.877H1974.57V113.426ZM2100.71 138.143V276.131C2100.71 299.777 2106.68 307.961 2126.13 307.961C2134.89 307.961 2132.57 308.056 2138.16 305.039L2142.53 326.545C2132.57 332.106 2128.91 333.724 2115 333.724C2104.67 333.724 2096.74 331.591 2089.17 327.727C2075.28 320.419 2070.12 306.666 2070.12 285.153V138.143H2044.3V112.787H2070.12V31.6623H2101.92V112.787H2151.58L2142.05 138.143H2100.71ZM2355.46 320.461C2343.1 320.461 2333.12 309.882 2333.12 295.254C2333.12 280.613 2343.1 270.051 2355.46 270.051C2367.81 270.051 2377.81 280.613 2377.81 295.254C2377.81 309.882 2367.81 320.461 2355.46 320.461ZM2355.46 263.967C2339.19 263.967 2325.91 278.01 2325.91 295.254C2325.91 312.485 2339.19 326.516 2355.46 326.516C2371.75 326.516 2385 312.485 2385 295.254C2385 278.01 2371.75 263.967 2355.46 263.967ZM2350.31 292.569V282.426H2355.86C2359.06 282.426 2362.66 283.107 2362.66 287.269C2362.66 292.037 2359.48 292.569 2355.79 292.569H2350.31ZM2368.88 287.813C2368.88 280.351 2364.54 277.4 2356.51 277.4H2344.09V312.862H2350.31V297.594H2354.06L2362.73 312.862H2369.12L2360.13 297.341C2365.61 296.802 2368.88 293.863 2368.88 287.813ZM2342.12 112.787L2274.19 334.583C2260.68 377.602 2244.77 405.967 2210.22 415.002L2201.08 392.218C2220.42 385.661 2230.56 376.129 2239.01 352.831C2235.84 335.936 2234.05 328.591 2234.05 328.591C2231.68 314.838 2220.94 273.113 2214.19 251.637L2171.65 117.513L2202.28 106.313L2242.81 245.167C2248.75 265.403 2254.71 298.487 2254.71 298.487H2255.51C2255.51 298.487 2263.04 270.985 2267.83 253.364L2306.76 112.787H2342.12ZM1385.26 272.263C1385.26 272.263 1381.67 281.293 1373.34 287.755C1360.6 297.623 1351.46 301.504 1335.21 301.504C1316.93 301.504 1304.59 294.2 1295.47 276.566C1289.1 264.108 1287.52 245.611 1287.52 220.674C1287.52 190.582 1290.68 175.12 1300.23 158.781C1308.57 144.169 1321.68 136.429 1337.2 136.429C1360.6 136.429 1375.34 143.754 1385.26 158.781V272.263ZM1416.66 31.6623H1385.65V102.918C1385.65 118.364 1386.04 135.997 1386.04 135.997C1374.15 118.812 1354.65 108.931 1332.42 108.931C1318.11 108.931 1306.99 112.786 1294.27 122.248C1267.25 142.426 1253.36 175.97 1253.36 221.537C1253.36 289.871 1282.76 329.852 1333.99 329.852C1357.04 329.852 1372.16 322.573 1386.45 304.952C1386.84 316.091 1390.82 326.877 1390.82 326.877H1422.61C1418.21 314.393 1416.66 294.615 1416.66 257.68V31.6623ZM1889.71 113.214H1940.82L1931.3 138.575H1888.51V276.566C1888.51 300.225 1894.47 308.405 1913.94 308.405C1922.69 308.405 1920.38 308.505 1925.96 305.467L1930.34 326.985C1920.38 332.554 1916.72 334.168 1902.8 334.168C1892.48 334.168 1884.55 332.039 1876.98 328.167C1863.09 320.859 1857.91 307.098 1857.91 285.597V138.575H1832.1V113.214H1857.91V32.1022H1889.71V113.214ZM1799.51 139.438C1802.68 147.173 1804.28 155.76 1804.28 164.375V326.893H1772.88V181.992C1772.88 159.196 1771.29 153.631 1765.72 146.31C1761.37 140.728 1753 137.28 1743.88 137.28C1727.95 137.28 1703.36 151.07 1689.05 167.384V326.893H1658.85V161.802C1658.85 131.266 1651.33 116.65 1651.33 116.65L1681.49 107.624C1681.49 107.624 1688.68 123.502 1688.68 141.164C1709.29 118.812 1729.95 108.051 1751.03 108.051C1772.49 108.051 1791.56 120.539 1799.51 139.438ZM1492.67 200.032C1494.24 155.747 1510.14 133.408 1538.35 133.408C1553.46 133.408 1567.34 140.728 1574.09 152.324C1580.07 162.636 1582.85 176.829 1583.24 200.032H1492.67ZM1539.93 107.176C1516.08 107.176 1496.63 116.65 1480.74 136.848C1464.05 158.378 1456.92 181.564 1456.92 217.678C1456.92 288.63 1489.86 331.591 1544.7 331.591C1570.14 331.591 1594 322.142 1611.44 304.952L1599.52 283.426C1585.63 297.204 1570.14 303.633 1551.05 303.633C1531.18 303.633 1512.91 295.909 1501.79 277.429C1495.03 266.278 1492.67 250.778 1492.67 230.58V225.401H1616.2V220.674C1615.44 169.538 1610.64 149.331 1593.59 130.391C1580.07 115.376 1561.39 107.176 1539.93 107.176ZM1178.26 31.9653H1210.05V326.877H1178.26V31.9653Z",
|
|
126
|
+
fill: "white"
|
|
127
|
+
}), (0, _react2.jsx)("path", {
|
|
128
|
+
d: "M836.686 159.866C826.225 159.866 812.64 167.269 800.607 178.756V327.575H748.544V175.05C748.544 156.969 746.208 139.705 741.561 125.724L787.752 111.763C792.428 120.403 795.146 129.43 795.146 138.062C802.905 132.289 809.511 127.359 818.063 122.437C828.54 116.697 842.142 113.415 853.781 113.415C875.918 113.415 895.338 125.724 901.545 143.83C904.259 151.636 905.429 160.667 905.429 173.826V327.575H854.159V190.684C854.159 166.85 850.283 159.866 836.686 159.866ZM985.056 184.927C985.056 165.207 996.326 153.682 1016.12 153.682C1035.95 153.682 1047.59 165.207 1047.59 184.927C1047.59 204.25 1036.33 214.932 1015.74 214.932C997.484 214.932 985.056 206.308 985.056 184.927ZM1035.95 273.729L1007.98 273.314C1002.53 273.314 999.446 271.247 999.446 268.372C999.446 262.632 1006.82 257.702 1020.01 251.103C1023.88 251.527 1025.44 251.527 1027.78 251.527C1070.11 251.527 1101.2 225.195 1101.2 189.028C1101.2 175.05 1097.28 164.356 1089.51 154.52C1092.62 154.935 1098.07 155.736 1103.13 155.736C1117.49 155.736 1128.34 151.209 1139.62 140.112L1117.88 105.164C1105.83 116.697 1091.08 123.275 1076.71 123.275C1070.11 123.275 1063.1 121.603 1052.25 118.739C1037.87 115.054 1027.78 113.415 1016.51 113.415C965.662 113.415 932.645 141.357 932.645 184.521C932.645 215.758 946.616 235.076 975.355 242.899C942.724 251.921 938.857 264.69 938.857 278.249C938.857 292.641 944.662 302.09 953.998 305.771C963.33 309.901 978.467 311.934 1001.75 312.357L1023.88 312.772C1044.49 313.183 1060.39 318.952 1060.39 337.847C1060.39 346.487 1055.35 354.289 1047.59 359.211C1039.45 364.577 1028.18 366.191 1014.99 366.191C990.907 366.191 977.678 357.169 977.678 340.299C977.678 334.552 978.073 331.692 980.027 326.758H931.869C929.919 330.85 927.213 336.631 927.213 348.139C927.213 362.494 932.645 374.856 943.521 385.53C961.375 403.217 990.513 408.135 1018.84 408.135C1049.9 408.135 1079.82 400.757 1097.28 381.007C1108.17 368.685 1113.22 355.131 1113.22 337.452C1113.22 318.528 1107.77 304.145 1096.13 292.641C1082.14 279.058 1066.22 274.128 1035.95 273.729ZM654.178 120.781L706.199 112.145V327.575H654.178V120.781ZM648.34 59.1327C648.34 40.2294 663.1 25.0155 680.959 25.0155C698.436 25.0155 712.428 40.2294 712.428 59.1327C712.428 78.0359 698.042 93.2581 680.174 93.2581C662.718 93.2581 648.34 78.0359 648.34 59.1327ZM566.36 160.667C559.003 172.59 552.393 175.474 530.265 175.474H501.924V88.3113H536.455C559.381 88.3113 572.962 104.351 572.962 131.069C572.962 144.648 571.045 152.881 566.36 160.667ZM593.572 55.85C578.41 46.7989 564.427 41.8729 518.609 41.8729H447.559V327.575H501.924V222.344H531.812C561.7 222.344 573.364 219.049 585.792 212.878C615.298 198.087 632.365 167.663 632.365 129.861C632.365 96.9516 618.784 70.6531 593.572 55.85Z",
|
|
129
|
+
fill: "white"
|
|
130
|
+
}))), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
|
|
131
|
+
id: "clip0_10543_71950"
|
|
132
|
+
}, (0, _react2.jsx)("rect", {
|
|
133
|
+
width: "2385",
|
|
134
|
+
height: "415",
|
|
135
|
+
fill: "white"
|
|
136
|
+
}))));
|
|
73
137
|
var Default = function Default(_ref) {
|
|
74
138
|
var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
|
|
75
|
-
var _useState = (0, _react.useState)(false),
|
|
76
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
77
|
-
isLoggedIn = _useState2[0],
|
|
78
|
-
setIsLoggedIn = _useState2[1];
|
|
79
139
|
var _useGetTheme = (0, _useGetTheme2["default"])(),
|
|
80
|
-
|
|
140
|
+
themeState = _useGetTheme.themeState;
|
|
81
141
|
return (0, _react2.jsx)(_index.Box, {
|
|
82
142
|
p: "0"
|
|
83
143
|
}, (0, _react2.jsx)(_index.NavigationHeader, (0, _extends2["default"])({}, args, {
|
|
@@ -87,23 +147,20 @@ var Default = function Default(_ref) {
|
|
|
87
147
|
isRow: true,
|
|
88
148
|
alignItems: "center",
|
|
89
149
|
justifyContent: "center",
|
|
90
|
-
py: "
|
|
150
|
+
py: "xs",
|
|
91
151
|
flex: "0 0 auto"
|
|
92
|
-
},
|
|
152
|
+
}, themeState.isNextGenDark ? whiteLogo : logo, (0, _react2.jsx)(_index.Separator, {
|
|
93
153
|
orientation: "vertical",
|
|
94
154
|
sx: placeholderSeparator,
|
|
95
155
|
style: {
|
|
96
156
|
height: '28px',
|
|
97
|
-
marginLeft: '
|
|
157
|
+
marginLeft: '1rem'
|
|
98
158
|
}
|
|
99
|
-
}), (0, _react2.jsx)(_index.
|
|
100
|
-
href: "#",
|
|
101
|
-
variant: "navigationHeader.logoBand"
|
|
102
|
-
}, (0, _react2.jsx)(_index.Text, {
|
|
159
|
+
}), (0, _react2.jsx)(_index.Text, {
|
|
103
160
|
as: "h2",
|
|
104
161
|
variant: "navigationHeader.headerPlaceholder",
|
|
105
162
|
id: "next-gen-header"
|
|
106
|
-
}, "Marketplace"))
|
|
163
|
+
}, "Marketplace")), (0, _react2.jsx)(_index.Box, {
|
|
107
164
|
as: "ul",
|
|
108
165
|
isRow: true,
|
|
109
166
|
alignItems: "center",
|
|
@@ -134,9 +191,7 @@ var Default = function Default(_ref) {
|
|
|
134
191
|
}, "Reports")), (0, _react2.jsx)(_index.Box, {
|
|
135
192
|
as: "li",
|
|
136
193
|
display: breakpointDisplaysXS
|
|
137
|
-
}, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
|
|
138
|
-
isContainFocus: true
|
|
139
|
-
}, (0, _react2.jsx)(_index.IconButton, {
|
|
194
|
+
}, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
|
|
140
195
|
"aria-label": "Help & Support",
|
|
141
196
|
variant: "headerNav"
|
|
142
197
|
}, (0, _react2.jsx)(_index.Icon, {
|
|
@@ -151,25 +206,25 @@ var Default = function Default(_ref) {
|
|
|
151
206
|
}, (0, _react2.jsx)(_index.Item, {
|
|
152
207
|
key: "Help & Support"
|
|
153
208
|
}, (0, _react2.jsx)(_index.Link, {
|
|
154
|
-
href: "
|
|
209
|
+
href: "#",
|
|
155
210
|
"aria-label": "Help & Support",
|
|
156
211
|
variant: "navigationHeader.dropdownMenuItem"
|
|
157
212
|
}, "Help & Support")), (0, _react2.jsx)(_index.Item, {
|
|
158
213
|
key: "Doc"
|
|
159
214
|
}, (0, _react2.jsx)(_index.Link, {
|
|
160
|
-
href: "
|
|
215
|
+
href: "#",
|
|
161
216
|
"aria-label": "Doc",
|
|
162
217
|
variant: "navigationHeader.dropdownMenuItem"
|
|
163
218
|
}, "Doc")), (0, _react2.jsx)(_index.Item, {
|
|
164
219
|
key: "Developer"
|
|
165
220
|
}, (0, _react2.jsx)(_index.Link, {
|
|
166
|
-
href: "
|
|
221
|
+
href: "#",
|
|
167
222
|
"aria-label": "Developer",
|
|
168
223
|
variant: "navigationHeader.dropdownMenuItem"
|
|
169
224
|
}, "Developer")), (0, _react2.jsx)(_index.Item, {
|
|
170
225
|
key: "Labs"
|
|
171
226
|
}, (0, _react2.jsx)(_index.Link, {
|
|
172
|
-
href: "
|
|
227
|
+
href: "#",
|
|
173
228
|
"aria-label": "Labs",
|
|
174
229
|
variant: "navigationHeader.dropdownMenuItem"
|
|
175
230
|
}, "Labs")))))), (0, _react2.jsx)(_index.Box, {
|
|
@@ -189,7 +244,7 @@ var Default = function Default(_ref) {
|
|
|
189
244
|
})), (0, _react2.jsx)(_index.Box, {
|
|
190
245
|
as: "li",
|
|
191
246
|
display: breakpointDisplaysXS
|
|
192
|
-
},
|
|
247
|
+
}, (0, _react2.jsx)(_HeaderAccountMenu["default"], {
|
|
193
248
|
userData: userData,
|
|
194
249
|
avatarProps: {
|
|
195
250
|
defaultText: 'KL',
|
|
@@ -197,13 +252,6 @@ var Default = function Default(_ref) {
|
|
|
197
252
|
backgroundColor: 'red-100',
|
|
198
253
|
color: 'red-800'
|
|
199
254
|
}
|
|
200
|
-
})
|
|
201
|
-
href: "#",
|
|
202
|
-
variant: "navigationHeader.link",
|
|
203
|
-
"aria-label": "Sign In",
|
|
204
|
-
onPress: function onPress() {
|
|
205
|
-
return setIsLoggedIn(!isLoggedIn);
|
|
206
|
-
}
|
|
207
|
-
}, "Sign In")))));
|
|
255
|
+
})))));
|
|
208
256
|
};
|
|
209
257
|
exports.Default = Default;
|
|
@@ -834,6 +834,7 @@ declare const _default: {
|
|
|
834
834
|
px: string;
|
|
835
835
|
py: string;
|
|
836
836
|
width: string;
|
|
837
|
+
height: string;
|
|
837
838
|
'&.is-hovered': {
|
|
838
839
|
path: {
|
|
839
840
|
fill: string;
|
|
@@ -844,16 +845,16 @@ declare const _default: {
|
|
|
844
845
|
fill: string;
|
|
845
846
|
};
|
|
846
847
|
};
|
|
848
|
+
'&.is-focused': {
|
|
849
|
+
outlineOffset: string;
|
|
850
|
+
outline: string;
|
|
851
|
+
outlineColor: string;
|
|
852
|
+
};
|
|
847
853
|
cursor: string;
|
|
848
854
|
transition: string;
|
|
849
855
|
outline: string;
|
|
850
856
|
border: string;
|
|
851
857
|
borderColor: string;
|
|
852
|
-
'&.is-focused': {
|
|
853
|
-
outline: string;
|
|
854
|
-
outlineColor: string;
|
|
855
|
-
outlineOffset: string;
|
|
856
|
-
};
|
|
857
858
|
};
|
|
858
859
|
copyButton: {
|
|
859
860
|
path: {
|
|
@@ -1331,11 +1332,14 @@ declare const _default: {
|
|
|
1331
1332
|
};
|
|
1332
1333
|
};
|
|
1333
1334
|
link: {
|
|
1335
|
+
display: string;
|
|
1336
|
+
height: string;
|
|
1334
1337
|
fontSize: string;
|
|
1335
1338
|
fontFamily: string;
|
|
1336
1339
|
py: string;
|
|
1337
1340
|
px: string;
|
|
1338
1341
|
fontWeight: string;
|
|
1342
|
+
lineHeight: string;
|
|
1339
1343
|
color: string;
|
|
1340
1344
|
textDecoration: string;
|
|
1341
1345
|
borderRadius: string;
|
|
@@ -1343,36 +1347,11 @@ declare const _default: {
|
|
|
1343
1347
|
textDecoration: string;
|
|
1344
1348
|
color: string;
|
|
1345
1349
|
};
|
|
1346
|
-
'&.is-focused': {
|
|
1347
|
-
textDecoration: string;
|
|
1348
|
-
outline: string;
|
|
1349
|
-
outlineColor: string;
|
|
1350
|
-
};
|
|
1351
|
-
'&.is-pressed': {
|
|
1352
|
-
textDecoration: string;
|
|
1353
|
-
};
|
|
1354
|
-
'&.is-visited': {
|
|
1355
|
-
textDecoration: string;
|
|
1356
|
-
};
|
|
1357
|
-
};
|
|
1358
|
-
logoBand: {
|
|
1359
|
-
p: number;
|
|
1360
|
-
fontSize: string;
|
|
1361
|
-
fontFamily: string;
|
|
1362
|
-
py: string;
|
|
1363
|
-
px: string;
|
|
1364
|
-
fontWeight: string;
|
|
1365
|
-
color: string;
|
|
1366
|
-
textDecoration: string;
|
|
1367
|
-
borderRadius: string;
|
|
1368
|
-
'&.is-hovered': {
|
|
1369
|
-
textDecoration: string;
|
|
1370
|
-
color: string;
|
|
1371
|
-
};
|
|
1372
|
-
'&.is-focused': {
|
|
1350
|
+
'&.is-focused, &:focus-visible ': {
|
|
1373
1351
|
textDecoration: string;
|
|
1374
1352
|
outline: string;
|
|
1375
1353
|
outlineColor: string;
|
|
1354
|
+
outlineOffset: string;
|
|
1376
1355
|
};
|
|
1377
1356
|
'&.is-pressed': {
|
|
1378
1357
|
textDecoration: string;
|
|
@@ -1400,11 +1379,17 @@ declare const _default: {
|
|
|
1400
1379
|
backgroundColor: string;
|
|
1401
1380
|
maxWidth: string;
|
|
1402
1381
|
p: string;
|
|
1382
|
+
'&:focus': {
|
|
1383
|
+
outline: string;
|
|
1384
|
+
outlineColor: string;
|
|
1385
|
+
outlineOffset: string;
|
|
1386
|
+
};
|
|
1403
1387
|
'& > li': {
|
|
1404
1388
|
p: string;
|
|
1405
1389
|
};
|
|
1406
1390
|
};
|
|
1407
1391
|
dropdownMenuItem: {
|
|
1392
|
+
height: string;
|
|
1408
1393
|
padding: string;
|
|
1409
1394
|
pr: string;
|
|
1410
1395
|
'&.is-hovered': {
|
|
@@ -1419,14 +1404,22 @@ declare const _default: {
|
|
|
1419
1404
|
'&.is-visited': {
|
|
1420
1405
|
textDecoration: string;
|
|
1421
1406
|
};
|
|
1407
|
+
display: string;
|
|
1422
1408
|
fontSize: string;
|
|
1423
1409
|
fontFamily: string;
|
|
1424
1410
|
py: string;
|
|
1425
1411
|
px: string;
|
|
1426
1412
|
fontWeight: string;
|
|
1413
|
+
lineHeight: string;
|
|
1427
1414
|
color: string;
|
|
1428
1415
|
textDecoration: string;
|
|
1429
1416
|
borderRadius: string;
|
|
1417
|
+
'&.is-focused, &:focus-visible ': {
|
|
1418
|
+
textDecoration: string;
|
|
1419
|
+
outline: string;
|
|
1420
|
+
outlineColor: string;
|
|
1421
|
+
outlineOffset: string;
|
|
1422
|
+
};
|
|
1430
1423
|
};
|
|
1431
1424
|
accountButton: {
|
|
1432
1425
|
display: string;
|
|
@@ -1453,6 +1446,7 @@ declare const _default: {
|
|
|
1453
1446
|
bg: string;
|
|
1454
1447
|
outline: string;
|
|
1455
1448
|
outlineColor: string;
|
|
1449
|
+
outlineOffset: string;
|
|
1456
1450
|
};
|
|
1457
1451
|
'&.is-visited': {
|
|
1458
1452
|
bg: string;
|
|
@@ -602,6 +602,7 @@ declare const buttons: {
|
|
|
602
602
|
px: string;
|
|
603
603
|
py: string;
|
|
604
604
|
width: string;
|
|
605
|
+
height: string;
|
|
605
606
|
'&.is-hovered': {
|
|
606
607
|
path: {
|
|
607
608
|
fill: string;
|
|
@@ -612,16 +613,16 @@ declare const buttons: {
|
|
|
612
613
|
fill: string;
|
|
613
614
|
};
|
|
614
615
|
};
|
|
616
|
+
'&.is-focused': {
|
|
617
|
+
outlineOffset: string;
|
|
618
|
+
outline: string;
|
|
619
|
+
outlineColor: string;
|
|
620
|
+
};
|
|
615
621
|
cursor: string;
|
|
616
622
|
transition: string;
|
|
617
623
|
outline: string;
|
|
618
624
|
border: string;
|
|
619
625
|
borderColor: string;
|
|
620
|
-
'&.is-focused': {
|
|
621
|
-
outline: string;
|
|
622
|
-
outlineColor: string;
|
|
623
|
-
outlineOffset: string;
|
|
624
|
-
};
|
|
625
626
|
};
|
|
626
627
|
copyButton: {
|
|
627
628
|
path: {
|
|
@@ -250,6 +250,7 @@ var iconButtons = {
|
|
|
250
250
|
px: 'md',
|
|
251
251
|
py: 'sm',
|
|
252
252
|
width: '56px',
|
|
253
|
+
height: '40px',
|
|
253
254
|
'&.is-hovered': {
|
|
254
255
|
path: {
|
|
255
256
|
fill: 'text.secondary'
|
|
@@ -259,7 +260,10 @@ var iconButtons = {
|
|
|
259
260
|
path: {
|
|
260
261
|
fill: 'text.secondary'
|
|
261
262
|
}
|
|
262
|
-
}
|
|
263
|
+
},
|
|
264
|
+
'&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
|
|
265
|
+
outlineOffset: '1px'
|
|
266
|
+
})
|
|
263
267
|
}),
|
|
264
268
|
copyButton: _codeView.copyButton
|
|
265
269
|
};
|
|
@@ -10,11 +10,14 @@ declare const navigationHeader: {
|
|
|
10
10
|
};
|
|
11
11
|
};
|
|
12
12
|
link: {
|
|
13
|
+
display: string;
|
|
14
|
+
height: string;
|
|
13
15
|
fontSize: string;
|
|
14
16
|
fontFamily: string;
|
|
15
17
|
py: string;
|
|
16
18
|
px: string;
|
|
17
19
|
fontWeight: string;
|
|
20
|
+
lineHeight: string;
|
|
18
21
|
color: string;
|
|
19
22
|
textDecoration: string;
|
|
20
23
|
borderRadius: string;
|
|
@@ -22,36 +25,11 @@ declare const navigationHeader: {
|
|
|
22
25
|
textDecoration: string;
|
|
23
26
|
color: string;
|
|
24
27
|
};
|
|
25
|
-
'&.is-focused': {
|
|
26
|
-
textDecoration: string;
|
|
27
|
-
outline: string;
|
|
28
|
-
outlineColor: string;
|
|
29
|
-
};
|
|
30
|
-
'&.is-pressed': {
|
|
31
|
-
textDecoration: string;
|
|
32
|
-
};
|
|
33
|
-
'&.is-visited': {
|
|
34
|
-
textDecoration: string;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
logoBand: {
|
|
38
|
-
p: number;
|
|
39
|
-
fontSize: string;
|
|
40
|
-
fontFamily: string;
|
|
41
|
-
py: string;
|
|
42
|
-
px: string;
|
|
43
|
-
fontWeight: string;
|
|
44
|
-
color: string;
|
|
45
|
-
textDecoration: string;
|
|
46
|
-
borderRadius: string;
|
|
47
|
-
'&.is-hovered': {
|
|
48
|
-
textDecoration: string;
|
|
49
|
-
color: string;
|
|
50
|
-
};
|
|
51
|
-
'&.is-focused': {
|
|
28
|
+
'&.is-focused, &:focus-visible ': {
|
|
52
29
|
textDecoration: string;
|
|
53
30
|
outline: string;
|
|
54
31
|
outlineColor: string;
|
|
32
|
+
outlineOffset: string;
|
|
55
33
|
};
|
|
56
34
|
'&.is-pressed': {
|
|
57
35
|
textDecoration: string;
|
|
@@ -79,11 +57,17 @@ declare const navigationHeader: {
|
|
|
79
57
|
backgroundColor: string;
|
|
80
58
|
maxWidth: string;
|
|
81
59
|
p: string;
|
|
60
|
+
'&:focus': {
|
|
61
|
+
outline: string;
|
|
62
|
+
outlineColor: string;
|
|
63
|
+
outlineOffset: string;
|
|
64
|
+
};
|
|
82
65
|
'& > li': {
|
|
83
66
|
p: string;
|
|
84
67
|
};
|
|
85
68
|
};
|
|
86
69
|
dropdownMenuItem: {
|
|
70
|
+
height: string;
|
|
87
71
|
padding: string;
|
|
88
72
|
pr: string;
|
|
89
73
|
'&.is-hovered': {
|
|
@@ -98,14 +82,22 @@ declare const navigationHeader: {
|
|
|
98
82
|
'&.is-visited': {
|
|
99
83
|
textDecoration: string;
|
|
100
84
|
};
|
|
85
|
+
display: string;
|
|
101
86
|
fontSize: string;
|
|
102
87
|
fontFamily: string;
|
|
103
88
|
py: string;
|
|
104
89
|
px: string;
|
|
105
90
|
fontWeight: string;
|
|
91
|
+
lineHeight: string;
|
|
106
92
|
color: string;
|
|
107
93
|
textDecoration: string;
|
|
108
94
|
borderRadius: string;
|
|
95
|
+
'&.is-focused, &:focus-visible ': {
|
|
96
|
+
textDecoration: string;
|
|
97
|
+
outline: string;
|
|
98
|
+
outlineColor: string;
|
|
99
|
+
outlineOffset: string;
|
|
100
|
+
};
|
|
109
101
|
};
|
|
110
102
|
accountButton: {
|
|
111
103
|
display: string;
|
|
@@ -132,6 +124,7 @@ declare const navigationHeader: {
|
|
|
132
124
|
bg: string;
|
|
133
125
|
outline: string;
|
|
134
126
|
outlineColor: string;
|
|
127
|
+
outlineOffset: string;
|
|
135
128
|
};
|
|
136
129
|
'&.is-visited': {
|
|
137
130
|
bg: string;
|
|
@@ -18,14 +18,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
|
18
18
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
19
|
var defaultFocus = {
|
|
20
20
|
outline: '2px solid',
|
|
21
|
-
outlineColor: 'active'
|
|
21
|
+
outlineColor: 'active',
|
|
22
|
+
outlineOffset: '1px'
|
|
22
23
|
};
|
|
23
24
|
var link = {
|
|
25
|
+
display: 'inline-block',
|
|
26
|
+
height: '40px',
|
|
24
27
|
fontSize: 'md',
|
|
25
28
|
fontFamily: 'standard',
|
|
26
29
|
py: 'sm',
|
|
27
30
|
px: 'md',
|
|
28
31
|
fontWeight: '1',
|
|
32
|
+
lineHeight: 'body',
|
|
29
33
|
color: 'text.primary',
|
|
30
34
|
textDecoration: 'none',
|
|
31
35
|
borderRadius: '3px',
|
|
@@ -33,7 +37,7 @@ var link = {
|
|
|
33
37
|
textDecoration: 'none',
|
|
34
38
|
color: 'text.secondary'
|
|
35
39
|
},
|
|
36
|
-
'&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
|
|
40
|
+
'&.is-focused, &:focus-visible ': _objectSpread(_objectSpread({}, defaultFocus), {}, {
|
|
37
41
|
textDecoration: 'none'
|
|
38
42
|
}),
|
|
39
43
|
'&.is-pressed': {
|
|
@@ -43,13 +47,10 @@ var link = {
|
|
|
43
47
|
textDecoration: 'none'
|
|
44
48
|
}
|
|
45
49
|
};
|
|
46
|
-
var logoBand = _objectSpread(_objectSpread({}, link), {}, {
|
|
47
|
-
p: 0
|
|
48
|
-
});
|
|
49
50
|
var headerPlaceholder = {
|
|
50
51
|
fontSize: 'lg',
|
|
51
52
|
ml: 'md',
|
|
52
|
-
color: 'text.
|
|
53
|
+
color: 'text.primary',
|
|
53
54
|
lineHeight: 'body',
|
|
54
55
|
fontWeight: '1',
|
|
55
56
|
'&.is-hovered': {
|
|
@@ -59,7 +60,6 @@ var headerPlaceholder = {
|
|
|
59
60
|
var navigationHeader = {
|
|
60
61
|
headerPlaceholder: headerPlaceholder,
|
|
61
62
|
link: link,
|
|
62
|
-
logoBand: logoBand,
|
|
63
63
|
container: {
|
|
64
64
|
fontFamily: 'standard',
|
|
65
65
|
borderBottom: '1px solid',
|
|
@@ -79,11 +79,13 @@ var navigationHeader = {
|
|
|
79
79
|
backgroundColor: 'background.base',
|
|
80
80
|
maxWidth: 'unset',
|
|
81
81
|
p: 'sm',
|
|
82
|
+
'&:focus': _objectSpread({}, defaultFocus),
|
|
82
83
|
'& > li': {
|
|
83
84
|
p: '0'
|
|
84
85
|
}
|
|
85
86
|
},
|
|
86
87
|
dropdownMenuItem: _objectSpread(_objectSpread({}, link), {}, {
|
|
88
|
+
height: 'max-content',
|
|
87
89
|
padding: '.675rem 1rem',
|
|
88
90
|
pr: '2.25rem',
|
|
89
91
|
'&.is-hovered': {
|
|
@@ -106,7 +108,7 @@ var navigationHeader = {
|
|
|
106
108
|
cursor: 'pointer',
|
|
107
109
|
p: '0',
|
|
108
110
|
px: 'sm',
|
|
109
|
-
py: '
|
|
111
|
+
py: '3px',
|
|
110
112
|
border: 'none',
|
|
111
113
|
borderRadius: '3px',
|
|
112
114
|
bg: 'transparent',
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import ChevronDownIcon from '@pingux/mdi-react/ChevronDownIcon';
|
|
4
3
|
import LogoutVariantIcon from '@pingux/mdi-react/LogoutVariantIcon';
|
|
5
|
-
import { Avatar, Box, Button, Icon, Item,
|
|
4
|
+
import { Avatar, Box, Button, Icon, Item, Menu, OverlayProvider, PopoverMenu, Section, Text } from '../..';
|
|
5
|
+
import useGetTheme from '../../hooks/useGetTheme';
|
|
6
6
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
7
7
|
var HeaderAccountMenu = function HeaderAccountMenu(props) {
|
|
8
8
|
var userData = props.userData,
|
|
9
9
|
avatarProps = props.avatarProps;
|
|
10
|
+
var _ref = userData || {},
|
|
11
|
+
image = _ref.image,
|
|
12
|
+
firstName = _ref.firstName,
|
|
13
|
+
lastName = _ref.lastName,
|
|
14
|
+
email = _ref.email;
|
|
15
|
+
var _useGetTheme = useGetTheme(),
|
|
16
|
+
icons = _useGetTheme.icons;
|
|
17
|
+
var MenuDown = icons.MenuDown;
|
|
10
18
|
return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, {
|
|
11
19
|
variant: "navigationHeader.accountButton"
|
|
12
20
|
}, ___EmotionJSX(Box, {
|
|
@@ -14,53 +22,65 @@ var HeaderAccountMenu = function HeaderAccountMenu(props) {
|
|
|
14
22
|
alignItems: "center",
|
|
15
23
|
gap: "xs"
|
|
16
24
|
}, ___EmotionJSX(Avatar, _extends({
|
|
17
|
-
src:
|
|
25
|
+
src: image,
|
|
18
26
|
alt: "Avatar",
|
|
19
27
|
"aria-label": "Avatar"
|
|
20
28
|
}, avatarProps)), ___EmotionJSX(Icon, {
|
|
21
|
-
icon:
|
|
29
|
+
icon: MenuDown,
|
|
22
30
|
size: "16px",
|
|
23
|
-
|
|
31
|
+
title: {
|
|
32
|
+
name: 'Menu Up Icon'
|
|
33
|
+
},
|
|
34
|
+
color: "text.primary"
|
|
24
35
|
}))), ___EmotionJSX(Menu, {
|
|
25
|
-
|
|
36
|
+
p: "sm",
|
|
37
|
+
gap: "sm",
|
|
38
|
+
minWidth: "270px"
|
|
39
|
+
}, ___EmotionJSX(Section, {
|
|
40
|
+
key: "profile-section"
|
|
26
41
|
}, ___EmotionJSX(Item, {
|
|
27
|
-
key: "profile"
|
|
28
|
-
|
|
29
|
-
href: "#",
|
|
30
|
-
variant: "navigationHeader.dropdownMenuItem"
|
|
42
|
+
key: "profile",
|
|
43
|
+
textValue: "profile"
|
|
31
44
|
}, ___EmotionJSX(Box, {
|
|
32
45
|
isRow: true,
|
|
33
46
|
alignItems: "center",
|
|
34
|
-
gap: "md"
|
|
47
|
+
gap: "md",
|
|
48
|
+
px: "sm",
|
|
49
|
+
py: "xs"
|
|
35
50
|
}, ___EmotionJSX(Avatar, _extends({
|
|
36
|
-
src:
|
|
51
|
+
src: image,
|
|
37
52
|
alt: "Avatar",
|
|
38
53
|
"aria-label": "Avatar"
|
|
39
54
|
}, avatarProps)), ___EmotionJSX(Box, {
|
|
40
55
|
ml: "0"
|
|
41
56
|
}, ___EmotionJSX(Text, {
|
|
42
57
|
as: "h5",
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
mb: "0",
|
|
59
|
+
fontWeight: "2",
|
|
60
|
+
color: "text.primary"
|
|
61
|
+
}, firstName, ' ', lastName), ___EmotionJSX(Text, {
|
|
62
|
+
color: "text.secondary",
|
|
47
63
|
fontSize: "sm"
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
key: "signOut"
|
|
54
|
-
}, ___EmotionJSX(Link, {
|
|
55
|
-
color: "gray-700",
|
|
56
|
-
variant: "navigationHeader.dropdownMenuItem"
|
|
64
|
+
}, email))))), ___EmotionJSX(Section, {
|
|
65
|
+
key: "signOut-section"
|
|
66
|
+
}, ___EmotionJSX(Item, {
|
|
67
|
+
key: "signOut",
|
|
68
|
+
textValue: "signOut"
|
|
57
69
|
}, ___EmotionJSX(Box, {
|
|
58
70
|
isRow: true,
|
|
59
|
-
alignItems: "center"
|
|
71
|
+
alignItems: "center",
|
|
72
|
+
px: "sm",
|
|
73
|
+
py: "xs"
|
|
60
74
|
}, ___EmotionJSX(Icon, {
|
|
61
75
|
icon: LogoutVariantIcon,
|
|
62
76
|
size: "18px",
|
|
63
|
-
|
|
64
|
-
|
|
77
|
+
title: {
|
|
78
|
+
name: 'Sign Out Icon'
|
|
79
|
+
},
|
|
80
|
+
mr: "sm",
|
|
81
|
+
color: "text.primary"
|
|
82
|
+
}), ___EmotionJSX(Text, {
|
|
83
|
+
color: "text.primary"
|
|
84
|
+
}, "Sign Out")))))));
|
|
65
85
|
};
|
|
66
86
|
export default HeaderAccountMenu;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
|
2
1
|
import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
|
|
3
2
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
4
|
-
import React
|
|
3
|
+
import React from 'react';
|
|
5
4
|
import HelpCircleOutlineIcon from '@pingux/mdi-react/HelpCircleOutlineIcon';
|
|
6
5
|
import MoonWaningCrescentIcon from '@pingux/mdi-react/MoonWaningCrescentIcon';
|
|
7
6
|
import WhiteBalanceSunnyIcon from '@pingux/mdi-react/WhiteBalanceSunnyIcon';
|
|
@@ -43,7 +42,7 @@ var placeholderSeparator = {
|
|
|
43
42
|
bg: 'border.base',
|
|
44
43
|
flexShrink: 0,
|
|
45
44
|
mr: '0px',
|
|
46
|
-
ml: '
|
|
45
|
+
ml: 'md',
|
|
47
46
|
height: '28px'
|
|
48
47
|
};
|
|
49
48
|
|
|
@@ -56,14 +55,80 @@ var userData = {
|
|
|
56
55
|
lastName: 'Jensen',
|
|
57
56
|
image: userImage
|
|
58
57
|
};
|
|
58
|
+
var logo = ___EmotionJSX("svg", {
|
|
59
|
+
height: "24",
|
|
60
|
+
viewBox: "0 0 2385 415",
|
|
61
|
+
fill: "none",
|
|
62
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
63
|
+
}, ___EmotionJSX("g", {
|
|
64
|
+
"clip-path": "url(#clip0_10475_59692)"
|
|
65
|
+
}, ___EmotionJSX("path", {
|
|
66
|
+
d: "M0 372.674H372.613V0.000147457H0V372.674Z",
|
|
67
|
+
fill: "#B3282D"
|
|
68
|
+
}), ___EmotionJSX("mask", {
|
|
69
|
+
id: "mask0_10475_59692",
|
|
70
|
+
maskUnits: "userSpaceOnUse",
|
|
71
|
+
x: "0",
|
|
72
|
+
y: "0",
|
|
73
|
+
width: "2385",
|
|
74
|
+
height: "415"
|
|
75
|
+
}, ___EmotionJSX("path", {
|
|
76
|
+
d: "M0 0H2385V415H0V0Z",
|
|
77
|
+
fill: "white"
|
|
78
|
+
})), ___EmotionJSX("g", {
|
|
79
|
+
mask: "url(#mask0_10475_59692)"
|
|
80
|
+
}, ___EmotionJSX("path", {
|
|
81
|
+
d: "M1974.57 113.426L2006.72 108.051V326.877H1974.57V113.426ZM2100.71 138.143V276.131C2100.71 299.777 2106.68 307.961 2126.13 307.961C2134.89 307.961 2132.57 308.056 2138.16 305.039L2142.53 326.545C2132.57 332.106 2128.91 333.724 2115 333.724C2104.67 333.724 2096.74 331.591 2089.17 327.727C2075.28 320.419 2070.12 306.666 2070.12 285.153V138.143H2044.3V112.787H2070.12V31.6623H2101.92V112.787H2151.58L2142.05 138.143H2100.71ZM2355.46 320.461C2343.1 320.461 2333.12 309.882 2333.12 295.254C2333.12 280.613 2343.1 270.051 2355.46 270.051C2367.81 270.051 2377.81 280.613 2377.81 295.254C2377.81 309.882 2367.81 320.461 2355.46 320.461ZM2355.46 263.967C2339.19 263.967 2325.91 278.01 2325.91 295.254C2325.91 312.485 2339.19 326.516 2355.46 326.516C2371.75 326.516 2385 312.485 2385 295.254C2385 278.01 2371.75 263.967 2355.46 263.967ZM2350.31 292.569V282.426H2355.86C2359.06 282.426 2362.66 283.107 2362.66 287.269C2362.66 292.037 2359.48 292.569 2355.79 292.569H2350.31ZM2368.88 287.813C2368.88 280.351 2364.54 277.4 2356.51 277.4H2344.09V312.862H2350.31V297.594H2354.06L2362.73 312.862H2369.12L2360.13 297.341C2365.61 296.802 2368.88 293.863 2368.88 287.813ZM2342.12 112.787L2274.19 334.583C2260.68 377.602 2244.77 405.967 2210.22 415.002L2201.08 392.218C2220.42 385.661 2230.56 376.129 2239.01 352.831C2235.84 335.936 2234.05 328.591 2234.05 328.591C2231.68 314.838 2220.94 273.113 2214.19 251.637L2171.65 117.513L2202.28 106.313L2242.81 245.167C2248.75 265.403 2254.71 298.487 2254.71 298.487H2255.51C2255.51 298.487 2263.04 270.985 2267.83 253.364L2306.76 112.787H2342.12ZM1385.26 272.263C1385.26 272.263 1381.67 281.293 1373.34 287.755C1360.6 297.623 1351.46 301.504 1335.21 301.504C1316.93 301.504 1304.59 294.2 1295.47 276.566C1289.1 264.108 1287.52 245.611 1287.52 220.674C1287.52 190.582 1290.68 175.12 1300.23 158.781C1308.57 144.169 1321.68 136.429 1337.2 136.429C1360.6 136.429 1375.34 143.754 1385.26 158.781V272.263ZM1416.66 31.6623H1385.65V102.918C1385.65 118.364 1386.04 135.997 1386.04 135.997C1374.15 118.812 1354.65 108.931 1332.42 108.931C1318.11 108.931 1306.99 112.786 1294.27 122.248C1267.25 142.426 1253.36 175.97 1253.36 221.537C1253.36 289.871 1282.76 329.852 1333.99 329.852C1357.04 329.852 1372.16 322.573 1386.45 304.952C1386.84 316.091 1390.82 326.877 1390.82 326.877H1422.61C1418.21 314.393 1416.66 294.615 1416.66 257.68V31.6623ZM1889.71 113.214H1940.82L1931.3 138.575H1888.51V276.566C1888.51 300.225 1894.47 308.405 1913.94 308.405C1922.69 308.405 1920.38 308.505 1925.96 305.467L1930.34 326.985C1920.38 332.554 1916.72 334.168 1902.8 334.168C1892.48 334.168 1884.55 332.039 1876.98 328.167C1863.09 320.859 1857.91 307.098 1857.91 285.597V138.575H1832.1V113.214H1857.91V32.1022H1889.71V113.214ZM1799.51 139.438C1802.68 147.173 1804.28 155.76 1804.28 164.375V326.893H1772.88V181.992C1772.88 159.196 1771.29 153.631 1765.72 146.31C1761.37 140.728 1753 137.28 1743.88 137.28C1727.95 137.28 1703.36 151.07 1689.05 167.384V326.893H1658.85V161.802C1658.85 131.266 1651.33 116.65 1651.33 116.65L1681.49 107.624C1681.49 107.624 1688.68 123.502 1688.68 141.164C1709.29 118.812 1729.95 108.051 1751.03 108.051C1772.49 108.051 1791.56 120.539 1799.51 139.438ZM1492.67 200.032C1494.24 155.747 1510.14 133.408 1538.35 133.408C1553.46 133.408 1567.34 140.728 1574.09 152.324C1580.07 162.636 1582.85 176.829 1583.24 200.032H1492.67ZM1539.93 107.176C1516.08 107.176 1496.63 116.65 1480.74 136.848C1464.05 158.378 1456.92 181.564 1456.92 217.678C1456.92 288.63 1489.86 331.591 1544.7 331.591C1570.14 331.591 1594 322.142 1611.44 304.952L1599.52 283.426C1585.63 297.204 1570.14 303.633 1551.05 303.633C1531.18 303.633 1512.91 295.909 1501.79 277.429C1495.03 266.278 1492.67 250.778 1492.67 230.58V225.401H1616.2V220.674C1615.44 169.538 1610.64 149.331 1593.59 130.391C1580.07 115.376 1561.39 107.176 1539.93 107.176ZM1178.26 31.9653H1210.05V326.877H1178.26V31.9653Z",
|
|
82
|
+
fill: "#263746"
|
|
83
|
+
}), ___EmotionJSX("path", {
|
|
84
|
+
d: "M836.686 159.866C826.225 159.866 812.64 167.269 800.607 178.756V327.575H748.544V175.05C748.544 156.969 746.208 139.705 741.561 125.724L787.752 111.763C792.428 120.403 795.146 129.43 795.146 138.062C802.905 132.289 809.511 127.359 818.063 122.437C828.54 116.697 842.142 113.415 853.781 113.415C875.918 113.415 895.338 125.724 901.545 143.83C904.259 151.636 905.429 160.667 905.429 173.826V327.575H854.159V190.684C854.159 166.85 850.283 159.866 836.686 159.866ZM985.056 184.927C985.056 165.207 996.326 153.682 1016.12 153.682C1035.95 153.682 1047.59 165.207 1047.59 184.927C1047.59 204.25 1036.33 214.932 1015.74 214.932C997.484 214.932 985.056 206.308 985.056 184.927ZM1035.95 273.729L1007.98 273.314C1002.53 273.314 999.446 271.247 999.446 268.372C999.446 262.632 1006.82 257.702 1020.01 251.103C1023.88 251.527 1025.44 251.527 1027.78 251.527C1070.11 251.527 1101.2 225.195 1101.2 189.028C1101.2 175.05 1097.28 164.356 1089.51 154.52C1092.62 154.935 1098.07 155.736 1103.13 155.736C1117.49 155.736 1128.34 151.209 1139.62 140.112L1117.88 105.164C1105.83 116.697 1091.08 123.275 1076.71 123.275C1070.11 123.275 1063.1 121.603 1052.25 118.739C1037.87 115.054 1027.78 113.415 1016.51 113.415C965.662 113.415 932.645 141.357 932.645 184.521C932.645 215.758 946.616 235.076 975.355 242.899C942.724 251.921 938.857 264.69 938.857 278.249C938.857 292.641 944.662 302.09 953.998 305.771C963.33 309.901 978.467 311.934 1001.75 312.357L1023.88 312.772C1044.49 313.183 1060.39 318.952 1060.39 337.847C1060.39 346.487 1055.35 354.289 1047.59 359.211C1039.45 364.577 1028.18 366.191 1014.99 366.191C990.907 366.191 977.678 357.169 977.678 340.299C977.678 334.552 978.073 331.692 980.027 326.758H931.869C929.919 330.85 927.213 336.631 927.213 348.139C927.213 362.494 932.645 374.856 943.521 385.53C961.375 403.217 990.513 408.135 1018.84 408.135C1049.9 408.135 1079.82 400.757 1097.28 381.007C1108.17 368.685 1113.22 355.131 1113.22 337.452C1113.22 318.528 1107.77 304.145 1096.13 292.641C1082.14 279.058 1066.22 274.128 1035.95 273.729ZM654.178 120.781L706.199 112.145V327.575H654.178V120.781ZM648.34 59.1327C648.34 40.2294 663.1 25.0155 680.959 25.0155C698.436 25.0155 712.428 40.2294 712.428 59.1327C712.428 78.0359 698.042 93.2581 680.174 93.2581C662.718 93.2581 648.34 78.0359 648.34 59.1327ZM566.36 160.667C559.003 172.59 552.393 175.474 530.265 175.474H501.924V88.3113H536.455C559.381 88.3113 572.962 104.351 572.962 131.069C572.962 144.648 571.045 152.881 566.36 160.667ZM593.572 55.85C578.41 46.7989 564.427 41.8729 518.609 41.8729H447.559V327.575H501.924V222.344H531.812C561.7 222.344 573.364 219.049 585.792 212.878C615.298 198.087 632.365 167.663 632.365 129.861C632.365 96.9516 618.784 70.6531 593.572 55.85Z",
|
|
85
|
+
fill: "#263746"
|
|
86
|
+
}))), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
|
|
87
|
+
id: "clip0_10475_59692"
|
|
88
|
+
}, ___EmotionJSX("rect", {
|
|
89
|
+
width: "2385",
|
|
90
|
+
height: "415",
|
|
91
|
+
fill: "white"
|
|
92
|
+
}))));
|
|
93
|
+
var whiteLogo = ___EmotionJSX("svg", {
|
|
94
|
+
height: "24",
|
|
95
|
+
viewBox: "0 0 2385 415",
|
|
96
|
+
fill: "none",
|
|
97
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
98
|
+
}, ___EmotionJSX("g", {
|
|
99
|
+
"clip-path": "url(#clip0_10543_71950)"
|
|
100
|
+
}, ___EmotionJSX("path", {
|
|
101
|
+
d: "M0 372.674H372.613V0.000147457H0V372.674Z",
|
|
102
|
+
fill: "white"
|
|
103
|
+
}), ___EmotionJSX("mask", {
|
|
104
|
+
id: "mask0_10543_71950",
|
|
105
|
+
maskUnits: "userSpaceOnUse",
|
|
106
|
+
x: "0",
|
|
107
|
+
y: "0",
|
|
108
|
+
width: "2385",
|
|
109
|
+
height: "415"
|
|
110
|
+
}, ___EmotionJSX("path", {
|
|
111
|
+
d: "M0 0H2385V415H0V0Z",
|
|
112
|
+
fill: "white"
|
|
113
|
+
})), ___EmotionJSX("g", {
|
|
114
|
+
mask: "url(#mask0_10543_71950)"
|
|
115
|
+
}, ___EmotionJSX("path", {
|
|
116
|
+
d: "M1974.57 113.426L2006.72 108.051V326.877H1974.57V113.426ZM2100.71 138.143V276.131C2100.71 299.777 2106.68 307.961 2126.13 307.961C2134.89 307.961 2132.57 308.056 2138.16 305.039L2142.53 326.545C2132.57 332.106 2128.91 333.724 2115 333.724C2104.67 333.724 2096.74 331.591 2089.17 327.727C2075.28 320.419 2070.12 306.666 2070.12 285.153V138.143H2044.3V112.787H2070.12V31.6623H2101.92V112.787H2151.58L2142.05 138.143H2100.71ZM2355.46 320.461C2343.1 320.461 2333.12 309.882 2333.12 295.254C2333.12 280.613 2343.1 270.051 2355.46 270.051C2367.81 270.051 2377.81 280.613 2377.81 295.254C2377.81 309.882 2367.81 320.461 2355.46 320.461ZM2355.46 263.967C2339.19 263.967 2325.91 278.01 2325.91 295.254C2325.91 312.485 2339.19 326.516 2355.46 326.516C2371.75 326.516 2385 312.485 2385 295.254C2385 278.01 2371.75 263.967 2355.46 263.967ZM2350.31 292.569V282.426H2355.86C2359.06 282.426 2362.66 283.107 2362.66 287.269C2362.66 292.037 2359.48 292.569 2355.79 292.569H2350.31ZM2368.88 287.813C2368.88 280.351 2364.54 277.4 2356.51 277.4H2344.09V312.862H2350.31V297.594H2354.06L2362.73 312.862H2369.12L2360.13 297.341C2365.61 296.802 2368.88 293.863 2368.88 287.813ZM2342.12 112.787L2274.19 334.583C2260.68 377.602 2244.77 405.967 2210.22 415.002L2201.08 392.218C2220.42 385.661 2230.56 376.129 2239.01 352.831C2235.84 335.936 2234.05 328.591 2234.05 328.591C2231.68 314.838 2220.94 273.113 2214.19 251.637L2171.65 117.513L2202.28 106.313L2242.81 245.167C2248.75 265.403 2254.71 298.487 2254.71 298.487H2255.51C2255.51 298.487 2263.04 270.985 2267.83 253.364L2306.76 112.787H2342.12ZM1385.26 272.263C1385.26 272.263 1381.67 281.293 1373.34 287.755C1360.6 297.623 1351.46 301.504 1335.21 301.504C1316.93 301.504 1304.59 294.2 1295.47 276.566C1289.1 264.108 1287.52 245.611 1287.52 220.674C1287.52 190.582 1290.68 175.12 1300.23 158.781C1308.57 144.169 1321.68 136.429 1337.2 136.429C1360.6 136.429 1375.34 143.754 1385.26 158.781V272.263ZM1416.66 31.6623H1385.65V102.918C1385.65 118.364 1386.04 135.997 1386.04 135.997C1374.15 118.812 1354.65 108.931 1332.42 108.931C1318.11 108.931 1306.99 112.786 1294.27 122.248C1267.25 142.426 1253.36 175.97 1253.36 221.537C1253.36 289.871 1282.76 329.852 1333.99 329.852C1357.04 329.852 1372.16 322.573 1386.45 304.952C1386.84 316.091 1390.82 326.877 1390.82 326.877H1422.61C1418.21 314.393 1416.66 294.615 1416.66 257.68V31.6623ZM1889.71 113.214H1940.82L1931.3 138.575H1888.51V276.566C1888.51 300.225 1894.47 308.405 1913.94 308.405C1922.69 308.405 1920.38 308.505 1925.96 305.467L1930.34 326.985C1920.38 332.554 1916.72 334.168 1902.8 334.168C1892.48 334.168 1884.55 332.039 1876.98 328.167C1863.09 320.859 1857.91 307.098 1857.91 285.597V138.575H1832.1V113.214H1857.91V32.1022H1889.71V113.214ZM1799.51 139.438C1802.68 147.173 1804.28 155.76 1804.28 164.375V326.893H1772.88V181.992C1772.88 159.196 1771.29 153.631 1765.72 146.31C1761.37 140.728 1753 137.28 1743.88 137.28C1727.95 137.28 1703.36 151.07 1689.05 167.384V326.893H1658.85V161.802C1658.85 131.266 1651.33 116.65 1651.33 116.65L1681.49 107.624C1681.49 107.624 1688.68 123.502 1688.68 141.164C1709.29 118.812 1729.95 108.051 1751.03 108.051C1772.49 108.051 1791.56 120.539 1799.51 139.438ZM1492.67 200.032C1494.24 155.747 1510.14 133.408 1538.35 133.408C1553.46 133.408 1567.34 140.728 1574.09 152.324C1580.07 162.636 1582.85 176.829 1583.24 200.032H1492.67ZM1539.93 107.176C1516.08 107.176 1496.63 116.65 1480.74 136.848C1464.05 158.378 1456.92 181.564 1456.92 217.678C1456.92 288.63 1489.86 331.591 1544.7 331.591C1570.14 331.591 1594 322.142 1611.44 304.952L1599.52 283.426C1585.63 297.204 1570.14 303.633 1551.05 303.633C1531.18 303.633 1512.91 295.909 1501.79 277.429C1495.03 266.278 1492.67 250.778 1492.67 230.58V225.401H1616.2V220.674C1615.44 169.538 1610.64 149.331 1593.59 130.391C1580.07 115.376 1561.39 107.176 1539.93 107.176ZM1178.26 31.9653H1210.05V326.877H1178.26V31.9653Z",
|
|
117
|
+
fill: "white"
|
|
118
|
+
}), ___EmotionJSX("path", {
|
|
119
|
+
d: "M836.686 159.866C826.225 159.866 812.64 167.269 800.607 178.756V327.575H748.544V175.05C748.544 156.969 746.208 139.705 741.561 125.724L787.752 111.763C792.428 120.403 795.146 129.43 795.146 138.062C802.905 132.289 809.511 127.359 818.063 122.437C828.54 116.697 842.142 113.415 853.781 113.415C875.918 113.415 895.338 125.724 901.545 143.83C904.259 151.636 905.429 160.667 905.429 173.826V327.575H854.159V190.684C854.159 166.85 850.283 159.866 836.686 159.866ZM985.056 184.927C985.056 165.207 996.326 153.682 1016.12 153.682C1035.95 153.682 1047.59 165.207 1047.59 184.927C1047.59 204.25 1036.33 214.932 1015.74 214.932C997.484 214.932 985.056 206.308 985.056 184.927ZM1035.95 273.729L1007.98 273.314C1002.53 273.314 999.446 271.247 999.446 268.372C999.446 262.632 1006.82 257.702 1020.01 251.103C1023.88 251.527 1025.44 251.527 1027.78 251.527C1070.11 251.527 1101.2 225.195 1101.2 189.028C1101.2 175.05 1097.28 164.356 1089.51 154.52C1092.62 154.935 1098.07 155.736 1103.13 155.736C1117.49 155.736 1128.34 151.209 1139.62 140.112L1117.88 105.164C1105.83 116.697 1091.08 123.275 1076.71 123.275C1070.11 123.275 1063.1 121.603 1052.25 118.739C1037.87 115.054 1027.78 113.415 1016.51 113.415C965.662 113.415 932.645 141.357 932.645 184.521C932.645 215.758 946.616 235.076 975.355 242.899C942.724 251.921 938.857 264.69 938.857 278.249C938.857 292.641 944.662 302.09 953.998 305.771C963.33 309.901 978.467 311.934 1001.75 312.357L1023.88 312.772C1044.49 313.183 1060.39 318.952 1060.39 337.847C1060.39 346.487 1055.35 354.289 1047.59 359.211C1039.45 364.577 1028.18 366.191 1014.99 366.191C990.907 366.191 977.678 357.169 977.678 340.299C977.678 334.552 978.073 331.692 980.027 326.758H931.869C929.919 330.85 927.213 336.631 927.213 348.139C927.213 362.494 932.645 374.856 943.521 385.53C961.375 403.217 990.513 408.135 1018.84 408.135C1049.9 408.135 1079.82 400.757 1097.28 381.007C1108.17 368.685 1113.22 355.131 1113.22 337.452C1113.22 318.528 1107.77 304.145 1096.13 292.641C1082.14 279.058 1066.22 274.128 1035.95 273.729ZM654.178 120.781L706.199 112.145V327.575H654.178V120.781ZM648.34 59.1327C648.34 40.2294 663.1 25.0155 680.959 25.0155C698.436 25.0155 712.428 40.2294 712.428 59.1327C712.428 78.0359 698.042 93.2581 680.174 93.2581C662.718 93.2581 648.34 78.0359 648.34 59.1327ZM566.36 160.667C559.003 172.59 552.393 175.474 530.265 175.474H501.924V88.3113H536.455C559.381 88.3113 572.962 104.351 572.962 131.069C572.962 144.648 571.045 152.881 566.36 160.667ZM593.572 55.85C578.41 46.7989 564.427 41.8729 518.609 41.8729H447.559V327.575H501.924V222.344H531.812C561.7 222.344 573.364 219.049 585.792 212.878C615.298 198.087 632.365 167.663 632.365 129.861C632.365 96.9516 618.784 70.6531 593.572 55.85Z",
|
|
120
|
+
fill: "white"
|
|
121
|
+
}))), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
|
|
122
|
+
id: "clip0_10543_71950"
|
|
123
|
+
}, ___EmotionJSX("rect", {
|
|
124
|
+
width: "2385",
|
|
125
|
+
height: "415",
|
|
126
|
+
fill: "white"
|
|
127
|
+
}))));
|
|
59
128
|
export var Default = function Default(_ref) {
|
|
60
129
|
var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
61
|
-
var _useState = useState(false),
|
|
62
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
63
|
-
isLoggedIn = _useState2[0],
|
|
64
|
-
setIsLoggedIn = _useState2[1];
|
|
65
130
|
var _useGetTheme = useGetTheme(),
|
|
66
|
-
|
|
131
|
+
themeState = _useGetTheme.themeState;
|
|
67
132
|
return ___EmotionJSX(Box, {
|
|
68
133
|
p: "0"
|
|
69
134
|
}, ___EmotionJSX(NavigationHeader, _extends({}, args, {
|
|
@@ -73,23 +138,20 @@ export var Default = function Default(_ref) {
|
|
|
73
138
|
isRow: true,
|
|
74
139
|
alignItems: "center",
|
|
75
140
|
justifyContent: "center",
|
|
76
|
-
py: "
|
|
141
|
+
py: "xs",
|
|
77
142
|
flex: "0 0 auto"
|
|
78
|
-
},
|
|
143
|
+
}, themeState.isNextGenDark ? whiteLogo : logo, ___EmotionJSX(Separator, {
|
|
79
144
|
orientation: "vertical",
|
|
80
145
|
sx: placeholderSeparator,
|
|
81
146
|
style: {
|
|
82
147
|
height: '28px',
|
|
83
|
-
marginLeft: '
|
|
148
|
+
marginLeft: '1rem'
|
|
84
149
|
}
|
|
85
|
-
}), ___EmotionJSX(
|
|
86
|
-
href: "#",
|
|
87
|
-
variant: "navigationHeader.logoBand"
|
|
88
|
-
}, ___EmotionJSX(Text, {
|
|
150
|
+
}), ___EmotionJSX(Text, {
|
|
89
151
|
as: "h2",
|
|
90
152
|
variant: "navigationHeader.headerPlaceholder",
|
|
91
153
|
id: "next-gen-header"
|
|
92
|
-
}, "Marketplace"))
|
|
154
|
+
}, "Marketplace")), ___EmotionJSX(Box, {
|
|
93
155
|
as: "ul",
|
|
94
156
|
isRow: true,
|
|
95
157
|
alignItems: "center",
|
|
@@ -120,9 +182,7 @@ export var Default = function Default(_ref) {
|
|
|
120
182
|
}, "Reports")), ___EmotionJSX(Box, {
|
|
121
183
|
as: "li",
|
|
122
184
|
display: breakpointDisplaysXS
|
|
123
|
-
}, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
|
|
124
|
-
isContainFocus: true
|
|
125
|
-
}, ___EmotionJSX(IconButton, {
|
|
185
|
+
}, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
|
|
126
186
|
"aria-label": "Help & Support",
|
|
127
187
|
variant: "headerNav"
|
|
128
188
|
}, ___EmotionJSX(Icon, {
|
|
@@ -137,25 +197,25 @@ export var Default = function Default(_ref) {
|
|
|
137
197
|
}, ___EmotionJSX(Item, {
|
|
138
198
|
key: "Help & Support"
|
|
139
199
|
}, ___EmotionJSX(Link, {
|
|
140
|
-
href: "
|
|
200
|
+
href: "#",
|
|
141
201
|
"aria-label": "Help & Support",
|
|
142
202
|
variant: "navigationHeader.dropdownMenuItem"
|
|
143
203
|
}, "Help & Support")), ___EmotionJSX(Item, {
|
|
144
204
|
key: "Doc"
|
|
145
205
|
}, ___EmotionJSX(Link, {
|
|
146
|
-
href: "
|
|
206
|
+
href: "#",
|
|
147
207
|
"aria-label": "Doc",
|
|
148
208
|
variant: "navigationHeader.dropdownMenuItem"
|
|
149
209
|
}, "Doc")), ___EmotionJSX(Item, {
|
|
150
210
|
key: "Developer"
|
|
151
211
|
}, ___EmotionJSX(Link, {
|
|
152
|
-
href: "
|
|
212
|
+
href: "#",
|
|
153
213
|
"aria-label": "Developer",
|
|
154
214
|
variant: "navigationHeader.dropdownMenuItem"
|
|
155
215
|
}, "Developer")), ___EmotionJSX(Item, {
|
|
156
216
|
key: "Labs"
|
|
157
217
|
}, ___EmotionJSX(Link, {
|
|
158
|
-
href: "
|
|
218
|
+
href: "#",
|
|
159
219
|
"aria-label": "Labs",
|
|
160
220
|
variant: "navigationHeader.dropdownMenuItem"
|
|
161
221
|
}, "Labs")))))), ___EmotionJSX(Box, {
|
|
@@ -175,7 +235,7 @@ export var Default = function Default(_ref) {
|
|
|
175
235
|
})), ___EmotionJSX(Box, {
|
|
176
236
|
as: "li",
|
|
177
237
|
display: breakpointDisplaysXS
|
|
178
|
-
},
|
|
238
|
+
}, ___EmotionJSX(HeaderAccountMenu, {
|
|
179
239
|
userData: userData,
|
|
180
240
|
avatarProps: {
|
|
181
241
|
defaultText: 'KL',
|
|
@@ -183,12 +243,5 @@ export var Default = function Default(_ref) {
|
|
|
183
243
|
backgroundColor: 'red-100',
|
|
184
244
|
color: 'red-800'
|
|
185
245
|
}
|
|
186
|
-
})
|
|
187
|
-
href: "#",
|
|
188
|
-
variant: "navigationHeader.link",
|
|
189
|
-
"aria-label": "Sign In",
|
|
190
|
-
onPress: function onPress() {
|
|
191
|
-
return setIsLoggedIn(!isLoggedIn);
|
|
192
|
-
}
|
|
193
|
-
}, "Sign In")))));
|
|
246
|
+
})))));
|
|
194
247
|
};
|
|
@@ -243,6 +243,7 @@ var iconButtons = {
|
|
|
243
243
|
px: 'md',
|
|
244
244
|
py: 'sm',
|
|
245
245
|
width: '56px',
|
|
246
|
+
height: '40px',
|
|
246
247
|
'&.is-hovered': {
|
|
247
248
|
path: {
|
|
248
249
|
fill: 'text.secondary'
|
|
@@ -252,7 +253,10 @@ var iconButtons = {
|
|
|
252
253
|
path: {
|
|
253
254
|
fill: 'text.secondary'
|
|
254
255
|
}
|
|
255
|
-
}
|
|
256
|
+
},
|
|
257
|
+
'&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
|
|
258
|
+
outlineOffset: '1px'
|
|
259
|
+
})
|
|
256
260
|
}),
|
|
257
261
|
copyButton: copyButton
|
|
258
262
|
};
|
|
@@ -11,14 +11,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
|
11
11
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
12
12
|
var defaultFocus = {
|
|
13
13
|
outline: '2px solid',
|
|
14
|
-
outlineColor: 'active'
|
|
14
|
+
outlineColor: 'active',
|
|
15
|
+
outlineOffset: '1px'
|
|
15
16
|
};
|
|
16
17
|
var link = {
|
|
18
|
+
display: 'inline-block',
|
|
19
|
+
height: '40px',
|
|
17
20
|
fontSize: 'md',
|
|
18
21
|
fontFamily: 'standard',
|
|
19
22
|
py: 'sm',
|
|
20
23
|
px: 'md',
|
|
21
24
|
fontWeight: '1',
|
|
25
|
+
lineHeight: 'body',
|
|
22
26
|
color: 'text.primary',
|
|
23
27
|
textDecoration: 'none',
|
|
24
28
|
borderRadius: '3px',
|
|
@@ -26,7 +30,7 @@ var link = {
|
|
|
26
30
|
textDecoration: 'none',
|
|
27
31
|
color: 'text.secondary'
|
|
28
32
|
},
|
|
29
|
-
'&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
|
|
33
|
+
'&.is-focused, &:focus-visible ': _objectSpread(_objectSpread({}, defaultFocus), {}, {
|
|
30
34
|
textDecoration: 'none'
|
|
31
35
|
}),
|
|
32
36
|
'&.is-pressed': {
|
|
@@ -36,13 +40,10 @@ var link = {
|
|
|
36
40
|
textDecoration: 'none'
|
|
37
41
|
}
|
|
38
42
|
};
|
|
39
|
-
var logoBand = _objectSpread(_objectSpread({}, link), {}, {
|
|
40
|
-
p: 0
|
|
41
|
-
});
|
|
42
43
|
var headerPlaceholder = {
|
|
43
44
|
fontSize: 'lg',
|
|
44
45
|
ml: 'md',
|
|
45
|
-
color: 'text.
|
|
46
|
+
color: 'text.primary',
|
|
46
47
|
lineHeight: 'body',
|
|
47
48
|
fontWeight: '1',
|
|
48
49
|
'&.is-hovered': {
|
|
@@ -52,7 +53,6 @@ var headerPlaceholder = {
|
|
|
52
53
|
var navigationHeader = {
|
|
53
54
|
headerPlaceholder: headerPlaceholder,
|
|
54
55
|
link: link,
|
|
55
|
-
logoBand: logoBand,
|
|
56
56
|
container: {
|
|
57
57
|
fontFamily: 'standard',
|
|
58
58
|
borderBottom: '1px solid',
|
|
@@ -72,11 +72,13 @@ var navigationHeader = {
|
|
|
72
72
|
backgroundColor: 'background.base',
|
|
73
73
|
maxWidth: 'unset',
|
|
74
74
|
p: 'sm',
|
|
75
|
+
'&:focus': _objectSpread({}, defaultFocus),
|
|
75
76
|
'& > li': {
|
|
76
77
|
p: '0'
|
|
77
78
|
}
|
|
78
79
|
},
|
|
79
80
|
dropdownMenuItem: _objectSpread(_objectSpread({}, link), {}, {
|
|
81
|
+
height: 'max-content',
|
|
80
82
|
padding: '.675rem 1rem',
|
|
81
83
|
pr: '2.25rem',
|
|
82
84
|
'&.is-hovered': {
|
|
@@ -99,7 +101,7 @@ var navigationHeader = {
|
|
|
99
101
|
cursor: 'pointer',
|
|
100
102
|
p: '0',
|
|
101
103
|
px: 'sm',
|
|
102
|
-
py: '
|
|
104
|
+
py: '3px',
|
|
103
105
|
border: 'none',
|
|
104
106
|
borderRadius: '3px',
|
|
105
107
|
bg: 'transparent',
|