timvir 0.2.12 → 0.2.13

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 (7) hide show
  1. package/blocks/Code/docs/index.mdx +1 -1
  2. package/blocks/Code/index.js +38 -43
  3. package/blocks/Code/styles.css +3 -3
  4. package/blocks/styles.css +3 -3
  5. package/core/index.js +2 -2
  6. package/package.json +2 -2
  7. package/styles.css +3 -3
package/blocks/Code/docs/index.mdx CHANGED
@@ -21,7 +21,7 @@ The component supports many different languages such as
21
21
  </Code>
22
22
 
23
23
  The default language is "markdown", but you can specify any of the languages
24
- which are supported by [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
24
+ which are supported by [shiki](https://shiki.style/themes).
25
25
 
26
26
  <Code language="javascript" caption="The Hitchhiker's Guide to the Galaxy">
27
27
  {'const answer = 42;'}
package/blocks/Code/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as Page from 'timvir/core';
2
2
  import { useBlock } from 'timvir/core';
3
- import { Highlight } from 'prism-react-renderer';
3
+ import { codeToHtml } from 'shiki';
4
4
  import * as React from 'react';
5
5
  import * as Icons from 'react-feather';
6
6
  import { useImmer } from 'use-immer';
@@ -45,10 +45,6 @@ var theme = "tac6gx6";
45
45
  * The underlying DOM element which is rendered by this component.
46
46
  */
47
47
  const Root = "div";
48
- const nullTheme = {
49
- plain: {},
50
- styles: []
51
- };
52
48
  function Code(props, ref) {
53
49
  const block = useBlock(props);
54
50
  const {
@@ -57,32 +53,47 @@ function Code(props, ref) {
57
53
  fullWidth,
58
54
  highlightedLines,
59
55
  caption,
56
+ className,
60
57
  ...rest
61
58
  } = block.props;
62
- const isHighlightedLine = (() => {
63
- return line => highlightedLines === null || highlightedLines === void 0 ? void 0 : highlightedLines.includes(line);
64
- })();
65
59
  const [state, mutate] = useImmer({
66
60
  mouseOver: false,
67
- copiedToClipboard: false
61
+ copiedToClipboard: false,
62
+ html: ""
68
63
  });
64
+ React.useEffect(() => {
65
+ (async () => {
66
+ const html = await codeToHtml(children.trim(), {
67
+ lang: language !== null && language !== void 0 ? language : "markup",
68
+ themes: {
69
+ light: "github-light",
70
+ dark: "github-dark"
71
+ },
72
+ decorations: (highlightedLines !== null && highlightedLines !== void 0 ? highlightedLines : []).map(line => ({
73
+ start: {
74
+ line: line - 1,
75
+ character: 0
76
+ },
77
+ end: {
78
+ line: line,
79
+ character: 0
80
+ },
81
+ properties: {
82
+ class: classes.highlightedLine
83
+ }
84
+ }))
85
+ });
86
+ mutate(draft => {
87
+ draft.html = html;
88
+ });
89
+ })();
90
+ }, [mutate, children, language]);
69
91
  return /*#__PURE__*/React.createElement(Root, {
70
92
  ref: ref,
71
93
  className: cx_default(classes.root, fullWidth && Page.fullWidth),
72
94
  ...rest
73
- }, /*#__PURE__*/React.createElement(Highlight, {
74
- code: children.trim(),
75
- language: language !== null && language !== void 0 ? language : "markup",
76
- theme: nullTheme
77
- }, ({
78
- className,
79
- style,
80
- tokens,
81
- getLineProps,
82
- getTokenProps
83
- }) => /*#__PURE__*/React.createElement("pre", {
84
- className: cx_default(className, theme, classes.code, fullWidth && classes.fullWidth),
85
- style: style
95
+ }, /*#__PURE__*/React.createElement("div", {
96
+ className: cx_default(className, theme, classes.code, fullWidth && classes.fullWidth)
86
97
  }, /*#__PURE__*/React.createElement("div", {
87
98
  className: "d1513p2s",
88
99
  onMouseEnter: () => {
@@ -116,27 +127,11 @@ function Code(props, ref) {
116
127
  }) : /*#__PURE__*/React.createElement(Icons.Copy, {
117
128
  size: "16px"
118
129
  })), /*#__PURE__*/React.createElement("div", {
119
- className: cx_default(fullWidth ? "d17pltln" : "d793q8f")
120
- }, tokens.map((line, i) => {
121
- const {
122
- className,
123
- ...lineProps
124
- } = getLineProps({
125
- line,
126
- key: i
127
- });
128
- return /*#__PURE__*/React.createElement("div", {
129
- key: i,
130
- ...lineProps,
131
- className: cx_default(className, classes.line, isHighlightedLine(i + 1) && classes.highlightedLine)
132
- }, line.map((token, key) => /*#__PURE__*/React.createElement("span", {
133
- key: key,
134
- ...getTokenProps({
135
- token,
136
- key
137
- })
138
- })));
139
- }))))), caption && /*#__PURE__*/React.createElement("div", {
130
+ className: cx_default(fullWidth ? "d17pltln" : "d793q8f"),
131
+ dangerouslySetInnerHTML: {
132
+ __html: state.html
133
+ }
134
+ }))), caption && /*#__PURE__*/React.createElement("div", {
140
135
  className: classes.caption
141
136
  }, caption));
142
137
  }
package/blocks/Code/styles.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .tac6gx6{color:#393a34;background-color:#f6f8fa;}.tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}.tac6gx6 :is(.namespace){opacity:0.7;}.tac6gx6 :is(.string,.attr-value){color:#e3116c;}.tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}.tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}.tac6gx6 :is(.tag,.selector,.keyword){color:#00009f;}.tac6gx6 :is(.function-variable){color:#6f42c1;}.tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#00a4db;}.tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#36acaa;}:root[data-timvir-theme="dark"] .tac6gx6{color:#adbac7;background-color:#2d333b;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.namespace){opacity:0.7;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.string,.attr-value){color:#96d0ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.tag,.selector,.keyword){color:#8ddb8c;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function-variable){color:#6f42c1;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#f47067;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#dcbdfb;}
2
2
 
3
- .d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
3
+ .d1513p2s{display:grid;grid-template-columns:1fr;}
4
4
  .b157mkz{--size:48px;z-index:1;position:absolute;top:0;right:0;overflow:hidden;width:var(--size);height:var(--size);display:flex;align-items:flex-start;justify-content:flex-end;outline:none;border:none;padding:6px;background:transparent;transition:all 0.2s;cursor:pointer;pointer-events:none;opacity:0;}.b157mkz:hover{color:white;}.b157mkz:hover svg:first-child{transform:translate(0,0);}.b157mkz:active svg:first-child{transform:translate(2px,-2px);}
5
5
  .b10oxtfo{pointer-events:all;opacity:1;}
6
6
  .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
7
7
  .d17pltln{padding:16px 24px 16px 0;}
8
8
 
9
- .r9v2r0l{margin:1.5rem 0 3rem;}
10
- .cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}
9
+ .r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
10
+ .cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}.cs7tint pre{margin:0;padding:16px 0;background-color:transparent !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
11
11
  .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
12
12
  .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
13
13
  .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
package/blocks/styles.css CHANGED
@@ -7,14 +7,14 @@
7
7
 
8
8
  .tac6gx6{color:#393a34;background-color:#f6f8fa;}.tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}.tac6gx6 :is(.namespace){opacity:0.7;}.tac6gx6 :is(.string,.attr-value){color:#e3116c;}.tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}.tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}.tac6gx6 :is(.tag,.selector,.keyword){color:#00009f;}.tac6gx6 :is(.function-variable){color:#6f42c1;}.tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#00a4db;}.tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#36acaa;}:root[data-timvir-theme="dark"] .tac6gx6{color:#adbac7;background-color:#2d333b;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.namespace){opacity:0.7;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.string,.attr-value){color:#96d0ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.tag,.selector,.keyword){color:#8ddb8c;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function-variable){color:#6f42c1;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#f47067;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#dcbdfb;}
9
9
 
10
- .d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
10
+ .d1513p2s{display:grid;grid-template-columns:1fr;}
11
11
  .b157mkz{--size:48px;z-index:1;position:absolute;top:0;right:0;overflow:hidden;width:var(--size);height:var(--size);display:flex;align-items:flex-start;justify-content:flex-end;outline:none;border:none;padding:6px;background:transparent;transition:all 0.2s;cursor:pointer;pointer-events:none;opacity:0;}.b157mkz:hover{color:white;}.b157mkz:hover svg:first-child{transform:translate(0,0);}.b157mkz:active svg:first-child{transform:translate(2px,-2px);}
12
12
  .b10oxtfo{pointer-events:all;opacity:1;}
13
13
  .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
14
14
  .d17pltln{padding:16px 24px 16px 0;}
15
15
 
16
- .r9v2r0l{margin:1.5rem 0 3rem;}
17
- .cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}
16
+ .r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
17
+ .cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}.cs7tint pre{margin:0;padding:16px 0;background-color:transparent !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
18
18
  .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
19
19
  .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
20
20
  .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
package/core/index.js CHANGED
@@ -560,7 +560,7 @@ const tr = /*#__PURE__*/styled_default('tr')({
560
560
  class: "twrwqj6",
561
561
  propsAsIs: false
562
562
  });
563
- const _exp = /*#__PURE__*/() => props => props.align || "center";
563
+ const _exp = () => props => props.align || "center";
564
564
  const th = /*#__PURE__*/styled_default('th')({
565
565
  name: "th",
566
566
  class: "t1fhygp",
@@ -569,7 +569,7 @@ const th = /*#__PURE__*/styled_default('th')({
569
569
  "t1fhygp-0": [_exp()]
570
570
  }
571
571
  });
572
- const _exp2 = /*#__PURE__*/() => props => props.align || "left";
572
+ const _exp2 = () => props => props.align || "left";
573
573
  const td = /*#__PURE__*/styled_default('td')({
574
574
  name: "td",
575
575
  class: "t176v8uh",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "timvir",
4
- "version": "0.2.12",
4
+ "version": "0.2.13",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
7
7
  "exports": {
@@ -19,7 +19,7 @@
19
19
  "downshift": "^7",
20
20
  "fuzzaldrin-plus": "^0.6.0",
21
21
  "immer": "^9 || ^10",
22
- "prism-react-renderer": "^2",
22
+ "shiki": "^1",
23
23
  "react-feather": "^2",
24
24
  "use-immer": "^0.8.0 || ^0.8.1 || ^0.9.0",
25
25
  "wonka": "^6"
package/styles.css CHANGED
@@ -7,14 +7,14 @@
7
7
 
8
8
  .tac6gx6{color:#393a34;background-color:#f6f8fa;}.tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}.tac6gx6 :is(.namespace){opacity:0.7;}.tac6gx6 :is(.string,.attr-value){color:#e3116c;}.tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}.tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}.tac6gx6 :is(.tag,.selector,.keyword){color:#00009f;}.tac6gx6 :is(.function-variable){color:#6f42c1;}.tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#00a4db;}.tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#36acaa;}:root[data-timvir-theme="dark"] .tac6gx6{color:#adbac7;background-color:#2d333b;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.namespace){opacity:0.7;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.string,.attr-value){color:#96d0ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.tag,.selector,.keyword){color:#8ddb8c;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function-variable){color:#6f42c1;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#f47067;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#dcbdfb;}
9
9
 
10
- .d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
10
+ .d1513p2s{display:grid;grid-template-columns:1fr;}
11
11
  .b157mkz{--size:48px;z-index:1;position:absolute;top:0;right:0;overflow:hidden;width:var(--size);height:var(--size);display:flex;align-items:flex-start;justify-content:flex-end;outline:none;border:none;padding:6px;background:transparent;transition:all 0.2s;cursor:pointer;pointer-events:none;opacity:0;}.b157mkz:hover{color:white;}.b157mkz:hover svg:first-child{transform:translate(0,0);}.b157mkz:active svg:first-child{transform:translate(2px,-2px);}
12
12
  .b10oxtfo{pointer-events:all;opacity:1;}
13
13
  .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
14
14
  .d17pltln{padding:16px 24px 16px 0;}
15
15
 
16
- .r9v2r0l{margin:1.5rem 0 3rem;}
17
- .cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}
16
+ .r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
17
+ .cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}.cs7tint pre{margin:0;padding:16px 0;background-color:transparent !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
18
18
  .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
19
19
  .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
20
20
  .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}