@bolio-ui/core 1.0.0

package/esm/input/password.js

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["hideToggle", "children"];
+import React, { useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { defaultProps } from './input-props';
+import PasswordIcon from './password-icon';
+import Input from './input';
+import { useScale, withScale } from '../use-scale';
+
+var passwordDefaultProps = _extends({}, defaultProps, {
+  hideToggle: false
+});
+
+var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var hideToggle = _ref.hideToggle,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      getAllScaleProps = _useScale.getAllScaleProps;
+
+  var inputRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+
+  var iconClickHandler = function iconClickHandler() {
+    setVisible(function (v) {
+      return !v;
+    });
+    /* istanbul ignore next */
+
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  var inputProps = useMemo(function () {
+    return _extends({}, props, {
+      ref: inputRef,
+      iconClickable: true,
+      onIconClick: iconClickHandler,
+      htmlType: visible ? 'text' : 'password'
+    });
+  }, [props, iconClickHandler, visible, inputRef]);
+  var icon = useMemo(function () {
+    if (hideToggle) return null;
+    return /*#__PURE__*/React.createElement(PasswordIcon, {
+      visible: visible
+    });
+  }, [hideToggle, visible]);
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    iconRight: icon
+  }, getAllScaleProps(), inputProps), children);
+});
+InputPasswordComponent.defaultProps = passwordDefaultProps;
+InputPasswordComponent.displayName = 'BolioUIInputPassword';
+var InputPassword = withScale(InputPasswordComponent);
+export default InputPassword;

package/esm/input/stories.js

@@ -0,0 +1,113 @@
+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 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/input/styles.js

@@ -0,0 +1,41 @@
+export var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      color: palette.foreground,
+      borderColor: palette.border,
+      hoverBorder: palette.accents_5
+    },
+    primary: {
+      color: palette.primary,
+      borderColor: palette.primary,
+      hoverBorder: palette.primary
+    },
+    secondary: {
+      color: palette.secondary,
+      borderColor: palette.secondary,
+      hoverBorder: palette.secondary
+    },
+    success: {
+      color: palette.success,
+      borderColor: palette.success,
+      hoverBorder: palette.success
+    },
+    warning: {
+      color: palette.warning,
+      borderColor: palette.warning,
+      hoverBorder: palette.warning
+    },
+    error: {
+      color: palette.error,
+      borderColor: palette.error,
+      hoverBorder: palette.error
+    },
+    info: {
+      color: palette.info,
+      borderColor: palette.info,
+      hoverBorder: palette.info
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};

package/esm/keyboard/index.js

@@ -0,0 +1,2 @@
+import Keyboard from './keyboard';
+export default Keyboard;

package/esm/keyboard/keyboard.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["command", "shift", "option", "ctrl", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+
+function KeyboardComponent(_ref) {
+  var _ref$command = _ref.command,
+      command = _ref$command === void 0 ? false : _ref$command,
+      _ref$shift = _ref.shift,
+      shift = _ref$shift === void 0 ? false : _ref$shift,
+      _ref$option = _ref.option,
+      option = _ref$option === void 0 ? false : _ref$option,
+      _ref$ctrl = _ref.ctrl,
+      ctrl = _ref$ctrl === void 0 ? false : _ref$ctrl,
+      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;
+
+  return /*#__PURE__*/React.createElement("kbd", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), command && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, "\u2318"), shift && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, "\u21E7"), option && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, "\u2325"), ctrl && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, "\u2303"), children && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2957990244",
+    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "kbd.__jsx-style-dynamic-selector{line-height:2em;text-align:center;display:inline-block;color:".concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";font-family:").concat(theme.font.sans, ";border-radius:").concat(theme.layout.radius, ";border:1px solid ").concat(theme.palette.accents_2, ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";min-width:2em;min-height:2em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.34), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.34), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}span.__jsx-style-dynamic-selector{line-height:2em;font-size:1em;text-align:center;}span.__jsx-style-dynamic-selector+span.__jsx-style-dynamic-selector{margin-left:0.3em;}")));
+}
+
+KeyboardComponent.displayName = 'BolioUIKeyboard';
+var Keyboard = withScale(KeyboardComponent);
+export default Keyboard;

package/esm/keyboard/stories.js

@@ -0,0 +1,43 @@
+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/icon.js

@@ -0,0 +1,30 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+export function LinkIconComponent() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: "0.9375em",
+    height: "0.9375em",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: "jsx-3409194595" + " " + "icon"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6",
+    className: "jsx-3409194595"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15 3h6v6",
+    className: "jsx-3409194595"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 14L21 3",
+    className: "jsx-3409194595"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3409194595"
+  }, ".icon.jsx-3409194595{margin:0 0 -1px 0.1875em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:currentColor;}"));
+}
+LinkIconComponent.displayName = 'BolioUILinkIcon';
+var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
+export default LinkIcon;

