@stokr/components-library 3.0.72 → 3.0.73

package/dist/components/Chips/Chip.js

@@ -7,7 +7,7 @@ const Chip = ({ children, isActive = false, onClick = () => {
 }, tooltip = null, tooltipProps, ...props }) => {
   return /* @__PURE__ */ jsxs(StyledChip, { onClick, isActive, ...props, children: [
     /* @__PURE__ */ jsx(ChipText, { children }),
-    tooltip && /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: "top", noMarginLeft: true, noMarginRight: true, ...tooltipProps })
+    tooltip && /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: "top", noMarginLeft: true, noMarginRight: true, tooltipProps })
   ] });
 };
 Chip.propTypes = {

package/dist/components/CopyToClipboardTooltip/CopyToClipboardTooltip.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { CopyToClipboardButton } from "../CryptoAddress/CryptoAddress.styles.js";
+import { copyTextToClipboard } from "../../utils/copy-text-to-clipboard.js";
+import { CopyTrigger } from "./CopyToClipboardTooltip.styles.js";
+const CopyToClipboardTooltip = ({
+  value,
+  buttonStyle,
+  onCopy,
+  children,
+  copiedLabel = "Copied to clipboard!",
+  idleLabel = "Click to copy to clipboard.",
+  resetAfter = 1500
+}) => {
+  const [copyNonce, setCopyNonce] = useState(0);
+  const copied = copyNonce > 0;
+  useEffect(() => {
+    if (!copyNonce) return void 0;
+    const timer = setTimeout(() => setCopyNonce(0), resetAfter);
+    return () => clearTimeout(timer);
+  }, [copyNonce, resetAfter]);
+  const copy = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    copyTextToClipboard(value, () => {
+      setCopyNonce((n) => n + 1);
+      onCopy?.(value);
+    });
+  };
+  return /* @__PURE__ */ jsx(Tooltip, { placement: "top", content: copied ? copiedLabel : idleLabel, interactive: false, children: /* @__PURE__ */ jsx(
+    CopyTrigger,
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": idleLabel,
+      onClick: copy,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") copy(event);
+      },
+      children: children || /* @__PURE__ */ jsx(CopyToClipboardButton, { style: buttonStyle })
+    }
+  ) });
+};
+export {
+  CopyToClipboardTooltip
+};

package/dist/components/CopyToClipboardTooltip/CopyToClipboardTooltip.styles.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+const CopyTrigger = styled.span`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  line-height: 0;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+`;
+export {
+  CopyTrigger
+};

package/dist/components/CryptoAddress/CryptoAddress.js

@@ -1,25 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useState } from "react";
+import React__default from "react";
 import PropTypes from "prop-types";
-import { Tooltip } from "react-tippy";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Container, DataWrapper, CheckMark, Head, Title, Status, TitleSide, AddressWrap, Address, Body, DataBox, Value, Equal, InfoBox, OptionsWrapper, CopyToClipboardButton } from "./CryptoAddress.styles.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { CopyToClipboardTooltip } from "../CopyToClipboardTooltip/CopyToClipboardTooltip.js";
+import { Container, DataWrapper, CheckMark, Head, Title, Status, TitleSide, AddressWrap, Address, Body, DataBox, Value, Equal, InfoBox, OptionsWrapper } from "./CryptoAddress.styles.js";
 import stdin_default$1 from "./RadioWrap.js";
 import stdin_default$2 from "./ComponentWrap.js";
 import getShortAddress from "../../utils/get-short-address.js";
