@bolio-ui/core 1.0.4 → 1.0.6

package/esm/checkbox/checkbox-group.js

@@ -1,70 +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.es.js";
-import React, { useEffect, useMemo, useState } from 'react';
-import { CheckboxContext } from './checkbox-context';
-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/checkbox.js

@@ -1,114 +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.es.js";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useCheckbox } from './checkbox-context';
-import CheckboxIcon from './checkbox.icon';
-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';
-
-function CheckboxComponent(_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([["4063610472", [SCALES.font(0.875), 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']]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
-    fill: fill,
-    bg: bg,
-    disabled: isDisabled,
-    checked: selfChecked
-  }), /*#__PURE__*/React.createElement("input", _extends({
-    type: "checkbox",
-    disabled: isDisabled,
-    checked: selfChecked,
-    onChange: changeHandle
-  }, props, {
-    className: _JSXStyle.dynamic([["4063610472", [SCALES.font(0.875), 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']]]) + " " + (props && props.className != null && props.className || "")
-  })), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["4063610472", [SCALES.font(0.875), 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']]]) + " " + "text"
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4063610472",
-    dynamic: [SCALES.font(0.875), 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']
-  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";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', ";}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/index.js

@@ -1,4 +0,0 @@
-import Checkbox from './checkbox';
-import CheckboxGroup from './checkbox-group';
-Checkbox.Group = CheckboxGroup;
-export default Checkbox;

package/esm/checkbox/stories.js

@@ -1,84 +0,0 @@
-import Checkbox from '.';
-import Grid from '../grid';
-export default {
-  title: 'Data Entry/Checkbox',
-  component: Checkbox
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true
-  }, "Check option")));
-};
-export var Scale = function Scale() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    mr: "15px",
-    checked: true,
-    scale: 0.25
-  }, "scale-0.25")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    mr: "15px",
-    checked: true,
-    scale: 0.5
-  }, "scale-0.5")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    mr: "15px",
-    checked: true,
-    scale: 0.75
-  }, "scale-0.75")));
-};
-export var Type = function Type() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true,
-    type: "default"
-  }, "Checkbox Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true,
-    type: "primary"
-  }, "Checkbox Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true,
-    type: "secondary"
-  }, "Checkbox Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true,
-    type: "success"
-  }, "Checkbox Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true,
-    type: "warning"
-  }, "Checkbox Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true,
-    type: "error"
-  }, "Checkbox Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: true,
-    type: "info"
-  }, "Checkbox Info")));
-};
-export var Disabled = function Disabled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, null, "Checkbox option")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
-    disabled: true,
-    checked: true
-  }, "Checkbox option disabled")));
-};
-export var Group = function Group() {
-  var handler = function handler(value) {
-    console.log(value);
-  };
-
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox.Group, {
-    value: ['check3'],
-    onChange: handler
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    value: "check1"
-  }, "Checkbox option 1"), /*#__PURE__*/React.createElement(Checkbox, {
-    value: "check2"
-  }, "Checkbox option 2"), /*#__PURE__*/React.createElement(Checkbox, {
-    value: "check3"
-  }, "Checkbox option 3"), /*#__PURE__*/React.createElement(Checkbox, {
-    value: "check4"
-  }, "Checkbox option 4"))));
-};

package/esm/code/index.js

@@ -1,2 +0,0 @@
-import Code from './code';
-export default Code;

package/esm/code/stories.js

@@ -1,53 +0,0 @@
-import Code from '.';
-import Text from '../text';
-import Grid from '../grid';
-import WaitTime from '../mdx-widgets/parsed-codes/wait-time';
-export default {
-  title: 'General/Code',
-  component: Code
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
-    my: 0
-  }, "Run ", /*#__PURE__*/React.createElement(Code, null, "npm i @bolio-ui/core"), " to install."), /*#__PURE__*/React.createElement(Text, {
-    my: 0
-  }, "Or run ", /*#__PURE__*/React.createElement(Code, null, "yarn add @bolio-ui/core"), " to install.")));
-};
-export var Block = function Block() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
-    block: true,
-    my: 0
-  }, /*#__PURE__*/React.createElement(WaitTime, null))));
-};
-export var Width = function Width() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
-    block: true,
-    width: "50%",
-    my: 0
-  }, /*#__PURE__*/React.createElement(WaitTime, null))));
-};
-export var Name = function Name() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
-    block: true,
-    name: "/Components/WaitTime.jsx",
-    my: 0
-  }, /*#__PURE__*/React.createElement(WaitTime, null))));
-};
-export var Classic = function Classic() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
-    block: true,
-    classic: true,
-    name: "/Components/WaitTime.jsx",
-    my: 0
-  }, /*#__PURE__*/React.createElement(WaitTime, null))));
-};

package/esm/col/index.js

@@ -1,2 +0,0 @@
-import Col from './col';
-export default Col;

package/esm/collapse/collapse-group.js

