@mui/docs 6.0.0-alpha.8 → 6.0.0-beta.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 (24) hide show
  1. package/CHANGELOG.md +407 -3
  2. package/HighlightedCode/HighlightedCode.d.ts +1 -1
  3. package/HighlightedCode/HighlightedCode.js +5 -2
  4. package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.d.ts +29 -0
  5. package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js +353 -0
  6. package/HighlightedCodeWithTabs/index.d.ts +2 -0
  7. package/HighlightedCodeWithTabs/index.js +2 -0
  8. package/HighlightedCodeWithTabs/package.json +6 -0
  9. package/Link/Link.js +0 -2
  10. package/MarkdownElement/MarkdownElement.js +129 -104
  11. package/branding/BrandingProvider.d.ts +1 -1
  12. package/branding/brandingTheme.js +184 -50
  13. package/i18n/i18n.js +9 -6
  14. package/node/HighlightedCode/HighlightedCode.js +5 -2
  15. package/node/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js +363 -0
  16. package/node/HighlightedCodeWithTabs/index.js +24 -0
  17. package/node/Link/Link.js +0 -2
  18. package/node/MarkdownElement/MarkdownElement.js +129 -104
  19. package/node/branding/brandingTheme.js +184 -50
  20. package/node/i18n/i18n.js +9 -6
  21. package/node/translations/translations.json +3 -2
  22. package/package.json +4 -3
  23. package/translations/translations.json +3 -2
  24. package/tsconfig.build.tsbuildinfo +1 -1
package/node/branding/brandingTheme.js CHANGED
@@ -329,29 +329,95 @@ function getThemedComponents() {
329
329
  MuiAlert: {
330
330
  styleOverrides: {
331
331
  root: {
332
- 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
333
352
  },
334
353
  standardWarning: ({
335
354
  theme
336
- }) => [{
355
+ }) => [
356
+ // same styles from the MarkdownElement callout
357
+ {
337
358
  backgroundColor: (0, _styles.alpha)(theme.palette.warning[50], 0.5),
338
359
  color: (theme.vars || theme).palette.grey[900],
339
360
  border: '1px solid',
340
- borderColor: (0, _styles.alpha)(theme.palette.warning[600], 0.3),
361
+ borderColor: (0, _styles.alpha)(theme.palette.warning[700], 0.15),
341
362
  '& .MuiAlert-icon': {
342
- 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
+ }
343
372
  }
344
373
  }, theme.applyDarkStyles({
345
- backgroundColor: (0, _styles.alpha)(theme.palette.warning[700], 0.2),
374
+ backgroundColor: (0, _styles.alpha)(theme.palette.warning[700], 0.12),
346
375
  color: (theme.vars || theme).palette.warning[50],
347
376
  '& .MuiAlert-icon': {
348
- 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
+ }
349
385
  }
350
386
  })],
351
- icon: {
352
- paddingTop: 12,
353
- paddingBottom: 0
354
- }
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
+ })]
355
421
  }
356
422
  },
