timvir 0.2.51 → 0.2.52

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # timvir
 
+## 0.2.52
+
+### Patch Changes
+
+- **Mark sub-path imports of dependencies as external** ([#3783](https://github.com/timvir/timvir/pull/3783)) - Due to a mistake in our Rollup config, we were inlining the `bytestring` package into our code. The `bytestring` package is declared as dependency and should be kept external. This change slightly decreases the bundle size of the `timvir/blocks/Arbitrary` module.
+
 ## 0.2.51
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tomáś Čarnecký
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/blocks/Arbitrary/docs/index.mdx

@@ -3,22 +3,31 @@ import { Exhibit } from "timvir/blocks";
 
 # Arbitrary
 
-The `<Arbitrary>` component manages a React context that contains a seed. This seed is displayed
-in an input field where users can copy it from.
-
-The component renders its children in an `<Exhibit>`. The children can make use of the seed in the
-React context to render themselves in a predictable way.
+> Renders children with a controllable random seed exposed via React context.
 
 <Sample variant="basic" />
 
+Use `<Arbitrary>` when you want to feed randomly generated props into a component.
+This is particularly useful for exploring edge cases or stress-testing a component's appearance without hand-authoring every combination.
+The block exposes a numeric seed via React context, so children can produce a stable, reproducible set of inputs for any given seed value.
+
+Libraries like [fast-check](https://fast-check.dev) provide composable random value generators.
+They provide generators for all basic types such as strings, numbers, arrays, and objects.
+You can combine those builtin generators to produce random values for your own types.
+
+## Features
+
+The seed is displayed in an input field where users can copy it or set a specific value.
+Children can consume it to render themselves in a predictable, reproducible way.
+
 ## Usage
 
 Given a component-under-test:
 
 ```jsx
-import { useContext } from "timvir/blocks/Arbitrary"
+import { useContext } from "timvir/blocks/Arbitrary";
 
-function Component() {
+function Sample() {
   const { seed } = useContext();
   return <div>{seed}</div>;
 }
@@ -26,11 +35,49 @@ function Component() {
 
 We can take it and display it inside an `<Arbitrary>` in a timvir doc page:
 
-```jsx
-import { Arbitrary } from "timvir/blocks"
-import { Component } from ".."
+```tsx
+import { Arbitrary } from "timvir/blocks";
+import { Component } from "../Component";
 
 <Arbitrary>
   <Component />
 </Arbitrary>
 ```
+
+## fast-check
+
+Let's assume you have a component that takes this Props shape.
+
+```ts
+interface Props {
+  enabled: boolean;
+  label: string;
+}
+
+export function Component(props: Props) {
+  // React component implementation
+}
+```
+
+First define a generator that produces values of that type.
+Then use the seed from the Arbitrary context to generate props for your component.
+
+```tsx
+import fc from "fast-check";
+import { useContext } from "timvir/blocks/Arbitrary";
+import { Component } from "../Component";
+
+const arbProps = fc.object({
+  enabled: fc.boolean(),
+  label: fc.string(),
+});
+
+function Sample() {
+  const { seed } = useContext();
+
+  const engine = new fc.Random(fc.xoroshiro128plus(seed));
+  const props = arbProps.generate(engine, undefined);
+
+  return <Component {...props} />;
+}
+```

package/blocks/Arbitrary/index.js

@@ -1,4 +1,5 @@
 'use client';
+import * as base58 from 'bytestring/base58';
 import * as React from 'react';
 import { Exhibit } from 'timvir/blocks';
 import { useBlock } from 'timvir/core';
@@ -166,62 +167,6 @@ function props(...styles) {
     return result;
 }
 
-const bytesToHex = (() => {
-  const s = Array.from({
-    length: 256
-  }).map((_, i) => i.toString(16).padStart(2, "0"));
-  return uint8a => [...uint8a].map(o => s[o]).join("");
-})();
-const alphabet = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
-function encode(input) {
-  if (input.length === 0) {
-    return "";
-  }
-  // Uint8Array -> BigInt (Big Endian)
-  let x = BigInt("0x" + bytesToHex(input));
-  const output = [];
-  while (x > 0n) {
-    const mod = x % 58n;
-    x = x / 58n;
-    output.push(alphabet[Number(mod)]);
-  }
-  for (let i = 0; input[i] === 0; i++) {
-    output.push(alphabet[0]);
-  }
-  return output.reverse().join("");
-}
-function decode(output) {
-  if (output.length === 0) {
-    return new Uint8Array();
-  }
-  const bytes = [0];
-  const letters = alphabet;
-  for (const char of output) {
-    const value = letters.indexOf(char);
-    if (value === undefined) {
-      throw new Error(`base58.decode received invalid input. Character '${char}' is not in the base58 alphabet.`);
-    }
-    for (let j = 0; j < bytes.length; j++) {
-      bytes[j] *= 58;
-    }
-    bytes[0] += value;
-    let carry = 0;
-    for (let j = 0; j < bytes.length; j++) {
-      bytes[j] += carry;
-      carry = bytes[j] >> 8;
-      bytes[j] &= 0xff;
-    }
-    while (carry > 0) {
-      bytes.push(carry & 0xff);
-      carry >>= 8;
-    }
-  }
-  for (let i = 0; i < output.length - 1 && output[i] === "1"; i++) {
-    bytes.push(0);
-  }
-  return new Uint8Array(bytes.reverse());
-}
-
 const layoutStyles = {
   block: {
     kBCFzs: "timvir-s-htle6",
@@ -245,13 +190,16 @@ function Arbitrary(props$1) {
     ...rest
   } = block.props;
   const [value, setValue] = React.useState({
+    settled: false,
     seed: 0
   });
-  React.useEffect(() => {
+  const refreshSeed = React.useCallback(() => {
     setValue({
+      settled: true,
       seed: crypto.getRandomValues(new Uint32Array(1))[0]
     });
   }, []);
+  React.useEffect(refreshSeed, [refreshSeed]);
   React.useEffect(() => {
     if (props$1.id) {
       block.bus.next({
@@ -265,12 +213,14 @@ function Arbitrary(props$1) {
   }, [props$1.id, block.bus, value.seed]);
   const rootStyleProps = props(layoutStyles.block, styles.root);
   return /*#__PURE__*/jsx(Context, {
-    value: value,
+    value: React.useMemo(() => ({
+      seed: value.seed
+    }), [value.seed]),
     children: /*#__PURE__*/jsxs(Root, {
       "data-timvir-b-arbitrary": true,
       ...rest,
       ...rootStyleProps,
-      className: cx(rootStyleProps.className, className),
+      className: cx(!value.settled && "timvir-unsettled", rootStyleProps.className, className),
       style: {
         margin: "1em 0",
         ...rootStyleProps.style,
@@ -287,12 +237,13 @@ function Arbitrary(props$1) {
             "data-timvir-b-arbitrary-seed": true,
             className: "timvir-s-c342km timvir-s-1a2a7pz timvir-s-ln7xf2 timvir-s-jbqb8w timvir-s-kh2ocl timvir-s-1717udv timvir-s-h8yej3 timvir-s-1heor9g",
             placeholder: "Seed",
-            value: encode(new TextEncoder().encode(`${value.seed}`)),
+            value: base58.encode(new TextEncoder().encode(`${value.seed}`)),
             readOnly: true,
             onPaste: ev => {
               const v = ev.clipboardData.getData("text/plain");
               setValue({
-                seed: +new TextDecoder().decode(decode(v))
+                settled: true,
+                seed: +new TextDecoder().decode(base58.decode(v))
               });
             },
             onFocus: ev => {
@@ -302,11 +253,7 @@ function Arbitrary(props$1) {
         }), /*#__PURE__*/jsx("button", {
           type: "button",
           className: "timvir-s-1a2a7pz timvir-s-u0aao5 timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1cum3z5 timvir-s-1d0dlzq timvir-s-1cdhzux timvir-s-ln7xf2 timvir-s-49kzi4 timvir-s-1dc5b4e timvir-s-13m658e timvir-s-1bx2y69",
-          onClick: () => {
-            setValue({
-              seed: crypto.getRandomValues(new Uint32Array(1))[0]
-            });
-          },
+          onClick: refreshSeed,
           children: "Refresh"
         })]
       }), /*#__PURE__*/jsx(Exhibit, {

package/blocks/Arbitrary/styles.css

@@ -77,7 +77,7 @@
     outline: none;
   }
 
-  .timvir-s-hqgf4x:hover:after, .timvir-s-1o0ppuw:focus-within:after, .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
+  .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
     border-color: var(--timvir-text-color);
   }
 }
@@ -127,8 +127,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-9flyx0 {
@@ -148,14 +148,14 @@
   }
 
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }
@@ -204,6 +204,10 @@
   .timvir-s-5hscyn:after {
     border-width: 1px;
   }
+
+  .timvir-s-1o0ppuw:focus-within:after, .timvir-s-hqgf4x:hover:after {
+    border-color: var(--timvir-text-color);
+  }
 }
 
 @layer priority8 {

package/blocks/Code/docs/index.mdx

@@ -3,7 +3,7 @@ import { Exhibit } from "../../Exhibit";
 
 # Code
 
-The `<Code>` component provides syntax highlighting for code blocks.
+> Syntax highlighting for code blocks.
 
 The component supports many different languages such as
 <Sample variant="toggle" language="javascript">JavaScript</Sample>, 

package/blocks/Code/styles.css

@@ -4,7 +4,7 @@
   }
 
   .timvir-s-idmeni {
-    --timvir-b-Code-inlinePadding: max(var(--timvir-b-Code-bleed), 8px);
+    --timvir-b-Code-inlinePadding: max(var(--timvir-b-Code-bleed),8px);
   }
 
   .timvir-s-1f9b50e {
@@ -28,7 +28,7 @@
   }
 
   .timvir-s-1etwjqo {
-    margin: 0 calc(-1 * var(--timvir-b-Code-bleed));
+    margin: 0 calc(-1*var(--timvir-b-Code-bleed));
   }
 
   .timvir-s-1ghz6dp {
@@ -119,8 +119,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-jkpybl {
@@ -128,14 +128,14 @@
   }
 
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/ColorBar/docs/index.mdx

@@ -3,7 +3,7 @@ import { Code, Exhibit } from "timvir/blocks";
 
 # ColorBar
 
-A `ColorBar` is a horizontal arrangement of swatches.
+> A horizontal arrangement of color swatches.
 
 <Sample variant="basic" />
 

package/blocks/ColorBar/styles.css

@@ -91,8 +91,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-dz4c1r {
@@ -124,14 +124,14 @@
   }
 
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/ColorBook/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styleq = {};

package/blocks/ColorBook/styles.css

@@ -83,8 +83,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-o5v014 {
@@ -99,27 +99,15 @@
     text-align: center;
   }
 
-  .timvir-s-115iamj:hover:before {
-    box-shadow: 0 0 0 2px #00000040;
-  }
-
-  .timvir-s-ach7vw:hover:before {
-    box-shadow: 0 0 0 2px var(--c-p-5);
-  }
-
-  .timvir-s-s2hnm7:hover:before {
-    opacity: 1;
-  }
-
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }
@@ -204,6 +192,18 @@
   .timvir-s-1hmns74:before {
     position: absolute;
   }
+
+  .timvir-s-115iamj:hover:before {
+    box-shadow: 0 0 0 2px #00000040;
+  }
+
+  .timvir-s-ach7vw:hover:before {
+    box-shadow: 0 0 0 2px var(--c-p-5);
+  }
+
+  .timvir-s-s2hnm7:hover:before {
+    opacity: 1;
+  }
 }
 
 @layer priority8 {

package/blocks/Cover/styles.css

@@ -47,8 +47,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-l1xv1r {
@@ -56,14 +56,14 @@
   }
 
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Exhibit/docs/index.mdx

@@ -1,22 +1,19 @@
-import { Grid } from "timvir/blocks";
+import { Code, Grid } from "timvir/blocks";
 
 # Exhibit
 
-The `<Exhibit>` is a block which presents something–usually a React component–in a nice way.
+> Presents a component on a checkered background with optional caption and controls.
 
-The presented element is placed on top of a checkered background.
-This helps illustrating which parts of the element are transparent, or if the element comes with a specific background color.
+<Sample variant="basic" />
 
-A bit of padding is included all around the presented element.
-Together with the checkered background, it makes the `<Exhibit>` block stand out next plain text or other blocks.
+The presented element is placed on a checkered background with padding all around.
+The checkered pattern makes transparency and background colors immediately visible, while the padding helps the block stand out from surrounding text or other blocks.
 You can tweak the bleed size, or disable the bleed altogether if you want to draw attention to the exact box size of the presented element itself.
 
 The caption, if provided, is placed below the block.
 Use it to explain what is being presented, or provide contex around it.
 Think of the `<Exhibit>` block as a `<figure>` + `<figcaption>` for React components.
 
-<Sample variant="basic" />
-
 ## Usage
 
 Import `Exhibit` from the `timvir/blocks` module, then use in a Timvir mdx page like so:
@@ -57,3 +54,9 @@ In those cases, you can force a light or dark theme with the `theme` prop.
     <Sample variant="theme" props={{ theme: "dark" }} />
   </div>
 </Grid>
+
+<Code language="jsx" caption="Use the theme prop to force a light or dark background, regardless of the user's color scheme preference.">
+  {`<Exhibit theme="light">
+  This component requires a light background.
+</Exhibit>`}
+</Code>

package/blocks/Exhibit/styles.css

@@ -66,7 +66,7 @@
   }
 
   .timvir-s-zqqpyx {
-    margin-inline: calc(-1 * var(--timvir-b-Exhibit-bleed));
+    margin-inline: calc(-1*var(--timvir-b-Exhibit-bleed));
   }
 }
 
@@ -103,8 +103,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-jkpybl {
@@ -112,14 +112,14 @@
   }
 
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Font/styles.css

@@ -91,8 +91,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1mzt3pk {
@@ -104,6 +104,7 @@
   }
 
   .timvir-s-1hx0egp {
+    -webkit-user-select: text;
     user-select: text;
   }
 
@@ -120,14 +121,14 @@
   }
 
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Grid/docs/index.mdx

@@ -4,7 +4,7 @@ import { fullWidth } from "timvir/core";
 
 # Grid
 
-> CSS grid with a predefined template (columns, gaps etc)
+> CSS grid with a predefined template (columns, gaps etc).
 
 ```
 <Grid>

package/blocks/Grid/styles.css

@@ -51,8 +51,8 @@
     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-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1ayh3g3 {
@@ -60,14 +60,14 @@
   }
 
   @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];
+    .timvir-s-5diife.timvir-s-5diife {
+      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];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Icon/styles.css

@@ -88,6 +88,7 @@
   }
 
   .timvir-s-87ps6o {
+    -webkit-user-select: none;
     user-select: none;
   }