@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/modern/blocks/Preview.stories.js

@@ -1,219 +0,0 @@
-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 global from 'global';
-import { Spaced } from '../spaced/Spaced';
-import { Preview, PreviewSkeleton } from './Preview';
-import { Story } from './Story';
-import { Button } from '../Button/Button';
-import * as Source from './Source.stories';
-const {
-  window: globalWindow
-} = global;
-export default {
-  title: 'Docs/Preview',
-  component: Preview
-};
-export const Loading = () => /*#__PURE__*/React.createElement(PreviewSkeleton, null);
-Loading.displayName = "Loading";
-export const CodeCollapsed = () => /*#__PURE__*/React.createElement(Preview, {
-  isExpanded: false,
-  withSource: Source.JSX.args
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-CodeCollapsed.displayName = "CodeCollapsed";
-export const CodeExpanded = () => /*#__PURE__*/React.createElement(Preview, {
-  isExpanded: true,
-  withSource: Source.JSX.args
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-CodeExpanded.displayName = "CodeExpanded";
-export const CodeError = () => /*#__PURE__*/React.createElement(Preview, {
-  isExpanded: true,
-  withSource: Source.SourceUnavailable.args
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-CodeError.displayName = "CodeError";
-export const Single = () => /*#__PURE__*/React.createElement(Preview, null, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-Single.displayName = "Single";
-export const Row = () => /*#__PURE__*/React.createElement(Preview, null, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 3"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 4"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 5"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 6"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 7"));
-Row.displayName = "Row";
-export const Column = () => /*#__PURE__*/React.createElement(Preview, {
-  isColumn: true
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 3"));
-Column.displayName = "Column";
-export const GridWith3Columns = () => /*#__PURE__*/React.createElement(Preview, {
-  columns: 3
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 3"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 4"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 5"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 6"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 7 long long long long long title"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 8"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 9"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 10"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 11"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 12"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 13"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 14"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 15"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 16"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 17"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 18"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 19"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 20"));
-GridWith3Columns.displayName = "GridWith3Columns";
-
-const buttonFn = () => /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Hello Button");
-
-buttonFn.displayName = "buttonFn";
-export const WithToolbar = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "with toolbar"
-}));
-WithToolbar.displayName = "WithToolbar";
-const Horizontal = styled(props => /*#__PURE__*/React.createElement(Spaced, _extends({
-  col: 1
-}, props)))({
-  display: 'grid',
-  gridTemplateColumns: '100px calc(100vw + 100px) 100px'
-});
-export const Wide = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Horizontal, null, /*#__PURE__*/React.createElement("div", null, "START"), /*#__PURE__*/React.createElement("div", null, "middle"), /*#__PURE__*/React.createElement("div", null, "END")));
-Wide.displayName = "Wide";
-export const WithToolbarMulti = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1"
-}), /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story2"
-}));
-WithToolbarMulti.displayName = "WithToolbarMulti";
-export const WithFullscreenSingle = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'fullscreen'
-  }
-}));
-WithFullscreenSingle.displayName = "WithFullscreenSingle";
-export const WithFullscreenMulti = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'fullscreen'
-  }
-}), /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story2",
-  parameters: {
-    layout: 'fullscreen'
-  }
-}));
-WithFullscreenMulti.displayName = "WithFullscreenMulti";
-export const WithCenteredSingle = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'centered'
-  }
-}));
-WithCenteredSingle.displayName = "WithCenteredSingle";
-export const WithCenteredMulti = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'centered'
-  }
-}), /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story2",
-  parameters: {
-    layout: 'centered'
-  }
-}));
-WithCenteredMulti.displayName = "WithCenteredMulti";
-export const WithAdditionalActions = () => /*#__PURE__*/React.createElement(Preview, {
-  additionalActions: [{
-    title: 'Open on GitHub',
-    onClick: () => {
-      globalWindow.location.href = 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/Preview.stories.tsx#L140-L147';
-    }
-  }]
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-WithAdditionalActions.displayName = "WithAdditionalActions";

package/dist/modern/blocks/Source.js

@@ -1,117 +0,0 @@
-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 _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 React from 'react';
-import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
-import { EmptyBlock } from './EmptyBlock';
-import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter';
-const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({
-  theme
-}) => ({
-  // DocBlocks-specific styling and overrides
-  fontSize: `${theme.typography.size.s2 - 1}px`,
-  lineHeight: '19px',
-  margin: '25px 0 40px',
-  borderRadius: theme.appBorderRadius,
-  boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-  'pre.prismjs': {
-    padding: 20,
-    background: 'inherit'
-  }
-}));
-export let SourceError;
-
-(function (SourceError) {
-  SourceError["NO_STORY"] = "There\u2019s no story here.";
-  SourceError["SOURCE_UNAVAILABLE"] = "Oh no! The source is not available.";
-})(SourceError || (SourceError = {}));
-
-const SourceSkeletonWrapper = styled.div(({
-  theme
-}) => ({
-  background: theme.background.content,
-  borderRadius: theme.appBorderRadius,
-  border: `1px solid ${theme.appBorderColor}`,
-  boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-  margin: '25px 0 40px',
-  padding: '20px 20px 20px 22px'
-}));
-const SourceSkeletonPlaceholder = styled.div(({
-  theme
-}) => ({
-  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-  background: theme.appBorderColor,
-  height: 17,
-  marginTop: 1,
-  width: '60%',
-  '&:first-child': {
-    margin: 0
-  }
-}));
-
-const SourceSkeleton = () => /*#__PURE__*/React.createElement(SourceSkeletonWrapper, null, /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, null), /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, {
-  style: {
-    width: '80%'
-  }
-}), /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, {
-  style: {
-    width: '30%'
-  }
-}), /*#__PURE__*/React.createElement(SourceSkeletonPlaceholder, {
-  style: {
-    width: '80%'
-  }
-}));
-
-SourceSkeleton.displayName = "SourceSkeleton";
-
-/**
- * Syntax-highlighted source code for a component (or anything!)
- */
-const Source = props => {
-  const {
-    isLoading,
-    error
-  } = props;
-
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(SourceSkeleton, null);
-  }
-
-  if (error) {
-    return /*#__PURE__*/React.createElement(EmptyBlock, null, error);
-  }
-
-  const _ref = props,
-        {
-    language,
-    code,
-    dark,
-    format
-  } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, ["language", "code", "dark", "format"]);
-
-  const syntaxHighlighter = /*#__PURE__*/React.createElement(StyledSyntaxHighlighter, _extends({
-    bordered: true,
-    copyable: true,
-    format: format,
-    language: language,
-    className: "docblock-source"
-  }, rest), code);
-
-  if (typeof dark === 'undefined') {
-    return syntaxHighlighter;
-  }
-
-  const overrideTheme = dark ? themes.dark : themes.light;
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: convert(overrideTheme)
-  }, syntaxHighlighter);
-};
-
-Source.displayName = "Source";
-Source.defaultProps = {
-  format: false
-};
-export { Source, StyledSyntaxHighlighter };

