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

package/dist/cjs/blocks/ColorPalette.js

@@ -0,0 +1,234 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPalette = exports.ColorItem = void 0;
+
+require("core-js/modules/es.string.bold.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.values.js");
+
+require("core-js/modules/es.object.keys.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _polished = require("polished");
+
+var _BlockBackgroundStyles = require("./BlockBackgroundStyles");
+
+var _DocumentFormatting = require("../typography/DocumentFormatting");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+
+var ItemTitle = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontWeight: theme.typography.weight.bold,
+    color: theme.color.defaultText
+  };
+});
+
+var ItemSubtitle = _theming.styled.div(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    color: theme.base === 'light' ? (0, _polished.transparentize)(0.2, theme.color.defaultText) : (0, _polished.transparentize)(0.6, theme.color.defaultText)
+  };
+});
+
+var ItemDescription = _theming.styled.div({
+  flex: '0 0 30%',
+  lineHeight: '20px',
+  marginTop: 5
+});
+
+var SwatchLabel = _theming.styled.div(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    flex: 1,
+    textAlign: 'center',
+    fontFamily: theme.typography.fonts.mono,
+    fontSize: theme.typography.size.s1,
+    lineHeight: 1,
+    overflow: 'hidden',
+    color: theme.base === 'light' ? (0, _polished.transparentize)(0.4, theme.color.defaultText) : (0, _polished.transparentize)(0.6, theme.color.defaultText),
+    '> div': {
+      display: 'inline-block',
+      overflow: 'hidden',
+      maxWidth: '100%',
+      textOverflow: 'ellipsis'
+    },
+    span: {
+      display: 'block',
+      marginTop: 2
+    }
+  };
+});
+
+var SwatchLabels = _theming.styled.div({
+  display: 'flex',
+  flexDirection: 'row'
+});
+
+var Swatch = _theming.styled.div(function (_ref4) {
+  var background = _ref4.background;
+  return {
+    position: 'relative',
+    flex: 1,
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background: background,
+      content: '""'
+    }
+  };
+});
+
+var SwatchColors = _theming.styled.div(function (_ref5) {
+  var theme = _ref5.theme;
+  return Object.assign({}, (0, _BlockBackgroundStyles.getBlockBackgroundStyle)(theme), {
+    display: 'flex',
+    flexDirection: 'row',
+    height: 50,
+    marginBottom: 5,
+    overflow: 'hidden',
+    backgroundColor: 'white',
+    backgroundImage: "repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)",
+    backgroundClip: 'padding-box'
+  });
+});
+
+var SwatchSpecimen = _theming.styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  position: 'relative',
+  marginBottom: 30
+});
+
+var Swatches = _theming.styled.div({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'row'
+});
+
+var Item = _theming.styled.div({
+  display: 'flex',
+  alignItems: 'flex-start'
+});
+
+var ListName = _theming.styled.div({
+  flex: '0 0 30%'
+});
+
+var ListSwatches = _theming.styled.div({
+  flex: 1
+});
+
+var ListHeading = _theming.styled.div(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 20,
+    fontWeight: theme.typography.weight.bold,
+    color: theme.base === 'light' ? (0, _polished.transparentize)(0.4, theme.color.defaultText) : (0, _polished.transparentize)(0.6, theme.color.defaultText)
+  };
+});
+
+var List = _theming.styled.div(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    fontSize: theme.typography.size.s2,
+    lineHeight: "20px",
+    display: 'flex',
+    flexDirection: 'column'
+  };
+});
+
+function renderSwatch(color, index) {
+  return /*#__PURE__*/_react.default.createElement(Swatch, {
+    key: "".concat(color, "-").concat(index),
+    title: color,
+    background: color
+  });
+}
+
+renderSwatch.displayName = "renderSwatch";
+
+function renderSwatchLabel(color, index, colorDescription) {
+  return /*#__PURE__*/_react.default.createElement(SwatchLabel, {
+    key: "".concat(color, "-").concat(index),
+    title: color
+  }, /*#__PURE__*/_react.default.createElement("div", null, color, colorDescription && /*#__PURE__*/_react.default.createElement("span", null, colorDescription)));
+}
+
+renderSwatchLabel.displayName = "renderSwatchLabel";
+
+function renderSwatchSpecimen(colors) {
+  if (Array.isArray(colors)) {
+    return /*#__PURE__*/_react.default.createElement(SwatchSpecimen, null, /*#__PURE__*/_react.default.createElement(SwatchColors, null, colors.map(function (color, index) {
+      return renderSwatch(color, index);
+    })), /*#__PURE__*/_react.default.createElement(SwatchLabels, null, colors.map(function (color, index) {
+      return renderSwatchLabel(color, index);
+    })));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(SwatchSpecimen, null, /*#__PURE__*/_react.default.createElement(SwatchColors, null, Object.values(colors).map(function (color, index) {
+    return renderSwatch(color, index);
+  })), /*#__PURE__*/_react.default.createElement(SwatchLabels, null, Object.keys(colors).map(function (color, index) {
+    return renderSwatchLabel(color, index, colors[color]);
+  })));
+}
+
+renderSwatchSpecimen.displayName = "renderSwatchSpecimen";
+
+/**
+ * A single color row your styleguide showing title, subtitle and one or more colors, used
+ * as a child of `ColorPalette`.
+ */
+var ColorItem = function ColorItem(_ref8) {
+  var title = _ref8.title,
+      subtitle = _ref8.subtitle,
+      colors = _ref8.colors;
+  return /*#__PURE__*/_react.default.createElement(Item, null, /*#__PURE__*/_react.default.createElement(ItemDescription, null, /*#__PURE__*/_react.default.createElement(ItemTitle, null, title), /*#__PURE__*/_react.default.createElement(ItemSubtitle, null, subtitle)), /*#__PURE__*/_react.default.createElement(Swatches, null, renderSwatchSpecimen(colors)));
+};
+
+exports.ColorItem = ColorItem;
+ColorItem.displayName = "ColorItem";
+
+/**
+ * Styleguide documentation for colors, including names, captions, and color swatches,
+ * all specified as `ColorItem` children of this wrapper component.
+ */
+var ColorPalette = function ColorPalette(_ref9) {
+  var children = _ref9.children,
+      props = _objectWithoutProperties(_ref9, ["children"]);
+
+  return /*#__PURE__*/_react.default.createElement(_DocumentFormatting.ResetWrapper, null, /*#__PURE__*/_react.default.createElement(List, _extends({}, props, {
+    className: "docblock-colorpalette"
+  }), /*#__PURE__*/_react.default.createElement(ListHeading, null, /*#__PURE__*/_react.default.createElement(ListName, null, "Name"), /*#__PURE__*/_react.default.createElement(ListSwatches, null, "Swatches")), children));
+};
+
+exports.ColorPalette = ColorPalette;
+ColorPalette.displayName = "ColorPalette";

package/dist/cjs/blocks/ColorPalette.stories.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NamedColors = exports.defaultStyle = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ColorPalette = require("./ColorPalette");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Docs/ColorPalette',
+  component: _ColorPalette.ColorPalette
+};
+exports.default = _default;
+
+var defaultStyle = function defaultStyle() {
+  return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPalette, null, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.greyscale",
+    subtitle: "Some of the greys",
+    colors: ['#FFFFFF', '#F8F8F8', '#F3F3F3']
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.primary",
+    subtitle: "Coral",
+    colors: ['#FF4785']
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.secondary",
+    subtitle: "Ocean",
+    colors: ['#1EA7FD']
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.positive",
+    subtitle: "Green",
+    colors: ['rgba(102,191,60,1)', 'rgba(102,191,60,.8)', 'rgba(102,191,60,.6)', 'rgba(102,191,60,.3)']
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "gradient",
+    subtitle: "Grayscale",
+    colors: ['linear-gradient(to right,white,black)']
+  }));
+};
+
+exports.defaultStyle = defaultStyle;
+defaultStyle.displayName = "defaultStyle";
+
+var NamedColors = function NamedColors() {
+  return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPalette, null, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.greyscale",
+    subtitle: "Some of the greys",
+    colors: {
+      White: '#FFFFFF',
+      Alabaster: '#F8F8F8',
+      Concrete: '#F3F3F3'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.primary",
+    subtitle: "Coral",
+    colors: {
+      WildWatermelon: '#FF4785'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.secondary",
+    subtitle: "Ocean",
+    colors: {
+      DodgerBlue: '#1EA7FD'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "theme.color.positive",
+    subtitle: "Green",
+    colors: {
+      Apple: 'rgba(102,191,60,1)',
+      Apple80: 'rgba(102,191,60,.8)',
+      Apple60: 'rgba(102,191,60,.6)',
+      Apple30: 'rgba(102,191,60,.3)'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
+    title: "gradient",
+    subtitle: "Grayscale",
+    colors: {
+      Gradient: 'linear-gradient(to right,white,black)'
+    }
+  }));
+};
+
+exports.NamedColors = NamedColors;
+NamedColors.displayName = "NamedColors";

package/dist/cjs/blocks/Description.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Description = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
+
+var _DocumentFormatting = require("../typography/DocumentFormatting");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * A markdown description for a component, typically used to show the
+ * components docgen docs.
+ */
+var Description = function Description(_ref) {
+  var markdown = _ref.markdown;
+  return /*#__PURE__*/_react.default.createElement(_DocumentFormatting.ResetWrapper, null, /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, {
+    options: {
+      forceBlock: true,
+      overrides: _.components
+    }
+  }, markdown));
+};
+
+exports.Description = Description;
+Description.displayName = "Description";

