@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/esm/blocks/DocsPage.js

@@ -0,0 +1,57 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { withReset } from '../typography/shared';
+var breakpoint = 600;
+export var Title = styled.h1(withReset, function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty({
+    color: theme.color.defaultText,
+    fontSize: theme.typography.size.m3,
+    fontWeight: theme.typography.weight.black,
+    lineHeight: '32px'
+  }, "@media (min-width: ".concat(breakpoint, "px)"), {
+    fontSize: theme.typography.size.l1,
+    lineHeight: '36px',
+    marginBottom: '.5rem' // 8px
+
+  });
+});
+export var Subtitle = styled.h2(withReset, function (_ref3) {
+  var _ref4;
+
+  var theme = _ref3.theme;
+  return _ref4 = {
+    fontWeight: theme.typography.weight.regular,
+    fontSize: theme.typography.size.s3,
+    lineHeight: '20px',
+    borderBottom: 'none',
+    marginBottom: 15
+  }, _defineProperty(_ref4, "@media (min-width: ".concat(breakpoint, "px)"), {
+    fontSize: theme.typography.size.m1,
+    lineHeight: '28px',
+    marginBottom: 24
+  }), _defineProperty(_ref4, "color", transparentize(0.25, theme.color.defaultText)), _ref4;
+});
+export var DocsContent = styled.div({
+  maxWidth: 1000,
+  width: '100%'
+});
+export var DocsWrapper = styled.div(function (_ref5) {
+  var theme = _ref5.theme;
+  return _defineProperty({
+    background: theme.background.content,
+    display: 'flex',
+    justifyContent: 'center',
+    padding: '4rem 20px',
+    minHeight: '100vh',
+    boxSizing: 'border-box'
+  }, "@media (min-width: ".concat(breakpoint, "px)"), {});
+});
+export var DocsPageWrapper = function DocsPageWrapper(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/React.createElement(DocsWrapper, null, /*#__PURE__*/React.createElement(DocsContent, null, children));
+};
+DocsPageWrapper.displayName = "DocsPageWrapper";

package/dist/esm/blocks/DocsPage.stories.js

