@bolio-ui/core 1.0.0

package/esm/collapse/collapse.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect } from 'react';
+import CollapseIcon from './collapse-icon';
+import useTheme from '../use-theme';
+import Expand from '../shared/expand';
+import { useCollapseContext } from './collapse-context';
+import useCurrentState from '../utils/use-current-state';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function CollapseComponent(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      _ref$initialVisible = _ref.initialVisible,
+      initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
+      _ref$shadow = _ref.shadow,
+      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      index = _ref.index,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useCollapseContext = useCollapseContext(),
+      values = _useCollapseContext.values,
+      updateValues = _useCollapseContext.updateValues;
+
+  var _useCurrentState = useCurrentState(initialVisible),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      visible = _useCurrentState2[0],
+      setVisible = _useCurrentState2[1],
+      visibleRef = _useCurrentState2[2];
+
+  var classes = useClasses('collapse', {
+    shadow: shadow
+  }, className);
+
+  if (!title) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useWarning('"title" is required.', 'Collapse');
+  }
+
+  useEffect(function () {
+    if (!values.length) return;
+    var isActive = !!values.find(function (item) {
+      return item === index;
+    });
+    setVisible(isActive);
+  }, [index, setVisible, values]);
+
+  var clickHandler = function clickHandler() {
+    var next = !visibleRef.current;
+    setVisible(next);
+    updateValues && updateValues(index, next);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "view"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "title"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]])
+  }, title), " ", /*#__PURE__*/React.createElement(CollapseIcon, {
+    active: visible
+  })), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "subtitle"
+  }, subtitle)), /*#__PURE__*/React.createElement(Expand, {
+    isExpanded: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "content"
+  }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1460486588",
+    dynamic: [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]
+  }, ".collapse.__jsx-style-dynamic-selector{border-top:1px solid ".concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.shadow.__jsx-style-dynamic-selector{box-shadow:").concat(theme.expressiveness.shadowSmall, ";border:none;border-radius:").concat(theme.layout.radius, ";padding:").concat(theme.layout.gap, ";}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;}.title.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";}.title.__jsx-style-dynamic-selector h3.__jsx-style-dynamic-selector{margin:0;font-size:1.5em;}.subtitle.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_5, ";margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.6em;padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+}
+
+CollapseComponent.displayName = 'BolioUICollapse';
+var Collapse = withScale(CollapseComponent);
+export default Collapse;

package/esm/collapse/index.js

@@ -0,0 +1,4 @@
+import Collapse from './collapse';
+import CollapseGroup from './collapse-group';
+Collapse.Group = CollapseGroup;
+export default Collapse;

package/esm/collapse/stories.js

@@ -0,0 +1,48 @@
+import Collapse from '.';
+import Text from '../text';
+import Grid from '../grid';
+export default {
+  title: 'Surface/Collapse',
+  component: Collapse
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 1"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 2"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
+};
+export var Expanded = function Expanded() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 1",
+    initialVisible: true
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 2"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
+};
+export var Subtitle = function Subtitle() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 1",
+    subtitle: "More description about Lorem ipsum 1"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 2",
+    subtitle: /*#__PURE__*/React.createElement(React.Fragment, null, "More description about ", /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "Lorem ipsum 2"))
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
+};
+export var Shadow = function Shadow() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse, {
+    shadow: true,
+    title: "Lorem ipsum 1",
+    subtitle: "More description about Lorem ipsum 1"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"))));
+};

