@veeqo/ui 9.5.2 → 9.6.0

package/dist/components/Tooltip/Tooltip.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var framerMotion = require('framer-motion');
 var styled = require('./components/styled.cjs');
 var TooltipPopover = require('./components/TooltipPopover.cjs');
 var Portal = require('../Portal/Portal.cjs');
@@ -9,10 +10,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+const WithOptionalPortal = ({ usePortal = false, children,
+// eslint-disable-next-line react/jsx-no-useless-fragment
+ }) => (usePortal ? React__default.default.createElement(Portal.Portal, null, children) : React__default.default.createElement(React__default.default.Fragment, null, children));
 const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = React.useState(null);
-    const hasText = text ? text.trim().length > 0 : false;
     const classNames = {
         container: className && `${className} ${className}-container`,
         tip: className && `${className}-tip`,
@@ -20,16 +23,17 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
         triangle: className && `${className}-triangle`,
         hoverable: className && `${className}-hoverable`,
     };
+    const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    const tooltipContent = (React__default.default.createElement(TooltipPopover.TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
-    const tooltipMarkup = useReactPortal ? React__default.default.createElement(Portal.Portal, null, tooltipContent) : tooltipContent;
-    return (React__default.default.createElement(styled.Container, { className: classNames.container },
-        shouldShow && tooltipMarkup,
-        React__default.default.createElement(styled.Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+    return (React__default.default.createElement(framerMotion.AnimatePresence, null,
+        React__default.default.createElement(styled.Container, { className: classNames.container },
+            React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
+                React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
+            React__default.default.createElement(styled.Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children))));
 };
 
 exports.Tooltip = Tooltip;

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TooltipProps } from './types';\nimport { Container, Hoverable } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasContent = !!(content || hasText);\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  const tooltipContent = (\n    <TooltipPopover\n      classNames={classNames}\n      hoverableElement={hoverableElement}\n      config={config}\n      reversed={reversed}\n      withTriangle={withTriangle}\n      text={text}\n      content={content}\n    />\n  );\n\n  const tooltipMarkup = useReactPortal ? <Portal>{tooltipContent}</Portal> : tooltipContent;\n\n  return (\n    <Container className={classNames.container}>\n      {shouldShow && tooltipMarkup}\n      <Hoverable\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Hoverable>\n    </Container>\n  );\n};\n"],"names":["useState","React","TooltipPopover","Portal","Container","Hoverable"],"mappings":";;;;;;;;;;;AAMO,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;AAErD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AACzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,cAAc,IAClBC,sBAAA,CAAA,aAAA,CAACC,6BAAc,EACb,EAAA,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACH;AAED,IAAA,MAAM,aAAa,GAAG,cAAc,GAAGD,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,IAAA,EAAE,cAAc,CAAU,GAAG,cAAc;IAEzF,QACEF,qCAACG,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AACvC,QAAA,UAAU,IAAI,aAAa;QAC5BH,sBAAC,CAAA,aAAA,CAAAI,gBAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <AnimatePresence>\n      <Container className={classNames.container}>\n        <AnimatePresence>\n          {shouldShow && (\n            <WithOptionalPortal usePortal={useReactPortal}>\n              <TooltipPopover\n                key=\"tooltip-popover\"\n                classNames={classNames}\n                hoverableElement={hoverableElement}\n                config={config}\n                reversed={reversed}\n                withTriangle={withTriangle}\n                text={text}\n                content={content}\n              />\n            </WithOptionalPortal>\n          )}\n        </AnimatePresence>\n\n        <Container\n          ref={setHoverableElement}\n          className={classNames.hoverable}\n          onMouseEnter={show}\n          onMouseLeave={hide}\n        >\n          {children}\n        </Container>\n      </Container>\n    </AnimatePresence>\n  );\n};\n"],"names":["React","Portal","useState","AnimatePresence","Container","TooltipPopover"],"mappings":";;;;;;;;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAC,CAAA,aAAA,CAAAC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEF,qCAACG,4BAAe,EAAA,IAAA;AACd,QAAAH,sBAAA,CAAA,aAAA,CAACI,gBAAS,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;YACxCJ,sBAAC,CAAA,aAAA,CAAAG,4BAAe,EACb,IAAA,EAAA,UAAU,KACTH,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,gBAAAA,sBAAA,CAAA,aAAA,CAACK,6BAAc,EACb,EAAA,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,CAAA,CACiB,CACtB,CACe;YAElBL,sBAAC,CAAA,aAAA,CAAAI,gBAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAEjB,EAAA,QAAQ,CACC,CACF,CACI;AAEtB;;;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,12 +1,15 @@
 import React__default, { useState } from 'react';
-import { Container, Hoverable } from './components/styled.js';
+import { AnimatePresence } from 'framer-motion';
+import { Container } from './components/styled.js';
 import { TooltipPopover } from './components/TooltipPopover.js';
 import { Portal } from '../Portal/Portal.js';
 
+const WithOptionalPortal = ({ usePortal = false, children,
+// eslint-disable-next-line react/jsx-no-useless-fragment
+ }) => (usePortal ? React__default.createElement(Portal, null, children) : React__default.createElement(React__default.Fragment, null, children));
 const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = useState(null);
-    const hasText = text ? text.trim().length > 0 : false;
     const classNames = {
         container: className && `${className} ${className}-container`,
         tip: className && `${className}-tip`,
@@ -14,16 +17,17 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
         triangle: className && `${className}-triangle`,
         hoverable: className && `${className}-hoverable`,
     };
+    const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    const tooltipContent = (React__default.createElement(TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
-    const tooltipMarkup = useReactPortal ? React__default.createElement(Portal, null, tooltipContent) : tooltipContent;
-    return (React__default.createElement(Container, { className: classNames.container },
-        shouldShow && tooltipMarkup,
-        React__default.createElement(Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+    return (React__default.createElement(AnimatePresence, null,
+        React__default.createElement(Container, { className: classNames.container },
+            React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
+                React__default.createElement(TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
+            React__default.createElement(Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children))));
 };
 
 export { Tooltip };

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TooltipProps } from './types';\nimport { Container, Hoverable } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasContent = !!(content || hasText);\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  const tooltipContent = (\n    <TooltipPopover\n      classNames={classNames}\n      hoverableElement={hoverableElement}\n      config={config}\n      reversed={reversed}\n      withTriangle={withTriangle}\n      text={text}\n      content={content}\n    />\n  );\n\n  const tooltipMarkup = useReactPortal ? <Portal>{tooltipContent}</Portal> : tooltipContent;\n\n  return (\n    <Container className={classNames.container}>\n      {shouldShow && tooltipMarkup}\n      <Hoverable\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Hoverable>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAMO,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;AAErD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AACzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,cAAc,IAClBA,cAAA,CAAA,aAAA,CAAC,cAAc,EACb,EAAA,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACH;AAED,IAAA,MAAM,aAAa,GAAG,cAAc,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,cAAc,CAAU,GAAG,cAAc;IAEzF,QACEA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AACvC,QAAA,UAAU,IAAI,aAAa;QAC5BA,cAAC,CAAA,aAAA,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <AnimatePresence>\n      <Container className={classNames.container}>\n        <AnimatePresence>\n          {shouldShow && (\n            <WithOptionalPortal usePortal={useReactPortal}>\n              <TooltipPopover\n                key=\"tooltip-popover\"\n                classNames={classNames}\n                hoverableElement={hoverableElement}\n                config={config}\n                reversed={reversed}\n                withTriangle={withTriangle}\n                text={text}\n                content={content}\n              />\n            </WithOptionalPortal>\n          )}\n        </AnimatePresence>\n\n        <Container\n          ref={setHoverableElement}\n          className={classNames.hoverable}\n          onMouseEnter={show}\n          onMouseLeave={hide}\n        >\n          {children}\n        </Container>\n      </Container>\n    </AnimatePresence>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAC,CAAA,aAAA,CAAA,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEA,6BAAC,eAAe,EAAA,IAAA;AACd,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;YACxCA,cAAC,CAAA,aAAA,CAAA,eAAe,EACb,IAAA,EAAA,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,gBAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EACb,EAAA,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,CAAA,CACiB,CACtB,CACe;YAElBA,cAAC,CAAA,aAAA,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAEjB,EAAA,QAAQ,CACC,CACF,CACI;AAEtB;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.cjs

@@ -5,29 +5,29 @@ var reactPopper = require('react-popper');
 var styled = require('./styled.cjs');
 var types = require('../types.cjs');
 var index = require('../../../theme/index.cjs');
+var Text = require('../../Text/Text.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const defaultConfig = {
-    duration: 400,
     side: types.Sides.TOP,
-    triangleOffset: 8,
+    triangleOffset: 6,
     tipMinWidth: 60,
     tipMaxWidth: 340,
 };
 const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
     const [popperElement, setPopperElement] = React.useState(null);
     const usedConfig = { ...defaultConfig, ...config };
-    const { duration, side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
     const { styles, attributes } = reactPopper.usePopper(hoverableElement, popperElement, {
         placement: `${side}-${reversed ? 'end' : 'start'}`,
         modifiers: [
             {
                 name: 'offset',
                 options: {
-                    offset: [0, 10],
+                    offset: [0, 8],
                 },
             },
         ],
@@ -36,8 +36,8 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
         ...styles.popper,
         zIndex: index.theme.layers.tooltip,
     };
-    return (React__default.default.createElement(styled.Tip, { className: classNames.tip, ref: setPopperElement, duration: duration, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
-        React__default.default.createElement(styled.Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== undefined ? content : React__default.default.createElement(styled.TooltipText, null, text)),
+    return (React__default.default.createElement(styled.Tip, { key: "tooltip-tip", className: classNames.tip, ref: setPopperElement, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
+        React__default.default.createElement(styled.Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== undefined ? content : (React__default.default.createElement(Text.Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
         withTriangle && React__default.default.createElement(styled.Triangle, { id: "veeqo-components-triangle", className: classNames.triangle })));
 };
 

package/dist/components/Tooltip/components/TooltipPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Tip, TooltipText, Triangle, Wrap } from './styled';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\n\nconst defaultConfig: IConfig = {\n  duration: 400,\n  side: Sides.TOP,\n  triangleOffset: 8,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  classNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { duration, side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 10],\n        },\n      },\n    ],\n  });\n\n  const tooltipStyles = {\n    ...styles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <Tip\n      className={classNames.tip}\n      ref={setPopperElement}\n      duration={duration}\n      triangleOffsetSize={triangleOffset}\n      style={tooltipStyles}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <Wrap className={classNames.wrap} tipMinWidth={tipMinWidth} tipMaxWidth={tipMaxWidth}>\n        {content ?? <TooltipText>{text}</TooltipText>}\n      </Wrap>\n      {withTriangle && <Triangle id=\"veeqo-components-triangle\" className={classNames.triangle} />}\n    </Tip>\n  );\n};\n"],"names":["Sides","useState","usePopper","theme","React","Tip","Wrap","TooltipText","Triangle"],"mappings":";;;;;;;;;;;;AAOA,MAAM,aAAa,GAAY;AAC7B,IAAA,QAAQ,EAAE,GAAG;IACb,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;AAClD,IAAA,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAE/E,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAGC,qBAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAe,CAAA;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAChB,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,UAAG,EAAA,EACF,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAChB,GAAA,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;QAEdD,sBAAC,CAAA,aAAA,CAAAE,WAAI,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EACjF,EAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,OAAO,GAAIF,sBAAA,CAAA,aAAA,CAACG,kBAAW,EAAA,IAAA,EAAE,IAAI,CAAe,CACxC;AACN,QAAA,YAAY,IAAIH,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAI,CAAA,CACxF;AAEV;;;;"}
+{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Tip, Triangle, Wrap } from './styled';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  triangleOffset: 6,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  classNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 8],\n        },\n      },\n    ],\n  });\n\n  const tooltipStyles = {\n    ...styles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <Tip\n      key=\"tooltip-tip\"\n      className={classNames.tip}\n      ref={setPopperElement}\n      triangleOffsetSize={triangleOffset}\n      style={tooltipStyles}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <Wrap className={classNames.wrap} tipMinWidth={tipMinWidth} tipMaxWidth={tipMaxWidth}>\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </Wrap>\n      {withTriangle && <Triangle id=\"veeqo-components-triangle\" className={classNames.triangle} />}\n    </Tip>\n  );\n};\n"],"names":["Sides","useState","usePopper","theme","React","Tip","Wrap","Text","Triangle"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAGC,qBAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAe,CAAA;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,UAAG,EAAA,EACF,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAChB,GAAA,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,WAAI,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EACjF,EAAA,OAAO,aAAP,OAAO,KAAA,SAAA,GAAP,OAAO,IACNF,sBAAC,CAAA,aAAA,CAAAG,SAAI,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAChD,IAAI,CACA,CACR,CACI;AACN,QAAA,YAAY,IAAIH,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAI,CAAA,CACxF;AAEV;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.js

@@ -1,27 +1,27 @@
 import React__default, { useState } from 'react';
 import { usePopper } from 'react-popper';
-import { Tip, Wrap, TooltipText, Triangle } from './styled.js';
+import { Tip, Wrap, Triangle } from './styled.js';
 import { Sides } from '../types.js';
 import { theme } from '../../../theme/index.js';
+import { Text } from '../../Text/Text.js';
 
 const defaultConfig = {
-    duration: 400,
     side: Sides.TOP,
-    triangleOffset: 8,
+    triangleOffset: 6,
     tipMinWidth: 60,
     tipMaxWidth: 340,
 };
 const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const usedConfig = { ...defaultConfig, ...config };
-    const { duration, side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
     const { styles, attributes } = usePopper(hoverableElement, popperElement, {
         placement: `${side}-${reversed ? 'end' : 'start'}`,
         modifiers: [
             {
                 name: 'offset',
                 options: {
-                    offset: [0, 10],
+                    offset: [0, 8],
                 },
             },
         ],
@@ -30,8 +30,8 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
         ...styles.popper,
         zIndex: theme.layers.tooltip,
     };
-    return (React__default.createElement(Tip, { className: classNames.tip, ref: setPopperElement, duration: duration, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
-        React__default.createElement(Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== undefined ? content : React__default.createElement(TooltipText, null, text)),
+    return (React__default.createElement(Tip, { key: "tooltip-tip", className: classNames.tip, ref: setPopperElement, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
+        React__default.createElement(Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== undefined ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
         withTriangle && React__default.createElement(Triangle, { id: "veeqo-components-triangle", className: classNames.triangle })));
 };
 

package/dist/components/Tooltip/components/TooltipPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Tip, TooltipText, Triangle, Wrap } from './styled';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\n\nconst defaultConfig: IConfig = {\n  duration: 400,\n  side: Sides.TOP,\n  triangleOffset: 8,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  classNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { duration, side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 10],\n        },\n      },\n    ],\n  });\n\n  const tooltipStyles = {\n    ...styles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <Tip\n      className={classNames.tip}\n      ref={setPopperElement}\n      duration={duration}\n      triangleOffsetSize={triangleOffset}\n      style={tooltipStyles}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <Wrap className={classNames.wrap} tipMinWidth={tipMinWidth} tipMaxWidth={tipMaxWidth}>\n        {content ?? <TooltipText>{text}</TooltipText>}\n      </Wrap>\n      {withTriangle && <Triangle id=\"veeqo-components-triangle\" className={classNames.triangle} />}\n    </Tip>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,aAAa,GAAY;AAC7B,IAAA,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,KAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;AAClD,IAAA,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAE/E,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAe,CAAA;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAChB,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAChB,GAAA,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;QAEdA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EACjF,EAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,OAAO,GAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,EAAE,IAAI,CAAe,CACxC;AACN,QAAA,YAAY,IAAIA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAI,CAAA,CACxF;AAEV;;;;"}
+{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Tip, Triangle, Wrap } from './styled';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  triangleOffset: 6,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  classNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles, attributes } = usePopper(hoverableElement, popperElement, {\n    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 8],\n        },\n      },\n    ],\n  });\n\n  const tooltipStyles = {\n    ...styles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <Tip\n      key=\"tooltip-tip\"\n      className={classNames.tip}\n      ref={setPopperElement}\n      triangleOffsetSize={triangleOffset}\n      style={tooltipStyles}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <Wrap className={classNames.wrap} tipMinWidth={tipMinWidth} tipMaxWidth={tipMaxWidth}>\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </Wrap>\n      {withTriangle && <Triangle id=\"veeqo-components-triangle\" className={classNames.triangle} />}\n    </Tip>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAQA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAE,KAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAe,CAAA;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAChB,GAAA,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EACjF,EAAA,OAAO,aAAP,OAAO,KAAA,SAAA,GAAP,OAAO,IACNA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAChD,IAAI,CACA,CACR,CACI;AACN,QAAA,YAAY,IAAIA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAI,CAAA,CACxF;AAEV;;;;"}

package/dist/components/Tooltip/components/styled.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var styled = require('styled-components');
-var Text = require('../../Text/Text.cjs');
+var framerMotion = require('framer-motion');
 var index = require('../../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -9,16 +9,17 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1exlfc5" }) `display:inline-block;`;
-const Hoverable = styled__default.default(Container).withConfig({ displayName: "vui--Hoverable", componentId: "vui--up3fpq" }) ``;
-const TooltipText = styled__default.default(Text.Text).withConfig({ displayName: "vui--TooltipText", componentId: "vui--gpqzg1" }) `color:${index.theme.colors.neutral.grey.lightest};white-space:pre-line;overflow-wrap:break-word;display:inline;`;
-const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--1f7lcs5" }) `background-color:#333;height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:12;`;
-const Tip = styled__default.default.div.withConfig({ displayName: "vui--Tip", componentId: "vui--143ip1u" }) `transition:${({ duration }) => `opacity ${duration}ms`};&.tip-enter{opacity:0;}&.tip-enter-active{opacity:1;}&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
-const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--e33d0s" }) `font-size:14px;overflow:hidden;padding:16px 20px;border-radius:4px;box-shadow:0 6px 1em -0.5em rgba(0, 0, 0, 0.35);background:#333;color:#fff;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;`;
+const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--bq60f" }) `background-color:${index.theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${index.theme.layers.tooltip};`;
+const Tip = styled__default.default(framerMotion.motion.div).attrs({
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.15 },
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--1mrdz3b" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1q7vib9" }) `padding:${index.theme.sizes.base} ${index.theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.base};background:${index.theme.colors.neutral.ink.dark};`;
 
 exports.Container = Container;
-exports.Hoverable = Hoverable;
 exports.Tip = Tip;
-exports.TooltipText = TooltipText;
 exports.Triangle = Triangle;
 exports.Wrap = Wrap;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Tooltip/components/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../../Text';\n\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, TipProps, WrapProps } from './types';\n\nconst Container = styled.div`\n  display: inline-block;\n`;\n\nconst Hoverable = styled(Container)``;\n\nconst TooltipText = styled(Text)`\n  color: ${theme.colors.neutral.grey.lightest};\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  display: inline;\n`;\n\nconst Triangle = styled.div`\n  background-color: #333;\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: 12;\n`;\n\nconst Tip = styled.div<TipProps & TriangleProps>`\n  transition: ${({ duration }) => `opacity ${duration}ms`};\n\n  &.tip-enter {\n    opacity: 0;\n  }\n\n  &.tip-enter-active {\n    opacity: 1;\n  }\n\n  &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n    left: 8px;\n    bottom: 0px;\n  }\n  &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n    right: 8px;\n    bottom: 0px;\n  }\n\n  &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n    left: 8px;\n    top: -4px;\n  }\n  &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n    right: 8px;\n    top: -4px;\n  }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n  font-size: 14px;\n  overflow: hidden;\n  padding: 16px 20px;\n  border-radius: 4px;\n  box-shadow: 0 6px 1em -0.5em rgba(0, 0, 0, 0.35);\n  background: #333;\n  color: #fff;\n  z-index: 10;\n  min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n  max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n`;\n\nexport { Container, TooltipText, Tip, Hoverable, Wrap, Triangle };\n"],"names":["styled","Text","theme"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG;AAI5B,MAAM,SAAS,GAAGA,uBAAM,CAAC,SAAS,CAAC;AAEnC,MAAM,WAAW,GAAGA,uBAAM,CAACC,SAAI,CAAC,CACrB,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAM7C,MAAM,QAAQ,GAAGF,uBAAM,CAAC,GAAG;AAS3B,MAAM,GAAG,GAAGA,uBAAM,CAAC,GAAG,oFACN,CAAC,EAAE,QAAQ,EAAE,KAAK,WAAW,QAAQ,CAAA,EAAA,CAAI;AA6BnD,MAAA,IAAI,GAAGA,uBAAM,CAAC,SAAS,CAAC,CASf,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mKAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,GAAA;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n  display: inline-block;\n`;\n\nconst Triangle = styled.div`\n  background-color: ${theme.colors.neutral.ink.dark};\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: { duration: 0.15 },\n})<TriangleProps>`\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n    left: 8px;\n    bottom: 0px;\n  }\n  &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n    right: 8px;\n    bottom: 0px;\n  }\n\n  &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n    left: 8px;\n    top: -4px;\n  }\n  &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n    right: 8px;\n    top: -4px;\n  }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n  padding: ${theme.sizes.base} ${theme.sizes[5]};\n  overflow: hidden;\n  z-index: 10;\n\n  min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n  max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n  color: #fff;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.base};\n  background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":["styled","theme","motion"],"mappings":";;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG;AAItB,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACL,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAKtC,0EAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAG3B,MAAA,GAAG,GAAGD,uBAAM,CAACE,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAGF,uBAAM,CAAC,SAAS,CAAC,CACjB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,IAAI,CAAI,CAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjBA,WAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;;;;"}

package/dist/components/Tooltip/components/styled.d.ts

@@ -1,8 +1,19 @@
-import { TriangleProps, TipProps, WrapProps } from './types';
+import { TriangleProps, WrapProps } from './types';
 declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Hoverable: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const TooltipText: import("styled-components").StyledComponent<"span", any, {} & import("../../Text/types").TextProps, never>;
 declare const Triangle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Tip: import("styled-components").StyledComponent<"div", any, TipProps & TriangleProps, never>;
+declare const Tip: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+    transition: {
+        duration: number;
+    };
+} & TriangleProps, "animate" | "initial" | "exit" | "transition">;
 declare const Wrap: import("styled-components").StyledComponent<"div", any, WrapProps, never>;
-export { Container, TooltipText, Tip, Hoverable, Wrap, Triangle };
+export { Container, Tip, Wrap, Triangle };

package/dist/components/Tooltip/components/styled.js

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
-import { Text } from '../../Text/Text.js';
+import { motion } from 'framer-motion';
 import { theme } from '../../../theme/index.js';
 
 const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1exlfc5" }) `display:inline-block;`;
-const Hoverable = styled(Container).withConfig({ displayName: "vui--Hoverable", componentId: "vui--up3fpq" }) ``;
-const TooltipText = styled(Text).withConfig({ displayName: "vui--TooltipText", componentId: "vui--gpqzg1" }) `color:${theme.colors.neutral.grey.lightest};white-space:pre-line;overflow-wrap:break-word;display:inline;`;
-const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--1f7lcs5" }) `background-color:#333;height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:12;`;
-const Tip = styled.div.withConfig({ displayName: "vui--Tip", componentId: "vui--143ip1u" }) `transition:${({ duration }) => `opacity ${duration}ms`};&.tip-enter{opacity:0;}&.tip-enter-active{opacity:1;}&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
-const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--e33d0s" }) `font-size:14px;overflow:hidden;padding:16px 20px;border-radius:4px;box-shadow:0 6px 1em -0.5em rgba(0, 0, 0, 0.35);background:#333;color:#fff;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;`;
+const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--bq60f" }) `background-color:${theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${theme.layers.tooltip};`;
+const Tip = styled(motion.div).attrs({
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.15 },
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--1mrdz3b" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1q7vib9" }) `padding:${theme.sizes.base} ${theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.base};background:${theme.colors.neutral.ink.dark};`;
 
-export { Container, Hoverable, Tip, TooltipText, Triangle, Wrap };
+export { Container, Tip, Triangle, Wrap };
 //# sourceMappingURL=styled.js.map

package/dist/components/Tooltip/components/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../../Text';\n\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, TipProps, WrapProps } from './types';\n\nconst Container = styled.div`\n  display: inline-block;\n`;\n\nconst Hoverable = styled(Container)``;\n\nconst TooltipText = styled(Text)`\n  color: ${theme.colors.neutral.grey.lightest};\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  display: inline;\n`;\n\nconst Triangle = styled.div`\n  background-color: #333;\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: 12;\n`;\n\nconst Tip = styled.div<TipProps & TriangleProps>`\n  transition: ${({ duration }) => `opacity ${duration}ms`};\n\n  &.tip-enter {\n    opacity: 0;\n  }\n\n  &.tip-enter-active {\n    opacity: 1;\n  }\n\n  &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n    left: 8px;\n    bottom: 0px;\n  }\n  &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n    right: 8px;\n    bottom: 0px;\n  }\n\n  &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n    left: 8px;\n    top: -4px;\n  }\n  &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n    right: 8px;\n    top: -4px;\n  }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n  font-size: 14px;\n  overflow: hidden;\n  padding: 16px 20px;\n  border-radius: 4px;\n  box-shadow: 0 6px 1em -0.5em rgba(0, 0, 0, 0.35);\n  background: #333;\n  color: #fff;\n  z-index: 10;\n  min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n  max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n`;\n\nexport { Container, TooltipText, Tip, Hoverable, Wrap, Triangle };\n"],"names":[],"mappings":";;;;AAQA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG;AAI5B,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAEnC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CACrB,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAM7C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG;AAS3B,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,oFACN,CAAC,EAAE,QAAQ,EAAE,KAAK,WAAW,QAAQ,CAAA,EAAA,CAAI;AA6BnD,MAAA,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CASf,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mKAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,GAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n  display: inline-block;\n`;\n\nconst Triangle = styled.div`\n  background-color: ${theme.colors.neutral.ink.dark};\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: { duration: 0.15 },\n})<TriangleProps>`\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n    left: 8px;\n    bottom: 0px;\n  }\n  &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n    right: 8px;\n    bottom: 0px;\n  }\n\n  &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n    left: 8px;\n    top: -4px;\n  }\n  &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n    right: 8px;\n    top: -4px;\n  }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n  padding: ${theme.sizes.base} ${theme.sizes[5]};\n  overflow: hidden;\n  z-index: 10;\n\n  min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n  max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n  color: #fff;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.base};\n  background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":[],"mappings":";;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG;AAItB,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACL,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAKtC,0EAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAG3B,MAAA,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CACjB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAI,CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;"}

package/dist/components/Tooltip/components/types.d.ts

@@ -16,6 +16,5 @@ export declare enum Position {
 export interface TriangleProps {
     triangleOffsetSize: number;
 }
-export type TipProps = Pick<IConfig, 'duration'>;
 export type WrapProps = Pick<IConfig, 'tipMinWidth' | 'tipMaxWidth'>;
 export type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';

package/dist/components/Tooltip/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  duration: number;\n  side: Sides.TOP | Sides.BOTTOM;\n  triangleOffset: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":["Sides"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHWA,aAAK,KAALA,aAAK,GAGhB,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  side: Sides.TOP | Sides.BOTTOM;\n  triangleOffset: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":["Sides"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHWA,aAAK,KAALA,aAAK,GAGhB,EAAA,CAAA,CAAA;;"}

package/dist/components/Tooltip/types.d.ts

@@ -4,7 +4,6 @@ export declare enum Sides {
     TOP = "top"
 }
 export interface IConfig {
-    duration: number;
     side: Sides.TOP | Sides.BOTTOM;
     triangleOffset: number;
     tipMinWidth: number;

package/dist/components/Tooltip/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  duration: number;\n  side: Sides.TOP | Sides.BOTTOM;\n  triangleOffset: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHW,KAAK,KAAL,KAAK,GAGhB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n  BOTTOM = 'bottom',\n  TOP = 'top',\n}\n\nexport interface IConfig {\n  side: Sides.TOP | Sides.BOTTOM;\n  triangleOffset: number;\n  tipMinWidth: number;\n  tipMaxWidth: number;\n  tipOffset?: number;\n}\n\nexport interface TooltipProps {\n  children?: any;\n  text?: string;\n  content?: ReactNode;\n  config?: IConfig;\n  reversed?: boolean;\n  additionalOffset?: number;\n  className?: string;\n  withTriangle?: boolean;\n  unmountOnExit?: boolean;\n  initialShouldShow?: boolean;\n  useReactPortal?: boolean;\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHW,KAAK,KAAL,KAAK,GAGhB,EAAA,CAAA,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.5.2",
+  "version": "9.6.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",