@bolio-ui/core 2.0.0-alpha.0 → 2.0.0-alpha.2

package/esm/Fieldset/Fieldset.js

@@ -1,84 +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 = ["className", "title", "subtitle", "children", "value", "label"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
-import FieldsetTitle from './FieldsetTitle';
-import FieldsetSubtitle from './FieldsetSubtitle';
-import FieldsetFooter from './FieldsetFooter';
-import FieldsetContent from './FieldsetContent';
-import { hasChild, pickChild } from '../utils/collections';
-import { useFieldset } from './FieldsetContext';
-import useWarning from '../utils/use-warning';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var FieldsetComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '' : _ref$title,
-    _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
-    children = _ref.children,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? '' : _ref$label,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useFieldset = useFieldset(),
-    inGroup = _useFieldset.inGroup,
-    currentValue = _useFieldset.currentValue,
-    register = _useFieldset.register;
-  var _useState = useState(inGroup),
-    _useState2 = _slicedToArray(_useState, 2),
-    hidden = _useState2[0],
-    setHidden = _useState2[1];
-  var classes = useClasses('fieldset', className);
-  var _pickChild = pickChild(children, FieldsetFooter),
-    _pickChild2 = _slicedToArray(_pickChild, 2),
-    withoutFooterChildren = _pickChild2[0],
-    FooterChildren = _pickChild2[1];
-  var hasTitle = hasChild(withoutFooterChildren, FieldsetTitle);
-  var hasSubtitle = hasChild(withoutFooterChildren, FieldsetSubtitle);
-  var hasContent = hasChild(withoutFooterChildren, FieldsetContent);
-  if (inGroup) {
-    if (!label) {
-      useWarning('Props "label" is required when in a group.', 'Fieldset Group');
-    }
-    if (!value || value === '') {
-      value = label;
-    }
-    useEffect(function () {
-      register && register({
-        value: value,
-        label: label
-      });
-    }, []);
-    useEffect(function () {
-      // In a few cases, the user will set Fieldset state manually.
-      // If the user incorrectly set the state, Group component should ignore it.
-      /* istanbul ignore if */
-      if (!currentValue || currentValue === '') return;
-      setHidden(currentValue !== value);
-    }, [currentValue, value]);
-  }
-  var content = useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, withoutFooterChildren, !hasTitle && title && /*#__PURE__*/React.createElement(FieldsetTitle, null, title), !hasSubtitle && subtitle && /*#__PURE__*/React.createElement(FieldsetSubtitle, null, subtitle));
-  }, [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["1598137352", [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), 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)]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), hasContent ? content : /*#__PURE__*/React.createElement(FieldsetContent, null, content), FooterChildren && FooterChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1598137352",
-    dynamic: [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), 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)]
-  }, ".fieldset.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";overflow:hidden;display:").concat(hidden ? 'none' : 'block', ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";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), ";}")));
-});
-FieldsetComponent.displayName = 'BolioUIFieldset';
-var Fieldset = withScale(FieldsetComponent);
-export default Fieldset;

package/esm/Fieldset/FieldsetContent.js

@@ -1,25 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-function FieldsetContentComponent(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses('content', className);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1553218241", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1553218241",
-    dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, ".content.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.3), " ").concat(SCALES.pr(1.3), " ").concat(SCALES.pb(1.3), " ").concat(SCALES.pl(1.3), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector > *:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector > *:last-child{margin-bottom:0;}")));
-}
-FieldsetContentComponent.displayName = 'BolioUIFieldsetContent';
-var FieldsetContent = withScale(FieldsetContentComponent);
-export default FieldsetContent;

package/esm/Fieldset/FieldsetContext.js

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

package/esm/Fieldset/FieldsetFooter.js

