@mantine/code-highlight 7.0.0-alpha.2 → 7.0.0-alpha.4

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 (48) hide show
  1. package/cjs/CodeHighlight.js +1 -0
  2. package/cjs/CodeHighlight.js.map +1 -1
  3. package/cjs/CodeHighlight.module.css.js +1 -0
  4. package/cjs/CodeHighlight.module.css.js.map +1 -1
  5. package/cjs/CodeHighlight.theme.module.css.js +1 -0
  6. package/cjs/CodeHighlight.theme.module.css.js.map +1 -1
  7. package/cjs/CodeHighlightTabs.js +2 -1
  8. package/cjs/CodeHighlightTabs.js.map +1 -1
  9. package/cjs/CopyIcon.js +1 -0
  10. package/cjs/CopyIcon.js.map +1 -1
  11. package/cjs/ExpandIcon.js +1 -0
  12. package/cjs/ExpandIcon.js.map +1 -1
  13. package/cjs/FileIcon.js +1 -0
  14. package/cjs/FileIcon.js.map +1 -1
  15. package/cjs/InlineCodeHighlight.js +1 -0
  16. package/cjs/InlineCodeHighlight.js.map +1 -1
  17. package/cjs/index.css +11 -10
  18. package/cjs/index.js +1 -0
  19. package/cjs/index.js.map +1 -1
  20. package/cjs/use-highlight.js +1 -0
  21. package/cjs/use-highlight.js.map +1 -1
  22. package/esm/CodeHighlight.js +1 -0
  23. package/esm/CodeHighlight.js.map +1 -1
  24. package/esm/CodeHighlight.module.css.js +1 -0
  25. package/esm/CodeHighlight.module.css.js.map +1 -1
  26. package/esm/CodeHighlight.theme.module.css.js +1 -0
  27. package/esm/CodeHighlight.theme.module.css.js.map +1 -1
  28. package/esm/CodeHighlightTabs.js +3 -2
  29. package/esm/CodeHighlightTabs.js.map +1 -1
  30. package/esm/CopyIcon.js +1 -0
  31. package/esm/CopyIcon.js.map +1 -1
  32. package/esm/ExpandIcon.js +1 -0
  33. package/esm/ExpandIcon.js.map +1 -1
  34. package/esm/FileIcon.js +1 -0
  35. package/esm/FileIcon.js.map +1 -1
  36. package/esm/InlineCodeHighlight.js +1 -0
  37. package/esm/InlineCodeHighlight.js.map +1 -1
  38. package/esm/index.css +11 -10
  39. package/esm/index.js +1 -0
  40. package/esm/index.js.map +1 -1
  41. package/esm/use-highlight.js +1 -0
  42. package/esm/use-highlight.js.map +1 -1
  43. package/lib/CodeHighlightTabs.d.ts +1 -1
  44. package/package.json +3 -3
  45. package/src/CodeHighlight.module.css +1 -0
  46. package/src/CodeHighlightTabs.tsx +2 -2
  47. package/styles.css +11 -10
  48. package/tsconfig.build.tsbuildinfo +1 -1
package/esm/FileIcon.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import React from 'react';
2
3
 
3
4
  function FileIcon({ fileIcon, fileName, getFileIcon }) {
package/esm/FileIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileIcon.js","sources":["../src/FileIcon.tsx"],"sourcesContent":["import React from 'react';\n\ninterface FileIconProps {\n fileName: string | undefined;\n getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;\n fileIcon: React.ReactNode | undefined;\n}\n\nexport function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps) {\n if (fileIcon) {\n return <>{fileIcon}</>;\n }\n\n if (getFileIcon && fileName) {\n return <>{getFileIcon(fileName)}</>;\n }\n\n return null;\n}\n"],"names":[],"mappings":";;AACO,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE;AAC9D,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/E,GAAG;AACH,EAAE,IAAI,WAAW,IAAI,QAAQ,EAAE;AAC/B,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC5F,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd;;;;"}
1
+ {"version":3,"file":"FileIcon.js","sources":["../src/FileIcon.tsx"],"sourcesContent":["import React from 'react';\n\ninterface FileIconProps {\n fileName: string | undefined;\n getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;\n fileIcon: React.ReactNode | undefined;\n}\n\nexport function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps) {\n if (fileIcon) {\n return <>{fileIcon}</>;\n }\n\n if (getFileIcon && fileName) {\n return <>{getFileIcon(fileName)}</>;\n }\n\n return null;\n}\n"],"names":[],"mappings":";;;AACO,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE;AAC9D,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/E,GAAG;AACH,EAAE,IAAI,WAAW,IAAI,QAAQ,EAAE;AAC/B,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC5F,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd;;"}
package/esm/InlineCodeHighlight.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import React from 'react';
2
3
  import cx from 'clsx';
