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

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);
-};

package/esm/Collapse/CollapseGroup.js

@@ -1,65 +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/style";
-import React, { useMemo } from 'react';
-import Collapse from './Collapse';
-import useCurrentState from '../utils/use-current-state';
-import { setChildrenIndex } from '../utils/collections';
-import { CollapseContext } from './CollapseContext';
-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/CollapseIcon.js

@@ -1,26 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-function CollapseIcon(_ref) {
-  var active = _ref.active;
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    style: {
-      color: 'currentColor'
-    },
-    className: _JSXStyle.dynamic([["2249786880", [active ? '-180deg' : '0']]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6 9l6 6 6-6",
-    className: _JSXStyle.dynamic([["2249786880", [active ? '-180deg' : '0']]])
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2249786880",
-    dynamic: [active ? '-180deg' : '0']
-  }, "svg.__jsx-style-dynamic-selector{-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;-webkit-transform:rotateZ(".concat(active ? '-180deg' : '0', ");-ms-transform:rotateZ(").concat(active ? '-180deg' : '0', ");transform:rotateZ(").concat(active ? '-180deg' : '0', ");width:1.5em;height:1.5em;}")));
-}
-var MemoCollapseIcon = /*#__PURE__*/React.memo(CollapseIcon);
-export default MemoCollapseIcon;

package/esm/Combobox/Combobox.js

