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

package/esm/Button/Button.js

@@ -1,131 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
-import useScale, { withScale } from '../use-scale';
-import useTheme from '../use-theme';
-import ButtonDrip from './ButtonDrip';
-import ButtonLoading from './ButtonLoading';
-import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils';
-import { useButtonGroupContext } from '../ButtonGroup/ButtonGroupContext';
-import { getButtonColors, getButtonCursor, getButtonDripColor, getButtonHoverColors } from './styles';
-import useClasses from '../use-classes';
-var defaultProps = {
-  type: 'default',
-  htmlType: 'button',
-  ghost: false,
-  rounded: false,
-  loading: false,
-  shadow: false,
-  auto: false,
-  effect: true,
-  disabled: false,
-  className: ''
-};
-var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var buttonRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dripShow = _useState2[0],
-    setDripShow = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dripX = _useState4[0],
-    setDripX = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    dripY = _useState6[0],
-    setDripY = _useState6[1];
-  var groupConfig = useButtonGroupContext();
-  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
-
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  var children = filteredProps.children,
-    disabled = filteredProps.disabled,
-    type = filteredProps.type,
-    loading = filteredProps.loading,
-    shadow = filteredProps.shadow,
-    ghost = filteredProps.ghost,
-    rounded = filteredProps.rounded,
-    effect = filteredProps.effect,
-    onClick = filteredProps.onClick,
-    auto = filteredProps.auto,
-    icon = filteredProps.icon,
-    htmlType = filteredProps.htmlType,
-    iconRight = filteredProps.iconRight,
-    className = filteredProps.className,
-    props = _objectWithoutProperties(filteredProps, _excluded);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-
-  var _useMemo = useMemo(function () {
-      return getButtonColors(theme.palette, filteredProps);
-    }, [theme.palette, filteredProps]),
-    bg = _useMemo.bg,
-    border = _useMemo.border,
-    color = _useMemo.color;
-  var hover = useMemo(function () {
-    return getButtonHoverColors(theme.palette, filteredProps);
-  }, [theme.palette, filteredProps]);
-  var _useMemo2 = useMemo(function () {
-      return getButtonCursor(disabled, loading);
-    }, [disabled, loading]),
-    cursor = _useMemo2.cursor,
-    events = _useMemo2.events;
-  var dripColor = useMemo(function () {
-    return getButtonDripColor(theme.palette, filteredProps);
-  }, [theme.palette, filteredProps]);
-  var dripCompletedHandle = function dripCompletedHandle() {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-  var clickHandler = function clickHandler(event) {
-    if (disabled || loading) return;
-    var showDrip = effect;
-    if (showDrip && buttonRef.current) {
-      var rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
-    }
-    onClick && onClick(event);
-  };
-  var childrenWithIcon = useMemo(function () {
-    return getButtonChildrenWithIcon(auto, children, {
-      icon: icon,
-      iconRight: iconRight
-    });
-  }, [auto, children, icon, iconRight]);
-  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.15),
-    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.15);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    ref: buttonRef,
-    type: htmlType,
-    disabled: disabled,
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["1204671885", [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
-  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
-    color: color
-  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
-    x: dripX,
-    y: dripY,
-    color: dripColor,
-    onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1204671885",
-    dynamic: [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:bold;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
-});
-ButtonComponent.defaultProps = defaultProps;
-ButtonComponent.displayName = 'BolioUIButton';
-var Button = withScale(ButtonComponent);
-export default Button;

package/esm/Button/ButtonDrip.js

@@ -1,55 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useRef } from 'react';
-var defaultProps = {
-  x: 0,
-  y: 0
-};
-var ButtonDrip = function ButtonDrip(_ref) {
-  var x = _ref.x,
-    y = _ref.y,
-    color = _ref.color,
-    onCompleted = _ref.onCompleted;
-  var dripRef = useRef(null);
-  var top = Number.isNaN(+y) ? 0 : y - 10;
-  var left = Number.isNaN(+x) ? 0 : x - 10;
-  useEffect(function () {
-    if (!dripRef.current) return;
-    dripRef.current.addEventListener('animationend', onCompleted);
-    return function () {
-      if (!dripRef.current) return;
-      dripRef.current.removeEventListener('animationend', onCompleted);
-    };
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    ref: dripRef,
-    className: "jsx-3424889537" + " " + "drip"
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    style: {
-      top: top,
-      left: left
-    },
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd",
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: color,
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "100%",
-    height: "100%",
-    rx: "10",
-    className: "jsx-3424889537"
-  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3424889537"
-  }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
-};
-ButtonDrip.defaultProps = defaultProps;
-ButtonDrip.displayName = 'BolioUItButtonDrip';
-export default ButtonDrip;

package/esm/Button/ButtonIcon.js

@@ -1,26 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["isRight", "isSingle", "children", "className"];
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useClasses from '../use-classes';
-function ButtonIcon(_ref) {
-  var _ref$isRight = _ref.isRight,
-    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
-    isSingle = _ref.isSingle,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var classes = useClasses('icon', {
-    right: isRight,
-    single: isSingle
-  }, className);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: "jsx-2499243154" + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2499243154"
-  }, ".icon.jsx-2499243154{position:absolute;left:var(--bolio-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;color:var(--bolio-ui-button-color);z-index:1;}.right.jsx-2499243154{right:var(--bolio-ui-button-icon-padding);left:auto;}.icon.jsx-2499243154 svg{background:transparent;height:calc(var(--bolio-ui-button-height) / 2.35);width:calc(var(--bolio-ui-button-height) / 2.35);}.single.jsx-2499243154{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
-}
-ButtonIcon.displayName = 'BolioUIButtonIcon';
-export default ButtonIcon;

