@mui/docs 6.0.0-alpha.7 → 6.0.0-alpha.9

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 (25) hide show
  1. package/CHANGELOG.md +113 -2
  2. package/CodeCopy/CodeCopyButton.js +6 -8
  3. package/HighlightedCode/HighlightedCode.js +25 -25
  4. package/InfoCard/InfoCard.js +38 -39
  5. package/Link/Link.js +40 -38
  6. package/MarkdownElement/MarkdownElement.js +35 -28
  7. package/NProgressBar/NProgressBar.js +6 -7
  8. package/branding/brandingTheme.js +516 -347
  9. package/node/CodeCopy/CodeCopyButton.js +6 -8
  10. package/node/HighlightedCode/HighlightedCode.js +25 -25
  11. package/node/InfoCard/InfoCard.js +38 -39
  12. package/node/Link/Link.js +43 -40
  13. package/node/MarkdownElement/MarkdownElement.js +36 -29
  14. package/node/NProgressBar/NProgressBar.js +6 -7
  15. package/node/branding/brandingTheme.js +516 -347
  16. package/node/svgIcons/FileDownload.js +3 -3
  17. package/node/svgIcons/JavaScript.js +3 -3
  18. package/node/svgIcons/TypeScript.js +3 -3
  19. package/node/translations/translations.json +2 -1
  20. package/package.json +2 -2
  21. package/svgIcons/FileDownload.js +3 -3
  22. package/svgIcons/JavaScript.js +3 -3
  23. package/svgIcons/TypeScript.js +3 -3
  24. package/translations/translations.json +2 -1
  25. package/tsconfig.build.tsbuildinfo +1 -1
package/node/branding/brandingTheme.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.getMetaThemeColor = exports.getDesignTokens = exports.error = exports.brandingLightTheme = exports.brandingDarkTheme = exports.blueDark = exports.blue = void 0;
8
8
  exports.getThemedComponents = getThemedComponents;
9
9
  exports.warning = exports.success = exports.grey = void 0;
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
10
  var _ArrowDropDownRounded = _interopRequireDefault(require("@mui/icons-material/ArrowDropDownRounded"));
12
11
  var _styles = require("@mui/material/styles");
13
12
  // TODO: enable this once types conflict is fixed
@@ -104,57 +103,75 @@ const getMetaThemeColor = mode => {
104
103
  };
105
104
  exports.getMetaThemeColor = getMetaThemeColor;
