@bolio-ui/core 1.0.0

package/esm/tabs/index.js

@@ -0,0 +1,5 @@
+import Tabs from './tabs';
+import TabsItem from './tabs-item';
+Tabs.Item = TabsItem;
+Tabs.Tab = TabsItem;
+export default Tabs;

package/esm/tabs/stories.js

@@ -0,0 +1,92 @@
+import Tabs from '.';
+import Text from '../text';
+import Grid from '../grid';
+import { Instagram, Facebook } from '@bolio-ui/icons';
+export default {
+  title: 'Navigation/Tabs',
+  component: Tabs
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "1"
+  }, "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(Tabs.Item, {
+    label: "Component-Based",
+    value: "2"
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs."))));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "1"
+  }, "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(Tabs.Item, {
+    label: "Component-Based",
+    value: "2",
+    disabled: true
+  }))));
+};
+export var HideDivider = function HideDivider() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "react",
+    hideDivider: true
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "react"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "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(Tabs.Item, {
+    label: "Component-Based",
+    value: "component-based"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
+};
+export var HideBorder = function HideBorder() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "react",
+    hideDivider: true,
+    hideBorder: true,
+    leftSpace: 0
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: "Declarative",
+    value: "react"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "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(Tabs.Item, {
+    label: "Component-Based",
+    value: "component-based"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
+};
+export var WithIcon = function WithIcon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
+    initialValue: "1",
+    align: "center",
+    leftSpace: 0
+  }, /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Instagram, null), " Instagram"),
+    value: "1"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Hello, this is my profile.")), /*#__PURE__*/React.createElement(Tabs.Item, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Facebook, null), " Facebook"),
+    value: "2"
+  }, /*#__PURE__*/React.createElement(Text, {
+    mt: 0
+  }, "Hi, this is my page.")))));
+};

package/esm/tabs/tabs-context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+var defaultContext = {
+  inGroup: false
+};
+export var TabsContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useTabsContext = function useTabsContext() {
+  return React.useContext(TabsContext);
+};

package/esm/tabs/tabs-item.js

