timvir 0.1.42

package/blocks/ColorBar/docs/index.mdx

@@ -0,0 +1,128 @@
+import { ColorBar } from "..";
+import { Code, Exhibit } from "timvir/blocks";
+
+# ColorBar
+
+A `ColorBar` is a horizontal arrangement of swatches.
+
+<Exhibit>
+  <ColorBar
+    values={[
+      "#D6CCFF",
+      "#C8BCF5",
+      "#BAACEB",
+      "#AC9CE1",
+      "#9E8CD7",
+      "#907DCD",
+      "#826EC3",
+      "#745FBA",
+      "#6550B0",
+      "#5642A6",
+    ]}
+  />
+</Exhibit>
+
+<Exhibit>
+  <ColorBar values={["#a0dbc2", "#60c19f", "#1a896b", "#0e6d54"]} />
+</Exhibit>
+
+<Code language="jsx" caption="Pass an array of color values to the component." highlightedLines={[5]}>
+  <Sample variant="basic" as="source" />
+</Code>
+
+The ColorBar works comfortably with as few as two colors and as many as 20
+
+<Exhibit caption="Two colors in a ColorBar">
+  <ColorBar
+    values={[
+      { value: "#FFE4A0", name: "Yellow Submarine", ancestry: "Yellow 001" },
+      { value: "#A67908", name: "Yellow Spaceship", ancestry: "Yellow 999", contrastValue: "white" },
+    ]}
+  />
+</Exhibit>
+
+<Exhibit caption="20 colors in a ColorBar">
+  <ColorBar
+    values={[
+      "#FFE4A0",
+      "#FBDE98",
+      "#F6D891",
+      "#F2D28A",
+      "#EDCC82",
+      "#E8C77B",
+      "#E4C173",
+      "#DFBB6C",
+      "#DBB565",
+      "#D6B05D",
+      "#D1AA56",
+      "#CDA54F",
+      "#C89F47",
+      "#C39940",
+      "#BE9438",
+      "#BA8E30",
+      "#B58928",
+      "#B0841F",
+      "#AB7E15",
+      "#A67908",
+    ]}
+  />
+</Exhibit>
+
+## Text Colors
+
+These are the main text colors that are used in our website. We have a **textPrimary** color for
+headings and body text, **textSecondary** for captions and meta lines, and a third (yet unamed)
+text color for card descriptions.
+
+All text colors are taken from the **Gray** palette.
+
+<Exhibit caption="Text Colors" style={{ margin: "10px 0 20px 0" }}>
+  <ColorBar
+    values={[
+      { value: "rgba(0, 0, 13, 0.89)", name: "textPrimary", ancestry: "Gray 01", contrastValue: "white" },
+      { value: "rgba(0, 0, 13, 0.69)", name: "???? (unnamed)", ancestry: "Gray 03", contrastValue: "white" },
+      { value: "rgba(0, 0, 13, 0.49)", name: "textSecondary", ancestry: "Gray 05" },
+    ]}
+  />
+</Exhibit>
+<Exhibit caption="Gray Color Palette (00 – 09)" style={{ margin: "-12px 0 20px 0" }}>
+  <ColorBar
+    values={[
+      { value: "rgba(0, 0, 13, 0.99)", name: "Gray 00", contrastValue: "white" },
+      { value: "rgba(0, 0, 13, 0.89)", name: "Gray 01", contrastValue: "white" },
+      { value: "rgba(0, 0, 13, 0.79)", name: "Gray 02", contrastValue: "white" },
+      { value: "rgba(0, 0, 13, 0.69)", name: "Gray 03", contrastValue: "white" },
+      { value: "rgba(0, 0, 13, 0.59)", name: "Gray 04", contrastValue: "white" },
+      { value: "rgba(0, 0, 13, 0.49)", name: "Gray 05", contrastValue: "black" },
+      { value: "rgba(0, 0, 13, 0.39)", name: "Gray 06", contrastValue: "black" },
+      { value: "rgba(0, 0, 13, 0.29)", name: "Gray 07", contrastValue: "black" },
+      { value: "rgba(0, 0, 13, 0.19)", name: "Gray 08", contrastValue: "black" },
+      { value: "rgba(0, 0, 13, 0.09)", name: "Gray 09", contrastValue: "black" },
+    ]}
+  />
+</Exhibit>
+
+Wrap a `<ColorBar>` in a `<Exhibit>` to add a caption to it. The caption can even include links!
+
+<Exhibit
+  caption={
+    <>
+      Source: <a href="https://hihayk.github.io/scale/#2/7/50/90/0/0/0/-0/1190D7/17/144/215">hihayk.github.io/scale</a>
+    </>
+  }
+>
+  <ColorBar
+    values={[
+      "#E7F4FB",
+      "#C9E6F6",
+      "#AAD7F1",
+      "#8BC9EC",
+      "#6DBBE6",
+      "#4EADE1",
+      "#309EDC",
+      "#1190D7",
+      "#0D6CA1",
+      "#09486C",
+    ]}
+  />
+</Exhibit>

