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

package/esm/DatePicker/DatePicker.js

@@ -1,163 +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 = ["value", "initialValue", "onChange", "min", "max", "locale", "weekStartsOn", "placeholder", "disabled", "calendarLabel", "className", "onBlur"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-import useClickAway from '../utils/use-click-away';
-import Calendar from '../Calendar';
-import { fromISO, startOfDay, toISO } from '../Calendar/date-utils';
-var DatePickerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var customValue = _ref.value,
-    _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? null : _ref$initialValue,
-    onChange = _ref.onChange,
-    min = _ref.min,
-    max = _ref.max,
-    locale = _ref.locale,
-    weekStartsOn = _ref.weekStartsOn,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'YYYY-MM-DD' : _ref$placeholder,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$calendarLabel = _ref.calendarLabel,
-    calendarLabel = _ref$calendarLabel === void 0 ? 'Choose date' : _ref$calendarLabel,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var isControlled = customValue !== undefined;
-  var _useState = useState(initialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    selfValue = _useState2[0],
-    setSelfValue = _useState2[1];
-  var selected = isControlled ? customValue : selfValue;
-  var selectedText = selected ? toISO(selected) : '';
-  var _useState3 = useState(selectedText),
-    _useState4 = _slicedToArray(_useState3, 2),
-    text = _useState4[0],
-    setText = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  useEffect(function () {
-    setText(selectedText);
-  }, [selectedText]);
-  var rootRef = useRef(null);
-  var inputRef = useRef(null);
-  var buttonRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return inputRef.current;
-  });
-  useClickAway(rootRef, function () {
-    return setOpen(false);
-  });
-  var isInRange = function isInRange(date) {
-    return !(min && date < startOfDay(min) || max && date > startOfDay(max));
-  };
-  var commit = function commit(date) {
-    if (!isControlled) setSelfValue(date);
-    onChange && onChange(date);
-  };
-  var inputHandler = function inputHandler(event) {
-    var next = event.target.value;
-    setText(next);
-    if (next === '') return commit(null);
-    var date = fromISO(next);
-    if (date && isInRange(date)) commit(date);
-  };
-  var blurHandler = function blurHandler(event) {
-    onBlur && onBlur(event);
-    setText(selectedText);
-  };
-  var pick = function pick(date) {
-    var _inputRef$current;
-    commit(date);
-    setText(toISO(date));
-    setOpen(false);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-  };
-  var keyDownHandler = function keyDownHandler(event) {
-    var _buttonRef$current;
-    if (event.key !== 'Escape') return;
-    event.stopPropagation();
-    setOpen(false);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    ref: rootRef,
-    className: _JSXStyle.dynamic([["836127094", [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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + (useClasses('datepicker', className) || "")
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef,
-    type: "text",
-    autoComplete: "off",
-    inputMode: "numeric",
-    value: text,
-    placeholder: placeholder,
-    disabled: disabled,
-    onChange: inputHandler,
-    onBlur: blurHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["836127094", [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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + (props && props.className != null && props.className || "")
-  })), /*#__PURE__*/React.createElement("button", {
-    ref: buttonRef,
-    type: "button",
-    "aria-label": calendarLabel,
-    "aria-haspopup": "dialog",
-    "aria-expanded": open,
-    disabled: disabled,
-    onClick: function onClick() {
-      return setOpen(function (last) {
-        return !last;
-      });
-    },
-    className: _JSXStyle.dynamic([["836127094", [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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + "toggle"
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    width: "1.25em",
-    height: "1.25em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    className: _JSXStyle.dynamic([["836127094", [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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]])
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "3",
-    y: "4",
-    width: "18",
-    height: "18",
-    rx: "2",
-    className: _JSXStyle.dynamic([["836127094", [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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]])
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M16 2v4M8 2v4M3 10h18",
-    className: _JSXStyle.dynamic([["836127094", [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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]])
-  }))), open && /*#__PURE__*/React.createElement("div", {
-    role: "dialog",
-    "aria-label": calendarLabel,
-    onKeyDown: keyDownHandler,
-    className: _JSXStyle.dynamic([["836127094", [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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + "popup"
-  }, /*#__PURE__*/React.createElement(Calendar, {
-    autoFocus: true,
-    value: selected,
-    min: min,
-    max: max,
-    locale: locale,
-    weekStartsOn: weekStartsOn,
-    onChange: pick
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "836127094",
-    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.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]
-  }, ".datepicker.__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 2.75em 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, ";}.toggle.__jsx-style-dynamic-selector{position:absolute;top:0;right:0;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:2.5em;height:2.5em;color:").concat(theme.palette.accents_5, ";cursor:pointer;background:transparent;border:0;border-radius:").concat(theme.layout.radius, ";}.toggle.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:not(:disabled){color:").concat(theme.palette.foreground, ";}.toggle.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:-2px;}.toggle.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:").concat(theme.palette.accents_3, ";}.popup.__jsx-style-dynamic-selector{position:absolute;top:calc(100% + 4px);left:0;z-index:1100;padding:0.75em;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, ";}")));
-});
-DatePickerComponent.displayName = 'BolioUIDatePicker';
-var DatePicker = withScale(DatePickerComponent);
-export default DatePicker;

package/esm/Description/Description.js

@@ -1,36 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "content", "className"];
-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';
-var DescriptionComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Title' : _ref$title,
-    _ref$content = _ref.content,
-    content = _ref$content === void 0 ? '' : _ref$content,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses('description', className);
-  return /*#__PURE__*/React.createElement("dl", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["2223883812", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("dt", {
-    className: _JSXStyle.dynamic([["2223883812", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]])
-  }, title), /*#__PURE__*/React.createElement("dd", {
-    className: _JSXStyle.dynamic([["2223883812", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]])
-  }, content), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2223883812",
-    dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]
-  }, ".description.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}dt.__jsx-style-dynamic-selector{font-size:0.75em;line-height:1em;margin-bottom:0.5em;text-transform:uppercase;white-space:nowrap;color:").concat(theme.palette.accents_5, ";font-weight:500;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}dd.__jsx-style-dynamic-selector{font-size:0.875em;margin:0;line-height:1.1em;color:").concat(theme.palette.foreground, ";font-weight:500;}dd.__jsx-style-dynamic-selector p,dt.__jsx-style-dynamic-selector p{margin:0;}")));
-});
-DescriptionComponent.displayName = 'BolioUIDescription';
-var Description = withScale(DescriptionComponent);
-export default Description;

