timvir 0.2.1 → 0.2.3

package/blocks/Font/index.js

@@ -17,36 +17,41 @@ import * as Icons from 'react-feather';
  * @returns the combined, space separated class names that can be applied directly to the class attribute
  */
 const cx = function cx() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
+  const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
   const atomicClasses = {};
   const nonAtomicClasses = [];
-
-  for (const className of presentClassNames) {
+  presentClassNames.forEach(arg => {
     // className could be the output of a previous cx call, so split by ' ' first
-    const individualClassNames = className.split(' ');
-
-    for (const className of individualClassNames) {
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
       if (className.startsWith('atm_')) {
         const [, keyHash] = className.split('_');
         atomicClasses[keyHash] = className;
       } else {
         nonAtomicClasses.push(className);
       }
+    });
+  });
+  const result = []; // eslint-disable-next-line no-restricted-syntax
+
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
     }
   }
-
-  return [...Object.values(atomicClasses), ...nonAtomicClasses].join(' ');
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
 };
+var cx$1 = cx;
 
 /**
  * The underlying DOM element which is rendered by this component.
  */
-
 const Root = "div";
 const classes = {
   meta: "mby32tn"
 };
-
 function Font(props, ref) {
   const components = {
     h3: "h3",
@@ -69,7 +74,6 @@ function Font(props, ref) {
       const intervalId = setInterval(() => {
         if (fontSizeRef) {
           const innerText = `${name} – ${Math.round(parseInt(computedStyle.fontSize))}px`;
-
           if (fontSizeRef.innerText !== innerText) {
             fontSizeRef.innerText = innerText;
           }
@@ -82,7 +86,7 @@ function Font(props, ref) {
   }, [name, contentRef]);
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx(className, "rc7ivp5"),
+    className: cx$1(className, "rc7ivp5"),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.meta
@@ -96,14 +100,17 @@ function Font(props, ref) {
       if (infoRef && contentRef) {
         // const contentParent = contentRef.parentElement;
         const infoParent = infoRef.parentElement;
-
         if (infoParent.style.height === "0px") {
           infoParent.style.height = `${infoRef.getBoundingClientRect().height}px`;
-          infoParent.style.opacity = "1"; // contentParent.style.height = "0px";
+          infoParent.style.opacity = "1";
+
+          // contentParent.style.height = "0px";
           // contentParent.style.opacity = "0";
         } else {
           infoParent.style.height = "0px";
-          infoParent.style.opacity = "0"; // contentParent.style.height = window.getComputedStyle(contentRef).height;
+          infoParent.style.opacity = "0";
+
+          // contentParent.style.height = window.getComputedStyle(contentRef).height;
           // contentParent.style.opacity = "1";
         }
       }
@@ -131,11 +138,10 @@ function Font(props, ref) {
     ref: setContentRef,
     contentEditable: true,
     spellCheck: "false",
-    className: cx(font.className, "dx3nfmc"),
+    className: cx$1(font.className, "dx3nfmc"),
     style: font.style
   }, children || "The quick brown fox jumps over the lazy dog"))));
 }
-
 var Font$1 = /*#__PURE__*/React.forwardRef(Font);
 
 export { Font$1 as Font };

package/blocks/Font/styles.css

@@ -7,3 +7,4 @@
 .ddlplux{padding:0 0 16px;display:flex;flex-direction:column;}
 .dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
 .dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
+

package/blocks/Grid/index.js

@@ -15,33 +15,38 @@ import * as React from 'react';
  * @returns the combined, space separated class names that can be applied directly to the class attribute
  */
 const cx = function cx() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
+  const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
   const atomicClasses = {};
   const nonAtomicClasses = [];
-
-  for (const className of presentClassNames) {
+  presentClassNames.forEach(arg => {
     // className could be the output of a previous cx call, so split by ' ' first
-    const individualClassNames = className.split(' ');
-
-    for (const className of individualClassNames) {
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
       if (className.startsWith('atm_')) {
         const [, keyHash] = className.split('_');
         atomicClasses[keyHash] = className;
       } else {
         nonAtomicClasses.push(className);
       }
+    });
+  });
+  const result = []; // eslint-disable-next-line no-restricted-syntax
+
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
     }
   }
