@bolio-ui/core 1.1.7 → 2.0.0-alpha.0

package/esm/Fieldset/stories.js

@@ -1,72 +0,0 @@
-import Fieldset from '.';
-import Button from '../Button';
-import Text from '../Text';
-import Divider from '../Divider';
-import Grid from '../Grid';
-export default {
-  title: 'Surface/Fieldset',
-  component: Fieldset
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Try React "), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "Try React", /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 3,
-    font: "12px"
-  }, "Confirm")))));
-};
-export var CustomText = function CustomText() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Add React to a Website "), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets"), /*#__PURE__*/React.createElement(Fieldset.Footer, null, /*#__PURE__*/React.createElement(Text, {
-    type: "error"
-  }, "An error has occurred."), /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 3,
-    type: "error",
-    font: "12px"
-  }, "Cancel")))));
-};
-export var Tabs = function Tabs() {
-  var handler = function handler(v) {
-    return console.log(v);
-  };
-
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset.Group, {
-    value: "create new react app",
-    onChange: handler
-  }, /*#__PURE__*/React.createElement(Fieldset, {
-    label: "create new react app"
-  }, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Create a New React App"), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!"), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "Create a New React App", /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 3,
-    font: "12px"
-  }, "Functions"))), /*#__PURE__*/React.createElement(Fieldset, {
-    label: "learn react"
-  }, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Learn React"), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you\u2019ll find this section helpful."), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "Learn React", /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 3,
-    font: "12px"
-  }, "Functions"))), /*#__PURE__*/React.createElement(Fieldset, {
-    label: "first examples"
-  }, /*#__PURE__*/React.createElement(Fieldset.Title, null, "First Examples"), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "The React homepage contains a few small React examples with a live editor. Even if you don\u2019t know anything about React yet, try changing their code and see how it affects the result."), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "First Examples", /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 3,
-    font: "12px"
-  }, "Functions"))))));
-};
-export var WithDivider = function WithDivider() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(Fieldset.Content, {
-    style: {
-      paddingTop: '10pt',
-      paddingBottom: '10pt'
-    }
-  }, /*#__PURE__*/React.createElement("h4", null, "React")), /*#__PURE__*/React.createElement(Divider, {
-    my: 0
-  }), /*#__PURE__*/React.createElement(Fieldset.Content, null, /*#__PURE__*/React.createElement(Fieldset.Title, null, "For Beginners"), /*#__PURE__*/React.createElement("p", null, "If you feel that the React documentation goes at a faster pace than you\u2019re comfortable with, check out this overview of React by Tania Rascia. It introduces the most important React concepts in a detailed, beginner-friendly way. Once you\u2019re done, give the documentation another try!")), /*#__PURE__*/React.createElement(Fieldset.Footer, null, /*#__PURE__*/React.createElement("small", null, "JavaScript Resources ")))));
-};

package/esm/Grid/stories.js

@@ -1,212 +0,0 @@
-import Grid from '.';
-import Card from '../Card';
-export default {
-  title: 'Layout/Grid',
-  component: Grid
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    justify: "center",
-    height: "100px"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%"
-  })));
-};
-export var FluidLayout = function FluidLayout() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })));
-};
-export var ResponsiveLayout = function ResponsiveLayout() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6,
-    md: 6
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6,
-    md: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6,
-    md: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6,
-    md: 3
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })));
-};
-export var HideElement = function HideElement() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 6,
-    sm: 0
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6,
-    sm: 0
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })));
-};
-export var AutoWidth = function AutoWidth() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: true
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: true
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: true
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  }))), /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: true
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: true
-  }, /*#__PURE__*/React.createElement(Card, {
-    shadow: true,
-    width: "100%",
-    height: "50px"
-  }))));
-};

package/esm/Icon/stories.js

@@ -1,36 +0,0 @@
-import Card from '../Card';
-import Grid from '../Grid';
-import { Smile } from '@bolio-ui/icons';
-export default {
-  title: 'General/Icons',
-  component: Card
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, null)));
-};
-export var Colored = function Colored() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
-    color: "purple"
-  })));
-};
-export var Size = function Size() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
-    fontSize: 16
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
-    fontSize: 20
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
-    fontSize: 24
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
-    fontSize: 28
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
-    fontSize: 32
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
-    fontSize: 36
-  })));
-};

package/esm/Image/stories.js

