timvir 0.2.38 → 0.2.39

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # timvir
 
+## 0.2.39
+
+### Patch Changes
+
+- **Use the New JSX Transform** ([#3323](https://github.com/timvir/timvir/pull/3323)) - The New JSX Transform was released as part of React 17. This transform reduces bundle sizes and improves performance. For more details, see the announcement on the React blog: [Introducing the New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). As Timvir already requires React 17 or later, this should not have any impact to users.
+- **Fix dark mode styles** ([#3197](https://github.com/timvir/timvir/pull/3197)) - During the recent Linaria v5 -> v6 (and corresponding stylis v3 -> v4) upgrade, the dark mode styles were slightly broken. This patch restores the dark mode styles.
+
+## 0.2.38
+
 ## 0.2.37
 
 ### Patch Changes

package/blocks/Arbitrary/index.js

@@ -2,6 +2,7 @@
 import { Exhibit } from 'timvir/blocks';
 import { useBlock } from 'timvir/core';
 import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/css.ts
 
@@ -123,43 +124,51 @@ function Arbitrary(props, ref) {
         body: value.seed
       });
     }
-  }, [block.bus, value.seed]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement(Root, {
-    ref: ref,
-    className: cx_default("timvir-b-Arbitrary", classes.root, className),
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.controls
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.textField
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classes.startAdornment
-  }, "Seed:"), /*#__PURE__*/React.createElement("input", {
-    className: cx_default("timvir-b-Arbitrary-seed", classes.input),
-    placeholder: "Seed",
-    value: encode(new TextEncoder().encode(`${value.seed}`)),
-    readOnly: true,
-    onPaste: ev => {
-      const v = ev.clipboardData.getData("text/plain");
-      setValue({
-        seed: +new TextDecoder().decode(decode(v))
-      });
-    },
-    onFocus: ev => {
-      ev.currentTarget.select();
-    }
-  })), /*#__PURE__*/React.createElement("button", {
-    className: classes.button,
-    onClick: () => {
-      setValue({
-        seed: crypto.getRandomValues(new Uint32Array(1))[0]
-      });
-    }
-  }, "Refresh")), /*#__PURE__*/React.createElement(Exhibit, {
-    ...ExhibitProps
-  }, children)));
+  }, [props.id, block.bus, value.seed]);
+  return /*#__PURE__*/jsx(Context.Provider, {
+    value: value,
+    children: /*#__PURE__*/jsxs(Root, {
+      ref: ref,
+      className: cx_default("timvir-b-Arbitrary", classes.root, className),
+      ...rest,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classes.controls,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: classes.textField,
+          children: [/*#__PURE__*/jsx("span", {
+            className: classes.startAdornment,
+            children: "Seed:"
+          }), /*#__PURE__*/jsx("input", {
+            className: cx_default("timvir-b-Arbitrary-seed", classes.input),
+            placeholder: "Seed",
+            value: encode(new TextEncoder().encode(`${value.seed}`)),
+            readOnly: true,
+            onPaste: ev => {
+              const v = ev.clipboardData.getData("text/plain");
+              setValue({
+                seed: +new TextDecoder().decode(decode(v))
+              });
+            },
+            onFocus: ev => {
+              ev.currentTarget.select();
+            }
+          })]
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: classes.button,
+          onClick: () => {
+            setValue({
+              seed: crypto.getRandomValues(new Uint32Array(1))[0]
+            });
+          },
+          children: "Refresh"
+        })]
+      }), /*#__PURE__*/jsx(Exhibit, {
+        ...ExhibitProps,
+        children: children
+      })]
+    })
+  });
 }
 var Arbitrary$1 = /*#__PURE__*/React.forwardRef(Arbitrary);
 const classes = {

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): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Code/index.js

@@ -4,6 +4,7 @@ import { useBlock } from 'timvir/core';
 import { codeToHtml } from 'shiki';
 import * as React from 'react';
 import * as Icons from 'react-feather';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/css.ts
 
@@ -90,56 +91,63 @@ function Code(props, ref) {
         html
       }));
     })();