-
-  return [...Object.values(atomicClasses), ...nonAtomicClasses].join(' ');
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
 };
+var cx$1 = cx;
 
 /**
  * The underlying DOM element which is rendered by this component.
  */
-
 const Root = "div";
-
 function Grid(props, ref) {
   const {
     children,
@@ -50,11 +55,10 @@ function Grid(props, ref) {
   } = props;
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx(className, classes.root),
+    className: cx$1(className, classes.root),
     ...rest
   }, children);
 }
-
 var Grid$1 = /*#__PURE__*/React.forwardRef(Grid);
 const classes = {
   root: "r1c1ozpm"

package/blocks/Grid/styles.css

@@ -1 +1,2 @@
 .r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
+

package/blocks/Icon/index.js

@@ -16,33 +16,39 @@ import * as React from 'react';
  * @returns the combined, space separated class names that can be applied directly to the class attribute
  */
 const cx = function cx() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
+  const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
   const atomicClasses = {};
   const nonAtomicClasses = [];
-
-  for (const className of presentClassNames) {
+  presentClassNames.forEach(arg => {
     // className could be the output of a previous cx call, so split by ' ' first
-    const individualClassNames = className.split(' ');
-
-    for (const className of individualClassNames) {
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
       if (className.startsWith('atm_')) {
         const [, keyHash] = className.split('_');
         atomicClasses[keyHash] = className;
       } else {
         nonAtomicClasses.push(className);
       }
+    });
+  });
+  const result = []; // eslint-disable-next-line no-restricted-syntax
+
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
     }
   }
-
-  return [...Object.values(atomicClasses), ...nonAtomicClasses].join(' ');
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
 };
+var cx$1 = cx;
 
 const Root$1 = "div";
 const classes$1 = {
   backdrop: "b1a0xzv7",
   grid: "g10obtzp"
 };
-
 function Canvas(props) {
   const {
     width,
@@ -68,7 +74,6 @@ function Canvas(props) {
     }
   }, /*#__PURE__*/React.createElement(Component, null)));
 }