@@ -1,73 +0,0 @@
-import Image from '.';
-import Display from '../Display';
-import Code from '../Code';
-import Grid from '../Grid';
-export default {
-  title: 'Data Display/Image',
-  component: Image
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image, {
-    width: "280px",
-    height: "160px",
-    src: "https://bolio-ui.com/logo-white.jpg"
-  })));
-};
-export var Skeleton = function Skeleton() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image, {
-    width: "280px",
-    height: "160px",
-    src: "https://bolio-ui.com/logo-white.jpg"
-  })));
-};
-export var Browser = function Browser() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image.Browser, {
-    url: "https://bolio-ui.com.br/",
-    anchorProps: {
-      rel: 'nofollow'
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    width: "450px",
-    height: "300px",
-    src: "https://bolio-ui.com/logo-white.jpg"
-  }))));
-};
-export var BrowserInvert = function BrowserInvert() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image.Browser, {
-    url: "https://bolio-ui.com.br/",
-    invert: true
-  }, /*#__PURE__*/React.createElement(Image, {
-    width: "450px",
-    height: "300px",
-    src: "https://bolio-ui.com/logo-white.jpg"
-  }))));
-};
-export var Compose = function Compose() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Display, {
-    shadow: true,
-    caption: /*#__PURE__*/React.createElement("p", null, "Reduce the possibility of page rendering by setting", ' ', /*#__PURE__*/React.createElement(Code, null, "height"))
-  }, /*#__PURE__*/React.createElement(Image, {
-    height: "250px",
-    src: "https://bolio-ui.com/logo-white.jpg"
-  }))));
-};
-export var SVG = function SVG() {
-  var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30px\" height=\"30px\" viewBox=\"0 0 30 30\" fill=\"none\">\n    <path d=\"M13.5 3.5H14V3.29289L13.8536 3.14645L13.5 3.5ZM10.5 0.5L10.8536 0.146447L10.7071 0H10.5V0.5ZM2.5 6.5V6H2V6.5H2.5ZM2.5 8.5H2V9H2.5V8.5ZM4.5 8.5H5V8H4.5V8.5ZM4.5 10.5V11H5V10.5H4.5ZM6.5 9.5H6V9.70711L6.14645 9.85355L6.5 9.5ZM7.5 10.5L7.14645 10.8536L7.5 11.2071L7.85355 10.8536L7.5 10.5ZM8.5 9.5L8.85355 9.85355L9 9.70711V9.5H8.5ZM10.5 6.5V6H10V6.5H10.5ZM10.5 10.5H10V11H10.5V10.5ZM12.5 10.5V11H13V10.5H12.5ZM2 5V1.5H1V5H2ZM13 3.5V5H14V3.5H13ZM2.5 1H10.5V0H2.5V1ZM10.1464 0.853553L13.1464 3.85355L13.8536 3.14645L10.8536 0.146447L10.1464 0.853553ZM2 1.5C2 1.22386 2.22386 1 2.5 1V0C1.67157 0 1 0.671573 1 1.5H2ZM1 12V13.5H2V12H1ZM2.5 15H12.5V14H2.5V15ZM14 13.5V12H13V13.5H14ZM12.5 15C13.3284 15 14 14.3284 14 13.5H13C13 13.7761 12.7761 14 12.5 14V15ZM1 13.5C1 14.3284 1.67157 15 2.5 15V14C2.22386 14 2 13.7761 2 13.5H1ZM5 6H2.5V7H5V6ZM2 6.5V8.5H3V6.5H2ZM2.5 9H4.5V8H2.5V9ZM4 8.5V10.5H5V8.5H4ZM4.5 10H2V11H4.5V10ZM6 6V9.5H7V6H6ZM6.14645 9.85355L7.14645 10.8536L7.85355 10.1464L6.85355 9.14645L6.14645 9.85355ZM7.85355 10.8536L8.85355 9.85355L8.14645 9.14645L7.14645 10.1464L7.85355 10.8536ZM9 9.5V6H8V9.5H9ZM13 6H10.5V7H13V6ZM10 6.5V10.5H11V6.5H10ZM10.5 11H12.5V10H10.5V11ZM13 10.5V8.5H12V10.5H13Z\" fill=\"black\"/>\n  </svg>";
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image, {
-    width: "100px",
-    height: "50px",
-    src: svg
-  })));
-};

