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

package/esm/Themes/Presets/Default.js

@@ -1,67 +0,0 @@
-import { defaultFont, defaultBreakpoints, defaultLayout } from './Shared';
-export var palette = {
-  background: '#fff',
-  foreground: '#000',
-  accents_1: '#fafafa',
-  accents_2: '#eaeaea',
-  accents_3: '#999',
-  accents_4: '#888',
-  accents_5: '#666',
-  accents_6: '#444',
-  accents_7: '#333',
-  accents_8: '#111',
-  selection: 'rgba(206,228,254, 0.5)',
-  code: '#C25FFF',
-  border: '#eaeaea',
-  primary: '#0072F6',
-  primaryLight: '#CEE4FF',
-  primaryLighter: '#96C1F3',
-  primaryDark: '#00254E',
-  secondary: '#7828C9',
-  secondaryLight: '#EADCF9',
-  secondaryLighter: '#D1B1F1',
-  secondaryDark: '#290E45',
-  error: '#F31261',
-  errorLight: '#FDD8E6',
-  errorLighter: '#FAA8C6',
-  errorDark: '#4E041F',
-  success: '#17C965',
-  successLight: '#DAFBE9',
-  successLighter: '#ADF5CD',
-  successDark: '#06371C',
-  warning: '#F5A525',
-  warningLight: '#FDEFD9',
-  warningLighter: '#FBDBA8',
-  warningDark: '#4E3105',
-  info: '#06B7DC',
-  infoLight: '#D7F8FF',
-  infoLighter: '#A5EEFE',
-  infoDark: '#053B49',
-  purple: '#f81ce5',
-  alert: '#ff0080',
-  link: '#0070f3',
-  pre: '#363450'
-};
-export var expressiveness = {
-  linkStyle: 'none',
-  linkHoverStyle: 'none',
-  dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
-  scrollerStart: 'rgba(255, 255, 255, 1)',
-  scrollerEnd: 'rgba(255, 255, 255, 0)',
-  shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',
-  shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)',
-  shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)',
-  portalOpacity: 0.25
-};
-export var font = defaultFont;
-export var breakpoints = defaultBreakpoints;
-export var layout = defaultLayout;
-export var themes = {
-  type: 'light',
-  font: font,
-  layout: layout,
-  palette: palette,
-  breakpoints: breakpoints,
-  expressiveness: expressiveness
-};
-export default themes;

package/esm/Themes/Presets/Shared.js

@@ -1,42 +0,0 @@
-export var defaultFont = {
-  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
-  prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
-};
-export var defaultBreakpoints = {
-  xs: {
-    min: '0',
-    max: '650px'
-  },
-  sm: {
-    min: '650px',
-    max: '900px'
-  },
-  md: {
-    min: '900px',
-    max: '1280px'
-  },
-  lg: {
-    min: '1280px',
-    max: '1920px'
-  },
-  xl: {
-    min: '1920px',
-    max: '10000px'
-  }
-};
-export var defaultLayout = {
-  gap: '16pt',
-  gapNegative: '-16pt',
-  gapHalf: '8pt',
-  gapHalfNegative: '-8pt',
-  gapQuarter: '4pt',
-  gapQuarterNegative: '-4pt',
-  pageMargin: '16pt',
-  pageWidth: '900pt',
-  pageWidthWithMargin: '930pt',
-  breakpointMobile: defaultBreakpoints.xs.max,
-  breakpointTablet: defaultBreakpoints.sm.max,
-  radius: '10px',
-  unit: '16px'
-};

package/esm/Themes/Presets/index.js

@@ -1 +0,0 @@
-export {};

package/esm/Themes/Themes.js