package/blocks/ColorBar/index.d.ts

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

package/blocks/ColorBar/index.js

@@ -0,0 +1,90 @@
+import { Swatch } from 'timvir/blocks';
+import { useBlock } from 'timvir/core';
+import * as React from 'react';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @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); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+
+function ColorBar(props, ref) {
+  var _selected$value;
+
+  const block = useBlock(props);
+  const {
+    values,
+    className,
+    ...rest
+  } = block.props;
+  const [selected, setSelected] = React.useState(undefined);
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(className, classes.root, selected && tweaks.selected),
+    ...rest
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.bar,
+    style: {
+      opacity: selected ? 0 : 1
+    }
+  }, values.map((value, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    className: classes.value
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: typeof value === "string" ? value : value.value
+    },
+    onClick: () => {
+      setSelected(value);
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: classes.overlay
+  }, /*#__PURE__*/React.createElement(Swatch, { ...(typeof selected === "string" ? {
+      value: selected
+    } : {
+      value: (_selected$value = selected === null || selected === void 0 ? void 0 : selected.value) !== null && _selected$value !== void 0 ? _selected$value : ""
+    }),
+    onMouseLeave: () => {
+      setSelected(undefined);
+    }
+  })));
+}
+
+var ColorBar$1 = /*#__PURE__*/React.forwardRef(ColorBar);
+const tweaks = {
+  selected: "s4sqb81"
+};
+const classes = {
+  root: "r1f19pie",
+  bar: "b15hqsfj",
+  value: "v1uw85xw",
+  overlay: "o1823law"
+};
+
+export { ColorBar$1 as ColorBar };

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample(): JSX.Element;

package/blocks/ColorBar/styles.css

@@ -0,0 +1,5 @@
+
+.r1f19pie{position:relative;}
+.b15hqsfj{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(0,1fr));transition:all 0.16s;}.b15hqsfj::before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:2;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.15);content:"";pointer-events:none;user-select:none;transition:all 0.16s;}.b15hqsfj:hover::before{opacity:0;}
+.v1uw85xw{height:40px;flex-grow:1;display:grid;place-items:stretch;}.v1uw85xw > div{transition:all 0.16s;cursor:pointer;}.v1uw85xw:first-child > div{border-radius:2px 0 0 2px;}.v1uw85xw:last-child > div{border-radius:0 2px 2px 0;}.v1uw85xw:hover{z-index:3;}.v1uw85xw:hover > div{border-radius:2px;margin:-3px 1px;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);}
+.o1823law{position:absolute;top:50%;right:0px;left:0px;transform:translateY(-50%);pointer-events:none;opacity:0;z-index:4;transition:opacity 0.16s;}.s4sqb81 .o1823law{pointer-events:all;opacity:1;}

package/blocks/ColorBook/ColorBook.d.ts

@@ -0,0 +1,16 @@
+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> {
+    chapters: Array<Chapter>;
+    selectedChapter?: number;
+    onSelectChapter?: (i: number) => void;
+}
+interface Chapter {
+    name?: string;
+    values: Array<string>;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/ColorBook/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"chapters","type":{"optional":false,"name":"{ values: string[]; }[]","module":""},"comment":{"shortText":""}},{"name":"selectedChapter","type":{"optional":true,"name":"number","module":""},"comment":{"shortText":""}},{"name":"onSelectChapter","type":{"optional":true,"name":"(i: number) => void","module":""},"comment":{"shortText":""}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)

package/blocks/ColorBook/docs/index.mdx

@@ -0,0 +1,12 @@
+import { Exhibit } from "../../Exhibit";
+
+# ColorBook
+
+The `<ColorBook>` component provides an overview of different color palettes. The palettes are arranged horizontally, which means up to about 8 colors can be comfortable displayed in this book.
+
+The user can interact with the book: select individual chapters. How selection is interpreted not handled by this component. In the example below
+upon selecting one of the first two chapters, some extra elements are displayed below the `<ColorBook>`.
+
+<div style={{ marginTop: "5vh" }}>
+  <Sample variant="basic" />
+</div>

package/blocks/ColorBook/index.d.ts

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

