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

package/dist/esm/typography/DocumentWrapper.js

@@ -0,0 +1,288 @@
+import { styled } from '@storybook/theming';
+export var DocumentWrapper = styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: "".concat(theme.typography.size.s2, "px"),
+    lineHeight: '1.6',
+    h1: {
+      fontSize: "".concat(theme.typography.size.l1, "px"),
+      fontWeight: theme.typography.weight.black
+    },
+    h2: {
+      fontSize: "".concat(theme.typography.size.m2, "px"),
+      borderBottom: "1px solid ".concat(theme.appBorderColor)
+    },
+    h3: {
+      fontSize: "".concat(theme.typography.size.m1, "px")
+    },
+    h4: {
+      fontSize: "".concat(theme.typography.size.s3, "px")
+    },
+    h5: {
+      fontSize: "".concat(theme.typography.size.s2, "px")
+    },
+    h6: {
+      fontSize: "".concat(theme.typography.size.s2, "px"),
+      color: theme.color.dark
+    },
+    'pre:not(.prismjs)': {
+      background: 'transparent',
+      border: 'none',
+      borderRadius: 0,
+      padding: 0,
+      margin: 0
+    },
+    'pre pre, pre.prismjs': {
+      padding: 15,
+      margin: 0,
+      whiteSpace: 'pre-wrap',
+      color: 'inherit',
+      fontSize: '13px',
+      lineHeight: '19px'
+    },
+    'pre pre code, pre.prismjs code': {
+      color: 'inherit',
+      fontSize: 'inherit'
+    },
+    'pre code': {
+      margin: 0,
+      padding: 0,
+      whiteSpace: 'pre',
+      border: 'none',
+      background: 'transparent'
+    },
+    'pre code, pre tt': {
+      backgroundColor: 'transparent',
+      border: 'none'
+    },
+
+    /* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */
+    'body > *:first-of-type': {
+      marginTop: '0 !important'
+    },
+    'body > *:last-child': {
+      marginBottom: '0 !important'
+    },
+    a: {
+      color: theme.color.secondary,
+      textDecoration: 'none'
+    },
+    'a.absent': {
+      color: '#cc0000'
+    },
+    'a.anchor': {
+      display: 'block',
+      paddingLeft: 30,
+      marginLeft: -30,
+      cursor: 'pointer',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0
+    },
+    'h1, h2, h3, h4, h5, h6': {
+      margin: '20px 0 10px',
+      padding: 0,
+      cursor: 'text',
+      position: 'relative',
+      '&:first-of-type': {
+        marginTop: 0,
+        paddingTop: 0
+      },
+      '&:hover a.anchor': {
+        textDecoration: 'none'
+      },
+      '& tt, & code': {
+        fontSize: 'inherit'
+      }
+    },
+    'h1:first-of-type + h2': {
+      marginTop: 0,
+      paddingTop: 0
+    },
+    'p, blockquote, ul, ol, dl, li, table, pre': {
+      margin: '15px 0'
+    },
+    hr: {
+      border: '0 none',
+      borderTop: "1px solid ".concat(theme.appBorderColor),
+      height: 4,
+      padding: 0
+    },
+    'body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type': {
+      marginTop: 0,
+      paddingTop: 0
+    },
+    'body > h1:first-of-type + h2': {
+      marginTop: 0,
+      paddingTop: 0
+    },
+    'a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6': {
+      marginTop: 0,
+      paddingTop: 0
+    },
+    'h1 p, h2 p, h3 p, h4 p, h5 p, h6 p': {
+      marginTop: 0
+    },
+    'li p.first': {
+      display: 'inline-block'
+    },
+    'ul, ol': {
+      paddingLeft: 30,
+      '& :first-of-type': {
+        marginTop: 0
+      },
+      '& :last-child': {
+        marginBottom: 0
+      }
+    },
+    dl: {
+      padding: 0
+    },
+    'dl dt': {
+      fontSize: '14px',
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      margin: '0 0 15px',
+      padding: '0 15px',
+      '&:first-of-type': {
+        padding: 0
+      },
+      '& > :first-of-type': {
+        marginTop: 0
+      },
+      '& > :last-child': {
+        marginBottom: 0
+      }
+    },
+    blockquote: {
+      borderLeft: "4px solid ".concat(theme.color.medium),
+      padding: '0 15px',
+      color: theme.color.dark,
+      '& > :first-of-type': {
+        marginTop: 0
+      },
+      '& > :last-child': {
+        marginBottom: 0
+      }
+    },
+    table: {
+      padding: 0,
+      borderCollapse: 'collapse',
+      '& tr': {
+        borderTop: "1px solid ".concat(theme.appBorderColor),
+        backgroundColor: 'white',
+        margin: 0,
+        padding: 0,
+        '& th': {
+          fontWeight: 'bold',
+          border: "1px solid ".concat(theme.appBorderColor),
+          textAlign: 'left',
+          margin: 0,
+          padding: '6px 13px'
+        },
+        '& td': {
+          border: "1px solid ".concat(theme.appBorderColor),
+          textAlign: 'left',
+          margin: 0,
+          padding: '6px 13px'
+        },
+        '&:nth-of-type(2n)': {
+          backgroundColor: theme.color.lighter
+        },
+        '& th :first-of-type, & td :first-of-type': {
+          marginTop: 0
+        },
+        '& th :last-child, & td :last-child': {
+          marginBottom: 0
+        }
+      }
+    },
+    img: {
+      maxWidth: '100%'
+    },
+    'span.frame': {
+      display: 'block',
+      overflow: 'hidden',
+      '& > span': {
+        border: "1px solid ".concat(theme.color.medium),
+        display: 'block',
+        float: 'left',
+        overflow: 'hidden',
+        margin: '13px 0 0',
+        padding: 7,
+        width: 'auto'
+      },
+      '& span img': {
+        display: 'block',
+        float: 'left'
+      },
+      '& span span': {
+        clear: 'both',
+        color: theme.color.darkest,
+        display: 'block',
+        padding: '5px 0 0'
+      }
+    },
+    'span.align-center': {
+      display: 'block',
+      overflow: 'hidden',
+      clear: 'both',
+      '& > span': {
+        display: 'block',
+        overflow: 'hidden',
+        margin: '13px auto 0',
+        textAlign: 'center'
+      },
+      '& span img': {
+        margin: '0 auto',
+        textAlign: 'center'
+      }
+    },
+    'span.align-right': {
+      display: 'block',
+      overflow: 'hidden',
+      clear: 'both',
+      '& > span': {
+        display: 'block',
+        overflow: 'hidden',
+        margin: '13px 0 0',
+        textAlign: 'right'
+      },
+      '& span img': {
+        margin: 0,
+        textAlign: 'right'
+      }
+    },
+    'span.float-left': {
+      display: 'block',
+      marginRight: 13,
+      overflow: 'hidden',
+      float: 'left',
+      '& span': {
+        margin: '13px 0 0'
+      }
+    },
+    'span.float-right': {
+      display: 'block',
+      marginLeft: 13,
+      overflow: 'hidden',
+      float: 'right',
+      '& > span': {
+        display: 'block',
+        overflow: 'hidden',
+        margin: '13px auto 0',
+        textAlign: 'right'
+      }
+    },
+    'code, tt': {
+      margin: '0 2px',
+      padding: '0 5px',
+      whiteSpace: 'nowrap',
+      border: "1px solid ".concat(theme.color.mediumlight),
+      backgroundColor: theme.color.lighter,
+      borderRadius: 3,
+      color: theme.base === 'dark' && theme.color.darkest
+    }
+  };
+});