357
423
  MuiButtonBase: {
@@ -385,7 +451,7 @@ function getThemedComponents() {
385
451
  ...theme.typography.body1,
386
452
  lineHeight: 21 / 16,
387
453
  padding: theme.spacing('8px', '10px', '10px', '12px'),
388
- fontWeight: theme.typography.fontWeightSemiBold,
454
+ fontWeight: theme.typography.fontWeightMedium,
389
455
  borderRadius: 10,
390
456
  '& > span': {
391
457
  transition: '0.2s',
@@ -398,7 +464,7 @@ function getThemedComponents() {
398
464
  ...(ownerState.size === 'medium' && {
399
465
  fontSize: defaultTheme.typography.pxToRem(15),
400
466
  padding: theme.spacing('8px', '12px', '8px', '14px'),
401
- fontWeight: theme.typography.fontWeightSemiBold,
467
+ fontWeight: theme.typography.fontWeightMedium,
402
468
  borderRadius: 8,
403
469
  '& > span': {
404
470
  transition: '0.2s',
@@ -409,10 +475,10 @@ function getThemedComponents() {
409
475
  }
410
476
  }),
411
477
  ...(ownerState.size === 'small' && {
412
- padding: theme.spacing('6px', 1.5),
478
+ padding: '6px 8px',
413
479
  fontFamily: theme.typography.fontFamily,
414
480
  fontSize: defaultTheme.typography.pxToRem(13),
415
- fontWeight: theme.typography.fontWeightSemiBold,
481
+ fontWeight: theme.typography.fontWeightMedium,
416
482
  borderRadius: 8,
417
483
  '& .MuiButton-startIcon': {
418
484
  transition: '0.15s',
@@ -436,7 +502,7 @@ function getThemedComponents() {
436
502
  color: (theme.vars || theme).palette.text.primary,
437
503
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
438
504
  borderColor: (theme.vars || theme).palette.primaryDark[100],
439
- 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`,
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`,
440
506
  '&:hover': {
441
507
  backgroundColor: (theme.vars || theme).palette.grey[50]
442
508
  },
@@ -444,7 +510,7 @@ function getThemedComponents() {
444
510
  color: (theme.vars || theme).palette.primaryDark[100],
445
511
  borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
446
512
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
447
- 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`,
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`,
448
514
  '&:hover': {
449
515
  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
450
516
  borderColor: (theme.vars || theme).palette.primaryDark[600]
@@ -484,7 +550,24 @@ function getThemedComponents() {
484
550
  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
485
551
  }
486
552
  }),
487
- ...(ownerState.variant === 'text' && {
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' && {
488
571
  color: (theme.vars || theme).palette.primary[600],
489
572
  ...theme.applyDarkStyles({
490
573
  color: (theme.vars || theme).palette.primary[300]
@@ -626,6 +709,30 @@ function getThemedComponents() {
626
709
  }]
627
710
  },
628
711
  MuiIconButton: {
712
+ styleOverrides: {
713
+ root: ({
714
+ theme,
715
+ ownerState
716
+ }) => ({
717
+ borderRadius: theme.shape.borderRadius,
718
+ transition: 'all 100ms ease-in',
719
+ '&:hover': {
720
+ borderColor: (theme.vars || theme).palette.grey[300],
721
+ background: (theme.vars || theme).palette.grey[50],
722
+ ...theme.applyDarkStyles({
723
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
724
+ background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
725
+ })
726
+ },
727
+ ...(ownerState.size === 'small' && {
728
+ height: 32,
729
+ width: 32,
730
+ '& .MuiSvgIcon-root': {
731
+ fontSize: defaultTheme.typography.pxToRem(18)
732
+ }
733
+ })
734
+ })
735
+ },
629
736
  variants: [{
630
737
  props: {
631
738
  color: 'primary'
@@ -633,14 +740,10 @@ function getThemedComponents() {
633
740
  style: ({
634
741
  theme
635
742
  }) => [{
636
- height: 34,
637
- width: 34,
638
- border: `1px solid`,
639
- borderRadius: theme.shape.borderRadius,
640
743
  color: (theme.vars || theme).palette.primary.main,
641
744
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
642
- borderColor: (theme.vars || theme).palette.primaryDark[100],
643
- 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`,
745
+ border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
746
+ 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`,
644
747
  '&:hover': {
645
748
  borderColor: (theme.vars || theme).palette.grey[300],
646
749
  background: (theme.vars || theme).palette.grey[50]
@@ -649,10 +752,10 @@ function getThemedComponents() {
649
752
  color: (theme.vars || theme).palette.primary[300],
650
753
  borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
651
754
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
652
- 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`,
755
+ 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`,
653
756
  '&:hover': {
654
- borderColor: (theme.vars || theme).palette.primaryDark[500],
655
- background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)
757
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
758
+ background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
656
759
  }
657
760
  })]
658
761
  }, {
@@ -662,27 +765,22 @@ function getThemedComponents() {
662
765
  style: ({
663
766
  theme
664
767
  }) => [{
665
- height: 34,
666
- width: 34,
667
- color: (theme.vars || theme).palette.text.tertiary,
668
- borderRadius: theme.shape.borderRadius,
669
- border: `1px solid`,
768
+ color: (theme.vars || theme).palette.text.secondary,
670
769
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
671
- borderColor: (theme.vars || theme).palette.primaryDark[100],
672
- 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`,
770
+ border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
771
+ 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`,
673
772
  '&:hover': {
674
- color: (theme.vars || theme).palette.primary.main,
773
+ color: (theme.vars || theme).palette.text.primary,
675
774
  borderColor: (theme.vars || theme).palette.grey[300],
676
775
  background: (theme.vars || theme).palette.grey[50]
677
776
  }
678
777
  }, theme.applyDarkStyles({
679
778
  borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
680
779
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
681
- 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`,
780
+ 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`,
682
781
  '&:hover': {
683
- color: (theme.vars || theme).palette.primary[400],
684
- borderColor: (theme.vars || theme).palette.primaryDark[500],
685
- background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)
782
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
783
+ background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
686
784
  }
687
785
  })]
688
786
  }]
@@ -692,16 +790,27 @@ function getThemedComponents() {
692
790
  paper: ({
693
791
  theme
694
792
  }) => [{
793
+ padding: '6px',
695
794
  minWidth: 160,
696
795
  color: (theme.vars || theme).palette.text.secondary,
697
796
  backgroundImage: 'none',
698
797
  border: '1px solid',
699
798
  backgroundColor: (theme.vars || theme).palette.background.paper,
700
799
  borderColor: (theme.vars || theme).palette.grey[200],
800
+ '& .MuiMenu-list': {
801
+ display: 'flex',
802
+ flexDirection: 'column',
803
+ gap: '2px',
804
+ '& .MuiDivider-root': {
805
+ margin: '4px -8px 4px -8px'
806
+ }
807
+ },
701
808
  '& .MuiMenuItem-root': {
809
+ padding: '6px 8px',
810
+ borderRadius: '6px',
702
811
  fontSize: theme.typography.pxToRem(14),
703
- fontWeight: 500,
704
- '&:hover, &:focus': {
812
+ fontWeight: theme.typography.fontWeightMedium,
813
+ '&:hover': {
705
814
  backgroundColor: (theme.vars || theme).palette.grey[100],
706
815
  color: (theme.vars || theme).palette.text.primary
707
816
  },
@@ -718,11 +827,11 @@ function getThemedComponents() {
718
827
  backgroundColor: (theme.vars || theme).palette.primaryDark[900],
719
828
  borderColor: (theme.vars || theme).palette.primaryDark[700],
720
829
  '& .MuiMenuItem-root': {
721
- '&:hover, &:focus': {
830
+ '&:hover': {
722
831
  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
723
832
  },
724
833
  '&.Mui-selected': {
725
- color: (theme.vars || theme).palette.primary[300],
834
+ color: (theme.vars || theme).palette.primary[200],
726
835
  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.4)
727
836
  }
728
837
  }
@@ -746,10 +855,7 @@ function getThemedComponents() {
746
855
  root: ({
747
856
  theme
748
857
  }) => ({
749
- borderColor: (theme.vars || theme).palette.grey[100],
750
- ...theme.applyDarkStyles({
751
- borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.3)
752
- })
858
+ borderColor: (theme.vars || theme).palette.divider
753
859
  })
754
860
  }
755
861
  },
@@ -1119,11 +1225,20 @@ function getThemedComponents() {
1119
1225
  }
1120
1226
  },
1121
1227
  MuiTooltip: {
1228
+ defaultProps: {
1229
+ arrow: true
1230
+ },
1122
1231
  styleOverrides: {
1123
- tooltip: {
1232
+ tooltip: ({
1233
+ theme
1234
+ }) => ({
1235
+ padding: '6px 8px',
1124
1236
  borderRadius: 6,
1125
- padding: '6px 12px'
1126
- }
1237
+ backgroundColor: (theme.vars || theme).palette.grey[800],
1238
+ '& .MuiTooltip-arrow': {
1239
+ color: (theme.vars || theme).palette.grey[800]
1240
+ }
1241
+ })
1127
1242
  }
1128
1243
  },
1129
1244
  MuiSwitch: {
@@ -1134,7 +1249,7 @@ function getThemedComponents() {
1134
1249
  padding: 0,
1135
1250
  '& .MuiSwitch-switchBase': {
1136
1251
  '&.Mui-checked': {
1137
- transform: 'translateX(11px)',
1252
+ transform: 'translateX(12px)',
1138
1253
  color: '#fff'
1139
1254
  }
1140
1255
  }
@@ -1165,6 +1280,25 @@ function getThemedComponents() {
1165
1280
  }
1166
1281
  }
1167
1282
  },
1283
+ MuiSnackbar: {
1284
+ styleOverrides: {
1285
+ root: ({
1286
+ theme
1287
+ }) => ({
1288
+ '& .MuiSnackbarContent-root': {
1289
+ backgroundColor: '#FFF',
1290
+ color: (theme.vars || theme).palette.text.primary,
1291
+ fontWeight: theme.typography.fontWeightMedium,
1292
+ border: `1px solid ${(theme.vars || theme).palette.divider}`,
1293
+ boxShadow: `0 4px 16px ${(0, _styles.alpha)(theme.palette.grey[400], 0.2)}`,
1294
+ ...theme.applyDarkStyles({
1295
+ backgroundColor: (theme.vars || theme).palette.primaryDark[800],
1296
+ boxShadow: '0 4px 16px hsl(0, 100%, 1%)'
1297
+ })
1298
+ }
1299
+ })
1300
+ }
1301
+ },
1168
1302
  MuiPaginationItem: {
1169
1303
  styleOverrides: {
1170
1304
  root: ({
package/node/i18n/i18n.js CHANGED
@@ -73,6 +73,14 @@ function useSetUserLanguage() {
73
73
  return React.useContext(UserLanguageContext).setUserLanguage;
74
74
  }
75
75
  const warnedOnce = {};
76
+ const warn = (userLanguage, key, ignoreWarning) => {
77
+ const fullKey = `${userLanguage}:${key}`;
78
+ // No warnings in CI env
79
+ if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
80
+ console.warn(`Missing translation for ${fullKey}`);
81
+ warnedOnce[fullKey] = true;
82
+ }
83
+ };
76
84
  function useTranslate() {
77
85
  const userLanguage = useUserLanguage();
78
86
  const translations = React.useContext(TranslationsContext);
@@ -87,12 +95,7 @@ function useTranslate() {
87
95
  }
88
96
  const translation = getPath(wordings, key);
89
97
  if (!translation) {
90
- const fullKey = `${userLanguage}:${key}`;
91
- // No warnings in CI env
92
- if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
93
- console.error(`Missing translation for ${fullKey}`);
94
- warnedOnce[fullKey] = true;
95
- }
98
+ warn(userLanguage, key, ignoreWarning);
96
99
  return getPath(translations.en, key);
97
100
  }
98
101
  return translation;
package/node/translations/translations.json CHANGED
@@ -15,6 +15,7 @@
15
15
  "defaultComponent": "Default component",
16
16
  "defaultValue": "Default value",
17
17
  "defaultHTMLTag": "Default HTML tag",
18
+ "defaultDeprecationMessage": "This API is deprecated.",
18
19
  "demos": "Demos",
19
20
  "deprecated": "Deprecated",
20
21
  "description": "Description",
@@ -93,12 +94,12 @@
93
94
  "copySource": "Copy the source",
94
95
  "copySourceLinkJS": "Copy link to JavaScript source",
95
96
  "copySourceLinkTS": "Copy link to TypeScript source",
96
- "dashboardDescr": "Contains a taskbar and a mini variant drawer. The chart is courtesy of Recharts.",
97
+ "dashboardDescr": "A collection of charts and complex components in a responsive dashboard layout.",
97
98
  "dashboardTitle": "Dashboard",
98
99
  "decreaseSpacing": "decrease spacing",
99
100
  "demoToolbarLabel": "demo source",
100
101
  "demoStylingSelectSystem": "MUI System",
101
- "demoStylingSelectTailwind": "Tailwind CSS",
102
+ "demoStylingSelectTailwind": "Tailwind CSS",
102
103
  "demoStylingSelectCSS": "Plain CSS",
103
104
  "diamondSponsors": "Diamond sponsors",
104
105
  "becomeADiamondSponsor": "Become a Diamond sponsor",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/docs",
3
- "version": "6.0.0-alpha.8",
3
+ "version": "6.0.0-beta.0",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "MUI Docs - Documentation building blocks.",
@@ -23,12 +23,12 @@
23
23
  },
24
24
  "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
25
25
  "dependencies": {
26
- "@babel/runtime": "^7.24.5",
26
+ "@babel/runtime": "^7.24.7",
27
27
  "clipboard-copy": "^4.0.1",
28
28
  "clsx": "^2.1.1",
29
29
  "nprogress": "^0.2.0",
30
30
  "prop-types": "^15.8.1",
31
- "@mui/internal-markdown": "^1.0.4"
31
+ "@mui/internal-markdown": "^1.0.8"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "@mui/base": "*",
@@ -36,6 +36,7 @@
36
36
  "@mui/material": "^5.0.0",
37
37
  "@mui/system": "^5.0.0",
38
38
  "@types/react": "^17.0.0 || ^18.0.0",
39
+ "chai": "^4.4.1",
39
40
  "next": "^13.5.1 || ^14",
40
41
  "react": "^17.0.0 || ^18.0.0"
41
42
  },
package/translations/translations.json CHANGED
@@ -15,6 +15,7 @@
15
15
  "defaultComponent": "Default component",
16
16
  "defaultValue": "Default value",
17
17
  "defaultHTMLTag": "Default HTML tag",
18
+ "defaultDeprecationMessage": "This API is deprecated.",
18
19
  "demos": "Demos",
19
20
  "deprecated": "Deprecated",
20
21
  "description": "Description",
@@ -93,12 +94,12 @@
93
94
  "copySource": "Copy the source",
94
95
  "copySourceLinkJS": "Copy link to JavaScript source",
95
96
  "copySourceLinkTS": "Copy link to TypeScript source",
96
- "dashboardDescr": "Contains a taskbar and a mini variant drawer. The chart is courtesy of Recharts.",
97
+ "dashboardDescr": "A collection of charts and complex components in a responsive dashboard layout.",
97
98
  "dashboardTitle": "Dashboard",
98
99
  "decreaseSpacing": "decrease spacing",
99
100
  "demoToolbarLabel": "demo source",
100
101
  "demoStylingSelectSystem": "MUI System",
101
- "demoStylingSelectTailwind": "Tailwind CSS",
102
+ "demoStylingSelectTailwind": "Tailwind CSS",
102
103
  "demoStylingSelectCSS": "Plain CSS",
103
104
  "diamondSponsors": "Diamond sponsors",
104
105
  "becomeADiamondSponsor": "Become a Diamond sponsor",