@bolio-ui/core 2.0.0-alpha.1 → 3.0.0-alpha.0

package/esm/Input/InputIcon.js

@@ -1,17 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-function InputIconComponent(_ref) {
-  var icon = _ref.icon,
-    clickable = _ref.clickable,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement("span", {
-    onClick: onClick,
-    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
-  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4247656379",
-    dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
-  }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
-}
-InputIconComponent.displayName = 'BolioUIInputIcon';
-var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
-export default InputIcon;

package/esm/Input/InputIconClear.js

@@ -1,43 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import useClasses from '../use-classes';
-function InputIconClear(_ref) {
-  var onClick = _ref.onClick,
-    disabled = _ref.disabled,
-    visible = _ref.visible;
-  var theme = useTheme();
-  var classes = useClasses('clear-icon', {
-    visible: visible
-  });
-  var clickHandler = function clickHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    onClick && onClick(event);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18 6L6 18",
-    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M6 6l12 12",
-    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2817842826",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]
-  }, ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.accents_3 : theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
-}
-var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
-export default MemoInputIconClear;

package/esm/Input/InputLabel.js

@@ -1,16 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useTheme from '../use-theme';
-function InputLabel(_ref) {
-  var children = _ref.children,
-    isRight = _ref.isRight;
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["839392656", [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border]]]) + " " + ((isRight ? 'right' : '') || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "839392656",
-    dynamic: [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border]
-  }, "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-top:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";border-left:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";}")));
-}
-var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
-export default MemoInputLabel;

package/esm/Input/InputProps.js

@@ -1,13 +0,0 @@
-export var defaultProps = {
-  disabled: false,
-  readOnly: false,
-  clearable: false,
-  iconClickable: false,
-  type: 'default',
-  htmlType: 'text',
-  autoComplete: 'off',
-  className: '',
-  placeholder: '',
-  initialValue: '',
-  crossOrigin: ''
-};

package/esm/Input/Password.js

@@ -1,57 +0,0 @@
-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 './InputProps';
-import PasswordIcon from './PasswordIcon';
-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/PasswordIcon.js

@@ -1,28 +0,0 @@
-import React from 'react';
-function PasswordIcon(_ref) {
-  var visible = _ref.visible;
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    style: {
-      color: 'currentColor'
-    }
-  }, !visible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M1 1l22 22"
-  })));
-}
-var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
-export default MemoPasswordIcon;

package/esm/Input/styles.js

@@ -1,69 +0,0 @@
-export var getColors = function getColors(palette, status, disabled, readOnly) {
-  var colors = {
-    "default": {
-      color: palette.foreground,
-      bgColor: palette.accents_1,
-      borderColor: palette.accents_2,
-      hoverBgColor: palette.accents_1,
-      hoverBorder: palette.accents_4
-    },
-    primary: {
-      color: palette.primaryDark,
-      bgColor: palette.primaryLight,
-      borderColor: palette.primary,
-      hoverBgColor: palette.primaryLight,
-      hoverBorder: palette.primary
-    },
-    secondary: {
-      color: palette.secondaryDark,
-      bgColor: palette.secondaryLight,
-      borderColor: palette.secondary,
-      hoverBgColor: palette.secondaryLight,
-      hoverBorder: palette.secondary
-    },
-    success: {
-      color: palette.successDark,
-      bgColor: palette.successLight,
-      borderColor: palette.success,
-      hoverBgColor: palette.successLight,
-      hoverBorder: palette.success
-    },
-    warning: {
-      color: palette.warningDark,
-      bgColor: palette.warningLight,
-      borderColor: palette.warning,
-      hoverBgColor: palette.warningLight,
-      hoverBorder: palette.warning
-    },
-    error: {
-      color: palette.errorDark,
-      bgColor: palette.errorLight,
-      borderColor: palette.error,
-      hoverBgColor: palette.errorLight,
-      hoverBorder: palette.error
-    },
-    info: {
-      color: palette.infoDark,
-      bgColor: palette.infoLight,
-      borderColor: palette.info,
-      hoverBgColor: palette.infoLight,
-      hoverBorder: palette.info
-    }
-  };
-  if (disabled) return {
-    color: palette.accents_6,
-    bgColor: palette.accents_2,
-    borderColor: palette.accents_3,
-    hoverBgColor: palette.accents_2,
-    hoverBorder: palette.accents_3
-  };
-  if (readOnly) return {
-    color: palette.foreground,
-    bgColor: palette.accents_1,
-    borderColor: palette.accents_2,
-    hoverBgColor: palette.accents_1,
-    hoverBorder: palette.accents_4
-  };
-  if (!status) return colors["default"];
-  return colors[status];
-};

package/esm/Keyboard/Keyboard.js

