timvir 0.1.42

package/blocks/Exhibit/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":"source","type":{"optional":true,"name":"ReactNode","module":""},"comment":{"shortText":""}},{"name":"caption","type":{"optional":true,"name":"ReactNode","module":""},"comment":{"shortText":""}},{"name":"bleed","type":{"optional":true,"name":"number","module":""},"def":"0","comment":{"shortText":"How much the component should extend out of its original box."}}]}} />
+
+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/Exhibit/docs/index.mdx

@@ -0,0 +1,56 @@
+import { Exhibit } from "..";
+import { Code } from "timvir/blocks";
+
+# Exhibit
+
+The `<Exhibit>` is a block which is used to present something–usually a React component–in a nice way. It's a way to say:
+
+<Sample variant="basic" />
+
+<Code language="jsx">
+  <Sample variant="basic" as="source/markup" />
+</Code>
+
+Think of it as a `<figure>` + `<figcaption>` for React components.
+
+Add a title to the exhibit if it helps the reader to understand the exhibit better. The title is placed snuggly to the exhibit.
+
+<Exhibit bleed={8} title="This Is Not A Button" caption="It's an input element, of type text">
+  <input type="text" placeholder="Type something…" style={{ boxSizing: "border-box", width: "100%", padding: 8 }} />
+</Exhibit>
+
+## Bleed
+
+Use the `bleed` prop to control how much the checkered background extends beyond the box of the element itself.
+
+#### bleed 0
+
+<Exhibit bleed={0}>
+  <div
+    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
+  />
+</Exhibit>
+
+#### bleed 4
+
+<Exhibit bleed={4}>
+  <div
+    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
+  />
+</Exhibit>
+
+#### bleed 12
+
+<Exhibit bleed={12}>
+  <div
+    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
+  />
+</Exhibit>
+
+#### bleed 24
+
+<Exhibit bleed={24}>
+  <div
+    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
+  />
+</Exhibit>

package/blocks/Exhibit/index.d.ts

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

package/blocks/Exhibit/index.js

@@ -0,0 +1,83 @@
+import { useMDXComponents } from '@mdx-js/react';
+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 = "figure";
+
+function Exhibit(props, ref) {
+  const block = useBlock(props);
+  const components = {
+    h3: "h3",
+    ...useMDXComponents()
+  };
+  const {
+    title,
+    caption,
+    bleed = 0,
+    BackdropProps,
+    children,
+    className,
+    style,
+    ...rest
+  } = block.props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(components.h3, null, title), /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(className, classes.root),
+    style: { ...style,
+      [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : bleed
+    },
+    ...rest
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.container,
+    style: {
+      border: bleed !== 0 ? `1px solid var(${cssVariables.borderColor})` : "none"
+    },
+    ...BackdropProps
+  }, children), caption && /*#__PURE__*/React.createElement("figcaption", {
+    className: classes.caption
+  }, caption)));
+}
+
+var Exhibit$1 = /*#__PURE__*/React.forwardRef(Exhibit);
+const cssVariables = {
+  bleed: "--timvir-b-Exhibit-bleed",
+  borderColor: "--timvir-b-Exhibit-borderColor",
+  background: "--timvir-b-Exhibit-background"
+};
+const classes = {
+  root: "r1nql2f9",
+  container: "c4ji594",
+  caption: "cf43jjx"
+};
+
+export { Exhibit$1 as Exhibit };

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

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

package/blocks/Exhibit/styles.css

@@ -0,0 +1,3 @@
+.r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:#EFEFEF;--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-borderColor:#101010;--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
+.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
+.cf43jjx{font-size:0.75rem;color:var(--timvir-secondary-text-color);margin-top:2px;}

package/blocks/Font/Font.d.ts

