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

package/dist/esm/spaced/Spaced.js

@@ -0,0 +1,84 @@
+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; }
+
+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 "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
+import React from 'react';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
+
+var toNumber = function toNumber(input) {
+  return typeof input === 'number' ? input : Number(input);
+};
+
+var Container = styled.div(function (_ref) {
+  var theme = _ref.theme,
+      col = _ref.col,
+      _ref$row = _ref.row,
+      row = _ref$row === void 0 ? 1 : _ref$row;
+  return col ? _defineProperty({
+    display: 'inline-block',
+    verticalAlign: 'inherit',
+    '& > *': {
+      marginLeft: col * theme.layoutMargin,
+      verticalAlign: 'inherit'
+    }
+  }, "& > *:first-child".concat(ignoreSsrWarning), {
+    marginLeft: 0
+  }) : _defineProperty({
+    '& > *': {
+      marginTop: row * theme.layoutMargin
+    }
+  }, "& > *:first-child".concat(ignoreSsrWarning), {
+    marginTop: 0
+  });
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      outer = _ref4.outer,
+      col = _ref4.col,
+      row = _ref4.row;
+
+  switch (true) {
+    case !!(outer && col):
+      {
+        return {
+          marginLeft: outer * theme.layoutMargin,
+          marginRight: outer * theme.layoutMargin
+        };
+      }
+
+    case !!(outer && row):
+      {
+        return {
+          marginTop: outer * theme.layoutMargin,
+          marginBottom: outer * theme.layoutMargin
+        };
+      }
+
+    default:
+      {
+        return {};
+      }
+  }
+});
+export var Spaced = function Spaced(_ref5) {
+  var col = _ref5.col,
+      row = _ref5.row,
+      outer = _ref5.outer,
+      children = _ref5.children,
+      rest = _objectWithoutProperties(_ref5, ["col", "row", "outer", "children"]);
+
+  var outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    col: col,
+    row: row,
+    outer: outerAmount
+  }, rest), children);
+};
+Spaced.displayName = "Spaced";

package/dist/esm/spaced/Spaced.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { styled } from '@storybook/theming';
+import { Spaced } from './Spaced';
+var PlaceholderBlock = styled.div(function (_ref) {
+  var color = _ref.color;
+  return {
+    background: color || 'hotpink',
+    padding: 20
+  };
+});
+var PlaceholderInline = styled.span(function (_ref2) {
+  var color = _ref2.color;
+  return {
+    background: color || 'hotpink',
+    display: 'inline-block',
+    padding: 20
+  };
+});
+storiesOf('Basics/Spaced', module).add('row', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    color: "silver"
+  }), /*#__PURE__*/React.createElement(Spaced, {
+    row: 1
+  }, /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null)), /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    color: "silver"
+  }));
+}).add('row outer', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    color: "silver"
+  }), /*#__PURE__*/React.createElement(Spaced, {
+    row: 1,
+    outer: true
+  }, /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null)), /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    color: "silver"
+  }));
+}).add('row multiply', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    color: "silver"
+  }), /*#__PURE__*/React.createElement(Spaced, {
+    row: 3,
+    outer: 0.5
+  }, /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null)), /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    color: "silver"
+  }));
+}).add('col', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderInline, {
+    color: "silver"
+  }), /*#__PURE__*/React.createElement(Spaced, {
+    col: 1
+  }, /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null)), /*#__PURE__*/React.createElement(PlaceholderInline, {
+    color: "silver"
+  }));
+}).add('col outer', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderInline, {
+    color: "silver"
+  }), /*#__PURE__*/React.createElement(Spaced, {
+    col: 1,
+    outer: true
+  }, /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null)), /*#__PURE__*/React.createElement(PlaceholderInline, {
+    color: "silver"
+  }));
+});

package/dist/esm/syntaxhighlighter/formatter.js