-const copyToClipBoard = (value, isCopied, setCopy) => /* @__PURE__ */ jsx(
-  Tooltip,
-  {
-    position: "top",
-    title: isCopied ? "Copied to clipboard!" : "Click to copy to clipboard.",
-    theme: "light",
-    arrow: true,
-    hideOnClick: false,
-    onHidden: () => setCopy(false),
-    duration: 200,
-    children: /* @__PURE__ */ jsx(CopyToClipboard, { text: value, onCopy: () => setCopy(true), children: /* @__PURE__ */ jsx(CopyToClipboardButton, {}) })
-  }
-);
+const copyToClipBoard = (value) => /* @__PURE__ */ jsx(CopyToClipboardTooltip, { value });
 const defaultData = {
   value: "",
   unit: "",
@@ -57,7 +45,6 @@ const CryptoAddress = ({
   dataValueStyle,
   valueChildMarginLeft
 }) => {
-  const [copiedAddressToClipboard, setCopiedAddressToClipboard] = useState(false);
   return /* @__PURE__ */ jsx(Container, { style: containerStyle, children: /* @__PURE__ */ jsx(stdin_default$1, { radio, hide: radio && radio.hide, children: /* @__PURE__ */ jsx(stdin_default$2, { wrapped, borderTop, borderBottom: !noBorderBottom && borderBottom, children: /* @__PURE__ */ jsxs(DataWrapper, { withOptions: !!sideOptions, style: wrapperStyle, children: [
     radio && !radio.hide && /* @__PURE__ */ jsx(CheckMark, {}),
     /* @__PURE__ */ jsxs(Head, { noBody, noHead, flexHead, style: headStyle, children: [
@@ -67,8 +54,8 @@ const CryptoAddress = ({
       ] }),
       /* @__PURE__ */ jsxs(TitleSide, { children: [
         address && /* @__PURE__ */ jsxs(AddressWrap, { children: [
-          /* @__PURE__ */ jsx(Tooltip, { position: "top", title: address, theme: "light", arrow: true, duration: 200, children: /* @__PURE__ */ jsx(Address, { children: getShortAddress(address) }) }),
-          /* @__PURE__ */ jsx("div", { onClick: (e) => e.preventDefault(), children: copyToClipBoard(address, copiedAddressToClipboard, setCopiedAddressToClipboard) })
+          /* @__PURE__ */ jsx(Tooltip, { placement: "top", content: address, children: /* @__PURE__ */ jsx(Address, { children: getShortAddress(address) }) }),
+          /* @__PURE__ */ jsx("div", { onClick: (e) => e.preventDefault(), children: copyToClipBoard(address) })
         ] }),
         src && /* @__PURE__ */ jsx("img", { src, alt: "project logo", height: "50", width: 100, style: { objectFit: "contain" } })
       ] })
@@ -77,19 +64,8 @@ const CryptoAddress = ({
       /* @__PURE__ */ jsxs(DataBox, { style: dataBoxStyle, children: [
         data.value && /* @__PURE__ */ jsxs(Value, { fontSize, style: dataValueStyle, childMarginLeft: valueChildMarginLeft, children: [
           data.unit && `${data.unit} `,
-          data.shortAddress ? /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              position: "top",
-              title: data.value,
-              theme: "light",
-              arrow: true,
-              duration: 200,
-              style: { margin: 0 },
-              children: getShortAddress(data.value)
-            }
-          ) : data.value,
-          data.tooltip && /* @__PURE__ */ jsx("div", { children: copyToClipBoard(data.value, copiedAddressToClipboard, setCopiedAddressToClipboard) })
+          data.shortAddress ? /* @__PURE__ */ jsx(Tooltip, { placement: "top", content: data.value, children: getShortAddress(data.value) }) : data.value,
+          data.tooltip && /* @__PURE__ */ jsx("div", { children: copyToClipBoard(data.value) })
         ] }),
         data.eqValue && /* @__PURE__ */ jsxs(Equal, { fontSize: eqValueFontSize, style: { eqValueStyle }, children: [
           "= ",

package/dist/components/InfoIcon/InfoIcon.js

@@ -1,12 +1,34 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import DOMPurify from "dompurify";
-import PropTypes from "prop-types";
-import { useId } from "react";
 import parse from "html-react-parser";
-import { Tooltip } from "react-tippy";
-import { colors } from "../../styles/colors.js";
 import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
-import { Container, ArrowColorGlobalStyle, Icon } from "./InfoIcon.styles.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { Container, Icon } from "./InfoIcon.styles.js";
+const DEAD_TIPPY_PROPS = [
+  "animation",
+  "animateFill",
+  "arrowSize",
+  "distance",
+  "duration",
+  "followCursor",
+  "hideOnClick",
+  "inertia",
+  "interactiveBorder",
+  "offset",
+  "onHidden",
+  "onRequestClose",
+  "onShow",
+  "onShown",
+  "popperOptions",
+  "rawTemplate",
+  "size",
+  "sticky",
+  "stickyDuration",
+  "tag",
+  "touchHold",
+  "unmountHTMLWhenHide",
+  "useContext"
+];
 const InfoIcon = ({
   title = null,
   html = null,
@@ -14,67 +36,56 @@ const InfoIcon = ({
   noMargin = false,
   noMarginLeft = false,
   noMarginRight = false,
-  noIcon,
-  disabled,
-  fullWidth,
+  noIcon = false,
+  disabled = false,
+  fullWidth = false,
   arrow = true,
-  arrowColor = colors.blue,
-  theme = "light",
+  showArrow,
+  arrowColor,
+  theme,
   trigger,
   outline = false,
   containerStyle,
-  ...props
+  tooltipProps,
+  children,
+  style,
+  ...rest
 }) => {
-  const htmlContent = typeof html === "string" ? parse(DOMPurify.sanitize(html)) : html;
-  const instanceToken = `info-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
-  const tippyTheme = arrowColor ? `${theme} ${instanceToken}` : theme;
+  const content = html != null ? typeof html === "string" ? parse(DOMPurify.sanitize(html)) : html : title;
+  const containerProps = {};
+  Object.keys(rest).forEach((key) => {
+    if (DEAD_TIPPY_PROPS.includes(key)) {
+      return;
+    }
+    containerProps[key] = rest[key];
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IoniconsStyles, {}),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Container,
       {
         noMargin,
         noMarginLeft,
         noMarginRight,
         fullWidth,
-        style: containerStyle,
-        children: [
-          arrowColor && /* @__PURE__ */ jsx(ArrowColorGlobalStyle, { themeName: instanceToken, color: arrowColor }),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              ...props,
-              position,
-              title,
-              trigger,
-              html: htmlContent,
-              useContext: htmlContent != null,
-              theme: tippyTheme,
-              arrow: arrowColor ? true : arrow,
-              duration: 200,
-              disabled,
-              children: noIcon ? props.children : /* @__PURE__ */ jsx(Icon, { outline })
-            }
-          )
-        ]
+        style: { ...style, ...containerStyle },
+        ...containerProps,
+        children: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content,
+            placement: position,
+            disabled,
+            showArrow: showArrow ?? arrow,
+            arrowColor,
+            ...tooltipProps,
+            children: noIcon ? children : /* @__PURE__ */ jsx(Icon, { outline })
+          }
+        )
       }
     )
   ] });
 };
-InfoIcon.propTypes = {
-  title: PropTypes.string,
-  html: PropTypes.node,
-  position: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-  noMargin: PropTypes.bool,
-  noMarginLeft: PropTypes.bool,
-  noMarginRight: PropTypes.bool,
-  outline: PropTypes.bool,
-  children: PropTypes.node,
-  theme: PropTypes.string,
-  trigger: PropTypes.oneOf(["click", "focus"]),
-  arrow: PropTypes.bool,
-  arrowColor: PropTypes.string
-};
 export {
   InfoIcon,
   Container as InfoIconContainer,

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -1,21 +1,8 @@
-import styled, { createGlobalStyle } from "styled-components";
+import styled from "styled-components";
 import theme from "../../styles/theme.js";
-const ArrowColorGlobalStyle = createGlobalStyle`
-  .tippy-popper[x-placement^='top'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
-    border-top-color: ${(props) => props.color} !important;
-  }
-  .tippy-popper[x-placement^='bottom'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
-    border-bottom-color: ${(props) => props.color} !important;
-  }
-  .tippy-popper[x-placement^='left'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
-    border-left-color: ${(props) => props.color} !important;
-  }
-  .tippy-popper[x-placement^='right'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
-    border-right-color: ${(props) => props.color} !important;
-  }
-`;
+const CONTAINER_OWN_PROPS = ["noMargin", "noMarginLeft", "noMarginRight", "fullWidth"];
 const Container = styled.div.withConfig({
-  shouldForwardProp: (props) => !["noMargin", "noMarginLeft", "noMarginRight", "fullWidth"].includes(props)
+  shouldForwardProp: (prop) => !CONTAINER_OWN_PROPS.includes(prop)
 })`
   display: inline-block;
   vertical-align: middle;
@@ -23,37 +10,20 @@ const Container = styled.div.withConfig({
   font-size: 0;
   line-height: 0;
 
-  ${(props) => props.noMargin && `
-    margin: 0;
-  `}
-  ${(props) => props.noMarginLeft && `
-    margin-left: 0;
-  `}
-  ${(props) => props.noMarginRight && `
-    margin-right: 0;
-  `}
+  ${(props) => props.noMargin && `margin: 0;`}
+  ${(props) => props.noMarginLeft && `margin-left: 0;`}
+  ${(props) => props.noMarginRight && `margin-right: 0;`}
 
   ${(props) => props.fullWidth && `
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   `}
-
-  & > div {
-    position: relative;
-    display: inline-block !important;
-
-    ${(props) => props.fullWidth && `
-      width: 100%;
-      height: 100%;
-      display: flex !important;
-      align-content: center;
-      flex-wrap: wrap;
-      justify-content: center;
-  `}
-  }
 `;
 const Icon = styled.i.withConfig({
-  shouldForwardProp: (props) => !["outline"].includes(props)
+  shouldForwardProp: (prop) => prop !== "outline"
 }).attrs((props) => ({
   className: props.outline ? "ion ion-md-information-circle-outline" : "ion ion-md-information-circle"
 }))`
@@ -64,7 +34,6 @@ const Icon = styled.i.withConfig({
   vertical-align: middle;
   font-size: 16px;
   line-height: 16px;
-  vertical-align: middle;
   color: ${() => theme.cGrey2};
   transition: color 0.2s;
 
@@ -73,7 +42,6 @@ const Icon = styled.i.withConfig({
   }
 `;
 export {
-  ArrowColorGlobalStyle,
   Container,
   Icon
 };

package/dist/components/Payment/PaymentDisplay.js

@@ -1,11 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import "react";
 import styled from "styled-components";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { colors } from "../../styles/colors.js";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Tooltip } from "react-tippy";
-import { CopyToClipboardButton } from "../CryptoAddress/CryptoAddress.styles.js";
+import { CopyToClipboardTooltip } from "../CopyToClipboardTooltip/CopyToClipboardTooltip.js";
 import stdin_default from "../QRCode/QRCode.js";
 import { SectionTitle } from "../SectionTitle/SectionTitle.styles.js";
 import { StatusDot } from "../StatusDot/StatusDot.js";
@@ -110,26 +108,6 @@ const AddressDescription = styled.p`
   text-align: center;
   color: ${colors.grey2};
 `;
-const CopyToClipBoardTooltip = ({ value, buttonStyle, onCopy }) => {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = () => {
-    setCopied(true);
-    if (onCopy) onCopy(value);
-  };
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      position: "top",
-      title: copied ? "Copied to clipboard!" : "Click to copy to clipboard",
-      theme: "light",
-      arrow: true,
-      hideOnClick: false,
-      onHidden: () => setCopied(false),
-      duration: 200,
-      children: /* @__PURE__ */ jsx(CopyToClipboard, { text: value, onCopy: handleCopy, children: /* @__PURE__ */ jsx(CopyToClipboardButton, { style: buttonStyle }) })
-    }
-  );
-};
 const PaymentDisplay = ({
   amount,
   currency = "BTC",
@@ -181,7 +159,7 @@ const PaymentDisplay = ({
           /* @__PURE__ */ jsx(AmountCurrency, { style: amountTextStyle, children: currency })
         ] }),
         showCopyIcons && /* @__PURE__ */ jsx(
-          CopyToClipBoardTooltip,
+          CopyToClipboardTooltip,
           {
             value: amount.toString(),
             buttonStyle: copyButtonStyle || { height: 22, width: 22 },
@@ -197,7 +175,7 @@ const PaymentDisplay = ({
         /* @__PURE__ */ jsxs(AddressRow, { children: [
           /* @__PURE__ */ jsx(AddressText, { style: addressTextStyle, children: address }),
           showCopyIcons && /* @__PURE__ */ jsx(
-            CopyToClipBoardTooltip,
+            CopyToClipboardTooltip,
             {
               value: address,
               buttonStyle: copyButtonStyle || { height: 16, width: 16 },

package/dist/components/StatusTag/StatusTag.js

@@ -96,7 +96,7 @@ const StatusTag = ({
     )
   ] }) });
   if (tooltip) {
-    return /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: "top", noIcon: true, noMarginLeft: true, noMarginRight: true, ...tooltipProps, children: content });
+    return /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: "top", noIcon: true, noMarginLeft: true, noMarginRight: true, tooltipProps, children: content });
   }
   return content;
 };

package/dist/components/ToDoList/ToDoList.js

@@ -6,7 +6,7 @@ import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js
 import { Container, TitleContainer, PendingCounter, Title, Subtitle } from "./ToDoList.styles.js";
 import stdin_default from "./ToDoListTask.js";
 import { Icon } from "./ToDoListTask.styles.js";
-import { Tooltip } from "react-tippy";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 const ToDoTaskState = {
   REJECTED: "rejected",
   DENIED: "rejected",
@@ -98,14 +98,9 @@ const ToDoList = ({
         /* @__PURE__ */ jsx(
           Tooltip,
           {
-            position: "right",
-            title: "Before you invest you must have registered the wallet that can hold your purchased securities. Click below and register it to proceed with your investment.",
-            theme: "light",
-            arrow: true,
-            duration: 200,
-            size: 40,
-            style: { cursor: "help", fontSize: 16 },
-            children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() })
+            placement: "right",
+            content: "Before you invest you must have registered the wallet that can hold your purchased securities. Click below and register it to proceed with your investment.",
+            children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault(), style: { fontSize: 16 } })
           }
         )
       ] }) }),

package/dist/components/ToDoList/ToDoListTask.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import PropTypes from "prop-types";
-import { Tooltip } from "react-tippy";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 import { Container, IconContainer, Icon, Content, TitleContainer, Title, State } from "./ToDoListTask.styles.js";
 import { TooltipIcon } from "../Icon/Icon.style.js";
 import setRedirectCookie from "../../utils/set-redirect-cookie.js";
@@ -42,7 +42,7 @@ const ToDoTask = ({
           /* @__PURE__ */ jsxs(Content, { children: [
             /* @__PURE__ */ jsxs(TitleContainer, { children: [
               /* @__PURE__ */ jsx(Title, { link: link || openModal, state, children: title }),
-              tooltip && /* @__PURE__ */ jsx(Tooltip, { position: "right", title: tooltip, theme: "light", arrow: true, duration: 200, children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() }) })
+              tooltip && /* @__PURE__ */ jsx(Tooltip, { placement: "right", content: tooltip, children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() }) })
             ] }),
             message ? /* @__PURE__ */ jsx(State, { children: message }) : ""
           ] })
@@ -53,7 +53,7 @@ const ToDoTask = ({
       /* @__PURE__ */ jsxs(Content, { children: [
         /* @__PURE__ */ jsxs(TitleContainer, { children: [
           /* @__PURE__ */ jsx(Title, { state, children: title }),
-          tooltip && /* @__PURE__ */ jsx(Tooltip, { position: "right", title: tooltip, theme: "light", arrow: true, duration: 200, children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() }) })
+          tooltip && /* @__PURE__ */ jsx(Tooltip, { placement: "right", content: tooltip, children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() }) })
         ] }),
         message ? /* @__PURE__ */ jsx(State, { children: message }) : ""
       ] })

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,143 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useRef, isValidElement, cloneElement, useEffect, useLayoutEffect } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useInteractions, useHover, safePolygon, useFocus, useClick, useDismiss, useRole, useTransitionStyles, useMergeRefs, FloatingPortal, FloatingArrow } from "@floating-ui/react";
+import theme from "../../styles/theme.js";
+import { TriggerWrapper, Bubble } from "./Tooltip.styles.js";
+const useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+const PLACEMENTS = ["top", "bottom", "left", "right"];
+const FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
+const MEMO = /* @__PURE__ */ Symbol.for("react.memo");
+const acceptsDomRef = (type) => {
+  if (typeof type === "string") return true;
+  const tag = type?.$$typeof;
+  if (tag === FORWARD_REF) return true;
+  if (tag === MEMO) return acceptsDomRef(type.type);
+  return false;
+};
+const ARROW_WIDTH = 12;
+const ARROW_HEIGHT = 6;
+const GAP = 4;
+const Tooltip = ({
+  content,
+  children,
+  placement = "bottom",
+  disabled = false,
+  delay = { open: 100, close: 0 },
+  showArrow = true,
+  arrowColor,
+  maxWidth = 260,
+  interactive = false,
+  open: controlledOpen,
+  onOpenChange,
+  reference,
+  className,
+  style,
+  zIndex = 9999
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? !!controlledOpen : uncontrolledOpen;
+  const hasContent = content !== null && content !== void 0 && content !== "";
+  const inert = disabled || !hasContent;
+  const safePlacement = PLACEMENTS.includes(placement) ? placement : "bottom";
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    placement: safePlacement,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(ARROW_HEIGHT + GAP),
+      flip({ fallbackAxisSideDirection: "start", padding: 8 }),
+      shift({ padding: 8 }),
+      // eslint-disable-next-line react-hooks/refs -- floating-ui's documented arrow API takes the ref object itself, it is not read during render
+      showArrow ? arrow({ element: arrowRef, padding: 6 }) : null
+    ].filter(Boolean)
+  });
+  const hadVirtualReference = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    if (reference) {
+      hadVirtualReference.current = true;
+      refs.setPositionReference(reference);
+      return;
+    }
+    if (hadVirtualReference.current) {
+      hadVirtualReference.current = false;
+      refs.setPositionReference(null);
+      refs.setReference(refs.domReference.current);
+    }
+  }, [reference, refs]);
+  const interactive_ = !inert && !isControlled;
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useHover(context, {
+      enabled: interactive_,
+      delay,
+      mouseOnly: true,
+      move: false,
+      handleClose: interactive ? safePolygon({ blockPointerEvents: false }) : null
+    }),
+    useFocus(context, { enabled: interactive_, visibleOnly: true }),
+    // Touch has no hover: tap toggles. `ignoreMouse` avoids double-firing with hover.
+    // `keyboardHandlers: false` — Enter/Space would otherwise toggle the tooltip shut
+    // when a keyboard user activates the trigger (focus already governs visibility).
+    useClick(context, { enabled: interactive_, ignoreMouse: true, keyboardHandlers: false }),
+    // `ancestorScroll: false` — autoUpdate already keeps the bubble anchored while
+    // scrolling, and dismissing on scroll leaves a stationary pointer unable to reopen.
+    useDismiss(context, { enabled: !inert && !isControlled, ancestorScroll: false }),
+    useRole(context, { role: "tooltip" })
+  ]);
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: 200,
+    initial: { opacity: 0 }
+  });
+  const candidate = isValidElement(children) ? children : null;
+  const childRef = (candidate?.props?.ref ?? candidate?.ref) || null;
+  const mergedRef = useMergeRefs([refs.setReference, childRef]);
+  const childProps = candidate?.props;
+  const childIsDisabled = !!childProps?.disabled || childProps?.["aria-disabled"] === true;
+  const childTakesRef = !!candidate && acceptsDomRef(candidate.type);
+  const child = candidate && childTakesRef && !childIsDisabled ? candidate : null;
+  if (inert) return /* @__PURE__ */ jsx(Fragment, { children });
+  let trigger = null;
+  if (child) {
+    trigger = cloneElement(child, {
+      ...getReferenceProps({ ...child.props, ref: mergedRef })
+    });
+  } else if (children != null) {
+    trigger = /* @__PURE__ */ jsx(TriggerWrapper, { ref: refs.setReference, ...getReferenceProps(), children });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    isMounted && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+      Bubble,
+      {
+        ref: refs.setFloating,
+        className,
+        $maxWidth: maxWidth,
+        $interactive: interactive,
+        style: { ...style, ...floatingStyles, ...transitionStyles, zIndex },
+        ...getFloatingProps(),
+        children: [
+          content,
+          showArrow && /* @__PURE__ */ jsx(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              width: ARROW_WIDTH,
+              height: ARROW_HEIGHT,
+              tipRadius: 1,
+              fill: arrowColor || theme.cPrimary
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  Tooltip
+};

package/dist/components/Tooltip/Tooltip.styles.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+const TriggerWrapper = styled.span`
+  display: inline-flex;
+`;
+const Bubble = styled.div`
+  box-sizing: border-box;
+  /* Matches react-tippy: .tippy-popper was pointer-events:none unless interactive. */
+  pointer-events: ${({ $interactive }) => $interactive ? "auto" : "none"};
+  width: max-content;
+  max-width: ${({ $maxWidth }) => typeof $maxWidth === "number" ? `${$maxWidth}px` : $maxWidth};
+  padding: 12px;
+  border-radius: 10px;
+  background: ${colors.white};
+  color: ${colors.black};
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
+  text-align: center;
+  word-break: break-word;
+  /* tippy.css supplied these; without them macOS subpixel AA renders noticeably heavier. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-shadow:
+    0 0 12px 8px rgba(0, 0, 0, 0.03),
+    0 0 6px 3px rgba(0, 0, 0, 0.02);
+`;
+export {
+  Bubble,
+  TriggerWrapper
+};

package/dist/index.js

@@ -31,6 +31,9 @@ import { Header } from "./components/Header/Header.js";
 import { Icon2 } from "./components/Icon/Icon2.js";
 import { Icon, TooltipIcon, iconsMap } from "./components/Icon/Icon.style.js";
 import { InfoIcon } from "./components/InfoIcon/InfoIcon.js";
+import { Tooltip } from "./components/Tooltip/Tooltip.js";
+import { Bubble } from "./components/Tooltip/Tooltip.styles.js";
+import { CopyToClipboardTooltip } from "./components/CopyToClipboardTooltip/CopyToClipboardTooltip.js";
 import { Input } from "./components/Input/Input.js";
 import { SearchInput } from "./components/Input/SearchInput.js";
 import { DatePickerInput } from "./components/Input/DatePickerInput.js";
@@ -128,7 +131,7 @@ import { alias, getAmountBucket, getTokenBucket, hasOptedIn, identify, initAnaly
 import { checkSaleTimeLeft } from "./utils/check-sale-time-left.js";
 import { checkTodoStatus } from "./utils/check-todo-status.js";
 import { generateCoreChecklistTasks, getVerifyIdentityChecklist } from "./utils/checklistGenerator.js";
-import { CopyToClipBoardTooltip, copyTextToClipboard, useCopyToClipboard, withCopyToClipboard } from "./utils/copyToClipboard.js";
+import { CopyToClipBoardTooltip, useCopyToClipboard, withCopyToClipboard } from "./utils/copyToClipboard.js";
 import { cooldownHOC, useComponentVisible, useContainerSize, useCooldown, useMobileView, usePrevious } from "./utils/customHooks.js";
 import { fixDecimals, formatDisplayNumber } from "./utils/fix-decimals.js";
 import { CURRENCY_CONFIG, formatAmountForDisplay, formatCurrencyValue, getCurrencyConfig, getCurrencyIcon, getCurrencySymbol, getLiquidAssetIcon, getProjectCurrencySign } from "./utils/formatCurrencyValue.js";
@@ -153,102 +156,103 @@ import { default as default2 } from "./styles/fonts.js";
 import { GlobalStyle } from "./styles/global.js";
 import { IoniconsStyles } from "./styles/ioniconsStyles.js";
 import { default as default3 } from "./styles/grid.js";
-import { default as default4 } from "./styles/reactTippy.js";
-import { DisplayOnBreakpoint, getMedia, default as default5, rwdMax, sizes } from "./styles/rwd.js";
-import { default as default6 } from "./styles/semanticUi.js";
-import { default as default7 } from "./styles/spacing.js";
-import { default as default8 } from "./styles/theme.js";
+import { reactTippyStyle } from "./styles/reactTippy.js";
+import { DisplayOnBreakpoint, getMedia, default as default4, rwdMax, sizes } from "./styles/rwd.js";
+import { default as default5 } from "./styles/semanticUi.js";
+import { default as default6 } from "./styles/spacing.js";
+import { default as default7 } from "./styles/theme.js";
 import { BASE_COLOR_HEX, BASE_FONT_SIZE, BASE_MARGIN, BASE_MARGIN_2X_PX, BASE_MARGIN_PX, BLUE_BASE_HEX, BLUE_BASE_RELEASED_HEX, CAPITAL_ANIMATION_LENGTH, COLUMN, DESKTOP_MEDIA, GRAY_BASE_HEX, GRAY_DEEP_HEX, GRAY_SECONDARY_HEX, GREEN, MAX_WIDTH, PHONE_MEDIA, RED_BASE_HEX, RED_BASE_RELEASE_HEX, SLIDER_HEIGHT, SLIDER_MOBILE_HEIGHT, SLIDER_TABLET_HEIGHT, TABLET_MEDIA, WHITE_HEX } from "./constants/style.js";
 import { LoanActivityTypes, ProfessionalInvestorStatuses, ProjectStates, ProjectStatus, ProjectTypes, TransactionTypes, USInvestorAcreditationStatuses, UserTypes, emailRegex, transactionTypeDisplayNames, walletTypes } from "./constants/globalVariables.js";
-import { default as default9 } from "./components/SvgIcons/AdminBadgeSvg.js";
+import { default as default8 } from "./components/SvgIcons/AdminBadgeSvg.js";
 import { Arrow } from "./components/icons/Arrow.js";
 import { ArrowSimple } from "./components/icons/ArrowSimple.js";
 import { BackButtonIcon, StyledBackButton, StyledBackButtonExternal, StyledWindowBackButton } from "./components/BackButton/BackButton.styles.js";
 import { Breakdown } from "./components/breakdown/Breakdown.js";
-import { default as default10 } from "./components/SvgIcons/CameraSvg.js";
-import { default as default11 } from "./components/SvgIcons/CapsLockSvg.js";
+import { default as default9 } from "./components/SvgIcons/CameraSvg.js";
+import { default as default10 } from "./components/SvgIcons/CapsLockSvg.js";
 import { Check } from "./components/icons/Check.js";
-import { default as default12 } from "./components/2FA/Connect2FA.js";
+import { default as default11 } from "./components/2FA/Connect2FA.js";
 import { ContainerWithLine } from "./components/RegisterConfirmModal/RegisterConfirmModal.styles.js";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { default as default13 } from "./components/SvgIcons/DocumentBackSvg.js";
-import { default as default14 } from "./components/SvgIcons/DocumentSmallSvg.js";
-import { default as default15 } from "./components/SvgIcons/DocumentSvg.js";
-import { default as default16 } from "./components/2FA/enable-2fa-flow.js";
-import { default as default17 } from "./components/2FA/EnterCode.js";
-import { default as default18 } from "./components/SvgIcons/EthSvg.js";
-import { default as default19 } from "./components/SvgIcons/EurSvg.js";
-import { default as default20 } from "./components/SvgIcons/FaceScanIconSvg.js";
+import { default as default12 } from "./components/SvgIcons/DocumentBackSvg.js";
+import { default as default13 } from "./components/SvgIcons/DocumentSmallSvg.js";
+import { default as default14 } from "./components/SvgIcons/DocumentSvg.js";
+import { default as default15 } from "./components/2FA/enable-2fa-flow.js";
+import { default as default16 } from "./components/2FA/EnterCode.js";
+import { default as default17 } from "./components/SvgIcons/EthSvg.js";
+import { default as default18 } from "./components/SvgIcons/EurSvg.js";
+import { default as default19 } from "./components/SvgIcons/FaceScanIconSvg.js";
 import { Facebook } from "./components/icons/Facebook.js";
 import { FaqContent, FaqDropdownIcon, FaqItem, FaqItems, FaqText, FaqTitle } from "./components/FAQ/FAQ.styles.js";
 import * as Flags from "country-flag-icons/react/3x2";
-import { default as default21 } from "./components/Footer/Footer.js";
-import { default as default22, getFooterGroups } from "./components/Footer/FooterLayout.js";
-import { default as default23 } from "./components/Footer/FooterMenu.js";
+import { default as default20 } from "./components/Footer/Footer.js";
+import { default as default21, getFooterGroups } from "./components/Footer/FooterLayout.js";
+import { default as default22 } from "./components/Footer/FooterMenu.js";
 import { FormContainer, FormError, FormField, FormInfo } from "./components/Form/Form.styles.js";
-import { default as default24 } from "./components/SvgIcons/FourSvg.js";
-import { default as default25 } from "./components/SvgIcons/Glassess.js";
+import { default as default23 } from "./components/SvgIcons/FourSvg.js";
+import { default as default24 } from "./components/SvgIcons/Glassess.js";
 import { HeaderHo } from "./components/headerHo/HeaderHo.js";
 import { FieldLabel, FieldValue } from "./components/IdentityInfo/IdentityInfo.styles.js";
 import { Info } from "./components/icons/Info.js";
 import { Container as Container2, Icon as Icon3 } from "./components/InfoIcon/InfoIcon.styles.js";
 import { Label, InputWrap, Wrapper as Wrapper2 } from "./components/Input/Input.styles.js";
 import { Instagram } from "./components/icons/Instagram.js";
-import { default as default26 } from "./components/2FA/InstallAuthApp.js";
+import { default as default25 } from "./components/2FA/InstallAuthApp.js";
 import { LatestUpdateWrapper } from "./components/LatestUpdate/LatestUpdate.styles.js";
 import { LinkIcon } from "./components/icons/LinkIcon.js";
 import { LinkText, Scroll, StyledTab, StyledTabs, TabsWrapper } from "./components/TabsNav/TabsNav.styles.js";
 import { LinkedIn } from "./components/icons/LinkedIn.js";
-import { default as default27 } from "./components/2FA/login-with-otp-flow.js";
+import { default as default26 } from "./components/2FA/login-with-otp-flow.js";
 import { Logo } from "./components/logo/Logo.js";
-import { default as default28 } from "./components/SvgIcons/LogoSvg.js";
-import { default as default29 } from "./components/2FA/main-flow.js";
+import { default as default27 } from "./components/SvgIcons/LogoSvg.js";
+import { default as default28 } from "./components/2FA/main-flow.js";
 import { Medium } from "./components/icons/Medium.js";
 import { ModalBack, Box, ModalClose, Dimmer, ModalInner, ModalInnerSmartContractAddress, ModalInnerWithBorder, ModalLink, ModalLinkWrap, ModalRoot, ModalScroll } from "./components/Modal/Modal.styles.js";
-import { default as default30 } from "./components/SvgIcons/OneSvg.js";
-import { default as default31 } from "./components/SvgIcons/PassportSvg.js";
+import { default as default29 } from "./components/SvgIcons/OneSvg.js";
+import { default as default30 } from "./components/SvgIcons/PassportSvg.js";
 import { Reddit } from "./components/icons/Reddit.js";
-import { default as default32 } from "./components/SvgIcons/RefreshSvg.js";
-import { default as default33 } from "./components/taxId/register-taxid.js";
-import { default as default34 } from "./components/taxId/complete.js";
-import { default as default35 } from "./components/taxId/flow.js";
-import { default as default36 } from "./components/2FA/ResetCode.js";
+import { default as default31 } from "./components/SvgIcons/RefreshSvg.js";
+import { default as default32 } from "./components/taxId/register-taxid.js";
+import { default as default33 } from "./components/taxId/complete.js";
+import { default as default34 } from "./components/taxId/flow.js";
+import { default as default35 } from "./components/2FA/ResetCode.js";
 import { SelectContainer, SelectControl, SelectIcon, SelectMenu, SelectMenuList, SelectOption, SelectValueContainer, SelectWrapper } from "./components/Input/Select.styles.js";
 import { Share } from "./components/icons/Share.js";
 import { Snackbar } from "./components/Snackbar/Snackbar.js";
 import { SnackbarContext, SnackbarProvider } from "./components/Snackbar/SnackbarProvider.js";
-import { default as default37 } from "./components/SvgIcons/SocialFacebook.js";
-import { default as default38 } from "./components/SvgIcons/SocialInstagram.js";
-import { default as default39 } from "./components/SvgIcons/SocialLinkedIn.js";
-import { default as default40 } from "./components/SvgIcons/SocialMedium.js";
-import { default as default41 } from "./components/SvgIcons/SocialReddit.js";
-import { default as default42 } from "./components/SvgIcons/SocialTelegram.js";
-import { default as default43 } from "./components/SvgIcons/SocialTwitter.js";
-import { default as default44 } from "./components/SvgIcons/SocialYoutube.js";
+import { default as default36 } from "./components/SvgIcons/SocialFacebook.js";
+import { default as default37 } from "./components/SvgIcons/SocialInstagram.js";
+import { default as default38 } from "./components/SvgIcons/SocialLinkedIn.js";
+import { default as default39 } from "./components/SvgIcons/SocialMedium.js";
+import { default as default40 } from "./components/SvgIcons/SocialReddit.js";
+import { default as default41 } from "./components/SvgIcons/SocialTelegram.js";
+import { default as default42 } from "./components/SvgIcons/SocialTwitter.js";
+import { default as default43 } from "./components/SvgIcons/SocialYoutube.js";
 import { StyledReactTable, Styles, TableWrap } from "./components/AdminDashboard/Table/Table.styles.js";
 import { SuccessModal, SuccessModal as SuccessModal2, showProgress, showSuccess } from "./components/Modal/SuccessModal/SuccessModal.js";
-import { default as default45 } from "./components/2FA/Sucess2FA.js";
+import { default as default44 } from "./components/2FA/Sucess2FA.js";
 import { Tab } from "./components/Tabs/Tabs.styles.js";
-import { default as default46 } from "./components/TabsNav/TabNav.js";
+import { default as default45 } from "./components/TabsNav/TabNav.js";
 import { Telegram } from "./components/icons/Telegram.js";
-import { default as default47 } from "./components/SvgIcons/ThreeSvg.js";
+import { default as default46 } from "./components/SvgIcons/ThreeSvg.js";
 import { Twitter } from "./components/icons/Twitter.js";
-import { default as default48 } from "./components/SvgIcons/TwoSidedDocumentSvg.js";
-import { default as default49 } from "./components/SvgIcons/TwoSvg.js";
-import { default as default50 } from "./components/SvgIcons/UpdateDefaultSvg.js";
-import { default as default51 } from "./components/SvgIcons/UpdateHardSvg.js";
-import { default as default52 } from "./components/SvgIcons/UpdateSoftSvg.js";
-import { default as default53 } from "./components/SvgIcons/UploadSvg.js";
-import { default as default54 } from "./components/SvgIcons/VerifiedBadge.js";
+import { default as default47 } from "./components/SvgIcons/TwoSidedDocumentSvg.js";
+import { default as default48 } from "./components/SvgIcons/TwoSvg.js";
+import { default as default49 } from "./components/SvgIcons/UpdateDefaultSvg.js";
+import { default as default50 } from "./components/SvgIcons/UpdateHardSvg.js";
+import { default as default51 } from "./components/SvgIcons/UpdateSoftSvg.js";
+import { default as default52 } from "./components/SvgIcons/UploadSvg.js";
+import { default as default53 } from "./components/SvgIcons/VerifiedBadge.js";
 import { X } from "./components/icons/X.js";
 import { Youtube } from "./components/icons/Youtube.js";
+import { copyTextToClipboard } from "./utils/copy-text-to-clipboard.js";
 import { format } from "date-fns";
 import { getAnalyticsIngestUrl, getBackofficeAppUrl } from "./utils/app-urls-analytics-backoffice.js";
 import { getConfig, resetRuntimeConfig } from "./runtime-config.js";
 import { useSnackbar } from "./components/Snackbar/useSnackbar.js";
 export {
   AccountBalance,
-  default9 as AdminBadgeSvg,
+  default8 as AdminBadgeSvg,
   AgreementItem,
   AnimatedSpan,
   AnnouncementTitleMain,
@@ -278,8 +282,8 @@ export {
   CAPITAL_ANIMATION_LENGTH,
   COLUMN,
   CURRENCY_CONFIG,
-  default10 as CameraSvg,
-  default11 as CapsLockSvg,
+  default9 as CameraSvg,
+  default10 as CapsLockSvg,
   Card,
   CardHeader,
   CardHeaderRegular,
@@ -304,7 +308,7 @@ export {
   ComponentScroll,
   ComponentWrapper,
   ConfirmModal,
-  default12 as Connect2FA,
+  default11 as Connect2FA,
   Container,
   ContainerWithLine,
   ContentInnerFull,
@@ -315,6 +319,7 @@ export {
   Copy,
   CopyToClipBoardTooltip,
   CopyToClipboard,
+  CopyToClipboardTooltip,
   CountrySelect,
   CryptoAddress,
   CryptoAddressDetails,
@@ -330,19 +335,19 @@ export {
   DetailsSection,
   DetailsToggle,
   DisplayOnBreakpoint,
-  default13 as DocumentBackSvg,
-  default14 as DocumentSmallSvg,
-  default15 as DocumentSvg,
+  default12 as DocumentBackSvg,
+  default13 as DocumentSmallSvg,
+  default14 as DocumentSvg,
   DoubleButtons,
   ENTROPY_MEDIUM,
   ENTROPY_WEAK,
-  default16 as Enable2FAFlow,
-  default17 as EnterCode,
+  default15 as Enable2FAFlow,
+  default16 as EnterCode,
   ErrorMessage,
-  default18 as EthSvg,
-  default19 as EurSvg,
+  default17 as EthSvg,
+  default18 as EurSvg,
   FAQ,
-  default20 as FaceScanIconSvg,
+  default19 as FaceScanIconSvg,
   Facebook,
   FaqContent,
   FaqDropdownIcon,
@@ -354,22 +359,22 @@ export {
   Flags,
   FlexContainer,
   FlexGrid,
-  default21 as Footer,
-  default22 as FooterLayout,
-  default23 as FooterMenu,
+  default20 as Footer,
+  default21 as FooterLayout,
+  default22 as FooterMenu,
   ForgotPasswordModal,
   Form,
   FormContainer,
   FormError,
   FormField,
   FormInfo,
-  default24 as FourSvg,
+  default23 as FourSvg,
   GRAY_BASE_HEX,
   GRAY_DEEP_HEX,
   GRAY_SECONDARY_HEX,
   GREEN,
   GlareButton,
-  default25 as Glassess,
+  default24 as Glassess,
   GlobalStyle,
   Header,
   HeaderHo,
@@ -397,7 +402,7 @@ export {
   InputWrap,
   Wrapper2 as InputWrapper,
   Instagram,
-  default26 as InstallAuthApp,
+  default25 as InstallAuthApp,
   InvestmentStat,
   IoniconsStyles,
   Item,
@@ -416,12 +421,12 @@ export {
   LoadingDots,
   LoanActivityTypes,
   LoginModal,
-  default27 as LoginWithOTPFlow,
+  default26 as LoginWithOTPFlow,
   Logo,
-  default28 as LogoSvg,
+  default27 as LogoSvg,
   LottieAnimation,
   MAX_WIDTH,
-  default29 as Main2FAFlow,
+  default28 as Main2FAFlow,
   MainMenu,
   Medium,
   MemoCryptoAddress,
@@ -445,7 +450,7 @@ export {
   NotificationCounter,
   Number,
   NumberWithContainer,
-  default30 as OneSvg,
+  default29 as OneSvg,
   OptionLabel,
   OtpInput,
   Outer,
@@ -456,7 +461,7 @@ export {
   PageWrapper,
   Pagination,
   PaginationControls,
-  default31 as PassportSvg,
+  default30 as PassportSvg,
   PaymentDetailsCard,
   PaymentDisplay,
   PaymentModal,
@@ -480,14 +485,14 @@ export {
   ReactTableWrapper,
   Reddit,
   RefreshButton,
-  default32 as RefreshSvg,
+  default31 as RefreshSvg,
   RegisterConfirmModal,
   RegisterModal,
-  default33 as RegisterTaxId,
-  default34 as RegisterTaxIdComplete,
-  default35 as RegisterTaxIdFlow,
+  default32 as RegisterTaxId,
+  default33 as RegisterTaxIdComplete,
+  default34 as RegisterTaxIdFlow,
   RequestDataBox,
-  default36 as ResetCode,
+  default35 as ResetCode,
   ResetConfirmModal,
   ResetPasswordModal,
   RouterWrapper,
@@ -517,14 +522,14 @@ export {
   Snackbar,
   SnackbarContext,
   SnackbarProvider,
-  default37 as SocialFacebook,
-  default38 as SocialInstagram,
-  default39 as SocialLinkedIn,
-  default40 as SocialMedium,
-  default41 as SocialReddit,
-  default42 as SocialTelegram,
-  default43 as SocialTwitter,
-  default44 as SocialYoutube,
+  default36 as SocialFacebook,
+  default37 as SocialInstagram,
+  default38 as SocialLinkedIn,
+  default39 as SocialMedium,
+  default40 as SocialReddit,
+  default41 as SocialTelegram,
+  default42 as SocialTwitter,
+  default43 as SocialYoutube,
   SpanButton,
   StatusBadge,
   StatusDot,
@@ -547,11 +552,11 @@ export {
   Styles,
   SuccessModal,
   SuccessModal2 as SuccessModalComponent,
-  default45 as Sucess2FA,
+  default44 as Sucess2FA,
   Switch,
   TABLET_MEDIA,
   Tab,
-  default46 as TabNav,
+  default45 as TabNav,
   Table,
   TableFilterDropdown,
   TableWrap,
@@ -566,7 +571,7 @@ export {
   TextButton,
   TextLink,
   Textarea,
-  default47 as ThreeSvg,
+  default46 as ThreeSvg,
   ThumbH,
   ThumbV,
   Timeline,
@@ -577,6 +582,8 @@ export {
   ToDoTask,
   ToDoTaskMessage,
   ToDoTaskState,
+  Tooltip,
+  Bubble as TooltipBubble,
   TooltipIcon,
   TrackH,
   TrackV,
@@ -584,16 +591,16 @@ export {
   TransactionInfo,
   TransactionTypes,
   Twitter,
-  default48 as TwoSidedDocumentSvg,
-  default49 as TwoSvg,
+  default47 as TwoSidedDocumentSvg,
+  default48 as TwoSvg,
   USInvestorAcreditationStatuses,
-  default50 as UpdateDefaultSvg,
-  default51 as UpdateHardSvg,
-  default52 as UpdateSoftSvg,
-  default53 as UploadSvg,
+  default49 as UpdateDefaultSvg,
+  default50 as UpdateHardSvg,
+  default51 as UpdateSoftSvg,
+  default52 as UploadSvg,
   UppercaseText,
   UserTypes,
-  default54 as VerifiedBadge,
+  default53 as VerifiedBadge,
   WHITE_HEX,
   Wrap,
   Wrapper,
@@ -654,24 +661,24 @@ export {
   optIn,
   optOut,
   pathnameIfSameOrigin,
-  default4 as reactTippyStyle,
+  reactTippyStyle,
   reset,
   resetRuntimeConfig,
   resolveCopy,
-  default5 as rwd,
+  default4 as rwd,
   rwdMax,
   saveAs,
   scrollToElement,
-  default6 as semanticUiStyle,
+  default5 as semanticUiStyle,
   setCopySource,
   setUserProperties,
   showAccountLockedModal,
   showProgress,
   showSuccess,
   sizes,
-  default7 as spacing,
+  default6 as spacing,
   t,
-  default8 as theme,
+  default7 as theme,
   timeEvent,
   track,
   transactionTypeDisplayNames,

package/dist/styles/global.js

@@ -1,10 +1,8 @@
 import { createGlobalStyle } from "styled-components";
-import "react-tippy/dist/tippy.css";
 import "react-day-picker/style.css";
 import { colors } from "./colors.js";
 import fontFaces from "./fonts.js";
 import semanticUiStyle from "./semanticUi.js";
-import reactTippyStyle from "./reactTippy.js";
 import ioniconsCss from "../static/fonts/Ionicons/ionicons.min.css.js";
 const GlobalStyle = createGlobalStyle`
   ${fontFaces}
@@ -66,7 +64,6 @@ const GlobalStyle = createGlobalStyle`
   }
 
   ${semanticUiStyle}
-  ${reactTippyStyle}
 `;
 export {
   GlobalStyle,

package/dist/styles/reactTippy.js

@@ -1,40 +1,5 @@
 import { css } from "styled-components";
-import { colors } from "./colors.js";
-const reactTippyStyle = css`
-  .tippy-popper {
-    .tippy-tooltip {
-      border-radius: 10px;
-      font-size: 11px;
-      line-height: 14px;
-      letter-spacing: 0.4px;
-      padding: 12px;
-      word-break: break-word;
-    }
-
-    .tippy-tooltip.light-theme {
-      box-shadow:
-        0 0 12px 8px rgba(0, 0, 0, 0.03),
-        0 0 6px 3px rgba(0, 0, 0, 0.02);
-    }
-
-    &[x-placement^='top'] [x-arrow] {
-      border-top-color: ${colors.blue}!important;
-    }
-
-    &[x-placement^='bottom'] [x-arrow] {
-      border-bottom-color: ${colors.blue}!important;
-    }
-
-    &[x-placement^='left'] [x-arrow] {
-      border-left-color: ${colors.blue}!important;
-    }
-
-    &[x-placement^='right'] [x-arrow] {
-      border-right-color: ${colors.blue}!important;
-    }
-  }
-`;
+const reactTippyStyle = css``;
 export {
-  reactTippyStyle as default,
   reactTippyStyle
 };

package/dist/utils/copy-text-to-clipboard.js

@@ -0,0 +1,42 @@
+const copyViaTextarea = (text) => {
+  const previouslyFocused = document.activeElement;
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.setAttribute("readonly", "");
+  textArea.style.position = "fixed";
+  textArea.style.left = "-999999px";
+  textArea.style.top = "-999999px";
+  document.body.appendChild(textArea);
+  try {
+    textArea.focus();
+    textArea.select();
+    return document.execCommand("copy");
+  } finally {
+    textArea.remove();
+    previouslyFocused?.focus?.();
+  }
+};
+const copyTextToClipboard = async (text, onCopy, onError) => {
+  if (navigator.clipboard && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(text);
+      onCopy?.(text, true);
+      return true;
+    } catch {
+    }
+  }
+  try {
+    if (copyViaTextarea(text)) {
+      onCopy?.(text, true);
+      return true;
+    }
+    onError?.(new Error("Failed to copy text"));
+    return false;
+  } catch (error) {
+    onError?.(error);
+    return false;
+  }
+};
+export {
+  copyTextToClipboard
+};

package/dist/utils/copyToClipboard.js

@@ -1,39 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { useState } from "react";
+import React__default from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { CopyToClipboard as CopyToClipboard2 } from "react-copy-to-clipboard";
-import { Tooltip } from "react-tippy";
-import { CopyToClipboardButton } from "../components/CryptoAddress/CryptoAddress.styles.js";
-const copyTextToClipboard = async (text, onCopy, onError) => {
-  try {
-    if (navigator.clipboard && window.isSecureContext) {
-      await navigator.clipboard.writeText(text);
-      if (onCopy) onCopy(text, true);
-      return true;
-    } else {
-      const textArea = document.createElement("textarea");
-      textArea.value = text;
-      textArea.style.position = "fixed";
-      textArea.style.left = "-999999px";
-      textArea.style.top = "-999999px";
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      const successful = document.execCommand("copy");
-      document.body.removeChild(textArea);
-      if (successful) {
-        if (onCopy) onCopy(text, true);
-        return true;
-      } else {
-        if (onError) onError(new Error("Failed to copy text"));
-        return false;
-      }
-    }
-  } catch (error) {
-    if (onError) onError(error);
-    return false;
-  }
-};
+import { copyTextToClipboard } from "./copy-text-to-clipboard.js";
+import { CopyToClipboardTooltip } from "../components/CopyToClipboardTooltip/CopyToClipboardTooltip.js";
 const withCopyToClipboard = (WrappedComponent, options = {}) => {
   const { textProp = "text", onCopyProp = "onCopy", onErrorProp = "onError" } = options;
   return function CopyToClipboardWrapper(props) {
@@ -67,25 +37,11 @@ const useCopyToClipboard = (text) => {
   );
   return { copy, copied };
 };
-const CopyToClipBoardTooltip = ({ value, buttonStyle }) => {
-  const [copied, setCopied] = useState(false);
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      position: "top",
-      title: copied ? "Copied to clipboard!" : "Click to copy to clipboard.",
-      theme: "light",
-      arrow: true,
-      hideOnClick: false,
-      onHidden: () => setCopied(false),
-      duration: 200,
-      children: /* @__PURE__ */ jsx(CopyToClipboard, { text: value, onCopy: () => setCopied(true), children: /* @__PURE__ */ jsx(CopyToClipboardButton, { style: buttonStyle }) })
-    }
-  );
-};
+const CopyToClipBoardTooltip = CopyToClipboardTooltip;
 export {
   CopyToClipBoardTooltip,
   CopyToClipboard2 as CopyToClipboard,
+  CopyToClipboardTooltip,
   copyTextToClipboard,
   useCopyToClipboard,
   withCopyToClipboard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.72",
+  "version": "3.0.73",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",
@@ -54,6 +54,7 @@
     "serve": "npx http-server ./storybook-static -p 9009"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.20",
     "@lottiefiles/dotlottie-react": "^0.19.4",
     "axios": "^1.13.5",
     "country-flag-icons": "^1.6.17",
@@ -81,7 +82,6 @@
     "react-select": "^5.7.0",
     "react-slick": "^0.31.0",
     "react-table": "^7.8.0",
-    "react-tippy": "^1.4.0",
     "slick-carousel": "^1.8.1",
     "yup": "^1.0.0"
   },