@@ -1,25 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-function FieldsetFooterComponent(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
-    className: _JSXStyle.dynamic([["4117809613", [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), 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: "4117809613",
-    dynamic: [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "footer.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.accents_1, ";border-top:1px solid ").concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:").concat(theme.palette.accents_6, ";padding:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";box-sizing:border-box;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(2.875), ";padding:").concat(SCALES.pt(0.625), " ").concat(SCALES.pr(1.31), " ").concat(SCALES.pb(0.625), " ").concat(SCALES.pl(1.31), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
-}
-FieldsetFooterComponent.displayName = 'BolioUIFieldsetFooter';
-var FieldsetFooter = withScale(FieldsetFooterComponent);
-export default FieldsetFooter;

package/esm/Fieldset/FieldsetGroup.js

@@ -1,77 +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 = ["className", "children", "value", "onChange"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useCallback, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
-import useCurrentState from '../utils/use-current-state';
-import { FieldsetContext } from './FieldsetContext';
-import useWarning from '../utils/use-warning';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-function FieldsetGroupComponent(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useState = useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    selfVal = _useState2[0],
-    setSelfVal = _useState2[1];
-  var _useCurrentState = useCurrentState([]),
-    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-    items = _useCurrentState2[0],
-    setItems = _useCurrentState2[1],
-    ref = _useCurrentState2[2];
-  var classes = useClasses('group', className);
-  var register = function register(newItem) {
-    var hasItem = ref.current.find(function (item) {
-      return item.value === newItem.value;
-    });
-    if (hasItem) {
-      useWarning('The "value" of each "Fieldset" must be unique.', 'Fieldset');
-    }
-    setItems([].concat(_toConsumableArray(ref.current), [newItem]));
-  };
-  var providerValue = useMemo(function () {
-    return {
-      currentValue: selfVal,
-      inGroup: true,
-      register: register
-    };
-  }, [selfVal]);
-  var clickHandle = useCallback(function (nextValue) {
-    setSelfVal(nextValue);
-    onChange && onChange(nextValue);
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(FieldsetContext.Provider, {
-    value: providerValue
-  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-tabs"
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement("button", {
-      onClick: function onClick() {
-        return clickHandle(item.value);
-      },
-      key: item.value,
-      className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + ((selfVal === item.value ? 'active' : '') || "")
-    }, item.label);
-  })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4025768429", [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-content"
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4025768429",
-    dynamic: [SCALES.width(1, 'auto'), 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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]
-  }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";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, 0), " ").concat(SCALES.ml(0), ";}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:").concat(SCALES.font(1), ";margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(theme.palette.accents_3, ";background-color:").concat(theme.palette.accents_1, ";font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ").concat(theme.palette.border, ";-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:").concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}"))));
-}
-FieldsetGroupComponent.displayName = 'BolioUIFieldsetGroup';
-var FieldsetGroup = withScale(FieldsetGroupComponent);
-export default FieldsetGroup;

package/esm/Fieldset/FieldsetSubtitle.js

@@ -1,18 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-function FieldsetSubtitle(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2265168013"
-  }, "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}"));
-}
-FieldsetSubtitle.displayName = 'BolioUIFieldsetSubtitle';
-export default FieldsetSubtitle;

package/esm/Fieldset/FieldsetTitle.js

@@ -1,20 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useClasses from '../use-classes';
-function FieldsetTitle(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var classes = useClasses('title', className);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: "jsx-4105044205" + " " + (props && props.className != null && props.className || classes || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4105044205"
-  }, ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}"));
-}
-FieldsetTitle.displayName = 'BolioUIFieldsetTitle';
-export default FieldsetTitle;

package/esm/Grid/BasicItem.js

