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

package/esm/Card/CardContent.js

@@ -1,24 +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 CardContentComponent(_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;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3819126313", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('content', className) || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3819126313",
-    dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), 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), " ").concat(SCALES.pr(1), " ").concat(SCALES.pb(1), " ").concat(SCALES.pl(1), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector>p:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>p:last-child{margin-bottom:0;}")));
-}
-CardContentComponent.displayName = 'BolioUICardContent';
-var CardContent = withScale(CardContentComponent);
-export default CardContent;

package/esm/Card/CardFooter.js

@@ -1,31 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "disableAutoMargin"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-function CardFooterComponent(_ref) {
-  var children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$disableAutoMargi = _ref.disableAutoMargin,
-    disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses({
-    'auto-margin': !disableAutoMargin
-  }, className);
-  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2898207213", [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2898207213",
-    dynamic: [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]
-  }, "footer.__jsx-style-dynamic-selector{padding:".concat(SCALES.py(0.66), " ").concat(SCALES.px(1.31), ";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;overflow:hidden;color:inherit;background-color:inherit;font-size:").concat(SCALES.font(0.875), ";border-top:1px solid ").concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";min-height:").concat(SCALES.height(3.3), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:").concat(theme.layout.gapQuarter, ";}")));
-}
-CardFooterComponent.displayName = 'BolioUICardFooter';
-var CardFooter = withScale(CardFooterComponent);
-export default CardFooter;

package/esm/Card/styles.js

@@ -1,54 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export var getStyles = function getStyles(type, palette, isShadow) {
-  var colors = {
-    "default": {
-      color: palette.foreground,
-      bgColor: palette.accents_1,
-      borderColor: palette.accents_2
-    },
-    primary: {
-      color: palette.primaryDark,
-      bgColor: palette.primaryLighter,
-      borderColor: palette.primaryDark
-    },
-    secondary: {
-      color: palette.secondaryDark,
-      bgColor: palette.secondaryLighter,
-      borderColor: palette.secondaryDark
-    },
-    success: {
-      color: palette.successDark,
-      bgColor: palette.successLighter,
-      borderColor: palette.successDark
-    },
-    warning: {
-      color: palette.warningDark,
-      bgColor: palette.warningLighter,
-      borderColor: palette.warningDark
-    },
-    error: {
-      color: palette.errorDark,
-      bgColor: palette.errorLighter,
-      borderColor: palette.errorDark
-    },
-    info: {
-      color: palette.infoDark,
-      bgColor: palette.infoLighter,
-      borderColor: palette.infoDark
-    },
-    dark: {
-      color: palette.background,
-      bgColor: palette.foreground,
-      borderColor: palette.foreground
-    },
-    lite: {
-      color: palette.foreground,
-      bgColor: palette.background,
-      borderColor: palette.foreground
-    }
-  };
-  var showBorder = type === 'default' && !isShadow;
-  return _extends({}, colors[type], {
-    borderColor: showBorder ? palette.border : 'transparent'
-  });
-};

package/esm/Checkbox/Checkbox.js

@@ -1,102 +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 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useCheckbox } from './CheckboxContext';
-import CheckboxIcon from './CheckboxIcon';
-import useWarning from '../utils/use-warning';
-import { getColors } from './styles';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var CheckboxComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var checked = _ref.checked,
-    _ref$initialChecked = _ref.initialChecked,
-    initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onChange = _ref.onChange,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useState = useState(initialChecked),
-    _useState2 = _slicedToArray(_useState, 2),
-    selfChecked = _useState2[0],
-    setSelfChecked = _useState2[1];
-  var _useCheckbox = useCheckbox(),
-    updateState = _useCheckbox.updateState,
-    inGroup = _useCheckbox.inGroup,
-    disabledAll = _useCheckbox.disabledAll,
-    values = _useCheckbox.values;
-  var isDisabled = inGroup ? disabledAll || disabled : disabled;
-  var classes = useClasses('checkbox', className);
-  if (inGroup && checked) {
-    useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox');
-  }
-  if (inGroup) {
-    useEffect(function () {
-      var next = values.includes(value);
-      if (next === selfChecked) return;
-      setSelfChecked(next);
-    }, [selfChecked, value, values]);
-  }
-  var _useMemo = useMemo(function () {
-      return getColors(theme.palette, type);
-    }, [theme.palette, type]),
-    fill = _useMemo.fill,
-    bg = _useMemo.bg;
-  var changeHandle = useCallback(function (ev) {
-    if (isDisabled) return;
-    var selfEvent = {
-      target: {
-        checked: !selfChecked
-      },
-      stopPropagation: ev.stopPropagation,
-      preventDefault: ev.preventDefault,
-      nativeEvent: ev
-    };
-    if (inGroup && updateState) {
-      updateState && updateState(value, !selfChecked);
-    }
-    setSelfChecked(!selfChecked);
-    onChange && onChange(selfEvent);
-  }, [isDisabled, selfChecked, inGroup, updateState, onChange, value]);
-  useEffect(function () {
-    if (checked === undefined) return;
-    setSelfChecked(checked);
-  }, [checked]);
-  return /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["1454958681", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
-    fill: fill,
-    bg: bg,
-    disabled: isDisabled,
-    checked: selfChecked
-  }), /*#__PURE__*/React.createElement("input", _extends({
-    ref: ref,
-    type: "checkbox",
-    disabled: isDisabled,
-    checked: selfChecked,
-    onChange: changeHandle
-  }, props, {
-    className: _JSXStyle.dynamic([["1454958681", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]]]) + " " + (props && props.className != null && props.className || "")
-  })), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1454958681", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]]]) + " " + "text"
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1454958681",
-    dynamic: [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]
-  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.checkbox.__jsx-style-dynamic-selector:focus-within{border-radius:4px;outline:2px solid ").concat(theme.palette.primary, ";outline-offset:2px;}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
-});
-CheckboxComponent.displayName = 'BolioUICheckbox';
-var Checkbox = withScale(CheckboxComponent);
-export default Checkbox;

