@superdispatch/ui-lab 0.36.1 → 0.38.0

package/dist-src/sidebar/SidebarMenuItem.js

@@ -1,6 +1,6 @@
-import { ButtonBase } from '@material-ui/core';
+import { alpha, ButtonBase } from '@material-ui/core';
 import { OpenInNew } from '@material-ui/icons';
-import { ColorDynamic, Column, Columns, Inline, mergeRefs } from '@superdispatch/ui';
+import { Color, ColorDynamic, Column, Columns, Inline, mergeRefs } from '@superdispatch/ui';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TextBox } from "../text-box/TextBox.js";
@@ -12,10 +12,13 @@ var SidebarMenuItemRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "SD__sc-1sb5zqa-0"
 })(_ref => {
   var {
-    hasAvatar
+    hasAvatar,
+    theme
   } = _ref;
   var height = hasAvatar ? 48 : 40;
-  return css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}&:hover{background-color:", ";}}"], height, height, ColorDynamic.Silver200, ColorDynamic.Blue300, ColorDynamic.Silver200);
+  var mode = theme.palette.type;
+  var color = mode === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
+  return css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}&:hover{background-color:", ";}}"], height, height, color, ColorDynamic.Blue300, color);
 });
 var SidebarMenuItemBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemBadge",

package/dist-src/text-box/TextBox.js

@@ -12,6 +12,8 @@ var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   primary: ColorDynamic.Dark500,
   secondary: ColorDynamic.Dark300,
   'light-gray': ColorDynamic.Dark100,
+  //*deprecated use disabled instead
+  disabled: ColorDynamic.Dark100,
   white: ColorDynamic.White,
   blue: ColorDynamic.Blue500,
   green: ColorDynamic.Green500,

package/dist-types/index.d.ts

@@ -382,7 +382,7 @@ interface SidebarSubheaderProps {
 declare const SidebarSubheader: ForwardRefExoticComponent<SidebarSubheaderProps & RefAttributes<HTMLDivElement>>;
 
 declare type TextAlignProp = 'left' | 'right' | 'center';
-declare type TextColorProp = 'inherit' | 'primary' | 'secondary' | 'light-gray' | 'white' | 'blue' | 'green' | 'purple' | 'red' | 'teal' | 'yellow';
+declare type TextColorProp = 'inherit' | 'primary' | 'secondary' | 'light-gray' | 'disabled' | 'white' | 'blue' | 'green' | 'purple' | 'red' | 'teal' | 'yellow';
 declare type TextDisplayProp = 'none' | 'block' | 'inline' | 'initial' | 'inherit';
 declare type TextVariantProp = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6' | 'body' | 'body-block' | 'body-semibold' | 'caption' | 'hint';
 interface TextBoxProps {

package/dist-web/index.js

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { CSSTransition } from 'react-transition-group';
-import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, Accordion, AccordionSummary, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Toolbar, AppBar, Divider as Divider$1, Checkbox } from '@material-ui/core';
+import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, Accordion, AccordionSummary, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Toolbar, AppBar, Divider as Divider$1, alpha, Checkbox } from '@material-ui/core';
 import { formatDate } from '@superdispatch/dates';
 import { Box as Box$1 } from '@superdispatch/ui-lab';
 import { mdiUpload, mdiFilePdfBox, mdiTextBox } from '@mdi/js';
@@ -661,6 +661,8 @@ var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   primary: ColorDynamic.Dark500,
   secondary: ColorDynamic.Dark300,
   'light-gray': ColorDynamic.Dark100,
+  //*deprecated use disabled instead
+  disabled: ColorDynamic.Dark100,
   white: ColorDynamic.White,
   blue: ColorDynamic.Blue500,
   green: ColorDynamic.Green500,
@@ -1931,10 +1933,13 @@ var SidebarMenuItemRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "SD__sc-1sb5zqa-0"
 })(_ref => {
   var {
-    hasAvatar
+    hasAvatar,
+    theme
   } = _ref;
   var height = hasAvatar ? 48 : 40;
-  return css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}&:hover{background-color:", ";}}"], height, height, ColorDynamic.Silver200, ColorDynamic.Blue300, ColorDynamic.Silver200);
+  var mode = theme.palette.type;
+  var color = mode === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
+  return css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}&:hover{background-color:", ";}}"], height, height, color, ColorDynamic.Blue300, color);
 });
 var SidebarMenuItemBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemBadge",