@stokr/components-library 3.0.72 → 3.0.74

package/dist/components/Button/Button.styles.js

@@ -16,6 +16,7 @@ const Button = styled.button.withConfig({
     "negative",
     "outline",
     "outlineBlack",
+    "black",
     "marginTop",
     "marginRight",
     "isLoginMobile"
@@ -181,6 +182,20 @@ const Button = styled.button.withConfig({
       }
     `}
 
+  ${(props) => props.black && css`
+      border-color: ${theme.grey4};
+      background-color: transparent;
+      color: ${theme.cBlack};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cBlack};
+        border-color: ${theme.cBlack};
+        color: ${theme.cWhite};
+      }
+    `}
+
     //next 2 props added from SUF
 
   ${(props) => props.marginTop && css`
@@ -202,7 +217,8 @@ Button.propTypes = {
   negative: PropTypes.bool,
   center: PropTypes.bool,
   outline: PropTypes.bool,
-  outlineBlack: PropTypes.bool
+  outlineBlack: PropTypes.bool,
+  black: PropTypes.bool
 };
 var stdin_default = Button;
 export {

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 }) : ""
       ] })