package/esm/Checkbox/CheckboxContext.js

@@ -1,10 +0,0 @@
-import React from 'react';
-var defaultContext = {
-  disabledAll: false,
-  inGroup: false,
-  values: []
-};
-export var CheckboxContext = /*#__PURE__*/React.createContext(defaultContext);
-export var useCheckbox = function useCheckbox() {
-  return React.useContext(CheckboxContext);
-};

package/esm/Checkbox/CheckboxGroup.js

@@ -1,62 +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 = ["disabled", "onChange", "value", "children", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useMemo, useState } from 'react';
-import { CheckboxContext } from './CheckboxContext';
-import useWarning from '../utils/use-warning';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-function CheckboxGroupComponent(_ref) {
-  var _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onChange = _ref.onChange,
-    value = _ref.value,
-    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 _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selfVal = _useState2[0],
-    setSelfVal = _useState2[1];
-  var classes = useClasses('group', className);
-  if (!value) {
-    value = [];
-    useWarning('Props "value" is required.', 'Checkbox Group');
-  }
-  var updateState = function updateState(val, checked) {
-    var removed = selfVal.filter(function (v) {
-      return v !== val;
-    });
-    var next = checked ? [].concat(_toConsumableArray(removed), [val]) : removed;
-    setSelfVal(next);
-    onChange && onChange(next);
-  };
-  var providerValue = useMemo(function () {
-    return {
-      updateState: updateState,
-      disabledAll: disabled,
-      inGroup: true,
-      values: selfVal
-    };
-  }, [disabled, selfVal]);
-  useEffect(function () {
-    setSelfVal(value);
-  }, [value]);
-  return /*#__PURE__*/React.createElement(CheckboxContext.Provider, {
-    value: providerValue
-  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2254703651", [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), SCALES.font(1), SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2254703651",
-    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), SCALES.ml(0), SCALES.font(1), SCALES.font(1)]
-  }, ".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), " ").concat(SCALES.ml(0), ";}.group.__jsx-style-dynamic-selector label{margin-right:calc(").concat(SCALES.font(1), " * 2);--checkbox-size:").concat(SCALES.font(1), ";}.group.__jsx-style-dynamic-selector label:last-of-type{margin-right:0;}"))));
-}
-CheckboxGroupComponent.displayName = 'BolioUICheckboxGroup';
-var CheckboxGroup = withScale(CheckboxGroupComponent);
-export default CheckboxGroup;

package/esm/Checkbox/CheckboxIcon.js