@@ -1,95 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-import useScale from '../use-scale';
-import useClasses from '../use-classes';
-var defaultProps = {
-  xs: false,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false,
-  className: ''
-};
-var getItemLayout = function getItemLayout(val) {
-  var display = val === 0 ? 'display: none;' : 'display: inherit;';
-  if (typeof val === 'number') {
-    var width = 100 / 12 * val;
-    var ratio = width > 100 ? '100%' : width < 0 ? '0' : "".concat(width, "%");
-    return {
-      grow: 0,
-      display: display,
-      width: ratio,
-      basis: ratio
-    };
-  }
-  return {
-    grow: 1,
-    display: display,
-    width: '100%',
-    basis: '0'
-  };
-};
-var GridBasicItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$xs = _ref.xs,
-    xs = _ref$xs === void 0 ? defaultProps.xs : _ref$xs,
-    _ref$sm = _ref.sm,
-    sm = _ref$sm === void 0 ? defaultProps.sm : _ref$sm,
-    _ref$md = _ref.md,
-    md = _ref$md === void 0 ? defaultProps.md : _ref$md,
-    _ref$lg = _ref.lg,
-    lg = _ref$lg === void 0 ? defaultProps.lg : _ref$lg,
-    _ref$xl = _ref.xl,
-    xl = _ref$xl === void 0 ? defaultProps.xl : _ref$xl,
-    justify = _ref.justify,
-    direction = _ref.direction,
-    alignItems = _ref.alignItems,
-    alignContent = _ref.alignContent,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? defaultProps.className : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useMemo(function () {
-    var aligns = {
-      justify: justify,
-      direction: direction,
-      alignItems: alignItems,
-      alignContent: alignContent,
-      xs: xs,
-      sm: sm,
-      md: md,
-      lg: lg,
-      xl: xl
-    };
-    var classString = Object.keys(aligns).reduce(function (pre, name) {
-      if (aligns[name] !== undefined && aligns[name] !== false) return "".concat(pre, " ").concat(name);
-      return pre;
-    }, '');
-    return classString.trim();
-  }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl]);
-  var layout = useMemo(function () {
-    return {
-      xs: getItemLayout(xs),
-      sm: getItemLayout(sm),
-      md: getItemLayout(md),
-      lg: getItemLayout(lg),
-      xl: getItemLayout(xl)
-    };
-  }, [xs, sm, md, lg, xl]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["2387327819", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || useClasses('item', classes, className) || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2387327819",
-    dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]
-  }, ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")));
-});
-GridBasicItem.displayName = 'BolioUIGridBasicItem';
-export default GridBasicItem;

package/esm/Grid/Grid.js

@@ -1,34 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import GridBasicItem from './BasicItem';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var GridComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var gridGapUnit = 'var(--grid-gap-unit)';
-  var _styles$className = {
-      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "2935018504",
-        dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]
-      }, "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, gridGapUnit), " ").concat(SCALES.pr(0, gridGapUnit), " ").concat(SCALES.pb(0, gridGapUnit), " ").concat(SCALES.pl(0, gridGapUnit), ";}")),
-      className: _JSXStyle.dynamic([["2935018504", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]]])
-    },
-    resolveClassName = _styles$className.className,
-    styles = _styles$className.styles;
-  var classes = useClasses(resolveClassName, className);
-  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
-    ref: ref,
-    className: classes
-  }, props), children, styles);
-});
-GridComponent.displayName = 'BolioUIGrid';
-var Grid = withScale(GridComponent);
-export default Grid;

package/esm/Grid/GridContainer.js