@@ -0,0 +1,15 @@
+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> {
+    name: string;
+    font: {
+        style?: React.CSSProperties;
+        className?: string;
+    };
+    info?: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/Font/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":"name","type":{"optional":false,"name":"string","module":""},"comment":{"shortText":""}},{"name":"font","type":{"optional":false,"name":"{ style?: CSSProperties; className?: string; }","module":""},"comment":{"shortText":""}},{"name":"info","type":{"optional":true,"name":"ReactNode","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/Font/docs/index.mdx

@@ -0,0 +1,23 @@
+import { Font } from "..";
+import { Code } from "../../Code";
+import { Viewport } from "../../Viewport";
+
+# Font
+
+<Sample variant="basic" />
+
+<Font name="Heading 2" font={{ style: { fontFamily: "system-ui", fontWeight: 700, fontSize: "2vw", lineHeight: 1.3 } }}>
+  The basic structure of each upright letter remained the same in its italic companion.
+</Font>
+
+<Font name="Body 1" font={{ style: { fontFamily: "system-ui", fontSize: 18 } }}>
+  Originally called Neuste schmale fette Zeitungs-Grotesk, the design was listed in this catalogue as Enge fette Grotesque. It was a straight-sided sans serif with rounded terminals, and it bears no relation to any styles of Akzidenz-Grotesk. The remaining three sans serif designs in that undated, post-sale catalogue were Schmale magere Grotesque, Breite Grotesque, and Breite fette Grotesque.
+</Font>
+
+<Font name="Meta" font={{ style: { fontFamily: "system-ui", fontSize: 14 } }}>
+  Meta Text
+</Font>
+
+## Inside Viewport
+
+<Viewport src="/docs/components/Font/samples/system" />

package/blocks/Font/index.d.ts

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

package/blocks/Font/index.js

@@ -0,0 +1,131 @@
+import { useMDXComponents } from '@mdx-js/react';
+import * as React from 'react';
+import * as Icons from 'react-feather';
+
+/**
+ * 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";
+const classes = {
+  meta: "mby32tn"
+};
+
+function Font(props, ref) {
+  const components = {
+    h3: "h3",
+    ...useMDXComponents()
+  };
+  const {
+    name,
+    font,
+    info,
+    className,
+    children,
+    ...rest
+  } = props;
+  const [contentRef, setContentRef] = React.useState(null);
+  const [fontSizeRef, setFontSizeRef] = React.useState(null);
+  const [infoRef, setInfoRef] = React.useState(null);
+  React.useEffect(() => {
+    if (contentRef) {
+      const computedStyle = window.getComputedStyle(contentRef);
+      const intervalId = setInterval(() => {
+        if (fontSizeRef) {
+          const innerText = `${name} – ${Math.round(parseInt(computedStyle.fontSize))}px`;
+
+          if (fontSizeRef.innerText !== innerText) {
+            fontSizeRef.innerText = innerText;
+          }
+        }
+      }, 250);
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+  }, [name, contentRef]);
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(className, "rc7ivp5"),
+    ...rest
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.meta
+  }, /*#__PURE__*/React.createElement(components.h3, {
+    className: "fe58upx"
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: setFontSizeRef
+  }, name)), info && /*#__PURE__*/React.createElement("div", {
+    className: "d10949ho",
+    onClick: () => {
+      if (infoRef && contentRef) {
+        // const contentParent = contentRef.parentElement;
+        const infoParent = infoRef.parentElement;
+
+        if (infoParent.style.height === "0px") {
+          infoParent.style.height = `${infoRef.getBoundingClientRect().height}px`;
+          infoParent.style.opacity = "1"; // contentParent.style.height = "0px";
+          // contentParent.style.opacity = "0";
+        } else {
+          infoParent.style.height = "0px";
+          infoParent.style.opacity = "0"; // contentParent.style.height = window.getComputedStyle(contentRef).height;
+          // contentParent.style.opacity = "1";
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Icons.Info, {
+    size: "1.1em"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "d1o2du3z"
+  }, info && /*#__PURE__*/React.createElement("div", {
+    className: "d1o9zhgl",
+    style: {
+      height: 0,
+      opacity: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: setInfoRef,
+    className: "ddlplux"
+  }, info)), /*#__PURE__*/React.createElement("div", {
+    className: "dw285p4",
+    style: {
+      height: "auto",
+      opacity: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: setContentRef,
+    contentEditable: true,
+    spellCheck: "false",
+    className: cx(font.className, "dx3nfmc"),
+    style: font.style
+  }, children || "The quick brown fox jumps over the lazy dog"))));
+}
+
+var Font$1 = /*#__PURE__*/React.forwardRef(Font);
+
+export { Font$1 as Font };

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Font } from "..";
+declare type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
+export default function Sample(props: Props): JSX.Element;
+export {};

package/blocks/Font/samples/system.d.ts

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

package/blocks/Font/styles.css

@@ -0,0 +1,9 @@
+.mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
+.rc7ivp5{padding:16px 0;}
+.fe58upx{margin:0 auto 0 0;}
+.d10949ho{cursor:pointer;}.d10949ho:hover{color:var(--c-p-4);opacity:1;}.d10949ho > svg{position:relative;top:2px;}
+.d1o2du3z{display:flex;flex-direction:column;}
+.d1o9zhgl{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.ddlplux{padding:0 0 16px;display:flex;flex-direction:column;}
+.dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}

package/blocks/Grid/Grid.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentProps<typeof Root> {
+}
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "key" | "dir" | "onError" | "hidden" | "color" | "style" | "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"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/Grid/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":[]}} />
+
+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>
+)