package/esm/Button/ButtonLoading.js

@@ -1,15 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import Loading from '../Loading';
-function ButtonLoading(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-412966635" + " " + "btn-loading"
-  }, /*#__PURE__*/React.createElement(Loading, {
-    color: color
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "412966635"
-  }, ".btn-loading.jsx-412966635{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--bolio-ui-button-bg);}"));
-}
-ButtonLoading.displayName = 'BolioUIButtonLoading';
-export default ButtonLoading;

package/esm/Button/styles.js

@@ -1,232 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { addColorAlpha } from '../utils/color';
-export var getButtonGhostColors = function getButtonGhostColors(palette, type) {
-  var colors = {
-    primary: {
-      bg: palette.background,
-      border: palette.primary,
-      color: palette.primary
-    },
-    secondary: {
-      bg: palette.background,
-      border: palette.secondary,
-      color: palette.secondary
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success,
-      color: palette.success
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning,
-      color: palette.warning
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error,
-      color: palette.error
-    },
-    info: {
-      bg: palette.background,
-      border: palette.info,
-      color: palette.info
-    }
-  };
-  return colors[type] || null;
-};
-export var getButtonColors = function getButtonColors(palette, props) {
-  var type = props.type,
-    disabled = props.disabled,
-    ghost = props.ghost;
-  var colors = {
-    "default": {
-      bg: palette.accents_2,
-      border: palette.accents_2,
-      color: palette.foreground
-    },
-    primary: {
-      bg: palette.primary,
-      border: palette.primary,
-      color: '#fff'
-    },
-    secondary: {
-      bg: palette.secondary,
-      border: palette.secondary,
-      color: '#fff'
-    },
-    success: {
-      bg: palette.success,
-      border: palette.success,
-      color: '#fff'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.warning,
-      color: '#fff'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.error,
-      color: '#fff'
-    },
-    info: {
-      bg: palette.info,
-      border: palette.info,
-      color: '#fff'
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    }
-  };
-  if (disabled) return {
-    bg: palette.accents_2,
-    border: palette.accents_2,
-    color: palette.accents_4
-  };
-
-  /**
-   * The '-light' type is the same color as the common type,
-   * only hover's color is different.
-   * e.g.
-   *   Color['success'] === Color['success-light']
-   *   Color['warning'] === Color['warning-light']
-   */
-  var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
-  var defaultColor = colors["default"];
-  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
-};
-export var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
-  var colors = {
-    primary: {
-      bg: palette.primary,
-      border: palette.background,
-      color: 'white'
-    },
-    secondary: {
-      bg: palette.secondary,
-      border: palette.background,
-      color: 'white'
-    },
-    success: {
-      bg: palette.success,
-      border: palette.background,
-      color: 'white'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.background,
-      color: 'white'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.background,
-      color: 'white'
-    },
-    info: {
-      bg: palette.info,
-      border: palette.background,
-      color: 'white'
-    }
-  };
-  var withoutLightType = type.replace('-light', '');
-  return colors[withoutLightType] || null;
-};
-export var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var type = props.type,
-    disabled = props.disabled,
-    loading = props.loading,
-    shadow = props.shadow,
-    ghost = props.ghost;
-  var defaultColor = getButtonColors(palette, props);
-  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    primary: {
-      bg: palette.background,
-      border: palette.primary
-    },
-    secondary: {
-      bg: palette.background,
-      border: palette.secondary
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error
-    },
-    info: {
-      bg: palette.background,
-      border: palette.info
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    },
-    'primary-light': _extends({}, defaultColor, {
-      bg: alphaBackground
-    }),
-    'secondary-light': _extends({}, defaultColor, {
-      bg: alphaBackground
-    }),
-    'success-light': _extends({}, defaultColor, {
-      bg: alphaBackground
-    }),
-    'warning-light': _extends({}, defaultColor, {
-      bg: alphaBackground
-    }),
-    'error-light': _extends({}, defaultColor, {
-      bg: alphaBackground
-    }),
-    'info-light': _extends({}, defaultColor, {
-      bg: alphaBackground
-    })
-  };
-  if (disabled) return {
-    bg: palette.accents_2,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
-  if (loading) return _extends({}, defaultColor, {
-    color: 'transparent'
-  });
-  if (shadow) return defaultColor;
-  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors["default"];
-  return _extends({}, hoverColor, {
-    color: hoverColor.color || hoverColor.border
-  });
-};
-export var getButtonCursor = function getButtonCursor(disabled, loading) {
-  if (disabled) return {
-    cursor: 'not-allowed',
-    events: 'auto'
-  };
-  if (loading) return {
-    cursor: 'default',
-    events: 'none'
-  };
-  return {
-    cursor: 'pointer',
-    events: 'auto'
-  };
-};
-export var getButtonDripColor = function getButtonDripColor(palette, props) {
-  var type = props.type;
-  var isLightHover = type === null || type === void 0 ? void 0 : type.endsWith('light');
-  var hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_3, 0.65);
-};