package/esm/Display/Display.js

@@ -1,40 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "caption", "shadow", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var DisplayComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$caption = _ref.caption,
-    caption = _ref$caption === void 0 ? '' : _ref$caption,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses('display', className);
-  var showShadow = useMemo(function () {
-    return shadow && theme.type !== 'dark';
-  }, [theme.type, shadow]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["1848347159", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1848347159", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "content"
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1848347159", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "caption"
-  }, caption), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1848347159",
-    dynamic: [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']
-  }, ".display.__jsx-style-dynamic-selector{display:block;max-width:100%;font-size:".concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";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(2.5), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(2.5), " ").concat(SCALES.ml(0, 'auto'), ";}.content.__jsx-style-dynamic-selector{display:block;margin:0 auto;border-radius:4px;overflow:hidden;width:").concat(SCALES.width(1, 'max-content'), ";box-shadow:").concat(showShadow ? theme.expressiveness.shadowLarge : 'none', ";max-width:100%;}.content.__jsx-style-dynamic-selector pre{margin:0;-webkit-transition:min-width ease 0.2s;transition:min-width ease 0.2s;}.content.__jsx-style-dynamic-selector img{display:block;}.caption.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.5em;color:").concat(theme.palette.accents_5, ";margin:").concat(shadow ? '2.5em' : '1.3em', " auto 0;text-align:center;max-width:85%;}")));
-});
-DisplayComponent.displayName = 'BolioUIDisplay';
-var Display = withScale(DisplayComponent);
-export default Display;

package/esm/Divider/Divider.js

@@ -1,60 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "align", "children", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var getColor = function getColor(type, palette) {
-  var colors = {
-    "default": palette.border,
-    primary: palette.primaryLight,
-    secondary: palette.secondaryLight,
-    success: palette.successLight,
-    warning: palette.warningLight,
-    error: palette.errorLight,
-    info: palette.infoLight,
-    dark: palette.foreground,
-    lite: palette.accents_1
-  };
-  return colors[type];
-};
-var DividerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'center' : _ref$align,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses('divider', className);
-  var color = useMemo(function () {
-    return getColor(type, theme.palette);
-  }, [type, theme.palette]);
-  var alignClassName = useMemo(function () {
-    if (!align || align === 'center') return '';
-    if (align === 'left' || align === 'start') return 'start';
-    return 'end';
-  }, [align]);
-  var alignClasses = useClasses('text', alignClassName);
-  var textColor = type === 'default' ? theme.palette.foreground : color;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    role: "separator"
-  }, props, {
-    className: _JSXStyle.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (alignClasses || "")
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1488853092",
-    dynamic: [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]
-  }, ".divider.__jsx-style-dynamic-selector{max-width:100%;background-color:".concat(color, ";position:relative;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(0.0625), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;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;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 0.75em;font-size:inherit;font-weight:bold;text-transform:capitalize;background-color:").concat(theme.palette.background, ";color:").concat(textColor, ";z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}")));
-});
-DividerComponent.displayName = 'BolioUIDivider';
-var Divider = withScale(DividerComponent);
-export default Divider;

