@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/branding/brandingTheme.js CHANGED
@@ -318,29 +318,95 @@ export function getThemedComponents() {
318
318
  MuiAlert: {
319
319
  styleOverrides: {
320
320
  root: {
321
- padding: '12px 16px'
321
+ padding: '16px',
322
+ gap: '12px',
323
+ fontSize: '1rem',
324
+ '& * ul': {
325
+ paddingLeft: '24px !important',
326
+ marginBottom: '0 !important'
327
+ },
328
+ // !important is used here to override the anchor tag color coming from MarkdownElement
329
+ '& .MuiAlert-icon': {
330
+ margin: 0,
331
+ marginTop: '2px',
332
+ padding: 0
333
+ },
334
+ '& .MuiAlert-message': {
335
+ padding: 0
336
+ }
337
+ },
338
+ icon: {
339
+ paddingTop: 10,
340
+ paddingBottom: 0
322
341
  },
323
342
  standardWarning: ({
324
343
  theme
325
- }) => [{
344
+ }) => [
345
+ // same styles from the MarkdownElement callout
346
+ {
326
347
  backgroundColor: alpha(theme.palette.warning[50], 0.5),
327
348
  color: (theme.vars || theme).palette.grey[900],
328
349
  border: '1px solid',
329
- borderColor: alpha(theme.palette.warning[600], 0.3),
350
+ borderColor: alpha(theme.palette.warning[700], 0.15),
330
351
  '& .MuiAlert-icon': {
331
- color: (theme.vars || theme).palette.warning[700]
352
+ color: (theme.vars || theme).palette.warning[600]
353
+ },
354
+ '& * a': {
355
+ // !important is used here to override the anchor tag color coming from MarkdownElement
356
+ color: `${(theme.vars || theme).palette.warning[900]} !important`,
357
+ textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
358
+ '&:hover': {
359
+ textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
360
+ }
332
361
  }
333
362
  }, theme.applyDarkStyles({
334
- backgroundColor: alpha(theme.palette.warning[700], 0.2),
363
+ backgroundColor: alpha(theme.palette.warning[700], 0.12),
335
364
  color: (theme.vars || theme).palette.warning[50],
336
365
  '& .MuiAlert-icon': {
337
- color: (theme.vars || theme).palette.warning[200]
366
+ color: (theme.vars || theme).palette.warning[400]
367
+ },
368
+ '& * a': {
369
+ color: `${(theme.vars || theme).palette.warning[100]} !important`,
370
+ textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
371
+ '&:hover': {
372
+ textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
373
+ }
338
374
  }
339
375
  })],
340
- icon: {
341
- paddingTop: 12,
342
- paddingBottom: 0
343
- }
376
+ standardSuccess: ({
377
+ theme
378
+ }) => [
379
+ // same styles from the MarkdownElement callout
380
+ {
381
+ backgroundColor: alpha(theme.palette.success[50], 0.5),
382
+ color: (theme.vars || theme).palette.success[900],
383
+ border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
384
+ '& .MuiAlert-icon': {
385
+ color: (theme.vars || theme).palette.success[600]
386
+ },
387
+ '& * a': {
388
+ // !important is used here to override the anchor tag color coming from MarkdownElement
389
+ color: `${(theme.vars || theme).palette.success[900]} !important`,
390
+ textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
391
+ '&:hover': {
392
+ textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
393
+ }
394
+ }
395
+ }, theme.applyDarkStyles({
396
+ backgroundColor: alpha(theme.palette.success[700], 0.12),
397
+ color: (theme.vars || theme).palette.success[50],
398
+ borderColor: alpha(theme.palette.success[400], 0.1),
399
+ '& .MuiAlert-icon': {
400
+ color: (theme.vars || theme).palette.success[500]
401
+ },
402
+ '& * a': {
403
+ color: `${(theme.vars || theme).palette.success[100]} !important`,
404
+ textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
405
+ '&:hover': {
406
+ textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
407
+ }
408
+ }
409
+ })]
344
410
  }
345
411
  },
346
412
  MuiButtonBase: {
@@ -374,7 +440,7 @@ export function getThemedComponents() {
374
440
  ...theme.typography.body1,
375
441
  lineHeight: 21 / 16,
376
442
  padding: theme.spacing('8px', '10px', '10px', '12px'),
377
- fontWeight: theme.typography.fontWeightSemiBold,
443
+ fontWeight: theme.typography.fontWeightMedium,
378
444
  borderRadius: 10,
379
445
  '& > span': {
380
446
  transition: '0.2s',
@@ -387,7 +453,7 @@ export function getThemedComponents() {
387
453
  ...(ownerState.size === 'medium' && {
388
454
  fontSize: defaultTheme.typography.pxToRem(15),
389
455
  padding: theme.spacing('8px', '12px', '8px', '14px'),
390
- fontWeight: theme.typography.fontWeightSemiBold,
456
+ fontWeight: theme.typography.fontWeightMedium,
391
457
  borderRadius: 8,
392
458
  '& > span': {
393
459
  transition: '0.2s',
@@ -398,10 +464,10 @@ export function getThemedComponents() {
398
464
  }
399
465
  }),
400
466
  ...(ownerState.size === 'small' && {
401
- padding: theme.spacing('6px', 1.5),
467
+ padding: '6px 8px',
402
468
  fontFamily: theme.typography.fontFamily,
403
469
  fontSize: defaultTheme.typography.pxToRem(13),
404
- fontWeight: theme.typography.fontWeightSemiBold,
470
+ fontWeight: theme.typography.fontWeightMedium,
405
471
  borderRadius: 8,
406
472
  '& .MuiButton-startIcon': {
407
473
  transition: '0.15s',
@@ -425,7 +491,7 @@ export function getThemedComponents() {
425
491
  color: (theme.vars || theme).palette.text.primary,
426
492
  backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
427
493
  borderColor: (theme.vars || theme).palette.primaryDark[100],
428
- boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
494
+ boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
429
495
  '&:hover': {
430
496
  backgroundColor: (theme.vars || theme).palette.grey[50]
431
497
  },
@@ -433,7 +499,7 @@ export function getThemedComponents() {
433
499
  color: (theme.vars || theme).palette.primaryDark[100],
434
500
  borderColor: alpha(theme.palette.primaryDark[600], 0.5),
435
501
  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
436
- boxShadow: `${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`,
502
+ boxShadow: `${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`,
437
503
  '&:hover': {
438
504
  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
439
505
  borderColor: (theme.vars || theme).palette.primaryDark[600]
@@ -473,7 +539,24 @@ export function getThemedComponents() {
473
539
  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
474
540
  }
475
541
  }),
476
- ...(ownerState.variant === 'text' && {
542
+ ...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
543
+ color: (theme.vars || theme).palette.text.secondary,
544
+ '&:hover': {
545
+ backgroundColor: (theme.vars || theme).palette.grey[50]
546
+ },
547
+ '&:active': {
548
+ backgroundColor: (theme.vars || theme).palette.grey[200]
549
+ },
550
+ ...theme.applyDarkStyles({
551
+ '&:hover': {
552
+ backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
553
+ },
554
+ '&:active': {
555
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700]
556
+ }
557
+ })
558
+ }),
559
+ ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
477
560
  color: (theme.vars || theme).palette.primary[600],
478
561
  ...theme.applyDarkStyles({
479
562
  color: (theme.vars || theme).palette.primary[300]
@@ -615,6 +698,30 @@ export function getThemedComponents() {
615
698
  }]
616
699
  },
617
700
  MuiIconButton: {
701
+ styleOverrides: {
702
+ root: ({
703
+ theme,
704
+ ownerState
705
+ }) => ({
706
+ borderRadius: theme.shape.borderRadius,
707
+ transition: 'all 100ms ease-in',
708
+ '&:hover': {
709
+ borderColor: (theme.vars || theme).palette.grey[300],
710
+ background: (theme.vars || theme).palette.grey[50],
711
+ ...theme.applyDarkStyles({
712
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
713
+ background: alpha(theme.palette.primaryDark[700], 0.8)
714
+ })
715
+ },
716
+ ...(ownerState.size === 'small' && {
717
+ height: 32,
718
+ width: 32,
719
+ '& .MuiSvgIcon-root': {
720
+ fontSize: defaultTheme.typography.pxToRem(18)
721
+ }
722
+ })
723
+ })
724
+ },
618
725
  variants: [{
619
726
  props: {
620
727
  color: 'primary'
@@ -622,14 +729,10 @@ export function getThemedComponents() {
622
729
  style: ({
623
730
  theme
624
731
  }) => [{
625
- height: 34,
626
- width: 34,
627
- border: `1px solid`,
628
- borderRadius: theme.shape.borderRadius,
629
732
  color: (theme.vars || theme).palette.primary.main,
630
733
  backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
631
- borderColor: (theme.vars || theme).palette.primaryDark[100],
632
- boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
734
+ border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
735
+ boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
633
736
  '&:hover': {
634
737
  borderColor: (theme.vars || theme).palette.grey[300],
635
738
  background: (theme.vars || theme).palette.grey[50]
@@ -638,10 +741,10 @@ export function getThemedComponents() {
638
741
  color: (theme.vars || theme).palette.primary[300],
639
742
  borderColor: alpha(theme.palette.primaryDark[600], 0.5),
640
743
  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
641
- boxShadow: `${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`,
744
+ boxShadow: `${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`,
642
745
  '&:hover': {
643
- borderColor: (theme.vars || theme).palette.primaryDark[500],
644
- background: alpha(theme.palette.primaryDark[700], 0.4)
746
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
747
+ background: alpha(theme.palette.primaryDark[700], 0.8)
645
748
  }
646
749
  })]
647
750
  }, {
@@ -651,27 +754,22 @@ export function getThemedComponents() {
651
754
  style: ({
652
755
  theme
653
756
  }) => [{
654
- height: 34,
655
- width: 34,
656
- color: (theme.vars || theme).palette.text.tertiary,
657
- borderRadius: theme.shape.borderRadius,
658
- border: `1px solid`,
757
+ color: (theme.vars || theme).palette.text.secondary,
659
758
  backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
660
- borderColor: (theme.vars || theme).palette.primaryDark[100],
661
- boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
759
+ border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
760
+ boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
662
761
  '&:hover': {
663
- color: (theme.vars || theme).palette.primary.main,
762
+ color: (theme.vars || theme).palette.text.primary,
664
763
  borderColor: (theme.vars || theme).palette.grey[300],
665
764
  background: (theme.vars || theme).palette.grey[50]
666
765
  }
667
766
  }, theme.applyDarkStyles({
668
767
  borderColor: alpha(theme.palette.primaryDark[600], 0.5),
669
768
  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
670
- boxShadow: `${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`,
769
+ boxShadow: `${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`,
671
770
  '&:hover': {
672
- color: (theme.vars || theme).palette.primary[400],
673
- borderColor: (theme.vars || theme).palette.primaryDark[500],
674
- background: alpha(theme.palette.primaryDark[700], 0.4)
771
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
772
+ background: alpha(theme.palette.primaryDark[700], 0.8)
675
773
  }
676
774
  })]
677
775
  }]
@@ -681,16 +779,27 @@ export function getThemedComponents() {
681
779
  paper: ({
682
780
  theme
683
781
  }) => [{
782
+ padding: '6px',
684
783
  minWidth: 160,
685
784
  color: (theme.vars || theme).palette.text.secondary,
686
785
  backgroundImage: 'none',
687
786
  border: '1px solid',
688
787
  backgroundColor: (theme.vars || theme).palette.background.paper,
689
788
  borderColor: (theme.vars || theme).palette.grey[200],
789
+ '& .MuiMenu-list': {
790
+ display: 'flex',
791
+ flexDirection: 'column',
792
+ gap: '2px',
793
+ '& .MuiDivider-root': {
794
+ margin: '4px -8px 4px -8px'
795
+ }
796
+ },
690
797
  '& .MuiMenuItem-root': {
798
+ padding: '6px 8px',
799
+ borderRadius: '6px',
691
800
  fontSize: theme.typography.pxToRem(14),
692
- fontWeight: 500,
693
- '&:hover, &:focus': {
801
+ fontWeight: theme.typography.fontWeightMedium,
802
+ '&:hover': {
694
803
  backgroundColor: (theme.vars || theme).palette.grey[100],
695
804
  color: (theme.vars || theme).palette.text.primary
696
805
  },
@@ -707,11 +816,11 @@ export function getThemedComponents() {
707
816
  backgroundColor: (theme.vars || theme).palette.primaryDark[900],
708
817
  borderColor: (theme.vars || theme).palette.primaryDark[700],
709
818
  '& .MuiMenuItem-root': {
710
- '&:hover, &:focus': {
819
+ '&:hover': {
711
820
  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
712
821
  },
713
822
  '&.Mui-selected': {
714
- color: (theme.vars || theme).palette.primary[300],
823
+ color: (theme.vars || theme).palette.primary[200],
715
824
  backgroundColor: alpha(theme.palette.primary[900], 0.4)
716
825
  }
717
826
  }
@@ -735,10 +844,7 @@ export function getThemedComponents() {
735
844
  root: ({
736
845
  theme
737
846
  }) => ({
738
- borderColor: (theme.vars || theme).palette.grey[100],
739
- ...theme.applyDarkStyles({
740
- borderColor: alpha(theme.palette.primaryDark[500], 0.3)
741
- })
847
+ borderColor: (theme.vars || theme).palette.divider
742
848
  })
743
849
  }
744
850
  },
@@ -1108,11 +1214,20 @@ export function getThemedComponents() {
1108
1214
  }
1109
1215
  },
1110
1216
  MuiTooltip: {
1217
+ defaultProps: {
1218
+ arrow: true
1219
+ },
1111
1220
  styleOverrides: {
1112
- tooltip: {
1221
+ tooltip: ({
1222
+ theme
1223
+ }) => ({
1224
+ padding: '6px 8px',
1113
1225
  borderRadius: 6,
1114
- padding: '6px 12px'
1115
- }
1226
+ backgroundColor: (theme.vars || theme).palette.grey[800],
1227
+ '& .MuiTooltip-arrow': {
1228
+ color: (theme.vars || theme).palette.grey[800]
1229
+ }
1230
+ })
1116
1231
  }
1117
1232
  },
1118
1233
  MuiSwitch: {
@@ -1123,7 +1238,7 @@ export function getThemedComponents() {
1123
1238
  padding: 0,
1124
1239
  '& .MuiSwitch-switchBase': {
1125
1240
  '&.Mui-checked': {
1126
- transform: 'translateX(11px)',
1241
+ transform: 'translateX(12px)',
1127
1242
  color: '#fff'
1128
1243
  }
1129
1244
  }
@@ -1154,6 +1269,25 @@ export function getThemedComponents() {
1154
1269
  }
1155
1270
  }
1156
1271
  },
1272
+ MuiSnackbar: {
1273
+ styleOverrides: {
1274
+ root: ({
1275
+ theme
1276
+ }) => ({
1277
+ '& .MuiSnackbarContent-root': {
1278
+ backgroundColor: '#FFF',
1279
+ color: (theme.vars || theme).palette.text.primary,
1280
+ fontWeight: theme.typography.fontWeightMedium,
1281
+ border: `1px solid ${(theme.vars || theme).palette.divider}`,
1282
+ boxShadow: `0 4px 16px ${alpha(theme.palette.grey[400], 0.2)}`,
1283
+ ...theme.applyDarkStyles({
1284
+ backgroundColor: (theme.vars || theme).palette.primaryDark[800],
1285
+ boxShadow: '0 4px 16px hsl(0, 100%, 1%)'
1286
+ })
1287
+ }
1288
+ })
1289
+ }
1290
+ },
1157
1291
  MuiPaginationItem: {
1158
1292
  styleOverrides: {
1159
1293
  root: ({
package/i18n/i18n.js CHANGED
@@ -60,6 +60,14 @@ export function useSetUserLanguage() {
60
60
  return React.useContext(UserLanguageContext).setUserLanguage;
61
61
  }
62
62
  const warnedOnce = {};
63
+ const warn = (userLanguage, key, ignoreWarning) => {
64
+ const fullKey = `${userLanguage}:${key}`;
65
+ // No warnings in CI env
66
+ if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
67
+ console.warn(`Missing translation for ${fullKey}`);
68
+ warnedOnce[fullKey] = true;
69
+ }
70
+ };
63
71
  export function useTranslate() {
64
72
  const userLanguage = useUserLanguage();
65
73
  const translations = React.useContext(TranslationsContext);
@@ -74,12 +82,7 @@ export function useTranslate() {
74
82
  }
75
83
  const translation = getPath(wordings, key);
76
84
  if (!translation) {
77
- const fullKey = `${userLanguage}:${key}`;
78
- // No warnings in CI env
79
- if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
80
- console.error(`Missing translation for ${fullKey}`);
81
- warnedOnce[fullKey] = true;
82
- }
85
+ warn(userLanguage, key, ignoreWarning);
83
86
  return getPath(translations.en, key);
84
87
  }
85
88
  return translation;
package/node/HighlightedCode/HighlightedCode.js CHANGED
@@ -38,12 +38,12 @@ const Pre = (0, _styles.styled)('pre')(({
38
38
  }));
39
39
  const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
40
40
  const {
41
+ code,
41
42
  copyButtonHidden = false,
42
43
  copyButtonProps,
43
- code,
44
44
  language,
45
45
  plainStyle,
46
- parentComponent: Component = plainStyle ? 'div' : _MarkdownElement.MarkdownElement,
46
+ parentComponent: Component = plainStyle ? React.Fragment : _MarkdownElement.MarkdownElement,
47
47
  preComponent: PreComponent = plainStyle ? Pre : 'pre',
48
48
  ...other
49
49
  } = props;
@@ -57,6 +57,9 @@ const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(
57
57
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
58
58
  className: "MuiCode-root",
59
59
  ...handlers,
60
+ style: {
61
+ height: '100%'
62
+ },
60
63
  children: [copyButtonHidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
61
64
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, {
62
65
  code: code,