106
105
  const getDesignTokens = mode => ({
107
- palette: (0, _extends2.default)({
108
- primary: (0, _extends2.default)({}, blue, mode === 'dark' && {
109
- main: blue[400]
110
- }),
111
- secondary: (0, _extends2.default)({}, grey, mode === 'light' && {
112
- main: blueDark[100],
113
- contrastText: blueDark[600]
114
- }, mode === 'dark' && {
115
- main: blueDark[700],
116
- contrastText: blueDark[600]
117
- }),
106
+ palette: {
107
+ primary: {
108
+ ...blue,
109
+ ...(mode === 'dark' && {
110
+ main: blue[400]
111
+ })
112
+ },
113
+ secondary: {
114
+ ...grey,
115
+ ...(mode === 'light' && {
116
+ main: blueDark[100],
117
+ contrastText: blueDark[600]
118
+ }),
119
+ ...(mode === 'dark' && {
120
+ main: blueDark[700],
121
+ contrastText: blueDark[600]
122
+ })
123
+ },
118
124
  divider: mode === 'dark' ? (0, _styles.alpha)(blueDark[500], 0.3) : grey[100],
119
125
  primaryDark: blueDark,
120
- mode
121
- }, mode === 'dark' && {
122
- background: {
123
- default: blueDark[900],
124
- paper: (0, _styles.alpha)(blueDark[800], 0.8)
125
- }
126
- }, {
126
+ mode,
127
+ ...(mode === 'dark' && {
128
+ background: {
129
+ default: blueDark[900],
130
+ paper: (0, _styles.alpha)(blueDark[800], 0.8)
131
+ }
132
+ }),
127
133
  common: {
128
134
  black: 'hsl(200, 10%, 4%)'
129
135
  },
130
- text: (0, _extends2.default)({}, mode === 'light' && {
131
- primary: grey[900],
132
- secondary: grey[800],
133
- tertiary: grey[700]
134
- }, mode === 'dark' && {
135
- primary: '#fff',
136
- secondary: grey[400],
137
- tertiary: grey[500]
138
- }),
139
- grey: (0, _extends2.default)({}, grey, mode === 'light' && {
140
- main: grey[100],
141
- contrastText: grey[600]
142
- }, mode === 'dark' && {
143
- main: grey[700],
144
- contrastText: grey[600]
145
- }),
136
+ text: {
137
+ ...(mode === 'light' && {
138
+ primary: grey[900],
139
+ secondary: grey[800],
140
+ tertiary: grey[700]
141
+ }),
142
+ ...(mode === 'dark' && {
143
+ primary: '#fff',
144
+ secondary: grey[400],
145
+ tertiary: grey[500]
146
+ })
147
+ },
148
+ grey: {
149
+ ...grey,
150
+ ...(mode === 'light' && {
151
+ main: grey[100],
152
+ contrastText: grey[600]
153
+ }),
154
+ ...(mode === 'dark' && {
155
+ main: grey[700],
156
+ contrastText: grey[600]
157
+ })
158
+ },
146
159
  error,
147
- success: (0, _extends2.default)({}, success, mode === 'dark' && {
148
- main: success[600]
149
- }, mode === 'light' && {
150
- main: success[700]
151
- }),
160
+ success: {
161
+ ...success,
162
+ ...(mode === 'dark' && {
163
+ main: success[600]
164
+ }),
165
+ ...(mode === 'light' && {
166
+ main: success[700]
167
+ })
168
+ },
152
169
  warning,
153
170
  gradients: {
154
171
  radioSubtle: mode === 'dark' ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${(0, _styles.alpha)(blue[900], 0.3)} 300%)` : `radial-gradient(100% 90% at 50% 0, transparent 0, ${(0, _styles.alpha)(blue[100], 0.3)} 300%)`,
155
172
  linearSubtle: mode === 'dark' ? `linear-gradient(0deg, ${(0, _styles.alpha)(blue[900], 0.1)}, ${(0, _styles.alpha)(blueDark[900], 0.5)})` : `linear-gradient(0deg, ${(0, _styles.alpha)(blue[50], 0.4)}, ${(0, _styles.alpha)(grey[50], 0.1)})`
156
173
  }
157
- }),
174
+ },
158
175
  shape: {
159
176
  borderRadius: 12
160
177
  },
@@ -176,15 +193,16 @@ const getDesignTokens = mode => ({
176
193
  fontFamilySystem: systemFont.join(','),
177
194
  fontWeightSemiBold: 600,
178
195
  fontWeightExtraBold: 800,
179
- h1: (0, _extends2.default)({
196
+ h1: {
180
197
  fontFamily: ['"General Sans"', ...systemFont].join(','),
181
198
  fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)',
182
199
  fontWeight: 600,
183
200
  lineHeight: 78 / 70,
184
- letterSpacing: -0.2
185
- }, mode === 'light' && {
186
- color: blueDark[900]
187
- }),
201
+ letterSpacing: -0.2,
202
+ ...(mode === 'light' && {
203
+ color: blueDark[900]
204
+ })
205
+ },
188
206
  h2: {
189
207
  fontFamily: ['"General Sans"', ...systemFont].join(','),
190
208
  fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
@@ -311,29 +329,95 @@ function getThemedComponents() {
311
329
  MuiAlert: {
312
330
  styleOverrides: {
313
331
  root: {
314
- padding: '12px 16px'
332
+ padding: '16px',
333
+ gap: '12px',
334
+ fontSize: '1rem',
335
+ '& * ul': {
336
+ paddingLeft: '24px !important',
337
+ marginBottom: '0 !important'
338
+ },
339
+ // !important is used here to override the anchor tag color coming from MarkdownElement
340
+ '& .MuiAlert-icon': {
341
+ margin: 0,
342
+ marginTop: '2px',
343
+ padding: 0
344
+ },
345
+ '& .MuiAlert-message': {
346
+ padding: 0
347
+ }
348
+ },
349
+ icon: {
350
+ paddingTop: 10,
351
+ paddingBottom: 0
315
352
  },
316
353
  standardWarning: ({
317
354
  theme
318
- }) => [{
355
+ }) => [
356
+ // same styles from the MarkdownElement callout
357
+ {
319
358
  backgroundColor: (0, _styles.alpha)(theme.palette.warning[50], 0.5),
320
359
  color: (theme.vars || theme).palette.grey[900],
321
360
  border: '1px solid',
322
- borderColor: (0, _styles.alpha)(theme.palette.warning[600], 0.3),
361
+ borderColor: (0, _styles.alpha)(theme.palette.warning[700], 0.15),
323
362
  '& .MuiAlert-icon': {
324
- color: (theme.vars || theme).palette.warning[700]
363
+ color: (theme.vars || theme).palette.warning[600]
364
+ },
365
+ '& * a': {
366
+ // !important is used here to override the anchor tag color coming from MarkdownElement
367
+ color: `${(theme.vars || theme).palette.warning[900]} !important`,
368
+ textDecorationColor: `${(0, _styles.alpha)(theme.palette.warning.main, 0.4)} !important`,
369
+ '&:hover': {
370
+ textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
371
+ }
325
372
  }
326
373
  }, theme.applyDarkStyles({
327
- backgroundColor: (0, _styles.alpha)(theme.palette.warning[700], 0.2),
374
+ backgroundColor: (0, _styles.alpha)(theme.palette.warning[700], 0.12),
328
375
  color: (theme.vars || theme).palette.warning[50],
329
376
  '& .MuiAlert-icon': {
330
- color: (theme.vars || theme).palette.warning[200]
377
+ color: (theme.vars || theme).palette.warning[400]
378
+ },
379
+ '& * a': {
380
+ color: `${(theme.vars || theme).palette.warning[100]} !important`,
381
+ textDecorationColor: `${(0, _styles.alpha)(theme.palette.warning[600], 0.4)} !important`,
382
+ '&:hover': {
383
+ textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
384
+ }
331
385
  }
332
386
  })],
333
- icon: {
334
- paddingTop: 12,
335
- paddingBottom: 0
336
- }
387
+ standardSuccess: ({
388
+ theme
389
+ }) => [
390
+ // same styles from the MarkdownElement callout
391
+ {
392
+ backgroundColor: (0, _styles.alpha)(theme.palette.success[50], 0.5),
393
+ color: (theme.vars || theme).palette.success[900],
394
+ border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
395
+ '& .MuiAlert-icon': {
396
+ color: (theme.vars || theme).palette.success[600]
397
+ },
398
+ '& * a': {
399
+ // !important is used here to override the anchor tag color coming from MarkdownElement
400
+ color: `${(theme.vars || theme).palette.success[900]} !important`,
401
+ textDecorationColor: `${(0, _styles.alpha)(theme.palette.success.main, 0.4)} !important`,
402
+ '&:hover': {
403
+ textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
404
+ }
405
+ }
406
+ }, theme.applyDarkStyles({
407
+ backgroundColor: (0, _styles.alpha)(theme.palette.success[700], 0.12),
408
+ color: (theme.vars || theme).palette.success[50],
409
+ borderColor: (0, _styles.alpha)(theme.palette.success[400], 0.1),
410
+ '& .MuiAlert-icon': {
411
+ color: (theme.vars || theme).palette.success[500]
412
+ },
413
+ '& * a': {
414
+ color: `${(theme.vars || theme).palette.success[100]} !important`,
415
+ textDecorationColor: `${(0, _styles.alpha)(theme.palette.success[600], 0.4)} !important`,
416
+ '&:hover': {
417
+ textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
418
+ }
419
+ }
420
+ })]
337
421
  }
338
422
  },
339
423
  MuiButtonBase: {
@@ -361,107 +445,135 @@ function getThemedComponents() {
361
445
  root: ({
362
446
  theme,
363
447
  ownerState
364
- }) => (0, _extends2.default)({
365
- transition: 'all 120ms ease-in'
366
- }, ownerState.size === 'large' && (0, _extends2.default)({}, theme.typography.body1, {
367
- lineHeight: 21 / 16,
368
- padding: theme.spacing('8px', '10px', '10px', '12px'),
369
- fontWeight: theme.typography.fontWeightSemiBold,
370
- borderRadius: 10,
371
- '& > span': {
372
- transition: '0.2s',
373
- marginLeft: 4
374
- },
375
- '&:hover > span': {
376
- transform: 'translateX(2px)'
377
- }
378
- }), ownerState.size === 'medium' && {
379
- fontSize: defaultTheme.typography.pxToRem(15),
380
- padding: theme.spacing('8px', '12px', '8px', '14px'),
381
- fontWeight: theme.typography.fontWeightSemiBold,
382
- borderRadius: 8,
383
- '& > span': {
384
- transition: '0.2s',
385
- marginLeft: 4
386
- },
387
- '&:hover > span': {
388
- transform: 'translateX(2px)'
389
- }
390
- }, ownerState.size === 'small' && {
391
- padding: theme.spacing('6px', 1.5),
392
- fontFamily: theme.typography.fontFamily,
393
- fontSize: defaultTheme.typography.pxToRem(13),
394
- fontWeight: theme.typography.fontWeightSemiBold,
395
- borderRadius: 8,
396
- '& .MuiButton-startIcon': {
397
- transition: '0.15s',
398
- marginRight: 4,
399
- marginLeft: -1
400
- },
401
- '& .MuiButton-endIcon': {
402
- transition: '0.15s',
403
- marginLeft: 4
404
- },
405
- '&:hover': {
448
+ }) => ({
449
+ transition: 'all 120ms ease-in',
450
+ ...(ownerState.size === 'large' && {
451
+ ...theme.typography.body1,
452
+ lineHeight: 21 / 16,
453
+ padding: theme.spacing('8px', '10px', '10px', '12px'),
454
+ fontWeight: theme.typography.fontWeightSemiBold,
455
+ borderRadius: 10,
456
+ '& > span': {
457
+ transition: '0.2s',
458
+ marginLeft: 4
459
+ },
460
+ '&:hover > span': {
461
+ transform: 'translateX(2px)'
462
+ }
463
+ }),
464
+ ...(ownerState.size === 'medium' && {
465
+ fontSize: defaultTheme.typography.pxToRem(15),
466
+ padding: theme.spacing('8px', '12px', '8px', '14px'),
467
+ fontWeight: theme.typography.fontWeightSemiBold,
468
+ borderRadius: 8,
469
+ '& > span': {
470
+ transition: '0.2s',
471
+ marginLeft: 4
472
+ },
473
+ '&:hover > span': {
474
+ transform: 'translateX(2px)'
475
+ }
476
+ }),
477
+ ...(ownerState.size === 'small' && {
478
+ padding: theme.spacing('6px', 1.5),
479
+ fontFamily: theme.typography.fontFamily,
480
+ fontSize: defaultTheme.typography.pxToRem(13),
481
+ fontWeight: theme.typography.fontWeightSemiBold,
482
+ borderRadius: 8,
406
483
  '& .MuiButton-startIcon': {
407
- transform: 'translateX(-2px)'
484
+ transition: '0.15s',
485
+ marginRight: 4,
486
+ marginLeft: -1
408
487
  },
409
488
  '& .MuiButton-endIcon': {
410
- transform: 'translateX(2px)'
489
+ transition: '0.15s',
490
+ marginLeft: 4
491
+ },
492
+ '&:hover': {
493
+ '& .MuiButton-startIcon': {
494
+ transform: 'translateX(-2px)'
495
+ },
496
+ '& .MuiButton-endIcon': {
497
+ transform: 'translateX(2px)'
498
+ }
411
499
  }
412
- }
413
- }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && (0, _extends2.default)({
414
- color: (theme.vars || theme).palette.text.primary,
415
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
416
- borderColor: (theme.vars || theme).palette.primaryDark[100],
417
- boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
418
- '&:hover': {
419
- backgroundColor: (theme.vars || theme).palette.grey[50]
420
- }
421
- }, theme.applyDarkStyles({
422
- color: (theme.vars || theme).palette.primaryDark[100],
423
- borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
424
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
425
- boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
426
- '&:hover': {
427
- backgroundColor: (theme.vars || theme).palette.primaryDark[700],
428
- borderColor: (theme.vars || theme).palette.primaryDark[600]
429
- }
430
- })), ownerState.variant === 'outlined' && ownerState.color === 'primary' && (0, _extends2.default)({
431
- color: (theme.vars || theme).palette.primary[600],
432
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.2),
433
- borderColor: (theme.vars || theme).palette.primary[100],
434
- boxShadow: `${(0, _styles.alpha)(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
435
- '&:hover': {
436
- backgroundColor: (theme.vars || theme).palette.primary[50],
437
- borderColor: (theme.vars || theme).palette.primary[200]
438
- }
439
- }, theme.applyDarkStyles({
440
- color: (theme.vars || theme).palette.primary[200],
441
- borderColor: (0, _styles.alpha)(theme.palette.primary[900], 0.7),
442
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
443
- boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
444
- '&:hover': {
445
- backgroundColor: (theme.vars || theme).palette.primary[900],
446
- borderColor: (theme.vars || theme).palette.primary[700]
447
- }
448
- })), ownerState.variant === 'contained' && ownerState.color === 'primary' && {
449
- color: '#fff',
450
- textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
451
- backgroundColor: (theme.vars || theme).palette.primary[500],
452
- backgroundImage: `linear-gradient(180deg, ${(0, _styles.alpha)(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
453
- boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
454
- '&:hover': {
455
- backgroundColor: (theme.vars || theme).palette.primary[700]
456
- },
457
- '&:active': {
458
- backgroundColor: (theme.vars || theme).palette.primaryDark[700]
459
- }
460
- }, ownerState.variant === 'text' && (0, _extends2.default)({
461
- color: (theme.vars || theme).palette.primary[600]
462
- }, theme.applyDarkStyles({
463
- color: (theme.vars || theme).palette.primary[300]
464
- })))
500
+ }),
501
+ ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
502
+ color: (theme.vars || theme).palette.text.primary,
503
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
504
+ borderColor: (theme.vars || theme).palette.primaryDark[100],
505
+ boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
506
+ '&:hover': {
507
+ backgroundColor: (theme.vars || theme).palette.grey[50]
508
+ },
509
+ ...theme.applyDarkStyles({
510
+ color: (theme.vars || theme).palette.primaryDark[100],
511
+ borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
512
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
513
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
514
+ '&:hover': {
515
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700],
516
+ borderColor: (theme.vars || theme).palette.primaryDark[600]
517
+ }
518
+ })
519
+ }),
520
+ ...(ownerState.variant === 'outlined' && ownerState.color === 'primary' && {
521
+ color: (theme.vars || theme).palette.primary[600],
522
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.2),
523
+ borderColor: (theme.vars || theme).palette.primary[100],
524
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
525
+ '&:hover': {
526
+ backgroundColor: (theme.vars || theme).palette.primary[50],
527
+ borderColor: (theme.vars || theme).palette.primary[200]
528
+ },
529
+ ...theme.applyDarkStyles({
530
+ color: (theme.vars || theme).palette.primary[200],
531
+ borderColor: (0, _styles.alpha)(theme.palette.primary[900], 0.7),
532
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
533
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
534
+ '&:hover': {
535
+ backgroundColor: (theme.vars || theme).palette.primary[900],
536
+ borderColor: (theme.vars || theme).palette.primary[700]
537
+ }
538
+ })
539
+ }),
540
+ ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && {
541
+ color: '#fff',
542
+ textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
543
+ backgroundColor: (theme.vars || theme).palette.primary[500],
544
+ backgroundImage: `linear-gradient(180deg, ${(0, _styles.alpha)(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
545
+ boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
546
+ '&:hover': {
547
+ backgroundColor: (theme.vars || theme).palette.primary[700]
548
+ },
549
+ '&:active': {
550
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700]
551
+ }
552
+ }),
553
+ ...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
554
+ color: (theme.vars || theme).palette.text.secondary,
555
+ '&:hover': {
556
+ backgroundColor: (theme.vars || theme).palette.grey[50]
557
+ },
558
+ '&:active': {
559
+ backgroundColor: (theme.vars || theme).palette.grey[200]
560
+ },
561
+ ...theme.applyDarkStyles({
562
+ '&:hover': {
563
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
564
+ },
565
+ '&:active': {
566
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700]
567
+ }
568
+ })
569
+ }),
570
+ ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
571
+ color: (theme.vars || theme).palette.primary[600],
572
+ ...theme.applyDarkStyles({
573
+ color: (theme.vars || theme).palette.primary[300]
574
+ })
575
+ })
576
+ })
465
577
  },