package/esm/Dot/Dot.js

@@ -1,51 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "children", "className", "color"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var getColor = function getColor(type, theme) {
-  var colors = {
-    "default": theme.palette.accents_2,
-    primary: theme.palette.primary,
-    secondary: theme.palette.secondary,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    error: theme.palette.error,
-    info: theme.palette.info
-  };
-  return colors[type] || colors["default"];
-};
-var DotComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '' : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var typeColor = useMemo(function () {
-    return getColor(type, theme);
-  }, [type, theme]);
-  return /*#__PURE__*/React.createElement("span", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["2211116772", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color ? color : typeColor]]]) + " " + (props && props.className != null && props.className || useClasses('dot', className) || "")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2211116772", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color ? color : typeColor]]]) + " " + "icon"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2211116772", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color ? color : typeColor]]]) + " " + "label"
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2211116772",
-    dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color ? color : typeColor]
-  }, ".dot.__jsx-style-dynamic-selector{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(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.icon.__jsx-style-dynamic-selector{width:0.625em;height:0.625em;min-width:calc(0.625 * 12px);min-height:calc(0.625 * 12px);line-height:0.625em;border-radius:50%;background-color:").concat(color ? color : typeColor, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.label.__jsx-style-dynamic-selector{margin-left:0.5em;font-size:1em;line-height:1em;text-transform:capitalize;}")));
-});
-DotComponent.displayName = 'BolioUIDot';
-var Dot = withScale(DotComponent);
-export default Dot;

package/esm/Drawer/Drawer.js

@@ -1,69 +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 = ["visible", "keyboard", "disableBackdropClick", "wrapClassName", "children", "placement", "onClose", "onContentClick"];
-import React, { useEffect, useState } from 'react';
-import { withScale } from '../use-scale';
-import usePortal from '../utils/use-portal';
-import useBodyScroll from '../utils/use-body-scroll';
-import useKeyboard, { KeyCode } from '../use-keyboard';
-import { createPortal } from 'react-dom';
-import Backdrop from '../Shared/backdrop';
-import DrawerWrapper from './DrawerWrapper';
-var DrawerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var customVisible = _ref.visible,
-    _ref$keyboard = _ref.keyboard,
-    keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
-    disableBackdropClick = _ref.disableBackdropClick,
-    wrapClassName = _ref.wrapClassName,
-    children = _ref.children,
-    placement = _ref.placement,
-    onClose = _ref.onClose,
-    onContentClick = _ref.onContentClick,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var portal = usePortal('drawer');
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var _useBodyScroll = useBodyScroll(null, {
-      delayReset: 300
-    }),
-    _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
-    setBodyHidden = _useBodyScroll2[1];
-  var closeDrawer = function closeDrawer() {
-    onClose && onClose();
-    setVisible(false);
-    setBodyHidden(false);
-  };
-  useEffect(function () {
-    if (typeof customVisible === 'undefined') return;
-    setVisible(customVisible);
-    setBodyHidden(customVisible);
-  }, [customVisible, setBodyHidden]);
-  var _useKeyboard = useKeyboard(function () {
-      keyboard && closeDrawer();
-    }, KeyCode.Escape, {
-      disableGlobalEvent: true
-    }),
-    bindings = _useKeyboard.bindings;
-  var closeFromBackdrop = function closeFromBackdrop() {
-    if (disableBackdropClick) return;
-    closeDrawer();
-  };
-  if (!portal) return null;
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Backdrop, _extends({
-    onClick: closeFromBackdrop,
-    onContentClick: onContentClick,
-    visible: visible,
-    width: "100%"
-  }, bindings), /*#__PURE__*/React.createElement(DrawerWrapper, _extends({
-    ref: ref,
-    visible: visible,
-    className: wrapClassName,
-    placement: placement
-  }, props), children)), portal);
-});
-DrawerComponent.displayName = 'BolioUIDrawer';
-var Drawer = withScale(DrawerComponent);
-export default Drawer;

package/esm/Drawer/DrawerWrapper.js