@@ -1,75 +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 = ["children", "accordion", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useMemo } from 'react';
-import Collapse from './collapse';
-import useCurrentState from '../utils/use-current-state';
-import { setChildrenIndex } from '../utils/collections';
-import { CollapseContext } from './collapse-context';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-
-function CollapseGroupComponent(_ref) {
-  var children = _ref.children,
-      _ref$accordion = _ref.accordion,
-      accordion = _ref$accordion === void 0 ? true : _ref$accordion,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  var _useCurrentState = useCurrentState([]),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      state = _useCurrentState2[0],
-      setState = _useCurrentState2[1],
-      stateRef = _useCurrentState2[2];
-
-  var classes = useClasses('collapse-group', className);
-
-  var updateValues = function updateValues(currentIndex, nextState) {
-    var hasChild = stateRef.current.find(function (val) {
-      return val === currentIndex;
-    });
-
-    if (accordion) {
-      if (nextState) return setState([currentIndex]);
-      return setState([]);
-    }
-
-    if (nextState) {
-      if (hasChild) return;
-      return setState([].concat(_toConsumableArray(stateRef.current), [currentIndex]));
-    }
-
-    setState(stateRef.current.filter(function (item) {
-      return item !== currentIndex;
-    }));
-  };
-
-  var initialValue = useMemo(function () {
-    return {
-      values: state,
-      updateValues: updateValues
-    };
-  }, [state.join(',')]);
-  var hasIndexChildren = useMemo(function () {
-    return setChildrenIndex(children, [Collapse]);
-  }, [children]);
-  return /*#__PURE__*/React.createElement(CollapseContext.Provider, {
-    value: initialValue
-  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1712563073", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.6), SCALES.pb(0), SCALES.pl(0.6), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), hasIndexChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1712563073",
-    dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.6), SCALES.pb(0), SCALES.pl(0.6), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, ".collapse-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.6), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.6), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.collapse-group.__jsx-style-dynamic-selector>div + div{border-top:none;}"))));
-}
-
-CollapseGroupComponent.displayName = 'BolioUICollapseGroup';
-var CollapseGroup = withScale(CollapseGroupComponent);
-export default CollapseGroup;

package/esm/collapse/collapse.js

@@ -1,93 +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.es.js";
-import React, { useEffect } from 'react';
-import CollapseIcon from './collapse-icon';
-import useTheme from '../use-theme';
-import Expand from '../shared/expand';
-import { useCollapseContext } from './collapse-context';
-import useCurrentState from '../utils/use-current-state';
-import useWarning from '../utils/use-warning';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-
-function CollapseComponent(_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);
-  };
-
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1460486588", [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.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",
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1460486588", [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.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([["1460486588", [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.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([["1460486588", [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.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([["1460486588", [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.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([["1460486588", [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.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: "1460486588",
-    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.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;}.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/index.js

@@ -1,4 +0,0 @@
-import Collapse from './collapse';
-import CollapseGroup from './collapse-group';
-Collapse.Group = CollapseGroup;
-export default Collapse;

package/esm/collapse/stories.js

@@ -1,48 +0,0 @@
-import Collapse from '.';
-import Text from '../text';
-import Grid from '../grid';
-export default {
-  title: 'Surface/Collapse',
-  component: Collapse
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
-    title: "Lorem ipsum 1"
-  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
-    title: "Lorem ipsum 2"
-  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
-};
-export var Expanded = function Expanded() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
-    title: "Lorem ipsum 1",
-    initialVisible: true
-  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
-    title: "Lorem ipsum 2"
-  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
-};
-export var Subtitle = function Subtitle() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
-    title: "Lorem ipsum 1",
-    subtitle: "More description about Lorem ipsum 1"
-  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
-    title: "Lorem ipsum 2",
-    subtitle: /*#__PURE__*/React.createElement(React.Fragment, null, "More description about ", /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "Lorem ipsum 2"))
-  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
-};
-export var Shadow = function Shadow() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse, {
-    shadow: true,
-    title: "Lorem ipsum 1",
-    subtitle: "More description about Lorem ipsum 1"
-  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"))));
-};

package/esm/container/index.js

@@ -1,2 +0,0 @@
-import Container from './container';
-export default Container;

package/esm/css-baseline/index.js

@@ -1 +0,0 @@
-export { default } from './css-baseline';

package/esm/description/index.js

@@ -1,2 +0,0 @@
-import Description from './description';
-export default Description;

package/esm/description/stories.js

@@ -1,23 +0,0 @@
-import Description from '.';
-import Code from '../code';
-import Grid from '../grid';
-export default {
-  title: 'Data Display/Description',
-  component: Description
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Description, {
-    title: "Section Title",
-    content: "Data about this section."
-  })));
-};
-export var WithComponent = function WithComponent() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Description, {
-    title: "Section Title",
-    content: /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Code, null, "code"), " about this section.")
-  })));
-};

package/esm/display/index.js

@@ -1,2 +0,0 @@
-import Display from './display';
-export default Display;

package/esm/divider/index.js

@@ -1,2 +0,0 @@
-import Divider from './divider';
-export default Divider;