466
578
  variants: [{
467
579
  // @ts-ignore internal repo module augmentation issue
@@ -579,23 +691,39 @@ function getThemedComponents() {
579
691
  },
580
692
  style: ({
581
693
  theme
582
- }) => (0, _extends2.default)({
694
+ }) => ({
583
695
  marginBottom: 1,
584
696
  fontSize: theme.typography.pxToRem(14),
585
697
  fontWeight: theme.typography.fontWeightBold,
586
698
  color: (theme.vars || theme).palette.primary[600],
587
699
  '&:hover': {
588
700
  backgroundColor: (theme.vars || theme).palette.primary[50]
589
- }
590
- }, theme.applyDarkStyles({
591
- color: (theme.vars || theme).palette.primary[300],
592
- '&:hover': {
593
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.3)
594
- }
595
- }))
701
+ },
702
+ ...theme.applyDarkStyles({
703
+ color: (theme.vars || theme).palette.primary[300],
704
+ '&:hover': {
705
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.3)
706
+ }
707
+ })
708
+ })
596
709
  }]
597
710
  },
598
711
  MuiIconButton: {
712
+ styleOverrides: {
713
+ root: ({
714
+ theme,
715
+ ownerState
716
+ }) => ({
717
+ borderRadius: theme.shape.borderRadius,
718
+ ...(ownerState.size === 'small' && {
719
+ height: 32,
720
+ width: 32,
721
+ '& .MuiSvgIcon-root': {
722
+ fontSize: defaultTheme.typography.pxToRem(18)
723
+ }
724
+ })
725
+ })
726
+ },
599
727
  variants: [{
600
728
  props: {
601
729
  color: 'primary'
@@ -603,14 +731,11 @@ function getThemedComponents() {
603
731
  style: ({
604
732
  theme
605
733
  }) => [{
606
- height: 34,
607
- width: 34,
608
734
  border: `1px solid`,
609
- borderRadius: theme.shape.borderRadius,
610
735
  color: (theme.vars || theme).palette.primary.main,
611
736
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
612
737
  borderColor: (theme.vars || theme).palette.primaryDark[100],
613
- boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
738
+ boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
614
739
  '&:hover': {
615
740
  borderColor: (theme.vars || theme).palette.grey[300],
616
741
  background: (theme.vars || theme).palette.grey[50]
@@ -619,10 +744,10 @@ function getThemedComponents() {
619
744
  color: (theme.vars || theme).palette.primary[300],
620
745
  borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
621
746
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
622
- boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
747
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
623
748
  '&:hover': {
624
- borderColor: (theme.vars || theme).palette.primaryDark[500],
625
- background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)
749
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
750
+ background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
626
751
  }
627
752
  })]
628
753
  }, {
@@ -632,14 +757,12 @@ function getThemedComponents() {
632
757
  style: ({
633
758
  theme
634
759
  }) => [{
635
- height: 34,
636
- width: 34,
637
760
  color: (theme.vars || theme).palette.text.tertiary,
638
761
  borderRadius: theme.shape.borderRadius,
639
762
  border: `1px solid`,
640
763
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
641
764
  borderColor: (theme.vars || theme).palette.primaryDark[100],
642
- boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
765
+ boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.5)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
643
766
  '&:hover': {
644
767
  color: (theme.vars || theme).palette.primary.main,
645
768
  borderColor: (theme.vars || theme).palette.grey[300],
@@ -648,7 +771,7 @@ function getThemedComponents() {
648
771
  }, theme.applyDarkStyles({
649
772
  borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
650
773
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
651
- boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
774
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
652
775
  '&:hover': {
653
776
  color: (theme.vars || theme).palette.primary[400],
654
777
  borderColor: (theme.vars || theme).palette.primaryDark[500],
@@ -662,15 +785,26 @@ function getThemedComponents() {
662
785
  paper: ({
663
786
  theme
664
787
  }) => [{
788
+ padding: '6px',
665
789
  minWidth: 160,
666
790
  color: (theme.vars || theme).palette.text.secondary,
667
791
  backgroundImage: 'none',
668
792
  border: '1px solid',
669
793
  backgroundColor: (theme.vars || theme).palette.background.paper,
670
794
  borderColor: (theme.vars || theme).palette.grey[200],
795
+ '& .MuiMenu-list': {
796
+ display: 'flex',
797
+ flexDirection: 'column',
798
+ gap: '2px',
799
+ '& .MuiDivider-root': {
800
+ margin: '4px -8px 4px -8px'
801
+ }
802
+ },
671
803
  '& .MuiMenuItem-root': {
804
+ padding: '6px 12px',
805
+ borderRadius: '6px',
672
806
  fontSize: theme.typography.pxToRem(14),
673
- fontWeight: 500,
807
+ fontWeight: theme.typography.fontWeightMedium,
674
808
  '&:hover, &:focus': {
675
809
  backgroundColor: (theme.vars || theme).palette.grey[100],
676
810
  color: (theme.vars || theme).palette.text.primary
@@ -692,7 +826,7 @@ function getThemedComponents() {
692
826
  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
693
827
  },
694
828
  '&.Mui-selected': {
695
- color: (theme.vars || theme).palette.primary[300],
829
+ color: (theme.vars || theme).palette.primary[200],
696
830
  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.4)
697
831
  }
698
832
  }
@@ -703,22 +837,21 @@ function getThemedComponents() {
703
837
  styleOverrides: {
704
838
  paper: ({
705
839
  theme
706
- }) => (0, _extends2.default)({
707
- boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)'
708
- }, theme.applyDarkStyles({
709
- boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)'
710
- }))
840
+ }) => ({
841
+ boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
842
+ ...theme.applyDarkStyles({
843
+ boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)'
844
+ })
845
+ })
711
846
  }
712
847
  },
713
848
  MuiDivider: {
714
849
  styleOverrides: {
715
850
  root: ({
716
851
  theme
717
- }) => (0, _extends2.default)({
718
- borderColor: (theme.vars || theme).palette.grey[100]
719
- }, theme.applyDarkStyles({
720
- borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.3)
721
- }))
852
+ }) => ({
853
+ borderColor: (theme.vars || theme).palette.divider
854
+ })
722
855
  }
723
856
  },
724
857
  MuiLink: {
@@ -771,107 +904,131 @@ function getThemedComponents() {
771
904
  variant
772
905
  },
773
906
  theme
774
- }) => (0, _extends2.default)({
907
+ }) => ({
775
908
  fontWeight: theme.typography.fontWeightSemiBold,
776
- paddingBottom: 0.2
777
- }, variant === 'outlined' && color === 'default' && (0, _extends2.default)({
778
- backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
779
- color: (theme.vars || theme).palette.grey[900],
780
- borderColor: (theme.vars || theme).palette.grey[200],
781
- '&:hover': {
782
- backgroundColor: (theme.vars || theme).palette.grey[100],
783
- color: (theme.vars || theme).palette.grey[900]
784
- }
785
- }, theme.applyDarkStyles({
786
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4),
787
- color: (theme.vars || theme).palette.grey[300],
788
- borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
789
- '&:hover': {
790
- color: (theme.vars || theme).palette.grey[300],
791
- backgroundColor: (theme.vars || theme).palette.primaryDark[700]
792
- }
793
- })), variant === 'outlined' && color === 'info' && (0, _extends2.default)({
794
- backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
795
- color: (theme.vars || theme).palette.grey[900],
796
- borderColor: (theme.vars || theme).palette.grey[200]
797
- }, theme.applyDarkStyles({
798
- color: (theme.vars || theme).palette.grey[300],
799
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5),
800
- borderColor: (theme.vars || theme).palette.primaryDark[600]
801
- })), variant === 'outlined' && color === 'primary' && (0, _extends2.default)({
802
- borderColor: (theme.vars || theme).palette.primary[100],
803
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.2)
804
- }, theme.applyDarkStyles({
805
- color: (theme.vars || theme).palette.primary[300],
806
- borderColor: (0, _styles.alpha)(theme.palette.primary[500], 0.2),
807
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[700], 0.2)
808
- })), variant === 'outlined' && color === 'success' && (0, _extends2.default)({
809
- borderColor: (theme.vars || theme).palette.success[100],
810
- backgroundColor: (theme.vars || theme).palette.success[50],
811
- color: (theme.vars || theme).palette.success[900]
812
- }, theme.applyDarkStyles({
813
- color: (theme.vars || theme).palette.success[300],
814
- borderColor: (0, _styles.alpha)(theme.palette.success[300], 0.2),
815
- background: (0, _styles.alpha)(theme.palette.success[800], 0.2)
816
- })), variant === 'filled' && (0, _extends2.default)({}, color === 'default' && (0, _extends2.default)({
817
- border: '1px solid transparent',
818
- color: (theme.vars || theme).palette.primary[700],
819
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.5),
820
- '&:hover': {
821
- backgroundColor: (theme.vars || theme).palette.primary[100]
822
- }
823
- }, theme.applyDarkStyles({
824
- color: '#fff',
825
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.8),
826
- '&:hover': {
827
- backgroundColor: (theme.vars || theme).palette.primaryDark[600]
828
- }
829
- })), color === 'primary' && (0, _extends2.default)({
830
- color: (theme.vars || theme).palette.primary[600],
831
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.4),
832
- '&:hover': {
833
- backgroundColor: (theme.vars || theme).palette.primary[100]
834
- },
835
- '& .MuiChip-deleteIcon': {
836
- color: (theme.vars || theme).palette.primary[600],
909
+ paddingBottom: 0.2,
910
+ ...(variant === 'outlined' && color === 'default' && {
911
+ backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
912
+ color: (theme.vars || theme).palette.grey[900],
913
+ borderColor: (theme.vars || theme).palette.grey[200],
837
914
  '&:hover': {
838
- color: (theme.vars || theme).palette.primary[700]
839
- }
840
- },
841
- '&.Mui-focusVisible': {
842
- backgroundColor: (theme.vars || theme).palette.primary[200]
843
- }
844
- }, theme.applyDarkStyles({
845
- color: (theme.vars || theme).palette.primary[100],
846
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.5),
847
- '&:hover': {
848
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5)
849
- },
850
- '& .MuiChip-deleteIcon': {
851
- color: (theme.vars || theme).palette.primary[100],
852
- '&:hover': {
853
- color: (theme.vars || theme).palette.primary[50]
854
- }
855
- }
856
- }))), variant === 'light' && (0, _extends2.default)({}, color === 'default' && (0, _extends2.default)({
857
- color: (theme.vars || theme).palette.primary[700],
858
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3)
859
- }, theme.applyDarkStyles({
860
- color: (theme.vars || theme).palette.primary[200],
861
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
862
- })), color === 'warning' && (0, _extends2.default)({
863
- color: (theme.vars || theme).palette.warning[900],
864
- backgroundColor: (theme.vars || theme).palette.warning[100]
865
- }, theme.applyDarkStyles({
866
- color: '#fff',
867
- backgroundColor: (theme.vars || theme).palette.warning[900]
868
- })), color === 'success' && (0, _extends2.default)({
869
- color: (theme.vars || theme).palette.success[900],
870
- backgroundColor: (theme.vars || theme).palette.success[100]
871
- }, theme.applyDarkStyles({
872
- color: '#fff',
873
- backgroundColor: (theme.vars || theme).palette.success[900]
874
- }))))
915
+ backgroundColor: (theme.vars || theme).palette.grey[100],
916
+ color: (theme.vars || theme).palette.grey[900]
917
+ },
918
+ ...theme.applyDarkStyles({
919
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4),
920
+ color: (theme.vars || theme).palette.grey[300],
921
+ borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
922
+ '&:hover': {
923
+ color: (theme.vars || theme).palette.grey[300],
924
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700]
925
+ }
926
+ })
927
+ }),
928
+ ...(variant === 'outlined' && color === 'info' && {
929
+ backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
930
+ color: (theme.vars || theme).palette.grey[900],
931
+ borderColor: (theme.vars || theme).palette.grey[200],
932
+ ...theme.applyDarkStyles({
933
+ color: (theme.vars || theme).palette.grey[300],
934
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5),
935
+ borderColor: (theme.vars || theme).palette.primaryDark[600]
936
+ })
937
+ }),
938
+ ...(variant === 'outlined' && color === 'primary' && {
939
+ borderColor: (theme.vars || theme).palette.primary[100],
940
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.2),
941
+ ...theme.applyDarkStyles({
942
+ color: (theme.vars || theme).palette.primary[300],
943
+ borderColor: (0, _styles.alpha)(theme.palette.primary[500], 0.2),
944
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[700], 0.2)
945
+ })
946
+ }),
947
+ ...(variant === 'outlined' && color === 'success' && {
948
+ borderColor: (theme.vars || theme).palette.success[100],
949
+ backgroundColor: (theme.vars || theme).palette.success[50],
950
+ color: (theme.vars || theme).palette.success[900],
951
+ ...theme.applyDarkStyles({
952
+ color: (theme.vars || theme).palette.success[300],
953
+ borderColor: (0, _styles.alpha)(theme.palette.success[300], 0.2),
954
+ background: (0, _styles.alpha)(theme.palette.success[800], 0.2)
955
+ })
956
+ }),
957
+ ...(variant === 'filled' && {
958
+ ...(color === 'default' && {
959
+ border: '1px solid transparent',
960
+ color: (theme.vars || theme).palette.primary[700],
961
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.5),
962
+ '&:hover': {
963
+ backgroundColor: (theme.vars || theme).palette.primary[100]
964
+ },
965
+ ...theme.applyDarkStyles({
966
+ color: '#fff',
967
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.8),
968
+ '&:hover': {
969
+ backgroundColor: (theme.vars || theme).palette.primaryDark[600]
970
+ }
971
+ })
972
+ }),
973
+ ...(color === 'primary' && {
974
+ color: (theme.vars || theme).palette.primary[600],
975
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.4),
976
+ '&:hover': {
977
+ backgroundColor: (theme.vars || theme).palette.primary[100]
978
+ },
979
+ '& .MuiChip-deleteIcon': {
980
+ color: (theme.vars || theme).palette.primary[600],
981
+ '&:hover': {
982
+ color: (theme.vars || theme).palette.primary[700]
983
+ }
984
+ },
985
+ '&.Mui-focusVisible': {
986
+ backgroundColor: (theme.vars || theme).palette.primary[200]
987
+ },
988
+ ...theme.applyDarkStyles({
989
+ color: (theme.vars || theme).palette.primary[100],
990
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.5),
991
+ '&:hover': {
992
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5)
993
+ },
994
+ '& .MuiChip-deleteIcon': {
995
+ color: (theme.vars || theme).palette.primary[100],
996
+ '&:hover': {
997
+ color: (theme.vars || theme).palette.primary[50]
998
+ }
999
+ }
1000
+ })
1001
+ })
1002
+ }),
1003
+ // for labelling product in the search
1004
+ // @ts-ignore internal repo module augmentation issue
1005
+ ...(variant === 'light' && {
1006
+ ...(color === 'default' && {
1007
+ color: (theme.vars || theme).palette.primary[700],
1008
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3),
1009
+ ...theme.applyDarkStyles({
1010
+ color: (theme.vars || theme).palette.primary[200],
1011
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
1012
+ })
1013
+ }),
1014
+ ...(color === 'warning' && {
1015
+ color: (theme.vars || theme).palette.warning[900],
1016
+ backgroundColor: (theme.vars || theme).palette.warning[100],
1017
+ ...theme.applyDarkStyles({
1018
+ color: '#fff',
1019
+ backgroundColor: (theme.vars || theme).palette.warning[900]
1020
+ })
1021
+ }),
1022
+ ...(color === 'success' && {
1023
+ color: (theme.vars || theme).palette.success[900],
1024
+ backgroundColor: (theme.vars || theme).palette.success[100],
1025
+ ...theme.applyDarkStyles({
1026
+ color: '#fff',
1027
+ backgroundColor: (theme.vars || theme).palette.success[900]
1028
+ })
1029
+ })
1030
+ })
1031
+ })
875
1032
  }