3
4
  import { factory, useProps, useStyles, Box } from '@mantine/core';
package/esm/InlineCodeHighlight.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineCodeHighlight.js","sources":["../src/InlineCodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n Factory,\n} from '@mantine/core';\nimport hljs from 'highlight.js';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };\n\nexport type InlineCodeHighlightStylesNames = 'code';\nexport type InlineCodeHighlightVariant = string;\n\nexport interface InlineCodeHighlightProps\n extends BoxProps,\n StylesApiProps<InlineCodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n props: InlineCodeHighlightProps;\n ref: HTMLElement;\n stylesNames: InlineCodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<InlineCodeHighlightProps> = {\n language: 'tsx',\n};\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {\n const props = useProps('InlineCodeHighlight', defaultProps, _props);\n const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;\n\n const getStyles = useStyles<InlineCodeHighlightFactory>({\n name: 'InlineCodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n rootSelector: 'code',\n });\n\n const highlighted = hljs.highlight(code.trim(), { language: language! }).value;\n\n return (\n <Box\n {...getStyles('code')}\n component=\"code\"\n ref={ref}\n {...others}\n dangerouslySetInnerHTML={{ __html: highlighted }}\n />\n );\n});\n\nInlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"InlineCodeHighlight.js","sources":["../src/InlineCodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n Factory,\n} from '@mantine/core';\nimport hljs from 'highlight.js';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };\n\nexport type InlineCodeHighlightStylesNames = 'code';\nexport type InlineCodeHighlightVariant = string;\n\nexport interface InlineCodeHighlightProps\n extends BoxProps,\n StylesApiProps<InlineCodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n props: InlineCodeHighlightProps;\n ref: HTMLElement;\n stylesNames: InlineCodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<InlineCodeHighlightProps> = {\n language: 'tsx',\n};\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {\n const props = useProps('InlineCodeHighlight', defaultProps, _props);\n const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;\n\n const getStyles = useStyles<InlineCodeHighlightFactory>({\n name: 'InlineCodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n rootSelector: 'code',\n });\n\n const highlighted = hljs.highlight(code.trim(), { language: language! }).value;\n\n return (\n <Box\n {...getStyles('code')}\n component=\"code\"\n ref={ref}\n {...others}\n dangerouslySetInnerHTML={{ __html: highlighted }}\n />\n );\n});\n\nInlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';\n"],"names":[],"mappings":"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"}
package/esm/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .mantine-XIBJZDt {
2
2
  display: inline-block;
3
- padding: 0.0625rem 0.1875rem;
4
- font-size: 0.8125rem;
3
+ padding: calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale));
4
+ font-size: calc(0.8125rem * var(--mantine-scale));
5
5
  border-radius: var(--mantine-radius-xs);
6
6
  line-height: var(--_code-line-height, var(--mantine-line-height));
7
7
  font-family: var(--mantine-font-family-monospace);
@@ -11,6 +11,7 @@
11
11
  display: block;
12
12
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
13
13
  margin: 0;
14
+ font-size: 16px; /* Required for Safari to be set in px */
14
15
  --_code-line-height: 1.7;
15
16
  }
16
17
 
@@ -22,8 +23,8 @@
22
23
 
23
24
  .mantine-059sM-t {
24
25
  display: flex;
25
- margin-top: 0.4375rem;
26
- margin-right: 0.4375rem;
26
+ margin-top: calc(0.4375rem * var(--mantine-scale));
27
+ margin-right: calc(0.4375rem * var(--mantine-scale));
27
28
  }