@@ -0,0 +1,5 @@
+import memoize from 'memoizerific';
+import dedent from 'ts-dedent';
+export var formatter = memoize(2)(function (code) {
+  return dedent(code);
+});

package/dist/esm/syntaxhighlighter/lazy-syntaxhighlighter.js

@@ -0,0 +1,12 @@
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.to-string.js";
+import React, { Suspense } from 'react';
+var LazySyntaxHighlighter = /*#__PURE__*/React.lazy(function () {
+  return import('./syntaxhighlighter');
+});
+export var SyntaxHighlighter = function SyntaxHighlighter(props) {
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(LazySyntaxHighlighter, props));
+};
+SyntaxHighlighter.displayName = "SyntaxHighlighter";

package/dist/esm/syntaxhighlighter/syntaxhighlighter.js

@@ -0,0 +1,250 @@
+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 "regenerator-runtime/runtime.js";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.string.trim.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.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";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.keys.js";
+import React, { useState } from 'react';
+import { logger } from '@storybook/client-logger';
+import { styled } from '@storybook/theming';
+import global from 'global';
+import memoize from 'memoizerific'; // @ts-ignore
+
+import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'; // @ts-ignore
+
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash'; // @ts-ignore
+
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css'; // @ts-ignore
+
+import jsExtras from 'react-syntax-highlighter/dist/esm/languages/prism/js-extras'; // @ts-ignore
+
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json'; // @ts-ignore
+
+import graphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql'; // @ts-ignore
+
+import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup'; // @ts-ignore
+
+import md from 'react-syntax-highlighter/dist/esm/languages/prism/markdown'; // @ts-ignore
+
+import yml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml'; // @ts-ignore
+
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'; // @ts-ignore
+
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'; // @ts-ignore
+
+import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+import { ActionBar } from '../ActionBar/ActionBar';
+import { ScrollArea } from '../ScrollArea/ScrollArea';
+import { formatter } from './formatter';
+var navigator = global.navigator,
+    document = global.document,
+    globalWindow = global.window;
+ReactSyntaxHighlighter.registerLanguage('jsextra', jsExtras);
+ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
+ReactSyntaxHighlighter.registerLanguage('json', json);
+ReactSyntaxHighlighter.registerLanguage('yml', yml);
+ReactSyntaxHighlighter.registerLanguage('md', md);
+ReactSyntaxHighlighter.registerLanguage('bash', bash);
+ReactSyntaxHighlighter.registerLanguage('css', css);
+ReactSyntaxHighlighter.registerLanguage('html', html);
+ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
+ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
+ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
+var themedSyntax = memoize(2)(function (theme) {
+  return Object.entries(theme.code || {}).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        val = _ref2[1];
+
+    return Object.assign({}, acc, _defineProperty({}, "* .".concat(key), val));
+  }, {});
+});
+var copyToClipboard = createCopyToClipboardFunction();
+export function createCopyToClipboardFunction() {
+  if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
+    return function (text) {
+      return navigator.clipboard.writeText(text);
+    };
+  }
+
+  return /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(text) {
+      var tmp, focus;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              tmp = document.createElement('TEXTAREA');
+              focus = document.activeElement;
+              tmp.value = text;
+              document.body.appendChild(tmp);
+              tmp.select();
+              document.execCommand('copy');
+              document.body.removeChild(tmp);
+              focus.focus();
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+}
+var Wrapper = styled.div(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    position: 'relative',
+    overflow: 'hidden',
+    color: theme.color.defaultText
+  };
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      bordered = _ref5.bordered;
+  return bordered ? {
+    border: "1px solid ".concat(theme.appBorderColor),
+    borderRadius: theme.borderRadius,
+    background: theme.background.content
+  } : {};
+});
+var Scroller = styled(function (_ref6) {
+  var children = _ref6.children,
+      className = _ref6.className;
+  return /*#__PURE__*/React.createElement(ScrollArea, {
+    horizontal: true,
+    vertical: true,
+    className: className
+  }, children);
+})({
+  position: 'relative'
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    '& code': {
+      paddingRight: theme.layoutMargin
+    }
+  };
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return themedSyntax(theme);
+});
+var Pre = styled.pre(function (_ref9) {
+  var theme = _ref9.theme,
+      padded = _ref9.padded;
+  return {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    margin: 0,
+    padding: padded ? theme.layoutMargin : 0
+  };
+});
+var Code = styled.code({
+  flex: 1,
+  paddingRight: 0,
+  opacity: 1
+});
+export var SyntaxHighlighter = function SyntaxHighlighter(_ref10) {
+  var children = _ref10.children,
+      _ref10$language = _ref10.language,
+      language = _ref10$language === void 0 ? 'jsx' : _ref10$language,
+      _ref10$copyable = _ref10.copyable,
+      copyable = _ref10$copyable === void 0 ? false : _ref10$copyable,
+      _ref10$bordered = _ref10.bordered,
+      bordered = _ref10$bordered === void 0 ? false : _ref10$bordered,
+      _ref10$padded = _ref10.padded,
+      padded = _ref10$padded === void 0 ? false : _ref10$padded,
+      _ref10$format = _ref10.format,
+      format = _ref10$format === void 0 ? true : _ref10$format,
+      _ref10$className = _ref10.className,
+      className = _ref10$className === void 0 ? null : _ref10$className,
+      _ref10$showLineNumber = _ref10.showLineNumbers,
+      showLineNumbers = _ref10$showLineNumber === void 0 ? false : _ref10$showLineNumber,
+      rest = _objectWithoutProperties(_ref10, ["children", "language", "copyable", "bordered", "padded", "format", "className", "showLineNumbers"]);
+
+  if (typeof children !== 'string' || !children.trim()) {
+    return null;
+  }
+
+  var highlightableCode = format ? formatter(children) : children.trim();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      copied = _useState2[0],
+      setCopied = _useState2[1];
+
+  var onClick = function onClick(e) {
+    e.preventDefault();
+    var selectedText = globalWindow.getSelection().toString();
+    var textToCopy = e.type !== 'click' && selectedText ? selectedText : highlightableCode;
+    copyToClipboard(textToCopy).then(function () {
+      setCopied(true);
+      globalWindow.setTimeout(function () {
+        return setCopied(false);
+      }, 1500);
+    }).catch(logger.error);
+  };
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    bordered: bordered,
+    padded: padded,
+    className: className,
+    onCopyCapture: onClick
+  }, /*#__PURE__*/React.createElement(Scroller, null, /*#__PURE__*/React.createElement(ReactSyntaxHighlighter, _extends({
+    padded: padded || bordered,
+    language: language,
+    showLineNumbers: showLineNumbers,
+    showInlineLineNumbers: showLineNumbers,
+    useInlineStyles: false,
+    PreTag: Pre,
+    CodeTag: Code,
+    lineNumberContainerStyle: {}
+  }, rest), highlightableCode)), copyable ? /*#__PURE__*/React.createElement(ActionBar, {
+    actionItems: [{
+      title: copied ? 'Copied' : 'Copy',
+      onClick: onClick
+    }]
+  }) : null);
+};
+SyntaxHighlighter.displayName = "SyntaxHighlighter";
+export default SyntaxHighlighter;