package/blocks/ColorBook/index.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @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); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+
+function ColorBook(props, ref) {
+  const {
+    chapters,
+    selectedChapter,
+    onSelectChapter,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    ...rest,
+    className: cx(className, "rmv2wrl")
+  }, chapters.map(({
+    name,
+    values
+  }, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      gridColumn: i + 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(chapter, i === selectedChapter && activeChapter),
+    onClick: () => {
+      if (onSelectChapter) {
+        onSelectChapter(i);
+      }
+    }
+  }, values.map(value => /*#__PURE__*/React.createElement("div", {
+    key: value,
+    style: {
+      background: value
+    },
+    className: "d1l94wnr"
+  }))), name && /*#__PURE__*/React.createElement("div", {
+    className: cx("d1uopbb", i === selectedChapter && "d1vwzhoa")
+  }, name))));
+}
+
+var ColorBook$1 = /*#__PURE__*/React.forwardRef(ColorBook);
+const chapter = "c1xqhu04";
+const activeChapter = "a1y0tcvx";
+
+export { ColorBook$1 as ColorBook };

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample(): JSX.Element;

package/blocks/ColorBook/styles.css

@@ -0,0 +1,6 @@
+.rmv2wrl{display:grid;grid-gap:16px;grid-auto-columns:1fr;align-items:start;width:100%;}
+.d1l94wnr{flex-grow:1;}.d1l94wnr:first-child{border-radius:3px 3px 0 0;}.d1l94wnr:last-child{border-radius:0 0 3px 3px;}
+.d1uopbb{text-align:center;font-size:0.75rem;color:var(--timvir-secondary-text-color);margin-top:0.8em;line-height:1;}
+.d1vwzhoa{color:var(--timvir-text-color);}
+.c1xqhu04{position:relative;cursor:pointer;display:flex;flex-direction:column;height:200px;}.c1xqhu04::before{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:4px;box-shadow:0 0 0 0 rgba(19,124,189,0);content:"";transition:all 0.16s cubic-bezier(0.4,1,0.75,0.9);}.c1xqhu04:hover::before{box-shadow:0 0 0 2px #00000040;opacity:1;}
+.a1y0tcvx:hover::before,.a1y0tcvx::before{box-shadow:0 0 0 2px var(--c-p-5);opacity:1;}

package/blocks/Cover/Cover.d.ts

@@ -0,0 +1,20 @@
+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> {
+    metadata: {
+        width: number;
+        height: number;
+    };
+    img: {
+        src: string;
+    };
+    sources: Array<{
+        srcSet: string;
+        type: string;
+    }>;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/Cover/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"metadata","type":{"optional":false,"name":"{ width: number; height: number; }","module":""},"comment":{"shortText":""}},{"name":"img","type":{"optional":false,"name":"{ src: string; }","module":""},"comment":{"shortText":""}},{"name":"sources","type":{"optional":false,"name":"{ srcSet: string; type: string; }[]","module":""},"comment":{"shortText":""}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)

package/blocks/Cover/docs/index.mdx

@@ -0,0 +1,20 @@
+import { Cover } from "..";
+
+import image from "../../../../assets/daniel-leone-v7daTKlZzaw-unsplash.jpg";
+
+<Cover metadata={image} img={{ src: image.src }} sources={[]} />
+
+# Cover
+
+The Cover component is an image that is displayed full-width. Use it above the first h1 heading on the page.
+
+## Usage
+
+Use the `importImage()` macro from the `"@zhif/macro"` package to load the image.
+
+```jsx
+import { Cover } from "timvir/blocks";
+import { importImage } from "@zhif/macro";
+
+<Cover {...importImage("path/to/image.jpg")} />;
+```

package/blocks/Cover/index.d.ts

@@ -0,0 +1 @@
+export { default as Cover } from "./Cover";

package/blocks/Cover/index.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { fullWidth } from 'timvir/core';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @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); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+
+function Cover(props, ref) {
+  const {
+    metadata,
+    img,
+    sources,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(className, fullWidth),
+    ...rest
+  }, /*#__PURE__*/React.createElement("picture", null, sources.map((p, i) => /*#__PURE__*/React.createElement("source", {
+    key: i,
+    ...p
+  })), /*#__PURE__*/React.createElement("img", { ...metadata,
+    ...img,
+    style: {
+      display: "block",
+      maxWidth: "100%",
+      height: "35vh",
+      objectFit: "cover"
+    }
+  })));
+}
+
+var Cover$1 = /*#__PURE__*/React.forwardRef(Cover);
+
+export { Cover$1 as Cover };

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample(): JSX.Element;

package/blocks/Exhibit/Exhibit.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "figure";
+interface Props extends React.ComponentProps<typeof Root> {
+    caption?: React.ReactNode;
+    /**
+     * How much the component should extend out of its original box. When number,
+     * it's the number of pixels. When a string, must evaluate to a CSS <length>
+     * (can be inline or reference to a CSS variable).
+     *
+     * @default 0
+     */
+    bleed?: string | number;
+    BackdropProps?: React.ComponentPropsWithoutRef<"div">;
+}
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "key" | "dir" | "onError" | "hidden" | "color" | "style" | "caption" | "translate" | "prefix" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bleed" | "BackdropProps"> & React.RefAttributes<HTMLElement>>;
+export default _default;