timvir 0.2.50 → 0.2.52

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- **Make React 19 required** ([#3732](https://github.com/timvir/timvir/pull/3732)) - Up until now we've supported React 17, 18, and 19. React 19 has introduced changes that make components simpler. The version has been out for over a year. This version makes React 19 a required peer dependency.
+
 ## 0.2.50
 
 ### 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/Arbitrary.d.ts

@@ -7,5 +7,5 @@ declare const Root = "div";
 interface Props extends React.ComponentPropsWithRef<typeof Root> {
     ExhibitProps?: React.ComponentPropsWithRef<typeof Exhibit>;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Arbitrary(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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.d.ts

@@ -1,2 +1,2 @@
-export { default as Arbitrary } from "./Arbitrary";
+export { Arbitrary } from "./Arbitrary";
 export { useContext } from "./context";

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",
@@ -236,7 +181,7 @@ const Context = /*#__PURE__*/React.createContext({
 const useContext = () => React.useContext(Context);
 
 const Root = "div";
-function Arbitrary(props$1, ref) {
+function Arbitrary(props$1) {
   const block = useBlock(props$1);
   const {
     ExhibitProps,
@@ -245,13 +190,16 @@ function Arbitrary(props$1, ref) {
     ...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({
@@ -264,14 +212,15 @@ function Arbitrary(props$1, ref) {
     }
   }, [props$1.id, block.bus, value.seed]);
   const rootStyleProps = props(layoutStyles.block, styles.root);
-  return /*#__PURE__*/jsx(Context.Provider, {
-    value: value,
+  return /*#__PURE__*/jsx(Context, {
+    value: React.useMemo(() => ({
+      seed: value.seed
+    }), [value.seed]),
     children: /*#__PURE__*/jsxs(Root, {
-      ref: ref,
       "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,
@@ -288,12 +237,13 @@ function Arbitrary(props$1, ref) {
             "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 => {
@@ -303,11 +253,7 @@ function Arbitrary(props$1, ref) {
         }), /*#__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, {
@@ -320,7 +266,6 @@ function Arbitrary(props$1, ref) {
     })
   });
 }
-var Arbitrary_default = /*#__PURE__*/React.forwardRef(Arbitrary);
 const styles = {
   root: {
     kogj98: "timvir-s-9t3ola",
@@ -328,4 +273,4 @@ const styles = {
   }
 };
 
-export { Arbitrary_default as Arbitrary, useContext };
+export { Arbitrary, useContext };

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/Code.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     /**
      * The code that should be highlighted.
      */
@@ -21,5 +21,5 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
     highlightedLines?: Array<number>;
     caption?: React.ReactNode;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Code(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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/index.d.ts

@@ -1 +1 @@
-export { default as Code } from "./Code";
+export { Code } from "./Code";

package/blocks/Code/index.js

@@ -175,7 +175,7 @@ const layoutStyles = {
   }};
 
 const Root = "div";
-function Code(props$1, ref) {
+function Code(props$1) {
   const block = useBlock(props$1);
   const {
     children,
@@ -245,7 +245,6 @@ function Code(props$1, ref) {
   }, [children, language, highlightedLines]);
   const rootStyleProps = props(layoutStyles.block);
   return /*#__PURE__*/jsxs(Root, {
-    ref: ref,
     "data-timvir-b-code": true,
     ...rest,
     ...rootStyleProps,
@@ -267,6 +266,5 @@ function Code(props$1, ref) {
     })]
   });
 }
-var Code_default = /*#__PURE__*/React.forwardRef(Code);
 
-export { Code_default as Code };
+export { Code };

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/ColorBar.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     /**
      * Array of CSS Color values.
      */
@@ -14,5 +14,5 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
         ancestry?: string;
     }>;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function ColorBar(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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/index.d.ts

@@ -1 +1 @@
-export { default as ColorBar } from "./ColorBar";
+export { ColorBar } from "./ColorBar";

package/blocks/ColorBar/index.js

@@ -175,7 +175,7 @@ const layoutStyles = {
   }};
 
 const Root = "div";
-function ColorBar(props$1, ref) {
+function ColorBar(props$1) {
   const block = useBlock(props$1);
   const {
     values,
@@ -184,7 +184,6 @@ function ColorBar(props$1, ref) {
   const [selected, setSelected] = React.useState(undefined);
   const rootStyleProps = props(layoutStyles.block, styles.root);
   return /*#__PURE__*/jsxs(Root, {
-    ref: ref,
     ...rest,
     ...rootStyleProps,
     className: cx(rest.className, rootStyleProps.className),
@@ -227,7 +226,6 @@ function ColorBar(props$1, ref) {
     })]
   });
 }
-var ColorBar_default = /*#__PURE__*/React.forwardRef(ColorBar);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
@@ -250,4 +248,4 @@ const styles = {
   }
 };
 
-export { ColorBar_default as ColorBar };
+export { ColorBar };

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/ColorBook.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+import type * as React from "react";
 /**
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     chapters: Array<Chapter>;
     selectedChapter?: number;
     onSelectChapter?: (i: number) => void;
@@ -12,5 +12,5 @@ interface Chapter {
     name?: string;
     values: Array<string>;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function ColorBook(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/ColorBook/index.d.ts

@@ -1 +1 @@
-export { default as ColorBook } from "./ColorBook";
+export { ColorBook } from "./ColorBook";

package/blocks/ColorBook/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styleq = {};
@@ -161,7 +161,7 @@ const layoutStyles = {
   }};
 
 const Root = "div";
-function ColorBook(props$1, ref) {
+function ColorBook(props$1) {
   const {
     chapters,
     selectedChapter,
@@ -169,7 +169,6 @@ function ColorBook(props$1, ref) {
     ...rest
   } = props$1;
   return /*#__PURE__*/jsx(Root, {
-    ref: ref,
     ...rest,
     ...props(layoutStyles.block, styles.root),
     children: chapters.map(({
@@ -213,7 +212,6 @@ function ColorBook(props$1, ref) {
     }, i))
   });
 }
-var ColorBook_default = /*#__PURE__*/React.forwardRef(ColorBook);
 const styles = {
   root: {
     k1xSpc: "timvir-s-rvj5dj",
@@ -243,4 +241,4 @@ const styles = {
   }
 };
 
-export { ColorBook_default as ColorBook };
+export { ColorBook };

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 {