-
 function Grid({
   size,
   ...rest
@@ -76,7 +81,6 @@ function Grid({
   const halfSize = size / 2;
   const center = 60;
   const whiskerLength = Math.min(16, size / 2);
-
   const Corner = ({
     dx,
     dy
@@ -95,11 +99,8 @@ function Grid({
     strokeWidth: 1,
     stroke: "#EEEEEE"
   }));
-
   const add = (a, b) => a + b;
-
   const sub = (a, b) => a - b;
-
   return /*#__PURE__*/React.createElement("svg", {
     width: "120",
     height: "120",
@@ -133,7 +134,6 @@ const Root = "div";
 const classes = {
   name: "n1xsexuc"
 };
-
 function Icon(props, ref) {
   const {
     descriptor,
@@ -144,22 +144,19 @@ function Icon(props, ref) {
   const width = roe === null || roe === void 0 ? void 0 : roe.contentRect.width;
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx(className, "r1k0w618"),
+    className: cx$1(className, "r1k0w618"),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     ref: roRef
   }, width !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Canvas, {
     width: width,
     height: width,
-    size: 32
-    /*descriptor.instances[0].size as number */
-    ,
+    size: 32 /*descriptor.instances[0].size as number */,
     Component: descriptor.instances[0].Component
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.name
   }, descriptor.name))));
 }
-
 var Icon$1 = /*#__PURE__*/React.forwardRef(Icon);
 
 export { Icon$1 as Icon };

package/blocks/Icon/styles.css

@@ -1,5 +1,7 @@
-.n1xsexuc{margin-top:6px;white-space:nowrap;font-size:0.75rem;opacity:0;transition:all 0.16s;z-index:-1;color:var(--timvir-secondary-text-color);text-align:center;user-select:none;pointer-events:none;position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);}
-.r1k0w618{position:relative;z-index:1;}.r1k0w618 svg{display:block;}.r1k0w618:hover .n1xsexuc{opacity:1;bottom:-26px;color:var(--timvir-text-color);}.r1k0w618:active .n1xsexuc{bottom:-24px;}
 .b1a0xzv7{background:white;place-self:stretch;border-radius:2px;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0,0,0,0.1);}
 .g10obtzp{opacity:0;transition:all 0.2s;pointer-events:none;}
 .r1bcczis{display:grid;place-items:center;cursor:pointer;}.r1bcczis > *{grid-column:1;grid-row:1;}.r1bcczis:hover .b1a0xzv7{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 2px 4px rgba(16,22,26,0.1), 0 8px 24px rgba(16,22,26,0.2);}.r1bcczis:active .b1a0xzv7{margin:1px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 1px 1px rgba(16,22,26,0.2);}.r1bcczis:hover .g10obtzp{opacity:1;}
+
+.n1xsexuc{margin-top:6px;white-space:nowrap;font-size:0.75rem;opacity:0;transition:all 0.16s;z-index:-1;color:var(--timvir-secondary-text-color);text-align:center;user-select:none;pointer-events:none;position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);}
+.r1k0w618{position:relative;z-index:1;}.r1k0w618 svg{display:block;}.r1k0w618:hover .n1xsexuc{opacity:1;bottom:-26px;color:var(--timvir-text-color);}.r1k0w618:active .n1xsexuc{bottom:-24px;}
+

package/blocks/Message/index.js

@@ -16,33 +16,38 @@ import * as Icons from 'react-feather';
  * @returns the combined, space separated class names that can be applied directly to the class attribute
  */
 const cx = function cx() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
+  const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
   const atomicClasses = {};
   const nonAtomicClasses = [];
-
-  for (const className of presentClassNames) {
+  presentClassNames.forEach(arg => {
     // className could be the output of a previous cx call, so split by ' ' first
-    const individualClassNames = className.split(' ');
-
-    for (const className of individualClassNames) {
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
       if (className.startsWith('atm_')) {
         const [, keyHash] = className.split('_');
         atomicClasses[keyHash] = className;
       } else {
         nonAtomicClasses.push(className);
       }
+    });
+  });
+  const result = []; // eslint-disable-next-line no-restricted-syntax
+
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
     }
   }
-
-  return [...Object.values(atomicClasses), ...nonAtomicClasses].join(' ');
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
 };
+var cx$1 = cx;
 
 /**
  * The underlying DOM element which is rendered by this component.
  */
-
 const Root = "div";
-
 function Message(props, ref) {
   const {
     variant,
@@ -52,7 +57,7 @@ function Message(props, ref) {
   } = props;
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx(className, "r1ssql2z", variant !== undefined && variantStyles[variant]),
+    className: cx$1(className, "r1ssql2z", variant !== undefined && variantStyles[variant]),
     ...rest
   }, variant && /*#__PURE__*/React.createElement("div", {
     className: icon
@@ -70,7 +75,6 @@ function Message(props, ref) {
     className: "dhvu07f"
   }, children));
 }