876
1033
  },
877
1034
  MuiList: {
@@ -941,7 +1098,7 @@ function getThemedComponents() {
941
1098
  root: ({
942
1099
  theme,
943
1100
  ownerState
944
- }) => [(0, _extends2.default)({
1101
+ }) => [{
945
1102
  backgroundImage: 'none',
946
1103
  backgroundColor: '#fff',
947
1104
  '&[href]': {
@@ -949,47 +1106,49 @@ function getThemedComponents() {
949
1106
  },
950
1107
  transition: theme.transitions.create(['border', 'box-shadow'], {
951
1108
  duration: theme.transitions.duration.shortest
952
- })
953
- }, ownerState.variant === 'outlined' && {
954
- display: 'block',
955
- borderColor: (theme.vars || theme).palette.grey[100],
956
- '&[href]': {
957
- textDecorationLine: 'none',
958
- boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
959
- '&:hover': {
960
- borderColor: (theme.vars || theme).palette.primary[200],
961
- boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`
1109
+ }),
1110
+ ...(ownerState.variant === 'outlined' && {
1111
+ display: 'block',
1112
+ borderColor: (theme.vars || theme).palette.grey[100],
1113
+ '&[href]': {
1114
+ textDecorationLine: 'none',
1115
+ boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
1116
+ '&:hover': {
1117
+ borderColor: (theme.vars || theme).palette.primary[200],
1118
+ boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`
1119
+ },
1120
+ '&:focus-visible': {
1121
+ outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
1122
+ outlineOffset: '2px'
1123
+ }
962
1124
  },
963
- '&:focus-visible': {
964
- outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
965
- outlineOffset: '2px'
1125
+ ':is(a&), :is(button&)': {
1126
+ '&:hover': {
1127
+ borderColor: (theme.vars || theme).palette.primary[200],
1128
+ boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`
1129
+ }
966
1130
  }
967
- },
968
- ':is(a&), :is(button&)': {
969
- '&:hover': {
970
- borderColor: (theme.vars || theme).palette.primary[200],
971
- boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`
972
- }
973
- }
974
- }), theme.applyDarkStyles((0, _extends2.default)({
975
- backgroundColor: (theme.vars || theme).palette.primaryDark[900]
976
- }, ownerState.variant === 'outlined' && {
977
- borderColor: (theme.vars || theme).palette.primaryDark[700],
978
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.6),
979
- '&[href]': {
980
- textDecorationLine: 'none',
981
- boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
982
- '&:hover': {
983
- borderColor: (0, _styles.alpha)(theme.palette.primary[600], 0.5),
984
- boxShadow: `0px 2px 8px ${(0, _styles.alpha)(theme.palette.primary[900], 0.6)}`
985
- }
986
- },
987
- ':is(a&), :is(button&)': {
988
- '&:hover': {
989
- boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`
1131
+ })
1132
+ }, theme.applyDarkStyles({
1133
+ backgroundColor: (theme.vars || theme).palette.primaryDark[900],
1134
+ ...(ownerState.variant === 'outlined' && {
1135
+ borderColor: (theme.vars || theme).palette.primaryDark[700],
1136
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.6),
1137
+ '&[href]': {
1138
+ textDecorationLine: 'none',
1139
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
1140
+ '&:hover': {
1141
+ borderColor: (0, _styles.alpha)(theme.palette.primary[600], 0.5),
1142
+ boxShadow: `0px 2px 8px ${(0, _styles.alpha)(theme.palette.primary[900], 0.6)}`
1143
+ }
1144
+ },
1145
+ ':is(a&), :is(button&)': {
1146
+ '&:hover': {
1147
+ boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`
1148
+ }
990
1149
  }
991
- }
992
- }))]
1150
+ })
1151
+ })]
993
1152
  }