-  }, [children, language]);
-  return /*#__PURE__*/React.createElement(Root, {
+  }, [children, language, highlightedLines]);
+  return /*#__PURE__*/jsxs(Root, {
     ref: ref,
     className: cx_default("timvir-b-Code", !state.settled && "timvir-unsettled", classes.root, fullWidth && Page.fullWidth),
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx_default("timvir-b-Code-container", className, theme, classes.code, fullWidth && classes.fullWidth)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d1513p2s",
-    onMouseEnter: () => {
-      setState(state => ({
-        ...state,
-        mouseOver: true
-      }));
-    },
-    onMouseLeave: () => {
-      setState(state => ({
-        ...state,
-        mouseOver: false,
-        copiedToClipboard: false
-      }));
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    onClick: () => {
-      navigator.clipboard.writeText(children);
-      setState(state => ({
-        ...state,
-        copiedToClipboard: true
-      }));
-    },
-    className: cx_default("b157mkz", state.mouseOver && "b10oxtfo")
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: 48,
-    height: 48,
-    viewBox: "0 0 48 48",
-    className: "s1hdfi6o"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M0 0 H48 V48 Z"
-  })), state.copiedToClipboard ? /*#__PURE__*/React.createElement(Icons.Clipboard, {
-    size: "16px"
-  }) : /*#__PURE__*/React.createElement(Icons.Copy, {
-    size: "16px"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: cx_default(fullWidth ? "d17pltln" : "d793q8f"),
-    dangerouslySetInnerHTML: {
-      __html: state.html
-    }
-  }))), caption && /*#__PURE__*/React.createElement("div", {
-    className: cx_default("timvir-b-Code-caption", classes.caption)
-  }, caption));
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: cx_default("timvir-b-Code-container", className, theme, classes.code, fullWidth && classes.fullWidth),
+      children: /*#__PURE__*/jsxs("div", {
+        className: "d1513p2s",
+        onMouseEnter: () => {
+          setState(state => ({
+            ...state,
+            mouseOver: true
+          }));
+        },
+        onMouseLeave: () => {
+          setState(state => ({
+            ...state,
+            mouseOver: false,
+            copiedToClipboard: false
+          }));
+        },
+        children: [/*#__PURE__*/jsxs("button", {
+          type: "button",
+          onClick: () => {
+            navigator.clipboard.writeText(children);
+            setState(state => ({
+              ...state,
+              copiedToClipboard: true
+            }));
+          },
+          className: cx_default("b157mkz", state.mouseOver && "b10oxtfo"),
+          children: [/*#__PURE__*/jsx("svg", {
+            width: 48,
+            height: 48,
+            viewBox: "0 0 48 48",
+            className: "s1hdfi6o",
+            children: /*#__PURE__*/jsx("path", {
+              d: "M0 0 H48 V48 Z"
+            })
+          }), state.copiedToClipboard ? /*#__PURE__*/jsx(Icons.Clipboard, {
+            size: "16px"
+          }) : /*#__PURE__*/jsx(Icons.Copy, {
+            size: "16px"
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: cx_default(fullWidth ? "d17pltln" : "d793q8f"),
+          dangerouslySetInnerHTML: {
+            __html: state.html
+          }
+        })]
+      })
+    }), caption && /*#__PURE__*/jsx("div", {
+      className: cx_default("timvir-b-Code-caption", classes.caption),
+      children: caption
+    })]
+  });
 }
 var Code$1 = /*#__PURE__*/React.forwardRef(Code);
 const classes = {

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): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/blocks/Code/styles.css

@@ -1,4 +1,4 @@
-.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"] {color:#adbac7;background-color:#2d333b;}:root[data-timvir-theme="dark"] {color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] {opacity:0.7;}:root[data-timvir-theme="dark"] {color:#96d0ff;}:root[data-timvir-theme="dark"] {color:#6cb6ff;}:root[data-timvir-theme="dark"] {color:#d73a49;}:root[data-timvir-theme="dark"] {color:#8ddb8c;}:root[data-timvir-theme="dark"] {color:#6f42c1;}:root[data-timvir-theme="dark"] {color:#f47067;}:root[data-timvir-theme="dark"] {color:#dcbdfb;}
+.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:var(--timvir-secondary-background-color);}: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:-ms-grid;display:grid;-ms-grid-columns:1fr;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;outline:none;border:none;padding:6px;background:transparent;-webkit-transition:all 0.2s;transition:all 0.2s;cursor:pointer;pointer-events:none;opacity:0;}.b157mkz:hover{color:white;}.b157mkz:hover svg:first-child{-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);}.b157mkz:active svg:first-child{-webkit-transform:translate(2px, -2px);-moz-transform:translate(2px, -2px);-ms-transform:translate(2px, -2px);transform:translate(2px, -2px);}
@@ -6,11 +6,11 @@
 .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform:translate(48px, -48px);-moz-transform:translate(48px, -48px);-ms-transform:translate(48px, -48px);transform:translate(48px, -48px);}.s1hdfi6o path{fill:var(--c-p-4);}
 .d17pltln{padding:16px 24px 16px 0;}
 