@@ -1,76 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import lightTheme from './Presets/Default';
-import darkTheme from './Presets/Dark';
-export var isObject = function isObject(target) {
-  return target && _typeof(target) === 'object';
-};
-export var deepDuplicable = function deepDuplicable(source, target) {
-  if (!isObject(target) || !isObject(source)) return source;
-  var sourceKeys = Object.keys(source);
-  var result = {};
-  for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
-    var key = _sourceKeys[_i];
-    var sourceValue = source[key];
-    var targetValue = target[key];
-    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
-      result[key] = targetValue.concat(sourceValue);
-    } else if (isObject(sourceValue) && isObject(targetValue)) {
-      result[key] = deepDuplicable(sourceValue, _extends({}, targetValue));
-    } else if (targetValue) {
-      result[key] = targetValue;
-    } else {
-      result[key] = sourceValue;
-    }
-  }
-  return result;
-};
-var getPresets = function getPresets() {
-  return [lightTheme, darkTheme];
-};
-var getPresetStaticTheme = function getPresetStaticTheme() {
-  return lightTheme;
-};
-var isAvailableThemeType = function isAvailableThemeType(type) {
-  if (!type) return false;
-  var presetThemes = getPresets();
-  var hasType = presetThemes.find(function (theme) {
-    return theme.type === type;
-  });
-  return !hasType;
-};
-var isPresetTheme = function isPresetTheme(themeOrType) {
-  if (!themeOrType) return false;
-  var isType = typeof themeOrType === 'string';
-  var type = isType ? themeOrType : themeOrType.type;
-  return !isAvailableThemeType(type);
-};
-var hasUserCustomTheme = function hasUserCustomTheme() {
-  var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return !!themes.find(function (item) {
-    return isAvailableThemeType(item.type);
-  });
-};
-var create = function create(base, custom) {
-  if (!isAvailableThemeType(custom.type)) {
-    throw new Error('Duplicate or unavailable theme type');
-  }
-  return deepDuplicable(base, custom);
-};
-var createFromDark = function createFromDark(custom) {
-  return create(darkTheme, custom);
-};
-var createFromLight = function createFromLight(custom) {
-  return create(lightTheme, custom);
-};
-var Themes = {
-  isPresetTheme: isPresetTheme,
-  isAvailableThemeType: isAvailableThemeType,
-  hasUserCustomTheme: hasUserCustomTheme,
-  getPresets: getPresets,
-  getPresetStaticTheme: getPresetStaticTheme,
-  create: create,
-  createFromDark: createFromDark,
-  createFromLight: createFromLight
-};
-export default Themes;

package/esm/Toggle/Toggle.js

@@ -1,80 +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 = ["initialChecked", "checked", "disabled", "onChange", "type", "className", "aria-label", "aria-labelledby"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
-import { getColors } from './styles';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var ToggleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$initialChecked = _ref.initialChecked,
-    initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
-    checked = _ref.checked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onChange = _ref.onChange,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    ariaLabel = _ref['aria-label'],
-    ariaLabelledby = _ref['aria-labelledby'],
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useState = useState(initialChecked),
-    _useState2 = _slicedToArray(_useState, 2),
-    selfChecked = _useState2[0],
-    setSelfChecked = _useState2[1];
-  var classes = useClasses('toggle', {
-    checked: selfChecked,
-    disabled: disabled
-  });
-  var changeHandle = useCallback(function (ev) {
-    if (disabled) return;
-    var selfEvent = {
-      target: {
-        checked: !selfChecked
-      },
-      stopPropagation: ev.stopPropagation,
-      preventDefault: ev.preventDefault,
-      nativeEvent: ev
-    };
-    setSelfChecked(!selfChecked);
-    onChange && onChange(selfEvent);
-  }, [disabled, selfChecked, onChange]);
-  var _useMemo = useMemo(function () {
-      return getColors(theme.palette, type);
-    }, [theme.palette, type]),
-    bg = _useMemo.bg;
-  useEffect(function () {
-    if (checked === undefined) return;
-    setSelfChecked(checked);
-  }, [checked]);
-  return /*#__PURE__*/React.createElement("label", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
-  }), /*#__PURE__*/React.createElement("input", {
-    ref: ref,
-    type: "checkbox",
-    role: "switch",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    disabled: disabled,
-    checked: selfChecked,
-    onChange: changeHandle,
-    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3715085408",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
-  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(1), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").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{overflow:hidden;height:0;margin:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}input.__jsx-style-dynamic-selector:focus-visible+.toggle.__jsx-style-dynamic-selector{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:2px;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}")));
-});
-ToggleComponent.displayName = 'BolioUIToggle';
-var Toggle = withScale(ToggleComponent);
-export default Toggle;

package/esm/Toggle/styles.js

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

package/esm/Tooltip/Tooltip.js

