timvir 0.1.42

package/blocks/Grid/docs/index.mdx

@@ -0,0 +1,82 @@
+import { Grid } from "..";
+import { Exhibit } from "../../Exhibit";
+import { Image } from "../../../../src/components/Image";
+import { fullWidth } from "timvir/core";
+
+import image1 from "../../../../assets/khachik-simonian-nXOB-wh4Oyc-unsplash.jpg"
+import image2 from "../../../../assets/frank-mckenna-4V8JxijgZ_c-unsplash.jpg"
+import image3 from "../../../../assets/jay-mantri-TFyi0QOx08c-unsplash.jpg"
+import image4 from "../../../../assets/jeremy-bishop-EwKXn5CapA4-unsplash.jpg"
+import image5 from "../../../../assets/lukasz-szmigiel-jFCViYFYcus-unsplash.jpg"
+import image6 from "../../../../assets/qingbao-meng-01_igFr7hd4-unsplash.jpg"
+import image7 from "../../../../assets/v2osk-1Z2niiBPg5A-unsplash.jpg"
+
+# Grid
+
+> CSS grid with a predefined template (columns, gaps etc)
+
+```
+<Grid>
+  <div>ITEM</div>
+  <div>ITEM</div>
+  <div>ITEM</div>
+  <div>ITEM</div>
+  <div>ITEM</div>
+</Grid>
+```
+
+## Basic
+
+<Grid>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+</Grid>
+
+## Fullwidth
+
+<Grid className={fullWidth}>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+</Grid>
+
+Combine `<Grid>` with the `<Image>` component.
+
+<Grid>
+  <Image metadata={image1} img={{ src: image1.src }} sources={[]}  />
+  <Image metadata={image2} img={{ src: image2.src }} sources={[]} />
+  <Image metadata={image3} img={{ src: image3.src }} sources={[]} />
+  <Image metadata={image4} img={{ src: image4.src }} sources={[]} />
+  <Image metadata={image5} img={{ src: image5.src }} sources={[]} />
+  <Image metadata={image6} img={{ src: image6.src }} sources={[]} />
+  <Image metadata={image7} img={{ src: image7.src }} sources={[]} />
+</Grid>
+
+Combine `<Grid>` with the `<Exhibit>` component.
+
+<Grid>
+  <Exhibit bleed={8}>
+    <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  </Exhibit>
+  <Exhibit bleed={8}>
+    <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  </Exhibit>
+  <Exhibit bleed={8}>
+    <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  </Exhibit>
+  <Exhibit bleed={8}>
+    <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
+  </Exhibit>
+</Grid>

package/blocks/Grid/index.d.ts

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

package/blocks/Grid/index.js

@@ -0,0 +1,53 @@
+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 Grid(props, ref) {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(className, classes.root),
+    ...rest
+  }, children);
+}
+
+var Grid$1 = /*#__PURE__*/React.forwardRef(Grid);
+const classes = {
+  root: "r1c1ozpm"
+};
+
+export { Grid$1 as Grid };

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

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

package/blocks/Grid/styles.css

@@ -0,0 +1 @@
+.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}

package/blocks/Icon/Icon.d.ts

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

package/blocks/Icon/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":"allSizes","type":{"optional":false,"name":"Size[]","module":""},"comment":{"shortText":""}},{"name":"descriptor","type":{"optional":false,"name":"Descriptor","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/Icon/docs/index.mdx

