@veeqo/ui 14.9.0-beta-2 → 14.9.1

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

@@ -6,14 +6,13 @@ export declare enum ToastTypes {
     merge = "merge"
 }
 export type ToastType = Record<ToastTypes, {
-    accentColor: string;
     icon: ReactElement;
 }>;
 export type ToastPropTypes = Omit<Notification, 'key'> & {
     className?: string;
     e2eClassName?: string;
     last: boolean;
-    minWidth: number | string;
+    minWidth?: string;
     onClose: () => void;
 };
 export type ToastsLayoutPropTypes = {

package/dist/components/Tooltip/Tooltip.cjs

@@ -2,9 +2,11 @@
 
 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');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Tooltip_module = require('./Tooltip.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,26 +15,28 @@ 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 Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = React.useState(null);
-    const classNames = {
-        container: className && `${className} ${className}-container`,
-        tip: className && `${className}-tip`,
-        wrap: className && `${className}-wrap`,
-        triangle: className && `${className}-triangle`,
-        hoverable: className && `${className}-hoverable`,
-    };
     const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
+    // Backward-compatible suffix classes for monolith consumers that
+    // target sub-elements via the className prefix convention.
+    const legacyClassNames = className
+        ? {
+            tip: `${className}-tip`,
+            wrap: `${className}-wrap`,
+            triangle: `${className}-triangle`,
+        }
+        : undefined;
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    return (React__default.default.createElement(styled.Container, { className: classNames.container },
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.container, className, className && `${className}-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)));
+            React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
+        React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([Tooltip_module.hoverable, hoverableClassName, className && `${className}-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, { 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    <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  );\n};\n"],"names":["React","Portal","useState","Container","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,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,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;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,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCH,sBAAA,CAAA,aAAA,CAACI,4BAAe,EAAA,IAAA,EACb,UAAU,KACTJ,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACK,6BAAc,EAAA,EACb,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,EAAA,CAChB,CACiB,CACtB,CACe;QAElBL,sBAAA,CAAA,aAAA,CAACG,gBAAS,EAAA,EACR,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 { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\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  hoverableClassName,\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  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Portal","useState","buildClassnames","tooltipStyles","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,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,kBAAkB,EAClB,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,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,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,QACEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GJ,sBAAA,CAAA,aAAA,CAACK,4BAAe,EAAA,IAAA,EACb,UAAU,KACTL,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACM,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}

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

@@ -1,2 +1,2 @@
 import { TooltipProps } from './types';
-export declare const Tooltip: ({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;
+export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;

package/dist/components/Tooltip/Tooltip.js

@@ -1,32 +1,36 @@
 import React__default, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import { Container } from './components/styled.js';
 import { TooltipPopover } from './components/TooltipPopover.js';
 import { Portal } from '../Portal/Portal.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import tooltipStyles from './Tooltip.module.scss.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 Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = useState(null);
-    const classNames = {
-        container: className && `${className} ${className}-container`,
-        tip: className && `${className}-tip`,
-        wrap: className && `${className}-wrap`,
-        triangle: className && `${className}-triangle`,
-        hoverable: className && `${className}-hoverable`,
-    };
     const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
+    // Backward-compatible suffix classes for monolith consumers that
+    // target sub-elements via the className prefix convention.
+    const legacyClassNames = className
+        ? {
+            tip: `${className}-tip`,
+            wrap: `${className}-wrap`,
+            triangle: `${className}-triangle`,
+        }
+        : undefined;
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    return (React__default.createElement(Container, { className: classNames.container },
+    return (React__default.createElement("div", { className: buildClassnames([tooltipStyles.container, className, className && `${className}-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)));
+            React__default.createElement(TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
+        React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-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, { 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    <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  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,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,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;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,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,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,EAAA,CAChB,CACiB,CACtB,CACe;QAElBA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,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 { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\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  hoverableClassName,\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  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,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,kBAAkB,EAClB,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;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,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,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}

package/dist/components/Tooltip/Tooltip.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+
+module.exports = tooltipStyles;
+//# sourceMappingURL=Tooltip.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n  display: inline-block;\n}\n\n.hoverable {\n  display: inline-block;\n}\n\n.tip {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > .triangle {\n    left: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='top-end'] > .triangle {\n    right: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='bottom-start'] > .triangle {\n    left: 8px;\n    top: -4px;\n  }\n\n  &[data-popper-placement^='bottom-end'] > .triangle {\n    right: 8px;\n    top: -4px;\n  }\n}\n\n.wrap {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,opCAAA;;;;;"}

package/dist/components/Tooltip/Tooltip.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+
+export { tooltipStyles as default };
+//# sourceMappingURL=Tooltip.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n  display: inline-block;\n}\n\n.hoverable {\n  display: inline-block;\n}\n\n.tip {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > .triangle {\n    left: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='top-end'] > .triangle {\n    right: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='bottom-start'] > .triangle {\n    left: 8px;\n    top: -4px;\n  }\n\n  &[data-popper-placement^='bottom-end'] > .triangle {\n    right: 8px;\n    top: -4px;\n  }\n}\n\n.wrap {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,opCAAA;;;;;"}

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

@@ -1,11 +1,15 @@
 'use strict';
 
 var React = require('react');
+var framerMotion = require('framer-motion');
 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');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
+var Tooltip_module = require('../Tooltip.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,15 +17,14 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const defaultConfig = {
     side: types.Sides.TOP,
-    triangleOffset: 6,
     tipMinWidth: 60,
     tipMaxWidth: 340,
 };
-const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
+const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }) => {
     const [popperElement, setPopperElement] = React.useState(null);
     const usedConfig = { ...defaultConfig, ...config };
-    const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
-    const { styles, attributes } = reactPopper.usePopper(hoverableElement, popperElement, {
+    const { side, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { styles: popperStyles, attributes } = reactPopper.usePopper(hoverableElement, popperElement, {
         placement: `${side}-${reversed ? 'end' : 'start'}`,
         modifiers: [
             {
@@ -32,13 +35,13 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
             },
         ],
     });
-    const tooltipStyles = {
-        ...styles.popper,
+    const tipInlineStyles = {
+        ...popperStyles.popper,
         zIndex: index.theme.layers.tooltip,
     };
-    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 !== void 0 ? 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 })));
+    return (React__default.default.createElement(framerMotion.motion.div, { key: "tooltip-tip", className: buildClassnames.buildClassnames([Tooltip_module.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: setPopperElement, style: tipInlineStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ...attributes.popper, role: "tooltip" },
+        React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars.assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.default.createElement(Text.Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
+        withTriangle && React__default.default.createElement("div", { id: "veeqo-components-triangle", className: buildClassnames.buildClassnames([Tooltip_module.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) })));
 };
 
 exports.TooltipPopover = TooltipPopover;

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, 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,CAAA,CAAe;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,EAAA,GAChB,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,WAAI,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAA,EACjF,OAAO,aAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNF,sBAAA,CAAA,aAAA,CAACG,SAAI,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAChD,IAAI,CACA,CACR,CACI;AACN,QAAA,YAAY,IAAIH,sBAAA,CAAA,aAAA,CAACI,eAAQ,EAAA,EAAC,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAA,CAAI,CACxF;AAEV;;;;"}
+{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { usePopper } from 'react-popper';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  legacyClassNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles: popperStyles, 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 tipInlineStyles = {\n    ...popperStyles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <motion.div\n      key=\"tooltip-tip\"\n      className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n      ref={setPopperElement}\n      style={tipInlineStyles}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: 0.15 }}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <div\n        className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n        style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n      >\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </div>\n      {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n    </motion.div>\n  );\n};\n"],"names":["Sides","useState","usePopper","theme","React","motion","buildClassnames","tooltipStyles","assignCssVars","Text"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TooltipPopoverProps } from './types';
-export declare const TooltipPopover: ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }: TooltipPopoverProps) => React.JSX.Element;
+export declare const TooltipPopover: ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }: TooltipPopoverProps) => React.JSX.Element;

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

@@ -1,21 +1,24 @@
 import React__default, { useState } from 'react';
+import { motion } from 'framer-motion';
 import { usePopper } from 'react-popper';
-import { Tip, Wrap, Triangle } from './styled.js';
 import { Sides } from '../types.js';
 import { theme } from '../../../theme/index.js';
 import { Text } from '../../Text/Text.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
+import tooltipStyles from '../Tooltip.module.scss.js';
 
 const defaultConfig = {
     side: Sides.TOP,
-    triangleOffset: 6,
     tipMinWidth: 60,
     tipMaxWidth: 340,
 };
-const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
+const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const usedConfig = { ...defaultConfig, ...config };
-    const { side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
-    const { styles, attributes } = usePopper(hoverableElement, popperElement, {
+    const { side, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { styles: popperStyles, attributes } = usePopper(hoverableElement, popperElement, {
         placement: `${side}-${reversed ? 'end' : 'start'}`,
         modifiers: [
             {
@@ -26,13 +29,13 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
             },
         ],
     });
-    const tooltipStyles = {
-        ...styles.popper,
+    const tipInlineStyles = {
+        ...popperStyles.popper,
         zIndex: theme.layers.tooltip,
     };
-    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 !== void 0 ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
-        withTriangle && React__default.createElement(Triangle, { id: "veeqo-components-triangle", className: classNames.triangle })));
+    return (React__default.createElement(motion.div, { key: "tooltip-tip", className: buildClassnames([tooltipStyles.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: setPopperElement, style: tipInlineStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ...attributes.popper, role: "tooltip" },
+        React__default.createElement("div", { className: buildClassnames([tooltipStyles.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
+        withTriangle && React__default.createElement("div", { id: "veeqo-components-triangle", className: buildClassnames([tooltipStyles.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) })));
 };
 
 export { TooltipPopover };

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, 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,CAAA,CAAe;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,EAAA,GAChB,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAA,EACjF,OAAO,aAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAChD,IAAI,CACA,CACR,CACI;AACN,QAAA,YAAY,IAAIA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAA,CAAI,CACxF;AAEV;;;;"}
+{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { usePopper } from 'react-popper';\nimport { IConfig, Sides } from '../types';\nimport { Placement, TooltipPopoverProps } from './types';\nimport { theme } from '../../../theme';\nimport { Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n  side: Sides.TOP,\n  tipMinWidth: 60,\n  tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n  content,\n  text,\n  hoverableElement,\n  config,\n  reversed,\n  withTriangle,\n  legacyClassNames,\n}: TooltipPopoverProps) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const usedConfig = { ...defaultConfig, ...config };\n  const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n  const { styles: popperStyles, 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 tipInlineStyles = {\n    ...popperStyles.popper,\n    zIndex: theme.layers.tooltip,\n  };\n\n  return (\n    <motion.div\n      key=\"tooltip-tip\"\n      className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n      ref={setPopperElement}\n      style={tipInlineStyles}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: 0.15 }}\n      {...attributes.popper}\n      role=\"tooltip\"\n    >\n      <div\n        className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n        style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n      >\n        {content ?? (\n          <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n            {text}\n          </Text>\n        )}\n      </div>\n      {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n    </motion.div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,20 +1,15 @@
-import { IConfig, TooltipProps } from '../types';
+import { TooltipProps } from '../types';
+export type LegacyClassNames = {
+    tip?: string;
+    wrap?: string;
+    triangle?: string;
+};
 export type TooltipPopoverProps = {
     hoverableElement: HTMLElement | null;
-    classNames: {
-        container: string | undefined;
-        tip: string | undefined;
-        wrap: string | undefined;
-        triangle: string | undefined;
-        hoverable: string | undefined;
-    };
+    legacyClassNames?: LegacyClassNames;
 } & Pick<TooltipProps, 'config' | 'withTriangle' | 'reversed' | 'content' | 'text'>;
 export declare enum Position {
     end = "end",
     start = "start"
 }
-export interface TriangleProps {
-    triangleOffsetSize: number;
-}
-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  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,GAAA,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  /** @deprecated No longer used. Triangle positioning is handled by CSS Module classes. */\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  hoverableClassName?: 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,GAAA,EAAA,CAAA,CAAA;;"}

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

@@ -5,7 +5,8 @@ export declare enum Sides {
 }
 export interface IConfig {
     side: Sides.TOP | Sides.BOTTOM;
-    triangleOffset: number;
+    /** @deprecated No longer used. Triangle positioning is handled by CSS Module classes. */
+    triangleOffset?: number;
     tipMinWidth: number;
     tipMaxWidth: number;
     tipOffset?: number;
@@ -18,6 +19,7 @@ export interface TooltipProps {
     reversed?: boolean;
     additionalOffset?: number;
     className?: string;
+    hoverableClassName?: string;
     withTriangle?: boolean;
     unmountOnExit?: boolean;
     initialShouldShow?: boolean;

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  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,GAAA,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  /** @deprecated No longer used. Triangle positioning is handled by CSS Module classes. */\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  hoverableClassName?: 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,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/UploadFile/UploadFile.cjs

@@ -4,8 +4,7 @@ var React = require('react');
 var index = require('../../theme/index.cjs');
 var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
 var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-var UploadFile_module = require('./UploadFile.module.scss.cjs');
+var styled = require('./styled.cjs');
 var constants = require('./constants.cjs');
 var UploadCopy = require('./components/UploadCopy/UploadCopy.cjs');
 var DropCopy = require('./components/DropCopy/DropCopy.cjs');
@@ -105,11 +104,7 @@ const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MA
                     maxSizeCopy,
                     React__default.default.createElement("br", null),
                     acceptedTypesCopy),
-                React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
-                        UploadFile_module.dropZone,
-                        isDragOver ? UploadFile_module.dragOver : undefined,
-                        hasError ? UploadFile_module.hasError : undefined,
-                    ]), "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                React__default.default.createElement(styled.DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
                     isDragOver ? React__default.default.createElement(DropCopy.DropCopy, null) : React__default.default.createElement(UploadCopy.UploadCopy, null),
                     React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
         React__default.default.createElement(FlexCol.FlexCol, null,

package/dist/components/UploadFile/UploadFile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './UploadFile.module.scss';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <div\n              className={buildClassnames([\n                styles.dropZone,\n                isDragOver ? styles.dragOver : undefined,\n                hasError ? styles.hasError : undefined,\n              ])}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </div>\n          </FlexCol>\n        </Text>\n        <FlexCol>\n          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </FlexCol>\n    );\n  },\n);\n"],"names":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","FlexCol","labelStyles","Text","buildClassnames","styles","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","LockIcon","UploadedFile"],"mappings":"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"}
+{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <DropZoneContainer\n              hasError={hasError}\n              isDragOver={isDragOver}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </FlexCol>\n        </Text>\n        <FlexCol>\n          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </FlexCol>\n    );\n  },\n);\n"],"names":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","FlexCol","labelStyles","Text","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","LockIcon","UploadedFile"],"mappings":"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"}

package/dist/components/UploadFile/UploadFile.js

@@ -2,8 +2,7 @@ import React__default, { forwardRef, useImperativeHandle, useState, useCallback,
 import { theme } from '../../theme/index.js';
 import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
 import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import styles from './UploadFile.module.scss.js';
+import { DropZoneContainer } from './styled.js';
 import { DEFAULT_MAXIMUM_MULTIPLE_FILES, DEFAULT_MAXIMUM_FILE_BYTES, FileSizeUnit } from './constants.js';
 import { UploadCopy } from './components/UploadCopy/UploadCopy.js';
 import { DropCopy } from './components/DropCopy/DropCopy.js';
@@ -99,11 +98,7 @@ const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES
                     maxSizeCopy,
                     React__default.createElement("br", null),
                     acceptedTypesCopy),
-                React__default.createElement("div", { className: buildClassnames([
-                        styles.dropZone,
-                        isDragOver ? styles.dragOver : undefined,
-                        hasError ? styles.hasError : undefined,
-                    ]), "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                React__default.createElement(DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
                     isDragOver ? React__default.createElement(DropCopy, null) : React__default.createElement(UploadCopy, null),
                     React__default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
         React__default.createElement(FlexCol, null,