@superdispatch/ui 0.33.0 → 0.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist-node/index.js +343 -419
  2. package/dist-node/index.js.map +1 -1
  3. package/dist-src/avatar/AvatarOverrides.js +3 -3
  4. package/dist-src/avatar-button/AvatarButton.js +7 -7
  5. package/dist-src/button/ButtonOverrides.js +17 -17
  6. package/dist-src/card-button/CardButton.js +14 -14
  7. package/dist-src/checkbox/CheckboxField.js +2 -2
  8. package/dist-src/checkbox/CheckboxGroudField.js +3 -3
  9. package/dist-src/checkbox/CheckboxOverrides.js +9 -9
  10. package/dist-src/chip/ChipOverrides.js +9 -9
  11. package/dist-src/description-list/DescriptionList.js +2 -2
  12. package/dist-src/drawer/DrawerActions.js +2 -2
  13. package/dist-src/drawer/DrawerTitle.js +2 -2
  14. package/dist-src/dropdown-button/DropdownButton.js +2 -2
  15. package/dist-src/icon-button/IconButtonOverrides.js +11 -11
  16. package/dist-src/link/LinkOverrides.js +9 -9
  17. package/dist-src/list/ListOverrides.js +3 -3
  18. package/dist-src/menu/MenuOverrides.js +2 -2
  19. package/dist-src/overflow-text/OverflowText.js +2 -2
  20. package/dist-src/pagination/PaginationOverrides.js +10 -10
  21. package/dist-src/paper/PaperOverrides.js +2 -2
  22. package/dist-src/radio/RadioField.js +2 -2
  23. package/dist-src/radio/RadioFieldCard.js +2 -2
  24. package/dist-src/radio/RadioGroupField.js +3 -3
  25. package/dist-src/radio/RadioOverrides.js +6 -6
  26. package/dist-src/snackbar/SnackbarContent.js +9 -9
  27. package/dist-src/svg-icon/SvgIconOverrides.js +2 -2
  28. package/dist-src/switch/SwitchOverrides.js +9 -9
  29. package/dist-src/tabs/TabsOverrides.js +4 -4
  30. package/dist-src/tag/Tag.js +23 -23
  31. package/dist-src/text-field/TextFieldOverrides.js +15 -15
  32. package/dist-src/theme/Color.js +170 -249
  33. package/dist-src/theme/GlobalStyles.js +2 -2
  34. package/dist-src/theme/ThemeProvider.js +12 -11
  35. package/dist-src/tooltip/TooltipOverrides.js +3 -3
  36. package/dist-src/typography/TypographyOverrides.js +3 -3
  37. package/dist-types/index.d.ts +13 -125
  38. package/dist-web/index.js +344 -422
  39. package/dist-web/index.js.map +1 -1
  40. package/package.json +2 -2
@@ -1,11 +1,11 @@
1
- import { ColorV2 } from "../theme/Color.js";
1
+ import { ColorDynamic } from "../theme/Color.js";
2
2
  export function overridePaper(theme) {
3
3
  theme.props.MuiPaper = {
4
4
  elevation: 0
5
5
  };
6
6
  theme.overrides.MuiPaper = {
7
7
  elevation0: {
8
- border: "1px solid ".concat(ColorV2.Silver400)
8
+ border: "1px solid ".concat(ColorDynamic.Silver400)
9
9
  }
10
10
  };
11
11
  }
@@ -4,7 +4,7 @@ var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText"
4
4
  import { FormControl as FormControlMui, FormControlLabel, FormHelperText as FormHelperTextMui, Radio } from '@material-ui/core';
5
5
  import { forwardRef } from 'react';
6
6
  import styled from 'styled-components';