@@ -0,0 +1,56 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import React from 'react';
+import { Global, css } from '@emotion/core';
+import { Title, Subtitle, DocsPageWrapper } from './DocsPage';
+import { ArgsTable, Source, Description } from './index';
+import * as Story from './Story.stories';
+import * as Preview from './Preview.stories';
+import * as argsTable from './ArgsTable/ArgsTable.stories';
+import * as source from './Source.stories';
+import * as description from './Description.stories';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "11oe0k1",
+  styles: "ul,ol{list-style:none;}"
+} : {
+  name: "11oe0k1",
+  styles: "ul,ol{list-style:none;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ibG9ja3MvRG9jc1BhZ2Uuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvYmxvY2tzL0RvY3NQYWdlLnN0b3JpZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEdsb2JhbCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IFRpdGxlLCBTdWJ0aXRsZSwgRG9jc1BhZ2VXcmFwcGVyIH0gZnJvbSAnLi9Eb2NzUGFnZSc7XG5pbXBvcnQgeyBBcmdzVGFibGUsIFNvdXJjZSwgRGVzY3JpcHRpb24gfSBmcm9tICcuL2luZGV4JztcbmltcG9ydCAqIGFzIFN0b3J5IGZyb20gJy4vU3Rvcnkuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBQcmV2aWV3IGZyb20gJy4vUHJldmlldy5zdG9yaWVzJztcbmltcG9ydCAqIGFzIGFyZ3NUYWJsZSBmcm9tICcuL0FyZ3NUYWJsZS9BcmdzVGFibGUuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBzb3VyY2UgZnJvbSAnLi9Tb3VyY2Uuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBkZXNjcmlwdGlvbiBmcm9tICcuL0Rlc2NyaXB0aW9uLnN0b3JpZXMnO1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIHRpdGxlOiAnRG9jcy9Eb2NzUGFnZScsXG4gIGNvbXBvbmVudDogRG9jc1BhZ2VXcmFwcGVyLFxuICAvLyBUaGUgZ29hbCBvZiB0aGlzIGRlY29yYXRvciBpcyB0byBtaW1pYyBzb21lIENTUyByZXNldC5cbiAgLy8gTGlrZSBUYWlsd2luZCBDU1Mgb3IgQnVsbWEgZG8sIGZvciBleGFtcGxlLlxuICBkZWNvcmF0b3JzOiBbXG4gICAgKHN0b3J5Rm4pID0+IChcbiAgICAgIDw+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIHVsLFxuICAgICAgICAgICAgb2wge1xuICAgICAgICAgICAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICAgIHtzdG9yeUZuKCl9XG4gICAgICA8Lz5cbiAgICApLFxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAnZnVsbHNjcmVlbicsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgV2l0aFN1YnRpdGxlID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5Eb2NzUGFnZTwvVGl0bGU+XG4gICAgPFN1YnRpdGxlPlxuICAgICAgV2hhdCB0aGUgRG9jc1BhZ2UgbG9va3MgbGlrZS4gTWVhbnQgdG8gYmUgUUFlZCBpbiBDYW52YXMgdGFiIG5vdCBpbiBEb2NzIHRhYi5cbiAgICA8L1N1YnRpdGxlPlxuICAgIDxEZXNjcmlwdGlvbiB7Li4uZGVzY3JpcHRpb24uVGV4dC5hcmdzfSAvPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IEVtcHR5ID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxTdG9yeS5FcnJvciAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5FcnJvci5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5Tb3VyY2VVbmF2YWlsYWJsZS5hcmdzfSAvPlxuICA8L0RvY3NQYWdlV3JhcHBlcj5cbik7XG5cbmV4cG9ydCBjb25zdCBOb1RleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm5vIHRleHQ8L1RpdGxlPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IFRleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPlNlbnNvcml1bTwvVGl0bGU+XG4gICAgPERlc2NyaXB0aW9uIHsuLi5kZXNjcmlwdGlvbi5UZXh0LmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgTWFya2Rvd24gPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm1hcmtkb3duPC9UaXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLk1hcmtkb3duLmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default {
+  title: 'Docs/DocsPage',
+  component: DocsPageWrapper,
+  // The goal of this decorator is to mimic some CSS reset.
+  // Like Tailwind CSS or Bulma do, for example.
+  decorators: [function (storyFn) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Global, {
+      styles: _ref
+    }), storyFn());
+  }],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+export var WithSubtitle = function WithSubtitle() {
+  return /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Title, null, "DocsPage"), /*#__PURE__*/React.createElement(Subtitle, null, "What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab."), /*#__PURE__*/React.createElement(Description, description.Text.args), /*#__PURE__*/React.createElement(Preview.Single, null), /*#__PURE__*/React.createElement(ArgsTable, argsTable.Normal.args), /*#__PURE__*/React.createElement(Source, source.JSX.args));
+};
+WithSubtitle.displayName = "WithSubtitle";
+export var Empty = function Empty() {
+  return /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Story.Error, null), /*#__PURE__*/React.createElement(ArgsTable, argsTable.Error.args), /*#__PURE__*/React.createElement(Source, source.SourceUnavailable.args));
+};
+Empty.displayName = "Empty";
+export var NoText = function NoText() {
+  return /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Title, null, "no text"), /*#__PURE__*/React.createElement(Preview.Single, null), /*#__PURE__*/React.createElement(ArgsTable, argsTable.Normal.args), /*#__PURE__*/React.createElement(Source, source.JSX.args));
+};
+NoText.displayName = "NoText";
+export var Text = function Text() {
+  return /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Title, null, "Sensorium"), /*#__PURE__*/React.createElement(Description, description.Text.args), /*#__PURE__*/React.createElement(Preview.Single, null), /*#__PURE__*/React.createElement(ArgsTable, argsTable.Normal.args), /*#__PURE__*/React.createElement(Source, source.JSX.args));
+};
+Text.displayName = "Text";
+export var Markdown = function Markdown() {
+  return /*#__PURE__*/React.createElement(DocsPageWrapper, null, /*#__PURE__*/React.createElement(Title, null, "markdown"), /*#__PURE__*/React.createElement(Description, description.Markdown.args), /*#__PURE__*/React.createElement(Preview.Single, null), /*#__PURE__*/React.createElement(ArgsTable, argsTable.Normal.args), /*#__PURE__*/React.createElement(Source, source.JSX.args));
+};
+Markdown.displayName = "Markdown";

package/dist/esm/blocks/DocsPageExampleCaption.md

