@superdispatch/ui-lab 0.35.1 → 0.35.2

package/dist-node/index.js

@@ -395,9 +395,9 @@ function getCriticalVariables(size) {
 }
 function getTextVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.Blue500,
+    textColor: ui.ColorDynamic.Blue500,
     outlineColor: ui.ColorDynamic.Blue30,
-    textColorHovered: ui.Color.Blue500,
+    textColorHovered: ui.ColorDynamic.Blue500,
     backgroundColorHovered: ui.ColorDynamic.Blue50,
     backgroundColorActive: ui.ColorDynamic.Blue75,
     textColorDisabled: ui.ColorDynamic.Blue30
@@ -1230,7 +1230,7 @@ var NavbarLabel = /*#__PURE__*/styled__default.span.withConfig({
 var NavbarItemRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarItem__NavbarItemRoot",
   componentId: "SD__sc-1pvzq3w-2"
-})(["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:", ";}"], ui.ColorDynamic.White, ui.ColorDynamic.Blue300);
+})(["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:", ";}"], ui.Color.White, ui.Color.White10, ui.ColorDynamic.Blue300, ui.Color.White08, ui.Color.White, ui.ColorDynamic.Blue300);
 var IconWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1276,23 +1276,28 @@ var NavbarAccordionLabel = /*#__PURE__*/styled__default.span.withConfig({
 var NavbarAccordionRoot = /*#__PURE__*/styled__default(core.Accordion).withConfig({
   displayName: "NavbarAccordion__NavbarAccordionRoot",
   componentId: "SD__sc-1s7g3kw-1"
-})(["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;}"], ui.ColorDynamic.White);
+})(["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 => {
+  var {
+    theme
+  } = _ref;
+  return theme.palette.type === 'dark' ? ui.ColorDark.White : ui.Color.Dark500;
+}, ui.Color.White10, ui.ColorDynamic.White);
 var NavbarAccordionSummary = /*#__PURE__*/styled__default(core.AccordionSummary).withConfig({
   displayName: "NavbarAccordion__NavbarAccordionSummary",
   componentId: "SD__sc-1s7g3kw-2"
-})(["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;}}"], ui.ColorDynamic.White, ui.ColorDynamic.Blue300);
+})(["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;}}"], ui.Color.White, ui.Color.White10, ui.ColorDynamic.Blue300);
 var IconWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
 })(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
-function NavbarAccordion(_ref) {
+function NavbarAccordion(_ref2) {
   var {
     label,
     icon,
     gutter,
     items,
     onClick: _onClick
-  } = _ref;
+  } = _ref2;
   var uid = ui.useUID();
   var {
     setDrawerOpen,
@@ -1358,26 +1363,31 @@ var Header = /*#__PURE__*/styled__default.div.withConfig({
 var Wrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarList__Wrapper",
   componentId: "SD__sc-19zrmxc-1"
-})(["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 => {
+})(["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 => {
   var {
-    isMobile
+    theme
   } = _ref;
-  return isMobile ? '280px' : 'initial';
+  return theme.palette.type === 'dark' ? ui.ColorDark.White : ui.Color.Dark500;
 }, _ref2 => {
   var {
     isMobile
   } = _ref2;
-  return isMobile ? '280px' : '240px';
+  return isMobile ? '280px' : 'initial';
 }, _ref3 => {
   var {
     isMobile
   } = _ref3;
+  return isMobile ? '280px' : '240px';
+}, _ref4 => {
+  var {
+    isMobile
+  } = _ref4;
   return isMobile ? '280px' : '72px';
 }, Header);
 var ExpandIconButton = /*#__PURE__*/styled__default(core.IconButton).withConfig({
   displayName: "NavbarList__ExpandIconButton",
   componentId: "SD__sc-19zrmxc-2"
-})(["color:", ";&&:focus{background-color:inherit;}"], ui.ColorDynamic.Silver500);
+})(["color:", ";&&:focus{background-color:inherit;}"], ui.ColorDynamic.Dark100);
 var Footer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarList__Footer",
   componentId: "SD__sc-19zrmxc-3"
@@ -1386,13 +1396,13 @@ var Root = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarList__Root",
   componentId: "SD__sc-19zrmxc-4"
 })(["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:", ";}"], ui.ColorDynamic.Dark100);
-function NavbarMenuItem(_ref4) {
+function NavbarMenuItem(_ref5) {
   var {
     label,
     icon,
     onClick,
     component
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/jsxRuntime.jsx(Root, {
     as: component,
     onClick: onClick,
@@ -1409,12 +1419,12 @@ var Content = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
 })(["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, ui.ColorDynamic.Dark300);
-function NavbarList(_ref5) {
+function NavbarList(_ref6) {
   var {
     header,
     items,
     footer
-  } = _ref5;
+  } = _ref6;
   var platform = ui.useResponsiveValue('mobile', 'tablet', 'desktop');
   var isMobile = platform === 'mobile';
   var {
@@ -1552,7 +1562,7 @@ var _excluded$8 = ["title", "subtitle", "children"];
 var StyledTypography = /*#__PURE__*/styled__default(core.Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
-})(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], ui.ColorDynamic.Silver500, ui.ColorDynamic.White);
+})(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], ui.Color.White, ui.Color.White);
 function NavbarAvatar(_ref) {
   var {
       title,
@@ -1602,12 +1612,12 @@ var StyledMenuItem = /*#__PURE__*/styled__default(core.MenuItem).withConfig({
 var Wrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarMenu__Wrapper",
   componentId: "SD__sc-1c8icpt-2"
-})(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], ui.ColorDynamic.Dark400, _ref => {
+})(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], ui.Color.White10, _ref => {
   var {
     active
   } = _ref;
   return active ? ui.ColorDynamic.Blue300 : 'transparent';
-}, ui.ColorDynamic.Blue300, ui.ColorDynamic.Dark400);
+}, ui.ColorDynamic.Blue300, ui.Color.White08);
 function NavbarMenu(_ref2) {
   var {
     items,