timvir 0.2.11 → 0.2.13

package/blocks/Arbitrary/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Arbitrary } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Arbitrary>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Code/docs/index.mdx

@@ -21,7 +21,7 @@ The component supports many different languages such as
 </Code>
 
 The default language is "markdown", but you can specify any of the languages
-which are supported by [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
+which are supported by [shiki](https://shiki.style/themes).
 
 <Code language="javascript" caption="The Hitchhiker's Guide to the Galaxy">
   {'const answer = 42;'}

package/blocks/Code/index.js

@@ -1,6 +1,6 @@
 import * as Page from 'timvir/core';
 import { useBlock } from 'timvir/core';
-import { Highlight } from 'prism-react-renderer';
+import { codeToHtml } from 'shiki';
 import * as React from 'react';
 import * as Icons from 'react-feather';
 import { useImmer } from 'use-immer';
@@ -40,14 +40,11 @@ var theme = "tac6gx6";
  * This is documentation for the Code component.
  */
 
+
 /**
  * The underlying DOM element which is rendered by this component.
  */
 const Root = "div";
-const nullTheme = {
-  plain: {},
-  styles: []
-};
 function Code(props, ref) {
   const block = useBlock(props);
   const {
@@ -56,32 +53,47 @@ function Code(props, ref) {
     fullWidth,
     highlightedLines,
     caption,
+    className,
     ...rest
   } = block.props;
-  const isHighlightedLine = (() => {
-    return line => highlightedLines === null || highlightedLines === void 0 ? void 0 : highlightedLines.includes(line);
-  })();
   const [state, mutate] = useImmer({
     mouseOver: false,
-    copiedToClipboard: false
+    copiedToClipboard: false,
+    html: ""
   });
+  React.useEffect(() => {
+    (async () => {
+      const html = await codeToHtml(children.trim(), {
+        lang: language !== null && language !== void 0 ? language : "markup",
+        themes: {
+          light: "github-light",
+          dark: "github-dark"
+        },
+        decorations: (highlightedLines !== null && highlightedLines !== void 0 ? highlightedLines : []).map(line => ({
+          start: {
+            line: line - 1,
+            character: 0
+          },
+          end: {
+            line: line,
+            character: 0
+          },
+          properties: {
+            class: classes.highlightedLine
+          }
+        }))
+      });
+      mutate(draft => {
+        draft.html = html;
+      });
+    })();
+  }, [mutate, children, language]);
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
     className: cx_default(classes.root, fullWidth && Page.fullWidth),
     ...rest
-  }, /*#__PURE__*/React.createElement(Highlight, {
-    code: children.trim(),
-    language: language !== null && language !== void 0 ? language : "markup",
-    theme: nullTheme
-  }, ({
-    className,
-    style,
-    tokens,
-    getLineProps,
-    getTokenProps
-  }) => /*#__PURE__*/React.createElement("pre", {
-    className: cx_default(className, theme, classes.code, fullWidth && classes.fullWidth),
-    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx_default(className, theme, classes.code, fullWidth && classes.fullWidth)
   }, /*#__PURE__*/React.createElement("div", {
     className: "d1513p2s",
     onMouseEnter: () => {
@@ -115,27 +127,11 @@ function Code(props, ref) {
   }) : /*#__PURE__*/React.createElement(Icons.Copy, {
     size: "16px"
   })), /*#__PURE__*/React.createElement("div", {
-    className: cx_default(fullWidth ? "d17pltln" : "d793q8f")
-  }, tokens.map((line, i) => {
-    const {
-      className,
-      ...lineProps
-    } = getLineProps({
-      line,
-      key: i
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      key: i,
-      ...lineProps,
-      className: cx_default(className, classes.line, isHighlightedLine(i + 1) && classes.highlightedLine)
-    }, line.map((token, key) => /*#__PURE__*/React.createElement("span", {
-      key: key,
-      ...getTokenProps({
-        token,
-        key
-      })
-    })));
-  }))))), caption && /*#__PURE__*/React.createElement("div", {
+    className: cx_default(fullWidth ? "d17pltln" : "d793q8f"),
+    dangerouslySetInnerHTML: {
+      __html: state.html
+    }
+  }))), caption && /*#__PURE__*/React.createElement("div", {
     className: classes.caption
   }, caption));
 }

package/blocks/Code/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Code } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Code>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Code/samples/toggle.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample({ language, children }: any): JSX.Element;
+import * as React from "react";
+export default function Sample({ language, children }: any): React.JSX.Element;

package/blocks/Code/styles.css

@@ -1,13 +1,13 @@
 .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;}
 