7
- import { ColorV2 } from "../theme/Color.js";
7
+ import { ColorDynamic } from "../theme/Color.js";
8
8
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
9
  var FormControl = /*#__PURE__*/styled(FormControlMui).withConfig({
10
10
  displayName: "RadioField__FormControl",
@@ -13,7 +13,7 @@ var FormControl = /*#__PURE__*/styled(FormControlMui).withConfig({
13
13
  var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).withConfig({
14
14
  displayName: "RadioField__FormHelperText",
15
15
  componentId: "SD__sc-6ey4qt-1"
16
- })(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
16
+ })(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
17
17
  export var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
18
18
  var {
19
19
  label,
@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
6
6
  import styled from 'styled-components';
7
7
  import { Column } from "../columns/Column.js";
8
8
  import { Columns } from "../columns/Columns.js";
9
- import { ColorV2 } from "../theme/Color.js";
9
+ import { ColorDynamic } from "../theme/Color.js";
10
10
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
11
  var ClickableCard = /*#__PURE__*/styled(ButtonBase).withConfig({
12
12
  displayName: "RadioFieldCard__ClickableCard",
@@ -27,7 +27,7 @@ var Content = /*#__PURE__*/styled.div.withConfig({
27
27
  var {
28
28
  active
29
29
  } = _ref;
30
- return active ? ColorV2.Blue300 : ColorV2.Silver500;
30
+ return active ? ColorDynamic.Blue300 : ColorDynamic.Silver500;
31
31
  });
32
32
  var Caption = /*#__PURE__*/styled.div.withConfig({
33
33
  displayName: "RadioFieldCard__Caption",
@@ -4,16 +4,16 @@ var _excluded = ["name", "value", "onChange", "RadioGroupProps", "label", "FormL
4
4
  import { FormControl, FormHelperText as FormHelperTextMui, FormLabel as FormLabelMui, RadioGroup } from '@material-ui/core';
5
5
  import { forwardRef } from 'react';
6
6
  import styled from 'styled-components';
7
- import { ColorV2 } from "../theme/Color.js";
7
+ import { ColorDynamic } from "../theme/Color.js";
8
8
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
9
  var FormLabel = /*#__PURE__*/styled(FormLabelMui).withConfig({
10
10
  displayName: "RadioGroupField__FormLabel",
11
11
  componentId: "SD__sc-1udxviq-0"
12
- })(["margin-bottom:8px;color:", ";font-weight:600;"], ColorV2.Dark300);
12
+ })(["margin-bottom:8px;color:", ";font-weight:600;"], ColorDynamic.Dark300);
13
13
  var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).withConfig({
14
14
  displayName: "RadioGroupField__FormHelperText",
15
15
  componentId: "SD__sc-1udxviq-1"
16
- })(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorV2.Dark300, ColorV2.Red500);
16
+ })(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], ColorDynamic.Dark300, ColorDynamic.Red500);
17
17
  export var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
18
18
  var {
19
19
  name,
@@ -1,5 +1,5 @@
1
1
  import { SvgIcon } from '@material-ui/core';
2
- import { ColorV2 } from "../theme/Color.js";
2
+ import { ColorDynamic } from "../theme/Color.js";
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
4
  export function overrideRadio(theme) {
5
5
  theme.props.MuiRadio = {
@@ -9,7 +9,7 @@ export function overrideRadio(theme) {
9
9
  cx: "12",
10
10
  cy: "12",
11
11
  r: "9",
12
- fill: ColorV2.White,
12
+ fill: ColorDynamic.White,
13
13
  stroke: "currentColor"
14
14
  })
15
15
  }),
@@ -24,13 +24,13 @@ export function overrideRadio(theme) {
24
24
  cx: "12",
25
25
  cy: "12",
26
26
  r: "4",
27
- fill: ColorV2.White
27
+ fill: ColorDynamic.White
28
28
  })]
29
29
  })
30
30
  };
