@clement_lores/admin-design-system 1.0.0

package/build/atoms/tooltip/tooltip.doc.md

@@ -0,0 +1,61 @@
+<img src="components/tooltip.png" />
+
+Renders Tooltip
+
+### Usage
+
+```jsx
+import { Tooltip, TooltipContent } from '@adminjs/design-system'
+
+// Wrapping existing element with a tooltip
+return (
+  <Box>
+    <Tooltip title="I am tooltip">
+      <Button>I am tooltip</Button>
+    </Tooltip>
+  </Box>
+)
+
+// Adding more complicated content
+return (
+  <Box>
+    <Tooltip>
+      <TooltipContent>
+        <Text>I am text inside with <strong>BoldedText</strong></Text>
+      </TooltipContent>
+      <Button>I am tooltip</Button>
+    </Tooltip>
+  </Box>
+)
+```
+
+As you can see on the examples, there are 2 ways of passing tooltip message:
+
+1. by the `title` prop
+2. by the TooltipContent component
+
+The first way is the easiest, but the second allows you to put whatever styled content you like.
+
+### Props
+
+The Tooltip Component takes 3 custom props:
+
+- `title`
+- `direction` - default to `bottom`
+- `size`
+
+See {@link TooltipProps} below.
+
+### Example
+
+1. Direction and title
+
+```reactComponent
+return (
+  <Box p="xxl">
+    <Tooltip title="example info" direction="right">
+     <Button>indicator</Button>
+    </Tooltip>
+  </Box>
+)
+```

package/build/atoms/tooltip/tooltip.js