-.d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
+.d1513p2s{display:grid;grid-template-columns:1fr;}
 .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);}
 .b10oxtfo{pointer-events:all;opacity:1;}
 .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);}
 .d17pltln{padding:16px 24px 16px 0;}
 
-.r9v2r0l{margin:1.5rem 0 3rem;}
-.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%);}
+.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;}
+.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;}
 .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;}
 .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
 .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}

package/blocks/ColorBar/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/ColorBook/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Cover/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Exhibit/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Font/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Font/samples/system.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Grid/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Icon/internal/Canvas.d.ts

@@ -5,5 +5,5 @@ interface Props {
     size: number;
     Component: React.ElementType;
 }
-declare function Canvas(props: Props): JSX.Element;
+declare function Canvas(props: Props): React.JSX.Element;
 export default Canvas;

package/blocks/Icon/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Message/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Message } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Message>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Swatch/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Viewport/internal/Caption.d.ts

@@ -3,6 +3,6 @@ interface Props {
     src: string;
     code?: string;
 }
-declare function Caption(props: Props): JSX.Element;
+declare function Caption(props: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Caption>;
 export default _default;

package/blocks/Viewport/internal/Handle.d.ts

@@ -5,6 +5,6 @@ interface Props {
     edge: "left" | "right";
     iframeRef: React.RefObject<HTMLIFrameElement>;
 }
-declare function Handle(props: Props): JSX.Element;
+declare function Handle(props: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Handle>;
 export default _default;

package/blocks/Viewport/internal/Ruler.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 interface Props {
     containerWidth?: number;
     viewportWidth?: number;
 }
-declare function Ruler(props: Props): JSX.Element;
+declare function Ruler(props: Props): React.JSX.Element;
 export default Ruler;

package/blocks/Viewport/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/WebLink/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { WebLink } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof WebLink>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/styles.css

@@ -7,14 +7,14 @@
 
 .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;}
 
-.d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
+.d1513p2s{display:grid;grid-template-columns:1fr;}
 .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);}
 .b10oxtfo{pointer-events:all;opacity:1;}
 .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);}
 .d17pltln{padding:16px 24px 16px 0;}
 
-.r9v2r0l{margin:1.5rem 0 3rem;}
-.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%);}
+.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;}
+.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;}
 .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;}
 .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
 .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}

package/core/components/Commands/internal/Action.d.ts

@@ -3,5 +3,5 @@ declare const Root = "div";
 interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
     label?: React.ReactNode;
 }
-declare function Action(props: Props): JSX.Element;
+declare function Action(props: Props): React.JSX.Element;
 export default Action;

package/core/components/Commands/internal/Dialog.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 interface Props {
     open?: boolean;
     onClose?: () => void;
     onDispose?: () => void;
 }
-declare function Dialog(props: Props): JSX.Element;
+declare function Dialog(props: Props): React.JSX.Element;
 export default Dialog;

package/core/components/Footer/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Footer } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Footer>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/core/components/NavigationFooter/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { NavigationFooter } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof NavigationFooter>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/core/components/Page/Page.d.ts

@@ -1,4 +1,4 @@
-import { Components } from "@mdx-js/react/lib/index";
+import { MDXProvider } from "@mdx-js/react";
 import * as React from "react";
 import { Value } from "timvir/context";
 import { Node } from "./types";
@@ -24,7 +24,7 @@ interface Props extends React.ComponentProps<typeof Root> {
      * highlighting. If you want to enable syntax highlighting in code blocks, use the
      * '<Code>' component from 'timvir/blocks'.
      */
-    mdxComponents?: Components;
+    mdxComponents?: React.ComponentPropsWithoutRef<typeof MDXProvider>['components'];
     /**
      * Search Configuration. When provided, then the Search menu will appear in the sidebar.
      */

package/core/components/Page/components.d.ts

@@ -1,46 +1,18 @@
 import * as React from "react";
-export declare const h1: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
-export declare const h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
-export declare const h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
-export declare const blockquote: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLQuoteElement> & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const hr: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHRElement> & React.HTMLAttributes<HTMLHRElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const table: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const thead: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const tbody: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const tr: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const th: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const td: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const code: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const a: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const p: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const ul: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const ol: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLOListElement> & React.OlHTMLAttributes<HTMLOListElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
+export declare const h1: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+export declare const h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+export declare const h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+export declare const blockquote: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLQuoteElement> & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;
+export declare const hr: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLHRElement> & React.HTMLAttributes<HTMLHRElement> & Record<never, unknown>>;
+export declare const table: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & Record<never, unknown>>;
+export declare const thead: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown>>;
+export declare const tbody: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown>>;
+export declare const tr: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & Record<never, unknown>>;
+export declare const th: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & Record<never, unknown>>;
+export declare const td: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & Record<never, unknown>>;
+export declare const code: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & Record<never, unknown>>;
+export declare const a: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const p: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
+export declare const ul: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & Record<never, unknown>>;
+export declare const ol: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLOListElement> & React.OlHTMLAttributes<HTMLOListElement> & Record<never, unknown>>;

package/core/components/Page/internal/Section.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 import { Node } from "../types";
 interface Props extends Node {
     depth: number;
 }
-declare function Section(props: Props): JSX.Element;
+declare function Section(props: Props): React.JSX.Element;
 export default Section;

package/core/components/Page/internal/Sidebar.d.ts

@@ -11,5 +11,5 @@ interface Props {
         }>;
     };
 }