package/dist/esm/typography/DocumentWrapper.stories.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { DocumentWrapper } from './DocumentWrapper';
+import MarkdownSample from './DocumentFormattingSample.md';
+export default {
+  component: DocumentWrapper,
+  title: 'Basics/DocumentFormatting',
+  decorators: [function (storyFn) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '600px'
+      }
+    }, storyFn());
+  }]
+};
+export var withMarkdown = function withMarkdown() {
+  return /*#__PURE__*/React.createElement(DocumentWrapper, null, /*#__PURE__*/React.createElement(MarkdownSample, null));
+};
+withMarkdown.displayName = "withMarkdown";
+export var withDOM = function withDOM() {
+  return /*#__PURE__*/React.createElement(DocumentWrapper, null, /*#__PURE__*/React.createElement("h1", null, "h1 Heading"), /*#__PURE__*/React.createElement("h2", null, "h2 Heading"), /*#__PURE__*/React.createElement("h3", null, "h3 Heading"), /*#__PURE__*/React.createElement("h4", null, "h4 Heading"), /*#__PURE__*/React.createElement("h5", null, "h5 Heading"), /*#__PURE__*/React.createElement("h6", null, "h6 Heading"), /*#__PURE__*/React.createElement("h2", null, "Typographic replacements"), /*#__PURE__*/React.createElement("p", null, "Enable typographer option to see result."), /*#__PURE__*/React.createElement("p", null, "\xA9 \xA9 \xAE \xAE \u2122 \u2122 \xA7 \xA7 \xB1"), /*#__PURE__*/React.createElement("p", null, "test\u2026 test\u2026 test\u2026 test?.. test!.."), /*#__PURE__*/React.createElement("p", null, "!!! ??? , \u2013 \u2014"), /*#__PURE__*/React.createElement("p", null, "\u201CSmartypants, double quotes\u201D and \u2018single quotes\u2019"), /*#__PURE__*/React.createElement("h2", null, "Emphasis"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "This is bold text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "This is bold text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, "This is italic text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, "This is italic text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, /*#__PURE__*/React.createElement("strong", null, "This is bold italic text"))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("s", null, "Strikethrough")), /*#__PURE__*/React.createElement("h2", null, "Blockquotes"), /*#__PURE__*/React.createElement("blockquote", null, /*#__PURE__*/React.createElement("p", null, "Blockquotes can also be nested\u2026"), /*#__PURE__*/React.createElement("blockquote", null, /*#__PURE__*/React.createElement("p", null, "\u2026by using additional greater-than signs right next to each other\u2026"), /*#__PURE__*/React.createElement("blockquote", null, /*#__PURE__*/React.createElement("p", null, "\u2026or with spaces between arrows.")))), /*#__PURE__*/React.createElement("h2", null, "Lists"), /*#__PURE__*/React.createElement("p", null, "Unordered"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Create a list by starting a line with ", /*#__PURE__*/React.createElement("code", null, "+"), ", ", /*#__PURE__*/React.createElement("code", null, "-"), ", or ", /*#__PURE__*/React.createElement("code", null, "*")), /*#__PURE__*/React.createElement("li", null, "Sub-lists are made by indenting 2 spaces:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Marker character change forces new list start:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Ac tristique libero volutpat at")), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Facilisis in pretium nisl aliquet")), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Nulla volutpat aliquam velit"))))), /*#__PURE__*/React.createElement("li", null, "Very easy!")), /*#__PURE__*/React.createElement("p", null, "Ordered"), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "Consectetur adipiscing elit")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "Integer molestie lorem at massa")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "You can use sequential numbers\u2026")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "\u2026or keep all the numbers as ", /*#__PURE__*/React.createElement("code", null, "1.")))), /*#__PURE__*/React.createElement("p", null, "Start numbering with offset:"), /*#__PURE__*/React.createElement("ol", {
+    start: 57
+  }, /*#__PURE__*/React.createElement("li", null, "foo"), /*#__PURE__*/React.createElement("li", null, "bar")), /*#__PURE__*/React.createElement("h2", null, "Horizontal Rule"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("h2", null, "Tables"), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Option"), /*#__PURE__*/React.createElement("th", null, "Description"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "data"), /*#__PURE__*/React.createElement("td", null, "path to data files to supply the data that will be passed into templates.")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "engine"), /*#__PURE__*/React.createElement("td", null, "engine to be used for processing templates. Handlebars is the default.")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "ext"), /*#__PURE__*/React.createElement("td", null, "extension to be used for dest files.")))), /*#__PURE__*/React.createElement("p", null, "Right aligned columns"), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "Option"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "Description"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "data"), /*#__PURE__*/React.createElement("td", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "path to data files to supply the data that will be passed into templates.")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "engine"), /*#__PURE__*/React.createElement("td", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "engine to be used for processing templates. Handlebars is the default.")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "ext"), /*#__PURE__*/React.createElement("td", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "extension to be used for dest files.")))), /*#__PURE__*/React.createElement("h2", null, "Links"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+    href: "http://dev.nodeca.com"
+  }, "link text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+    href: "http://nodeca.github.io/pica/demo/",
+    title: "title text!"
+  }, "link with title")), /*#__PURE__*/React.createElement("p", null, "Autoconverted link ", /*#__PURE__*/React.createElement("a", {
+    href: "https://github.com/nodeca/pica"
+  }, "https://github.com/nodeca/pica"), "\xA0(enable linkify to see)"), /*#__PURE__*/React.createElement("h2", null, "Images"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("img", {
+    src: "https://octodex.github.com/images/minion.png",
+    alt: "Minion"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: "https://octodex.github.com/images/stormtroopocat.jpg",
+    alt: "Stormtroopocat",
+    title: "The Stormtroopocat"
+  })));
+};
+withDOM.displayName = "withDOM";