@@ -0,0 +1,65 @@
+/* eslint-disable max-len */
+import React, { useState, useRef, forwardRef } from 'react';
+import PortalUtils from "../../utils/portal-utils.js";
+import { TooltipControl } from "./tooltip-control.js";
+const TooltipPortal = PortalUtils.createPortalForKey('TOOLTIP', TooltipControl);
+
+/**
+ * @load ./tooltip.doc.md
+ * @component
+ * @subcategory Atoms
+ * @hideconstructor
+ * @new In version 3.3
+ * @section design-system
+ */
+export const Tooltip = props => {
+  const {
+    direction,
+    title,
+    children,
+    size
+  } = props;
+  const childRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  let TriggerElement;
+  let ContentElement;
+  const childrenCount = React.Children.count(children);
+  if (childrenCount === 1) {
+    TriggerElement = children;
+  } else if (childrenCount === 2) {
+    React.Children.forEach(children, child => {
+      const type = child.type?.displayName;
+      if (type === 'TooltipContent') {
+        ContentElement = child;
+      } else {
+        TriggerElement = child;
+      }
+    });
+  }
+  const onEnter = () => {
+    setIsVisible(true);
+  };
+  const onLeave = () => {
+    setIsVisible(false);
+  };
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const ChildWithRef = /*#__PURE__*/forwardRef((triggerProps, ref) => /*#__PURE__*/React.cloneElement(TriggerElement, {
+    ...triggerProps,
+    displayName: 'TooltipTrigger',
+    ref
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChildWithRef, {
+    ref: childRef,
+    onMouseEnter: onEnter,
+    onMouseLeave: onLeave
+  }), isVisible && /*#__PURE__*/React.createElement(TooltipPortal, {
+    title: title,
+    childRef: childRef,
+    size: size,
+    direction: direction,
+    ContentElement: ContentElement
+  }));
+};
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;

package/build/atoms/tooltip/tooltip.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Box, Button, H4, Text } from "../index.js";
+import { Tooltip, TooltipContent } from "./index.js";
+const Direction = {
+  right: 'right',
+  left: 'left',
+  top: 'top',
+  bottom: 'bottom'
+};
+const Size = ['default', 'lg'];
+export const Default = {
+  render: args => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Regular example"
+  }, /*#__PURE__*/React.createElement(Tooltip, args, /*#__PURE__*/React.createElement(Button, null, "Standard text"))), /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Custom component as tooltip"
+  }, /*#__PURE__*/React.createElement(Tooltip, args, /*#__PURE__*/React.createElement(TooltipContent, null, /*#__PURE__*/React.createElement(H4, null, "Header"), /*#__PURE__*/React.createElement(Text, null, "Some text inside the tooltip?")), /*#__PURE__*/React.createElement(Button, null, "Header with sth"))))
+};
+const meta = {
+  title: 'DesignSystem/Atoms/Tooltip',
+  component: Tooltip,
+  args: {
+    direction: Direction.top,
+    size: Size[0],
+    title: 'Example info'
+  },
+  argTypes: {
+    direction: {
+      options: Object.values(Direction),
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: Size,
+      control: {
+        type: 'select'
+      }
+    },
+    title: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/typography/caption-shared.js

@@ -0,0 +1,10 @@
+import { typography, space } from 'styled-system';
+import { css } from "../../../build/utils/styled.js";
+import themeGet from "../../utils/theme-get.js";
+export const CaptionShared = css`
+  font-family: ${themeGet('font')};
+  font-weight: ${themeGet('fontWeights', 'normal')};
+  ${typography};
+  ${space};
+`;
+export default CaptionShared;

package/build/atoms/typography/caption.js

@@ -0,0 +1,10 @@
+import { styled } from "../../../build/utils/styled.js";
+import themeGet from "../../utils/theme-get.js";
+import CaptionShared from "./caption-shared.js";
+export const Caption = styled('div')`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'sm')};
+  line-height: ${themeGet('lineHeights', 'md')};
+`;
+Caption.displayName = 'Caption';
+export default Caption;

package/build/atoms/typography/card-title.js

@@ -0,0 +1,14 @@
+import { styled } from "../../../build/utils/styled.js";
+import themeGet from "../../utils/theme-get.js";
+import CaptionShared from "./caption-shared.js";
+export const CardTitle = styled('div')`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'md')};
+  line-height: ${themeGet('lineHeights', 'lg')};
+  margin: ${themeGet('space', 'lg')} 0;
+  * > &:first-child {
+    margin-top: 0;
+  }
+`;
+CardTitle.displayName = 'CardTitle';
+export default CardTitle;

package/build/atoms/typography/header.doc.md

@@ -0,0 +1,38 @@
+<img src="components/header.png" />
+
+The Header component is a base for all headers.
+
+### Usage
+
+```javascript
+import { H1, H2, H3, H4, H5, H6 } from '@adminjs/design-system'
+
+// or
+
+import { Header } from '@adminjs/design-system'
+// Header.H1
+```
+By default, the Heading component renders __H3__ element.
+
+### Example
+
+This is how headers looks
+
+```reactComponent
+return (
+<Box py="lg">
+  <Header.H1>H1 Header - 40</Header.H1>
+  <Text variant="sm" marginBottom={5}>Roboto 40 - line height - 40</Text>
+  <Header.H2>H2 Header - 32</Header.H2>
+  <Text variant="sm" marginBottom={5}>Roboto 32 - line height - 40</Text>
+  <Header.H3>H3 Header - 28</Header.H3>
+  <Text variant="sm" marginBottom={5}>Roboto 28 - line height - 32</Text>
+  <Header.H4>H4 Header - 24</Header.H4>
+  <Text variant="sm" marginBottom={5}>Roboto 24 - line height - 32</Text>
+  <Header.H5>H5 Header - 18</Header.H5>
+  <Text variant="sm" marginBottom={5}>Roboto 18 - line height - 24</Text>
+  <Header.H6>H6 Header - 16</Header.H6>
+  <Text variant="sm" marginBottom={5}>Roboto 16 - line height - 24</Text>
+</Box>
+)
+```

package/build/atoms/typography/header.js

@@ -0,0 +1,128 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { typography, space } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { Button } from "../button/index.js";
+import { Badge } from "../badge/index.js";
+import { cssClass } from "../../utils/css-class.js";
+import themeGet from "../../utils/theme-get.js";
+
+/**
+ * Prop Types of an Header components.
+ * Apart from all props for a standard hx elements it extends
+ * {@link TypographyProps} and {@link SpaceProps}
+ *
+ * @memberof Header
+ * @alias HeaderProps
+ * @property {string} [...] Other props from {@link TypographyProps}, {@link SpaceProps}
+ */
+
+const Base = styled.h3`
+  font-family: ${themeGet('font')};
+  vertical-align: middle;
+  padding: 0;
+  * {
+    vertical-align: middle;
+  }
+  & ${Button}, a {
+    vertical-align: bottom;
+  }
+  * > &:first-child {
+    margin-top: ${themeGet('space', 'sm')};
+  }
+  ${Badge} {
+    vertical-align: middle;
+  }
+
+  ${typography};
+  ${space};
+`;
+Base.defaultProps = {
+  fontWeight: 'normal',
+  fontSize: 'h3',
+  lineHeight: 'xl',
+  className: cssClass(['Header', 'H3']),
+  marginTop: 'xxl',
+  marginBottom: 'xl'
+};
+export const H1 = styled(props => /*#__PURE__*/React.createElement(Base, _extends({
+  as: "h1"
+}, props)))``;
+H1.defaultProps = {
+  fontSize: 'h1',
+  lineHeight: 'xxl',
+  className: cssClass(['Header', 'H1']),
+  marginTop: 'x4',
+  marginBottom: 'x3'
+};
+H1.displayName = 'H1';
+export const H2 = styled(props => /*#__PURE__*/React.createElement(Base, _extends({
+  as: "h2"
+}, props)))`
+  & ${Button}, a {
+    margin-bottom: 4px;
+  }
+`;
+H2.defaultProps = {
+  fontSize: 'h2',
+  lineHeight: 'xxl',
+  className: cssClass(['Header', 'H2']),
+  marginTop: 'x3',
+  marginBottom: 'xxl'
+};
+H2.displayName = 'H2';
+export const H3 = Base;
+H3.displayName = 'H3';
+export const H4 = styled(props => /*#__PURE__*/React.createElement(Base, _extends({
+  as: "h4"
+}, props)))``;
+H4.defaultProps = {
+  fontSize: 'h4',
+  lineHeight: 'xl',
+  className: cssClass(['Header', 'H4']),
+  marginTop: 'xxl',
+  marginBottom: 'xl'
+};
+H4.displayName = 'H4';
+export const H5 = styled(props => /*#__PURE__*/React.createElement(Base, _extends({
+  as: "h5"
+}, props)))``;
+H5.defaultProps = {
+  fontSize: 'xl',
+  lineHeight: 'lg',
+  className: cssClass(['Header', 'H5']),
+  marginTop: 'xl',
+  marginBottom: 'default',
+  fontWeight: 'normal'
+};
+H5.displayName = 'H5';
+export const H6 = styled(props => /*#__PURE__*/React.createElement(Base, _extends({
+  as: "h6"
+}, props)))``;
+H6.defaultProps = {
+  fontSize: 'lg',
+  lineHeight: 'lg',
+  className: cssClass(['Header', 'H6']),
+  marginTop: 'lg',
+  marginBottom: 'default',
+  fontWeight: 'normal'
+};
+H6.displayName = 'H6';
+
+/**
+ * @load ./header.doc.md
+ * @component
+ * @subcategory Atoms
+ * @see HeaderProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-header--default Storybook}
+ * @hideconstructor
+ * @section design-system
+ */
+export const Header = H3;
+Header.H1 = H1;
+Header.H2 = H2;
+Header.H3 = H3;
+Header.H4 = H4;
+Header.H5 = H5;
+Header.H6 = H6;
+export default Header;

package/build/atoms/typography/index.js

@@ -0,0 +1,5 @@
+export * from "./header.js";
+export * from "./caption.js";
+export * from "./card-title.js";
+export * from "./small-text.js";
+export * from "./title.js";

package/build/atoms/typography/small-text.js

@@ -0,0 +1,10 @@
+import { styled } from "../../../build/utils/styled.js";
+import themeGet from "../../utils/theme-get.js";
+import CaptionShared from "./caption-shared.js";
+export const SmallText = styled('div')`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'xs')};
+  line-height: ${themeGet('lineHeights', 'sm')};
+`;
+SmallText.displayName = 'SmallText';
+export default SmallText;

package/build/atoms/typography/title.js

@@ -0,0 +1,10 @@
+import { styled } from "../../../build/utils/styled.js";
+import themeGet from "../../utils/theme-get.js";
+import CaptionShared from "./caption-shared.js";
+export const Title = styled('div')`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'md')};
+  line-height: ${themeGet('lineHeights', 'lg')};
+`;
+Title.displayName = 'Title';
+export default Title;

package/build/atoms/typography/typography.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Button } from "../button/index.js";
+import { Box, Text } from "../index.js";
+import { Caption, CardTitle, H1, H2, H3, H4, H5, Header, SmallText } from "./index.js";
+const BoxWithPaddings = Box;
+export const Headers = () => /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Headers with paddings"
+}, /*#__PURE__*/React.createElement(BoxWithPaddings, {
+  bg: "white"
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    height: 0,
+    opacity: 0
+  }
+}, "div"), /*#__PURE__*/React.createElement(Header.H1, null, "H1 Header - 40"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 40 - line height - 40"), /*#__PURE__*/React.createElement(Header.H2, null, "H2 Header - 32"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 32 - line height - 40"), /*#__PURE__*/React.createElement(Header.H3, null, "H3 Header - 28"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 28 - line height - 32"), /*#__PURE__*/React.createElement(Header.H4, null, "H4 Header - 24"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 24 - line height - 32"), /*#__PURE__*/React.createElement(Header.H5, null, "H5 Header - 18"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 18 - line height - 24"), /*#__PURE__*/React.createElement(Header.H6, null, "H6 Header - 16"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 16 - line height - 24")));
+export const TextExample = {
+  render: props => /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Example Text container"
+  }, /*#__PURE__*/React.createElement(Text, props, "Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Est enim effectrix multarum et magnarum voluptatum. Omnia contraria, quos etiam insanos esse vultis. Quid, de quo nulla dissensio est? Egone quaeris, inquit, quid sentiam? Duo Reges: constructio interrete. Sed in rebus apertissimis nimium longi sumus.", /*#__PURE__*/React.createElement(Button, {
+    as: "a"
+  }, "Button inside the text")))
+};
+export const ContentExample = () => /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Example styled content inside Text component"
+}, /*#__PURE__*/React.createElement(Box, {
+  p: "x4"
+}, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h1", null, "Hello World"), /*#__PURE__*/React.createElement("h2", null, "Some header 2"), /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel interdum mattis neque."), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "interdum mattis neque.")), /*#__PURE__*/React.createElement("h2", null, "Second level"), /*#__PURE__*/React.createElement("p", null, "Curabitur accumsan turpis pharetra ", /*#__PURE__*/React.createElement("strong", null, "augue tincidunt"), " blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl."), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "In fermentum leo eu lectus mollis, quis dictum mi aliquet."), /*#__PURE__*/React.createElement("li", null, "Morbi eu nulla lobortis, lobortis est in, fringilla felis."), /*#__PURE__*/React.createElement("li", null, "Aliquam nec felis in sapien venenatis viverra fermentum nec lectus."), /*#__PURE__*/React.createElement("li", null, "Ut non enim metus.")), /*#__PURE__*/React.createElement("blockquote", null, "And here it comes - the quote"), /*#__PURE__*/React.createElement("h5", null, "Header H5"), /*#__PURE__*/React.createElement("pre", null, "const a = 1;", '\n', "const b = 0;"), /*#__PURE__*/React.createElement("p", null, "And below there is a Table"), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Surname"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Wojtek"), /*#__PURE__*/React.createElement("td", null, "Krysiak")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Joseph"), /*#__PURE__*/React.createElement("td", null, "Grad")))), /*#__PURE__*/React.createElement("p", null, "text goes on..."))));
+export const Example = () => /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Example content page"
+}, /*#__PURE__*/React.createElement(Box, {
+  p: "x4",
+  bg: "white"
+}, /*#__PURE__*/React.createElement(H1, null, "H1. Nam de isto magna dissensio est."), /*#__PURE__*/React.createElement(H2, null, "H2. Sed in rebus apertissimis nimium"), /*#__PURE__*/React.createElement(Text, null, "Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Est enim effectrix multarum et magnarum voluptatum. Omnia contraria, quos etiam insanos esse vultis. Quid, de quo nulla dissensio est? Egone quaeris, inquit, quid sentiam? Duo Reges: constructio interrete. Sed in rebus apertissimis nimium longi sumus."), /*#__PURE__*/React.createElement(Text, null, "Text. Nam et a te perfici istam disputationem volo, nec tua mihi oratio longa videri potest. Beatus autem esse in maximarum rerum timore nemo potest. Inquit, respondet: Quia, nisi quod honestum est, nullum est aliud bonum! Non quaero iam verumne sit; Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? Non prorsus, inquit, omnisque, qui sine dolore sint, in voluptate, et ea quidem summa, esse dico. Addidisti ad extremum etiam indoctum fuisse. Apparet statim, quae sint officia, quae actiones. Hi autem ponunt illi quidem prima naturae, sed ea seiungunt a finibus et a summa bonorum;"), /*#__PURE__*/React.createElement(H3, null, "H3. Vitae autem degendae ratio maxime quidem illis placuit quieta."), /*#__PURE__*/React.createElement(Text, null, "Text. Hanc se tuus Epicurus omnino ignorare dicit quam aut qualem esse velint qui honestate summum bonum metiantur. Idem iste, inquam, de voluptate quid sentit? Quid interest, nisi quod ego res notas notis verbis appello, illi nomina nova quaerunt, quibus idem dicant? Etsi ea quidem, quae adhuc dixisti,"), /*#__PURE__*/React.createElement(H4, null, "H4. quae senserit ille, tibi non vera videantur."), /*#__PURE__*/React.createElement(Text, null, "quam dicat Epicurus voluptatem. Iubet igitur nos Pythius Apollo noscere nosmet ipsos. Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim."), /*#__PURE__*/React.createElement(H4, null, "H4. Dicam, inquam, et quidem discendi causa magis."), /*#__PURE__*/React.createElement(Text, null, "quamvis ad aetatem recte isto modo dicerentur. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Nam illud quidem adduci vix possum, ut ea, Nihil enim iam habes, quod ad corpus referas; Itaque hoc frequenter dici solet a vobis, non intellegere nos,"), /*#__PURE__*/React.createElement(Text, null, "Text. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Obscura, inquit, quaedam esse confiteor, nec tamen ab illis ita dicuntur de industria, sed inest in rebus ipsis obscuritas. Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad honestatem dictorum atque factorum. Atque ut a corpore ordiar,"), /*#__PURE__*/React.createElement(H5, null, "H5. Mortuus. Quae cum magnifice primo"), /*#__PURE__*/React.createElement(Text, null, "Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Deinde disputat,"), /*#__PURE__*/React.createElement(H5, null, "H5. Honestate summum bonum metiantur"), /*#__PURE__*/React.createElement(Text, null, "quod cuiusque generis animantium statui deceat extremum. Ita multo sanguine profuso in"), /*#__PURE__*/React.createElement(H5, null, "H5. In alia summum bonum ponere? Cum "), /*#__PURE__*/React.createElement(Text, null, "laetitia et in victoria est mortuus. Quae cum magnifice primo dici viderentur, considerata"), /*#__PURE__*/React.createElement(Text, null, "minus probabantur. Hanc se tuus Epicurus omnino ignorare dicit quam aut qualem esse velint qui honestate summum bonum metiantur. Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Cum sciret confestim esse moriendum eamque mortem"), /*#__PURE__*/React.createElement(Text, null, "ardentiore studio peteret, quam Epicurus voluptatem petendam putat."), /*#__PURE__*/React.createElement(Text, null, "Text. Sed tu istuc dixti bene Latine, parum plane. His similes sunt omnes, qui virtuti studentlevantur vitiis, levantur erroribus, nisi forte censes Ti. Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros. An dubium est, quin virtus ita maximam partem optineat in rebus humanis, ut reliquas obruat? Quo studio Aristophanem putamus aetatem in litteris duxisse? Vides igitur te aut ea sumere, quae non concedantur, aut ea, quae etiam concessa te nihil iuvent."), /*#__PURE__*/React.createElement(H2, null, "H2. Audeo dicere, inquit."), /*#__PURE__*/React.createElement(Text, null, "Text. Nulla profecto est, quin suam vim retineat a primo ad extremum. Video equidem, inquam, sed tamen iam infici debet iis artibus, quas si, dum est tener, conbiberit, ad maiora veniet paratior. Sed alii dolore moventur, alii cupiditate, iracundia etiam multi effetuntur et, cum in mala scientes inruunt, tum se optime sibi consulere arbitrantur. Hoc igitur quaerentes omnes, et ii, qui quodcumque in mentem veniat aut quodcumque occurrat se sequi dicent, et vos ad naturam revertemini. Et si in ipsa gubernatione neglegentia est navis eversa, maius est peccatum in auro quam in palea. Aut pertinacissimus fueris, si in eo perstiteris ad corpus ea, quae dixi, referri, aut deserueris totam Epicuri voluptatem, si negaveris."), /*#__PURE__*/React.createElement(Text, null, "Text. Age, inquies, ista parva sunt. Etiam inchoatum, ut, si iuste depositum reddere in recte factis sit, in officiis ponatur depositum reddere; Haec quo modo conveniant, non sane intellego. At certe gravius."), /*#__PURE__*/React.createElement(Text, null, "Text. Istam voluptatem perpetuam quis potest praestare sapienti? Nihil enim arbitror esse magna laude dignum, quod te praetermissurum credam aut mortis aut doloris metu. Et certamen honestum et disputatio splendida! omnis est enim de virtutis dignitate contentio. Consequens enim est et post oritur, ut dixi. Hoc dictum in una re latissime patet, ut in omnibus factis re, non teste moveamur. Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Sin laboramus, quis est, qui alienae modum statuat industriae? Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quos quidem dies quem ad modum agatis et in quantam hominum facetorum urbanitatem incurratis, non diconihil opus est litibus-; Ita, quem ad modum in senatu semper est aliquis, qui interpretem postulet, sic, isti nobis cum interprete audiendi sunt.")));
+export const CaptionExample = () => /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Captions"
+}, /*#__PURE__*/React.createElement(CardTitle, null, "Card Title - 15"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 14 - line height - 40"), /*#__PURE__*/React.createElement(Caption, null, "Caption - 12"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 12 - line height - 16"), /*#__PURE__*/React.createElement(SmallText, null, "Small Text - 10"), /*#__PURE__*/React.createElement(Text, {
+  variant: "sm",
+  mb: 5
+}, "Roboto 10 - line height - 12"));
+const meta = {
+  title: 'DesignSystem/Atoms/Typography',
+  component: Text,
+  args: {
+    variant: 'lg'
+  },
+  argTypes: {
+    variant: {
+      options: ['xs', 'sm', 'lg'],
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+export default meta;

package/build/constants.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const DEFAULT_DRAWER_WIDTH = '500px';

package/build/global.js

@@ -0,0 +1,53 @@
+import { createGlobalStyle } from "../build/utils/styled.js";
+
+// eslint-disable-next-line import/prefer-default-export
+export const GlobalStyle = createGlobalStyle`
+  /* http://meyerweb.com/eric/tools/css/reset/ 
+    v2.0 | 20110126
+    License: none (public domain)
+  */
+
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure, 
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol, ul {
+    list-style: none;
+  }
+  blockquote, q {
+    quotes: none;
+  }
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+`;

package/build/hooks/use-window-size.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+const useWindowSize = () => {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState();
+  useEffect(() => {
+    // Handler to call on window resize
+    const handleResize = () => {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize || null;
+};
+export default useWindowSize;