package/esm/Button/utils.js

@@ -1,45 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import ButtonIcon from './ButtonIcon';
-import useClasses from '../use-classes';
-export var getButtonChildrenWithIcon = function getButtonChildrenWithIcon() {
-  var auto = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  var children = arguments.length > 1 ? arguments[1] : undefined;
-  var icons = arguments.length > 2 ? arguments[2] : undefined;
-  var icon = icons.icon,
-    iconRight = icons.iconRight;
-  var hasIcon = icon || iconRight;
-  var isRight = Boolean(iconRight);
-  var paddingForAutoMode = auto ? "calc(var(--bolio-ui-button-height) / 2 + var(--bolio-ui-button-icon-padding) * .5)" : 0;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var classes = useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
-    className: "text"
-  }, children);
-  if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/React.createElement(ButtonIcon, {
-      isRight: isRight,
-      isSingle: true
-    }, hasIcon);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
-    isRight: isRight
-  }, hasIcon), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3568181479",
-    dynamic: [paddingForAutoMode, paddingForAutoMode]
-  }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
-};
-export var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
-  if (!config.isButtonGroup) return props;
-  return _extends({}, props, {
-    auto: true,
-    shadow: false,
-    ghost: config.ghost || props.ghost,
-    type: config.type || props.type,
-    disabled: config.disabled || props.disabled
-  });
-};