994
1153
  },
995
1154
  MuiTableCell: {
@@ -997,14 +1156,16 @@ function getThemedComponents() {
997
1156
  root: ({
998
1157
  theme,
999
1158
  ownerState
1000
- }) => (0, _extends2.default)({
1159
+ }) => ({
1001
1160
  padding: theme.spacing(1, 2),
1002
- borderColor: (theme.vars || theme).palette.divider
1003
- }, ownerState.variant === 'head' && {
1004
- color: (theme.vars || theme).palette.text.primary,
1005
- fontWeight: 700
1006
- }, ownerState.variant === 'body' && {
1007
- color: (theme.vars || theme).palette.text.secondary
1161
+ borderColor: (theme.vars || theme).palette.divider,
1162
+ ...(ownerState.variant === 'head' && {
1163
+ color: (theme.vars || theme).palette.text.primary,
1164
+ fontWeight: 700
1165
+ }),
1166
+ ...(ownerState.variant === 'body' && {
1167
+ color: (theme.vars || theme).palette.text.secondary
1168
+ })
1008
1169
  })
1009
1170
  }
1010
1171
  },
@@ -1012,11 +1173,12 @@ function getThemedComponents() {
1012
1173
  styleOverrides: {
1013
1174
  root: ({
1014
1175
  theme
1015
- }) => (0, _extends2.default)({
1016
- backgroundColor: '#fff'
1017
- }, theme.applyDarkStyles({
1018
- backgroundColor: (theme.vars || theme).palette.primaryDark[900]
1019
- }))
1176
+ }) => ({
1177
+ backgroundColor: '#fff',
1178
+ ...theme.applyDarkStyles({
1179
+ backgroundColor: (theme.vars || theme).palette.primaryDark[900]
1180
+ })
1181
+ })
1020
1182
  }
