@commercetools-uikit/tooltip 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,230 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# Tooltip
+
+## Description
+
+Tooltips display informative text when users hover over or focus on an element.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/tooltip
+```
+
+```
+npm --save install @commercetools-uikit/tooltip
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import styled from '@emotion/styled';
+import Tooltip from '@commercetools-uikit/tooltip';
+
+/* 1. Standard example */
+const ExampleStandard = () => (
+  <Tooltip
+    placement="left"
+    title="If you buy a pizza, you will also get a free ice cream :)"
+  >
+    <button onClick={() => {}}>Submit</button>
+  </Tooltip>
+);
+
+/**
+ * 2. Working with disabled child elements
+ *
+ * When you use a tooltip with a disabled element, you should define the
+ * style `pointer-events: none` to the disabled element to stop it from capturing events.
+ * The Button components from UIKit already support this functionality.
+ */
+const ExampleWithDisabledElements = () => (
+  <Tooltip
+    placement="left"
+    title="You do not have permission to delete the database"
+  >
+    <button disabled onClick={() => {}} style={{ pointerEvents: 'none' }}>
+      Delete production database
+    </button>
+  </Tooltip>
+);
+
+/**
+ * 3. Customizing the wrapper
+ *
+ * The tooltip applies event listeners (`onMouseOver`, `onMouseLeave`, `onFocus`,
+ * and `onBlur`) to a wrapping `div` component around the children element.
+ * By default, this wrapper is displayed with style `inline-block`.
+ * If you want to customize this behaviour, then you can pass in a custom element.
+ * Be sure to use `React.forwardRef`, as we need the to pass the ref to the wrapper.
+ */
+const Wrapper = forwardRef((props, ref) => (
+  <div ref={ref} style={{ display: 'block' }} {...props}>
+    {props.children}
+  </div>
+));
+Wrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+const FullWidthButton = styled.button`
+  display: block;
+  width: 100%;
+`;
+const ExampleWithCustomWrapper = () => (
+  <Tooltip title="Delete" components={{ WrapperComponent: Wrapper }}>
+    <FullWidthButton>Submit</FullWidthButton>
+  </Tooltip>
+);
+
+/**
+ * 4. Customizing the tooltip body
+ *
+ * You can customize the look and feel of the tooltip body by passing in a custom `BodyComponent`.
+ */
+const Body = styled.div`
+  color: red;
+`;
+const ExampleWithCustomBody = () => (
+  <Tooltip title="Delete" components={{ BodyComponent: Body }}>
+    <button>Submit</button>
+  </Tooltip>
+);
+
+/**
+ * 5. Customizing where the portal is rendered
+ *
+ * When you are dealing with virtualized components, it can be useful to render
+ * the tooltip into another part of the document.
+ * You can define a `TooltipWrapperComponent` to do this.
+ */
+const Portal = (props) => ReactDOM.createPortal(props.children, document.body);
+const ExampleWithCustomPortal = () => (
+  <Tooltip title="Delete" components={{ TooltipWrapperComponent: Portal }}>
+    <button>Submit</button>
+  </Tooltip>
+);
+
+/**
+ * 6. Conditionally displaying tooltips
+ *
+ * There may be cases when you only want to enable the display of a tooltip under
+ * a certain condition. In these cases, you may want to use the `off` prop.
+ * In the following example, the tooltip text only appears on hover when the button is disabled.
+ */
+const ExampleWithConditionals = (props) => (
+  <Tooltip
+    off={props.isDisabled}
+    title="You do not have permission to perform this action"
+  >
+    <button disabled={props.isDisabled}>Submit</button>
+  </Tooltip>
+);
+ExampleWithConditionals.propTypes = {
+  isDisabled: PropTypes.bool,
+};
+
+/**
+ * 7. Fine-tuning underlying Popper.js behavior
+ *
+ * This component uses [Popper.js](https://popper.js.org/) under the hood.
+ * Popper provides a way to adjust how tooltip element should behave, by providing
+ * a [set of `modifiers`](https://popper.js.org/popper-documentation.html#modifiers).
+ * For instance, forcing tooltip to stay in the original placement and not to try
+ * flipping when it's getting out of boundaries, can be implemented as following:
+ */
+const ExampleWithCustomPopperBehavior = (props) => (
+  <Tooltip
+    placement="left"
+    title="I will always be on the left side"
+    modifiers={{
+      preventOverflow: {
+        enabled: false,
+      },
+      flip: {
+        enabled: false,
+      },
+    }}
+  >
+    <button disabled={props.isDisabled}>Submit</button>
+  </Tooltip>
+);
+ExampleWithCustomPopperBehavior.propTypes = {
+  isDisabled: PropTypes.bool,
+};
+
+export {
+  ExampleStandard,
+  ExampleWithDisabledElements,
+  ExampleWithCustomWrapper,
+  ExampleWithCustomBody,
+  ExampleWithCustomPortal,
+  ExampleWithConditionals,
+  ExampleWithCustomPopperBehavior,
+};
+```
+
+## Properties
+
+| Props                  | Type                                                                                                                                                                              | Required | Default   | Description                                                                                                                                                                                              |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`             | `ReactElement`                                                                                                                                                                    |    ✅    |           |                                                                                                                                                                                                          |
+| `closeAfter`           | `number`                                                                                                                                                                          |          | `0`       | Delay (in milliseconds) between the end of the user interaction, and the closing of the tooltip.                                                                                                         |
+| `styles`               | `Record`                                                                                                                                                                          |          |           | Custom css-in-js object styles for the tooltip body.                                                                                                                                                     |
+| `off`                  | `boolean`                                                                                                                                                                         |          | `false`   | Determines if the tooltip should not appear.                                                                                                                                                             |
+| `id`                   | `string`                                                                                                                                                                          |          |           | An identifier for the tooltip, used for `aria-describedby`.                                                                                                                                              |
+| `onClose`              | `Function`<br/>[See signature.](#signature-onClose)                                                                                                                               |          |           | A callback function, called when the tooltip is closing.                                                                                                                                                 |
+| `onOpen`               | `Function`<br/>[See signature.](#signature-onOpen)                                                                                                                                |          |           | A callback function, called when the tooltip is opening.                                                                                                                                                 |
+| `isOpen`               | `boolean`                                                                                                                                                                         |          |           |                                                                                                                                                                                                          |
+| `placement`            | `union`<br/>Possible values:<br/>`, 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'` |          | `'top'`   | How the tooltip is positioned relative to the child element.                                                                                                                                             |
+| `title`                | `string`                                                                                                                                                                          |    ✅    |           | The message to show in the tooltip.                                                                                                                                                                      |
+| `modifiers`            | `Modifiers`                                                                                                                                                                       |          |           | Provides a way to fine-tune an appearance of underlying Popper tooltip element. For more information, please check [Popper.js documentation](https://popper.js.org/popper-documentation.html#modifiers). |
+| `components`           | `Object`<br/>[See signature.](#signature-components)                                                                                                                              |          |           | Customize the appearance of certain elements of the tooltip.                                                                                                                                             |
+| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'`                                                                       |          | `'scale'` | Horizontal size limit of the tooltip.                                                                                                                                                                    |
+
+## Signatures
+
+### Signature `onClose`
+
+```ts
+(e?: ChangeEvent | FocusEvent) => void
+```
+
+### Signature `onOpen`
+
+```ts
+(e?: ChangeEvent | FocusEvent) => void
+```
+
+### Signature `components`
+
+```ts
+{
+  /**
+   * The component rendered as the tooltip body.
+   */
+  BodyComponent?: ComponentType;
+  /**
+   * Where the tooltip should be rendered. This can be useful to render the tooltip into another part of the document, using React portal.
+   */
+  TooltipWrapperComponent?: ComponentType;
+  /**
+   * A custom component wrapper for the tooltip.
+   */
+  WrapperComponent?: ComponentType;
+}
+```

package/dist/commercetools-uikit-tooltip.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-tooltip.cjs.dev.js

@@ -0,0 +1,329 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react$1 = require('@emotion/react');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _pt = require('prop-types');
+var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react = require('react');
+var reactIs = require('react-is');
+var isNil = require('lodash/isNil');
+var usePopper = require('use-popper');
+var hooks = require('@commercetools-uikit/hooks');
+var utils = require('@commercetools-uikit/utils');
+var _styled = require('@emotion/styled/base');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var isNil__default = /*#__PURE__*/_interopDefault(isNil);
+var usePopper__default = /*#__PURE__*/_interopDefault(usePopper);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var getOffsetMargin = function getOffsetMargin(_ref) {
+  var placement = _ref.placement;
+  var position = placement && placement.split('-')[0] || '';
+
+  switch (position) {
+    case 'left':
+    case 'right':
+      return "0 ".concat(designSystem.customProperties.spacingXs);
+
+    case 'top':
+    case 'bottom':
+      return "".concat(designSystem.customProperties.spacingXs, " 0");
+
+    default:
+      return '';
+  }
+};
+
+var Body = _styled__default['default']("div", process.env.NODE_ENV === "production" ? {
+  target: "e14le4p1"
+} : {
+  target: "e14le4p1",
+  label: "Body"
+})("font-family:inherit;border-radius:", designSystem.customProperties.borderRadius6, ";padding:", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingS, ";border:'none';box-shadow:", designSystem.customProperties.shadow15, ";font-size:0.857rem;opacity:0.95;color:", designSystem.customProperties.colorSurface, ";background-color:", designSystem.customProperties.colorAccent, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1COEIiLCJmaWxlIjoidG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDU1NQcm9wZXJ0aWVzIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRUb29sdGlwUHJvcHMgfSBmcm9tICcuL3Rvb2x0aXAnO1xuXG5jb25zdCBnZXRPZmZzZXRNYXJnaW4gPSAoeyBwbGFjZW1lbnQgfTogeyBwbGFjZW1lbnQ6IHN0cmluZyB9KSA9PiB7XG4gIGNvbnN0IHBvc2l0aW9uID0gKHBsYWNlbWVudCAmJiBwbGFjZW1lbnQuc3BsaXQoJy0nKVswXSkgfHwgJyc7XG4gIHN3aXRjaCAocG9zaXRpb24pIHtcbiAgICBjYXNlICdsZWZ0JzpcbiAgICBjYXNlICdyaWdodCc6XG4gICAgICByZXR1cm4gYDAgJHt2YXJzLnNwYWNpbmdYc31gO1xuICAgIGNhc2UgJ3RvcCc6XG4gICAgY2FzZSAnYm90dG9tJzpcbiAgICAgIHJldHVybiBgJHt2YXJzLnNwYWNpbmdYc30gMGA7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiAnJztcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IEJvZHkgPSBzdHlsZWQuZGl2YFxuICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgYm9yZGVyLXJhZGl1czogJHt2YXJzLmJvcmRlclJhZGl1czZ9O1xuICBwYWRkaW5nOiAke3ZhcnMuc3BhY2luZ1hzfSAke3ZhcnMuc3BhY2luZ1N9O1xuICBib3JkZXI6ICdub25lJztcbiAgYm94LXNoYWRvdzogJHt2YXJzLnNoYWRvdzE1fTtcbiAgZm9udC1zaXplOiAwLjg1N3JlbTtcbiAgb3BhY2l0eTogMC45NTtcbiAgY29sb3I6ICR7dmFycy5jb2xvclN1cmZhY2V9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnR9O1xuYDtcblxuLy8gaGVyZSB3ZSB1c2Ugb2JqZWN0IHN0eWxlcyBzbyB3ZSBjYW4gc3ByZWFkIHRoZXNlXG4vLyB3aXRoIHRoZSBzdHlsZXMgd2UgZ2V0IGZyb20gcmVhY3QtcG9wcGVyIDpEXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IGNvbnN0IGdldEJvZHlTdHlsZXMgPSAoe1xuICBjb25zdHJhaW50LFxuICBwbGFjZW1lbnQsXG4gIGN1c3RvbVN0eWxlcyxcbn06IHtcbiAgY29uc3RyYWludDogVFRvb2x0aXBQcm9wc1snaG9yaXpvbnRhbENvbnN0cmFpbnQnXTtcbiAgcGxhY2VtZW50OiBzdHJpbmc7XG4gIGN1c3RvbVN0eWxlcz86IENTU1Byb3BlcnRpZXM7XG59KTogQ1NTUHJvcGVydGllcyA9PiB7XG4gIHJldHVybiB7XG4gICAgZm9udEZhbWlseTogJ2luaGVyaXQnLFxuICAgIG1hcmdpbjogYCR7Z2V0T2Zmc2V0TWFyZ2luKHsgcGxhY2VtZW50IH0pfSAhaW1wb3J0YW50YCxcbiAgICBtYXhXaWR0aDogKHZhcnMgYXMgUmVjb3JkPHN0cmluZywgc3RyaW5nPilbYGNvbnN0cmFpbnQke2NvbnN0cmFpbnR9YF0sXG4gICAgLy8gc28gaG92ZXJpbmcgb3ZlciB0aGUgdG9vbHRpcCB3aGVuIHRoZSB0b29sdGlwIG92ZXJsYXBzIHRoZSBjb21wb25lbnRcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgd2lkdGg6IGNvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6IHVuZGVmaW5lZCxcbiAgICB6SW5kZXg6IDEsXG4gICAgLi4uY3VzdG9tU3R5bGVzLFxuICB9O1xufTtcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gID4gOmRpc2FibGVkIHtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcbiJdfQ== */")); // here we use object styles so we can spread these
+// with the styles we get from react-popper :D
+// eslint-disable-next-line import/prefer-default-export
+
+var getBodyStyles = function getBodyStyles(_ref2) {
+  var constraint = _ref2.constraint,
+      placement = _ref2.placement,
+      customStyles = _ref2.customStyles;
+  return _objectSpread$1({
+    fontFamily: 'inherit',
+    margin: "".concat(getOffsetMargin({
+      placement: placement
+    }), " !important"),
+    maxWidth: designSystem.customProperties["constraint".concat(constraint)],
+    // so hovering over the tooltip when the tooltip overlaps the component
+    pointerEvents: 'none',
+    width: constraint === 'auto' ? 'auto' : undefined,
+    zIndex: 1
+  }, customStyles);
+};
+var Wrapper = _styled__default['default']("div", process.env.NODE_ENV === "production" ? {
+  target: "e14le4p0"
+} : {
+  target: "e14le4p0",
+  label: "Wrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "18fwu9s",
+  styles: "display:inline-block;cursor:not-allowed;>:disabled{pointer-events:none;}"
+} : {
+  name: "18fwu9s",
+  styles: "display:inline-block;cursor:not-allowed;>:disabled{pointer-events:none;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVEaUMiLCJmaWxlIjoidG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDU1NQcm9wZXJ0aWVzIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRUb29sdGlwUHJvcHMgfSBmcm9tICcuL3Rvb2x0aXAnO1xuXG5jb25zdCBnZXRPZmZzZXRNYXJnaW4gPSAoeyBwbGFjZW1lbnQgfTogeyBwbGFjZW1lbnQ6IHN0cmluZyB9KSA9PiB7XG4gIGNvbnN0IHBvc2l0aW9uID0gKHBsYWNlbWVudCAmJiBwbGFjZW1lbnQuc3BsaXQoJy0nKVswXSkgfHwgJyc7XG4gIHN3aXRjaCAocG9zaXRpb24pIHtcbiAgICBjYXNlICdsZWZ0JzpcbiAgICBjYXNlICdyaWdodCc6XG4gICAgICByZXR1cm4gYDAgJHt2YXJzLnNwYWNpbmdYc31gO1xuICAgIGNhc2UgJ3RvcCc6XG4gICAgY2FzZSAnYm90dG9tJzpcbiAgICAgIHJldHVybiBgJHt2YXJzLnNwYWNpbmdYc30gMGA7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiAnJztcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IEJvZHkgPSBzdHlsZWQuZGl2YFxuICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgYm9yZGVyLXJhZGl1czogJHt2YXJzLmJvcmRlclJhZGl1czZ9O1xuICBwYWRkaW5nOiAke3ZhcnMuc3BhY2luZ1hzfSAke3ZhcnMuc3BhY2luZ1N9O1xuICBib3JkZXI6ICdub25lJztcbiAgYm94LXNoYWRvdzogJHt2YXJzLnNoYWRvdzE1fTtcbiAgZm9udC1zaXplOiAwLjg1N3JlbTtcbiAgb3BhY2l0eTogMC45NTtcbiAgY29sb3I6ICR7dmFycy5jb2xvclN1cmZhY2V9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnR9O1xuYDtcblxuLy8gaGVyZSB3ZSB1c2Ugb2JqZWN0IHN0eWxlcyBzbyB3ZSBjYW4gc3ByZWFkIHRoZXNlXG4vLyB3aXRoIHRoZSBzdHlsZXMgd2UgZ2V0IGZyb20gcmVhY3QtcG9wcGVyIDpEXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IGNvbnN0IGdldEJvZHlTdHlsZXMgPSAoe1xuICBjb25zdHJhaW50LFxuICBwbGFjZW1lbnQsXG4gIGN1c3RvbVN0eWxlcyxcbn06IHtcbiAgY29uc3RyYWludDogVFRvb2x0aXBQcm9wc1snaG9yaXpvbnRhbENvbnN0cmFpbnQnXTtcbiAgcGxhY2VtZW50OiBzdHJpbmc7XG4gIGN1c3RvbVN0eWxlcz86IENTU1Byb3BlcnRpZXM7XG59KTogQ1NTUHJvcGVydGllcyA9PiB7XG4gIHJldHVybiB7XG4gICAgZm9udEZhbWlseTogJ2luaGVyaXQnLFxuICAgIG1hcmdpbjogYCR7Z2V0T2Zmc2V0TWFyZ2luKHsgcGxhY2VtZW50IH0pfSAhaW1wb3J0YW50YCxcbiAgICBtYXhXaWR0aDogKHZhcnMgYXMgUmVjb3JkPHN0cmluZywgc3RyaW5nPilbYGNvbnN0cmFpbnQke2NvbnN0cmFpbnR9YF0sXG4gICAgLy8gc28gaG92ZXJpbmcgb3ZlciB0aGUgdG9vbHRpcCB3aGVuIHRoZSB0b29sdGlwIG92ZXJsYXBzIHRoZSBjb21wb25lbnRcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgd2lkdGg6IGNvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6IHVuZGVmaW5lZCxcbiAgICB6SW5kZXg6IDEsXG4gICAgLi4uY3VzdG9tU3R5bGVzLFxuICB9O1xufTtcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gID4gOmRpc2FibGVkIHtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+var sequentialId = utils.createSequentialId('tooltip-');
+
+var TooltipWrapper = function TooltipWrapper(props) {
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+};
+
+TooltipWrapper.displayName = 'TooltipWrapperComponent';
+var tooltipDefaultProps = {
+  closeAfter: 0,
+  horizontalConstraint: 'scale',
+  off: false,
+  placement: 'top'
+};
+
+var Tooltip = function Tooltip(props) {
+  var _props$components, _props$components2, _props$components3, _props$components4, _props$components5, _props$components6, _props$styles;
+
+  var leaveTimer = react.useRef();
+  var childrenRef = react.useRef();
+
+  if ((_props$components = props.components) !== null && _props$components !== void 0 && _props$components.BodyComponent) {
+    process.env.NODE_ENV !== "production" ? utils.warning(reactIs.isValidElementType(props.components.BodyComponent), "ui-kit/Tooltip: the prop 'components.BodyComponent' is not a valid React element.") : void 0;
+  }
+
+  if ((_props$components2 = props.components) !== null && _props$components2 !== void 0 && _props$components2.TooltipWrapperComponent) {
+    process.env.NODE_ENV !== "production" ? utils.warning(reactIs.isValidElementType(props.components.TooltipWrapperComponent), "ui-kit/Tooltip: the prop 'components.TooltipWrapperComponent' is not a valid React element.") : void 0;
+  }
+
+  if ((_props$components3 = props.components) !== null && _props$components3 !== void 0 && _props$components3.WrapperComponent) {
+    process.env.NODE_ENV !== "production" ? utils.warning(reactIs.isValidElementType(props.components.WrapperComponent), "ui-kit/Tooltip: the prop 'components.WrapperComponent' is not a valid React element.") : void 0;
+  }
+
+  react.useEffect(function () {
+    return function () {
+      if (leaveTimer.current) {
+        clearTimeout(leaveTimer.current);
+      }
+    };
+  }, []);
+
+  var _usePopper = usePopper__default['default']({
+    placement: props.placement,
+    modifiers: props.modifiers
+  }),
+      reference = _usePopper.reference,
+      popper = _usePopper.popper;
+
+  var _useToggleState = hooks.useToggleState(false),
+      _useToggleState2 = _slicedToArray(_useToggleState, 2),
+      isOpen = _useToggleState2[0],
+      toggle = _useToggleState2[1];
+
+  var closeTooltip = react.useCallback(function () {
+    toggle(false);
+  }, [toggle]);
+  var openTooltip = react.useCallback(function () {
+    toggle(true);
+  }, [toggle]);
+  var isControlled = !isNil__default['default'](props.isOpen);
+  var tooltipIsOpen = isControlled ? props.isOpen : isOpen;
+  var id = hooks.useFieldId(props.id, sequentialId);
+  var onClose = props.onClose;
+  var handleClose = react.useCallback(function (event) {
+    if (!isControlled) {
+      closeTooltip();
+    }
+
+    if (onClose) {
+      onClose(event);
+    }
+  }, [isControlled, closeTooltip, onClose]);
+  var _props$children$props = props.children.props,
+      onFocus = _props$children$props.onFocus,
+      onMouseOver = _props$children$props.onMouseOver;
+  var onOpen = props.onOpen;
+  var handleEnter = react.useCallback(function (event) {
+    // Remove the title ahead of time.
+    // We don't want to wait for the next render commit.
+    // We would risk displaying two tooltips at the same time (native + this one).
+    if (childrenRef && typeof childrenRef === 'function') {
+      // @ts-ignore
+      childrenRef.setAttribute('title', '');
+    }
+
+    if (event) {
+      if (event.type === 'mouseover' && onMouseOver) {
+        onMouseOver(event);
+      }
+
+      if (event.type === 'focus' && onFocus) {
+        onFocus(event);
+      }
+
+      if (!isOpen && !isControlled) {
+        openTooltip();
+      }
+
+      if (onOpen) {
+        onOpen(event);
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [onFocus, onOpen, onMouseOver, isControlled, isOpen, openTooltip]);
+  var _props$children$props2 = props.children.props,
+      onBlur = _props$children$props2.onBlur,
+      onMouseLeave = _props$children$props2.onMouseLeave;
+  var closeAfter = props.closeAfter;
+  var handleLeave = react.useCallback(function (event) {
+    if (leaveTimer.current) {
+      clearTimeout(leaveTimer.current);
+    }
+
+    if (event.type === 'mouseleave' && onMouseLeave) {
+      onMouseLeave(event);
+    }
+
+    if (event.type === 'blur' && onBlur) {
+      onBlur(event);
+    }
+
+    if (closeAfter) {
+      leaveTimer.current = _setTimeout__default['default'](function () {
+        handleClose(event);
+      }, closeAfter);
+    } else {
+      handleClose(event);
+    }
+  }, [closeAfter, onBlur, onMouseLeave, handleClose]);
+  react.useEffect(function () {
+    // if tooltip was open, and then component
+    // updated to be off, we should close the tooltip
+    if (isOpen && props.off) {
+      if (closeAfter) {
+        leaveTimer.current = _setTimeout__default['default'](function () {
+          handleClose();
+        }, closeAfter);
+      } else {
+        handleClose();
+      }
+    }
+  }, [props.off, closeAfter, handleClose, toggle, isOpen]);
+  var childrenProps = {
+    // don't pass event listeners to children
+    onFocus: null,
+    onMouseOver: null,
+    onMouseLeave: null,
+    onBlur: null
+  };
+  var tooltipProps = !props.off ? {
+    'aria-describedby': tooltipIsOpen ? id : null,
+    // for seo and accessibility, we add the tooltip's title
+    // as a native title when the title is hidden
+    title: !tooltipIsOpen && typeof props.title === 'string' ? props.title : null
+  } : {};
+  var eventListeners = !props.off ? {
+    onMouseOver: handleEnter,
+    onMouseLeave: handleLeave,
+    onFocus: handleEnter,
+    onBlur: handleLeave
+  } : {};
+  var WrapperComponent = ((_props$components4 = props.components) === null || _props$components4 === void 0 ? void 0 : _props$components4.WrapperComponent) || Wrapper;
+  var BodyComponent = ((_props$components5 = props.components) === null || _props$components5 === void 0 ? void 0 : _props$components5.BodyComponent) || Body;
+  var TooltipWrapperComponent = ((_props$components6 = props.components) === null || _props$components6 === void 0 ? void 0 : _props$components6.TooltipWrapperComponent) || TooltipWrapper;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(WrapperComponent, _objectSpread(_objectSpread({}, eventListeners), {}, {
+      // @ts-expect-error: yes, ref can be undefined
+      ref: reference.ref,
+      children: /*#__PURE__*/react.cloneElement(props.children, _objectSpread(_objectSpread({}, childrenProps), tooltipProps))
+    })), tooltipIsOpen && jsxRuntime.jsx(TooltipWrapperComponent, {
+      children: jsxRuntime.jsx("div", {
+        // ref accepts `LegacyRef`, which is a union of `RefObject` and `string`
+        // propper.ref returns `RefObject`
+        ref: popper.ref,
+        css: /*#__PURE__*/react$1.css(_objectSpread(_objectSpread({}, popper.styles), getBodyStyles({
+          constraint: props.horizontalConstraint,
+          placement: popper.placement,
+          customStyles: (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.body
+        })), process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtVWSIsImZpbGUiOiJ0b29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vIGluc3BpcmVkIGZyb20gaHR0cHM6Ly9naXRodWIuY29tL211aS1vcmcvbWF0ZXJpYWwtdWkvYmxvYi85ZWNjOGRiOGFiYmZiODI5MTExZDNiNWMwNjc4MjY3ODI3OTg0MDI0L3BhY2thZ2VzL21hdGVyaWFsLXVpL3NyYy9Ub29sdGlwL1Rvb2x0aXAuanNcbmltcG9ydCB7IE1vZGlmaWVycyB9IGZyb20gJ3BvcHBlci5qcyc7XG5pbXBvcnQge1xuICBDb21wb25lbnRUeXBlLFxuICBGb2N1c0V2ZW50LFxuICBDaGFuZ2VFdmVudCxcbiAgTGVnYWN5UmVmLFxuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdEVsZW1lbnQsXG4gIHVzZVJlZixcbiAgdXNlRWZmZWN0LFxuICB1c2VDYWxsYmFjayxcbiAgY2xvbmVFbGVtZW50LFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBpc1ZhbGlkRWxlbWVudFR5cGUgfSBmcm9tICdyZWFjdC1pcyc7XG5pbXBvcnQgaXNOaWwgZnJvbSAnbG9kYXNoL2lzTmlsJztcbmltcG9ydCB1c2VQb3BwZXIgZnJvbSAndXNlLXBvcHBlcic7XG5pbXBvcnQgeyB1c2VGaWVsZElkLCB1c2VUb2dnbGVTdGF0ZSB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2hvb2tzJztcbmltcG9ydCB7IGNyZWF0ZVNlcXVlbnRpYWxJZCwgd2FybmluZyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCB7IFdyYXBwZXIsIEJvZHksIGdldEJvZHlTdHlsZXMgfSBmcm9tICcuL3Rvb2x0aXAuc3R5bGVzJztcblxuY29uc3Qgc2VxdWVudGlhbElkID0gY3JlYXRlU2VxdWVudGlhbElkKCd0b29sdGlwLScpO1xuXG50eXBlIFRDb21wb25lbnRzID0ge1xuICAvKipcbiAgICogVGhlIGNvbXBvbmVudCByZW5kZXJlZCBhcyB0aGUgdG9vbHRpcCBib2R5LlxuICAgKi9cbiAgQm9keUNvbXBvbmVudD86IENvbXBvbmVudFR5cGU7XG4gIC8qKlxuICAgKiBXaGVyZSB0aGUgdG9vbHRpcCBzaG91bGQgYmUgcmVuZGVyZWQuIFRoaXMgY2FuIGJlIHVzZWZ1bCB0byByZW5kZXIgdGhlIHRvb2x0aXAgaW50byBhbm90aGVyIHBhcnQgb2YgdGhlIGRvY3VtZW50LCB1c2luZyBSZWFjdCBwb3J0YWwuXG4gICAqL1xuICBUb29sdGlwV3JhcHBlckNvbXBvbmVudD86IENvbXBvbmVudFR5cGU7XG4gIC8qKlxuICAgKiBBIGN1c3RvbSBjb21wb25lbnQgd3JhcHBlciBmb3IgdGhlIHRvb2x0aXAuXG4gICAqL1xuICBXcmFwcGVyQ29tcG9uZW50PzogQ29tcG9uZW50VHlwZTtcbn07XG5cbmV4cG9ydCB0eXBlIFRUb29sdGlwUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdEVsZW1lbnQ7XG5cbiAgLyoqXG4gICAqIERlbGF5IChpbiBtaWxsaXNlY29uZHMpIGJldHdlZW4gdGhlIGVuZCBvZiB0aGUgdXNlciBpbnRlcmFjdGlvbiwgYW5kIHRoZSBjbG9zaW5nIG9mIHRoZSB0b29sdGlwLlxuICAgKi9cbiAgY2xvc2VBZnRlcjogbnVtYmVyO1xuICAvKipcbiAgICogQ3VzdG9tIGNzcy1pbi1qcyBvYmplY3Qgc3R5bGVzIGZvciB0aGUgdG9vbHRpcCBib2R5LlxuICAgKi9cbiAgc3R5bGVzPzogUmVjb3JkPHN0cmluZywgQ1NTUHJvcGVydGllcz47XG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHRoZSB0b29sdGlwIHNob3VsZCBub3QgYXBwZWFyLlxuICAgKi9cbiAgb2ZmOiBib29sZWFuO1xuICAvKipcbiAgICogQW4gaWRlbnRpZmllciBmb3IgdGhlIHRvb2x0aXAsIHVzZWQgZm9yIGBhcmlhLWRlc2NyaWJlZGJ5YC5cbiAgICovXG4gIGlkPzogc3RyaW5nO1xuICAvKipcbiAgICogQSBjYWxsYmFjayBmdW5jdGlvbiwgY2FsbGVkIHdoZW4gdGhlIHRvb2x0aXAgaXMgY2xvc2luZy5cbiAgICovXG4gIG9uQ2xvc2U/OiAoZT86IENoYW5nZUV2ZW50IHwgRm9jdXNFdmVudCkgPT4gdm9pZDtcbiAgLyoqXG4gICAqIEEgY2FsbGJhY2sgZnVuY3Rpb24sIGNhbGxlZCB3aGVuIHRoZSB0b29sdGlwIGlzIG9wZW5pbmcuXG4gICAqL1xuICBvbk9wZW4/OiAoZT86IENoYW5nZUV2ZW50IHwgRm9jdXNFdmVudCkgPT4gdm9pZDtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEhvdyB0aGUgdG9vbHRpcCBpcyBwb3NpdGlvbmVkIHJlbGF0aXZlIHRvIHRoZSBjaGlsZCBlbGVtZW50LlxuICAgKi9cbiAgcGxhY2VtZW50PzpcbiAgICB8ICd0b3AnXG4gICAgfCAndG9wLXN0YXJ0J1xuICAgIHwgJ3RvcC1lbmQnXG4gICAgfCAncmlnaHQnXG4gICAgfCAncmlnaHQtc3RhcnQnXG4gICAgfCAncmlnaHQtZW5kJ1xuICAgIHwgJ2JvdHRvbSdcbiAgICB8ICdib3R0b20tc3RhcnQnXG4gICAgfCAnYm90dG9tLWVuZCdcbiAgICB8ICdsZWZ0J1xuICAgIHwgJ2xlZnQtc3RhcnQnXG4gICAgfCAnbGVmdC1lbmQnO1xuICAvKipcbiAgICogVGhlIG1lc3NhZ2UgdG8gc2hvdyBpbiB0aGUgdG9vbHRpcC5cbiAgICovXG4gIHRpdGxlOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBQcm92aWRlcyBhIHdheSB0byBmaW5lLXR1bmUgYW4gYXBwZWFyYW5jZSBvZiB1bmRlcmx5aW5nIFBvcHBlciB0b29sdGlwIGVsZW1lbnQuIEZvciBtb3JlIGluZm9ybWF0aW9uLCBwbGVhc2UgY2hlY2sgW1BvcHBlci5qcyBkb2N1bWVudGF0aW9uXShodHRwczovL3BvcHBlci5qcy5vcmcvcG9wcGVyLWRvY3VtZW50YXRpb24uaHRtbCNtb2RpZmllcnMpLlxuICAgKi9cbiAgbW9kaWZpZXJzPzogTW9kaWZpZXJzO1xuICAvKipcbiAgICogQ3VzdG9taXplIHRoZSBhcHBlYXJhbmNlIG9mIGNlcnRhaW4gZWxlbWVudHMgb2YgdGhlIHRvb2x0aXAuXG4gICAqL1xuICBjb21wb25lbnRzPzogVENvbXBvbmVudHM7XG4gIC8qKlxuICAgKiBIb3Jpem9udGFsIHNpemUgbGltaXQgb2YgdGhlIHRvb2x0aXAuXG4gICAqL1xuICBob3Jpem9udGFsQ29uc3RyYWludD86XG4gICAgfCAxXG4gICAgfCAyXG4gICAgfCAzXG4gICAgfCA0XG4gICAgfCA1XG4gICAgfCA2XG4gICAgfCA3XG4gICAgfCA4XG4gICAgfCA5XG4gICAgfCAxMFxuICAgIHwgMTFcbiAgICB8IDEyXG4gICAgfCAxM1xuICAgIHwgMTRcbiAgICB8IDE1XG4gICAgfCAxNlxuICAgIHwgJ3NjYWxlJ1xuICAgIHwgJ2F1dG8nO1xufTtcblxuY29uc3QgVG9vbHRpcFdyYXBwZXIgPSAocHJvcHM6IFBpY2s8VFRvb2x0aXBQcm9wcywgJ2NoaWxkcmVuJz4pID0+IChcbiAgPD57cHJvcHMuY2hpbGRyZW59PC8+XG4pO1xuVG9vbHRpcFdyYXBwZXIuZGlzcGxheU5hbWUgPSAnVG9vbHRpcFdyYXBwZXJDb21wb25lbnQnO1xuXG5jb25zdCB0b29sdGlwRGVmYXVsdFByb3BzOiBQaWNrPFxuICBUVG9vbHRpcFByb3BzLFxuICAnY2xvc2VBZnRlcicgfCAnaG9yaXpvbnRhbENvbnN0cmFpbnQnIHwgJ29mZicgfCAncGxhY2VtZW50J1xuPiA9IHtcbiAgY2xvc2VBZnRlcjogMCxcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6ICdzY2FsZScsXG4gIG9mZjogZmFsc2UsXG4gIHBsYWNlbWVudDogJ3RvcCcsXG59O1xuXG5jb25zdCBUb29sdGlwID0gKHByb3BzOiBUVG9vbHRpcFByb3BzKSA9PiB7XG4gIGNvbnN0IGxlYXZlVGltZXIgPSB1c2VSZWY8UmV0dXJuVHlwZTx0eXBlb2Ygc2V0VGltZW91dD4+KCk7XG4gIGNvbnN0IGNoaWxkcmVuUmVmID0gdXNlUmVmPFJldHVyblR5cGU8dHlwZW9mIHNldFRpbWVvdXQ+PigpO1xuICBpZiAocHJvcHMuY29tcG9uZW50cz8uQm9keUNvbXBvbmVudCkge1xuICAgIHdhcm5pbmcoXG4gICAgICBpc1ZhbGlkRWxlbWVudFR5cGUocHJvcHMuY29tcG9uZW50cy5Cb2R5Q29tcG9uZW50KSxcbiAgICAgIGB1aS1raXQvVG9vbHRpcDogdGhlIHByb3AgJ2NvbXBvbmVudHMuQm9keUNvbXBvbmVudCcgaXMgbm90IGEgdmFsaWQgUmVhY3QgZWxlbWVudC5gXG4gICAgKTtcbiAgfVxuICBpZiAocHJvcHMuY29tcG9uZW50cz8uVG9vbHRpcFdyYXBwZXJDb21wb25lbnQpIHtcbiAgICB3YXJuaW5nKFxuICAgICAgaXNWYWxpZEVsZW1lbnRUeXBlKHByb3BzLmNvbXBvbmVudHMuVG9vbHRpcFdyYXBwZXJDb21wb25lbnQpLFxuICAgICAgYHVpLWtpdC9Ub29sdGlwOiB0aGUgcHJvcCAnY29tcG9uZW50cy5Ub29sdGlwV3JhcHBlckNvbXBvbmVudCcgaXMgbm90IGEgdmFsaWQgUmVhY3QgZWxlbWVudC5gXG4gICAgKTtcbiAgfVxuICBpZiAocHJvcHMuY29tcG9uZW50cz8uV3JhcHBlckNvbXBvbmVudCkge1xuICAgIHdhcm5pbmcoXG4gICAgICBpc1ZhbGlkRWxlbWVudFR5cGUocHJvcHMuY29tcG9uZW50cy5XcmFwcGVyQ29tcG9uZW50KSxcbiAgICAgIGB1aS1raXQvVG9vbHRpcDogdGhlIHByb3AgJ2NvbXBvbmVudHMuV3JhcHBlckNvbXBvbmVudCcgaXMgbm90IGEgdmFsaWQgUmVhY3QgZWxlbWVudC5gXG4gICAgKTtcbiAgfVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGlmIChsZWF2ZVRpbWVyLmN1cnJlbnQpIHtcbiAgICAgICAgY2xlYXJUaW1lb3V0KGxlYXZlVGltZXIuY3VycmVudCk7XG4gICAgICB9XG4gICAgfTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IHsgcmVmZXJlbmNlLCBwb3BwZXIgfSA9IHVzZVBvcHBlcih7XG4gICAgcGxhY2VtZW50OiBwcm9wcy5wbGFjZW1lbnQsXG4gICAgbW9kaWZpZXJzOiBwcm9wcy5tb2RpZmllcnMsXG4gIH0pO1xuICBjb25zdCBbaXNPcGVuLCB0b2dnbGVdID0gdXNlVG9nZ2xlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBjbG9zZVRvb2x0aXAgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgdG9nZ2xlKGZhbHNlKTtcbiAgfSwgW3RvZ2dsZV0pO1xuICBjb25zdCBvcGVuVG9vbHRpcCA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGUodHJ1ZSk7XG4gIH0sIFt0b2dnbGVdKTtcblxuICBjb25zdCBpc0NvbnRyb2xsZWQgPSAhaXNOaWwocHJvcHMuaXNPcGVuKTtcbiAgY29uc3QgdG9vbHRpcElzT3BlbiA9IGlzQ29udHJvbGxlZCA/IHByb3BzLmlzT3BlbiA6IGlzT3BlbjtcbiAgY29uc3QgaWQgPSB1c2VGaWVsZElkKHByb3BzLmlkLCBzZXF1ZW50aWFsSWQpO1xuXG4gIGNvbnN0IHsgb25DbG9zZSB9ID0gcHJvcHM7XG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50PzogQ2hhbmdlRXZlbnQgfCBGb2N1c0V2ZW50KSA9PiB7XG4gICAgICBpZiAoIWlzQ29udHJvbGxlZCkge1xuICAgICAgICBjbG9zZVRvb2x0aXAoKTtcbiAgICAgIH1cbiAgICAgIGlmIChvbkNsb3NlKSB7XG4gICAgICAgIG9uQ2xvc2UoZXZlbnQpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2lzQ29udHJvbGxlZCwgY2xvc2VUb29sdGlwLCBvbkNsb3NlXVxuICApO1xuXG4gIGNvbnN0IHsgb25Gb2N1cywgb25Nb3VzZU92ZXIgfSA9IHByb3BzLmNoaWxkcmVuLnByb3BzO1xuICBjb25zdCB7IG9uT3BlbiB9ID0gcHJvcHM7XG4gIGNvbnN0IGhhbmRsZUVudGVyID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50PzogQ2hhbmdlRXZlbnQgfCBGb2N1c0V2ZW50KSA9PiB7XG4gICAgICAvLyBSZW1vdmUgdGhlIHRpdGxlIGFoZWFkIG9mIHRpbWUuXG4gICAgICAvLyBXZSBkb24ndCB3YW50IHRvIHdhaXQgZm9yIHRoZSBuZXh0IHJlbmRlciBjb21taXQuXG4gICAgICAvLyBXZSB3b3VsZCByaXNrIGRpc3BsYXlpbmcgdHdvIHRvb2x0aXBzIGF0IHRoZSBzYW1lIHRpbWUgKG5hdGl2ZSArIHRoaXMgb25lKS5cbiAgICAgIGlmIChjaGlsZHJlblJlZiAmJiB0eXBlb2YgY2hpbGRyZW5SZWYgPT09ICdmdW5jdGlvbicpIHtcbiAgICAgICAgLy8gQHRzLWlnbm9yZVxuICAgICAgICBjaGlsZHJlblJlZi5zZXRBdHRyaWJ1dGUoJ3RpdGxlJywgJycpO1xuICAgICAgfVxuXG4gICAgICBpZiAoZXZlbnQpIHtcbiAgICAgICAgaWYgKGV2ZW50LnR5cGUgPT09ICdtb3VzZW92ZXInICYmIG9uTW91c2VPdmVyKSB7XG4gICAgICAgICAgb25Nb3VzZU92ZXIoZXZlbnQpO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKGV2ZW50LnR5cGUgPT09ICdmb2N1cycgJiYgb25Gb2N1cykge1xuICAgICAgICAgIG9uRm9jdXMoZXZlbnQpO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKCFpc09wZW4gJiYgIWlzQ29udHJvbGxlZCkge1xuICAgICAgICAgIG9wZW5Ub29sdGlwKCk7XG4gICAgICAgIH1cblxuICAgICAgICBpZiAob25PcGVuKSB7XG4gICAgICAgICAgb25PcGVuKGV2ZW50KTtcbiAgICAgICAgfVxuXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW29uRm9jdXMsIG9uT3Blbiwgb25Nb3VzZU92ZXIsIGlzQ29udHJvbGxlZCwgaXNPcGVuLCBvcGVuVG9vbHRpcF1cbiAgKTtcblxuICBjb25zdCB7IG9uQmx1ciwgb25Nb3VzZUxlYXZlIH0gPSBwcm9wcy5jaGlsZHJlbi5wcm9wcztcbiAgY29uc3QgeyBjbG9zZUFmdGVyIH0gPSBwcm9wcztcblxuICBjb25zdCBoYW5kbGVMZWF2ZSA9IHVzZUNhbGxiYWNrKFxuICAgIChldmVudCkgPT4ge1xuICAgICAgaWYgKGxlYXZlVGltZXIuY3VycmVudCkge1xuICAgICAgICBjbGVhclRpbWVvdXQobGVhdmVUaW1lci5jdXJyZW50KTtcbiAgICAgIH1cblxuICAgICAgaWYgKGV2ZW50LnR5cGUgPT09ICdtb3VzZWxlYXZlJyAmJiBvbk1vdXNlTGVhdmUpIHtcbiAgICAgICAgb25Nb3VzZUxlYXZlKGV2ZW50KTtcbiAgICAgIH1cblxuICAgICAgaWYgKGV2ZW50LnR5cGUgPT09ICdibHVyJyAmJiBvbkJsdXIpIHtcbiAgICAgICAgb25CbHVyKGV2ZW50KTtcbiAgICAgIH1cblxuICAgICAgaWYgKGNsb3NlQWZ0ZXIpIHtcbiAgICAgICAgbGVhdmVUaW1lci5jdXJyZW50ID0gc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgaGFuZGxlQ2xvc2UoZXZlbnQpO1xuICAgICAgICB9LCBjbG9zZUFmdGVyKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKGV2ZW50KTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtjbG9zZUFmdGVyLCBvbkJsdXIsIG9uTW91c2VMZWF2ZSwgaGFuZGxlQ2xvc2VdXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyBpZiB0b29sdGlwIHdhcyBvcGVuLCBhbmQgdGhlbiBjb21wb25lbnRcbiAgICAvLyB1cGRhdGVkIHRvIGJlIG9mZiwgd2Ugc2hvdWxkIGNsb3NlIHRoZSB0b29sdGlwXG4gICAgaWYgKGlzT3BlbiAmJiBwcm9wcy5vZmYpIHtcbiAgICAgIGlmIChjbG9zZUFmdGVyKSB7XG4gICAgICAgIGxlYXZlVGltZXIuY3VycmVudCA9IHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICAgIH0sIGNsb3NlQWZ0ZXIpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgaGFuZGxlQ2xvc2UoKTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtwcm9wcy5vZmYsIGNsb3NlQWZ0ZXIsIGhhbmRsZUNsb3NlLCB0b2dnbGUsIGlzT3Blbl0pO1xuXG4gIGNvbnN0IGNoaWxkcmVuUHJvcHMgPSB7XG4gICAgLy8gZG9uJ3QgcGFzcyBldmVudCBsaXN0ZW5lcnMgdG8gY2hpbGRyZW5cbiAgICBvbkZvY3VzOiBudWxsLFxuICAgIG9uTW91c2VPdmVyOiBudWxsLFxuICAgIG9uTW91c2VMZWF2ZTogbnVsbCxcbiAgICBvbkJsdXI6IG51bGwsXG4gIH07XG5cbiAgY29uc3QgdG9vbHRpcFByb3BzID0gIXByb3BzLm9mZlxuICAgID8ge1xuICAgICAgICAnYXJpYS1kZXNjcmliZWRieSc6IHRvb2x0aXBJc09wZW4gPyBpZCA6IG51bGwsXG4gICAgICAgIC8vIGZvciBzZW8gYW5kIGFjY2Vzc2liaWxpdHksIHdlIGFkZCB0aGUgdG9vbHRpcCdzIHRpdGxlXG4gICAgICAgIC8vIGFzIGEgbmF0aXZlIHRpdGxlIHdoZW4gdGhlIHRpdGxlIGlzIGhpZGRlblxuICAgICAgICB0aXRsZTpcbiAgICAgICAgICAhdG9vbHRpcElzT3BlbiAmJiB0eXBlb2YgcHJvcHMudGl0bGUgPT09ICdzdHJpbmcnXG4gICAgICAgICAgICA/IHByb3BzLnRpdGxlXG4gICAgICAgICAgICA6IG51bGwsXG4gICAgICB9XG4gICAgOiB7fTtcblxuICBjb25zdCBldmVudExpc3RlbmVycyA9ICFwcm9wcy5vZmZcbiAgICA/IHtcbiAgICAgICAgb25Nb3VzZU92ZXI6IGhhbmRsZUVudGVyLFxuICAgICAgICBvbk1vdXNlTGVhdmU6IGhhbmRsZUxlYXZlLFxuICAgICAgICBvbkZvY3VzOiBoYW5kbGVFbnRlcixcbiAgICAgICAgb25CbHVyOiBoYW5kbGVMZWF2ZSxcbiAgICAgIH1cbiAgICA6IHt9O1xuXG4gIGNvbnN0IFdyYXBwZXJDb21wb25lbnQgPSBwcm9wcy5jb21wb25lbnRzPy5XcmFwcGVyQ29tcG9uZW50IHx8IFdyYXBwZXI7XG4gIGNvbnN0IEJvZHlDb21wb25lbnQgPSBwcm9wcy5jb21wb25lbnRzPy5Cb2R5Q29tcG9uZW50IHx8IEJvZHk7XG4gIGNvbnN0IFRvb2x0aXBXcmFwcGVyQ29tcG9uZW50ID1cbiAgICBwcm9wcy5jb21wb25lbnRzPy5Ub29sdGlwV3JhcHBlckNvbXBvbmVudCB8fCBUb29sdGlwV3JhcHBlcjtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8V3JhcHBlckNvbXBvbmVudFxuICAgICAgICB7Li4uZXZlbnRMaXN0ZW5lcnN9XG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3I6IHllcywgcmVmIGNhbiBiZSB1bmRlZmluZWRcbiAgICAgICAgcmVmPXtyZWZlcmVuY2UucmVmfVxuICAgICAgPlxuICAgICAgICB7Y2xvbmVFbGVtZW50KHByb3BzLmNoaWxkcmVuLCB7XG4gICAgICAgICAgLi4uY2hpbGRyZW5Qcm9wcyxcbiAgICAgICAgICAuLi50b29sdGlwUHJvcHMsXG4gICAgICAgIH0pfVxuICAgICAgPC9XcmFwcGVyQ29tcG9uZW50PlxuICAgICAge3Rvb2x0aXBJc09wZW4gJiYgKFxuICAgICAgICA8VG9vbHRpcFdyYXBwZXJDb21wb25lbnQ+XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgLy8gcmVmIGFjY2VwdHMgYExlZ2FjeVJlZmAsIHdoaWNoIGlzIGEgdW5pb24gb2YgYFJlZk9iamVjdGAgYW5kIGBzdHJpbmdgXG4gICAgICAgICAgICAvLyBwcm9wcGVyLnJlZiByZXR1cm5zIGBSZWZPYmplY3RgXG4gICAgICAgICAgICByZWY9e3BvcHBlci5yZWYgYXMgTGVnYWN5UmVmPEhUTUxEaXZFbGVtZW50Pn1cbiAgICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgICAuLi5wb3BwZXIuc3R5bGVzLFxuICAgICAgICAgICAgICAuLi5nZXRCb2R5U3R5bGVzKHtcbiAgICAgICAgICAgICAgICBjb25zdHJhaW50OiBwcm9wcy5ob3Jpem9udGFsQ29uc3RyYWludCxcbiAgICAgICAgICAgICAgICBwbGFjZW1lbnQ6IHBvcHBlci5wbGFjZW1lbnQsXG4gICAgICAgICAgICAgICAgY3VzdG9tU3R5bGVzOiBwcm9wcy5zdHlsZXM/LmJvZHksXG4gICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIGRhdGEtcGxhY2VtZW50PXtwb3BwZXIucGxhY2VtZW50fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxCb2R5Q29tcG9uZW50Pntwcm9wcy50aXRsZX08L0JvZHlDb21wb25lbnQ+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvVG9vbHRpcFdyYXBwZXJDb21wb25lbnQ+XG4gICAgICApfVxuICAgIDwvPlxuICApO1xufTtcblxuVG9vbHRpcC5kaXNwbGF5TmFtZSA9ICdUb29sVGlwJztcblRvb2x0aXAuZGVmYXVsdFByb3BzID0gdG9vbHRpcERlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgVG9vbHRpcDtcbiJdfQ== */"),
+        "data-placement": popper.placement,
+        children: jsxRuntime.jsx(BodyComponent, {
+          children: props.title
+        })
+      })
+    })]
+  });
+};
+
+Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default['default'].element.isRequired,
+  closeAfter: _pt__default['default'].number.isRequired,
+  styles: _pt__default['default'].objectOf(_pt__default['default'].any),
+  off: _pt__default['default'].bool.isRequired,
+  id: _pt__default['default'].string,
+  onClose: _pt__default['default'].func,
+  onOpen: _pt__default['default'].func,
+  isOpen: _pt__default['default'].bool,
+  placement: _pt__default['default'].oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
+  title: _pt__default['default'].string.isRequired,
+  modifiers: _pt__default['default'].any,
+  components: _pt__default['default'].shape({
+    BodyComponent: _pt__default['default'].elementType,
+    TooltipWrapperComponent: _pt__default['default'].elementType,
+    WrapperComponent: _pt__default['default'].elementType
+  }),
+  horizontalConstraint: _pt__default['default'].oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
+} : {};
+Tooltip.displayName = 'ToolTip';
+Tooltip.defaultProps = tooltipDefaultProps;
+var Tooltip$1 = Tooltip;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = Tooltip$1;
+exports.version = version;

package/dist/commercetools-uikit-tooltip.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-tooltip.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-tooltip.cjs.dev.js");
+}