@superdispatch/ui 0.11.0 → 0.15.0

package/dist-src/avatar/AvatarOverrides.js

@@ -12,7 +12,7 @@ export function overrideAvatar(theme) {
       }
     }),
     colorDefault: {
-      color: Color.Grey300,
+      color: Color.Dark300,
       backgroundColor: Color.Silver300
     }
   };

package/dist-src/button/ButtonOverrides.js

@@ -189,7 +189,7 @@ export function overrideButton(theme) {
       '&[data-color="success"]': outlinedVariant(Color.Green300, Color.Green300, Color.Green100, Color.Green100, Color.Green300, Color.Green300, Color.Green100, Color.Green50, Color.Green300, Color.White),
       '&[data-color="white"]': outlinedVariant(Color.White, Color.White50, Color.White50, Color.White40, Color.White, Color.White50, Color.White40, Color.White10, Color.White50, Color.Transparent)
     },
-    outlinedPrimary: outlinedVariant(Color.Grey500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Grey200, Color.White),
+    outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
     outlinedSizeSmall: {
       padding: undefined,
       fontSize: undefined

package/dist-src/card-button/CardButton.js

@@ -24,7 +24,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: Color.Grey200,
+    color: Color.Dark200,
     borderColor: Color.Silver500,
     backgroundColor: Color.Silver100
   },

package/dist-src/checkbox/CheckboxOverrides.js

@@ -45,7 +45,7 @@ export function overrideCheckbox(theme) {
   };
   theme.overrides.MuiCheckbox = {
     root: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -54,7 +54,7 @@ export function overrideCheckbox(theme) {
         color: Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }
   };

package/dist-src/chip/ChipOverrides.js

@@ -25,7 +25,7 @@ export function overrideChip(theme) {
       backgroundColor: Color.Silver200,
       '&$disabled': {
         opacity: undefined,
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }),
     sizeSmall: {
@@ -71,7 +71,7 @@ export function overrideChip(theme) {
       },
       '& > svg': {
         borderRadius: '50%',
-        color: Color.Grey200,
+        color: Color.Dark200,
         fontSize: '1em'
       }
     },
@@ -86,7 +86,7 @@ export function overrideChip(theme) {
       }
     },
     icon: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       fontSize: '1em',
       marginRight: undefined
     },

package/dist-src/description-list/DescriptionList.js

@@ -37,7 +37,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
-      color: Color.Grey100,
+      color: Color.Dark100,
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2)

package/dist-src/dialog/DialogOverrides.js