@@ -0,0 +1,80 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useTabsContext } from './tabs-context';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function TabsItemComponent(_ref) {
+  var children = _ref.children,
+      value = _ref.value,
+      label = _ref.label,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useTabsContext = useTabsContext(),
+      register = _useTabsContext.register,
+      currentValue = _useTabsContext.currentValue;
+
+  var isActive = useMemo(function () {
+    return currentValue === value;
+  }, [currentValue, value]);
+
+  var TabsInternalCell = function TabsInternalCell(_ref2) {
+    var _useClasses;
+
+    var onClick = _ref2.onClick,
+        onMouseOver = _ref2.onMouseOver,
+        activeClassName = _ref2.activeClassName,
+        activeStyle = _ref2.activeStyle,
+        hideBorder = _ref2.hideBorder;
+    var theme = useTheme();
+    var ref = useRef(null);
+
+    var _useTabsContext2 = useTabsContext(),
+        currentValue = _useTabsContext2.currentValue;
+
+    var active = currentValue === value;
+    var classes = useClasses('tab', (_useClasses = {
+      active: active,
+      disabled: disabled
+    }, _defineProperty(_useClasses, activeClassName, active), _defineProperty(_useClasses, 'hide-border', hideBorder), _useClasses));
+
+    var clickHandler = function clickHandler() {
+      if (disabled) return;
+      onClick && onClick(value);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      role: "button",
+      key: value,
+      onMouseOver: onMouseOver,
+      onClick: clickHandler,
+      style: active ? activeStyle : {},
+      "data-bolioui": "tab-item",
+      className: _JSXStyle.dynamic([["605786882", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
+    }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "605786882",
+      dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]
+    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;text-transform:capitalize;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
+  };
+
+  TabsInternalCell.displayName = 'BolioUITabsInternalCell';
+  useEffect(function () {
+    register && register({
+      value: value,
+      cell: TabsInternalCell
+    });
+  }, [value, label, disabled]);
+  return isActive ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
+}
+
+TabsItemComponent.displayName = 'BolioUITabsItem';
+var TabsItem = withScale(TabsItemComponent);
+export default TabsItem;
+/* eslint-enable */

package/esm/tabs/tabs.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["initialValue", "value", "hideDivider", "hideBorder", "children", "onChange", "className", "leftSpace", "highlight", "hoverHeightRatio", "hoverWidthRatio", "activeClassName", "activeStyles", "align"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import { TabsContext } from './tabs-context';
+import useScale, { withScale } from '../use-scale';
+import Highlight from '../shared/highlight';
+import { useRect } from '../utils/layouts';
+import { isBolioUIElement } from '../utils/collections';
+import useClasses from '../use-classes';
+
+function TabsComponent(_ref) {
+  var userCustomInitialValue = _ref.initialValue,
+      value = _ref.value,
+      _ref$hideDivider = _ref.hideDivider,
+      hideDivider = _ref$hideDivider === void 0 ? false : _ref$hideDivider,
+      _ref$hideBorder = _ref.hideBorder,
+      hideBorder = _ref$hideBorder === void 0 ? false : _ref$hideBorder,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$leftSpace = _ref.leftSpace,
+      leftSpace = _ref$leftSpace === void 0 ? '12px' : _ref$leftSpace,
+      _ref$highlight = _ref.highlight,
+      highlight = _ref$highlight === void 0 ? true : _ref$highlight,
+      _ref$hoverHeightRatio = _ref.hoverHeightRatio,
+      hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 0.7 : _ref$hoverHeightRatio,
+      _ref$hoverWidthRatio = _ref.hoverWidthRatio,
+      hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1.15 : _ref$hoverWidthRatio,
+      _ref$activeClassName = _ref.activeClassName,
+      activeClassName = _ref$activeClassName === void 0 ? '' : _ref$activeClassName,
+      activeStyles = _ref.activeStyles,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      tabs = _useState2[0],
+      setTabs = _useState2[1];
+
+  var _useState3 = useState(userCustomInitialValue),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selfValue = _useState4[0],
+      setSelfValue = _useState4[1];
+
+  var ref = useRef(null);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      displayHighlight = _useState6[0],
+      setDisplayHighlight = _useState6[1];
+
+  var _useRect = useRect(),
+      rect = _useRect.rect,
+      setRect = _useRect.setRect;
+
+  var register = function register(next) {
+    setTabs(function (last) {
+      var hasItem = last.find(function (item) {
+        return item.value === next.value;
+      });
+      if (!hasItem) return [].concat(_toConsumableArray(last), [next]);
+      return last.map(function (item) {
+        if (item.value !== next.value) return item;
+        return _extends({}, item, next);
+      });
+    });
+  };
+
+  var initialValue = useMemo(function () {
+    return {
+      register: register,
+      currentValue: selfValue,
+      inGroup: true,
+      leftSpace: leftSpace
+    };
+  }, [selfValue, leftSpace]);
+  useEffect(function () {
+    if (typeof value === 'undefined') return;
+    setSelfValue(value);
+  }, [value]);
+
+  var clickHandler = function clickHandler(value) {
+    setSelfValue(value);
+    onChange && onChange(value);
+  };
+
+  var tabItemMouseOverHandler = function tabItemMouseOverHandler(event) {
+    if (!isBolioUIElement(event.target)) return;
+    setRect(event, function () {
+      return ref.current;
+    });
+
+    if (highlight) {
+      setDisplayHighlight(true);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["750647969", [SCALES.font(1), SCALES.width(1, 'initial'), 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), align, theme.palette.border, leftSpace]]]) + " " + (props && props.className != null && props.className || useClasses('tabs', className) || "")
+  }), /*#__PURE__*/React.createElement("header", {
+    ref: ref,
+    onMouseLeave: function onMouseLeave() {
+      return setDisplayHighlight(false);
+    },
+    className: _JSXStyle.dynamic([["750647969", [SCALES.font(1), SCALES.width(1, 'initial'), 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), align, theme.palette.border, leftSpace]]])
+  }, /*#__PURE__*/React.createElement(Highlight, {
+    rect: rect,
+    visible: displayHighlight,
+    hoverHeightRatio: hoverHeightRatio,
+    hoverWidthRatio: hoverWidthRatio
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["750647969", [SCALES.font(1), SCALES.width(1, 'initial'), 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), align, theme.palette.border, leftSpace]]]) + " " + (useClasses('scroll-container', {
+      'hide-divider': hideDivider
+    }) || "")
+  }, tabs.map(function (_ref2) {
+    var Cell = _ref2.cell,
+        value = _ref2.value;
+    return /*#__PURE__*/React.createElement(Cell, {
+      key: value,
+      onClick: clickHandler,
+      onMouseOver: tabItemMouseOverHandler,
+      activeClassName: activeClassName,
+      activeStyle: activeStyles,
+      hideBorder: hideBorder,
+      className: _JSXStyle.dynamic([["750647969", [SCALES.font(1), SCALES.width(1, 'initial'), 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), align, theme.palette.border, leftSpace]]])
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["750647969", [SCALES.font(1), SCALES.width(1, 'initial'), 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), align, theme.palette.border, leftSpace]]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "750647969",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), 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), align, theme.palette.border, leftSpace]
+  }, ".tabs.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-y:hidden;overflow-x:scroll;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;position:relative;}.scroll-container.__jsx-style-dynamic-selector{width:100%;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:").concat(align, ";-webkit-justify-content:").concat(align, ";-ms-flex-pack:").concat(align, ";justify-content:").concat(align, ";border-bottom:1px solid ").concat(theme.palette.border, ";padding-left:").concat(leftSpace, ";}header.__jsx-style-dynamic-selector::-webkit-scrollbar{display:none;}.hide-divider.__jsx-style-dynamic-selector{border-color:transparent;}.content.__jsx-style-dynamic-selector{padding-top:0.625rem;}"))));
+}
+
+TabsComponent.displayName = 'BolioUITabs';
+var Tabs = withScale(TabsComponent);
+export default Tabs;