package/dist/modern/blocks/Source.stories.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Source, SourceError } from './Source';
-export default {
-  title: 'Docs/Source',
-  component: Source
-};
-export const Loading = args => /*#__PURE__*/React.createElement(Source, args);
-Loading.displayName = "Loading";
-Loading.args = {
-  isLoading: true
-};
-const jsxCode = `
-<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>
-  <SomeOtherComponent funcProp={(a) => a.id} />
-</MyComponent>
-`;
-export const JSX = args => /*#__PURE__*/React.createElement(Source, args);
-JSX.displayName = "JSX";
-JSX.args = {
-  code: jsxCode,
-  language: 'jsx',
-  format: false
-};
-const cssCode = `
-@-webkit-keyframes blinker {
-  from { opacity: 1.0; }
-  to { opacity: 0.0; }
-}
-
-.waitingForConnection {
-  -webkit-animation-name: blinker;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-  -webkit-animation-duration: 1.7s;
-}
-`;
-export const CSS = args => /*#__PURE__*/React.createElement(Source, args);
-CSS.displayName = "CSS";
-CSS.args = {
-  code: cssCode,
-  language: 'css',
-  format: false
-};
-export const NoStory = args => /*#__PURE__*/React.createElement(Source, args);
-NoStory.displayName = "NoStory";
-NoStory.args = {
-  error: SourceError.NO_STORY,
-  format: false
-};
-export const SourceUnavailable = args => /*#__PURE__*/React.createElement(Source, args);
-SourceUnavailable.displayName = "SourceUnavailable";
-SourceUnavailable.args = {
-  error: SourceError.SOURCE_UNAVAILABLE,
-  format: false
-};

package/dist/modern/blocks/Story.js