package/dist/esm/typography/link/link.js

@@ -0,0 +1,188 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+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); }
+
+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 React from 'react';
+import { styled } from '@storybook/theming';
+import { darken } from 'polished';
+import { Icons } from '../../icon/icon'; // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
+
+var LEFT_BUTTON = 0;
+
+var isPlainLeftClick = function isPlainLeftClick(e) {
+  return e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+};
+
+var cancelled = function cancelled(e, cb) {
+  if (isPlainLeftClick(e)) {
+    e.preventDefault();
+    cb(e);
+  }
+};
+
+var LinkInner = styled.span(function (_ref) {
+  var withArrow = _ref.withArrow;
+  return withArrow ? {
+    '> svg:last-of-type': {
+      height: '0.7em',
+      width: '0.7em',
+      marginRight: 0,
+      marginLeft: '0.25em',
+      bottom: 'auto',
+      verticalAlign: 'inherit'
+    }
+  } : {};
+}, function (_ref2) {
+  var containsIcon = _ref2.containsIcon;
+  return containsIcon ? {
+    svg: {
+      height: '1em',
+      width: '1em',
+      verticalAlign: 'middle',
+      position: 'relative',
+      bottom: 0,
+      marginRight: 0
+    }
+  } : {};
+});
+var A = styled.a(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    display: 'inline-block',
+    transition: 'all 150ms ease-out',
+    textDecoration: 'none',
+    color: theme.color.secondary,
+    '&:hover, &:focus': {
+      cursor: 'pointer',
+      color: darken(0.07, theme.color.secondary),
+      'svg path': {
+        fill: darken(0.07, theme.color.secondary)
+      }
+    },
+    '&:active': {
+      color: darken(0.1, theme.color.secondary),
+      'svg path': {
+        fill: darken(0.1, theme.color.secondary)
+      }
+    },
+    svg: {
+      display: 'inline-block',
+      height: '1em',
+      width: '1em',
+      verticalAlign: 'text-top',
+      position: 'relative',
+      bottom: '-0.125em',
+      marginRight: '0.4em',
+      '& path': {
+        fill: theme.color.secondary
+      }
+    }
+  };
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      secondary = _ref4.secondary,
+      tertiary = _ref4.tertiary;
+  var colors;
+
+  if (secondary) {
+    colors = [theme.color.mediumdark, theme.color.dark, theme.color.darker];
+  }
+
+  if (tertiary) {
+    colors = [theme.color.dark, theme.color.darkest, theme.color.mediumdark];
+  }
+
+  return colors ? {
+    color: colors[0],
+    'svg path': {
+      fill: colors[0]
+    },
+    '&:hover': {
+      color: colors[1],
+      'svg path': {
+        fill: colors[1]
+      }
+    },
+    '&:active': {
+      color: colors[2],
+      'svg path': {
+        fill: colors[2]
+      }
+    }
+  } : {};
+}, function (_ref5) {
+  var nochrome = _ref5.nochrome;
+  return nochrome ? {
+    color: 'inherit',
+    '&:hover, &:active': {
+      color: 'inherit',
+      textDecoration: 'underline'
+    }
+  } : {};
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      inverse = _ref6.inverse;
+  return inverse ? {
+    color: theme.color.lightest,
+    'svg path': {
+      fill: theme.color.lightest
+    },
+    '&:hover': {
+      color: theme.color.lighter,
+      'svg path': {
+        fill: theme.color.lighter
+      }
+    },
+    '&:active': {
+      color: theme.color.light,
+      'svg path': {
+        fill: theme.color.light
+      }
+    }
+  } : {};
+}, function (_ref7) {
+  var isButton = _ref7.isButton;
+  return isButton ? {
+    border: 0,
+    borderRadius: 0,
+    background: 'none',
+    padding: 0,
+    fontSize: 'inherit'
+  } : {};
+});
+export var Link = function Link(_ref8) {
+  var cancel = _ref8.cancel,
+      children = _ref8.children,
+      onClick = _ref8.onClick,
+      withArrow = _ref8.withArrow,
+      containsIcon = _ref8.containsIcon,
+      className = _ref8.className,
+      rest = _objectWithoutProperties(_ref8, ["cancel", "children", "onClick", "withArrow", "containsIcon", "className"]);
+
+  return /*#__PURE__*/React.createElement(A, _extends({}, rest, {
+    onClick: cancel ? function (e) {
+      return cancelled(e, onClick);
+    } : onClick,
+    className: className
+  }), /*#__PURE__*/React.createElement(LinkInner, {
+    withArrow: withArrow,
+    containsIcon: containsIcon
+  }, children, withArrow && /*#__PURE__*/React.createElement(Icons, {
+    icon: "arrowright"
+  })));
+};
+Link.displayName = "Link";
+Link.defaultProps = {
+  cancel: true,
+  className: undefined,
+  style: undefined,
+  onClick: function onClick() {},
+  withArrow: false,
+  containsIcon: false
+};