package/esm/container/container.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "component", "justify", "align", "fluid", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+var defaultProps = {
+  gap: 0,
+  justify: 'start',
+  align: 'top',
+  component: 'div',
+  className: '',
+  fluid: false
+};
+
+var getFlexAlignment = function getFlexAlignment(justify, align) {
+  var flexJustifyMap = {
+    end: 'flex-end',
+    center: 'center',
+    'space-around': 'space-around',
+    'space-between': 'space-between'
+  };
+  var flexAlignMap = {
+    middle: 'center',
+    bottom: 'flex-end'
+  };
+  return {
+    justifyValue: flexJustifyMap[justify] || 'normal',
+    alignValue: flexAlignMap[align] || 'normal'
+  };
+};
+
+function Container(_ref) {
+  var children = _ref.children,
+      component = _ref.component,
+      justify = _ref.justify,
+      align = _ref.align,
+      fluid = _ref.fluid,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Component = component;
+  var theme = useTheme();
+
+  var _useMemo = useMemo(function () {
+    return getFlexAlignment(justify, align);
+  }, [justify, align]),
+      justifyValue = _useMemo.justifyValue,
+      alignValue = _useMemo.alignValue;
+
+  var fluidWidth = !fluid && 'max-width: ' + theme.layout.pageWidthWithMargin;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    className: _JSXStyle.dynamic([["1970593515", [fluidWidth, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "container ".concat(className))
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1970593515",
+    dynamic: [fluidWidth, justifyValue, alignValue]
+  }, ".container.__jsx-style-dynamic-selector{".concat(fluidWidth, ";padding-left:15px;padding-right:15px;margin-right:auto;margin-left:auto;-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
+}
+
+Container.defaultProps = defaultProps;
+Container.displayName = 'BolioUIContainer';
+export default Container;

package/esm/container/index.js

@@ -0,0 +1,2 @@
+import Container from './container';
+export default Container;

package/esm/css-baseline/css-baseline.js

@@ -0,0 +1,18 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import flush, { flushToHTML } from "../styled-jsx-server.es.js";
+
+var CssBaseline = function CssBaseline(_ref) {
+  var children = _ref.children;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "82041157",
+    dynamic: [theme.palette.background, theme.palette.foreground, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.accents_4, theme.palette.code, theme.font.mono, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.accents_2, theme.layout.radius, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.border, theme.palette.selection, theme.palette.foreground]
+  }, "html,body{background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";}html{font-size:16px;--bolioui-icons-background:").concat(theme.palette.background, ";}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:").concat(theme.font.sans, ";}#__next{overflow-x:hidden;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:").concat(theme.font.sans, ";}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.link, ";-webkit-text-decoration:").concat(theme.expressiveness.linkStyle, ";text-decoration:").concat(theme.expressiveness.linkStyle, ";}a:hover{-webkit-text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";}ul,ol{padding:0;list-style-type:none;margin:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";color:").concat(theme.palette.foreground, ";}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;line-height:1;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:").concat(theme.palette.code, ";font-family:").concat(theme.font.mono, ";font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\\`';}pre{padding:calc(").concat(theme.layout.gap, " * 0.9) ").concat(theme.layout.gap, ";margin:").concat(theme.layout.gap, " 0;border:1px solid ").concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";font-family:").concat(theme.font.mono, ";white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:").concat(theme.palette.accents_2, ";}details{background-color:").concat(theme.palette.accents_1, ";border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ").concat(theme.layout.gap, ") ").concat(theme.layout.gap, ";color:").concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";border-radius:").concat(theme.layout.radius, ";margin:1.5em 0;border:1px solid ").concat(theme.palette.border, ";}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:").concat(theme.palette.selection, ";color:").concat(theme.palette.foreground, ";}")));
+};
+
+var MemoCssBaseline = /*#__PURE__*/React.memo(CssBaseline);
+MemoCssBaseline.flush = flush;
+MemoCssBaseline.flushToHTML = flushToHTML;
+export default MemoCssBaseline;

package/esm/css-baseline/index.js

@@ -0,0 +1 @@
+export { default } from './css-baseline';