@@ -1,199 +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 = ["options", "value", "initialValue", "onChange", "onInputChange", "placeholder", "disabled", "emptyText", "filter", "className", "onKeyDown", "onBlur"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useId, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var getLabel = function getLabel(option) {
-  var _option$label;
-  return option ? (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value : '';
-};
-var defaultFilter = function defaultFilter(option, text) {
-  return getLabel(option).toLowerCase().includes(text.trim().toLowerCase());
-};
-var firstEnabled = function firstEnabled(options) {
-  return options.findIndex(function (option) {
-    return !option.disabled;
-  });
-};
-var ComboboxComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var options = _ref.options,
-    customValue = _ref.value,
-    _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? null : _ref$initialValue,
-    onChange = _ref.onChange,
-    onInputChange = _ref.onInputChange,
-    placeholder = _ref.placeholder,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$emptyText = _ref.emptyText,
-    emptyText = _ref$emptyText === void 0 ? 'No results' : _ref$emptyText,
-    _ref$filter = _ref.filter,
-    filter = _ref$filter === void 0 ? defaultFilter : _ref$filter,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    onKeyDown = _ref.onKeyDown,
-    onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var baseId = useId();
-  var listId = "".concat(baseId, "-list");
-  var optionId = function optionId(index) {
-    return "".concat(baseId, "-option-").concat(index);
-  };
-  var isControlled = customValue !== undefined;
-  var _useState = useState(initialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    selfValue = _useState2[0],
-    setSelfValue = _useState2[1];
-  var selected = isControlled ? customValue : selfValue;
-  var selectedOption = options.find(function (option) {
-    return option.value === selected;
-  });
-  var selectedLabel = getLabel(selectedOption);
-  var _useState3 = useState(selectedLabel),
-    _useState4 = _slicedToArray(_useState3, 2),
-    text = _useState4[0],
-    setText = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var _useState7 = useState(-1),
-    _useState8 = _slicedToArray(_useState7, 2),
-    activeIndex = _useState8[0],
-    setActiveIndex = _useState8[1];
-  useEffect(function () {
-    setText(selectedLabel);
-  }, [selectedLabel]);
-
-  // Once an option is chosen, show every option again until the user types.
-  var query = selectedOption && text === selectedLabel ? '' : text;
-  var visible = useMemo(function () {
-    return options.filter(function (option) {
-      return filter(option, query);
-    });
-  }, [options, filter, query]);
-  var expanded = open && visible.length > 0;
-  useEffect(function () {
-    setActiveIndex(open ? firstEnabled(visible) : -1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, query]);
-  useEffect(function () {
-    var _element$scrollIntoVi;
-    if (activeIndex < 0) return;
-    var element = document.getElementById(optionId(activeIndex));
-    element === null || element === void 0 ? void 0 : (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 ? void 0 : _element$scrollIntoVi.call(element, {
-      block: 'nearest'
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeIndex]);
-  var choose = function choose(option) {
-    if (option.disabled) return;
-    if (!isControlled) setSelfValue(option.value);
-    setText(getLabel(option));
-    setOpen(false);
-    onChange && onChange(option.value);
-  };
-  var inputHandler = function inputHandler(event) {
-    var next = event.target.value;
-    setText(next);
-    setOpen(true);
-    onInputChange && onInputChange(next);
-    if (next === '' && selected !== null) {
-      if (!isControlled) setSelfValue(null);
-      onChange && onChange(null);
-    }
-  };
-  var move = function move(direction) {
-    var count = visible.length;
-    if (!count) return;
-    var index = activeIndex === -1 ? direction === 1 ? -1 : count : activeIndex;
-    for (var step = 0; step < count; step++) {
-      index = (index + direction + count) % count;
-      if (!visible[index].disabled) return setActiveIndex(index);
-    }
-  };
-  var keyDownHandler = function keyDownHandler(event) {
-    onKeyDown && onKeyDown(event);
-    if (event.defaultPrevented) return;
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault();
-      if (!open) return setOpen(true);
-      return move(event.key === 'ArrowDown' ? 1 : -1);
-    }
-    if (event.key === 'Enter' && expanded && activeIndex >= 0) {
-      event.preventDefault();
-      return choose(visible[activeIndex]);
-    }
-    if (event.key === 'Escape' && open) {
-      event.preventDefault();
-      setOpen(false);
-    }
-  };
-  var blurHandler = function blurHandler(event) {
-    onBlur && onBlur(event);
-    setOpen(false);
-    setText(selectedLabel);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (useClasses('combobox', className) || "")
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    ref: ref,
-    type: "text",
-    role: "combobox",
-    autoComplete: "off",
-    "aria-autocomplete": "list",
-    "aria-expanded": expanded,
-    "aria-controls": expanded ? listId : undefined,
-    "aria-activedescendant": expanded && activeIndex >= 0 ? optionId(activeIndex) : undefined,
-    value: text,
-    placeholder: placeholder,
-    disabled: disabled,
-    onChange: inputHandler,
-    onKeyDown: keyDownHandler,
-    onBlur: blurHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (props && props.className != null && props.className || "")
-  })), expanded && /*#__PURE__*/React.createElement("ul", {
-    id: listId,
-    role: "listbox",
-    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]])
-  }, visible.map(function (option, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: option.value,
-      id: optionId(index),
-      role: "option",
-      "aria-selected": option.value === selected,
-      "aria-disabled": option.disabled || undefined,
-      onMouseDown: function onMouseDown(event) {
-        event.preventDefault();
-        choose(option);
-      },
-      onMouseMove: function onMouseMove() {
-        return !option.disabled && setActiveIndex(index);
-      },
-      className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (useClasses({
-        active: index === activeIndex,
-        selected: option.value === selected,
-        disabled: option.disabled
-      }) || "")
-    }, getLabel(option));
-  })), open && visible.length === 0 && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + "empty"
-  }, emptyText), /*#__PURE__*/React.createElement("div", {
-    role: "status",
-    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + "sr-only"
-  }, expanded ? "".concat(visible.length, " result").concat(visible.length === 1 ? '' : 's', " available") : ''), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1685493807",
-    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]
-  }, ".combobox.__jsx-style-dynamic-selector{position:relative;display:inline-block;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{box-sizing:border-box;width:100%;min-width:12.5em;height:2.5em;padding:0 0.875em;font:inherit;color:").concat(theme.palette.foreground, ";background-color:").concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";outline:none;-webkit-transition:border-color 0.15s ease;transition:border-color 0.15s ease;}input.__jsx-style-dynamic-selector:focus{border-color:").concat(theme.palette.primary, ";}input.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";}ul.__jsx-style-dynamic-selector,.empty.__jsx-style-dynamic-selector{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1100;box-sizing:border-box;background-color:").concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}ul.__jsx-style-dynamic-selector{max-height:15em;overflow-y:auto;margin:0;padding:0.25em;list-style:none;}li.__jsx-style-dynamic-selector{padding:0.5em 0.75em;border-radius:4px;cursor:pointer;color:").concat(theme.palette.foreground, ";}li.active.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}li.selected.__jsx-style-dynamic-selector{font-weight:600;}li.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:").concat(theme.palette.accents_4, ";}.empty.__jsx-style-dynamic-selector{padding:0.75em;color:").concat(theme.palette.accents_5, ";}.sr-only.__jsx-style-dynamic-selector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);white-space:nowrap;border:0;}")));
-});
-ComboboxComponent.displayName = 'BolioUICombobox';
-var Combobox = withScale(ComboboxComponent);
-export default Combobox;