package/dist/cjs/blocks/Description.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MarkdownCodeSnippets = exports.MarkdownLinks = exports.Markdown = exports.Text = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Description = require("./Description");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Docs/Description',
+  component: _Description.Description
+};
+exports.default = _default;
+var textCaption = "That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case\u2019s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man\u2019s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.";
+var markdownCaption = "\n# My Example Markdown\n\nThe 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\u2019s skills, obsessions, kneejerk responses.\n\n![An image](http://place-hold.it/350x150)\n\nHe 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.\n";
+var markdownWithLinksCaption = "\n# [Link](https://storybook.js.org/) in heading\n## [Link](https://storybook.js.org/) in heading\n### [Link](https://storybook.js.org/) in heading\n#### [Link](https://storybook.js.org/) in heading\n##### [Link](https://storybook.js.org/) in heading\n###### [Link](https://storybook.js.org/) in heading\n\nHe stared at the clinic, [Molly](https://storybook.js.org/) took him to the *[Tank War](https://storybook.js.org/)*, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon.\n";
+var markdownWithCodeSnippets = "\n# My Example Markdown\n\nAn `inline` codeblock\n\n```tsx\n// TypeScript React code block\nexport const MyStory = () => {\n  return <Button>Click me</Button>;\n};\n```\n\n```\ncode block with with no language\nconst a = fn({\n  b: 2,\n});\n```\n";
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Description.Description, args);
+};
+
+Template.displayName = "Template";
+var Text = Template.bind({});
+exports.Text = Text;
+Text.args = {
+  markdown: textCaption
+};
+var Markdown = Template.bind({});
+exports.Markdown = Markdown;
+Markdown.args = {
+  markdown: markdownCaption
+};
+var MarkdownLinks = Template.bind({});
+exports.MarkdownLinks = MarkdownLinks;
+MarkdownLinks.args = {
+  markdown: markdownWithLinksCaption
+};
+var MarkdownCodeSnippets = Template.bind({});
+exports.MarkdownCodeSnippets = MarkdownCodeSnippets;
+MarkdownCodeSnippets.args = {
+  markdown: markdownWithCodeSnippets
+};