28
29
 
29
30
  .mantine-tB-P5PD,
@@ -57,8 +58,8 @@
57
58
 
58
59
  .mantine-tB-P5PD {
59
60
  position: absolute;
60
- top: 0.3125rem;
61
- right: 0.3125rem;
61
+ top: calc(0.3125rem * var(--mantine-scale));
62
+ right: calc(0.3125rem * var(--mantine-scale));
62
63
  z-index: 1;
63
64
  }
64
65
 
@@ -67,14 +68,14 @@
67
68
  align-items: center;
68
69
  justify-content: center;
69
70
  font-size: var(--mantine-font-size-xs);
70
- gap: 0.4375rem;
71
- padding: 0.4375rem 0.75rem;
71
+ gap: calc(0.4375rem * var(--mantine-scale));
72
+ padding: calc(0.4375rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
72
73
  font-family: var(--mantine-font-family-monospace);
73
74
  font-weight: 700;
74
75
  line-height: 1;
75
76
  user-select: none;
76
77
  cursor: var(--_file-cursor);
77
- border: 0.0625rem solid var(--_file-bd);
78
+ border: calc(0.0625rem * var(--mantine-scale)) solid var(--_file-bd);
78
79
  border-top: 0;
79
80
  border-left: 0;
80
81
  color: var(--_file-color);
@@ -166,7 +167,7 @@
166
167
  inset: 0;
167
168
  pointer-events: none;
168
169
  background-image: linear-gradient(0deg, var(--_background) 16%, rgba(0, 0, 0, 0) 100%);
169
- border-radius: calc(var(--mantine-radius-md) - 0.0625rem);
170
+ border-radius: calc(var(--mantine-radius-md) - calc(0.0625rem * var(--mantine-scale)));
170
171
  }
171
172
 
172
173
  .mantine-YfYyOiA[data-expanded] {
package/esm/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  export { CodeHighlightTabs } from './CodeHighlightTabs.js';
2
3
  export { CodeHighlight } from './CodeHighlight.js';
3
4
  export { InlineCodeHighlight } from './InlineCodeHighlight.js';
package/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
package/esm/use-highlight.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { useState, useEffect } from 'react';
2
3
  import hljs from 'highlight.js';
3
4
 
package/esm/use-highlight.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n return getCodeProps;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC,CAAC;AAC1G,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;;;"}
1
+ {"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n return getCodeProps;\n}\n"],"names":[],"mappings":";;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC,CAAC;AAC1G,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;"}
package/lib/CodeHighlightTabs.d.ts CHANGED
@@ -28,7 +28,7 @@ export interface CodeHighlightTabsProps extends BoxProps, StylesApiProps<CodeHig
28
28
  copiedLabel?: string;
29
29
  /** Function that returns icon based on file name */
30
30
  getFileIcon?(fileName: string): React.ReactNode;
31
- /** `max-height` of code in collapsed state, `'6rem'` by default */
31
+ /** `max-height` of code in collapsed state */
32
32
  maxCollapsedHeight?: React.CSSProperties['maxHeight'];
33
33
  /** Controlled expanded state */
34
34
  expanded?: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mantine/code-highlight",
3
3
  "description": "Code highlight with Mantine theme",
4
- "version": "7.0.0-alpha.2",
4
+ "version": "7.0.0-alpha.4",
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
7
7
  "types": "lib/index.d.ts",
@@ -29,8 +29,8 @@
29
29
  "syntax-highlight"
30
30
  ],
31
31
  "peerDependencies": {
32
- "@mantine/core": "7.0.0-alpha.2",
33
- "@mantine/hooks": "7.0.0-alpha.2",
32
+ "@mantine/core": "7.0.0-alpha.4",
33
+ "@mantine/hooks": "7.0.0-alpha.4",
34
34
  "react": ">=16.8.0",
35
35
  "react-dom": ">=16.8.0"
36
36
  },
package/src/CodeHighlight.module.css CHANGED
@@ -11,6 +11,7 @@
11
11
  display: block;
12
12
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
13
13
  margin: 0;