-:root[data-timvir-theme="dark"] ,:root[data-timvir-theme="dark"] {color:var(--shiki-dark)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;text-decoration:var(--shiki-dark-text-decoration)!important;}
+: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;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;text-decoration:var(--shiki-dark-text-decoration)!important;}
 .cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin, 0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed), 8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color)!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);}
 .fjvaz2s{display:-ms-grid;display:grid;border-radius:0;box-shadow:none;margin-inline:0;-ms-grid-auto-rows:min-content;grid-auto-rows:min-content;-ms-grid-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];-ms-grid-column-gap:16px;grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width: 60rem){.fjvaz2s{-ms-grid-columns:[le] 1fr [lc] minmax(0, 48rem) [rc] 1fr [re];grid-template-columns:[le] 1fr [lc] minmax(0, 48rem) [rc] 1fr [re];-ms-grid-column-gap:24px;grid-column-gap:24px;}}.fjvaz2s>*{grid-column:lc/re;}
 .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
-.h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] {background-color:rgba(174, 124, 20, 0.15);}
+.h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174, 124, 20, 0.15);}
 .ll2b9hx{display:inline-block;width:var(--timvir-b-Code-bleed);color:var(--timvir-secondary-text-color);text-align:right;padding-inline:4px;}
 .c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 

package/blocks/ColorBar/index.js

@@ -2,6 +2,7 @@
 import { Swatch } from 'timvir/blocks';
 import { useBlock } from 'timvir/core';
 import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/css.ts
 
@@ -44,37 +45,40 @@ function ColorBar(props, ref) {
     ...rest
   } = block.props;
   const [selected, setSelected] = React.useState(undefined);
-  return /*#__PURE__*/React.createElement(Root, {
+  return /*#__PURE__*/jsxs(Root, {
     ref: ref,
     className: cx_default(className, classes.root, selected && tweaks.selected),
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.bar,
-    style: {
-      opacity: selected ? 0 : 1
-    }
-  }, values.map((value, i) => /*#__PURE__*/React.createElement("div", {
-    key: i,
-    className: classes.value
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: typeof value === "string" ? value : value.value
-    },
-    onClick: () => {
-      setSelected(value);
-    }
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: classes.overlay
-  }, /*#__PURE__*/React.createElement(Swatch, {
-    ...(typeof selected === "string" ? {
-      value: selected
-    } : {
-      value: selected?.value ?? ""
-    }),
-    onMouseLeave: () => {
-      setSelected(undefined);
-    }
-  })));
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classes.bar,
+      style: {
+        opacity: selected ? 0 : 1
+      },
+      children: values.map((value, i) => /*#__PURE__*/jsx("div", {
+        className: classes.value,
+        children: /*#__PURE__*/jsx("div", {
+          style: {
+            background: typeof value === "string" ? value : value.value
+          },
+          onClick: () => {
+            setSelected(value);
+          }
+        })
+      }, i))
+    }), /*#__PURE__*/jsx("div", {
+      className: classes.overlay,
+      children: /*#__PURE__*/jsx(Swatch, {
+        ...(typeof selected === "string" ? {
+          value: selected
+        } : {
+          value: selected?.value ?? ""
+        }),
+        onMouseLeave: () => {
+          setSelected(undefined);
+        }
+      })
+    })]
+  });
 }
 var ColorBar$1 = /*#__PURE__*/React.forwardRef(ColorBar);
 const tweaks = {

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

@@ -1,2 +1 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;
+export default function Sample(): import("react/jsx-runtime").JSX.Element;

package/blocks/ColorBook/index.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/css.ts
 
@@ -41,34 +42,36 @@ function ColorBook(props, ref) {
     className,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root, {
+  return /*#__PURE__*/jsx(Root, {
     ref: ref,
     ...rest,
-    className: cx_default(className, "rmv2wrl")
-  }, chapters.map(({
-    name,
-    values
-  }, i) => /*#__PURE__*/React.createElement("div", {
-    key: i,
-    style: {
-      gridColumn: i + 1
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx_default(chapter, i === selectedChapter && activeChapter),
-    onClick: () => {
-      if (onSelectChapter) {
-        onSelectChapter(i);
-      }
-    }
-  }, values.map(value => /*#__PURE__*/React.createElement("div", {
-    key: value,
-    style: {
-      background: value
-    },
-    className: "d1l94wnr"
-  }))), name && /*#__PURE__*/React.createElement("div", {
-    className: cx_default("d1uopbb", i === selectedChapter && "d1vwzhoa")
-  }, name))));
+    className: cx_default(className, "rmv2wrl"),
+    children: chapters.map(({
+      name,
+      values
+    }, i) => /*#__PURE__*/jsxs("div", {
+      style: {
+        gridColumn: i + 1
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: cx_default(chapter, i === selectedChapter && activeChapter),
+        onClick: () => {
+          if (onSelectChapter) {
+            onSelectChapter(i);
+          }
+        },
+        children: values.map(value => /*#__PURE__*/jsx("div", {
+          style: {
+            background: value
+          },
+          className: "d1l94wnr"
+        }, value))
+      }), name && /*#__PURE__*/jsx("div", {
+        className: cx_default("d1uopbb", i === selectedChapter && "d1vwzhoa"),
+        children: name
+      })]
+    }, i))
+  });
 }
 var ColorBook$1 = /*#__PURE__*/React.forwardRef(ColorBook);
 const chapter = "c1xqhu04";

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

