timvir 0.2.39 → 0.2.43

package/blocks/Grid/index.js

@@ -1,55 +1,205 @@
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-// src/css.ts
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
 
-// src/cx.ts
-var cx = function cx2() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
-  const atomicClasses = {};
-  const nonAtomicClasses = [];
-  presentClassNames.forEach((arg) => {
-    const individualClassNames = arg ? arg.split(" ") : [];
-    individualClassNames.forEach((className) => {
-      if (className.startsWith("atm_")) {
-        const [, keyHash] = className.split("_");
-        atomicClasses[keyHash] = className;
-      } else {
-        nonAtomicClasses.push(className);
-      }
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+    if (hasRequiredStyleq) return styleq;
+    hasRequiredStyleq = 1;
+    Object.defineProperty(styleq, "__esModule", {
+        value: true
     });
-  });
-  const result = [];
-  for (const keyHash in atomicClasses) {
-    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
-      result.push(atomicClasses[keyHash]);
+    styleq.styleq = void 0;
+    var cache = new WeakMap();
+    var compiledKey = '$$css';
+    function createStyleq(options) {
+        var disableCache;
+        var disableMix;
+        var transform;
+        if (options != null) {
+            disableCache = options.disableCache === true;
+            disableMix = options.disableMix === true;
+            transform = options.transform;
+        }
+        return function styleq() {
+            var definedProperties = [];
+            var className = '';
+            var inlineStyle = null;
+            var debugString = '';
+            var nextCache = disableCache ? null : cache;
+            var styles = new Array(arguments.length);
+            for(var i = 0; i < arguments.length; i++){
+                styles[i] = arguments[i];
+            }
+            while(styles.length > 0){
+                var possibleStyle = styles.pop();
+                if (possibleStyle == null || possibleStyle === false) {
+                    continue;
+                }
+                if (Array.isArray(possibleStyle)) {
+                    for(var _i = 0; _i < possibleStyle.length; _i++){
+                        styles.push(possibleStyle[_i]);
+                    }
+                    continue;
+                }
+                var style = transform != null ? transform(possibleStyle) : possibleStyle;
+                if (style.$$css != null) {
+                    var classNameChunk = '';
+                    if (nextCache != null && nextCache.has(style)) {
+                        var cacheEntry = nextCache.get(style);
+                        if (cacheEntry != null) {
+                            classNameChunk = cacheEntry[0];
+                            debugString = cacheEntry[2];
+                            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+                            nextCache = cacheEntry[3];
+                        }
+                    } else {
+                        var definedPropertiesChunk = [];
+                        for(var prop in style){
+                            var value = style[prop];
+                            if (prop === compiledKey) {
+                                var compiledKeyValue = style[prop];
+                                if (compiledKeyValue !== true) {
+                                    debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+                                }
+                                continue;
+                            }
+                            if (typeof value === 'string' || value === null) {
+                                if (!definedProperties.includes(prop)) {
+                                    definedProperties.push(prop);
+                                    if (nextCache != null) {
+                                        definedPropertiesChunk.push(prop);
+                                    }
+                                    if (typeof value === 'string') {
+                                        classNameChunk += classNameChunk ? ' ' + value : value;
+                                    }
+                                }
+                            } else {
+                                console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+                            }
+                        }
+                        if (nextCache != null) {
+                            var weakMap = new WeakMap();
+                            nextCache.set(style, [
+                                classNameChunk,
+                                definedPropertiesChunk,
+                                debugString,
+                                weakMap
+                            ]);
+                            nextCache = weakMap;
+                        }
+                    }
+                    if (classNameChunk) {
+                        className = className ? classNameChunk + ' ' + className : classNameChunk;
+                    }
+                } else {
+                    if (disableMix) {
+                        if (inlineStyle == null) {
+                            inlineStyle = {};
+                        }
+                        inlineStyle = Object.assign({}, style, inlineStyle);
+                    } else {
+                        var subStyle = null;
+                        for(var _prop in style){
+                            var _value = style[_prop];
+                            if (_value !== undefined) {
+                                if (!definedProperties.includes(_prop)) {
+                                    if (_value != null) {
+                                        if (inlineStyle == null) {
+                                            inlineStyle = {};
+                                        }
+                                        if (subStyle == null) {
+                                            subStyle = {};
+                                        }
+                                        subStyle[_prop] = _value;
+                                    }
+                                    definedProperties.push(_prop);
+                                    nextCache = null;
+                                }
+                            }
+                        }
+                        if (subStyle != null) {
+                            inlineStyle = Object.assign(subStyle, inlineStyle);
+                        }
+                    }
+                }
+            }
+            var styleProps = [
+                className,
+                inlineStyle,
+                debugString
+            ];
+            return styleProps;
+        };
     }
-  }
-  result.push(...nonAtomicClasses);
-  return result.join(" ");
-};
-var cx_default = cx;
+    var styleq$1 = styleq.styleq = createStyleq();
+    styleq$1.factory = createStyleq;
+    return styleq;
+}
+var styleqExports = requireStyleq();
+function props(...styles) {
+    const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+    const result = {};
+    if (className != null && className !== '') {
+        result.className = className;
+    }
+    if (style != null && Object.keys(style).length > 0) {
+        result.style = style;
+    }
+    if (dataStyleSrc != null && dataStyleSrc !== '') {
+        result['data-style-src'] = dataStyleSrc;
+    }
+    return result;
+}
+
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
-function Grid(props, ref) {
+function Grid(props$1, ref) {
   const {
     children,
     className,
     ...rest
-  } = props;
+  } = props$1;
+  const rootStyleProps = props(layoutStyles.block, styles.root);
   return /*#__PURE__*/jsx(Root, {
     ref: ref,
-    className: cx_default(className, classes.root),
     ...rest,
+    ...rootStyleProps,
+    style: {
+      ...rootStyleProps.style,
+      ...rest.style
+    },
+    className: cx(className, rootStyleProps.className),
     children: children
   });
 }
 var Grid$1 = /*#__PURE__*/React.forwardRef(Grid);