@@ -1,43 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["gap", "wrap", "children", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import GridBasicItem from './BasicItem';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var GridContainerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 0 : _ref$gap,
-    _ref$wrap = _ref.wrap,
-    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useScale = useScale(),
-    unit = _useScale.unit,
-    SCALES = _useScale.SCALES;
-  var gapUnit = useMemo(function () {
-    return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
-  }, [gap, unit]);
-  var gridConMargin = 'calc(-1 * var(--grid-gap-unit))';
-  var gridConWidth = 'calc(100% + var(--grid-gap-unit) * 2)';
-  var _styles$className = {
-      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "1260828266",
-        dynamic: [gapUnit, gridConMargin, gridConWidth, wrap, SCALES.width(1, gridConWidth), SCALES.mt(0, gridConMargin), SCALES.mr(0, gridConMargin), SCALES.mb(0, gridConMargin), SCALES.ml(0, gridConMargin)]
-      }, "div.__jsx-style-dynamic-selector{--grid-gap-unit:".concat(gapUnit, ";--grid-container-margin:").concat(gridConMargin, ";--grid-container-width:").concat(gridConWidth, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;}")),
-      className: _JSXStyle.dynamic([["1260828266", [gapUnit, gridConMargin, gridConWidth, wrap, SCALES.width(1, gridConWidth), SCALES.mt(0, gridConMargin), SCALES.mr(0, gridConMargin), SCALES.mb(0, gridConMargin), SCALES.ml(0, gridConMargin)]]])
-    },
-    resolveClassName = _styles$className.className,
-    styles = _styles$className.styles;
-  var classes = useClasses(resolveClassName, className);
-  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
-    ref: ref,
-    className: classes
-  }, props), children, styles);
-});
-GridContainerComponent.displayName = 'BolioUIGridContainer';
-var GridContainer = withScale(GridContainerComponent);
-export default GridContainer;

package/esm/Grid/GridTypes.js

@@ -1,6 +0,0 @@
-import { tuple } from '../utils/prop-types';
-var justify = tuple('flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly');
-var alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline');
-var alignContent = tuple('stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around');
-var direction = tuple('row', 'row-reverse', 'column', 'column-reverse');
-var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');

package/esm/Image/Image.js

@@ -1,83 +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 = ["src", "disableSkeleton", "className", "maxDelay"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
-import ImageSkeleton from './ImageSkeleton';
-import { transformDataSource } from './helpers';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var ImageComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var src = _ref.src,
-    _ref$disableSkeleton = _ref.disableSkeleton,
-    disableSkeleton = _ref$disableSkeleton === void 0 ? false : _ref$disableSkeleton,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$maxDelay = _ref.maxDelay,
-    maxDelay = _ref$maxDelay === void 0 ? 3000 : _ref$maxDelay,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES,
-    getScaleProps = _useScale.getScaleProps;
-  var width = getScaleProps(['width', 'w']);
-  var height = getScaleProps(['height', 'h']);
-  var showAnimation = !disableSkeleton && width && height;
-  var theme = useTheme();
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showSkeleton = _useState4[0],
-    setShowSkeleton = _useState4[1];
-  var imageRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return imageRef.current;
-  });
-  var url = useMemo(function () {
-    return transformDataSource(src);
-  }, [src]);
-  var imageLoaded = function imageLoaded() {
-    if (!showAnimation) return;
-    setLoading(false);
-  };
-  useEffect(function () {
-    if (!showAnimation) return;
-    if (!imageRef.current) return;
-    if (imageRef.current.complete) {
-      setLoading(false);
-      setShowSkeleton(false);
-    }
-  }, [showAnimation]);
-  useEffect(function () {
-    var timer = setTimeout(function () {
-      if (showAnimation) {
-        setShowSkeleton(false);
-      }
-      clearTimeout(timer);
-    }, maxDelay);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [loading, maxDelay, showAnimation]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3930247108", [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (useClasses('image', className) || "")
-  }, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(ImageSkeleton, {
-    opacity: loading ? 1 : 0
-  }), /*#__PURE__*/React.createElement("img", _extends({
-    ref: imageRef,
-    onLoad: imageLoaded,
-    src: url
-  }, props, {
-    className: _JSXStyle.dynamic([["3930247108", [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (props && props.className != null && props.className || "")
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3930247108",
-    dynamic: [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]
-  }, ".image.__jsx-style-dynamic-selector{position:relative;border-radius:".concat(theme.layout.radius, ";overflow:hidden;max-width:100%;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}img.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";object-fit:scale-down;display:inline-block;}")));
-});
-ImageComponent.displayName = 'BolioUIImage';
-var Image = withScale(ImageComponent);
-export default Image;