@@ -1,63 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useScale from '../use-scale';
-function CheckboxIconComponent(_ref) {
-  var fill = _ref.fill,
-    bg = _ref.bg,
-    disabled = _ref.disabled,
-    checked = _ref.checked;
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useMemo = useMemo(function () {
-      return {
-        propsFill: fill,
-        propsBg: bg
-      };
-    }, [bg, fill]),
-    propsFill = _useMemo.propsFill;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, checked ? /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    style: {
-      height: SCALES.font(1),
-      width: SCALES.font(1)
-    },
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: propsFill,
-    strokeWidth: "0.5",
-    fill: "none",
-    fillRule: "evenodd",
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: propsFill,
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 L18.25,3 Z M18.25,4.5 L5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 Z M10,14.4393398 L16.4696699,7.96966991 C16.7625631,7.6767767 17.2374369,7.6767767 17.5303301,7.96966991 C17.7965966,8.23593648 17.8208027,8.65260016 17.6029482,8.94621165 L17.5303301,9.03033009 L10.5303301,16.0303301 C10.2640635,16.2965966 9.84739984,16.3208027 9.55378835,16.1029482 L9.46966991,16.0303301 L6.46966991,13.0303301 C6.1767767,12.7374369 6.1767767,12.2625631 6.46966991,11.9696699 C6.73593648,11.7034034 7.15260016,11.6791973 7.44621165,11.8970518 L7.53033009,11.9696699 L10,14.4393398 L16.4696699,7.96966991 L10,14.4393398 Z",
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  })))) : /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    style: {
-      height: SCALES.font(1),
-      width: SCALES.font(1)
-    },
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: propsFill,
-    strokeWidth: "0.5",
-    fill: "none",
-    fillRule: "evenodd",
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: propsFill,
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z",
-    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "996181129",
-    dynamic: [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']
-  }, "svg.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(0.86 * var(--checkbox-size));height:calc(0.86 * var(--checkbox-size));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:".concat(disabled ? 0.4 : 1, ";cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";}")));
-}
-CheckboxIconComponent.displayName = 'BolioUICheckboxIcon';
-var CheckboxIcon = /*#__PURE__*/React.memo(CheckboxIconComponent);
-export default CheckboxIcon;

package/esm/Checkbox/styles.js

@@ -1,34 +0,0 @@
-export var getColors = function getColors(palette, status) {
-  var colors = {
-    "default": {
-      fill: palette.foreground,
-      bg: palette.background
-    },
-    primary: {
-      fill: palette.primary,
-      bg: palette.background
-    },
-    secondary: {
-      fill: palette.secondary,
-      bg: palette.background
-    },
-    success: {
-      fill: palette.success,
-      bg: palette.background
-    },
-    warning: {
-      fill: palette.warning,
-      bg: palette.background
-    },
-    error: {
-      fill: palette.error,
-      bg: palette.background
-    },
-    info: {
-      fill: palette.info,
-      bg: palette.background
-    }
-  };
-  if (!status) return colors["default"];
-  return colors[status];
-};

package/esm/Code/Code.js

@@ -1,54 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "block", "className", "name", "classic"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useScale, { withScale } from '../use-scale';
-import useTheme from '../use-theme';
-import { addColorAlpha } from '../utils/color';
-var CodeComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$block = _ref.block,
-    block = _ref$block === void 0 ? false : _ref$block,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? '' : _ref$name,
-    _ref$classic = _ref.classic,
-    classic = _ref$classic === void 0 ? false : _ref$classic,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var theme = useTheme();
-  var _useMemo = useMemo(function () {
-      if (!classic) return {
-        border: theme.palette.accents_1,
-        background: addColorAlpha(theme.palette.accents_1, 0.75)
-      };
-      return {
-        border: theme.palette.accents_2,
-        background: theme.palette.background
-      };
-    }, [classic, theme.palette]),
-    background = _useMemo.background,
-    border = _useMemo.border;
-  if (!block) return /*#__PURE__*/React.createElement("code", _extends({
-    ref: ref
-  }, props), children);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "pre"
-  }, name && /*#__PURE__*/React.createElement("header", {
-    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "name"
-  }, name)), /*#__PURE__*/React.createElement("pre", _extends({}, props, {
-    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || className || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "313158234",
-    dynamic: [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]
-  }, ".pre.__jsx-style-dynamic-selector{max-width:100%;border:1px solid ".concat(border, ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(1.3), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(1.3), " ").concat(SCALES.ml(0), ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(background, ";}pre.__jsx-style-dynamic-selector{max-width:100%;font-size:inherit;border:none;margin:0;line-height:1.5em;padding:").concat(SCALES.pt(1.1), " ").concat(SCALES.pr(1), " ").concat(SCALES.pb(1.1), " ").concat(SCALES.pl(1), ";}.dark.__jsx-style-dynamic-selector{color:white;background:black;}.dark.__jsx-style-dynamic-selector code.__jsx-style-dynamic-selector{color:white;}header.__jsx-style-dynamic-selector{height:auto;width:100%;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;border-radius:").concat(theme.layout.radius, ";background-color:transparent;}.name.__jsx-style-dynamic-selector{border:1px solid ").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_2, ";color:").concat(theme.palette.accents_5, ";height:auto;line-height:1.35em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(0.8125), ";padding:").concat(SCALES.font(0.32), " ").concat(SCALES.font(0.5), " ").concat(SCALES.font(0.32), " ").concat(SCALES.font(0.5), ";width:auto;border-top-left-radius:calc(").concat(theme.layout.radius, " - 1px);border-bottom-right-radius:").concat(theme.layout.radius, ";}")));
-});
-CodeComponent.displayName = 'BolioUICode';
-var Code = withScale(CodeComponent);
-export default Code;