-const classes = {
-  root: "r1c1ozpm"
+const styles = {
+  root: {
+    k1xSpc: "timvir-s-rvj5dj",
+    kumcoG: "timvir-s-1ayh3g3",
+    kOIVth: "timvir-s-fww3rt",
+    "--timvir-margin": "timvir-s-1cca2ej",
+    $$css: true
+  }
 };
 
 export { Grid$1 as Grid };

package/blocks/Grid/styles.css

@@ -1,2 +1,79 @@
-.r1c1ozpm{display:-ms-grid;display:grid;-ms-grid-columns:repeat(auto-fit, minmax(220px, 1fr));grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:var(--timvir-page-margin, 24px);--timvir-margin:calc(var(--timvir-page-margin, 24px) * 0.5);}
+@layer priority1 {
+  .timvir-s-1cca2ej {
+    --timvir-margin: calc(var(--timvir-page-margin, 24px) * .5);
+  }
 
+  .timvir-s-1f9b50e {
+    --timvir-margin: var(--timvir-page-margin);
+  }
+
+  .timvir-s-1hz7z82 {
+    --timvir-page-margin: 16px;
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-1i3za4p.timvir-s-1i3za4p {
+      --timvir-page-margin: 24px;
+    }
+  }
+}
+
+@layer priority2 {
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-fww3rt {
+    gap: var(--timvir-page-margin, 24px);
+  }
+
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-3xbxsf {
+    grid-auto-rows: min-content;
+  }
+
+  .timvir-s-12c0rpe {
+    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  }
+
+  .timvir-s-1ayh3g3 {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+
+  @media (width >= 72rem) {
+    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
+      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    }
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-9q0i6z.timvir-s-9q0i6z {
+      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    }
+  }
+}
+
+@layer priority5 {
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+}

package/blocks/Icon/docs/index.mdx

@@ -17,7 +17,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
             {
               size: 12,
               Component: () => (
-                <svg width="12px" height="12px" viewBox="0 0 12 12">
+                <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
                   <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
                 </svg>
               ),
@@ -42,7 +42,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -57,7 +57,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -72,7 +72,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -87,7 +87,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -102,7 +102,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -117,7 +117,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -132,7 +132,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -147,7 +147,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -162,7 +162,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -177,7 +177,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -192,7 +192,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),
@@ -207,7 +207,7 @@ The `<Icon>` component is used to display a single, square component. Usually a
         {
           size: 12,
           Component: () => (
-            <svg width="12px" height="12px" viewBox="0 0 12 12">
+            <svg width="12px" height="12px" viewBox="0 0 12 12" style={{ display: "block" }}>
               <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
             </svg>
           ),

package/blocks/Icon/index.js

@@ -1,41 +1,20 @@
+'use client';
 import { useResizeObserverEntry } from 'timvir/hooks';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// src/css.ts
-
-// src/cx.ts
-var cx = function cx2() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
-  const atomicClasses = {};
-  const nonAtomicClasses = [];
-  presentClassNames.forEach((arg) => {
-    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 = [];
-  for (const keyHash in atomicClasses) {
-    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
-      result.push(atomicClasses[keyHash]);
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
     }
   }
-  result.push(...nonAtomicClasses);
-  return result.join(" ");
-};
-var cx_default = cx;
+  return str;
+}
 
 const Root$1 = "div";
-const classes$1 = {
-  backdrop: "b1a0xzv7",
-  grid: "g10obtzp"
-};
 function Canvas(props) {
   const {
     width,
@@ -44,18 +23,20 @@ function Canvas(props) {
     Component
   } = props;
   return /*#__PURE__*/jsxs(Root$1, {
-    className: "r1bcczis",
+    className: "timvir-s-rvj5dj timvir-s-1ku5rj1 timvir-s-1ypdohk timvir-s-dtfvks timvir-s-d2wi23",
     style: {
       width,
       height
     },
     children: [/*#__PURE__*/jsx("div", {
-      className: classes$1.backdrop
+      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, {
-      className: classes$1.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", {
       style: {
+        gridColumn: 1,
+        gridRow: 1,
         fontSize: `${size}px`,
         zIndex: 1
       },
@@ -119,35 +100,36 @@ function Grid({
   });
 }
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
-const classes = {
-  name: "n1xsexuc"
-};
 function Icon(props, ref) {
   const {
     descriptor,
-    className,
     ...rest
   } = props;
   const [roRef, roe] = useResizeObserverEntry();
   const width = roe?.contentRect.width;
+  const rootStyleProps = {
+    className: "timvir-s-1n2onr6 timvir-s-1vjfegm timvir-s-dtfvks timvir-s-d2wi23"
+  };
   return /*#__PURE__*/jsx(Root, {
     ref: ref,
-    className: cx_default(className, "r1k0w618"),
     ...rest,
+    ...rootStyleProps,
+    className: cx(rest.className, rootStyleProps.className),
+    style: {
+      ...rootStyleProps.style,
+      ...rest.style
+    },
     children: /*#__PURE__*/jsx("div", {
       ref: roRef,
       children: width !== undefined && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(Canvas, {
           width: width,
           height: width,
-          size: 32 /*descriptor.instances[0].size as number */,
+          size: 32,
           Component: descriptor.instances[0].Component
         }), /*#__PURE__*/jsx("div", {
-          className: classes.name,
+          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
         })]
       })

package/blocks/Icon/styles.css

@@ -1,7 +1,119 @@
-.b1a0xzv7{background:white;place-self:stretch;border-radius:2px;-webkit-transition:all 0.2s;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1);}
-.g10obtzp{opacity:0;-webkit-transition:all 0.2s;transition:all 0.2s;pointer-events:none;}
-.r1bcczis{display:-ms-grid;display:grid;place-items:center;cursor:pointer;}.r1bcczis>*{-ms-grid-column:1;grid-column:1;-ms-grid-row: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;}
+@layer priority1 {
+  .timvir-s-dtfvks {
+    --timvir-b-Icon-hover: 0;
+  }
 
-.n1xsexuc{margin-top:6px;white-space:nowrap;font-size:0.75rem;opacity:0;-webkit-transition:all 0.16s;transition:all 0.16s;z-index:-1;color:var(--timvir-secondary-text-color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;position:absolute;left:50%;bottom:-20px;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);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;}
+  .timvir-s-d2wi23:hover {
+    --timvir-b-Icon-hover: 1;
+  }
+}
 
+@layer priority2 {
+  .timvir-s-1cum3z5 {
+    border-radius: 2px;
+  }
+
+  .timvir-s-gkxs2y {
+    grid-column: 1;
+  }
+
+  .timvir-s-1ms6mhf {
+    grid-row: 1;
+  }
+
+  .timvir-s-1ku5rj1 {
+    place-items: center;
+  }
+
+  .timvir-s-1lhehjl {
+    place-self: stretch stretch;
+  }
+
+  .timvir-s-zhuw26 {
+    transition: all .16s;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-12peec7 {
+    background-color: #fff;
+  }
+
+  .timvir-s-1ww5jgt {
+    box-shadow: 0 0 #0000001a;
+  }
+
+  .timvir-s-1cdhzux {
+    color: var(--timvir-text-color);
+  }
+
+  .timvir-s-1ypdohk {
+    cursor: pointer;
+  }
+
+  .timvir-s-1lliihq {
+    display: block;
+  }
+
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-boafo0 {
+    font-size: .75rem;
+  }
+
+  .timvir-s-1j5ulbg {
+    opacity: var(--timvir-b-Icon-hover);
+  }
+
+  .timvir-s-47corl {
+    pointer-events: none;
+  }
+
+  .timvir-s-10l6tqk {
+    position: absolute;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  .timvir-s-2b8uid {
+    text-align: center;
+  }
+
+  .timvir-s-1nc5ocm {
+    transform: translate(-50%);
+  }
+
+  .timvir-s-87ps6o {
+    user-select: none;
+  }
+
+  .timvir-s-uxw1ft {
+    white-space: nowrap;
+  }
+
+  .timvir-s-8knxv4 {
+    z-index: -1;
+  }
+
+  .timvir-s-1vjfegm {
+    z-index: 1;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-1kuhel0 {
+    bottom: -20px;
+  }
+
+  .timvir-s-1nrll8i {
+    left: 50%;
+  }
+
+  .timvir-s-dj266r {
+    margin-top: 0;
+  }
+}