package/dist/esm/typography/link/link.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { Link } from './link';
+import { Icons } from '../../icon/icon';
+var onClick = action('onClick');
+storiesOf('Basics/Link', module).add('cancel w/ onClick', function () {
+  return /*#__PURE__*/React.createElement(Link, {
+    cancel: true,
+    href: "/",
+    onClick: onClick
+  }, "Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)");
+}).add('cancel w/ href', function () {
+  return /*#__PURE__*/React.createElement(Link, {
+    cancel: true,
+    href: "http://example.com"
+  }, "Link");
+}).add('no-cancel w/ onClick', function () {
+  return /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    onClick: onClick
+  }, "any click will go through");
+}).add('no-cancel w/ href', function () {
+  return /*#__PURE__*/React.createElement(Link, {
+    cancel: true,
+    href: "http://example.com"
+  }, "Link");
+}).add('styled links', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Link, {
+    href: "http://google.com"
+  }, "Default"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+    secondary: true,
+    href: "http://google.com"
+  }, "Secondary"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+    tertiary: true,
+    href: "http://google.com"
+  }, "tertiary"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+    nochrome: true,
+    href: "http://google.com"
+  }, "nochrome"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+    href: "http://google.com"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "discord"
+  }), "With icon in front"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+    title: "Toggle sidebar",
+    containsIcon: true,
+    href: "http://google.com"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "sidebar"
+  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+    containsIcon: true,
+    withArrow: true,
+    href: "http://google.com"
+  }, "With arrow behind"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
+    style: {
+      background: '#333'
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    inverse: true,
+    href: "http://google.com"
+  }, "Inverted colors")), /*#__PURE__*/React.createElement("br", null));
+});