package/dist/esm/syntaxhighlighter/syntaxhighlighter.stories.js

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ThemeProvider, themes, ensure } from '@storybook/theming';
+import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
+storiesOf('Basics/SyntaxHighlighter', module).add('bash', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "bash",
+    copyable: false
+  }, "npx npm-check-updates '/storybook/' -u && npm install");
+}).add('css', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "css",
+    copyable: false
+  }, "\n        .className {\n          border: 1px solid hotpink;\n        }\n      ");
+}).add('json', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "json",
+    copyable: false
+  }, "\n      {\n        \"number\": 1,\n        \"string\": \"something\",\n        \"object\": {\n          \"property\": \"value\",\n        },\n        array: [1,2,3],\n      }\n      ");
+}).add('markdown', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "markdown",
+    copyable: false
+  }, "\n      # a big header\n\n      some code:\n\n      ~~~js\n      const name = \"a string\";\n      ~~~\n\n      > crazy\n\n      ");
+}).add('yaml', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "yaml",
+    copyable: false
+  }, "\n        product:\n        - sku         : BL394D\n          quantity    : 4\n          description : Basketball\n          price       : 450.00\n      ");
+}).add('jsx', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "jsx",
+    copyable: false
+  }, "import { Good, Things } from 'life';\n\n        const result = () => <Good><Things all={true} /></Good>;\n\n        export { result as default };\n      ");
+}).add('js', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "jsx",
+    copyable: false
+  }, "import React, { createElement } from 'react';\n        import { Good, Things } from 'life';\n\n        const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);\n\n        console.log(result);\n\n        export { result as default };\n      ");
+}).add('graphql', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "graphql",
+    copyable: false
+  }, "query HeroNameAndFriends($episode: Episode) {\n          hero(episode: $episode) {\n            name\n            friends {\n              name\n            }\n          }\n        }\n      ");
+}).add('unsupported', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "C#",
+    bordered: true,
+    copyable: true
+  }, "\n        // A Hello World! program in C#.\n        using System;\n        namespace HelloWorld\n        {\n          class Hello \n          {\n            static void Main() \n            {\n              Console.WriteLine(\"Hello World!\");\n\n              // Keep the console window open in debug mode.\n              Console.WriteLine(\"Press any key to exit.\");\n              Console.ReadKey();\n            }\n          }\n        }\n      ");
+}).add('dark unsupported', function () {
+  var theme = ensure(themes.dark);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    bordered: true,
+    language: "C#",
+    copyable: true
+  }, "\n            // A Hello World! program in C#.\n            using System;\n            namespace HelloWorld\n            {\n              class Hello \n              {\n                static void Main() \n                {\n                  Console.WriteLine(\"Hello World!\");\n\n                  // Keep the console window open in debug mode.\n                  Console.WriteLine(\"Press any key to exit.\");\n                  Console.ReadKey();\n                }\n              }\n            }\n          "));
+}).add('story', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "jsx",
+    copyable: false
+  }, "\n        import React from 'react';\n        import { storiesOf } from '@storybook/react';\n        import { styled } from '@storybook/theming';\n\n        import Heading from './heading';\n\n        const Holder = styled.div({\n          margin: 10,\n          border: '1px dashed deepskyblue',\n          // overflow: 'hidden',\n        });\n\n        storiesOf('Basics|Heading', module).add('types', () => (\n          <div>\n            <Holder>\n              <Heading>DEFAULT WITH ALL CAPS</Heading>\n            </Holder>\n            <Holder>\n              <Heading sub=\"With a great sub\">THIS LONG DEFAULT WITH ALL CAPS & SUB</Heading>\n            </Holder>\n            <Holder>\n              <Heading type=\"page\">page type</Heading>\n            </Holder>\n            <Holder>\n              <Heading type=\"page\" sub=\"With a sub\">\n                page type\n              </Heading>\n            </Holder>\n          </div>\n        ));\n      ");
+}).add('bordered & copy-able', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "jsx",
+    copyable: true,
+    bordered: true
+  }, "import { Good, Things } from 'life';\n\n        const result = () => <Good><Things /></Good>;\n\n        export { result as default };\n      ");
+}).add('padded', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "jsx",
+    padded: true
+  }, "import { Good, Things } from 'life';\n\n        const result = () => <Good><Things /></Good>;\n\n        export { result as default };\n      ");
+}).add('showLineNumbers', function () {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: "jsx",
+    copyable: false,
+    showLineNumbers: true
+  }, "import { Good, Things } from 'life';\n\n        const result = () => <Good><Things /></Good>;\n\n        export { result as default };\n      ");
+});