14
+ font-size: 16px; /* Required for Safari to be set in px */
14
15
  --_code-line-height: 1.7;
15
16
  }
16
17
 
package/src/CodeHighlightTabs.tsx CHANGED
@@ -79,7 +79,7 @@ export interface CodeHighlightTabsProps
79
79
  /** Function that returns icon based on file name */
80
80
  getFileIcon?(fileName: string): React.ReactNode;
81
81
 
82
- /** `max-height` of code in collapsed state, `'6rem'` by default */
82
+ /** `max-height` of code in collapsed state */
83
83
  maxCollapsedHeight?: React.CSSProperties['maxHeight'];
84
84
 
85
85
  /** Controlled expanded state */
@@ -111,7 +111,7 @@ const defaultProps: Partial<CodeHighlightTabsProps> = {
111
111
  withHeader: true,
112
112
  copyLabel: 'Copy code',
113
113
  copiedLabel: 'Copied',
114
- maxCollapsedHeight: '8rem',
114
+ maxCollapsedHeight: rem('8rem'),
115
115
  expandCodeLabel: 'Expand code',
116
116
  collapseCodeLabel: 'Collapse code',
117
117
  };
package/styles.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .mantine-XIBJZDt {
2
2
  display: inline-block;
3
- padding: 0.0625rem 0.1875rem;
4
- font-size: 0.8125rem;
3
+ padding: calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale));
4
+ font-size: calc(0.8125rem * var(--mantine-scale));
5
5
  border-radius: var(--mantine-radius-xs);
6
6
  line-height: var(--_code-line-height, var(--mantine-line-height));
7
7
  font-family: var(--mantine-font-family-monospace);
@@ -11,6 +11,7 @@
11
11
  display: block;
12
12
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
13
13
  margin: 0;
14
+ font-size: 16px; /* Required for Safari to be set in px */
14
15
  --_code-line-height: 1.7;
15
16
  }
16
17
 
@@ -22,8 +23,8 @@
22
23
 
23
24
  .mantine-059sM-t {
24
25
  display: flex;
25
- margin-top: 0.4375rem;
26
- margin-right: 0.4375rem;
26
+ margin-top: calc(0.4375rem * var(--mantine-scale));
27
+ margin-right: calc(0.4375rem * var(--mantine-scale));
27
28
  }
28
29
 
29
30
  .mantine-tB-P5PD,
@@ -57,8 +58,8 @@
57
58
 
58
59
  .mantine-tB-P5PD {
59
60
  position: absolute;
60
- top: 0.3125rem;
61
- right: 0.3125rem;
61
+ top: calc(0.3125rem * var(--mantine-scale));
62
+ right: calc(0.3125rem * var(--mantine-scale));
62
63
  z-index: 1;
63
64
  }
64
65
 
@@ -67,14 +68,14 @@
67
68
  align-items: center;
68
69
  justify-content: center;
69
70
  font-size: var(--mantine-font-size-xs);
70
- gap: 0.4375rem;
71
- padding: 0.4375rem 0.75rem;
71
+ gap: calc(0.4375rem * var(--mantine-scale));
72
+ padding: calc(0.4375rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
72
73
  font-family: var(--mantine-font-family-monospace);
73
74
  font-weight: 700;
74
75
  line-height: 1;
75
76
  user-select: none;
76
77
  cursor: var(--_file-cursor);
77
- border: 0.0625rem solid var(--_file-bd);
78
+ border: calc(0.0625rem * var(--mantine-scale)) solid var(--_file-bd);
78
79
  border-top: 0;
79
80
  border-left: 0;
80
81
  color: var(--_file-color);
@@ -166,7 +167,7 @@
166
167
  inset: 0;
167
168
  pointer-events: none;
168
169
  background-image: linear-gradient(0deg, var(--_background) 16%, rgba(0, 0, 0, 0) 100%);
169
- border-radius: calc(var(--mantine-radius-md) - 0.0625rem);
170
+ border-radius: calc(var(--mantine-radius-md) - calc(0.0625rem * var(--mantine-scale)));
170
171
  }
171
172
 
172
173
  .mantine-YfYyOiA[data-expanded] {