-
 var Message$1 = /*#__PURE__*/React.forwardRef(Message);
 const icon = "i1dz18jz";
 const variantStyles = {

package/blocks/Message/styles.css

@@ -4,3 +4,4 @@
 .i41wipx{background:#f0f2fc;color:black;}.i41wipx .i1dz18jz{color:#2a47d5;}
 .wi7iy6{background:#fcf9f0;color:black;}.wi7iy6 .i1dz18jz{color:#a68521;}
 .a1d5oxsn{background:#fcf0f0;color:black;}.a1d5oxsn .i1dz18jz{color:#da4444;}
+

package/blocks/Swatch/index.js

@@ -16,33 +16,38 @@ import * as React from 'react';
  * @returns the combined, space separated class names that can be applied directly to the class attribute
  */
 const cx = function cx() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
+  const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
   const atomicClasses = {};
   const nonAtomicClasses = [];
-
-  for (const className of presentClassNames) {
+  presentClassNames.forEach(arg => {
     // className could be the output of a previous cx call, so split by ' ' first
-    const individualClassNames = className.split(' ');
-
-    for (const className of individualClassNames) {
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
       if (className.startsWith('atm_')) {
         const [, keyHash] = className.split('_');
         atomicClasses[keyHash] = className;
       } else {
         nonAtomicClasses.push(className);
       }
+    });
+  });
+  const result = []; // eslint-disable-next-line no-restricted-syntax
+
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
     }
   }
-
-  return [...Object.values(atomicClasses), ...nonAtomicClasses].join(' ');
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
 };
+var cx$1 = cx;
 
 /**
  * The underlying DOM element which is rendered by this component.
  */
-
 const Root = "div";
-
 function Swatch(props, ref) {
   const block = useBlock(props);
   const {
@@ -66,7 +71,7 @@ function Swatch(props, ref) {
     style: {
       height: ancestry ? 48 : 36
     },
-    className: cx(className, "r19bcggb"),
+    className: cx$1(className, "r19bcggb"),
     onClick: ev => {
       navigator.clipboard.writeText(value);
       setLabel("Copied to clipboard");
@@ -88,7 +93,6 @@ function Swatch(props, ref) {
     className: "dho7t08"
   }, ancestry)));
 }
-
 var Swatch$1 = /*#__PURE__*/React.forwardRef(Swatch);
 
 export { Swatch$1 as Swatch };

package/blocks/Swatch/styles.css

@@ -2,3 +2,4 @@
 .dhgsgky{display:flex;flex-direction:column;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;transition:all 0.16s;padding:0px 12px;cursor:pointer;}
 .dobecwk{display:flex;justify-content:space-between;align-items:center;line-height:1;}
 .dho7t08{padding-top:6px;opacity:0.5;font-size:0.8em;line-height:1;}
+

package/blocks/Viewport/index.js

@@ -20,26 +20,33 @@ import * as Icons from 'react-feather';
  * @returns the combined, space separated class names that can be applied directly to the class attribute
  */
 const cx = function cx() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
+  const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
   const atomicClasses = {};
   const nonAtomicClasses = [];
-
-  for (const className of presentClassNames) {
+  presentClassNames.forEach(arg => {
     // className could be the output of a previous cx call, so split by ' ' first
-    const individualClassNames = className.split(' ');
-
-    for (const className of individualClassNames) {
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
       if (className.startsWith('atm_')) {
         const [, keyHash] = className.split('_');
         atomicClasses[keyHash] = className;
       } else {
         nonAtomicClasses.push(className);
       }
+    });
+  });
+  const result = []; // eslint-disable-next-line no-restricted-syntax
+
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
     }
   }
-
-  return [...Object.values(atomicClasses), ...nonAtomicClasses].join(' ');
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
 };