@@ -0,0 +1,92 @@
+# My Example Markdown
+
+The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
+
+![An image](http://place-hold.it/350x150)
+
+He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
+
+## Typography
+
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+
+## Block quote
+
+How about a block quote to spice things up?
+
+> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
+
+## Lists
+
+Mixed list:
+
+1. First ordered list item
+2. Another item
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+   2. Yo ho ho
+4. And another item.
+
+Bullet list:
+
+- Whatever
+  - This is getting
+  - Very ...
+    - Very ...
+    - Tedious!
+- It's getting late, nothing to see here
+
+Numbered:
+
+1. You get the idea
+2. You still get the idea
+3. You really get the idea
+4. I'm done
+
+## Tables
+
+A basic table:
+
+| Tables        |      Are      |   Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is      | right-aligned | \$1600 |
+| col 2 is      |   centered    |   \$12 |
+| zebra stripes |   are neat    |    \$1 |
+
+Let's throw in a crazy table, because why not?
+
+|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
+| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [centered](addons/centered)       |         +          |                                  |       +        |           +            |           +            |        +         |                    |          +           |                  |         +          |          +           |
+
+## Code
+
+Sometimes you might want to manually include some \`code\` examples? Let's do it.
+
+```js
+const Button = () => <button />;
+```

package/dist/esm/blocks/DocsPageExampleCaption.mdx

@@ -0,0 +1,92 @@
+# My Example Markdown
+
+The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
+
+![An image](http://place-hold.it/350x150)
+
+He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
+
+## Typography
+
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+
+## Block quote
+
+How about a block quote to spice things up?
+
+> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
+
+## Lists
+
+Mixed list:
+
+1. First ordered list item
+2. Another item
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+   2. Yo ho ho
+4. And another item.
+
+Bullet list:
+
+- Whatever
+  - This is getting
+  - Very ...
+    - Very ...
+    - Tedious!
+- It's getting late, nothing to see here
+
+Numbered:
+
+1. You get the idea
+2. You still get the idea
+3. You really get the idea
+4. I'm done
+
+## Tables
+
+A basic table:
+
+| Tables        |      Are      |   Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is      | right-aligned | \$1600 |
+| col 2 is      |   centered    |   \$12 |
+| zebra stripes |   are neat    |    \$1 |
+
+Let's throw in a crazy table, because why not?
+
+|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
+| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [centered](addons/centered)       |         +          |                                  |       +        |           +            |           +            |        +         |                    |          +           |                  |         +          |          +           |
+
+## Code
+
+Sometimes you might want to manually include some \`code\` examples? Let's do it.
+
+```js
+const Button = () => <button />;
+```

package/dist/esm/blocks/EmptyBlock.js

@@ -0,0 +1,29 @@
+import "core-js/modules/es.object.assign.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { withReset } from '../typography/shared';
+var Wrapper = styled.div(withReset, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
+    borderRadius: theme.appBorderRadius,
+    border: "1px dashed ".concat(theme.appBorderColor),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+    margin: '25px 0 40px',
+    color: transparentize(0.3, theme.color.defaultText),
+    fontSize: theme.typography.size.s2
+  };
+});
+export var EmptyBlock = function EmptyBlock(props) {
+  return /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
+    className: "docblock-emptyblock"
+  }));
+};
+EmptyBlock.displayName = "EmptyBlock";

package/dist/esm/blocks/EmptyBlock.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { EmptyBlock } from './EmptyBlock';
+export default {
+  title: 'Docs/EmptyBlock',
+  component: EmptyBlock
+};
+export var error = function error() {
+  return /*#__PURE__*/React.createElement(EmptyBlock, null, "Generic error message");
+};
+error.displayName = "error";

package/dist/esm/blocks/IFrame.js

@@ -0,0 +1,115 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.object.get-prototype-of.js";
+import "core-js/modules/es.reflect.construct.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+import React, { Component } from 'react';
+import global from 'global';
+var globalWindow = global.window;
+export var IFrame = /*#__PURE__*/function (_Component) {
+  _inherits(IFrame, _Component);
+
+  var _super = _createSuper(IFrame);
+
+  function IFrame() {
+    var _this;
+
+    _classCallCheck(this, IFrame);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.iframe = null;
+    return _this;
+  }
+
+  _createClass(IFrame, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var id = this.props.id;
+      this.iframe = globalWindow.document.getElementById(id);
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      var scale = nextProps.scale; // eslint-disable-next-line react/destructuring-assignment
+
+      if (scale !== this.props.scale) {
+        this.setIframeBodyStyle({
+          width: "".concat(scale * 100, "%"),
+          height: "".concat(scale * 100, "%"),
+          transform: "scale(".concat(1 / scale, ")"),
+          transformOrigin: 'top left'
+        });
+      }
+
+      return false;
+    }
+  }, {
+    key: "setIframeBodyStyle",
+    value: function setIframeBodyStyle(style) {
+      return Object.assign(this.iframe.contentDocument.body.style, style);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          id = _this$props.id,
+          title = _this$props.title,
+          src = _this$props.src,
+          allowFullScreen = _this$props.allowFullScreen,
+          scale = _this$props.scale,
+          rest = _objectWithoutProperties(_this$props, ["id", "title", "src", "allowFullScreen", "scale"]);
+
+      return /*#__PURE__*/React.createElement("iframe", _extends({
+        id: id,
+        title: title,
+        src: src,
+        allowFullScreen: allowFullScreen // @ts-ignore
+        ,
+        loading: "lazy"
+      }, rest));
+    }
+  }]);
+
+  return IFrame;
+}(Component);
+IFrame.displayName = "IFrame";

package/dist/esm/blocks/IconGallery.js

@@ -0,0 +1,75 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { ResetWrapper } from '../typography/DocumentFormatting';
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+var ItemLabel = styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontFamily: theme.typography.fonts.base,
+    fontSize: theme.typography.size.s2,
+    color: theme.color.defaultText,
+    marginLeft: 10,
+    lineHeight: 1.2
+  };
+});
+var ItemSpecimen = styled.div(function (_ref2) {
+  var theme = _ref2.theme;
+  return Object.assign({}, getBlockBackgroundStyle(theme), {
+    overflow: 'hidden',
+    height: 40,
+    width: 40,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 'none',
+    '> img, > svg': {
+      width: 20,
+      height: 20
+    }
+  });
+});
+var Item = styled.div({
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  flex: '0 1 calc(20% - 10px)',
+  minWidth: 120,
+  margin: '0px 10px 30px 0'
+});
+var List = styled.div({
+  display: 'flex',
+  flexFlow: 'row wrap'
+});
+
+/**
+ * An individual icon with a caption and an example (passed as `children`).
+ */
+export var IconItem = function IconItem(_ref3) {
+  var name = _ref3.name,
+      children = _ref3.children;
+  return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemSpecimen, null, children), /*#__PURE__*/React.createElement(ItemLabel, null, name));
+};
+IconItem.displayName = "IconItem";
+
+/**
+ * Show a grid of icons, as specified by `IconItem`.
+ */
+export var IconGallery = function IconGallery(_ref4) {
+  var children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, ["children"]);
+
+  return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(List, _extends({}, props, {
+    className: "docblock-icongallery"
+  }), children));
+};
+IconGallery.displayName = "IconGallery";

package/dist/esm/blocks/IconGallery.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconItem, IconGallery } from './IconGallery';
+import { Icons as ExampleIcon } from '../icon/icon';
+export default {
+  title: 'Docs/IconGallery',
+  component: IconGallery
+};
+export var defaultStyle = function defaultStyle() {
+  return /*#__PURE__*/React.createElement(IconGallery, null, /*#__PURE__*/React.createElement(IconItem, {
+    name: "add"
+  }, /*#__PURE__*/React.createElement(ExampleIcon, {
+    icon: "add"
+  })), /*#__PURE__*/React.createElement(IconItem, {
+    name: "subtract"
+  }, /*#__PURE__*/React.createElement(ExampleIcon, {
+    icon: "subtract"
+  })), /*#__PURE__*/React.createElement(IconItem, {
+    name: "home"
+  }, /*#__PURE__*/React.createElement(ExampleIcon, {
+    icon: "home"
+  })), /*#__PURE__*/React.createElement(IconItem, {
+    name: "facehappy"
+  }, /*#__PURE__*/React.createElement(ExampleIcon, {
+    icon: "facehappy"
+  })), /*#__PURE__*/React.createElement(IconItem, {
+    name: "bar"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://place-hold.it/50x50",
+    alt: "example"
+  })), /*#__PURE__*/React.createElement(IconItem, {
+    name: "bar"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://place-hold.it/50x50",
+    alt: "example"
+  })));
+};
+defaultStyle.displayName = "defaultStyle";