package/esm/Col/Col.js

@@ -1,28 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["component", "children", "span", "offset", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-var Col = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$component = _ref.component,
-    component = _ref$component === void 0 ? 'div' : _ref$component,
-    children = _ref.children,
-    _ref$span = _ref.span,
-    span = _ref$span === void 0 ? 12 : _ref$span,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 0 : _ref$offset,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var Component = component;
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["1202835035", [100 / 12 * span, 100 / 12 * offset]]]) + " " + (props && props.className != null && props.className || "col ".concat(className))
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1202835035",
-    dynamic: [100 / 12 * span, 100 / 12 * offset]
-  }, ".col.__jsx-style-dynamic-selector{float:left;box-sizing:border-box;padding-left:calc(var(--row-gap) / 2);padding-right:calc(var(--row-gap) / 2);width:".concat(100 / 12 * span, "%;margin-left:").concat(100 / 12 * offset, "%;}")));
-});
-Col.displayName = 'BolioUICol';
-export default Col;

package/esm/Collapse/Collapse.js

@@ -1,92 +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 = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect } from 'react';
-import CollapseIcon from './CollapseIcon';
-import useTheme from '../use-theme';
-import Expand from '../Shared/expand';
-import { useCollapseContext } from './CollapseContext';
-import useCurrentState from '../utils/use-current-state';
-import useWarning from '../utils/use-warning';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var CollapseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    title = _ref.title,
-    subtitle = _ref.subtitle,
-    _ref$initialVisible = _ref.initialVisible,
-    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    index = _ref.index,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useCollapseContext = useCollapseContext(),
-    values = _useCollapseContext.values,
-    updateValues = _useCollapseContext.updateValues;
-  var _useCurrentState = useCurrentState(initialVisible),
-    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-    visible = _useCurrentState2[0],
-    setVisible = _useCurrentState2[1],
-    visibleRef = _useCurrentState2[2];
-  var classes = useClasses('collapse', {
-    shadow: shadow
-  }, className);
-  if (!title) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useWarning('"title" is required.', 'Collapse');
-  }
-  useEffect(function () {
-    if (!values.length) return;
-    var isActive = !!values.find(function (item) {
-      return item === index;
-    });
-    setVisible(isActive);
-  }, [index, setVisible, values]);
-  var clickHandler = function clickHandler() {
-    var next = !visibleRef.current;
-    setVisible(next);
-    updateValues && updateValues(index, next);
-  };
-  var keyDownHandler = function keyDownHandler(event) {
-    if (event.key !== 'Enter' && event.key !== ' ') return;
-    event.preventDefault();
-    clickHandler();
-  };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    role: "button",
-    tabIndex: 0,
-    "aria-expanded": visible,
-    onClick: clickHandler,
-    onKeyDown: keyDownHandler,
-    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "view"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "title"
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]])
-  }, title), " ", /*#__PURE__*/React.createElement(CollapseIcon, {
-    active: visible
-  })), subtitle && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "subtitle"
-  }, subtitle)), /*#__PURE__*/React.createElement(Expand, {
-    isExpanded: visible
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "content"
-  }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1468217834",
-    dynamic: [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]
-  }, ".collapse.__jsx-style-dynamic-selector{border-top:1px solid ".concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.shadow.__jsx-style-dynamic-selector{box-shadow:").concat(theme.expressiveness.shadowSmall, ";border:none;border-radius:").concat(theme.layout.radius, ";padding:").concat(theme.layout.gap, ";}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;}.view.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:4px;}.title.__jsx-style-dynamic-selector{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;color:").concat(theme.palette.foreground, ";}.title.__jsx-style-dynamic-selector h3.__jsx-style-dynamic-selector{margin:0;font-size:1.5em;}.subtitle.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_5, ";margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.6em;padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
-});
-CollapseComponent.displayName = 'BolioUICollapse';
-var Collapse = withScale(CollapseComponent);
-export default Collapse;

package/esm/Collapse/CollapseContext.js

@@ -1,8 +0,0 @@
-import React from 'react';
-var defaultContext = {
-  values: []
-};
-export var CollapseContext = /*#__PURE__*/React.createContext(defaultContext);
-export var useCollapseContext = function useCollapseContext() {
-  return React.useContext(CollapseContext);
-};