31
31
  theme.overrides.MuiRadio = {
32
32
  root: {
33
- color: ColorV2.Dark100,
33
+ color: ColorDynamic.Dark100,
34
34
  width: theme.spacing(3),
35
35
  height: theme.spacing(3),
36
36
  marginRight: theme.spacing(1),
@@ -41,10 +41,10 @@ export function overrideRadio(theme) {
41
41
  },
42
42
  colorPrimary: {
43
43
  '&$checked$disabled': {
44
- color: ColorV2.Silver500
44
+ color: ColorDynamic.Silver500
45
45
  },
46
46
  '&:hover:not($checked)': {
47
- color: ColorV2.Dark100
47
+ color: ColorDynamic.Dark100
48
48
  }
49
49
  }
50
50
  };
@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/styles';
8
8
  import clsx from 'clsx';
9
9
  import { forwardRef } from 'react';
10
10
  import styled from 'styled-components';
11
- import { ColorV2 } from "../theme/Color.js";
11
+ import { ColorDynamic } from "../theme/Color.js";
12
12
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  var PaddedContent = /*#__PURE__*/styled.span.withConfig({
14
14
  displayName: "SnackbarContent__PaddedContent",
@@ -16,8 +16,8 @@ var PaddedContent = /*#__PURE__*/styled.span.withConfig({
16
16
  })(["padding:2px 0 0;"]);
17
17
  var useStyles = /*#__PURE__*/makeStyles(theme => ({
18
18
  root: {
19
- color: ColorV2.White,
20
- backgroundColor: ColorV2.Dark500,
19
+ color: ColorDynamic.White,
20
+ backgroundColor: ColorDynamic.Dark500,
21
21
  alignItems: 'flex-start',
22
22
  padding: '10px 16px',
23
23
  [theme.breakpoints.up('md')]: {
@@ -40,17 +40,17 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
40
40
  fontSize: theme.spacing(3)
41
41
  },
42
42
  closeButton: {
43
- color: ColorV2.White40,
43
+ color: ColorDynamic.White40,
44
44
  '&:hover, &:focus': {
45
- backgroundColor: ColorV2.White08,
46
- color: ColorV2.White40
45
+ backgroundColor: ColorDynamic.White08,
46
+ color: ColorDynamic.White40
47
47
  }
48
48
  },
49
49
  variantError: {
50
- color: ColorV2.Red500,
51
- background: ColorV2.Red50,
50
+ color: ColorDynamic.Red500,
51
+ background: ColorDynamic.Red50,
52
52
  '& $closeButton': {
53
- color: ColorV2.Red500
53
+ color: ColorDynamic.Red500
54
54
  }
55
55
  },
56
56
  variantSuccess: {}
@@ -1,4 +1,4 @@
1
- import { ColorV2 } from "../theme/Color.js";
1
+ import { ColorDynamic } from "../theme/Color.js";
2
2
  export function overrideSvgIcon(theme) {
3
3
  var sm = theme.breakpoints.up('sm');
4
4
  theme.overrides.MuiSvgIcon = {
@@ -19,7 +19,7 @@ export function overrideSvgIcon(theme) {
19
19
  fontSize: 'var(--mui-svg-icon-size, 32px)'
20
20
  },
21
21
  colorAction: {
22
- color: ColorV2.Dark100
22
+ color: ColorDynamic.Dark100
23
23
  }
24
24
  };
25
25
  }
@@ -1,4 +1,4 @@
1
- import { ColorV2 } from "../theme/Color.js";
1
+ import { ColorDynamic } from "../theme/Color.js";
2
2
  export function overrideSwitch(theme) {
3
3
  var sm = theme.breakpoints.up('sm');
4
4
  theme.props.MuiSwitch = {
@@ -19,7 +19,7 @@ export function overrideSwitch(theme) {
19
19
  },
20
20
  track: {
21
21
  opacity: undefined,
22
- boxShadow: "0 0 0 0 ".concat(ColorV2.Transparent),
22
+ boxShadow: "0 0 0 0 ".concat(ColorDynamic.Transparent),
23
23
  transition: theme.transitions.create(['box-shadow', 'background-color'], {
24
24
  duration: theme.transitions.duration.shortest
25
25
  }),
@@ -29,7 +29,7 @@ export function overrideSwitch(theme) {
29
29
  }
30
30
  },
31
31
  thumb: {
32
- color: ColorV2.White,
32
+ color: ColorDynamic.White,
33
33
  boxShadow: undefined,
34
34
  width: theme.spacing(3),
35
35
  height: theme.spacing(3),
@@ -63,24 +63,24 @@ export function overrideSwitch(theme) {
63
63
  '&:hover': {
64
64
  backgroundColor: undefined,
65
65
  '& + $track': {
66
- backgroundColor: ColorV2.Blue500
66
+ backgroundColor: ColorDynamic.Blue500
67
67
  }
68
68
  }
69
69
  },
70
70
  '& + $track': {
71
- backgroundColor: ColorV2.Silver500
71
+ backgroundColor: ColorDynamic.Silver500
72
72
  },
73
73
  '&$disabled + $track': {
74
- backgroundColor: ColorV2.Dark30
74
+ backgroundColor: ColorDynamic.Dark30
75
75
  },
76
76
  '&$checked$disabled + $track': {
77
- backgroundColor: ColorV2.Blue30
77
+ backgroundColor: ColorDynamic.Blue30
78
78
  },
79
79
  '&:hover + $track': {
80
- backgroundColor: ColorV2.Dark100
80
+ backgroundColor: ColorDynamic.Dark100
81
81
  },
82
82
  '&.Mui-focusVisible + $track': {
83
- boxShadow: "0 0 0 3px ".concat(ColorV2.Blue30)
83
+ boxShadow: "0 0 0 3px ".concat(ColorDynamic.Blue30)
84
84
  }
85
85
  }
86
86
  };
@@ -1,5 +1,5 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/objectSpread2";
2
- import { ColorV2 } from "../theme/Color.js";
2
+ import { ColorDynamic } from "../theme/Color.js";
3
3
  export function overrideTabs(theme) {
4
4
  theme.props.MuiTabs = {
5
5
  variant: 'scrollable',
@@ -12,7 +12,7 @@ export function overrideTabs(theme) {
12
12
  },
13
13
  scrollButtons: {
14
14
  opacity: 1,
15
- color: ColorV2.Dark100,
15
+ color: ColorDynamic.Dark100,
16
16
  width: theme.spacing(4),
17
17
  transition: theme.transitions.create('opacity', {
18
18
  duration: theme.transitions.duration.short
@@ -32,9 +32,9 @@ export function overrideTabs(theme) {
32
32
  }
33
33
  }),
34
34
  textColorPrimary: {
35
- color: ColorV2.Dark500,
35
+ color: ColorDynamic.Dark500,
36
36
  '&:hover, &:focus': {
37
- color: ColorV2.Blue300
37
+ color: ColorDynamic.Blue300
38
38
  }
39
39
  }
40
40
  };
@@ -5,7 +5,7 @@ import { Typography } from '@material-ui/core';
5
5
  import { makeStyles } from '@material-ui/styles';
6
6
  import cx from 'clsx';
7
7
  import { forwardRef } from 'react';
8
- import { ColorV2 } from "../theme/Color.js";
8
+ import { ColorDynamic } from "../theme/Color.js";
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
10
  var useStyles = /*#__PURE__*/makeStyles(theme => ({
11
11
  root: {
@@ -17,56 +17,56 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
17
17
  },
18
18
  variantSubtle: {
19
19
  '&$colorGrey': {
20
- color: ColorV2.Dark300,
21
- backgroundColor: ColorV2.Silver200
20
+ color: ColorDynamic.Dark300,
21
+ backgroundColor: ColorDynamic.Silver200
22
22
  },
23
23
  '&$colorBlue': {
24
- color: ColorV2.Blue500,
25
- backgroundColor: ColorV2.Blue50
24
+ color: ColorDynamic.Blue500,
25
+ backgroundColor: ColorDynamic.Blue50
26
26
  },
27
27
  '&$colorGreen': {
28
- color: ColorV2.Green500,
29
- backgroundColor: ColorV2.Green50
28
+ color: ColorDynamic.Green500,
29
+ backgroundColor: ColorDynamic.Green50
30
30
  },
31
31
  '&$colorPurple': {
32
- color: ColorV2.Purple500,
33
- backgroundColor: ColorV2.Purple50
32
+ color: ColorDynamic.Purple500,
33
+ backgroundColor: ColorDynamic.Purple50
34
34
  },
35
35
  '&$colorRed': {
36
- color: ColorV2.Red500,
37
- backgroundColor: ColorV2.Red50
36
+ color: ColorDynamic.Red500,
37
+ backgroundColor: ColorDynamic.Red50
38
38
  },
39
39
  '&$colorTeal': {
40
- color: ColorV2.Teal500,
41
- backgroundColor: ColorV2.Teal50
40
+ color: ColorDynamic.Teal500,
41
+ backgroundColor: ColorDynamic.Teal50
42
42
  },
43
43
  '&$colorYellow': {
44
- color: ColorV2.Yellow500,
45
- backgroundColor: ColorV2.Yellow50
44
+ color: ColorDynamic.Yellow500,
45
+ backgroundColor: ColorDynamic.Yellow50
46
46
  }
47
47
  },
48
48
  variantBold: {
49
- color: ColorV2.White,
49
+ color: ColorDynamic.White,
50
50
  '&$colorGrey': {
51
- backgroundColor: ColorV2.Dark300
51
+ backgroundColor: ColorDynamic.Dark300
52
52
  },
53
53
  '&$colorBlue': {
54
- backgroundColor: ColorV2.Blue300
54
+ backgroundColor: ColorDynamic.Blue300
55
55
  },
56
56
  '&$colorGreen': {
57
- backgroundColor: ColorV2.Green300
57
+ backgroundColor: ColorDynamic.Green300
58
58
  },
59
59
  '&$colorPurple': {
60
- backgroundColor: ColorV2.Purple300
60
+ backgroundColor: ColorDynamic.Purple300
61
61
  },
62
62
  '&$colorRed': {
63
- backgroundColor: ColorV2.Red300
63
+ backgroundColor: ColorDynamic.Red300
64
64
  },
65
65
  '&$colorTeal': {
66
- backgroundColor: ColorV2.Teal300
66
+ backgroundColor: ColorDynamic.Teal300
67
67
  },
68
68
  '&$colorYellow': {
69
- backgroundColor: ColorV2.Yellow300
69
+ backgroundColor: ColorDynamic.Yellow300
70
70
  }
71
71
  },
72
72
  colorGrey: {},
@@ -1,7 +1,7 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/objectSpread2";
2
2
  import { SvgIcon } from '@material-ui/core';
3
3
  import { forwardRef } from 'react';
4
- import { ColorV2 } from "../theme/Color.js";
4
+ import { ColorDynamic } from "../theme/Color.js";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  var SelectIcon = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SvgIcon, _objectSpread(_objectSpread({
7
7
  ref: ref
@@ -21,7 +21,7 @@ export function overrideTextField(theme) {
21
21
  };
22
22
  theme.overrides.MuiFormLabel = {
23
23
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
24
- color: ColorV2.Dark500,
24
+ color: ColorDynamic.Dark500,
25
25
  '&.MuiFormLabel-root': {
26
26
  fontSize: theme.spacing(2),
27
27
  [sm]: {
@@ -42,36 +42,36 @@ export function overrideTextField(theme) {
42
42
  theme.overrides.MuiInputBase = {
43
43
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
44
44
  '&$disabled': {
45
- backgroundColor: ColorV2.Silver30
45
+ backgroundColor: ColorDynamic.Silver30
46
46
  },
47
47
  '&$error': {
48
- borderColor: ColorV2.Red500
48
+ borderColor: ColorDynamic.Red500
49
49
  },
50
50
  '&.MuiOutlinedInput-root': {
51
51
  '& fieldset': {
52
- borderColor: ColorV2.Silver500
52
+ borderColor: ColorDynamic.Silver500
53
53
  },
54
54
  '&:hover fieldset': {
55
- borderColor: ColorV2.Dark100
55
+ borderColor: ColorDynamic.Dark100
56
56
  },
57
57
  '&.Mui-focused fieldset': {
58
- borderColor: ColorV2.Blue500
58
+ borderColor: ColorDynamic.Blue500
59
59
  },
60
60
  '&.Mui-error fieldset': {
61
- borderColor: ColorV2.Red500
61
+ borderColor: ColorDynamic.Red500
62
62
  },
63
63
  '&.Mui-error:hover fieldset': {
64
- borderColor: ColorV2.Red500
64
+ borderColor: ColorDynamic.Red500
65
65
  },
66
66
  '&.Mui-disabled fieldset': {
67
- borderColor: ColorV2.Silver400
67
+ borderColor: ColorDynamic.Silver400
68
68
  }
69
69
  }
70
70
  }),
71
71
  input: {
72
72
  textOverflow: 'ellipsis',
73
73
  '&::placeholder': {
74
- color: ColorV2.Dark100,
74
+ color: ColorDynamic.Dark100,
75
75
  opacity: 1
76
76
  },
77
77
  '&.MuiInputBase-input': {
@@ -142,7 +142,7 @@ export function overrideTextField(theme) {
142
142
  },
143
143
  notchedOutline: {
144
144
  top: 0,
145
- borderColor: ColorV2.Silver500,
145
+ borderColor: ColorDynamic.Silver500,
146
146
  '& legend': {
147
147
  display: 'none'
148
148
  }
@@ -155,7 +155,7 @@ export function overrideTextField(theme) {
155
155
  icon: {
156
156
  top: 'calc(50% - 0.5em)',
157
157
  '$disabled &': {
158
- color: ColorV2.Dark100
158
+ color: ColorDynamic.Dark100
159
159
  },
160
160
  fontSize: theme.spacing(3),
161
161
  [sm]: {
@@ -213,10 +213,10 @@ export function overrideTextField(theme) {
213
213
  };
214
214
  theme.overrides.MuiFormHelperText = {
215
215
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
216
- color: ColorV2.Dark300,
216
+ color: ColorDynamic.Dark300,
217
217
  marginTop: theme.spacing(0.5),
218
218
  '&.Mui-error': {
219
- color: ColorV2.Red500
219
+ color: ColorDynamic.Red500
220
220
  },
221
221
  '&.MuiFormHelperText-root': {
222
222
  fontSize: theme.spacing(2),