package/esm/description/description.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "content", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function DescriptionComponent(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'Title' : _ref$title,
+      _ref$content = _ref.content,
+      content = _ref$content === void 0 ? '' : _ref$content,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses('description', className);
+  return /*#__PURE__*/React.createElement("dl", _extends({}, props, {
+    className: _JSXStyle.dynamic([["879107763", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("dt", {
+    className: _JSXStyle.dynamic([["879107763", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]])
+  }, title), /*#__PURE__*/React.createElement("dd", {
+    className: _JSXStyle.dynamic([["879107763", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]])
+  }, content), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "879107763",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]
+  }, ".description.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}dt.__jsx-style-dynamic-selector{font-size:0.75em;line-height:1em;margin-bottom:0.5em;text-transform:uppercase;white-space:nowrap;color:").concat(theme.palette.accents_5, ";font-weight:500;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}dd.__jsx-style-dynamic-selector{font-size:0.875em;margin:0;line-height:1.1em;color:").concat(theme.palette.foreground, ";font-weight:500;}dd.__jsx-style-dynamic-selector p,dt.__jsx-style-dynamic-selector p{margin:0;}")));
+}
+
+DescriptionComponent.displayName = 'BolioUIDescription';
+var Description = withScale(DescriptionComponent);
+export default Description;

package/esm/description/index.js

@@ -0,0 +1,2 @@
+import Description from './description';
+export default Description;

package/esm/description/stories.js

@@ -0,0 +1,23 @@
+import Description from '.';
+import Code from '../code';
+import Grid from '../grid';
+export default {
+  title: 'Data Display/Description',
+  component: Description
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Description, {
+    title: "Section Title",
+    content: "Data about this section."
+  })));
+};
+export var WithComponent = function WithComponent() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Description, {
+    title: "Section Title",
+    content: /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Code, null, "code"), " about this section.")
+  })));
+};

package/esm/display/display.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "caption", "shadow", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function DisplayComponent(_ref) {
+  var children = _ref.children,
+      _ref$caption = _ref.caption,
+      caption = _ref$caption === void 0 ? '' : _ref$caption,
+      _ref$shadow = _ref.shadow,
+      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses('display', className);
+  var showShadow = useMemo(function () {
+    return shadow && theme.type !== 'dark';
+  }, [theme.type, shadow]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2598028711", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2598028711", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2598028711", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "caption"
+  }, caption), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2598028711",
+    dynamic: [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']
+  }, ".display.__jsx-style-dynamic-selector{display:block;max-width:100%;font-size:".concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(2.5), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(2.5), " ").concat(SCALES.ml(0, 'auto'), ";}.content.__jsx-style-dynamic-selector{display:block;margin:0 auto;border-radius:4px;overflow:hidden;width:").concat(SCALES.width(1, 'max-content'), ";box-shadow:").concat(showShadow ? theme.expressiveness.shadowLarge : 'none', ";max-width:100%;}.content.__jsx-style-dynamic-selector pre{margin:0;-webkit-transition:min-width ease 0.2s;transition:min-width ease 0.2s;}.content.__jsx-style-dynamic-selector img{display:block;}.caption.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.5em;color:").concat(theme.palette.accents_5, ";margin:").concat(shadow ? '2.5em' : '1.3em', " auto 0;text-align:center;max-width:85%;}")));
+}
+
+DisplayComponent.displayName = 'BolioUIDisplay';
+var Display = withScale(DisplayComponent);
+export default Display;

package/esm/display/index.js

@@ -0,0 +1,2 @@
+import Display from './display';
+export default Display;

package/esm/divider/divider.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "align", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getColor = function getColor(type, palette) {
+  var colors = {
+    "default": palette.border,
+    primary: palette.primaryLight,
+    secondary: palette.secondaryLight,
+    success: palette.successLight,
+    warning: palette.warningLight,
+    error: palette.errorLight,
+    info: palette.infoLight,
+    dark: palette.foreground,
+    lite: palette.accents_1
+  };
+  return colors[type];
+};
+
+function DividerComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'center' : _ref$align,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses('divider', className);
+  var color = useMemo(function () {
+    return getColor(type, theme.palette);
+  }, [type, theme.palette]);
+  var alignClassName = useMemo(function () {
+    if (!align || align === 'center') return '';
+    if (align === 'left' || align === 'start') return 'start';
+    return 'end';
+  }, [align]);
+  var alignClasses = useClasses('text', alignClassName);
+  var textColor = type === 'default' ? theme.palette.foreground : color;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "separator"
+  }, props, {
+    className: _JSXStyle.dynamic([["2946068544", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2946068544", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (alignClasses || "")
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2946068544",
+    dynamic: [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]
+  }, ".divider.__jsx-style-dynamic-selector{max-width:100%;background-color:".concat(color, ";position:relative;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(0.0625), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 0.75em;font-size:inherit;font-weight:bold;text-transform:capitalize;background-color:").concat(theme.palette.background, ";color:").concat(textColor, ";z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}")));
+}
+
+DividerComponent.displayName = 'BolioUIDivider';
+var Divider = withScale(DividerComponent);
+export default Divider;