@@ -6,6 +6,14 @@ export function overrideDialog(theme) {
   theme.overrides.MuiDialog = {
     paper: {
       margin: theme.spacing(3)
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
+        }
+      }
     }
   };
   theme.overrides.MuiDialogTitle = {

package/dist-src/icon-button/IconButtonOverrides.js

@@ -2,7 +2,7 @@ import { Color } from "../theme/Color.js";
 export function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       backgroundColor: Color.Transparent,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.short
@@ -11,10 +11,10 @@ export function overrideIconButton(theme) {
         backgroundColor: Color.Transparent
       },
       '&:active': {
-        color: Color.Grey500
+        color: Color.Dark500
       },
       '&:hover ': {
-        color: Color.Grey300
+        color: Color.Dark300
       },
       '&:focus': {
         backgroundColor: Color.Silver400

package/dist-src/info-card/InfoCard.js

@@ -6,18 +6,8 @@ import { Card, CardContent } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
+import { assignRef } from "../utils/mergeRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-
-function assignRef(ref, value) {
-  if (ref) {
-    if (typeof ref === 'object') {
-      ref.current = value;
-    } else {
-      ref(value);
-    }
-  }
-}
-
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
     '&$fullWidth': {

package/dist-src/pagination/PaginationOverrides.js

@@ -3,7 +3,7 @@ export function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: Color.Grey400
+      color: Color.Dark400
     },
     page: {
       '&:hover': {
@@ -20,13 +20,13 @@ export function overridePagination(theme) {
           backgroundColor: Color.Silver400
         },
         '&$disabled': {
-          color: Color.Grey100,
+          color: Color.Dark100,
           backgroundColor: Color.Silver400
         }
       },
       '&$disabled': {
         opacity: undefined,
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }
   }; // Remove `Object.assign` after official release of `PaginationItem`.

package/dist-src/radio/RadioOverrides.js

@@ -31,7 +31,7 @@ export function overrideRadio(theme) {
   };
   theme.overrides.MuiRadio = {
     root: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -40,7 +40,7 @@ export function overrideRadio(theme) {
         color: Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }
   };

package/dist-src/snackbar/SnackbarContent.js

@@ -14,7 +14,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
     color: Color.White,
-    backgroundColor: Color.Grey500,
+    backgroundColor: Color.Dark500,
     '&$variantError': {
       color: Color.White,
       backgroundColor: Color.Red500

package/dist-src/svg-icon/SvgIconOverrides.js

@@ -19,7 +19,7 @@ export function overrideSvgIcon(theme) {
       fontSize: 'var(--mui-svg-icon-size, 32px)'
     },
     colorAction: {
-      color: Color.Grey100
+      color: Color.Dark100
     }
   };
 }

package/dist-src/switch/SwitchOverrides.js

@@ -77,7 +77,7 @@ export function overrideSwitch(theme) {
         backgroundColor: Color.Blue100
       },
       '&:hover + $track': {
-        backgroundColor: Color.Grey100
+        backgroundColor: Color.Dark100
       },
       '&.Mui-focusVisible + $track': {
         boxShadow: "0 0 0 3px ".concat(Color.Blue100)

package/dist-src/tabs/TabsOverrides.js

@@ -12,7 +12,7 @@ export function overrideTabs(theme) {
     },
     scrollButtons: {
       opacity: 1,
-      color: Color.Grey100,
+      color: Color.Dark100,
       width: theme.spacing(4),
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
@@ -32,7 +32,7 @@ export function overrideTabs(theme) {
       }
     }),
     textColorPrimary: {
-      color: Color.Grey500,
+      color: Color.Dark500,
       '&:hover, &:focus': {
         color: Color.Blue300
       }

package/dist-src/tag/Tag.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["color", "variant", "children", "classes", "className", "noWrap", "component"];
+var _excluded = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
 import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import cx from 'clsx';
@@ -17,7 +17,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
   },
   variantSubtle: {
     '&$colorGrey': {
-      color: Color.Grey300,
+      color: Color.Dark300,
       backgroundColor: Color.Silver200
     },
     '&$colorBlue': {
@@ -48,7 +48,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
   variantBold: {
     color: Color.White,
     '&$colorGrey': {
-      backgroundColor: Color.Grey300
+      backgroundColor: Color.Dark300
     },
     '&$colorBlue': {
       backgroundColor: Color.Blue500
@@ -87,6 +87,7 @@ export var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
     classes,
     className,
     noWrap = true,
+    fontWeight = 'bold',
     component = 'div'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -96,9 +97,9 @@ export var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    variant: "body1",
     noWrap: noWrap,
     component: component,
+    variant: fontWeight === 'bold' ? 'body1' : 'body2',
     className: cx(styles.root, className, {
       'grey': styles.colorGrey,
       'blue': styles.colorBlue,

package/dist-src/text-field/TextFieldOverrides.js

@@ -21,7 +21,7 @@ export function overrideTextField(theme) {
   };
   theme.overrides.MuiFormLabel = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: Color.Grey400,
+      color: Color.Dark400,
       '&$error': {
         color: undefined
       },
@@ -116,7 +116,7 @@ export function overrideTextField(theme) {
     icon: {
       top: 'calc(50% - 0.5em)',
       '$disabled &': {
-        color: Color.Grey100
+        color: Color.Dark100
       },
       fontSize: theme.spacing(3),
       [sm]: {

package/dist-src/theme/Color.js

@@ -17,6 +17,12 @@ export var Color;
   Color["Grey400"] = "#323C4E";
   Color["Grey450"] = "#222F44";
   Color["Grey500"] = "#192334";
+  Color["Dark100"] = "#8F949E";
+  Color["Dark200"] = "#6A707C";
+  Color["Dark300"] = "#5B6371";
+  Color["Dark400"] = "#323C4E";
+  Color["Dark450"] = "#222F44";
+  Color["Dark500"] = "#192334";
   Color["Silver100"] = "#F6F7F8";
   Color["Silver200"] = "#F3F5F8";
   Color["Silver300"] = "#E8ECF0";

package/dist-src/theme/ThemeProvider.js

@@ -50,10 +50,10 @@ function createSuperDispatchTheme() {
         disabled: Color.Silver400
       },
       text: {
-        primary: Color.Grey500,
-        secondary: Color.Grey200,
-        hint: Color.Grey100,
-        disabled: Color.Grey100
+        primary: Color.Dark500,
+        secondary: Color.Dark200,
+        hint: Color.Dark100,
+        disabled: Color.Dark100
       },
       divider: Color.Silver400
     },

package/dist-src/tooltip/TooltipOverrides.js

@@ -7,7 +7,7 @@ export function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: Color.Grey400
+      backgroundColor: Color.Dark400
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -32,7 +32,7 @@ export function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: Color.Grey400,
+      color: Color.Dark400,
       fontSize: theme.spacing(1)
     }
   };

package/dist-src/utils/mergeRefs.js

@@ -5,13 +5,16 @@ export function mergeRefs() {
 
   return node => {
     refs.forEach(ref => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-      }
+      assignRef(ref, node);
     });
   };
+}
+export function assignRef(ref, value) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(value);
+    } else {
+      ref.current = value;
+    }
+  }
 }

package/dist-types/index.d.ts

@@ -277,6 +277,7 @@ interface TagProps extends RefAttributes<unknown>, Omit<TypographyProps, 'ref' |
     component?: ElementType;
     color: 'grey' | 'blue' | 'green' | 'purple' | 'red' | 'teal' | 'yellow';
     variant: 'subtle' | 'bold';
+    fontWeight?: 'regular' | 'bold';
 }
 declare const Tag: ForwardRefExoticComponent<TagProps>;
 
@@ -292,12 +293,24 @@ declare enum Color {
     Black = "#000",
     Black50 = "rgba(0, 0, 0, 0.5)",
     Black20 = "rgba(0, 0, 0, 0.2)",
+    /**@deprecated Use Dark100 */
     Grey100 = "#8F949E",
+    /**@deprecated Use Dark200 */
     Grey200 = "#6A707C",
+    /**@deprecated Use Dark300 */
     Grey300 = "#5B6371",
+    /**@deprecated Use Dark400 */
     Grey400 = "#323C4E",
+    /**@deprecated Use Dark450 */
     Grey450 = "#222F44",
+    /**@deprecated Use Dark500 */
     Grey500 = "#192334",
+    Dark100 = "#8F949E",
+    Dark200 = "#6A707C",
+    Dark300 = "#5B6371",
+    Dark400 = "#323C4E",
+    Dark450 = "#222F44",
+    Dark500 = "#192334",
     Silver100 = "#F6F7F8",
     Silver200 = "#F3F5F8",
     Silver300 = "#E8ECF0",
@@ -370,6 +383,7 @@ declare const Tiles: ForwardRefExoticComponent<TilesProps & RefAttributes<HTMLDi
 declare function isEmptyReactNode(node: ReactNode): node is null | undefined | boolean | string;
 
 declare function mergeRefs<T>(...refs: Array<null | undefined | Ref<T>>): (node: T) => void;
+declare function assignRef<T>(ref: Ref<T> | undefined, value: T): void;
 
 declare function renderChildren(node: ReactNode): null | ReactElement;
 
@@ -394,4 +408,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-export { AdaptiveToolbar, AdaptiveToolbarItem, AdaptiveToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, ElementVisibility, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, Inline, InlineGrid, InlineGridProps, InlineProps, NegativeSpaceProp, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioField, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveToolbarItem, AdaptiveToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, ElementVisibility, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, Inline, InlineGrid, InlineGridProps, InlineProps, NegativeSpaceProp, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioField, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };