@superdispatch/ui 0.20.4 → 0.21.5-alpha.0

package/dist-src/button/ButtonOverrides.js

@@ -1,3 +1,6 @@
+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() {
@@ -8,9 +11,11 @@ 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
     },
@@ -21,13 +26,13 @@ function textVariant(text, outline, background, progress) {
       backgroundColor: background,
       boxShadow: outlineShadow(2, outline)
     },
-    '&$disabled': {
+    ["&.".concat(buttonClasses.disabled)]: {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
+      backgroundColor: Color.Transparent,
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
     }
   };
 }
@@ -41,11 +46,11 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
   return {
     backgroundColor,
     color: staleText,
-    border: undefined,
+    border: 0,
     boxShadow: outlinedBorder(staleBorder),
     '&:hover': {
       color: activeText,
-      border: undefined,
+      border: 0,
       backgroundColor: activeBackground,
       boxShadow: outlinedBorder(activeBorder)
     },
@@ -57,13 +62,13 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
     '&:focus': {
       boxShadow: outlinedBorder(activeBorder, activeOutline)
     },
-    '&$disabled': {
+    ["&.".concat(buttonClasses.disabled)]: {
       backgroundColor,
       color: disabledText,
-      boxShadow: outlinedBorder(disabledBorder)
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
+      boxShadow: outlinedBorder(disabledBorder),
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
     }
   };
 }
@@ -82,159 +87,152 @@ function containedVariant(text, backgroundColor, outline, active, disabledText,
     '&:focus': {
       boxShadow: outlineShadow(3, outline)
     },
-    '&$disabled': {
+    ["&.".concat(buttonClasses.disabled)]: {
       color: disabledText,
       boxShadow: outlineShadow(),
-      backgroundColor: disabledBackground
+      backgroundColor: disabledBackground,
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: disabledText
+      }
     }
   };
 }
 
+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.props.MuiButton = {
-    color: 'primary',
-    variant: 'outlined',
-    disableFocusRipple: true
-  };
-  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
-        },
-        '@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)
-            }
-          }
+  theme.components.MuiLoadingButton = {
+    defaultProps: {
+      variant: 'outlined'
+    },
+    styleOverrides: {
+      loadingIndicator: {
+        color: 'inherit',
+        fontSize: theme.spacing(2),
+        [".".concat(buttonClasses.sizeLarge, " &")]: {
+          fontSize: theme.spacing(3)
         }
       }
-    },
-    label: {
-      '& > .MuiSvgIcon-root': {
-        fontSize: '24px',
+    }
+  };
+  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]: {
-          fontSize: '20px'
+          padding: theme.spacing(0.75, 2)
         },
-        '$sizeLarge &': {
-          fontSize: '28px',
-          [sm]: {
-            fontSize: '24px'
+        '&:hover': {
+          backgroundColor: 'initial',
+          ["&.".concat(buttonClasses.disabled)]: {
+            backgroundColor: 'initial'
+          },
+          '@media (hover: none)': {
+            backgroundColor: 'initial'
           }
-        }
-      }
-    },
-    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
-      },
-      '&[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
         },
-        '@media (hover: none)': {
-          boxShadow: undefined,
-          backgroundColor: undefined
+        ["&.".concat(buttonClasses.disabled)]: {
+          color: 'initial'
+        },
+        '& > .MuiSvgIcon-root': {
+          fontSize: '24px',
+          [sm]: {
+            fontSize: '20px'
+          },
+          [".".concat(buttonClasses.sizeLarge, "&")]: {
+            fontSize: '28px',
+            [sm]: {
+              fontSize: '24px'
+            }
+          }
         }
       },
-      '&:active': {
-        boxShadow: 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)
       },
-      '&$focusVisible': {
-        boxShadow: undefined
+      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)
       },
-      '&$disabled': {
-        color: undefined,
-        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)
       },
-      '&[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
+      containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
+      containedSizeSmall: sizeSmall(theme),
+      containedSizeLarge: sizeLarge(theme)
     }
   };
 }

package/dist-src/card/CardOverrides.js

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

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

@@ -1,16 +1,17 @@
 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, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { ButtonBase, styled, Typography } from '@mui/material';
 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 useStyles = /*#__PURE__*/makeStyles(theme => ({
-  root: {
+var StyledButton = /*#__PURE__*/styled(ButtonBase)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
     width: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -21,66 +22,74 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     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'])
-  },
-  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
+    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
+    '&[data-disabled="true"]': {
+      color: Color.Dark200,
+      borderColor: Color.Silver500,
+      backgroundColor: Color.Silver100
     },
-    '&:hover, &:active': {
-      borderColor: Color.Blue300,
-      backgroundColor: Color.Blue50
+    '&[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)
+    },
+    '&[data-size="large"]': {
+      minHeight: theme.spacing(17.5)
     }
-  },
-  sizeSmall: {
-    minHeight: theme.spacing(6)
-  },
-  sizeLarge: {
-    minHeight: theme.spacing(17.5)
-  },
-  label: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  icon: {
+  };
+});
+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 {
     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((_ref, ref) => {
+export var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
     hint,
     size,
@@ -91,39 +100,33 @@ export var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     endIcon,
     startIcon,
     disabled
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded);
 
-  var styles = useStyles({
-    classes
-  });
-  return /*#__PURE__*/_jsx(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     disabled: disabled,
-    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, {
+    "data-size": size,
+    "data-disabled": !!disabled,
+    "data-error": !disabled && !!error,
+    "data-primary": !disabled && !error,
+    children: error ? /*#__PURE__*/_jsx(Label, {
       variant: "h4",
       color: "inherit",
-      className: styles.label,
       children: error
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(Typography, {
+      children: [/*#__PURE__*/_jsxs(Label, {
         variant: "h4",
         color: "inherit",
-        className: styles.label,
-        children: [!!startIcon && /*#__PURE__*/_jsx("span", {
-          className: clsx(styles.icon, styles.startIcon),
+        children: [!!startIcon && /*#__PURE__*/_jsx(Icon, {
+          "data-placement": "start",
           children: startIcon
-        }), children, !!endIcon && /*#__PURE__*/_jsx("span", {
-          className: clsx(styles.icon, styles.endIcon),
+        }), children, !!endIcon && /*#__PURE__*/_jsx(Icon, {
+          "data-placement": "end",
           children: endIcon
         })]
-      }), !!hint && /*#__PURE__*/_jsx(Typography, {
+      }), !!hint && /*#__PURE__*/_jsx(Hint, {
         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 '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormHelperText } from '@mui/material';
 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 '@material-ui/core';
+import { FormControl, FormGroup, FormHelperText, FormLabel } from '@mui/material';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";