@@ -1,93 +0,0 @@
-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 global from 'global';
-import React, { createElement, Fragment } from 'react';
-import { IFrame } from './IFrame';
-import { EmptyBlock } from './EmptyBlock';
-import { ZoomContext } from './ZoomContext';
-import { Loader } from '..';
-const {
-  PREVIEW_URL
-} = global;
-const BASE_URL = PREVIEW_URL || 'iframe.html';
-export let StoryError;
-/** error message for Story with null storyFn
- * if the story id exists, it must be pointing to a non-existing story
- *  if there is assigned story id, the story must be empty
- */
-
-(function (StoryError) {
-  StoryError["NO_STORY"] = "No component or story to display";
-})(StoryError || (StoryError = {}));
-
-const MISSING_STORY = id => id ? `Story "${id}" doesn't exist.` : StoryError.NO_STORY;
-
-const InlineStory = ({
-  storyFn,
-  height,
-  id
-}) => /*#__PURE__*/React.createElement(Fragment, null, height ? /*#__PURE__*/React.createElement("style", null, `#story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, /*#__PURE__*/React.createElement(Fragment, null, storyFn ? /*#__PURE__*/createElement(storyFn) : /*#__PURE__*/React.createElement(EmptyBlock, null, MISSING_STORY(id))));
-
-InlineStory.displayName = "InlineStory";
-
-const IFrameStory = ({
-  id,
-  title,
-  height = '500px'
-}) => /*#__PURE__*/React.createElement("div", {
-  style: {
-    width: '100%',
-    height
-  }
-}, /*#__PURE__*/React.createElement(ZoomContext.Consumer, null, ({
-  scale
-}) => {
-  return /*#__PURE__*/React.createElement(IFrame, {
-    key: "iframe",
-    id: `iframe--${id}`,
-    title: title,
-    src: `${BASE_URL}?id=${id}&viewMode=story`,
-    allowFullScreen: true,
-    scale: scale,
-    style: {
-      width: '100%',
-      height: '100%',
-      border: '0 none'
-    }
-  });
-}));
-
-IFrameStory.displayName = "IFrameStory";
-
-/**
- * A story element, either rendered inline or in an iframe,
- * with configurable height.
- */
-const Story = (_ref) => {
-  let {
-    error,
-    inline
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "error", "inline"]);
-
-  const {
-    id,
-    title,
-    height
-  } = props;
-
-  if (error) {
-    return /*#__PURE__*/React.createElement(EmptyBlock, null, error);
-  }
-
-  return inline ? /*#__PURE__*/React.createElement(InlineStory, props) : /*#__PURE__*/React.createElement(IFrameStory, {
-    id: id,
-    title: title,
-    height: height
-  });
-};
-
-const StorySkeleton = () => /*#__PURE__*/React.createElement(Loader, null);
-
-StorySkeleton.displayName = "StorySkeleton";
-export { Story, StorySkeleton };

package/dist/modern/blocks/Story.stories.js

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { Story, StorySkeleton, StoryError } from './Story';
-import { Button } from '../Button/Button';
-export default {
-  title: 'Docs/Story',
-  component: Story
-};
-
-const buttonFn = () => /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Inline story");
-
-buttonFn.displayName = "buttonFn";
-
-const buttonHookFn = () => {
-  const [count, setCount] = useState(0);
-  return /*#__PURE__*/React.createElement(Button, {
-    secondary: true,
-    onClick: () => setCount(count + 1)
-  }, `count: ${count}`);
-};
-
-buttonHookFn.displayName = "buttonHookFn";
-export const Loading = () => /*#__PURE__*/React.createElement(StorySkeleton, null);
-Loading.displayName = "Loading";
-export const Inline = () => /*#__PURE__*/React.createElement(Story, {
-  id: "id",
-  inline: true,
-  storyFn: buttonFn,
-  title: "hello button"
-});
-Inline.displayName = "Inline";
-export const Error = () => /*#__PURE__*/React.createElement(Story, {
-  id: "id",
-  error: StoryError.NO_STORY
-});
-Error.displayName = "Error";
-export const ReactHook = () => /*#__PURE__*/React.createElement(Story, {
-  id: "id",
-  inline: true,
-  storyFn: buttonHookFn,
-  title: "hello button"
-});
-ReactHook.displayName = "ReactHook";

package/dist/modern/blocks/Toolbar.js

@@ -1,85 +0,0 @@
-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 React, { Fragment } from 'react';
-import { styled } from '@storybook/theming';
-import { FlexBar } from '../bar/bar';
-import { Icons } from '../icon/icon';
-import { IconButton, IconButtonSkeleton } from '../bar/button';
-
-const Zoom = ({
-  zoom,
-  resetZoom
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
-  key: "zoomin",
-  onClick: e => {
-    e.preventDefault();
-    zoom(0.8);
-  },
-  title: "Zoom in"
-}, /*#__PURE__*/React.createElement(Icons, {
-  icon: "zoom"
-})), /*#__PURE__*/React.createElement(IconButton, {
-  key: "zoomout",
-  onClick: e => {
-    e.preventDefault();
-    zoom(1.25);
-  },
-  title: "Zoom out"
-}, /*#__PURE__*/React.createElement(Icons, {
-  icon: "zoomout"
-})), /*#__PURE__*/React.createElement(IconButton, {
-  key: "zoomreset",
-  onClick: e => {
-    e.preventDefault();
-    resetZoom();
-  },
-  title: "Reset zoom"
-}, /*#__PURE__*/React.createElement(Icons, {
-  icon: "zoomreset"
-})));
-
-const Eject = ({
-  baseUrl,
-  storyId
-}) => /*#__PURE__*/React.createElement(IconButton, {
-  key: "opener",
-  href: `${baseUrl}?id=${storyId}`,
-  target: "_blank",
-  title: "Open canvas in new tab"
-}, /*#__PURE__*/React.createElement(Icons, {
-  icon: "share"
-}));
-
-Eject.displayName = "Eject";
-const Bar = styled(FlexBar)({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  transition: 'transform .2s linear'
-});
-export const Toolbar = (_ref) => {
-  let {
-    isLoading,
-    storyId,
-    baseUrl,
-    zoom,
-    resetZoom
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["isLoading", "storyId", "baseUrl", "zoom", "resetZoom"]);
-
-  return /*#__PURE__*/React.createElement(Bar, rest, /*#__PURE__*/React.createElement(Fragment, {
-    key: "left"
-  }, isLoading ? [1, 2, 3].map(key => /*#__PURE__*/React.createElement(IconButtonSkeleton, {
-    key: key
-  })) : /*#__PURE__*/React.createElement(Zoom, {
-    zoom,
-    resetZoom
-  })), /*#__PURE__*/React.createElement(Fragment, {
-    key: "right"
-  }, storyId && (isLoading ? /*#__PURE__*/React.createElement(IconButtonSkeleton, null) : /*#__PURE__*/React.createElement(Eject, {
-    storyId,
-    baseUrl
-  }))));
-};
-Toolbar.displayName = "Toolbar";

package/dist/modern/blocks/Typeset.js

@@ -1,63 +0,0 @@
-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 _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 React from 'react';
-import { styled } from '@storybook/theming';
-import { transparentize } from 'polished';
-import { withReset } from '../typography/shared';
-import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
-const Label = styled.div(({
-  theme
-}) => ({
-  marginRight: 30,
-  fontSize: `${theme.typography.size.s1}px`,
-  color: theme.base === 'light' ? transparentize(0.4, theme.color.defaultText) : transparentize(0.6, theme.color.defaultText)
-}));
-const Sample = styled.div({
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis'
-});
-const TypeSpecimen = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'baseline',
-  '&:not(:last-child)': {
-    marginBottom: '1rem'
-  }
-});
-const Wrapper = styled.div(withReset, ({
-  theme
-}) => Object.assign({}, getBlockBackgroundStyle(theme), {
-  margin: '25px 0 40px',
-  padding: '30px 20px'
-}));
-
-/**
- * Convenient styleguide documentation showing examples of type
- * with different sizes and weights and configurable sample text.
- */
-export const Typeset = (_ref) => {
-  let {
-    fontFamily,
-    fontSizes,
-    fontWeight,
-    sampleText
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["fontFamily", "fontSizes", "fontWeight", "sampleText"]);
-
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
-    className: "docblock-typeset"
-  }), fontSizes.map(size => /*#__PURE__*/React.createElement(TypeSpecimen, {
-    key: size
-  }, /*#__PURE__*/React.createElement(Label, null, size), /*#__PURE__*/React.createElement(Sample, {
-    style: {
-      fontFamily,
-      fontSize: size,
-      fontWeight,
-      lineHeight: 1.2
-    }
-  }, sampleText || 'Was he a beast if music could move him so?'))));
-};
-Typeset.displayName = "Typeset";