timvir 0.2.54 → 0.2.56

package/blocks/Font/samples/timvir/h4.d.ts

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

package/blocks/Grid/Grid.d.ts

@@ -5,5 +5,5 @@ import * as React from "react";
 declare const Root = "div";
 interface Props extends React.ComponentProps<typeof Root> {
 }
-export declare function Grid(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Grid(props: Props): React.JSX.Element;
 export {};

package/blocks/Grid/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { jsxDEV } from 'react/jsx-dev-runtime';
 
 var styleq = {};
 var hasRequiredStyleq;
@@ -179,7 +179,7 @@ function Grid(props$1) {
     ...rest
   } = props$1;
   const rootStyleProps = props(layoutStyles.block, styles.root);
-  return /*#__PURE__*/jsx(Root, {
+  return /*#__PURE__*/jsxDEV(Root, {
     ...rest,
     ...rootStyleProps,
     style: {
@@ -204,7 +204,7 @@ function Grid(props$1) {
         }
       });
     })
-  });
+  }, void 0, false);
 }
 const styles = {
   root: {

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

@@ -1 +1 @@
-export default function Sample(): import("react/jsx-runtime").JSX.Element;
+export default function Sample(): import("react").JSX.Element;

package/blocks/Icon/Icon.d.ts

@@ -7,5 +7,5 @@ declare const Root = "div";
 interface Props extends React.ComponentProps<typeof Root> {
     descriptor: Descriptor;
 }
-export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Icon(props: Props): React.JSX.Element;
 export {};

package/blocks/Icon/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { useResizeObserverEntry } from 'timvir/hooks';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
 
 function cx(...args) {
   let str = "";
@@ -21,27 +21,27 @@ function Canvas(props) {
     size,
     Component
   } = props;
-  return /*#__PURE__*/jsxs(Root$1, {
+  return /*#__PURE__*/jsxDEV(Root$1, {
     className: "timvir-s-rvj5dj timvir-s-1ku5rj1 timvir-s-1ypdohk timvir-s-dtfvks timvir-s-d2wi23",
     style: {
       width,
       height
     },
-    children: [/*#__PURE__*/jsx("div", {
+    children: [/*#__PURE__*/jsxDEV("div", {
       className: "timvir-s-gkxs2y timvir-s-1ms6mhf timvir-s-12peec7 timvir-s-1lhehjl timvir-s-1cum3z5 timvir-s-zhuw26 timvir-s-1ww5jgt"
-    }), /*#__PURE__*/jsx(Grid, {
+    }, void 0, false), /*#__PURE__*/jsxDEV(Grid, {
       className: "timvir-s-gkxs2y timvir-s-1ms6mhf timvir-s-1lliihq timvir-s-1j5ulbg timvir-s-zhuw26 timvir-s-47corl",
       size: size
-    }), /*#__PURE__*/jsx("div", {
+    }, void 0, false), /*#__PURE__*/jsxDEV("div", {
       style: {
         gridColumn: 1,
         gridRow: 1,
         fontSize: `${size}px`,
         zIndex: 1
       },
-      children: /*#__PURE__*/jsx(Component, {})
-    })]
-  });
+      children: /*#__PURE__*/jsxDEV(Component, {}, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
 }
 function Grid({
   size,
@@ -53,50 +53,50 @@ function Grid({
   const Corner = ({
     dx,
     dy
-  }) => /*#__PURE__*/jsxs("g", {
-    children: [/*#__PURE__*/jsx("line", {
+  }) => /*#__PURE__*/jsxDEV("g", {
+    children: [/*#__PURE__*/jsxDEV("line", {
       x1: dx(center, halfSize),
       x2: dx(center, halfSize + whiskerLength),
       y1: dy(center, halfSize),
       y2: dy(center, halfSize),
       strokeWidth: 1,
       stroke: "#EEEEEE"
-    }), /*#__PURE__*/jsx("line", {
+    }, void 0, false), /*#__PURE__*/jsxDEV("line", {
       x1: dx(center, halfSize),
       x2: dx(center, halfSize),
       y1: dy(center, halfSize),
       y2: dy(center, halfSize + whiskerLength),
       strokeWidth: 1,
       stroke: "#EEEEEE"
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
   const add = (a, b) => a + b;
   const sub = (a, b) => a - b;
-  return /*#__PURE__*/jsxs("svg", {
+  return /*#__PURE__*/jsxDEV("svg", {
     width: "120",
     height: "120",
     viewBox: "0 0 120 120",
     ...rest,
-    children: [/*#__PURE__*/jsx("rect", {
+    children: [/*#__PURE__*/jsxDEV("rect", {
       x: center - halfSize,
       y: center - halfSize,
       width: size,
       height: size,
       fill: "#FFBBFF88"
-    }), /*#__PURE__*/jsx(Corner, {
+    }, void 0, false), /*#__PURE__*/jsxDEV(Corner, {
       dx: sub,
       dy: sub
-    }), /*#__PURE__*/jsx(Corner, {
+    }, void 0, false), /*#__PURE__*/jsxDEV(Corner, {
       dx: add,
       dy: sub
-    }), /*#__PURE__*/jsx(Corner, {
+    }, void 0, false), /*#__PURE__*/jsxDEV(Corner, {
       dx: add,
       dy: add
-    }), /*#__PURE__*/jsx(Corner, {
+    }, void 0, false), /*#__PURE__*/jsxDEV(Corner, {
       dx: sub,
       dy: add
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 
 const Root = "div";
@@ -110,7 +110,7 @@ function Icon(props) {
   const rootStyleProps = {
     className: "timvir-s-1n2onr6 timvir-s-1vjfegm timvir-s-dtfvks timvir-s-d2wi23"
   };
-  return /*#__PURE__*/jsx(Root, {
+  return /*#__PURE__*/jsxDEV(Root, {
     ...rest,
     ...rootStyleProps,
     className: cx(rest.className, rootStyleProps.className),
@@ -118,21 +118,21 @@ function Icon(props) {
       ...rootStyleProps.style,
       ...rest.style
     },
-    children: /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsxDEV("div", {
       ref: roRef,
-      children: width !== undefined && /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(Canvas, {
+      children: width !== undefined && /*#__PURE__*/jsxDEV(Fragment, {
+        children: [/*#__PURE__*/jsxDEV(Canvas, {
           width: width,
           height: width,
           size: 32,
           Component: descriptor.instances[0].Component
-        }), /*#__PURE__*/jsx("div", {
+        }, void 0, false), /*#__PURE__*/jsxDEV("div", {
           className: "timvir-s-dj266r timvir-s-uxw1ft timvir-s-boafo0 timvir-s-1j5ulbg timvir-s-zhuw26 timvir-s-8knxv4 timvir-s-1cdhzux timvir-s-2b8uid timvir-s-87ps6o timvir-s-47corl timvir-s-10l6tqk timvir-s-1nrll8i timvir-s-1kuhel0 timvir-s-1nc5ocm",
           children: descriptor.name
-        })]
-      })
-    })
-  });
+        }, void 0, false)]
+      }, void 0, true)
+    }, void 0, false)
+  }, void 0, false);
 }
 
 export { Icon };

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

@@ -5,5 +5,5 @@ interface Props {
     size: number;
     Component: React.ElementType;
 }
-export declare function Canvas(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Canvas(props: Props): React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-export default function Sample(): import("react/jsx-runtime").JSX.Element;
+export default function Sample(): import("react").JSX.Element;

package/blocks/Message/Message.d.ts

@@ -6,5 +6,5 @@ declare const Root = "div";
 interface Props extends React.ComponentPropsWithRef<typeof Root> {
     variant?: "info" | "warning" | "alert";
 }
-export declare function Message(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Message(props: Props): React.JSX.Element;
 export {};

package/blocks/Message/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxDEV } from 'react/jsx-dev-runtime';
 
 var styleq = {};
 var hasRequiredStyleq;
@@ -160,7 +160,7 @@ const layoutStyles = {
     $$css: true
   }};
 
-const SvgAlertCircle = props => /*#__PURE__*/jsxs("svg", {
+const SvgAlertCircle = props => /*#__PURE__*/jsxDEV("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -171,16 +171,16 @@ const SvgAlertCircle = props => /*#__PURE__*/jsxs("svg", {
   strokeWidth: 2,
   viewBox: "0 0 24 24",
   ...props,
-  children: [/*#__PURE__*/jsx("circle", {
+  children: [/*#__PURE__*/jsxDEV("circle", {
     cx: 12,
     cy: 12,
     r: 10
-  }), /*#__PURE__*/jsx("path", {
+  }, void 0, false), /*#__PURE__*/jsxDEV("path", {
     d: "M12 8v4M12 16h.01"
-  })]
-});
+  }, void 0, false)]
+}, void 0, true);
 
-const SvgChevronsRight = props => /*#__PURE__*/jsx("svg", {
+const SvgChevronsRight = props => /*#__PURE__*/jsxDEV("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -191,12 +191,12 @@ const SvgChevronsRight = props => /*#__PURE__*/jsx("svg", {
   strokeWidth: 2,
   viewBox: "0 0 24 24",
   ...props,
-  children: /*#__PURE__*/jsx("path", {
+  children: /*#__PURE__*/jsxDEV("path", {
     d: "m13 17 5-5-5-5M6 17l5-5-5-5"
-  })
-});
+  }, void 0, false)
+}, void 0, false);
 
-const SvgXOctagon = props => /*#__PURE__*/jsx("svg", {
+const SvgXOctagon = props => /*#__PURE__*/jsxDEV("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -207,10 +207,10 @@ const SvgXOctagon = props => /*#__PURE__*/jsx("svg", {
   strokeWidth: 2,
   viewBox: "0 0 24 24",
   ...props,
-  children: /*#__PURE__*/jsx("path", {
+  children: /*#__PURE__*/jsxDEV("path", {
     d: "M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86zM15 9l-6 6M9 9l6 6"
-  })
-});
+  }, void 0, false)
+}, void 0, false);
 
 const Root = "div";
 function Message(props$1) {
@@ -219,20 +219,20 @@ function Message(props$1) {
     children,
     ...rest
   } = props$1;
-  return /*#__PURE__*/jsxs(Root, {
+  return /*#__PURE__*/jsxDEV(Root, {
     ...props(layoutStyles.block, styles.root, variant && styles[variant]),
     ...rest,
     children: [variant && {
-      info: /*#__PURE__*/jsx(SvgChevronsRight, {
+      info: /*#__PURE__*/jsxDEV(SvgChevronsRight, {
         className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-kggzb5"
-      }),
-      warning: /*#__PURE__*/jsx(SvgAlertCircle, {
+      }, void 0, false),
+      warning: /*#__PURE__*/jsxDEV(SvgAlertCircle, {
         className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1hw0bdt"
-      }),
-      alert: /*#__PURE__*/jsx(SvgXOctagon, {
+      }, void 0, false),
+      alert: /*#__PURE__*/jsxDEV(SvgXOctagon, {
         className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1co8gj4"
-      })
-    }[variant], /*#__PURE__*/jsx("div", {
+      }, void 0, false)
+    }[variant], /*#__PURE__*/jsxDEV("div", {
       className: "timvir-s-1iyjqo2 timvir-s-euugli",
       children: React.Children.toArray(children).map((child, index, array) => {
         if (/*#__PURE__*/React.isValidElement(child)) {
@@ -253,8 +253,8 @@ function Message(props$1) {
         }
         return child;
       })
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 const styles = {
   root: {

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

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

package/blocks/Swatch/Swatch.d.ts

@@ -29,5 +29,5 @@ interface Props extends React.ComponentPropsWithRef<typeof Root> {
      */
     ancestry?: string;
 }
-export declare function Swatch(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Swatch(props: Props): React.JSX.Element;
 export {};

package/blocks/Swatch/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useBlock } from 'timvir/core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxDEV } from 'react/jsx-dev-runtime';
 
 var styleq = {};
 var hasRequiredStyleq;
@@ -195,7 +195,7 @@ function Swatch(props$1) {
   const innerStyleProps = {
     className: "timvir-s-78zum5 timvir-s-dt5ytf timvir-s-l56j7k timvir-s-10l6tqk timvir-s-13vifvy timvir-s-3m8u43 timvir-s-1ey2m1c timvir-s-u96u03 timvir-s-zhuw26 timvir-s-84vhe8 timvir-s-1ypdohk timvir-s-1cum3z5"
   };
-  return /*#__PURE__*/jsx(Root, {
+  return /*#__PURE__*/jsxDEV(Root, {
     role: "button",
     ...rest,
     ...rootStyleProps,
@@ -214,26 +214,26 @@ function Swatch(props$1) {
       setLabel(name);
       onMouseLeave?.(ev);
     },
-    children: /*#__PURE__*/jsxs("div", {
+    children: /*#__PURE__*/jsxDEV("div", {
       ...innerStyleProps,
       style: {
         ...innerStyleProps.style,
         background: value,
         color: contrastValue
       },
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsxDEV("div", {
         className: "timvir-s-78zum5 timvir-s-1qughib timvir-s-6s0dn4 timvir-s-o5v014",
-        children: [label && /*#__PURE__*/jsx("div", {
+        children: [label && /*#__PURE__*/jsxDEV("div", {
           children: label
-        }), label === name && /*#__PURE__*/jsx("div", {
+        }, void 0, false), label === name && /*#__PURE__*/jsxDEV("div", {
           children: value
-        })]
-      }), ancestry && /*#__PURE__*/jsx("div", {
+        }, void 0, false)]
+      }, void 0, true), ancestry && /*#__PURE__*/jsxDEV("div", {
         className: "timvir-s-1yrsyyn timvir-s-byyjgo timvir-s-sfzzmd timvir-s-o5v014",
         children: ancestry
-      })]
-    })
-  });
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 }
 const styles = {
   root: {

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

@@ -1 +1 @@
-export default function Sample(): import("react/jsx-runtime").JSX.Element;
+export default function Sample(): import("react").JSX.Element;

package/blocks/Viewport/Viewport.d.ts

@@ -13,5 +13,5 @@ interface Props extends React.ComponentPropsWithRef<typeof Root> {
      */
     code?: string;
 }
-export declare function Viewport(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Viewport(props: Props): React.JSX.Element;
 export {};

package/blocks/Viewport/index.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useArticleComponents, useBlock } from 'timvir/core';
 import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
 import { Code } from 'timvir/blocks';
 
 var styleq = {};
@@ -180,7 +180,7 @@ function cx(...args) {
   return str;
 }
 
-const SvgCode = props => /*#__PURE__*/jsx("svg", {
+const SvgCode = props => /*#__PURE__*/jsxDEV("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -191,10 +191,10 @@ const SvgCode = props => /*#__PURE__*/jsx("svg", {
   strokeWidth: 2,
   viewBox: "0 0 24 24",
   ...props,
-  children: /*#__PURE__*/jsx("path", {
+  children: /*#__PURE__*/jsxDEV("path", {
     d: "m16 18 6-6-6-6M8 6l-6 6 6 6"
-  })
-});
+  }, void 0, false)
+}, void 0, false);
 
 function Caption(props$1) {
   const components = useArticleComponents();
@@ -203,17 +203,17 @@ function Caption(props$1) {
     code
   } = props$1;
   const [codeRef, setCodeRef] = React.useState(null);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("figcaption", {
+  return /*#__PURE__*/jsxDEV(Fragment, {
+    children: [/*#__PURE__*/jsxDEV("figcaption", {
       ...props(layoutStyles.block, styles$1.figcaption),
-      children: [/*#__PURE__*/jsxs("div", {
-        children: ["Source:", " ", /*#__PURE__*/jsx(components.a, {
+      children: [/*#__PURE__*/jsxDEV("div", {
+        children: ["Source:", " ", /*#__PURE__*/jsxDEV(components.a, {
           href: src,
           target: "_blank",
           rel: "noopener",
           children: src
-        })]
-      }), code && /*#__PURE__*/jsx("div", {
+        }, void 0, false)]
+      }, void 0, true), code && /*#__PURE__*/jsxDEV("div", {
         className: "timvir-s-1ypdohk timvir-s-gmrl4 timvir-s-1o7uuvo",
         onClick: () => {
           if (codeRef) {
@@ -230,24 +230,24 @@ function Caption(props$1) {
             }
           }
         },
-        children: /*#__PURE__*/jsx(SvgCode, {
+        children: /*#__PURE__*/jsxDEV(SvgCode, {
           width: "1.6em",
           height: "1.6em",
           className: "timvir-s-1lliihq"
-        })
-      })]
-    }), code && /*#__PURE__*/jsx("div", {
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true), code && /*#__PURE__*/jsxDEV("div", {
       className: "timvir-s-b3r6kr timvir-s-104cjix timvir-s-qtp20y timvir-s-g01cxk",
-      children: /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsxDEV("div", {
         ref: setCodeRef,
         className: "timvir-s-14vqqas",
-        children: /*#__PURE__*/jsx(Code, {
+        children: /*#__PURE__*/jsxDEV(Code, {
           language: "jsx",
           children: code
-        })
-      })
-    })]
-  });
+        }, void 0, false)
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
 }
 const styles$1 = {
   figcaption: {
@@ -269,7 +269,7 @@ function Handle(props) {
     edge,
     iframeRef
   } = props;
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsxDEV("div", {
     className: "timvir-s-diuk5s timvir-s-1ypdohk timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-l56j7k timvir-s-byyjgo timvir-s-1cdhzux timvir-s-1cum3z5 timvir-s-blhjk6 timvir-s-1o7uuvo timvir-s-10xrfx7 timvir-s-1kpm4h4",
     onMouseDown: () => {
       lock.current = edge;
@@ -281,16 +281,16 @@ function Handle(props) {
     style: {
       gridColumn
     },
-    children: /*#__PURE__*/jsx("svg", {
+    children: /*#__PURE__*/jsxDEV("svg", {
       width: "56",
       height: "56",
       viewBox: "0 0 56 56",
-      children: /*#__PURE__*/jsx("path", {
+      children: /*#__PURE__*/jsxDEV("path", {
         fill: "currentColor",
         d: "M27 18h2v20h-2V18zm-6 0h2v20h-2V18zm12 0h2v20h-2V18z"
-      })
-    })
-  });
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 
 const height = 16;
@@ -299,31 +299,31 @@ function Ruler(props) {
     containerWidth = 0,
     viewportWidth = 0
   } = props;
-  return /*#__PURE__*/jsxs("svg", {
+  return /*#__PURE__*/jsxDEV("svg", {
     viewBox: `-${containerWidth / 2} ${-height / 2} ${containerWidth} ${height}`,
     className: "timvir-s-h8yej3 timvir-s-1lliihq timvir-s-lup9mm timvir-s-14kudrl",
-    children: [/*#__PURE__*/jsx("rect", {
+    children: [/*#__PURE__*/jsxDEV("rect", {
       x: -containerWidth / 2,
       y: -height / 2,
       width: containerWidth,
       height: height,
       fill: "var(--timvir-secondary-background-color)"
-    }), /*#__PURE__*/jsx("line", {
+    }, void 0, false), /*#__PURE__*/jsxDEV("line", {
       x1: -viewportWidth / 2,
       x2: -viewportWidth / 2,
       y1: -height / 2,
       y2: height / 2,
       strokeWidth: 2,
       stroke: "var(--timvir-text-color)"
-    }), /*#__PURE__*/jsx("line", {
+    }, void 0, false), /*#__PURE__*/jsxDEV("line", {
       x1: viewportWidth / 2,
       x2: viewportWidth / 2,
       y1: -height / 2,
       y2: height / 2,
       strokeWidth: 2,
       stroke: "var(--timvir-text-color)"
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 
 const Root = "div";
@@ -390,8 +390,8 @@ function Viewport(props$1) {
     setMaxHeight(Math.max(height, maxHeight ?? 0));
   });
   const rootStyleProps = props(layoutStyles.block, layoutStyles.fullWidth, styles.root);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Root, {
+  return /*#__PURE__*/jsxDEV(Fragment, {
+    children: [/*#__PURE__*/jsxDEV(Root, {
       "data-timvir-b-viewport": true,
       ...rest,
       className: cx(!state.settled && "timvir-unsettled", className, rootStyleProps.className),
@@ -399,22 +399,22 @@ function Viewport(props$1) {
         ...rootStyleProps.style,
         ...rest.style
       },
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsxDEV("div", {
         ref: svgRef,
         className: "timvir-s-1n2onr6",
-        children: [/*#__PURE__*/jsx(Ruler, {
+        children: [/*#__PURE__*/jsxDEV(Ruler, {
           containerWidth: svgROE?.contentRect.width,
           viewportWidth: width
-        }), /*#__PURE__*/jsxs("div", {
+        }, void 0, false), /*#__PURE__*/jsxDEV("div", {
           className: "timvir-s-10l6tqk timvir-s-wa60dl timvir-s-1nrll8i timvir-s-11lhmoz timvir-s-ss6m8b",
           children: [width, "px"]
-        })]
-      }), /*#__PURE__*/jsx("div", {
+        }, void 0, true)]
+      }, void 0, true), /*#__PURE__*/jsxDEV("div", {
         className: "timvir-s-78zum5 timvir-s-1qjc9v5 timvir-s-l56j7k",
-        children: /*#__PURE__*/jsx("div", {
-          children: /*#__PURE__*/jsxs("div", {
+        children: /*#__PURE__*/jsxDEV("div", {
+          children: /*#__PURE__*/jsxDEV("div", {
             className: "timvir-s-18zih8k timvir-s-rvj5dj timvir-s-7tmw4v timvir-s-yy29n5 timvir-s-jv0b96",
-            children: [/*#__PURE__*/jsx("div", {
+            children: [/*#__PURE__*/jsxDEV("div", {
               ...{
                 0: {
                   className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-1h3vnj2 timvir-s-10r4kp7 timvir-s-b3r6kr"
@@ -427,7 +427,7 @@ function Viewport(props$1) {
                 width,
                 height
               },
-              children: /*#__PURE__*/jsx("iframe", {
+              children: /*#__PURE__*/jsxDEV("iframe", {
                 ref: iframeRef,
                 frameBorder: "0",
                 src: src,
@@ -471,35 +471,35 @@ function Viewport(props$1) {
                   opacity: height === undefined ? 0 : 1,
                   pointerEvents: height === undefined ? "none" : undefined
                 }
-              })
-            }), /*#__PURE__*/jsx(Handle, {
+              }, void 0, false)
+            }, void 0, false), /*#__PURE__*/jsxDEV(Handle, {
               gridColumn: "1",
               lock: lock,
               edge: "left",
               iframeRef: iframeRef
-            }), /*#__PURE__*/jsx(Handle, {
+            }, void 0, false), /*#__PURE__*/jsxDEV(Handle, {
               gridColumn: "3",
               lock: lock,
               edge: "right",
               iframeRef: iframeRef
-            })]
-          })
-        })
-      }), /*#__PURE__*/jsx(Ruler, {
+            }, void 0, false)]
+          }, void 0, true)
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/jsxDEV(Ruler, {
         containerWidth: svgROE?.contentRect.width,
         viewportWidth: width
-      })]
-    }), /*#__PURE__*/jsx(Caption, {
+      }, void 0, false)]
+    }, void 0, true), /*#__PURE__*/jsxDEV(Caption, {
       src: src,
       code: code
-    }), /*#__PURE__*/jsx("div", {
+    }, void 0, false), /*#__PURE__*/jsxDEV("div", {
       style: {
         gridColumn: "1 / -1",
         height: (maxHeight ?? 0) - (height ?? 0),
         transition: "height 0.16s"
       }
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 const styles = {
   root: {