-declare function Sidebar(props: Props): JSX.Element;
+declare function Sidebar(props: Props): React.JSX.Element;
 export default Sidebar;

package/core/components/Page/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/core/components/Page/samples/layout.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/core/index.js

@@ -407,7 +407,8 @@ function filterProps(asIs, props, omitKeys) {
 }
 var warnIfInvalid = (value, componentName) => {
   if (process.env.NODE_ENV !== "production") {
-    if (typeof value === "string" || typeof value === "number" && isFinite(value)) {
+    if (typeof value === "string" || // eslint-disable-next-line no-self-compare,no-restricted-globals
+    typeof value === "number" && isFinite(value)) {
       return;
     }
     const stringified = typeof value === "object" ? JSON.stringify(value) : String(value);
@@ -418,10 +419,12 @@ var warnIfInvalid = (value, componentName) => {
 };
 var idx = 0;
 function styled(tag) {
-  var _a;
-  let mockedClass = `mocked-styled-${idx++}`;
-  if ((_a = tag == null ? void 0 : tag.__linaria) == null ? void 0 : _a.className) {
-    mockedClass += ` ${tag.__linaria.className}`;
+  let mockedClass = "";
+  if (process.env.NODE_ENV === "test") {
+    mockedClass += `mocked-styled-${idx++}`;
+    if (tag && tag.__linaria && tag.__linaria.className) {
+      mockedClass += ` ${tag.__linaria.className}`;
+    }
   }
   return (options) => {
     if (process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test") {
@@ -466,13 +469,17 @@ function styled(tag) {
       }
       return React__default.createElement(component, filteredProps);
     };
-    const Result = React__default.forwardRef ? React__default.forwardRef(render) : (props) => {
-      const rest = omit(props, ["innerRef"]);
-      return render(rest, props.innerRef);
-    };
+    const Result = React__default.forwardRef ? React__default.forwardRef(render) : (
+      // React.forwardRef won't available on older React versions and in Preact
+      // Fallback to a innerRef prop in that case
+      (props) => {
+        const rest = omit(props, ["innerRef"]);
+        return render(rest, props.innerRef);
+      }
+    );
     Result.displayName = options.name;
     Result.__linaria = {
-      className: options.class ?? mockedClass,
+      className: options.class || mockedClass,
       extends: tag
     };
     return Result;

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -19,13 +19,13 @@
     "downshift": "^7",
     "fuzzaldrin-plus": "^0.6.0",
     "immer": "^9 || ^10",
-    "prism-react-renderer": "^2",
+    "shiki": "^1",
     "react-feather": "^2",
     "use-immer": "^0.8.0 || ^0.8.1 || ^0.9.0",
     "wonka": "^6"
   },
   "peerDependencies": {
-    "@mdx-js/react": "^2",
+    "@mdx-js/react": "^2 || ^3",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
     "react-hotkeys-hook": "^4"

package/search/Search/internal/Highlight.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 interface Props {
     string: string;
     query: string;
 }
-declare const Highlight: ({ string, query }: Props) => JSX.Element;
+declare const Highlight: ({ string, query }: Props) => React.JSX.Element;
 export default Highlight;

package/search/Search/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/search/SearchBoxInput/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/search/SearchBoxListItem/samples/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/styles.css

@@ -7,14 +7,14 @@
 
 .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;}
 
-.d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
+.d1513p2s{display:grid;grid-template-columns:1fr;}
 .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);}
 .b10oxtfo{pointer-events:all;opacity:1;}
 .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);}
 .d17pltln{padding:16px 24px 16px 0;}
 
-.r9v2r0l{margin:1.5rem 0 3rem;}
-.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%);}
+.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;}
+.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;}
 .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;}
 .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
 .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}