package/dist/cjs/blocks/DocsPage.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPageWrapper = exports.DocsWrapper = exports.DocsContent = exports.Subtitle = exports.Title = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _polished = require("polished");
+
+var _shared = require("../typography/shared");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+var breakpoint = 600;
+
+var Title = _theming.styled.h1(_shared.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
+
+  });
+});
+
+exports.Title = Title;
+
+var Subtitle = _theming.styled.h2(_shared.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", (0, _polished.transparentize)(0.25, theme.color.defaultText)), _ref4;
+});
+
+exports.Subtitle = Subtitle;
+
+var DocsContent = _theming.styled.div({
+  maxWidth: 1000,
+  width: '100%'
+});
+
+exports.DocsContent = DocsContent;
+
+var DocsWrapper = _theming.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)"), {});
+});
+
+exports.DocsWrapper = DocsWrapper;
+
+var DocsPageWrapper = function DocsPageWrapper(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/_react.default.createElement(DocsWrapper, null, /*#__PURE__*/_react.default.createElement(DocsContent, null, children));
+};
+
+exports.DocsPageWrapper = DocsPageWrapper;
+DocsPageWrapper.displayName = "DocsPageWrapper";

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

@@ -0,0 +1,113 @@
+"use strict";
+
+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); }
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Markdown = exports.Text = exports.NoText = exports.Empty = exports.WithSubtitle = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _DocsPage = require("./DocsPage");
+
+var _index = require("./index");
+
+var Story = _interopRequireWildcard(require("./Story.stories"));
+
+var Preview = _interopRequireWildcard(require("./Preview.stories"));
+
+var argsTable = _interopRequireWildcard(require("./ArgsTable/ArgsTable.stories"));
+
+var source = _interopRequireWildcard(require("./Source.stories"));
+
+var description = _interopRequireWildcard(require("./Description.stories"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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)."; }
+
+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__
+};
+
+var _default = {
+  title: 'Docs/DocsPage',
+  component: _DocsPage.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Global, {
+      styles: _ref
+    }), storyFn());
+  }],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+exports.default = _default;
+
+var WithSubtitle = function WithSubtitle() {
+  return /*#__PURE__*/_react.default.createElement(_DocsPage.DocsPageWrapper, null, /*#__PURE__*/_react.default.createElement(_DocsPage.Title, null, "DocsPage"), /*#__PURE__*/_react.default.createElement(_DocsPage.Subtitle, null, "What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab."), /*#__PURE__*/_react.default.createElement(_index.Description, description.Text.args), /*#__PURE__*/_react.default.createElement(Preview.Single, null), /*#__PURE__*/_react.default.createElement(_index.ArgsTable, argsTable.Normal.args), /*#__PURE__*/_react.default.createElement(_index.Source, source.JSX.args));
+};
+
+exports.WithSubtitle = WithSubtitle;
+WithSubtitle.displayName = "WithSubtitle";
+
+var Empty = function Empty() {
+  return /*#__PURE__*/_react.default.createElement(_DocsPage.DocsPageWrapper, null, /*#__PURE__*/_react.default.createElement(Story.Error, null), /*#__PURE__*/_react.default.createElement(_index.ArgsTable, argsTable.Error.args), /*#__PURE__*/_react.default.createElement(_index.Source, source.SourceUnavailable.args));
+};
+
+exports.Empty = Empty;
+Empty.displayName = "Empty";
+
+var NoText = function NoText() {
+  return /*#__PURE__*/_react.default.createElement(_DocsPage.DocsPageWrapper, null, /*#__PURE__*/_react.default.createElement(_DocsPage.Title, null, "no text"), /*#__PURE__*/_react.default.createElement(Preview.Single, null), /*#__PURE__*/_react.default.createElement(_index.ArgsTable, argsTable.Normal.args), /*#__PURE__*/_react.default.createElement(_index.Source, source.JSX.args));
+};
+
+exports.NoText = NoText;
+NoText.displayName = "NoText";
+
+var Text = function Text() {
+  return /*#__PURE__*/_react.default.createElement(_DocsPage.DocsPageWrapper, null, /*#__PURE__*/_react.default.createElement(_DocsPage.Title, null, "Sensorium"), /*#__PURE__*/_react.default.createElement(_index.Description, description.Text.args), /*#__PURE__*/_react.default.createElement(Preview.Single, null), /*#__PURE__*/_react.default.createElement(_index.ArgsTable, argsTable.Normal.args), /*#__PURE__*/_react.default.createElement(_index.Source, source.JSX.args));
+};
+
+exports.Text = Text;
+Text.displayName = "Text";
+
+var Markdown = function Markdown() {
+  return /*#__PURE__*/_react.default.createElement(_DocsPage.DocsPageWrapper, null, /*#__PURE__*/_react.default.createElement(_DocsPage.Title, null, "markdown"), /*#__PURE__*/_react.default.createElement(_index.Description, description.Markdown.args), /*#__PURE__*/_react.default.createElement(Preview.Single, null), /*#__PURE__*/_react.default.createElement(_index.ArgsTable, argsTable.Normal.args), /*#__PURE__*/_react.default.createElement(_index.Source, source.JSX.args));
+};
+
+exports.Markdown = Markdown;
+Markdown.displayName = "Markdown";