@superdispatch/ui-lab 0.35.1 → 0.35.2

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 (11) hide show
  1. package/dist-node/index.js +29 -19
  2. package/dist-node/index.js.map +1 -1
  3. package/dist-src/button/Button.js +2 -2
  4. package/dist-src/navbar/NavbarAccordion.js +10 -5
  5. package/dist-src/navbar/NavbarAvatar.js +2 -2
  6. package/dist-src/navbar/NavbarItem.js +2 -2
  7. package/dist-src/navbar/NavbarList.js +15 -10
  8. package/dist-src/navbar/NavbarMenu.js +3 -3
  9. package/dist-web/index.js +30 -20
  10. package/dist-web/index.js.map +1 -1
  11. package/package.json +2 -2
package/dist-src/button/Button.js CHANGED
@@ -97,9 +97,9 @@ function getCriticalVariables(size) {
97
97
  }
98
98
  function getTextVariables(size) {
99
99
  return createButtonVariables(size, {
100
- textColor: Color.Blue500,
100
+ textColor: ColorDynamic.Blue500,
101
101
  outlineColor: ColorDynamic.Blue30,
102
- textColorHovered: Color.Blue500,
102
+ textColorHovered: ColorDynamic.Blue500,
103
103
  backgroundColorHovered: ColorDynamic.Blue50,
104
104
  backgroundColorActive: ColorDynamic.Blue75,
105
105
  textColorDisabled: ColorDynamic.Blue30
package/dist-src/navbar/NavbarAccordion.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/objectSpread2";
2
2
  import { Accordion, AccordionSummary } from '@material-ui/core';
3
3
  import { ExpandMore } from '@material-ui/icons';
4
- import { ColorDynamic, useUID } from '@superdispatch/ui';
4
+ import { Color, ColorDark, ColorDynamic, useUID } from '@superdispatch/ui';
5
5
  import { useEffect, useMemo, useState, createElement as _createElement } from 'react';
6
6
  import styled from 'styled-components';
7
7
  import { useNavbarContext } from "./NavbarContext.js";
@@ -14,23 +14,28 @@ export var NavbarAccordionLabel = /*#__PURE__*/styled.span.withConfig({
14
14
  var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
15
15
  displayName: "NavbarAccordion__NavbarAccordionRoot",
16
16
  componentId: "SD__sc-1s7g3kw-1"
17
- })(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&[data-gutter]{margin-top:16px;}&[data-gutter].MuiAccordion-root.Mui-expanded{margin-top:16px;}"], ColorDynamic.White);
17
+ })(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:", ";&[aria-current]{background-color:", ";color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&[data-gutter]{margin-top:16px;}&[data-gutter].MuiAccordion-root.Mui-expanded{margin-top:16px;}"], _ref => {
18
+ var {
19
+ theme
20
+ } = _ref;
21
+ return theme.palette.type === 'dark' ? ColorDark.White : Color.Dark500;
22
+ }, Color.White10, ColorDynamic.White);
18
23
  var NavbarAccordionSummary = /*#__PURE__*/styled(AccordionSummary).withConfig({
19
24
  displayName: "NavbarAccordion__NavbarAccordionSummary",
20
25
  componentId: "SD__sc-1s7g3kw-2"
21
- })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], ColorDynamic.White, ColorDynamic.Blue300);
26
+ })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.White10, ColorDynamic.Blue300);
22
27
  var IconWrapper = /*#__PURE__*/styled.div.withConfig({
23
28
  displayName: "NavbarAccordion__IconWrapper",
24
29
  componentId: "SD__sc-1s7g3kw-3"
25
30
  })(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
26
- export function NavbarAccordion(_ref) {
31
+ export function NavbarAccordion(_ref2) {
27
32
  var {
28
33
  label,
29
34
  icon,
30
35
  gutter,
31
36
  items,
32
37
  onClick: _onClick
33
- } = _ref;
38
+ } = _ref2;
34
39
  var uid = useUID();
35
40
  var {
36
41
  setDrawerOpen,
package/dist-src/navbar/NavbarAvatar.js CHANGED
@@ -2,14 +2,14 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["title", "subtitle", "children"];
4
4
  import { Avatar, Typography } from '@material-ui/core';
5
- import { ColorDynamic, Column, Columns, Stack } from '@superdispatch/ui';
5
+ import { Color, Column, Columns, Stack } from '@superdispatch/ui';
6
6
  import styled from 'styled-components';
7
7
  import { useNavbarContext } from "./NavbarContext.js";
8
8
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
9
  var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
10
10
  displayName: "NavbarAvatar__StyledTypography",
11
11
  componentId: "SD__sc-19q2zd0-0"
12
- })(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], ColorDynamic.Silver500, ColorDynamic.White);
12
+ })(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], Color.White, Color.White);
13
13
  export function NavbarAvatar(_ref) {
14
14
  var {
15
15
  title,
package/dist-src/navbar/NavbarItem.js CHANGED
@@ -1,4 +1,4 @@
1
- import { ColorDynamic, useUID } from '@superdispatch/ui';
1
+ import { Color, ColorDynamic, useUID } from '@superdispatch/ui';
2
2
  import styled from 'styled-components';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
4
  export var NavbarBadge = /*#__PURE__*/styled.span.withConfig({
@@ -12,7 +12,7 @@ export var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
12
12
  var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
13
13
  displayName: "NavbarItem__NavbarItemRoot",
14
14
  componentId: "SD__sc-1pvzq3w-2"
15
- })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], ColorDynamic.White, ColorDynamic.Blue300);
15
+ })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&:hover{background-color:", ";color:", ";border-left-color:", ";}"], Color.White, Color.White10, ColorDynamic.Blue300, Color.White08, Color.White, ColorDynamic.Blue300);
16
16
  var IconWrapper = /*#__PURE__*/styled.div.withConfig({
17
17
  displayName: "NavbarItem__IconWrapper",
18
18
  componentId: "SD__sc-1pvzq3w-3"
package/dist-src/navbar/NavbarList.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/objectSpread2";
2
2
  import { IconButton } from '@material-ui/core';
3
3
  import { Menu as MenuIcon, MenuOpen } from '@material-ui/icons';
4
- import { ColorDynamic, Inline, useResponsiveValue } from '@superdispatch/ui';
4
+ import { Color, ColorDark, ColorDynamic, Inline, useResponsiveValue } from '@superdispatch/ui';
5
5
  import { useMemo, createElement as _createElement } from 'react';
6
6
  import styled from 'styled-components';
7
7
  import { NavbarAccordion } from "./NavbarAccordion.js";
@@ -15,26 +15,31 @@ var Header = /*#__PURE__*/styled.div.withConfig({
15
15
  var Wrapper = /*#__PURE__*/styled.div.withConfig({
16
16
  displayName: "NavbarList__Wrapper",
17
17
  componentId: "SD__sc-19zrmxc-1"
18
- })(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:#1b2638;transition:width 0.3s linear;height:100%;width:", ";&[data-expanded='true']{width:", ";}&[data-expanded='false']{width:", ";& > ", "{justify-content:center;}}"], _ref => {
18
+ })(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:", ";transition:width 0.3s linear;height:100%;width:", ";&[data-expanded='true']{width:", ";}&[data-expanded='false']{width:", ";& > ", "{justify-content:center;}}"], _ref => {
19
19
  var {
20
- isMobile
20
+ theme
21
21
  } = _ref;
22
- return isMobile ? '280px' : 'initial';
22
+ return theme.palette.type === 'dark' ? ColorDark.White : Color.Dark500;
23
23
  }, _ref2 => {
24
24
  var {
25
25
  isMobile
26
26
  } = _ref2;
27
- return isMobile ? '280px' : '240px';
27
+ return isMobile ? '280px' : 'initial';
28
28
  }, _ref3 => {
29
29
  var {
30
30
  isMobile
31
31
  } = _ref3;
32
+ return isMobile ? '280px' : '240px';
33
+ }, _ref4 => {
34
+ var {
35
+ isMobile
36
+ } = _ref4;
32
37
  return isMobile ? '280px' : '72px';
33
38
  }, Header);
34
39
  var ExpandIconButton = /*#__PURE__*/styled(IconButton).withConfig({
35
40
  displayName: "NavbarList__ExpandIconButton",
36
41
  componentId: "SD__sc-19zrmxc-2"
37
- })(["color:", ";&&:focus{background-color:inherit;}"], ColorDynamic.Silver500);
42
+ })(["color:", ";&&:focus{background-color:inherit;}"], ColorDynamic.Dark100);
38
43
  var Footer = /*#__PURE__*/styled.div.withConfig({
39
44
  displayName: "NavbarList__Footer",
40
45
  componentId: "SD__sc-19zrmxc-3"
@@ -43,13 +48,13 @@ var Root = /*#__PURE__*/styled.div.withConfig({
43
48
  displayName: "NavbarList__Root",
44
49
  componentId: "SD__sc-19zrmxc-4"
45
50
  })(["color:inherit;background-color:unset;border-left:unset;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;padding:8px 16px;svg{font-size:24px;color:", ";}"], ColorDynamic.Dark100);
46
- export function NavbarMenuItem(_ref4) {
51
+ export function NavbarMenuItem(_ref5) {
47
52
  var {
48
53
  label,
49
54
  icon,
50
55
  onClick,
51
56
  component
52
- } = _ref4;
57
+ } = _ref5;
53
58
  return /*#__PURE__*/_jsx(Root, {
54
59
  as: component,
55
60
  onClick: onClick,
@@ -66,12 +71,12 @@ var Content = /*#__PURE__*/styled.div.withConfig({
66
71
  displayName: "NavbarList__Content",
67
72
  componentId: "SD__sc-19zrmxc-5"
68
73
  })(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, ColorDynamic.Dark300);
69
- export function NavbarList(_ref5) {
74
+ export function NavbarList(_ref6) {
70
75
  var {
71
76
  header,
72
77
  items,
73
78
  footer
74
- } = _ref5;
79
+ } = _ref6;
75
80
  var platform = useResponsiveValue('mobile', 'tablet', 'desktop');
76
81
  var isMobile = platform === 'mobile';
77
82
  var {
package/dist-src/navbar/NavbarMenu.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Menu, MenuItem, Typography } from '@material-ui/core';
2
- import { ColorDynamic, Inline } from '@superdispatch/ui';
2
+ import { Color, ColorDynamic, Inline } from '@superdispatch/ui';
3
3
  import { useState } from 'react';
4
4
  import styled from 'styled-components';
5
5
  import { useNavbarContext } from "./NavbarContext.js";
@@ -15,12 +15,12 @@ var StyledMenuItem = /*#__PURE__*/styled(MenuItem).withConfig({
15
15
  var Wrapper = /*#__PURE__*/styled.div.withConfig({
16
16
  displayName: "NavbarMenu__Wrapper",
17
17
  componentId: "SD__sc-1c8icpt-2"
18
- })(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], ColorDynamic.Dark400, _ref => {
18
+ })(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], Color.White10, _ref => {
19
19
  var {
20
20
  active
21
21
  } = _ref;
22
22
  return active ? ColorDynamic.Blue300 : 'transparent';
23
- }, ColorDynamic.Blue300, ColorDynamic.Dark400);
23
+ }, ColorDynamic.Blue300, Color.White08);
24
24
  export function NavbarMenu(_ref2) {
25
25
  var {
26
26
  items,
package/dist-web/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { CheckCircle, Info, Error as Error$1, Warning, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
2
2
  import { Alert as Alert$1 } from '@material-ui/lab';
3
- import { ColorDynamic, parseResponsiveProp, isColorDynamicProp, parseSpaceProp, Stack, Color, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, useCollapseBreakpoint } from '@superdispatch/ui';
3
+ import { ColorDynamic, parseResponsiveProp, isColorDynamicProp, parseSpaceProp, Stack, Color, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, ColorDark, useCollapseBreakpoint } from '@superdispatch/ui';
4
4
  import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
5
5
  import styled, { css, keyframes } from 'styled-components';
6
6
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -388,9 +388,9 @@ function getCriticalVariables(size) {
388
388
  }
389
389
  function getTextVariables(size) {
390
390
  return createButtonVariables(size, {
391
- textColor: Color.Blue500,
391
+ textColor: ColorDynamic.Blue500,
392
392
  outlineColor: ColorDynamic.Blue30,
393
- textColorHovered: Color.Blue500,
393
+ textColorHovered: ColorDynamic.Blue500,
394
394
  backgroundColorHovered: ColorDynamic.Blue50,
395
395
  backgroundColorActive: ColorDynamic.Blue75,
396
396
  textColorDisabled: ColorDynamic.Blue30
@@ -1223,7 +1223,7 @@ var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
1223
1223
  var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
1224
1224
  displayName: "NavbarItem__NavbarItemRoot",
1225
1225
  componentId: "SD__sc-1pvzq3w-2"
1226
- })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], ColorDynamic.White, ColorDynamic.Blue300);
1226
+ })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&:hover{background-color:", ";color:", ";border-left-color:", ";}"], Color.White, Color.White10, ColorDynamic.Blue300, Color.White08, Color.White, ColorDynamic.Blue300);
1227
1227
  var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
1228
1228
  displayName: "NavbarItem__IconWrapper",
1229
1229
  componentId: "SD__sc-1pvzq3w-3"
@@ -1269,23 +1269,28 @@ var NavbarAccordionLabel = /*#__PURE__*/styled.span.withConfig({
1269
1269
  var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
1270
1270
  displayName: "NavbarAccordion__NavbarAccordionRoot",
1271
1271
  componentId: "SD__sc-1s7g3kw-1"
1272
- })(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&[data-gutter]{margin-top:16px;}&[data-gutter].MuiAccordion-root.Mui-expanded{margin-top:16px;}"], ColorDynamic.White);
1272
+ })(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:", ";&[aria-current]{background-color:", ";color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&[data-gutter]{margin-top:16px;}&[data-gutter].MuiAccordion-root.Mui-expanded{margin-top:16px;}"], _ref => {
1273
+ var {
1274
+ theme
1275
+ } = _ref;
1276
+ return theme.palette.type === 'dark' ? ColorDark.White : Color.Dark500;
1277
+ }, Color.White10, ColorDynamic.White);
1273
1278
  var NavbarAccordionSummary = /*#__PURE__*/styled(AccordionSummary).withConfig({
1274
1279
  displayName: "NavbarAccordion__NavbarAccordionSummary",
1275
1280
  componentId: "SD__sc-1s7g3kw-2"
1276
- })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], ColorDynamic.White, ColorDynamic.Blue300);
1281
+ })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.White10, ColorDynamic.Blue300);
1277
1282
  var IconWrapper$2 = /*#__PURE__*/styled.div.withConfig({
1278
1283
  displayName: "NavbarAccordion__IconWrapper",
1279
1284
  componentId: "SD__sc-1s7g3kw-3"
1280
1285
  })(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
1281
- function NavbarAccordion(_ref) {
1286
+ function NavbarAccordion(_ref2) {
1282
1287
  var {
1283
1288
  label,
1284
1289
  icon,
1285
1290
  gutter,
1286
1291
  items,
1287
1292
  onClick: _onClick
1288
- } = _ref;
1293
+ } = _ref2;
1289
1294
  var uid = useUID();
1290
1295
  var {
1291
1296
  setDrawerOpen,
@@ -1351,26 +1356,31 @@ var Header = /*#__PURE__*/styled.div.withConfig({
1351
1356
  var Wrapper = /*#__PURE__*/styled.div.withConfig({
1352
1357
  displayName: "NavbarList__Wrapper",
1353
1358
  componentId: "SD__sc-19zrmxc-1"
1354
- })(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:#1b2638;transition:width 0.3s linear;height:100%;width:", ";&[data-expanded='true']{width:", ";}&[data-expanded='false']{width:", ";& > ", "{justify-content:center;}}"], _ref => {
1359
+ })(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:", ";transition:width 0.3s linear;height:100%;width:", ";&[data-expanded='true']{width:", ";}&[data-expanded='false']{width:", ";& > ", "{justify-content:center;}}"], _ref => {
1355
1360
  var {
1356
- isMobile
1361
+ theme
1357
1362
  } = _ref;
1358
- return isMobile ? '280px' : 'initial';
1363
+ return theme.palette.type === 'dark' ? ColorDark.White : Color.Dark500;
1359
1364
  }, _ref2 => {
1360
1365
  var {
1361
1366
  isMobile
1362
1367
  } = _ref2;
1363
- return isMobile ? '280px' : '240px';
1368
+ return isMobile ? '280px' : 'initial';
1364
1369
  }, _ref3 => {
1365
1370
  var {
1366
1371
  isMobile
1367
1372
  } = _ref3;
1373
+ return isMobile ? '280px' : '240px';
1374
+ }, _ref4 => {
1375
+ var {
1376
+ isMobile
1377
+ } = _ref4;
1368
1378
  return isMobile ? '280px' : '72px';
1369
1379
  }, Header);
1370
1380
  var ExpandIconButton = /*#__PURE__*/styled(IconButton).withConfig({
1371
1381
  displayName: "NavbarList__ExpandIconButton",
1372
1382
  componentId: "SD__sc-19zrmxc-2"
1373
- })(["color:", ";&&:focus{background-color:inherit;}"], ColorDynamic.Silver500);
1383
+ })(["color:", ";&&:focus{background-color:inherit;}"], ColorDynamic.Dark100);
1374
1384
  var Footer = /*#__PURE__*/styled.div.withConfig({
1375
1385
  displayName: "NavbarList__Footer",
1376
1386
  componentId: "SD__sc-19zrmxc-3"
@@ -1379,13 +1389,13 @@ var Root = /*#__PURE__*/styled.div.withConfig({
1379
1389
  displayName: "NavbarList__Root",
1380
1390
  componentId: "SD__sc-19zrmxc-4"
1381
1391
  })(["color:inherit;background-color:unset;border-left:unset;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;padding:8px 16px;svg{font-size:24px;color:", ";}"], ColorDynamic.Dark100);
1382
- function NavbarMenuItem(_ref4) {
1392
+ function NavbarMenuItem(_ref5) {
1383
1393
  var {
1384
1394
  label,
1385
1395
  icon,
1386
1396
  onClick,
1387
1397
  component
1388
- } = _ref4;
1398
+ } = _ref5;
1389
1399
  return /*#__PURE__*/jsx(Root, {
1390
1400
  as: component,
1391
1401
  onClick: onClick,
@@ -1402,12 +1412,12 @@ var Content = /*#__PURE__*/styled.div.withConfig({
1402
1412
  displayName: "NavbarList__Content",
1403
1413
  componentId: "SD__sc-19zrmxc-5"
1404
1414
  })(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, ColorDynamic.Dark300);
1405
- function NavbarList(_ref5) {
1415
+ function NavbarList(_ref6) {
1406
1416
  var {
1407
1417
  header,
1408
1418
  items,
1409
1419
  footer
1410
- } = _ref5;
1420
+ } = _ref6;
1411
1421
  var platform = useResponsiveValue('mobile', 'tablet', 'desktop');
1412
1422
  var isMobile = platform === 'mobile';
1413
1423
  var {
@@ -1545,7 +1555,7 @@ var _excluded$8 = ["title", "subtitle", "children"];
1545
1555
  var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
1546
1556
  displayName: "NavbarAvatar__StyledTypography",
1547
1557
  componentId: "SD__sc-19q2zd0-0"
1548
- })(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], ColorDynamic.Silver500, ColorDynamic.White);
1558
+ })(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], Color.White, Color.White);
1549
1559
  function NavbarAvatar(_ref) {
1550
1560
  var {
1551
1561
  title,
@@ -1595,12 +1605,12 @@ var StyledMenuItem = /*#__PURE__*/styled(MenuItem).withConfig({
1595
1605
  var Wrapper$1 = /*#__PURE__*/styled.div.withConfig({
1596
1606
  displayName: "NavbarMenu__Wrapper",
1597
1607
  componentId: "SD__sc-1c8icpt-2"
1598
- })(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], ColorDynamic.Dark400, _ref => {
1608
+ })(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], Color.White10, _ref => {
1599
1609
  var {
1600
1610
  active
1601
1611
  } = _ref;
1602
1612
  return active ? ColorDynamic.Blue300 : 'transparent';
1603
- }, ColorDynamic.Blue300, ColorDynamic.Dark400);
1613
+ }, ColorDynamic.Blue300, Color.White08);
1604
1614
  function NavbarMenu(_ref2) {
1605
1615
  var {
1606
1616
  items,