package/esm/divider/index.js

@@ -0,0 +1,2 @@
+import Divider from './divider';
+export default Divider;

package/esm/divider/stories.js

@@ -0,0 +1,41 @@
+import Divider from '.';
+import Text from '../text';
+import Grid from '../grid';
+export default {
+  title: 'Others/Divider',
+  component: Divider
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text, null, "Declarative views make your code more predictable and easier to debug.")));
+};
+export var WithText = function WithText() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, null, "A Simple Component"), /*#__PURE__*/React.createElement(Text, null, "React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props."), /*#__PURE__*/React.createElement(Divider, {
+    align: "start"
+  }, "A Stateful Component"), /*#__PURE__*/React.createElement(Text, null, "In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component\u2019s state data changes, the rendered markup will be updated by re-invoking render().")));
+};
+export var Space = function Space() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, {
+    h: 5
+  }, "A Simple Component"), /*#__PURE__*/React.createElement(Text, null, "React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props."), /*#__PURE__*/React.createElement(Divider, {
+    my: 5,
+    h: 5
+  }, "A Stateful Component"), /*#__PURE__*/React.createElement(Text, null, "In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component\u2019s state data changes, the rendered markup will be updated by re-invoking render().")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, {
+    h: 3,
+    type: "success"
+  }, "A Simple Component"), /*#__PURE__*/React.createElement(Text, null, "React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props."), /*#__PURE__*/React.createElement(Divider, {
+    h: 3,
+    my: 3,
+    type: "warning"
+  }, "A Stateful Component"), /*#__PURE__*/React.createElement(Text, null, "In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component\u2019s state data changes, the rendered markup will be updated by re-invoking render().")));
+};

package/esm/dot/dot.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getColor = function getColor(type, theme) {
+  var colors = {
+    "default": theme.palette.accents_2,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error,
+    info: theme.palette.info
+  };
+  return colors[type] || colors["default"];
+};
+
+function DotComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var color = useMemo(function () {
+    return getColor(type, theme);
+  }, [type, theme]);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["870607818", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color]]]) + " " + (props && props.className != null && props.className || useClasses('dot', className) || "")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["870607818", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color]]]) + " " + "icon"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["870607818", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color]]]) + " " + "label"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "870607818",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color]
+  }, ".dot.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.icon.__jsx-style-dynamic-selector{width:0.625em;height:0.625em;min-width:calc(0.625 * 12px);min-height:calc(0.625 * 12px);line-height:0.625em;border-radius:50%;background-color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.label.__jsx-style-dynamic-selector{margin-left:0.5em;font-size:1em;line-height:1em;text-transform:capitalize;}")));
+}
+
+DotComponent.displayName = 'BolioUIDot';
+var Dot = withScale(DotComponent);
+export default Dot;

package/esm/dot/index.js

@@ -0,0 +1,2 @@
+import Dot from './dot';
+export default Dot;

package/esm/dot/stories.js

@@ -0,0 +1,40 @@
+import Dot from '.';
+import Grid from '../grid';
+export default {
+  title: 'Data Display/Dot',
+  component: Dot
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "primary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "secondary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "success"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "warning"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "error"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "info"
+  })));
+};
+export var Text = function Text() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, null, "Canceled")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "primary"
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "secondary"
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "success"
+  }, "Ready")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "info"
+  }, "Info")));
+};