@superdispatch/ui 0.21.5-alpha.4 → 0.21.6

package/dist-src/button/ButtonOverrides.js

@@ -1,6 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { loadingButtonClasses } from '@mui/lab';
-import { buttonClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 
 function outlineShadow() {
@@ -11,11 +8,9 @@ function outlineShadow() {
 
 function textVariant(text, outline, background, progress) {
   return {
-    '&': {
-      color: text,
-      boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent
-    },
+    color: text,
+    boxShadow: outlineShadow(),
+    backgroundColor: Color.Transparent,
     '&:hover': {
       backgroundColor: background
     },
@@ -26,13 +21,13 @@ function textVariant(text, outline, background, progress) {
       backgroundColor: background,
       boxShadow: outlineShadow(2, outline)
     },
-    ["&.".concat(buttonClasses.disabled)]: {
+    '&$disabled': {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent,
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
+      backgroundColor: Color.Transparent
+    },
+    '&$disabled[aria-busy="true"]': {
+      color: progress
     }
   };
 }
@@ -46,11 +41,11 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
   return {
     backgroundColor,
     color: staleText,
-    border: 0,
+    border: undefined,
     boxShadow: outlinedBorder(staleBorder),
     '&:hover': {
       color: activeText,
-      border: 0,
+      border: undefined,
       backgroundColor: activeBackground,
       boxShadow: outlinedBorder(activeBorder)
     },
@@ -62,13 +57,13 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
     '&:focus': {
       boxShadow: outlinedBorder(activeBorder, activeOutline)
     },
-    ["&.".concat(buttonClasses.disabled)]: {
+    '&$disabled': {
       backgroundColor,
       color: disabledText,
-      boxShadow: outlinedBorder(disabledBorder),
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
+      boxShadow: outlinedBorder(disabledBorder)
+    },
+    '&$disabled[aria-busy="true"]': {
+      color: progress
     }
   };
 }
@@ -87,152 +82,159 @@ function containedVariant(text, backgroundColor, outline, active, disabledText,
     '&:focus': {
       boxShadow: outlineShadow(3, outline)
     },
-    ["&.".concat(buttonClasses.disabled)]: {
+    '&$disabled': {
       color: disabledText,
       boxShadow: outlineShadow(),
-      backgroundColor: disabledBackground,
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: disabledText
-      }
+      backgroundColor: disabledBackground
     }
   };
 }
 
-function sizeSmall(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    padding: theme.spacing(0.5, 3),
-    [sm]: {
-      padding: theme.spacing(0.25, 2)
-    }
-  });
-}
-
-function sizeLarge(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    fontSize: '18px',
-    lineHeight: '28px',
-    padding: theme.spacing(1.75, 8),
-    [sm]: {
-      fontSize: '16px',
-      lineHeight: '24px',
-      padding: theme.spacing(1, 4)
-    }
-  });
-}
-
 export function overrideButton(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiLoadingButton = {
-    defaultProps: {
-      variant: 'outlined'
-    },
-    styleOverrides: {
-      loadingIndicator: {
-        color: 'inherit',
-        fontSize: theme.spacing(2),
-        [".".concat(buttonClasses.sizeLarge, " &")]: {
-          fontSize: theme.spacing(3)
-        }
-      }
-    }
+  theme.props.MuiButton = {
+    color: 'primary',
+    variant: 'outlined',
+    disableFocusRipple: true
   };
-  theme.components.MuiButton = {
-    defaultProps: {
-      color: 'primary',
-      variant: 'outlined',
-      disableFocusRipple: true
-    },
-    styleOverrides: {
-      root: {
-        minWidth: theme.spacing(6),
-        transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
-        padding: theme.spacing(1.25, 3),
-        [sm]: {
-          padding: theme.spacing(0.75, 2)
+  theme.overrides.MuiButton = {
+    root: {
+      color: undefined,
+      minWidth: theme.spacing(6),
+      transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
+      padding: theme.spacing(1.25, 3),
+      [sm]: {
+        padding: theme.spacing(0.75, 2)
+      },
+      '&:hover': {
+        backgroundColor: undefined,
+        '&$disabled': {
+          backgroundColor: undefined
         },
-        '&:hover': {
-          backgroundColor: 'initial',
-          ["&.".concat(buttonClasses.disabled)]: {
-            backgroundColor: 'initial'
-          },
-          '@media (hover: none)': {
-            backgroundColor: 'initial'
+        '@media (hover: none)': {
+          backgroundColor: undefined
+        }
+      },
+      '&$disabled': {
+        color: undefined
+      },
+      '&[aria-busy="true"]': {
+        '& $label': {
+          visibility: 'hidden',
+          '& > [role="progressbar"]': {
+            position: 'absolute',
+            visibility: 'visible',
+            top: 'calc(50% - 0.5em)',
+            left: 'calc(50% - 0.5em)',
+            fontSize: theme.spacing(2),
+            '$sizeLarge &': {
+              fontSize: theme.spacing(3)
+            }
           }
+        }
+      }
+    },
+    label: {
+      '& > .MuiSvgIcon-root': {
+        fontSize: '24px',
+        [sm]: {
+          fontSize: '20px'
         },
-        ["&.".concat(buttonClasses.disabled)]: {
-          color: 'initial'
-        },
-        '& > .MuiSvgIcon-root': {
-          fontSize: '24px',
+        '$sizeLarge &': {
+          fontSize: '28px',
           [sm]: {
-            fontSize: '20px'
-          },
-          [".".concat(buttonClasses.sizeLarge, "&")]: {
-            fontSize: '28px',
-            [sm]: {
-              fontSize: '24px'
-            }
+            fontSize: '24px'
           }
         }
+      }
+    },
+    sizeSmall: {
+      padding: theme.spacing(0.5, 3),
+      [sm]: {
+        padding: theme.spacing(0.25, 2)
+      }
+    },
+    sizeLarge: {
+      fontSize: '18px',
+      lineHeight: '28px',
+      padding: theme.spacing(1.75, 8),
+      [sm]: {
+        fontSize: '16px',
+        lineHeight: '24px',
+        padding: theme.spacing(1, 4)
+      }
+    },
+    text: {
+      padding: undefined,
+      '&[data-color="error"]': textVariant(Color.Red300, Color.Red100, Color.Red50, Color.Red200),
+      '&[data-color="success"]': textVariant(Color.Green300, Color.Green100, Color.Green50, Color.Green200),
+      '&[data-color="white"]': textVariant(Color.White, Color.White50, Color.White10, Color.White50)
+    },
+    textPrimary: textVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Blue200),
+    textSizeSmall: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    textSizeLarge: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    outlined: {
+      border: undefined,
+      padding: undefined,
+      '&$disabled': {
+        border: undefined
       },
-      sizeSmall: sizeSmall(theme),
-      sizeLarge: sizeLarge(theme),
-      text: {
-        padding: 'initial',
-        '&[data-color="error"]': textVariant(Color.Red300, Color.Red100, Color.Red50, Color.Red200),
-        '&[data-color="success"]': textVariant(Color.Green300, Color.Green100, Color.Green50, Color.Green200),
-        '&[data-color="white"]': textVariant(Color.White, Color.White50, Color.White10, Color.White50)
-      },
-      textPrimary: textVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Blue200),
-      textSizeSmall: sizeSmall(theme),
-      textSizeLarge: sizeLarge(theme),
-      outlined: {
-        border: 'none',
-        padding: 'initial',
-        ["&.".concat(buttonClasses.disabled)]: {
-          border: 'none'
+      '&[data-color="error"]': outlinedVariant(Color.Red300, Color.Red300, Color.Red100, Color.Red100, Color.Red300, Color.Red300, Color.Red100, Color.Red50, Color.Red300, Color.White),
+      '&[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.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
+    outlinedSizeSmall: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    outlinedSizeLarge: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    contained: {
+      boxShadow: undefined,
+      backgroundColor: undefined,
+      '&:hover': {
+        boxShadow: undefined,
+        backgroundColor: undefined,
+        '&$disabled': {
+          backgroundColor: undefined
         },
-        '&[data-color="error"]': outlinedVariant(Color.Red300, Color.Red300, Color.Red100, Color.Red100, Color.Red300, Color.Red300, Color.Red100, Color.Red50, Color.Red300, Color.White),
-        '&[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)
+        '@media (hover: none)': {
+          boxShadow: undefined,
+          backgroundColor: undefined
+        }
       },
-      outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
-      outlinedSizeSmall: sizeSmall(theme),
-      outlinedSizeLarge: sizeLarge(theme),
-      contained: {
-        boxShadow: 'none',
-        backgroundColor: 'initial',
-        '&:hover': {
-          boxShadow: 'none',
-          backgroundColor: 'initial',
-          ["&.".concat(buttonClasses.disabled)]: {
-            backgroundColor: 'none'
-          },
-          '@media (hover: none)': {
-            boxShadow: 'none',
-            backgroundColor: 'none'
-          }
-        },
-        '&:active': {
-          boxShadow: 'none'
-        },
-        ["&.".concat(buttonClasses.focusVisible)]: {
-          boxShadow: 'none'
-        },
-        ["&.".concat(buttonClasses.disabled)]: {
-          color: 'initial',
-          boxShadow: 'none',
-          backgroundColor: 'initial'
-        },
-        '&[data-color="error"]': containedVariant(Color.White, Color.Red300, Color.Red100, Color.Red500, Color.White, Color.Red100),
-        '&[data-color="success"]': containedVariant(Color.White, Color.Green300, Color.Green100, Color.Green500, Color.White, Color.Green100),
-        '&[data-color="white"]': containedVariant(Color.White, Color.White20, Color.White40, Color.White40, Color.White50, Color.White08)
+      '&:active': {
+        boxShadow: undefined
+      },
+      '&$focusVisible': {
+        boxShadow: undefined
       },
-      containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
-      containedSizeSmall: sizeSmall(theme),
-      containedSizeLarge: sizeLarge(theme)
+      '&$disabled': {
+        color: undefined,
+        boxShadow: undefined,
+        backgroundColor: undefined
+      },
+      '&[data-color="error"]': containedVariant(Color.White, Color.Red300, Color.Red100, Color.Red500, Color.White, Color.Red100),
+      '&[data-color="success"]': containedVariant(Color.White, Color.Green300, Color.Green100, Color.Green500, Color.White, Color.Green100),
+      '&[data-color="white"]': containedVariant(Color.White, Color.White20, Color.White40, Color.White40, Color.White50, Color.White08)
+    },
+    containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
+    containedSizeSmall: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    containedSizeLarge: {
+      padding: undefined,
+      fontSize: undefined
     }
   };
 }

package/dist-src/card/CardOverrides.js

@@ -1,15 +1,11 @@
 export function overrideCard(theme) {
-  theme.components.MuiCard = {
-    defaultProps: {
-      variant: 'outlined'
-    }
+  theme.props.MuiCard = {
+    variant: 'outlined'
   };
-  theme.components.MuiCardContent = {
-    styleOverrides: {
-      root: {
-        '&:last-child': {
-          paddingBottom: '16px'
-        }
+  theme.overrides.MuiCardContent = {
+    root: {
+      '&:last-child': {
+        paddingBottom: undefined
       }
     }
   };

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

@@ -1,17 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
-import { ButtonBase, styled, Typography } from '@mui/material';
+import { ButtonBase, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var StyledButton = /*#__PURE__*/styled(ButtonBase)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  root: {
     width: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -22,74 +21,66 @@ var StyledButton = /*#__PURE__*/styled(ButtonBase)(_ref => {
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(1.5),
     minHeight: theme.spacing(13),
-    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
-    '&[data-disabled="true"]': {
-      color: Color.Dark200,
-      borderColor: Color.Silver500,
-      backgroundColor: Color.Silver100
-    },
-    '&[data-primary="true"]': {
-      color: Color.Blue300,
-      borderColor: Color.Silver500,
-      '&:focus': {
-        backgroundColor: Color.Blue50
-      },
-      '&:hover, &:active': {
-        borderColor: Color.Blue300,
-        backgroundColor: Color.Blue50
-      }
-    },
-    '&[data-error="true"]': {
-      color: Color.Red300,
-      borderColor: Color.Red300,
-      backgroundColor: Color.Red50,
-      '&:focus': {
-        backgroundColor: Color.Red75
-      }
-    },
-    '&[data-size="small"]': {
-      minHeight: theme.spacing(6)
+    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
+  },
+  disabled: {
+    color: Color.Dark200,
+    borderColor: Color.Silver500,
+    backgroundColor: Color.Silver100
+  },
+  error: {
+    color: Color.Red300,
+    borderColor: Color.Red300,
+    backgroundColor: Color.Red50,
+    '&:focus': {
+      backgroundColor: Color.Red75
+    }
+  },
+  primary: {
+    color: Color.Blue300,
+    borderColor: Color.Silver500,
+    '&:focus': {
+      backgroundColor: Color.Blue50
     },
-    '&[data-size="large"]': {
-      minHeight: theme.spacing(17.5)
+    '&:hover, &:active': {
+      borderColor: Color.Blue300,
+      backgroundColor: Color.Blue50
     }
-  };
-});
-var Label = /*#__PURE__*/styled(Typography)({
-  display: 'flex',
-  alignItems: 'center'
-});
-var Hint = /*#__PURE__*/styled(Typography)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
-    marginTop: theme.spacing(0.5)
-  };
-});
-var Icon = /*#__PURE__*/styled('span')(_ref3 => {
-  var {
-    theme
-  } = _ref3;
-  return {
+  },
+  sizeSmall: {
+    minHeight: theme.spacing(6)
+  },
+  sizeLarge: {
+    minHeight: theme.spacing(17.5)
+  },
+  label: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
     display: 'flex',
     '& svg': {
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2.5)
       }
-    },
-    '&[data-placement="start"]': {
-      marginRight: theme.spacing(1),
-      marginLeft: theme.spacing(-0.5)
-    },
-    '&[data-placement="end"]': {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(-0.5)
     }
-  };
+  },
+  startIcon: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(-0.5)
+  },
+  endIcon: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(-0.5)
+  },
+  hint: {
+    marginTop: theme.spacing(0.5)
+  }
+}), {
+  name: 'SD-CardButton'
 });
-export var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
+export var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     hint,
     size,
@@ -100,33 +91,39 @@ export var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
     endIcon,
     startIcon,
     disabled
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_jsx(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+  var styles = useStyles({
+    classes
+  });
+  return /*#__PURE__*/_jsx(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     disabled: disabled,
-    "data-size": size,
-    "data-disabled": !!disabled,
-    "data-error": !disabled && !!error,
-    "data-primary": !disabled && !error,
-    children: error ? /*#__PURE__*/_jsx(Label, {
+    className: clsx(styles.root, className, disabled ? styles.disabled : error ? styles.error : styles.primary, {
+      'small': styles.sizeSmall,
+      'large': styles.sizeLarge
+    }[size]),
+    children: error ? /*#__PURE__*/_jsx(Typography, {
       variant: "h4",
       color: "inherit",
+      className: styles.label,
       children: error
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(Label, {
+      children: [/*#__PURE__*/_jsxs(Typography, {
         variant: "h4",
         color: "inherit",
-        children: [!!startIcon && /*#__PURE__*/_jsx(Icon, {
-          "data-placement": "start",
+        className: styles.label,
+        children: [!!startIcon && /*#__PURE__*/_jsx("span", {
+          className: clsx(styles.icon, styles.startIcon),
           children: startIcon
-        }), children, !!endIcon && /*#__PURE__*/_jsx(Icon, {
-          "data-placement": "end",
+        }), children, !!endIcon && /*#__PURE__*/_jsx("span", {
+          className: clsx(styles.icon, styles.endIcon),
           children: endIcon
         })]
-      }), !!hint && /*#__PURE__*/_jsx(Hint, {
+      }), !!hint && /*#__PURE__*/_jsx(Typography, {
         color: "textSecondary",
+        className: styles.hint,
         children: hint
       })]
     })

package/dist-src/checkbox/CheckboxField.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-import { Checkbox, FormControl, FormControlLabel, FormHelperText } from '@mui/material';
+import { Checkbox, FormControl, FormControlLabel, FormHelperText } from '@material-ui/core';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist-src/checkbox/CheckboxGroudField.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
-import { FormControl, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import { FormControl, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";