1021
1183
  },
1022
1184
  MuiToggleButton: {
@@ -1024,14 +1186,14 @@ function getThemedComponents() {
1024
1186
  root: ({
1025
1187
  theme,
1026
1188
  ownerState
1027
- }) => [(0, _extends2.default)({
1189
+ }) => [{
1028
1190
  textTransform: 'none',
1029
1191
  fontWeight: theme.typography.fontWeightMedium,
1030
1192
  color: theme.palette.text.secondary,
1031
- borderColor: theme.palette.grey[200]
1032
- }, ownerState.size === 'small' && {
1033
- padding: '0.375rem 0.75rem'
1034
- }, {
1193
+ borderColor: theme.palette.grey[200],
1194
+ ...(ownerState.size === 'small' && {
1195
+ padding: '0.375rem 0.75rem'
1196
+ }),
1035
1197
  '&.Mui-selected': {
1036
1198
  color: (theme.vars || theme).palette.primary[700],
1037
1199
  borderColor: `${(theme.vars || theme).palette.primary[200]} !important`,
@@ -1040,7 +1202,7 @@ function getThemedComponents() {
1040
1202
  backgroundColor: (theme.vars || theme).palette.primary[100]
1041
1203
  }
1042
1204
  }
1043
- }), theme.applyDarkStyles({
1205
+ }, theme.applyDarkStyles({
1044
1206
  borderColor: theme.palette.primaryDark[700],
1045
1207
  '&:hover': {
1046
1208
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)
@@ -1089,13 +1251,14 @@ function getThemedComponents() {
1089
1251
  },
1090
1252
  track: ({
1091
1253
  theme
1092
- }) => (0, _extends2.default)({
1254
+ }) => ({
1093
1255
  opacity: 1,
1094
1256
  borderRadius: 32,
1095
- backgroundColor: theme.palette.grey[400]
1096
- }, theme.applyDarkStyles({
1097
- backgroundColor: theme.palette.grey[800]
1098
- })),
1257
+ backgroundColor: theme.palette.grey[400],
1258
+ ...theme.applyDarkStyles({
1259
+ backgroundColor: theme.palette.grey[800]
1260
+ })
1261
+ }),
1099
1262
  thumb: {
1100
1263
  flexShrink: 0,
1101
1264
  width: '14px',
@@ -1151,5 +1314,11 @@ function getThemedComponents() {
1151
1314
  }
1152
1315
  };
1153
1316
  }
1154
- const brandingDarkTheme = exports.brandingDarkTheme = (0, _styles.createTheme)((0, _extends2.default)({}, getDesignTokens('dark'), getThemedComponents()));
1155
- const brandingLightTheme = exports.brandingLightTheme = (0, _styles.createTheme)((0, _extends2.default)({}, getDesignTokens('light'), getThemedComponents()));
1317
+ const brandingDarkTheme = exports.brandingDarkTheme = (0, _styles.createTheme)({
1318
+ ...getDesignTokens('dark'),
1319
+ ...getThemedComponents()
1320
+ });
1321
+ const brandingLightTheme = exports.brandingLightTheme = (0, _styles.createTheme)({
1322
+ ...getDesignTokens('light'),
1323
+ ...getThemedComponents()
1324
+ });