@@ -0,0 +1,218 @@
+import { Icon } from "..";
+import { Exhibit } from "../../Exhibit";
+import { Grid } from "../../Grid";
+import { extendedWidth } from "timvir/core";
+
+# Icon
+
+The `<Icon>` component is used to display a single, square component. Usually a `<svg>`, up to ~80px in size.
+
+<Exhibit>
+  <div style={{ padding: 40, display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
+    <div style={{ width: 120 }}>
+      <Icon
+        descriptor={{
+          name: "ArrowRight",
+          instances: [
+            {
+              size: 12,
+              Component: () => (
+                <svg width="12px" height="12px" viewBox="0 0 12 12">
+                  <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+                </svg>
+              ),
+            },
+          ],
+        }}
+      />
+    </div>
+  </div>
+</Exhibit>
+
+## In a `<Grid>`
+
+<Grid
+  className={extendedWidth}
+  style={{ margin: 24, gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))", gridGap: 24 }}
+>
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "NavigationArrowLeft",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+  <Icon
+    descriptor={{
+      name: "ArrowRight",
+      instances: [
+        {
+          size: 12,
+          Component: () => (
+            <svg width="12px" height="12px" viewBox="0 0 12 12">
+              <path fill="#444" d="M1.98 2.1L5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1z" />
+            </svg>
+          ),
+        },
+      ],
+    }}
+  />
+</Grid>

package/blocks/Icon/index.d.ts

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

package/blocks/Icon/index.js

@@ -0,0 +1,155 @@
+import { useResizeObserverEntry } from 'timvir/hooks';
+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(' ');
+};
+
+const Root$1 = "div";
+const classes$1 = {
+  backdrop: "b1a0xzv7",
+  grid: "g10obtzp"
+};
+
+function Canvas(props) {
+  const {
+    width,
+    height,
+    size,
+    Component
+  } = props;
+  return /*#__PURE__*/React.createElement(Root$1, {
+    className: "r1bcczis",
+    style: {
+      width,
+      height
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes$1.backdrop
+  }), /*#__PURE__*/React.createElement(Grid, {
+    className: classes$1.grid,
+    size: size
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: `${size}px`,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Component, null)));
+}
+
+function Grid({
+  size,
+  ...rest
+}) {
+  const halfSize = size / 2;
+  const center = 60;
+  const whiskerLength = Math.min(16, size / 2);
+
+  const Corner = ({
+    dx,
+    dy
+  }) => /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    x1: dx(center, halfSize),
+    x2: dx(center, halfSize + whiskerLength),
+    y1: dy(center, halfSize),
+    y2: dy(center, halfSize),
+    strokeWidth: 1,
+    stroke: "#EEEEEE"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: dx(center, halfSize),
+    x2: dx(center, halfSize),
+    y1: dy(center, halfSize),
+    y2: dy(center, halfSize + whiskerLength),
+    strokeWidth: 1,
+    stroke: "#EEEEEE"
+  }));
+
+  const add = (a, b) => a + b;
+
+  const sub = (a, b) => a - b;
+
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "120",
+    height: "120",
+    viewBox: "0 0 120 120",
+    ...rest
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: center - halfSize,
+    y: center - halfSize,
+    width: size,
+    height: size,
+    fill: "#FFBBFF88"
+  }), /*#__PURE__*/React.createElement(Corner, {
+    dx: sub,
+    dy: sub
+  }), /*#__PURE__*/React.createElement(Corner, {
+    dx: add,
+    dy: sub
+  }), /*#__PURE__*/React.createElement(Corner, {
+    dx: add,
+    dy: add
+  }), /*#__PURE__*/React.createElement(Corner, {
+    dx: sub,
+    dy: add
+  }));
+}
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+const Root = "div";
+const classes = {
+  name: "n1xsexuc"
+};
+
+function Icon(props, ref) {
+  const {
+    descriptor,
+    className,
+    ...rest
+  } = props;
+  const [roRef, roe] = useResizeObserverEntry();
+  const width = roe === null || roe === void 0 ? void 0 : roe.contentRect.width;
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(className, "r1k0w618"),
+    ...rest
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: roRef
+  }, width !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Canvas, {
+    width: width,
+    height: width,
+    size: 32
+    /*descriptor.instances[0].size as number */
+    ,
+    Component: descriptor.instances[0].Component
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.name
+  }, descriptor.name))));
+}
+
+var Icon$1 = /*#__PURE__*/React.forwardRef(Icon);
+
+export { Icon$1 as Icon };

package/blocks/Icon/internal/Canvas.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface Props {
+    width: number;
+    height: number;
+    size: number;
+    Component: React.ElementType;
+}
+declare function Canvas(props: Props): JSX.Element;
+export default Canvas;

package/blocks/Icon/internal/index.d.ts

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

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

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

package/blocks/Icon/styles.css

@@ -0,0 +1,5 @@
+.n1xsexuc{margin-top:6px;white-space:nowrap;font-size:0.75rem;opacity:0;transition:all 0.16s;z-index:-1;color:var(--timvir-secondary-text-color);text-align:center;user-select:none;pointer-events:none;position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);}
+.r1k0w618{position:relative;z-index:1;}.r1k0w618 svg{display:block;}.r1k0w618:hover .n1xsexuc{opacity:1;bottom:-26px;color:var(--timvir-text-color);}.r1k0w618:active .n1xsexuc{bottom:-24px;}
+.b1a0xzv7{background:white;place-self:stretch;border-radius:2px;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0,0,0,0.1);}
+.g10obtzp{opacity:0;transition:all 0.2s;pointer-events:none;}
+.r1bcczis{display:grid;place-items:center;cursor:pointer;}.r1bcczis > *{grid-column:1;grid-row:1;}.r1bcczis:hover .b1a0xzv7{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 2px 4px rgba(16,22,26,0.1), 0 8px 24px rgba(16,22,26,0.2);}.r1bcczis:active .b1a0xzv7{margin:1px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 1px 1px rgba(16,22,26,0.2);}.r1bcczis:hover .g10obtzp{opacity:1;}

package/blocks/Icon/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type Size = "responsive" | number;
+export interface Instance {
+    size: Size;
+    Component: React.ElementType;
+}
+export interface Descriptor {
+    name: string;
+    instances: Instance[];
+}

package/blocks/Message/Message.d.ts

@@ -0,0 +1,10 @@
+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> {
+    variant?: "info" | "warning" | "alert";
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;