+var cx$1 = cx;
 
 function Caption(props) {
   const components = {
@@ -61,7 +68,6 @@ function Caption(props) {
     onClick: () => {
       if (codeRef) {
         const infoParent = codeRef.parentElement;
-
         if (infoParent.style.height === "0px") {
           infoParent.style.height = `${codeRef.getBoundingClientRect().height}px`;
           infoParent.style.opacity = "1";
@@ -74,19 +80,18 @@ function Caption(props) {
   }, /*#__PURE__*/React.createElement(Icons.Code, {
     size: "1.6em"
   }))), code && /*#__PURE__*/React.createElement("div", {
-    className: cx("d1enfo6"),
+    className: cx$1("d1enfo6"),
     style: {
       height: 0,
       opacity: 0
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: setCodeRef,
-    className: cx("d1watfn6")
+    className: cx$1("d1watfn6")
   }, /*#__PURE__*/React.createElement(Code, {
     language: "jsx"
   }, code))));
 }
-
 var Caption$1 = /*#__PURE__*/React.memo(Caption);
 
 function Handle(props) {
@@ -100,7 +105,6 @@ function Handle(props) {
     className: "d1mmz2b6",
     onMouseDown: () => {
       lock.current = edge;
-
       if (iframeRef.current) {
         iframeRef.current.style.userSelect = "none";
         iframeRef.current.style.pointerEvents = "none";
@@ -118,11 +122,9 @@ function Handle(props) {
     d: "M27 18h2v20h-2V18zm-6 0h2v20h-2V18zm12 0h2v20h-2V18z"
   })));
 }
-
 var Handle$1 = /*#__PURE__*/React.memo(Handle);
 
 const height = 16;
-
 function Ruler(props) {
   const {
     containerWidth = 0,
@@ -157,12 +159,9 @@ function Ruler(props) {
 /**
  * The underlying DOM element which is rendered by this component.
  */
-
 const Root = "div";
-
 function Viewport(props, ref) {
   var _iframeRef$current, _iframeRef$current$co;
-
   const block = useBlock(props);
   const {
     src,
@@ -170,16 +169,16 @@ function Viewport(props, ref) {
     className,
     ...rest
   } = block.props;
+
   /*
    * The container measures the width of the main column. It is used to initialize
    * the default width.
    */
-
   const [containerRef, containerROE] = useResizeObserverEntry();
+
   /*
    * The SVG spans across the full width. It is used to restrict the max width.
    */
-
   const [svgRef, svgROE] = useResizeObserverEntry();
   const [height, setHeight] = React.useState(undefined);
   const [maxHeight, setMaxHeight] = React.useState(undefined);
@@ -189,7 +188,6 @@ function Viewport(props, ref) {
       setWidth(svgROE.contentRect.width);
     } else if (svgROE) {
       const max = svgROE.contentRect.width - 2 * (56 + 8 + 8);
-
       if (width !== undefined && width > max) {
         setWidth(max);
       }
@@ -204,7 +202,6 @@ function Viewport(props, ref) {
         const max = svgROE.contentRect.width - 2 * (56 + 8 + 8);
         setWidth(width => {
           var _left$right$lock$curr;
-
           return Math.min(max, Math.max(320, (width !== null && width !== void 0 ? width : 0) + 2 * ev.movementX * ((_left$right$lock$curr = {
             left: -1,
             right: 1
@@ -212,7 +209,6 @@ function Viewport(props, ref) {
         });
       }
     };
-
     const onMouseUp = () => {
       lock.current = "";
       iframeRef.current.style.userSelect = "";
@@ -222,7 +218,6 @@ function Viewport(props, ref) {
         return height;
       });
     };
-
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
     return () => {
@@ -237,6 +232,7 @@ function Viewport(props, ref) {
       setMaxHeight(Math.max(height, maxHeight !== null && maxHeight !== void 0 ? maxHeight : 0));
     }
   });
+
   /*
    * The <html> element of the iframe document is the one which we observe and
    * measure. We do not use <body> because that may have margins around which would
@@ -245,7 +241,6 @@ function Viewport(props, ref) {
    * We hope that nobody intentionally adds margins around the <html> element. By default
    * it doesn't have.
    */
-
   const html = (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : (_iframeRef$current$co = _iframeRef$current.contentDocument) === null || _iframeRef$current$co === void 0 ? void 0 : _iframeRef$current$co.querySelector("html");
   React.useEffect(() => {
     if (html) {
@@ -257,7 +252,7 @@ function Viewport(props, ref) {
   }), /*#__PURE__*/React.createElement(Root, {
     ref: ref,
     ...rest,
-    className: cx(className, fullWidth, "r1ouu0bc")
+    className: cx$1(className, fullWidth, "r1ouu0bc")
   }, /*#__PURE__*/React.createElement("div", {
     ref: svgRef,
     className: "d1uj09ka"
@@ -271,7 +266,7 @@ function Viewport(props, ref) {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "d17q9rbm"
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx("daubpa6", height === undefined && "d1d22s19"),
+    className: cx$1("daubpa6", height === undefined && "d1d22s19"),
     style: {
       width,
       height
@@ -282,14 +277,12 @@ function Viewport(props, ref) {
     src: src,
     onLoad: () => {
       var _iframeRef$current2, _iframeRef$current2$c;
-
       /*
        * Once the iframe has loaded, initialize the height/maxHeight.
        * The <html> element may not exist though (eg. the page failed
        * to load, or it's not a HTML page).
        */
       const html = (_iframeRef$current2 = iframeRef.current) === null || _iframeRef$current2 === void 0 ? void 0 : (_iframeRef$current2$c = _iframeRef$current2.contentDocument) === null || _iframeRef$current2$c === void 0 ? void 0 : _iframeRef$current2$c.querySelector("html");
-
       if (html) {
         const {
           height
@@ -326,7 +319,6 @@ function Viewport(props, ref) {
     }
   }));
 }
-
 var Viewport$1 = /*#__PURE__*/React.forwardRef(Viewport);
 
 export { Viewport$1 as Viewport };

package/blocks/Viewport/styles.css

@@ -1,3 +1,12 @@
+.fgdj0yb{font-size:0.75rem;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
+.d1rc4zjh{cursor:pointer;}.d1rc4zjh:hover{color:var(--c-p-4);opacity:1;}.d1rc4zjh > svg{display:block;}
+.d1enfo6{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.d1watfn6{margin-top:12px;}
+
+.d1mmz2b6{grid-row:1 / span 3;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.5;color:var(--timvir-text-color);border-radius:2px;transition:all 0.2s cubic-bezier(0.4,1,0.75,0.9);}.d1mmz2b6:hover{opacity:1;box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);}.d1mmz2b6:active{box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 0 0 rgba(16,22,26,0),0 1px 1px rgba(16,22,26,0.2);}
+
+.ssl4j8q{width:100%;display:block;height:16px;margin:8px 0;}
+
 .r1ouu0bc{contain:layout;}
 .d1uj09ka{position:relative;}
 .d2uawyc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
@@ -6,9 +15,4 @@
 .daubpa6{grid-column:2 / span 1;grid-row:2 / span 1;position:relative;flex:1;height:100px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);transition:height 0.16s;overflow:hidden;}
 .d1d22s19{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer-d1d22s19;animation-timing-function:linear;background-size:150vw 100px;background-image:linear-gradient(to right,#fafafa 0%,#f4f4f4 25%,#fafafa 40%);box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2);border-radius:1px;}@keyframes shimmer-d1d22s19{0%{background-position:-60vw 0;}40%{background-position:85vw 0;}100%{background-position:85vw 0;}}
 .i11uos8q{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity 0.2s;}
-.fgdj0yb{font-size:0.75rem;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
-.d1rc4zjh{cursor:pointer;}.d1rc4zjh:hover{color:var(--c-p-4);opacity:1;}.d1rc4zjh > svg{display:block;}
-.d1enfo6{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
-.d1watfn6{margin-top:12px;}
-.d1mmz2b6{grid-row:1 / span 3;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.5;color:var(--timvir-text-color);border-radius:2px;transition:all 0.2s cubic-bezier(0.4,1,0.75,0.9);}.d1mmz2b6:hover{opacity:1;box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);}.d1mmz2b6:active{box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 0 0 rgba(16,22,26,0),0 1px 1px rgba(16,22,26,0.2);}
-.ssl4j8q{width:100%;display:block;height:16px;margin:8px 0;}
+