@@ -1,2 +1 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;
+export default function Sample(): import("react/jsx-runtime").JSX.Element;

package/blocks/Cover/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { fullWidth } from 'timvir/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/css.ts
 
@@ -30,9 +31,6 @@ var cx = function cx2() {
 };
 var cx_default = cx;
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
 function Cover(props, ref) {
   const {
@@ -42,23 +40,25 @@ function Cover(props, ref) {
     className,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root, {
+  return /*#__PURE__*/jsx(Root, {
     ref: ref,
     className: cx_default(className, fullWidth),
-    ...rest
-  }, /*#__PURE__*/React.createElement("picture", null, sources.map((p, i) => /*#__PURE__*/React.createElement("source", {
-    key: i,
-    ...p
-  })), /*#__PURE__*/React.createElement("img", {
-    ...metadata,
-    ...img,
-    style: {
-      display: "block",
-      maxWidth: "100%",
-      height: "35vh",
-      objectFit: "cover"
-    }
-  })));
+    ...rest,
+    children: /*#__PURE__*/jsxs("picture", {
+      children: [sources.map((p, i) => /*#__PURE__*/jsx("source", {
+        ...p
+      }, i)), /*#__PURE__*/jsx("img", {
+        ...metadata,
+        ...img,
+        style: {
+          display: "block",
+          maxWidth: "100%",
+          height: "35vh",
+          objectFit: "cover"
+        }
+      })]
+    })
+  });
 }
 var Cover$1 = /*#__PURE__*/React.forwardRef(Cover);
 

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

@@ -1,2 +1 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;
+export default function Sample(): import("react/jsx-runtime").JSX.Element;

package/blocks/Exhibit/index.js

@@ -1,6 +1,7 @@
 'use client';
 import { useBlock } from 'timvir/core';
 import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/css.ts
 
@@ -46,24 +47,27 @@ function Exhibit(props, ref) {
     style,
     ...rest
   } = block.props;
-  return /*#__PURE__*/React.createElement(Root, {
+  return /*#__PURE__*/jsxs(Root, {
     ref: ref,
     className: cx_default("timvir-b-Exhibit", className, classes.root),
     style: {
       ...style,
       [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : undefined
     },
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx_default("timvir-b-Exhibit-container", classes.container),
-    ...BackdropProps,
-    style: {
-      border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
-      ...BackdropProps?.style
-    }
-  }, children), caption && /*#__PURE__*/React.createElement("div", {
-    className: cx_default("timvir-b-Exhibit-caption", classes.caption)
-  }, caption));
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: cx_default("timvir-b-Exhibit-container", classes.container),
+      ...BackdropProps,
+      style: {
+        border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
+        ...BackdropProps?.style
+      },
+      children: children
+    }), caption && /*#__PURE__*/jsx("div", {
+      className: cx_default("timvir-b-Exhibit-caption", classes.caption),
+      children: caption
+    })]
+  });
 }
 var Exhibit$1 = /*#__PURE__*/React.forwardRef(Exhibit);
 const cssVariables = {

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

@@ -1,2 +1 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;
+export default function Sample(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,2 +1 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;
+export default function Sample(): import("react/jsx-runtime").JSX.Element;

package/blocks/Exhibit/styles.css

@@ -1,4 +1,4 @@
-.r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin, 0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] {--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
+.r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin, 0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
 .c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);border-radius:5px;}
 .cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}