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

package/esm/Tabs/Tabs.js

@@ -1,140 +0,0 @@
-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/style";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
-import { TabsContext } from './TabsContext';
-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';
-var TabsComponent = /*#__PURE__*/React.forwardRef(function (_ref, 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 headerRef = 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 headerRef.current;
-    });
-    if (highlight) {
-      setDisplayHighlight(true);
-    }
-  };
-  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
-    value: initialValue
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["1540493998", [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: headerRef,
-    onMouseLeave: function onMouseLeave() {
-      return setDisplayHighlight(false);
-    },
-    className: _JSXStyle.dynamic([["1540493998", [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", {
-    role: "tablist",
-    className: _JSXStyle.dynamic([["1540493998", [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([["1540493998", [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", {
-    role: "tabpanel",
-    className: _JSXStyle.dynamic([["1540493998", [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: "1540493998",
-    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/Tabs/TabsContext.js

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

@@ -1,89 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useMemo, useRef } from 'react';
-import { useTabsContext } from './TabsContext';
-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);
-    };
-    var keyDownHandler = function keyDownHandler(event) {
-      var _event$currentTarget$, _tabs$next, _tabs$next2;
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        clickHandler();
-        return;
-      }
-      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
-      var tabs = Array.from(((_event$currentTarget$ = event.currentTarget.parentElement) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.querySelectorAll('[role="tab"]:not([aria-disabled="true"])')) || []);
-      var current = tabs.indexOf(event.currentTarget);
-      var last = tabs.length - 1;
-      var next = current;
-      if (event.key === 'Home') next = 0;else if (event.key === 'End') next = last;else if (event.key === 'ArrowRight') next = current === last ? 0 : current + 1;else next = current === 0 ? last : current - 1;
-      event.preventDefault();
-      (_tabs$next = tabs[next]) === null || _tabs$next === void 0 ? void 0 : _tabs$next.focus();
-      (_tabs$next2 = tabs[next]) === null || _tabs$next2 === void 0 ? void 0 : _tabs$next2.click();
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      role: "tab",
-      "aria-selected": active,
-      "aria-disabled": disabled || undefined,
-      tabIndex: active ? 0 : -1,
-      key: value,
-      onMouseOver: onMouseOver,
-      onClick: clickHandler,
-      onKeyDown: keyDownHandler,
-      style: active ? activeStyle : {},
-      "data-bolioui": "tab-item",
-      className: _JSXStyle.dynamic([["2844756105", [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, theme.palette.primary]]]) + " " + (classes || "")
-    }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2844756105",
-      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, theme.palette.primary]
-    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;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;}.tab.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:-2px;}.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/Tag/Tag.js

@@ -1,79 +0,0 @@
-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/style";
-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
-  });
-};
-var TagComponent = /*#__PURE__*/React.forwardRef(function (_ref, 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({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["3433524475", [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: "3433524475",
-    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

@@ -1,74 +0,0 @@
-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/style";
-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"];
-};
-var TextChild = /*#__PURE__*/React.forwardRef(function (_ref, 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({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["674408519", [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: "674408519",
-    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/Text.js

@@ -1,91 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "children", "className"];
-import React, { useMemo } from 'react';
-import TextChild from './Child';
-import { withScale } from '../use-scale';
-var getModifierChild = function getModifierChild(tags, children) {
-  if (!tags.length) return children;
-  var nextTag = tags.slice(1, tags.length);
-  return /*#__PURE__*/React.createElement(TextChild, {
-    tag: tags[0]
-  }, getModifierChild(nextTag, children));
-};
-var TextComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$h = _ref.h1,
-    h1 = _ref$h === void 0 ? false : _ref$h,
-    _ref$h2 = _ref.h2,
-    h2 = _ref$h2 === void 0 ? false : _ref$h2,
-    _ref$h3 = _ref.h3,
-    h3 = _ref$h3 === void 0 ? false : _ref$h3,
-    _ref$h4 = _ref.h4,
-    h4 = _ref$h4 === void 0 ? false : _ref$h4,
-    _ref$h5 = _ref.h5,
-    h5 = _ref$h5 === void 0 ? false : _ref$h5,
-    _ref$h6 = _ref.h6,
-    h6 = _ref$h6 === void 0 ? false : _ref$h6,
-    _ref$p = _ref.p,
-    p = _ref$p === void 0 ? false : _ref$p,
-    _ref$b = _ref.b,
-    b = _ref$b === void 0 ? false : _ref$b,
-    _ref$small = _ref.small,
-    small = _ref$small === void 0 ? false : _ref$small,
-    _ref$i = _ref.i,
-    i = _ref$i === void 0 ? false : _ref$i,
-    _ref$span = _ref.span,
-    span = _ref$span === void 0 ? false : _ref$span,
-    _ref$del = _ref.del,
-    del = _ref$del === void 0 ? false : _ref$del,
-    _ref$em = _ref.em,
-    em = _ref$em === void 0 ? false : _ref$em,
-    _ref$blockquote = _ref.blockquote,
-    blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var elements = {
-    h1: h1,
-    h2: h2,
-    h3: h3,
-    h4: h4,
-    h5: h5,
-    h6: h6,
-    p: p,
-    blockquote: blockquote
-  };
-  var inlineElements = {
-    span: span,
-    small: small,
-    b: b,
-    em: em,
-    i: i,
-    del: del
-  };
-  var names = Object.keys(elements).filter(function (name) {
-    return elements[name];
-  });
-  var inlineNames = Object.keys(inlineElements).filter(function (name) {
-    return inlineElements[name];
-  });
-  var tag = useMemo(function () {
-    if (names[0]) return names[0];
-    if (inlineNames[0]) return inlineNames[0];
-    return 'p';
-  }, [names, inlineNames]);
-  var renderableChildElements = inlineNames.filter(function (name) {
-    return name !== tag;
-  });
-  var modifers = useMemo(function () {
-    if (!renderableChildElements.length) return children;
-    return getModifierChild(renderableChildElements, children);
-  }, [renderableChildElements, children]);
-  return /*#__PURE__*/React.createElement(TextChild, _extends({
-    ref: ref,
-    className: className,
-    tag: tag
-  }, props), modifers);
-});
-TextComponent.displayName = 'BolioUIText';
-var Text = withScale(TextComponent);
-export default Text;

package/esm/Textarea/Textarea.js

@@ -1,100 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useRef, useImperativeHandle, useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
-import { tuple } from '../utils/prop-types';
-import { getColors } from '../Input/styles';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var resizeTypes = tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
-var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
-    onChange = _ref.onChange,
-    value = _ref.value,
-    placeholder = _ref.placeholder,
-    _ref$resize = _ref.resize,
-    resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var textareaRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return textareaRef.current;
-  });
-  var isControlledComponent = useMemo(function () {
-    return value !== undefined;
-  }, [value]);
-  var _useState = useState(initialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    selfValue = _useState2[0],
-    setSelfValue = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hover = _useState4[0],
-    setHover = _useState4[1];
-  var colors = useMemo(function () {
-    return getColors(theme.palette, type);
-  }, [theme.palette, type]);
-  var classes = useClasses('wrapper', {
-    hover: hover,
-    disabled: disabled
-  }, className);
-  var changeHandler = function changeHandler(event) {
-    if (disabled || readOnly) return;
-    setSelfValue(event.target.value);
-    onChange && onChange(event);
-  };
-  var focusHandler = function focusHandler(e) {
-    setHover(true);
-    onFocus && onFocus(e);
-  };
-  var blurHandler = function blurHandler(e) {
-    setHover(false);
-    onBlur && onBlur(e);
-  };
-  useEffect(function () {
-    if (isControlledComponent) {
-      setSelfValue(value);
-    }
-  }, [isControlledComponent, value]);
-  var controlledValue = isControlledComponent ? {
-    value: selfValue
-  } : {
-    defaultValue: initialValue
-  };
-  var textareaProps = _extends({}, props, controlledValue);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("textarea", _extends({
-    ref: textareaRef,
-    disabled: disabled,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    onFocus: focusHandler,
-    onBlur: blurHandler,
-    onChange: changeHandler
-  }, textareaProps, {
-    className: _JSXStyle.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2097224582",
-    dynamic: [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]
-  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(colors.borderColor, ";color:").concat(colors.color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";border-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:").concat(colors.bgColor, ";box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";border-radius:").concat(theme.layout.radius, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.active.__jsx-style-dynamic-selector,textarea.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background:").concat(colors.hoverBgColor, ";}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
-});
-TextareaComponent.displayName = 'BolioUITextarea';
-var Textarea = withScale(TextareaComponent);
-export default Textarea;

package/esm/Themes/Presets/Dark.js

@@ -1,67 +0,0 @@
-import { defaultFont, defaultBreakpoints, defaultLayout } from './Shared';
-export var palette = {
-  background: '#000',
-  foreground: '#fff',
-  accents_1: '#111',
-  accents_2: '#333',
-  accents_3: '#444',
-  accents_4: '#666',
-  accents_5: '#888',
-  accents_6: '#999',
-  accents_7: '#eaeaea',
-  accents_8: '#fafafa',
-  selection: 'rgba(248,28,229, 0.5)',
-  code: '#C25FFF',
-  border: '#333',
-  primary: '#0072F6',
-  primaryLight: '#CEE4FF',
-  primaryLighter: '#96C1F3',
-  primaryDark: '#00254E',
-  secondary: '#7828C9',
-  secondaryLight: '#EADCF9',
-  secondaryLighter: '#D1B1F1',
-  secondaryDark: '#290E45',
-  error: '#F31261',
-  errorLight: '#FDD8E6',
-  errorLighter: '#FAA8C6',
-  errorDark: '#4E041F',
-  success: '#17C965',
-  successLight: '#DAFBE9',
-  successLighter: '#ADF5CD',
-  successDark: '#06371C',
-  warning: '#F5A525',
-  warningLight: '#FDEFD9',
-  warningLighter: '#FBDBA8',
-  warningDark: '#4E3105',
-  info: '#06B7DC',
-  infoLight: '#D7F8FF',
-  infoLighter: '#A5EEFE',
-  infoDark: '#053B49',
-  purple: '#f81ce5',
-  alert: '#ff0080',
-  link: '#3291ff',
-  pre: '#111'
-};
-export var expressiveness = {
-  linkStyle: 'none',
-  linkHoverStyle: 'none',
-  dropdownBoxShadow: '0 0 0 1px #333',
-  scrollerStart: 'rgba(255, 255, 255, 1)',
-  scrollerEnd: 'rgba(255, 255, 255, 0)',
-  shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
-  shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
-  shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
-  portalOpacity: 0.75
-};
-export var font = defaultFont;
-export var breakpoints = defaultBreakpoints;
-export var layout = defaultLayout;
-export var themes = {
-  type: 'dark',
-  font: font,
-  layout: layout,
-  palette: palette,
-  breakpoints: breakpoints,
-  expressiveness: expressiveness
-};
-export default themes;