package/esm/ButtonDropdown/ButtonDropdown.js

@@ -1,107 +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", "type", "auto", "className", "disabled", "loading", "icon"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
-import useClickAway from '../utils/use-click-away';
-import { getColor } from './styles';
-import ButtonDropdownIcon from './Icon';
-import ButtonDropdownItem from './ButtonDropdownItem';
-import { ButtonDropdownContext } from './ButtonDropdownContext';
-import { pickChild, pickChildByProps } from '../utils/collections';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var stopPropagation = function stopPropagation(event) {
-  event.stopPropagation();
-  event.nativeEvent.stopImmediatePropagation();
-};
-var ButtonDropdownComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$auto = _ref.auto,
-    auto = _ref$auto === void 0 ? false : _ref$auto,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    icon = _ref.icon,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var innerRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return innerRef.current;
-  });
-  var theme = useTheme();
-  var colors = getColor(theme.palette, type);
-  var itemChildren = pickChild(children, ButtonDropdownItem)[1];
-  var _pickChildByProps = pickChildByProps(itemChildren, 'main', true),
-    _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
-    itemChildrenWithoutMain = _pickChildByProps2[0],
-    mainItemChildren = _pickChildByProps2[1];
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var clickHandler = useCallback(function (event) {
-    event.preventDefault();
-    stopPropagation(event);
-    if (disabled || loading) return;
-    setVisible(!visible);
-  }, [disabled, loading, visible]);
-  var initialValue = {
-    type: type,
-    auto: auto,
-    disabled: disabled,
-    loading: loading
-  };
-  var bgColor = useMemo(function () {
-    if (disabled || loading) return theme.palette.accents_2;
-    return visible ? colors.hoverBgColor : colors.bgColor;
-  }, [disabled, loading, theme.palette.accents_2, visible, colors.hoverBgColor, colors.bgColor]);
-  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
-    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
-  useClickAway(innerRef, function () {
-    return setVisible(false);
-  });
-  return /*#__PURE__*/React.createElement(ButtonDropdownContext.Provider, {
-    value: initialValue
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    ref: innerRef,
-    onClick: stopPropagation
-  }, props, {
-    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || useClasses('btn-dropdown', className) || "")
-  }), mainItemChildren, /*#__PURE__*/React.createElement("details", {
-    open: visible,
-    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
-  }, /*#__PURE__*/React.createElement("summary", {
-    "aria-label": "More options",
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-box"
-  }, icon ? /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: disabled || loading ? theme.palette.error : colors.color,
-      height: SCALES.height(2.5),
-      width: SCALES.height(2.5)
-    },
-    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-icon"
-  }, icon) : /*#__PURE__*/React.createElement(ButtonDropdownIcon, {
-    color: disabled || loading ? theme.palette.accents_4 : colors.color,
-    height: SCALES.height(2.5)
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
-  }, itemChildrenWithoutMain)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3951357131",
-    dynamic: [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]
-  }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border-radius:".concat(theme.layout.radius, ";--bolio-ui-dropdown-height:").concat(SCALES.height(2.5), ";--bolio-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--bolio-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--bolio-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;width:auto;padding:0 1px;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transform:translateY(").concat(theme.layout.gapHalf, ");-ms-transform:translateY(").concat(theme.layout.gapHalf, ");transform:translateY(").concat(theme.layout.gapHalf, ");background-color:").concat(theme.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"))));
-});
-ButtonDropdownComponent.displayName = 'BolioUIButtonDropdown';
-var ButtonDropdown = withScale(ButtonDropdownComponent);
-export default ButtonDropdown;

package/esm/ButtonDropdown/ButtonDropdownContext.js

@@ -1,11 +0,0 @@
-import React from 'react';
-var defaultContext = {
-  type: 'default',
-  auto: false,
-  disabled: false,
-  loading: false
-};
-export var ButtonDropdownContext = /*#__PURE__*/React.createContext(defaultContext);
-export var useButtonDropdown = function useButtonDropdown() {
-  return React.useContext(ButtonDropdownContext);
-};