@bolio-ui/core 1.0.4 → 1.0.5

package/esm/themes/presets/dark.js

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

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: '#cee4fe',
-  code: '#C25FFF',
-  border: '#eaeaea',
-  primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
-  primaryDark: '#00254E',
-  secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
-  secondaryLight: '#EADCF9',
-  secondaryDark: '#290E45',
-  error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
-  errorDark: '#4E041F',
-  success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
-  successDark: '#06371C',
-  warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
-  warningDark: '#4E3105',
-  info: '#06B7DC',
-  infoLighter: '#A5EEFE',
-  infoLight: '#D7F8FF',
-  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/themes.js

@@ -1,89 +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/index.js

@@ -1,2 +0,0 @@
-import Toggle from './toggle';
-export default Toggle;

package/esm/toggle/stories.js

@@ -1,55 +0,0 @@
-import Toggle from '.';
-import Grid from '../grid';
-export default {
-  title: 'Data Entry/Toggle',
-  component: Toggle
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    initialChecked: true
-  })));
-};
-export var Type = function Type() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    scale: 2,
-    initialChecked: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    type: "primary",
-    scale: 2,
-    initialChecked: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    type: "secondary",
-    scale: 2,
-    initialChecked: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    type: "success",
-    scale: 2,
-    initialChecked: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    type: "warning",
-    scale: 2,
-    initialChecked: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    type: "error",
-    scale: 2,
-    initialChecked: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    type: "info",
-    scale: 2,
-    initialChecked: true
-  })));
-};
-export var Disabled = function Disabled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    disabled: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
-    initialChecked: true,
-    disabled: true
-  })));
-};

package/esm/tooltip/index.js

@@ -1,2 +0,0 @@
-import Tooltip from './tooltip';
-export default Tooltip;

package/esm/tooltip/stories.js

@@ -1,183 +0,0 @@
-import Tooltip from '.';
-import Grid from '../grid';
-import Button from '../button';
-import Link from '../link';
-import Code from '../code';
-import Text from '../text';
-import Badge from '../badge';
-export default {
-  title: 'Data Display/Tooltip',
-  component: Tooltip
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: 'Push to Git and your website is live.'
-  }, "Tooltip")));
-};
-export var Trigger = function Trigger() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: 'Push to Git and your website is live.',
-    trigger: "click",
-    type: "dark"
-  }, "Click me")));
-};
-export var WithComponents = function WithComponents() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: 'Push to Git and your website is live.',
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 2
-  }, "Button"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: 'Push to Git and your website is live.',
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Badge, null, "1000+"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: 'Push to Git and your website is live.',
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: "#",
-    color: true
-  }, "Hyperlink"))));
-};
-export var CustomContent = function CustomContent() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: /*#__PURE__*/React.createElement(React.Fragment, null, "Perfect for working with a ", /*#__PURE__*/React.createElement(Code, null, "CMS"), ".")
-  }, "Top")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "Perfect"), " for working with a CMS."),
-    placement: "bottom"
-  }, "Bottom")));
-};
-export var Types = function Types() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Perfect for working with a CMS.",
-    type: "dark"
-  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Perfect for working with a CMS.",
-    type: "success"
-  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Perfect for working with a CMS.",
-    type: "warning"
-  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Perfect for working with a CMS.",
-    type: "error"
-  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Perfect for working with a CMS.",
-    type: "secondary"
-  }, "Secondary")));
-};
-export var Variants = function Variants() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Push to Git and your website is live.",
-    type: "lite"
-  }, "Lite")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Push to Git and your website is live.",
-    hideArrow: true
-  }, "No Arrow")));
-};
-export var Placements = function Placements() {
-  var text = 'HTTP is stateless, but not sessionless';
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    justify: "center",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    justify: "flex-end"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "topStart",
-    type: "dark"
-  }, "topStart")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "top",
-    type: "dark"
-  }, "top")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 4
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "topEnd",
-    type: "dark"
-  }, "topEnd")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3,
-    justify: "flex-end"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "leftStart",
-    type: "dark"
-  }, "leftStart")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "rightStart",
-    type: "dark"
-  }, "rightStart")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3,
-    justify: "flex-end"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "left",
-    type: "dark"
-  }, "left")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "right",
-    type: "dark"
-  }, "right")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3,
-    justify: "flex-end"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "leftEnd",
-    type: "dark"
-  }, "leftEnd")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 6
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 3
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "rightEnd",
-    type: "dark"
-  }, "rightEnd")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    justify: "flex-end"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "bottomStart",
-    type: "dark"
-  }, "bottomStart")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "bottom",
-    type: "dark"
-  }, "bottom")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 4
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: text,
-    placement: "bottomEnd",
-    type: "dark"
-  }, "bottomEnd")));
-};

package/esm/tooltip/tooltip-content.js

@@ -1,83 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
-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 './tooltip-icon';
-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;
-  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", {
-    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/tooltip.js

@@ -1,132 +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.es.js";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import TooltipContent from './tooltip-content';
-import useClickAway from '../utils/use-click-away';
-import { withScale } from '../use-scale';
-import { getRect } from './helper';
-import useClasses from '../use-classes';
-
-function TooltipComponent(_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 ref = useRef(null);
-
-  var _useState = useState(initialVisible),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var iconOffset = useMemo(function () {
-    if (!(ref !== null && ref !== void 0 && ref.current)) return {
-      x: '0.75em',
-      y: '0.75em'
-    };
-    var rect = getRect(ref);
-    return {
-      x: "".concat(rect.width ? rect.width / 2 : 0, "px"),
-      y: "".concat(rect.height ? rect.height / 2 : 0, "px")
-    };
-  }, [ref === null || ref === void 0 ? void 0 : ref.current]);
-  var contentProps = {
-    type: type,
-    visible: visible,
-    offset: offset,
-    placement: placement,
-    hideArrow: hideArrow,
-    iconOffset: iconOffset,
-    parent: ref,
-    className: portalClassName
-  };
-
-  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);
-  };
-
-  useClickAway(ref, function () {
-    return trigger === 'click' && changeVisible(false);
-  });
-  useEffect(function () {
-    if (customVisible === undefined) return;
-    changeVisible(customVisible);
-  }, [customVisible]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    onClick: clickEventHandler,
-    onMouseEnter: function onMouseEnter() {
-      return mouseEventHandler(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return mouseEventHandler(false);
-    }
-  }, props, {
-    className: "jsx-418573366" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
-  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "418573366"
-  }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
-}
-
-TooltipComponent.displayName = 'BolioUITooltip';
-var Tooltip = withScale(TooltipComponent);
-export default Tooltip;