package/esm/Input/stories.js

@@ -1,145 +0,0 @@
-import Input from '.';
-import Grid from '../Grid';
-import Text from '../Text';
-import { Instagram, Facebook } from '@bolio-ui/icons';
-export default {
-  title: 'Data Entry/Input',
-  component: Input
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Placeholder Text"
-  })));
-};
-export var Sizes = function Sizes() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    scale: 1 / 3,
-    placeholder: "Scale 1/3"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    scale: 2 / 3,
-    placeholder: "Scale 2/3"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Scale 1"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    scale: 4 / 3,
-    placeholder: "Scale 4/3"
-  })));
-};
-export var SetWidth = function SetWidth() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Placeholder Text",
-    width: "100%"
-  })));
-};
-export var Unwritable = function Unwritable() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    disabled: true,
-    placeholder: "Disabled"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    readOnly: true,
-    initialValue: "Read Only"
-  })));
-};
-export var BlockLabel = function BlockLabel() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Block Label"
-  }, /*#__PURE__*/React.createElement(Text, {
-    h3: true
-  }, "Block Label"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Block Label"
-  }, "Block Label")));
-};
-export var Type = function Type() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Default"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "primary",
-    placeholder: "Primary"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "secondary",
-    placeholder: "Secondary"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "success",
-    placeholder: "Success"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "warning",
-    placeholder: "Warning"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "error",
-    placeholder: "Error"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "info",
-    placeholder: "Info"
-  })));
-};
-export var Rounded = function Rounded() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Default",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "primary",
-    placeholder: "Primary",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "secondary",
-    placeholder: "Secondary",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "success",
-    placeholder: "Success",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "warning",
-    placeholder: "Warning",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "error",
-    placeholder: "Error",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    type: "info",
-    placeholder: "Info",
-    rounded: true
-  })));
-};
-export var Icon = function Icon() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    icon: /*#__PURE__*/React.createElement(Instagram, null),
-    placeholder: "Instagram"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    iconRight: /*#__PURE__*/React.createElement(Facebook, null),
-    placeholder: "Facebook"
-  })));
-};
-export var Clearable = function Clearable() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
-    clearable: true,
-    initialValue: "Initial Value",
-    placeholder: "Initial Value"
-  })));
-};
-export var Password = function Password() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input.Password, {
-    initialValue: "123456abc"
-  })));
-};

package/esm/Keyboard/stories.js

@@ -1,43 +0,0 @@
-import Keyboard from '.';
-import Grid from '../Grid';
-export default {
-  title: 'Data Display/Keyboard',
-  component: Keyboard
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, null, "C")));
-};
-export var Modifiers = function Modifiers() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, {
-    command: true,
-    mr: "10px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, {
-    shift: true,
-    mr: "10px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, {
-    option: true,
-    mr: "10px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, {
-    ctrl: true,
-    mr: "10px"
-  })));
-};
-export var Combination = function Combination() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, {
-    command: true,
-    mr: "10px"
-  }, "f")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, {
-    shift: true,
-    mr: "10px"
-  }, "e")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Keyboard, {
-    option: true,
-    ctrl: true,
-    mr: "10px"
-  }, "b")));
-};

package/esm/Link/stories.js

@@ -1,59 +0,0 @@
-import Link from '.';
-import Grid from '../Grid';
-import Text from '../Text';
-export default {
-  title: 'Navigation/Link',
-  component: Link
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#"
-  }, "Is a reference to the data you can follow directly by tapping.")));
-};
-export var Highlight = function Highlight() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    color: true
-  }, "Is a reference to the data you can follow directly by tapping.")));
-};
-export var WithIcon = function WithIcon() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    icon: true
-  }, "Is a reference to the data you can follow directly by tapping.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    icon: true,
-    color: true
-  }, "Is a reference to the data you can follow directly by tapping.")));
-};
-export var Variant = function Variant() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#"
-  }, "Is a reference to the data you can follow directly by tapping."))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    color: true
-  }, "Is a reference to the data you can follow directly by tapping."))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    underline: true
-  }, "Is a reference to the data you can follow directly by tapping."))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    color: true,
-    underline: true
-  }, "Is a reference to the data you can follow directly by tapping."))));
-};
-export var Block = function Block() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    block: true
-  }, "Is a reference to the data you can follow directly by tapping.")));
-};