package/esm/tag/index.js

@@ -0,0 +1,2 @@
+import Tag from './tag';
+export default Tag;

package/esm/tag/stories.js

@@ -0,0 +1,58 @@
+import Tag from '.';
+import Grid from '../grid';
+export default {
+  title: 'Data Display/Tag',
+  component: Tag
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, null, "Status: Unstable")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, null, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "primary"
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "secondary"
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "success"
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "dark"
+  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "lite"
+  }, "Lite")));
+};
+export var TypesInvert = function TypesInvert() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    invert: true
+  }, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "primary",
+    invert: true
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "secondary",
+    invert: true
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "success",
+    invert: true
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "warning",
+    invert: true
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "error",
+    invert: true
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "dark",
+    invert: true
+  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
+    type: "lite",
+    invert: true
+  }, "Lite")));
+};

package/esm/tag/tag.js

@@ -0,0 +1,86 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["type", "children", "className", "invert"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+
+var getColors = function getColors(type, palette, invert) {
+  var colors = {
+    "default": {
+      color: palette.foreground
+    },
+    primary: {
+      color: palette.primary
+    },
+    secondary: {
+      color: palette.secondary
+    },
+    success: {
+      color: palette.success
+    },
+    warning: {
+      color: palette.warning
+    },
+    error: {
+      color: palette.error
+    },
+    info: {
+      color: palette.info
+    },
+    dark: {
+      color: palette.background,
+      bgColor: palette.foreground
+    },
+    lite: {
+      color: palette.foreground,
+      bgColor: palette.accents_2
+    }
+  };
+  var hideBorder = invert || type === 'lite';
+
+  var cardStyle = _extends({}, colors[type], {
+    bgColor: colors[type].bgColor || palette.background,
+    borderColor: hideBorder ? 'transparent' : colors[type].color
+  });
+
+  return !invert ? cardStyle : _extends({}, cardStyle, {
+    color: cardStyle.bgColor,
+    bgColor: cardStyle.color
+  });
+};
+
+function TagComponent(_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,
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useMemo = useMemo(function () {
+    return getColors(type, theme.palette, invert);
+  }, [type, theme.palette, invert]),
+      color = _useMemo.color,
+      bgColor = _useMemo.bgColor,
+      borderColor = _useMemo.borderColor;
+
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3411740258", [borderColor, bgColor, color, SCALES.height(0.3125), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1.75), SCALES.pt(0.375), SCALES.pr(0.375), SCALES.pb(0.375), SCALES.pl(0.375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3411740258",
+    dynamic: [borderColor, bgColor, color, SCALES.height(0.3125), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1.75), SCALES.pt(0.375), SCALES.pr(0.375), SCALES.pb(0.375), SCALES.pl(0.375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "span.__jsx-style-dynamic-selector{display:inline-block;border:1px solid ".concat(borderColor, ";background-color:").concat(bgColor, ";color:").concat(color, ";box-sizing:border-box;line-height:1em;border-radius:").concat(SCALES.height(0.3125), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1.75), ";padding:").concat(SCALES.pt(0.375), " ").concat(SCALES.pr(0.375), " ").concat(SCALES.pb(0.375), " ").concat(SCALES.pl(0.375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+}
+
+TagComponent.displayName = 'BolioUITag';
+var Tag = withScale(TagComponent);
+export default Tag;

package/esm/text/child.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "tag", "className", "type"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale from '../use-scale';
+
+var getTypeColor = function getTypeColor(type, palette) {
+  var colors = {
+    "default": 'inherit',
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  return colors[type] || colors["default"];
+};
+
+function TextChild(_ref) {
+  var children = _ref.children,
+      tag = _ref.tag,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Component = tag;
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES,
+      getScaleProps = _useScale.getScaleProps;
+
+  var font = getScaleProps('font');
+  var mx = getScaleProps(['margin', 'marginLeft', 'marginRight', 'mx', 'ml', 'mr']);
+  var my = getScaleProps(['margin', 'marginTop', 'marginBottom', 'my', 'mt', 'mb']);
+  var px = getScaleProps(['padding', 'paddingLeft', 'paddingRight', 'pl', 'pr', 'px']);
+  var py = getScaleProps(['padding', 'paddingTop', 'paddingBottom', 'pt', 'pb', 'py']);
+  var color = useMemo(function () {
+    return getTypeColor(type, theme.palette);
+  }, [type, theme.palette]);
+  var classNames = useMemo(function () {
+    var keys = [{
+      value: mx,
+      className: 'mx'
+    }, {
+      value: my,
+      className: 'my'
+    }, {
+      value: px,
+      className: 'px'
+    }, {
+      value: py,
+      className: 'py'
+    }, {
+      value: font,
+      className: 'font'
+    }];
+    var scaleClassNames = keys.reduce(function (pre, next) {
+      if (typeof next.value === 'undefined') return pre;
+      return "".concat(pre, " ").concat(next.className);
+    }, '');
+    return "".concat(scaleClassNames, " ").concat(className).trim();
+  }, [mx, my, px, py, font, className]);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    className: _JSXStyle.dynamic([["3155699851", [tag, color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]]]) + " " + (props && props.className != null && props.className || classNames || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3155699851",
+    dynamic: [tag, color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]
+  }, "".concat(tag, ".__jsx-style-dynamic-selector{color:").concat(color, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.font.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(1, 'inherit'), ";}.mx.__jsx-style-dynamic-selector{margin-left:").concat(SCALES.ml(0, 'revert'), ";margin-right:").concat(SCALES.mr(0, 'revert'), ";}.my.__jsx-style-dynamic-selector{margin-top:").concat(SCALES.mt(0, 'revert'), ";margin-bottom:").concat(SCALES.mb(0, 'revert'), ";}.px.__jsx-style-dynamic-selector{padding-left:").concat(SCALES.pl(0, 'revert'), ";padding-right:").concat(SCALES.pr(0, 'revert'), ";}.py.__jsx-style-dynamic-selector{padding-top:").concat(SCALES.pt(0, 'revert'), ";padding-bottom:").concat(SCALES.pb(0, 'revert'), ";}")));
+}
+
+TextChild.displayName = 'BolioUITextChild';
+export default TextChild;

package/esm/text/index.js

@@ -0,0 +1,2 @@
+import Text from './text';
+export default Text;