@@ -1,45 +0,0 @@
-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/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-var KeyboardComponent = /*#__PURE__*/React.forwardRef(function (_ref, 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({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["4198515491", [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([["4198515491", [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([["4198515491", [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([["4198515491", [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([["4198515491", [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([["4198515491", [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: "4198515491",
-    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/Link/Icon.js

@@ -1,30 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-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/Link.js

@@ -1,47 +0,0 @@
-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/style";
-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/Loading/Loading.js

@@ -1,60 +0,0 @@
-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/style";
-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];
-};
-var LoadingComponent = /*#__PURE__*/React.forwardRef(function (_ref, 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({
-    ref: ref,
-    role: "status"
-  }, props, {
-    className: _JSXStyle.dynamic([["1090444014", [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([["1090444014", [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([["1090444014", [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([["1090444014", [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([["1090444014", [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([["1090444014", [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: "1090444014",
-    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/MdxWidgets/MockPage.js

@@ -1,31 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "styled-jsx/style";
-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;

package/esm/MdxWidgets/ParsedCodes/WaitTime.js

@@ -1,11 +0,0 @@
-import React from 'react';
-export var __html = "<span class=\"token keyword module\">import</span> <span class=\"token imports\"><span class=\"token maybe-class-name\">React</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> useState <span class=\"token punctuation\">}</span></span> <span class=\"token keyword module\">from</span> <span class=\"token string\">\"react\"</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\"><span class=\"token maybe-class-name\">App</span></span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token arrow operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>wait<span class=\"token punctuation\">,</span> showWaitTime<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token arrow operator\">=&gt;</span> <span class=\"token function\">showWaitTime</span><span class=\"token punctuation\">(</span>wait <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword control-flow\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">You've been waiting since </span><span class=\"token punctuation\">{</span>wait<span class=\"token punctuation\">}</span><span class=\"token plain-text\"> seconds!</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword module\">export</span> <span class=\"token keyword module\">default</span> <span class=\"token maybe-class-name\">App</span><span class=\"token punctuation\">;</span>\n".trim();
-var WaitTime = function WaitTime() {
-  return /*#__PURE__*/React.createElement("code", {
-    className: "language-jsx",
-    dangerouslySetInnerHTML: {
-      __html: __html
-    }
-  });
-};
-export default WaitTime;

package/esm/MdxWidgets/ParsedCodes/index.js

@@ -1 +0,0 @@
-export * from './WaitTime';

package/esm/Modal/Modal.js

@@ -1,109 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useId, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
-import usePortal from '../utils/use-portal';
-import ModalWrapper from './ModalWrapper';
-import ModalAction from './ModalAction';
-import ModalActions from './ModalActions';
-import ModalTitle from './ModalTitle';
-import ModalSubtitle from './ModalSubtitle';
-import Backdrop from '../Shared/backdrop';
-import { ModalContext } from './ModalContext';
-import { hasChild, pickChild } from '../utils/collections';
-import useBodyScroll from '../utils/use-body-scroll';
-import useScale, { withScale } from '../use-scale';
-import useKeyboard, { KeyCode } from '../use-keyboard';
-var ModalComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var customVisible = _ref.visible,
-    onClose = _ref.onClose,
-    children = _ref.children,
-    _ref$keyboard = _ref.keyboard,
-    keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
-    _ref$wrapClassName = _ref.wrapClassName,
-    wrapClassName = _ref$wrapClassName === void 0 ? '' : _ref$wrapClassName,
-    onContentClick = _ref.onContentClick,
-    _ref$disableBackdropC = _ref.disableBackdropClick,
-    disableBackdropClick = _ref$disableBackdropC === void 0 ? false : _ref$disableBackdropC,
-    _ref$positionClassNam = _ref.positionClassName,
-    positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
-    _ref$backdropClassNam = _ref.backdropClassName,
-    backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
-    _ref$layerClassName = _ref.layerClassName,
-    layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName,
-    _ref$role = _ref.role,
-    role = _ref$role === void 0 ? 'dialog' : _ref$role,
-    ariaLabel = _ref['aria-label'],
-    ariaLabelledby = _ref['aria-labelledby'],
-    ariaDescribedby = _ref['aria-describedby'];
-  var portal = usePortal('modal');
-  var baseId = useId();
-  var titleId = "".concat(baseId, "-title");
-  var descriptionId = "".concat(baseId, "-description");
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useBodyScroll = useBodyScroll(null, {
-      delayReset: 300
-    }),
-    _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
-    setBodyHidden = _useBodyScroll2[1];
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var _pickChild = pickChild(children, ModalAction),
-    _pickChild2 = _slicedToArray(_pickChild, 2),
-    withoutActionsChildren = _pickChild2[0],
-    ActionsChildren = _pickChild2[1];
-  var hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0;
-  var closeModal = function closeModal() {
-    onClose && onClose();
-    setVisible(false);
-    setBodyHidden(false);
-  };
-  useEffect(function () {
-    if (typeof customVisible === 'undefined') return;
-    setVisible(customVisible);
-    setBodyHidden(customVisible);
-  }, [customVisible, setBodyHidden]);
-  var _useKeyboard = useKeyboard(function () {
-      keyboard && closeModal();
-    }, KeyCode.Escape, {
-      disableGlobalEvent: true
-    }),
-    bindings = _useKeyboard.bindings;
-  var closeFromBackdrop = function closeFromBackdrop() {
-    if (disableBackdropClick) return;
-    closeModal();
-  };
-  var modalConfig = useMemo(function () {
-    return {
-      close: closeModal,
-      titleId: titleId,
-      descriptionId: descriptionId
-    };
-  }, []);
-  if (!portal) return null;
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(ModalContext.Provider, {
-    value: modalConfig
-  }, /*#__PURE__*/React.createElement(Backdrop, _extends({
-    onClick: closeFromBackdrop,
-    onContentClick: onContentClick,
-    visible: visible,
-    width: SCALES.width(26),
-    positionClassName: positionClassName,
-    backdropClassName: backdropClassName,
-    layerClassName: layerClassName
-  }, bindings), /*#__PURE__*/React.createElement(ModalWrapper, {
-    ref: ref,
-    visible: visible,
-    className: wrapClassName,
-    role: role,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby || (hasChild(children, ModalTitle) ? titleId : undefined),
-    "aria-describedby": ariaDescribedby || (hasChild(children, ModalSubtitle) ? descriptionId : undefined)
-  }, withoutActionsChildren, hasActions && /*#__PURE__*/React.createElement(ModalActions, null, ActionsChildren)))), portal);
-});
-ModalComponent.displayName = 'BolioUIModal';
-var Modal = withScale(ModalComponent);
-export default Modal;