package/esm/link/index.js

@@ -0,0 +1,2 @@
+import Link from './link';
+export default Link;

package/esm/link/link.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["href", "color", "underline", "children", "className", "block", "icon"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import LinkIcon from './icon';
+import { addColorAlpha } from '../utils/color';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$href = _ref.href,
+      href = _ref$href === void 0 ? '' : _ref$href,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? false : _ref$color,
+      _ref$underline = _ref.underline,
+      underline = _ref$underline === void 0 ? false : _ref$underline,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$block = _ref.block,
+      block = _ref$block === void 0 ? false : _ref$block,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? false : _ref$icon,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var linkColor = color || block ? theme.palette.link : 'inherit';
+  var hoverColor = color || block ? theme.palette.primary : 'inherit';
+  var decoration = underline ? 'underline' : 'none';
+  var classes = useClasses('link', {
+    block: block
+  }, className);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href
+  }, props, {
+    ref: ref,
+    className: _JSXStyle.dynamic([["283040801", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.15), SCALES.pr(0.4), SCALES.pb(0.15), SCALES.pl(0.4), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, icon && /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "283040801",
+    dynamic: [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.15), SCALES.pr(0.4), SCALES.pb(0.15), SCALES.pl(0.4), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]
+  }, ".link.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;line-height:inherit;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.15), " ").concat(SCALES.pr(0.4), " ").concat(SCALES.pb(0.15), " ").concat(SCALES.pl(0.4), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
+});
+LinkComponent.displayName = 'BolioUILink';
+var Link = withScale(LinkComponent);
+export default Link;

package/esm/link/stories.js

@@ -0,0 +1,59 @@
+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.")));
+};

package/esm/loading/index.js

@@ -0,0 +1,2 @@
+import Loading from './loading';
+export default Loading;

package/esm/loading/loading.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "type", "color", "className", "spaceRatio"];
+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 getIconBgColor = function getIconBgColor(type, palette, color) {
+  var colors = {
+    "default": palette.accents_6,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  return color ? color : colors[type];
+};
+
+function LoadingComponent(_ref) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      color = _ref.color,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$spaceRatio = _ref.spaceRatio,
+      spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses('loading-container', className);
+  var bgColor = useMemo(function () {
+    return getIconBgColor(type, theme.palette, color);
+  }, [type, theme.palette, color]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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, bgColor, spaceRatio]]]) + " " + "loading"
+  }, children && /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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, bgColor, spaceRatio]]])
+  }, children), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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, bgColor, spaceRatio]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3790031813",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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, bgColor, spaceRatio]
+  }, ".loading-container.__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;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;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), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
+}
+
+LoadingComponent.displayName = 'BolioUILoading';
+var Loading = withScale(LoadingComponent);
+export default Loading;

package/esm/loading/stories.js

@@ -0,0 +1,75 @@
+import Loading from '.';
+import Grid from '../grid';
+export default {
+  title: 'Feedback/Loading',
+  component: Loading
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Loading, null)));
+};
+export var WithText = function WithText() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Loading, null, "Loading")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Loading, {
+    type: "primary"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Loading, {
+    type: "secondary"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Loading, {
+    type: "success"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Loading, {
+    type: "warning"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Loading, {
+    type: "error"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Loading, {
+    type: "info"
+  })));
+};
+export var Spaces = function Spaces() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 6
+  }, /*#__PURE__*/React.createElement(Loading, {
+    spaceRatio: 10
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 6
+  }, /*#__PURE__*/React.createElement(Loading, {
+    spaceRatio: 5
+  })));
+};

package/esm/mdx-widgets/index.js

@@ -0,0 +1,2 @@
+export { default as MockPage } from './mock-page';
+export { default as WaitTime } from './parsed-codes/wait-time';

package/esm/mdx-widgets/mock-page.js

@@ -0,0 +1,37 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../use-theme/theme-context';
+
+var MockPage = function MockPage(_ref) {
+  var customVisible = _ref.visible,
+      onClose = _ref.onClose,
+      children = _ref.children;
+  var theme = useTheme();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  useEffect(function () {
+    if (customVisible !== undefined) {
+      setVisible(customVisible);
+    }
+  }, [customVisible]);
+
+  var clickHandler = function clickHandler() {
+    setVisible(false);
+    onClose && onClose();
+  };
+
+  return /*#__PURE__*/React.createElement("section", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["2097575945", [theme.palette.background]]]) + " " + ((visible ? 'active' : '') || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2097575945",
+    dynamic: [theme.palette.background]
+  }, "section.__jsx-style-dynamic-selector{position:fixed;width:100vw;height:100vh;background-color:".concat(theme.palette.background, ";z-index:5000;top:-5000px;left:-5000px;display:none;}.active.__jsx-style-dynamic-selector{top:0;left:0;bottom:0;display:block;}")));
+};
+
+export default MockPage;