@@ -1,82 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children", "visible", "placement"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import useScale from '../use-scale';
-import useTheme from '../use-theme';
-import CssTransition from '../Shared/css-transition';
-import { isChildElement } from '../utils/collections';
-import { getDrawerTransform } from './helper';
-import useClasses from '../use-classes';
-var DrawerWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? false : _ref$visible,
-    placement = _ref.placement,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var modalContent = useRef(null);
-  useImperativeHandle(ref, function () {
-    return modalContent.current;
-  });
-  var tabStart = useRef(null);
-  var tabEnd = useRef(null);
-  var transform = useMemo(function () {
-    return getDrawerTransform(placement);
-  }, [placement]);
-  var classes = useClasses('wrapper', placement, className);
-  useEffect(function () {
-    if (!visible) return;
-    var activeElement = document.activeElement;
-    var isChild = isChildElement(modalContent.current, activeElement);
-    if (isChild) return;
-    tabStart.current && tabStart.current.focus();
-  }, [visible]);
-  var onKeyDown = function onKeyDown(event) {
-    var isTabDown = event.keyCode === 9;
-    if (!visible || !isTabDown) return;
-    var activeElement = document.activeElement;
-    if (event.shiftKey) {
-      if (activeElement === tabStart.current) {
-        tabEnd.current && tabEnd.current.focus();
-      }
-    } else {
-      if (activeElement === tabEnd.current) {
-        tabStart.current && tabStart.current.focus();
-      }
-    }
-  };
-  return /*#__PURE__*/React.createElement(CssTransition, {
-    name: "wrapper",
-    visible: visible,
-    clearTime: 300
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    role: "dialog",
-    "aria-modal": "true",
-    tabIndex: -1,
-    onKeyDown: onKeyDown,
-    ref: modalContent
-  }, props, {
-    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    "aria-hidden": "true",
-    ref: tabStart,
-    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab start"
-  }), children, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    "aria-hidden": "true",
-    ref: tabEnd,
-    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab end"
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1322120384",
-    dynamic: [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]
-  }, ".wrapper.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;max-width:100%;vertical-align:middle;overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";border-radius:calc(3 * ").concat(theme.layout.radius, ");box-shadow:").concat(theme.expressiveness.shadowLarge, ";opacity:0;outline:none;-webkit-transform:").concat(transform.initial, ";-ms-transform:").concat(transform.initial, ";transform:").concat(transform.initial, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.6,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);font-size:").concat(SCALES.font(1), ";--modal-wrapper-padding-left:").concat(SCALES.pl(1.3125), ";--modal-wrapper-padding-right:").concat(SCALES.pr(1.3125), ";padding:").concat(SCALES.pt(1.3125), " var(--modal-wrapper-padding-right) ").concat(SCALES.pb(1.3125), " var(--modal-wrapper-padding-left);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.top.__jsx-style-dynamic-selector,.bottom.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";}.left.__jsx-style-dynamic-selector,.right.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, '100%'), ";}.top.__jsx-style-dynamic-selector{bottom:auto;border-top-left-radius:0;border-top-right-radius:0;}.left.__jsx-style-dynamic-selector{right:auto;border-top-left-radius:0;border-bottom-left-radius:0;}.bottom.__jsx-style-dynamic-selector{top:auto;border-bottom-left-radius:0;border-bottom-right-radius:0;}.right.__jsx-style-dynamic-selector{left:auto;border-top-right-radius:0;border-bottom-right-radius:0;}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.2,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0.4;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}"))));
-});
-DrawerWrapper.displayName = 'BolioUIDrawerWrapper';
-export default DrawerWrapper;

package/esm/Drawer/helper.js

@@ -1,27 +0,0 @@
-import { tuple } from '../utils/prop-types';
-var drawerPlacement = tuple('top', 'right', 'bottom', 'left');
-export var getDrawerTransform = function getDrawerTransform(placement) {
-  var translates = {
-    top: {
-      initial: 'translate3d(0, -100%, 0)',
-      hidden: 'translate3d(0, -100%, 0)',
-      visible: 'translate3d(0, 0, 0)'
-    },
-    left: {
-      initial: 'translate3d(-100%, 0, 0)',
-      hidden: 'translate3d(-100%, 0, 0)',
-      visible: 'translate3d(0, 0, 0)'
-    },
-    bottom: {
-      initial: 'translate3d(0, 100%, 0)',
-      hidden: 'translate3d(0, 100%, 0)',
-      visible: 'translate3d(0, 0, 0)'
-    },
-    right: {
-      initial: 'translate3d(100%, 0, 0)',
-      hidden: 'translate3d(100%, 0, 0)',
-      visible: 'translate3d(0, 0, 0)'
-    }
-  };
-  return translates[placement];
-};