package/dist/esm/typography/shared.js

@@ -0,0 +1,50 @@
+import { transparentize } from 'polished';
+export var headerCommon = function headerCommon(_ref) {
+  var theme = _ref.theme;
+  return {
+    margin: '20px 0 8px',
+    padding: 0,
+    cursor: 'text',
+    position: 'relative',
+    color: theme.color.defaultText,
+    '&:first-of-type': {
+      marginTop: 0,
+      paddingTop: 0
+    },
+    '&:hover a.anchor': {
+      textDecoration: 'none'
+    },
+    '& tt, & code': {
+      fontSize: 'inherit'
+    }
+  };
+};
+export var codeCommon = function codeCommon(_ref2) {
+  var theme = _ref2.theme;
+  return {
+    lineHeight: 1,
+    margin: '0 2px',
+    padding: '3px 5px',
+    whiteSpace: 'nowrap',
+    borderRadius: 3,
+    fontSize: theme.typography.size.s2 - 1,
+    border: theme.base === 'light' ? "1px solid ".concat(theme.color.mediumlight) : "1px solid ".concat(theme.color.darker),
+    color: theme.base === 'light' ? transparentize(0.1, theme.color.defaultText) : transparentize(0.3, theme.color.defaultText),
+    backgroundColor: theme.base === 'light' ? theme.color.lighter : theme.color.border
+  };
+};
+export var withReset = function withReset(_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontFamily: theme.typography.fonts.base,
+    fontSize: theme.typography.size.s3,
+    margin: 0,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    WebkitOverflowScrolling: 'touch'
+  };
+};
+export var withMargin = {
+  margin: '16px 0'
+};