@@ -1,136 +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", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import TooltipContent from './TooltipContent';
-import useClickAway from '../utils/use-click-away';
-import { withScale } from '../use-scale';
-import { getRect } from './helper';
-import useClasses from '../use-classes';
-var TooltipComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$initialVisible = _ref.initialVisible,
-    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? '' : _ref$text,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 12 : _ref$offset,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
-    _ref$portalClassName = _ref.portalClassName,
-    portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
-    _ref$enterDelay = _ref.enterDelay,
-    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    _ref$leaveDelay = _ref.leaveDelay,
-    leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
-    _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$onVisibleChange = _ref.onVisibleChange,
-    onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
-    _ref$hideArrow = _ref.hideArrow,
-    hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
-    customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var timer = useRef();
-  var innerRef = useRef(null);
-  var tooltipId = useId();
-  useImperativeHandle(ref, function () {
-    return innerRef.current;
-  });
-  var _useState = useState(initialVisible),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var iconOffset = useMemo(function () {
-    if (!innerRef.current) return {
-      x: '0.75em',
-      y: '0.75em'
-    };
-    var rect = getRect(innerRef);
-    return {
-      x: "".concat(rect.width ? rect.width / 2 : 0, "px"),
-      y: "".concat(rect.height ? rect.height / 2 : 0, "px")
-    };
-  }, [innerRef.current]);
-  var contentProps = {
-    type: type,
-    visible: visible,
-    offset: offset,
-    placement: placement,
-    hideArrow: hideArrow,
-    iconOffset: iconOffset,
-    parent: innerRef,
-    className: portalClassName,
-    id: tooltipId,
-    role: trigger === 'hover' ? 'tooltip' : undefined
-  };
-  var changeVisible = function changeVisible(nextState) {
-    var clear = function clear() {
-      clearTimeout(timer.current);
-      timer.current = undefined;
-    };
-    var handler = function handler(nextState) {
-      setVisible(nextState);
-      onVisibleChange(nextState);
-      clear();
-    };
-    clear();
-    if (nextState) {
-      timer.current = window.setTimeout(function () {
-        return handler(true);
-      }, enterDelay);
-      return;
-    }
-    var leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay;
-    timer.current = window.setTimeout(function () {
-      return handler(false);
-    }, leaveDelayWithoutClick);
-  };
-  var mouseEventHandler = function mouseEventHandler(next) {
-    return trigger === 'hover' && changeVisible(next);
-  };
-  var clickEventHandler = function clickEventHandler() {
-    return trigger === 'click' && changeVisible(!visible);
-  };
-  var keyDownHandler = function keyDownHandler(event) {
-    if (event.key === 'Escape' && visible) changeVisible(false);
-  };
-  useClickAway(innerRef, function () {
-    return trigger === 'click' && changeVisible(false);
-  });
-  useEffect(function () {
-    if (customVisible === undefined) return;
-    changeVisible(customVisible);
-  }, [customVisible]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: innerRef,
-    onClick: clickEventHandler,
-    onMouseEnter: function onMouseEnter() {
-      return mouseEventHandler(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return mouseEventHandler(false);
-    },
-    onFocus: function onFocus() {
-      return mouseEventHandler(true);
-    },
-    onBlur: function onBlur() {
-      return mouseEventHandler(false);
-    },
-    onKeyDown: keyDownHandler,
-    "aria-describedby": trigger === 'hover' && visible ? tooltipId : undefined
-  }, props, {
-    className: "jsx-1653875468" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
-  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1653875468"
-  }, ".tooltip.jsx-1653875468{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
-});
-TooltipComponent.displayName = 'BolioUITooltip';
-var Tooltip = withScale(TooltipComponent);
-export default Tooltip;

package/esm/Tooltip/TooltipContent.js

