@bolio-ui/core 1.0.4 → 1.0.5

package/esm/tabs/tabs.js

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

package/esm/tag/index.js

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

package/esm/tag/stories.js

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

package/esm/text/index.js

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

package/esm/text/stories.js

@@ -1,104 +0,0 @@
-import Text from '.';
-import Grid from '../grid';
-export default {
-  title: 'General/Text',
-  component: Text
-};
-export var Heading = function Heading() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    h1: true
-  }, "Hello my friend, have fun with Bolio UI \uD83E\uDD77\uD83C\uDFFC")));
-};
-export var Paragraph = function Paragraph() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    p: true
-  }, "Make your development more creative and with amazing tools for React."), /*#__PURE__*/React.createElement(Text, {
-    p: true,
-    b: true
-  }, "Make your development more creative and with amazing tools for React.")));
-};
-export var Small = function Small() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    small: true
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Text, {
-    small: true,
-    i: true
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")));
-};
-export var Blockquote = function Blockquote() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    blockquote: true,
-    my: 0
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")));
-};
-export var Types = function Types() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    b: true,
-    i: true,
-    style: {
-      letterSpacing: '0.6px'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    span: true,
-    type: "default"
-  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    span: true,
-    type: "primary"
-  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    span: true,
-    type: "secondary"
-  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    span: true,
-    type: "success"
-  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    span: true,
-    type: "warning"
-  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    span: true,
-    type: "error"
-  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    span: true,
-    type: "info"
-  }, "Text colored")))));
-};
-export var Sizes = function Sizes() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    font: "12px",
-    mt: 0
-  }, "Font Size: 12px;"), /*#__PURE__*/React.createElement(Text, {
-    font: "14px"
-  }, "Font Size: 14px;"), /*#__PURE__*/React.createElement(Text, {
-    font: "1rem"
-  }, "Font Size: 1rem;"), /*#__PURE__*/React.createElement(Text, {
-    scale: 1.25,
-    mb: 0
-  }, "Font Size Scale: 1.25;")));
-};
-export var Compose = function Compose() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    p: true,
-    mt: 0
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs."), /*#__PURE__*/React.createElement(Text, {
-    mb: 0
-  }, /*#__PURE__*/React.createElement(Text, {
-    small: true,
-    del: true
-  }, "Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM."), /*#__PURE__*/React.createElement(Text, {
-    small: true,
-    b: true
-  }, "We don\u2019t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code."))));
-};

package/esm/text/text.js

@@ -1,94 +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));
-};
-
-function TextComponent(_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({
-    className: className,
-    tag: tag
-  }, props), modifers);
-}
-
-TextComponent.displayName = 'BolioUIText';
-var Text = withScale(TextComponent);
-export default Text;

package/esm/textarea/index.js

@@ -1,2 +0,0 @@
-import Textarea from './textarea';
-export default Textarea;

package/esm/textarea/stories.js

@@ -1,104 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-import Textarea from '.';
-import Grid from '../grid';
-import Button from '../button';
-import useInput from '../use-input';
-export default {
-  title: 'Data Entry/Textarea',
-  component: Textarea
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    placeholder: "Enter a message."
-  })));
-};
-export var Disabled = function Disabled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    width: "100%",
-    disabled: true,
-    placeholder: "This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn\u2019t being continuously updated."
-  })));
-};
-export var Type = function Type() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    height: "65px",
-    value: "Default"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    type: "primary",
-    height: "65px",
-    value: "Primary"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    type: "secondary",
-    height: "65px",
-    value: "Secondary"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    type: "success",
-    height: "65px",
-    value: "Success"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    type: "warning",
-    height: "65px",
-    value: "Warning"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    type: "error",
-    height: "65px",
-    value: "Error"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    type: "info",
-    height: "65px",
-    value: "Info"
-  })));
-};
-export var GetChange = function GetChange() {
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var handler = function handler(e) {
-    setValue(e.target.value);
-    console.log(e.target.value);
-  };
-
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
-    width: "100%",
-    value: value,
-    onChange: handler,
-    placeholder: "This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn\u2019t being continuously updated."
-  })));
-};
-export var WithUseInput = function WithUseInput() {
-  var _useInput = useInput('This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn’t being continuously updated.'),
-      setState = _useInput.setState,
-      reset = _useInput.reset,
-      bindings = _useInput.bindings;
-
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, _extends({
-    width: "100%"
-  }, bindings))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "secondary",
-    scale: 1 / 3,
-    onClick: function onClick() {
-      return setState(Math.random().toString(32));
-    }
-  }, "insert value")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 3,
-    onClick: function onClick() {
-      return reset();
-    }
-  }, "clear value")));
-};

package/esm/textarea/textarea.js

@@ -1,116 +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.es.js";
-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 _useMemo = useMemo(function () {
-    return getColors(theme.palette, type);
-  }, [theme.palette, type]),
-      color = _useMemo.color,
-      borderColor = _useMemo.borderColor,
-      hoverBorder = _useMemo.hoverBorder;
-
-  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([["1283886166", [theme.layout.radius, borderColor, 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), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, 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([["1283886166", [theme.layout.radius, borderColor, 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), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1283886166",
-    dynamic: [theme.layout.radius, borderColor, 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), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, 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(borderColor, ";color:").concat(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(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);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, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}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/index.js

@@ -1,2 +0,0 @@
-import Themes from './themes';
-export default Themes;