package/esm/Container/Container.js

@@ -1,62 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "component", "justify", "align", "fluid", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-var defaultProps = {
-  gap: 0,
-  justify: 'start',
-  align: 'top',
-  component: 'div',
-  className: '',
-  fluid: false
-};
-var getFlexAlignment = function getFlexAlignment(justify, align) {
-  var flexJustifyMap = {
-    end: 'flex-end',
-    center: 'center',
-    'space-around': 'space-around',
-    'space-between': 'space-between'
-  };
-  var flexAlignMap = {
-    middle: 'center',
-    bottom: 'flex-end'
-  };
-  return {
-    justifyValue: flexJustifyMap[justify] || 'normal',
-    alignValue: flexAlignMap[align] || 'normal'
-  };
-};
-var Container = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$component = _ref.component,
-    component = _ref$component === void 0 ? defaultProps.component : _ref$component,
-    _ref$justify = _ref.justify,
-    justify = _ref$justify === void 0 ? defaultProps.justify : _ref$justify,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? defaultProps.align : _ref$align,
-    _ref$fluid = _ref.fluid,
-    fluid = _ref$fluid === void 0 ? defaultProps.fluid : _ref$fluid,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? defaultProps.className : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var Component = component;
-  var theme = useTheme();
-  var _useMemo = useMemo(function () {
-      return getFlexAlignment(justify, align);
-    }, [justify, align]),
-    justifyValue = _useMemo.justifyValue,
-    alignValue = _useMemo.alignValue;
-  var fluidWidth = fluid ? '' : 'max-width: ' + theme.layout.pageWidthWithMargin;
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["2507064107", [fluidWidth, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "container ".concat(className))
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2507064107",
-    dynamic: [fluidWidth, justifyValue, alignValue]
-  }, ".container.__jsx-style-dynamic-selector{".concat(fluidWidth, ";padding-left:15px;padding-right:15px;margin-right:auto;margin-left:auto;-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
-});
-Container.displayName = 'BolioUIContainer';
-export default Container;

package/esm/CssBaseline/CssBaseline.js

@@ -1,12 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useTheme from '../use-theme';
-var CssBaseline = function CssBaseline(_ref) {
-  var children = _ref.children;
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "82041157",
-    dynamic: [theme.palette.background, theme.palette.foreground, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.accents_4, theme.palette.code, theme.font.mono, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.accents_2, theme.layout.radius, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.border, theme.palette.selection, theme.palette.foreground]
-  }, "html,body{background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";}html{font-size:16px;--bolioui-icons-background:").concat(theme.palette.background, ";}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:").concat(theme.font.sans, ";}#__next{overflow-x:hidden;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:").concat(theme.font.sans, ";}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.link, ";-webkit-text-decoration:").concat(theme.expressiveness.linkStyle, ";text-decoration:").concat(theme.expressiveness.linkStyle, ";}a:hover{-webkit-text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";}ul,ol{padding:0;list-style-type:none;margin:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";color:").concat(theme.palette.foreground, ";}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;line-height:1;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:").concat(theme.palette.code, ";font-family:").concat(theme.font.mono, ";font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\\`';}pre{padding:calc(").concat(theme.layout.gap, " * 0.9) ").concat(theme.layout.gap, ";margin:").concat(theme.layout.gap, " 0;border:1px solid ").concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";font-family:").concat(theme.font.mono, ";white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:").concat(theme.palette.accents_2, ";}details{background-color:").concat(theme.palette.accents_1, ";border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ").concat(theme.layout.gap, ") ").concat(theme.layout.gap, ";color:").concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";border-radius:").concat(theme.layout.radius, ";margin:1.5em 0;border:1px solid ").concat(theme.palette.border, ";}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:").concat(theme.palette.selection, ";color:").concat(theme.palette.foreground, ";}")));
-};
-export default /*#__PURE__*/React.memo(CssBaseline);