@@ -1,77 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import useTheme from '../use-theme';
-import usePortal from '../utils/use-portal';
-import useResize from '../utils/use-resize';
-import CssTransition from '../Shared/css-transition';
-import useClickAnyWhere from '../utils/use-click-anywhere';
-import { getColors } from './styles';
-import { getPosition, defaultTooltipPosition } from './placement';
-import TooltipIcon from './TooltipIcon';
-import useScale from '../use-scale';
-import { getRect } from './helper';
-import useClasses from '../use-classes';
-var TooltipContent = function TooltipContent(_ref) {
-  var children = _ref.children,
-    parent = _ref.parent,
-    visible = _ref.visible,
-    offset = _ref.offset,
-    iconOffset = _ref.iconOffset,
-    placement = _ref.placement,
-    type = _ref.type,
-    className = _ref.className,
-    hideArrow = _ref.hideArrow,
-    id = _ref.id,
-    role = _ref.role;
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var el = usePortal('tooltip');
-  var selfRef = useRef(null);
-  var _useState = useState(defaultTooltipPosition),
-    _useState2 = _slicedToArray(_useState, 2),
-    rect = _useState2[0],
-    setRect = _useState2[1];
-  var colors = useMemo(function () {
-    return getColors(type, theme.palette);
-  }, [type, theme.palette]);
-  var hasShadow = type === 'default';
-  var classes = useClasses('tooltip-content', className);
-  if (!parent) return null;
-  var updateRect = function updateRect() {
-    var position = getPosition(placement, getRect(parent), offset);
-    setRect(position);
-  };
-  useResize(updateRect);
-  useClickAnyWhere(function () {
-    return updateRect();
-  });
-  useEffect(function () {
-    updateRect();
-  }, [visible]);
-  var preventHandler = function preventHandler(event) {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-  };
-  if (!el) return null;
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CssTransition, {
-    visible: visible
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    role: role,
-    ref: selfRef,
-    onClick: preventHandler,
-    className: _JSXStyle.dynamic([["3734161695", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3734161695", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + "inner"
-  }, !hideArrow && /*#__PURE__*/React.createElement(TooltipIcon, {
-    placement: placement,
-    shadow: hasShadow
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3734161695",
-    dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]
-  }, ".tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:".concat(iconOffset.x, ";--tooltip-icon-offset-y:").concat(iconOffset.y, ";--tooltip-content-bg:").concat(colors.bgColor, ";box-sizing:border-box;position:absolute;top:").concat(rect.top, ";left:").concat(rect.left, ";-webkit-transform:").concat(rect.transform, ";-ms-transform:").concat(rect.transform, ";transform:").concat(rect.transform, ";background-color:var(--tooltip-content-bg);color:").concat(colors.color, ";border-radius:").concat(theme.layout.radius, ";padding:0;z-index:1000;box-shadow:").concat(hasShadow ? theme.expressiveness.shadowMedium : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:").concat(SCALES.font(1), ";padding:").concat(SCALES.pt(0.65), " ").concat(SCALES.pr(0.9), " ").concat(SCALES.pb(0.65), " ").concat(SCALES.pl(0.9), ";height:100%;}")))), el);
-};
-export default TooltipContent;

package/esm/Tooltip/TooltipIcon.js

@@ -1,28 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import { getIconPosition } from './placement';
-import useTheme from '../use-theme';
-var TooltipIcon = function TooltipIcon(_ref) {
-  var placement = _ref.placement,
-    shadow = _ref.shadow;
-  var theme = useTheme();
-  var _useMemo = useMemo(function () {
-      return getIconPosition(placement, 'var(--tooltip-icon-offset-x)', 'var(--tooltip-icon-offset-y)');
-    }, [placement]),
-    transform = _useMemo.transform,
-    top = _useMemo.top,
-    left = _useMemo.left,
-    right = _useMemo.right,
-    bottom = _useMemo.bottom;
-  var bgColorWithDark = useMemo(function () {
-    if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)';
-    return theme.palette.accents_2;
-  }, [shadow, theme.type, theme.palette.accents_2]);
-  return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2440507693", [bgColorWithDark, left, top, right, bottom, transform]]])
-  }, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2440507693",
-    dynamic: [bgColorWithDark, left, top, right, bottom, transform]
-  }, "span.__jsx-style-dynamic-selector{width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent ".concat(bgColorWithDark, " transparent transparent;position:absolute;left:").concat(left, ";top:").concat(top, ";right:").concat(right, ";bottom:").concat(bottom, ";-webkit-transform:").concat(transform, ";-ms-transform:").concat(transform, ";transform:").concat(transform, ";}")));
-};
-export default TooltipIcon;

package/esm/Tooltip/helper.js

@@ -1,21 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-var defaultRect = {
-  top: -1000,
-  left: -1000,
-  right: -1000,
-  bottom: -1000,
-  width: 0,
-  height: 0
-};
-export var getRect = function getRect(ref) {
-  if (!ref || !ref.current) return defaultRect;
-  var rect = ref.current.getBoundingClientRect();
-  return _extends({}, rect, {
-    width: rect.width || rect.right - rect.left,
-    height: rect.height || rect.bottom - rect.top,
-    top: rect.top + document.documentElement.scrollTop,
-    bottom: rect.bottom + document.documentElement.scrollTop,
-    left: rect.left + document.documentElement.scrollLeft,
-    right: rect.right + document.documentElement.scrollLeft
-  });
-};