@rabbitio/ui-kit 1.0.0-beta.86 → 1.0.0-beta.87

package/src/common-apis/adapters/analyticsAdapters/metrikaAdapter.js

@@ -0,0 +1,28 @@
+import { Logger } from "../../utils/logging/logger.js";
+
+export class MetrikaAdapter {
+    /**
+     * Sends reachGoal to Metrika
+     *
+     * @param METRIKA_ID {string}
+     * @param goalName {string}
+     * @param [usdPrice] {string|number}
+     */
+    static callMetrikaReachGoal(METRIKA_ID, goalName, usdPrice = null) {
+        try {
+            if (window.ym) {
+                console.log("Sending metrika goal reached: ", goalName, String(usdPrice));
+                window.ym(
+                    METRIKA_ID,
+                    "reachGoal",
+                    goalName,
+                    usdPrice != null ? { order_price: usdPrice, currency: "USD" } : {}
+                );
+            } else {
+                Logger.logError(null, "callMetrikaReachGoal", "No metrika found");
+            }
+        } catch (e) {
+            Logger.logError(e, "callMetrikaReachGoal", "Failed to call metrika: " + goalName + " " + usdPrice);
+        }
+    }
+}

package/src/index.js

@@ -69,6 +69,7 @@ export { IpAddressProvider } from "./common-apis/external-apis/ipAddressProvider
 
 export { GoogleAnalyticsAdapter } from "./common-apis/adapters/analyticsAdapters/googleAnalyticsAdapter.js";
 export { MixpanelAdapter } from "./common-apis/adapters/analyticsAdapters/mixpanelAdapter.js";
+export { MetrikaAdapter } from "./common-apis/adapters/analyticsAdapters/metrikaAdapter.js";
 
 // Robust data retriever service and related APIs (to be extracted later to dedicated lib)
 export { CacheAndConcurrentRequestsResolver } from "./robust-api-caller/cacheAndConcurrentRequestsResolver.js";

package/src/swaps-lib/external-apis/letsExchangeSwapProvider.js

@@ -478,7 +478,6 @@ export class LetsExchangeSwapProvider extends SwapProvider {
         return [
             new Partner(
                 "LetsExchange",
-                "https://letsexchange.io/",
                 "https://letsexchange.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F02e45813-b375-49d8-b2b0-092ce1847fff%2F55ebbc3c-4ee6-4fa7-847b-f673e82594f3%2Flets-logo-basic__on-light.svg?table=block&id=bec5952a-2f9c-47fb-8cc0-86e1391a7f60&spaceId=02e45813-b375-49d8-b2b0-092ce1847fff&userId=&cache=v2"
             ),
         ];

package/src/swaps-lib/external-apis/swapspaceSwapProvider.js

@@ -555,16 +555,17 @@ export class SwapspaceSwapProvider extends SwapProvider {
     async getPartnersList() {
         try {
             await this._fetchPartnersListIfNeeded();
-            return this._partners
+            const swapspacePartners = this._partners
                 .filter(p => !BANNED_PARTNERS.find(banned => banned === p.path))
                 .map(
                     p =>
-                        new Partner(
-                            p.name,
-                            null, // No data in swapspace
-                            p?.image?.default ? "https://storage.swapspace.co" + p.image.default : null
-                        )
+                        new Partner(p.name, p?.image?.default ? "https://storage.swapspace.co" + p.image.default : null)
                 );
+            const swapspaceItself = new Partner(
+                "Swapspace",
+                "https://storage.swapspace.co/static/logo-vertical-black.svg"
+            );
+            return [swapspaceItself, ...swapspacePartners];
         } catch (e) {
             improveAndRethrow(e, "swapspace.getPartnersList");
         }

package/src/swaps-lib/models/partner.js

@@ -1,7 +1,6 @@
 export class Partner {
-    constructor(name, url, logoUrl) {
+    constructor(name, logoUrl) {
         this.name = name;
-        this.url = url;
         this.logoUrl = logoUrl;
     }
 }

package/src/ui-kit/components/molecules/AmountInput/AmountInput.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { BigNumber } from "bignumber.js";
 import { CSSTransition } from "react-transition-group";
+import PropTypes from "prop-types";
 
 import s from "./amount-input.module.scss";
 import WalletIcon from "../../../assets/wrappedImages/walletIcon.jsx";
@@ -14,7 +15,51 @@ import { AmountUtils } from "../../../../common-apis/amountUtils.js";
 import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
 import { Validation } from "../../atoms/Validation/Validation.jsx";
 
-// TODO: [dev] add JSDoc
+/**
+ * AmountInput component is used for inputting an amount in both cryptocurrency and fiat formats.
+ * It supports converting between the two based on the provided exchange rate.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label displayed above the input.
+ * @param {Function} props.handleCoinAmountChange - Callback function called when the coin amount changes.
+ * @param {Function} props.handleFiatAmountChange - Callback function called when the fiat amount changes.
+ * @param {Function} props.handleChangeAssetClick - Callback function called when the asset change button is clicked.
+ * @param {Function} props.handleBalanceValidationChange - Callback function called when balance validation changes.
+ * @param {boolean} props.disabled - Disables the input fields when true.
+ * @param {boolean} props.locked - Locks the input fields when true.
+ * @param {string} props.alertText - Text to be displayed as an alert below the input.
+ * @param {string} props.predefinedValue - Predefined value to be set in the input.
+ * @param {React.ReactNode} props.children - Any additional elements to be rendered inside the component.
+ * @param {string} props.ticker - The ticker code of the asset.
+ * @param {string} props.tickerPrintable - The printable version of the ticker code.
+ * @param {number} props.assetDecimalPlaces - The number of decimal places allowed for the asset.
+ * @param {Object} props.assetBalance - The balance of the asset in both fiat and crypto formats.
+ * @param {string} props.assetIconSrc - The source URL of the asset icon.
+ * @param {string} props.assetIconProtocolSrc - The source URL of the asset protocol icon.
+ * @param {string} props.fallbackAssetIconSrc - The source URL of the fallback asset icon.
+ * @param {boolean} props.isSendAll - Determines if the "Send All" button is shown.
+ * @param {Function} props.handleSendAllClick - Callback function called when the "Send All" button is clicked.
+ * @param {boolean} props.showBalance - Determines if the balance should be displayed.
+ * @param {boolean} props.showBalanceValidation - Determines if the balance validation should be shown.
+ * @param {boolean} props.showChangeAssetButton - Determines if the change asset button should be displayed.
+ * @param {string} props.changeAssetButtonProtocol - The protocol name to be displayed on the change asset button.
+ * @param {boolean} props.changeAssetButtonDisabled - Disables the change asset button when true.
+ * @param {boolean} props.upperFormPosition - Applies a style for the upper form position.
+ * @param {boolean} props.lowerFormPosition - Applies a style for the lower form position.
+ * @param {boolean} props.errorEncountered - Indicates if an error was encountered.
+ * @param {string} props.updateAssetInputTo - The value to update the asset input to.
+ * @param {boolean} props.estimateAmount - Indicates if the amount is estimated.
+ * @param {boolean} props.isLoading - Indicates if the component is in a loading state.
+ * @param {string} props.cryptoAssetToFiatRate - The conversion rate from crypto asset to fiat.
+ * @param {string} props.fiatCurrencyCode - The fiat currency code.
+ * @param {number} props.fiatCurrencyDecimals - The number of decimal places allowed for the fiat currency.
+ * @param {string} props.linkButtonActiveText - The text for the active state of the link button.
+ * @param {string} props.linkButtonInactiveText - The text for the inactive state of the link button.
+ * @param {string} props.balanceLoaderText - The text to display while the balance is loading.
+ * @param {string} props.fiatInputPlaceholderText - The placeholder text for the fiat input.
+ * @param {React.Ref} buttonForwardRef - A ref passed to the change asset button.
+ */
 export const AmountInput = React.forwardRef(
     (
         {
@@ -86,6 +131,7 @@ export const AmountInput = React.forwardRef(
                         newAmountString,
                         assetDecimalPlaces
                     );
+                    if (correctedAmount !== newAmountString) return;
                     setCoinAmountValue(correctedAmount);
                     if (handlerEnabled) handleCoinAmountChange(correctedAmount);
 
@@ -332,3 +378,72 @@ export const AmountInput = React.forwardRef(
         );
     }
 );
+
+AmountInput.propTypes = {
+    label: PropTypes.string,
+    handleCoinAmountChange: PropTypes.func,
+    handleFiatAmountChange: PropTypes.func,
+    handleChangeAssetClick: PropTypes.func,
+    handleBalanceValidationChange: PropTypes.func,
+    disabled: PropTypes.bool,
+    locked: PropTypes.bool,
+    alertText: PropTypes.string,
+    predefinedValue: PropTypes.string,
+    children: PropTypes.node,
+    ticker: PropTypes.string,
+    tickerPrintable: PropTypes.string,
+    assetDecimalPlaces: PropTypes.number,
+    assetBalance: PropTypes.shape({
+        fiatAmount: PropTypes.string,
+        assetAmount: PropTypes.string,
+    }),
+    assetIconSrc: PropTypes.string,
+    assetIconProtocolSrc: PropTypes.string,
+    fallbackAssetIconSrc: PropTypes.string,
+    isSendAll: PropTypes.bool,
+    handleSendAllClick: PropTypes.func,
+    showBalance: PropTypes.bool,
+    showBalanceValidation: PropTypes.bool,
+    showChangeAssetButton: PropTypes.bool,
+    changeAssetButtonProtocol: PropTypes.string,
+    changeAssetButtonDisabled: PropTypes.bool,
+    upperFormPosition: PropTypes.bool,
+    lowerFormPosition: PropTypes.bool,
+    errorEncountered: PropTypes.bool,
+    updateAssetInputTo: PropTypes.string,
+    estimateAmount: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    cryptoAssetToFiatRate: PropTypes.string,
+    fiatCurrencyCode: PropTypes.string,
+    fiatCurrencyDecimals: PropTypes.number,
+    linkButtonActiveText: PropTypes.string,
+    linkButtonInactiveText: PropTypes.string,
+    balanceLoaderText: PropTypes.string,
+    fiatInputPlaceholderText: PropTypes.string,
+    buttonForwardRef: PropTypes.object,
+};
+
+AmountInput.defaultProps = {
+    label: "",
+    handleCoinAmountChange: () => {},
+    handleFiatAmountChange: () => {},
+    handleChangeAssetClick: () => {},
+    handleBalanceValidationChange: () => {},
+    assetBalance: { fiatAmount: null, assetAmount: null },
+    isSendAll: null,
+    handleSendAllClick: () => {},
+    showBalance: false,
+    showBalanceValidation: false,
+    showChangeAssetButton: false,
+    changeAssetButtonDisabled: false,
+    updateAssetInputTo: null,
+    estimateAmount: false,
+    isLoading: false,
+    cryptoAssetToFiatRate: null,
+    fiatCurrencyCode: null,
+    fiatCurrencyDecimals: null,
+    linkButtonActiveText: null,
+    linkButtonInactiveText: null,
+    balanceLoaderText: null,
+    fiatInputPlaceholderText: null,
+};

package/coverage/ui-kit/storybook-static/223.063dc770.iframe.bundle.js.html

@@ -1,85 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for ui-kit/storybook-static/223.063dc770.iframe.bundle.js</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">ui-kit/storybook-static</a> 223.063dc770.iframe.bundle.js</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line low'></div>
-    <pre><table class="coverage">
-<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js"><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="branch-0 cbranch-no" title="branch not covered" >"use strict";(self.webpackChunk_rabbitio_ui_kit=self.webpackChunk_rabbitio_ui_kit||[]).push([[223],{"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[15].use[1]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[15].use[3]!./src/ui-kit/components/atoms/Tooltip/tooltip.module.scss":(module,__webpack_exports__,__webpack_require__)=&gt;{__webpack_require__.d(__webpack_exports__,{Z:()=&gt;__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".TWBLKOSLdfLAUT4wxOxQ{font-size:14px;line-height:24px;letter-spacing:.5px;margin:0;color:#232d42;font-weight:400;line-height:20px;padding:20px 16px;background:#232d42;position:absolute;bottom:calc(100% + 15px);left:50%;transform:translateX(-50%);color:#fff;border-radius:16px;z-index:3;display:block;min-width:200px;max-width:300px;text-align:center;word-wrap:break-word;word-break:normal}.TWBLKOSLdfLAUT4wxOxQ.nMPkDNGr_dDHPKKwJ8zN{opacity:0;transform:translateX(-50%) translateY(10px) scale(0.95)}.TWBLKOSLdfLAUT4wxOxQ.hQjMPZla5BtcDx4S0HXf,.TWBLKOSLdfLAUT4wxOxQ.IwlLtvXjt8pH8WDV7u_w{opacity:1;transform:translateX(-50%) translateY(0) scale(1);transition:.2s all cubic-bezier(0.22, 0.61, 0.36, 1)}.TWBLKOSLdfLAUT4wxOxQ.Rvw9XtCRYU7T_xflaWBq{opacity:0;transform:translateX(-50%) translateY(0) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W{transform:none;bottom:calc(100% + 15px);right:-14px;left:auto}.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W img,.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W svg{left:auto;right:0px;top:calc(100% - 4px);transform:translateX(-40%)}.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W.nMPkDNGr_dDHPKKwJ8zN{opacity:0;transform:translateX(5px) translateY(10px) scale(0.95)}.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W.hQjMPZla5BtcDx4S0HXf,.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W.rXPdatt5w6RxUgjUWti3,.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W.IwlLtvXjt8pH8WDV7u_w{opacity:1;transform:translateX(0) translateY(0) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.XX3l8baZPDTr657Csp1W.Rvw9XtCRYU7T_xflaWBq{opacity:0;transform:translateX(0) translateY(0) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq{transform:none;bottom:calc(100% + 15px);left:-14px}.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq img,.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq svg{left:0px;top:calc(100% - 4px);transform:translateX(40%)}.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq.nMPkDNGr_dDHPKKwJ8zN{opacity:0;transform:translateX(-5px) translateY(10px) scale(0.95)}.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq.hQjMPZla5BtcDx4S0HXf,.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq.rXPdatt5w6RxUgjUWti3,.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq.IwlLtvXjt8pH8WDV7u_w{opacity:1;transform:translateX(0) translateY(0) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.D51vOWEX8uijR5avfnhq.Rvw9XtCRYU7T_xflaWBq{opacity:0;transform:translateX(0) translateY(0) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ{left:auto;right:calc(100% + 16px);bottom:calc(100% - 4px)}.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ img,.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ svg{top:41%;left:calc(100% - 7px);transform:rotateZ(-90deg)}.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ.nMPkDNGr_dDHPKKwJ8zN{opacity:0;transform:translateX(16px) translateY(50%) scale(0.95)}.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ.hQjMPZla5BtcDx4S0HXf,.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ.rXPdatt5w6RxUgjUWti3,.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ.IwlLtvXjt8pH8WDV7u_w{opacity:1;transform:translateX(0) translateY(50%) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.Qvkx5HWHDw2fvk8uIALJ.Rvw9XtCRYU7T_xflaWBq{opacity:0;transform:translateX(0) translateY(50%) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0{bottom:auto;top:calc(100% + 16px);left:50%}.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0 img,.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0 svg{position:absolute;top:-12px;left:calc(50% - 12px);transform:rotateZ(-180deg)}.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0.nMPkDNGr_dDHPKKwJ8zN{opacity:0;transform:translateX(-50%) translateY(-10px) scale(0.95)}.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0.hQjMPZla5BtcDx4S0HXf,.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0.rXPdatt5w6RxUgjUWti3,.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0.IwlLtvXjt8pH8WDV7u_w{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.ylsBe4ryUKGJd0dt1KY0.Rvw9XtCRYU7T_xflaWBq{opacity:0;transform:translateX(-50%) translateY(0) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T{left:calc(100% + 16px);right:auto;top:7px;bottom:auto}.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T img,.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T svg{position:absolute;top:calc(50% - 6px);left:-18px;transform:rotateZ(-270deg)}.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T.nMPkDNGr_dDHPKKwJ8zN{opacity:0;transform:translateX(-16px) translateY(-50%) scale(0.95)}.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T.hQjMPZla5BtcDx4S0HXf,.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T.rXPdatt5w6RxUgjUWti3,.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T.IwlLtvXjt8pH8WDV7u_w{opacity:1;transform:translateX(0) translateY(-50%) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.rYFPYLO5JbPizSaN6n6T.Rvw9XtCRYU7T_xflaWBq{opacity:0;transform:translateX(0) translateY(-50%) scale(1)}.TWBLKOSLdfLAUT4wxOxQ.q9cal8onfwxOeC3WJtCC{min-width:300px}.TWBLKOSLdfLAUT4wxOxQ.jmZ1WTJLpQVD3ISp6Hql{pointer-events:none}.N5fmyY0yM2xC_a1Bh3IY{opacity:0;bottom:calc(100% - 10px);position:absolute}.TWL9Lvs0Xd6XOu0Zdbvx{opacity:1;bottom:calc(100% + 15px);position:absolute;transition:.3s}.JRgzRKw3MHZY9hTOoxDd{bottom:calc(100% + 15px);position:absolute}.gx_QG0f6OtE5TpzzAVQM{opacity:1;bottom:calc(100% + 15px);position:absolute}.ME6M0Pyb8gGAvxwV_YBm{opacity:0;bottom:calc(100% - 10px);position:absolute}.TWBLKOSLdfLAUT4wxOxQ img,.TWBLKOSLdfLAUT4wxOxQ svg{position:absolute;top:calc(100% - 1px);left:50%;transform:translateX(-50%)}","",{version:3,sources:["webpack://./src/ui-kit/components/atoms/Tooltip/tooltip.module.scss","webpack://./src/ui-kit/assets/styles/_mixins.scss","webpack://./src/ui-kit/assets/styles/_variables.scss"],names:[],mappings:"AAEA,sBCkDQ,cAAA,CACA,gBAAA,CACA,mBCVQ,CDWR,QAAA,CACA,aAAA,CDpDJ,eEqCK,CFpCL,gBAAA,CACA,iBAAA,CACA,kBAAA,CACA,iBAAA,CACA,wBAAA,CACA,QAAA,CACA,0BAAA,CACA,UEJI,CFKJ,kBEPW,CFQX,SAAA,CACA,aAAA,CACA,eAAA,CACA,eAAA,CACA,iBAAA,CACA,oBAAA,CACA,iBAAA,CAEA,2CACI,SAAA,CACA,uDAAA,CAGJ,sFAEI,SAAA,CACA,iDAAA,CACA,oDAAA,CAGJ,2CACI,SAAA,CACA,iDAAA,CAGJ,2CACI,cAAA,CACA,wBAAA,CACA,WAAA,CACA,SAAA,CACA,8FAEI,SAAA,CACA,SAAA,CACA,oBAAA,CACA,0BAAA,CAGJ,gEACI,SAAA,CACA,sDAAA,CAGJ,gMAGI,SAAA,CACA,8CAAA,CAGJ,gEACI,SAAA,CACA,8CAAA,CAIR,2CACI,cAAA,CACA,wBAAA,CACA,UAAA,CACA,8FAEI,QAAA,CACA,oBAAA,CACA,yBAAA,CAGJ,gEACI,SAAA,CACA,uDAAA,CAGJ,gMAGI,SAAA,CACA,8CAAA,CAGJ,gEACI,SAAA,CACA,8CAAA,CAIR,2CACI,SAAA,CACA,uBAAA,CACA,uBAAA,CACA,8FAEI,OAAA,CACA,qBAAA,CACA,yBAAA,CAGJ,gEACI,SAAA,CACA,sDAAA,CAGJ,gMAGI,SAAA,CACA,gDAAA,CAGJ,gEACI,SAAA,CACA,gDAAA,CAIR,2CAEI,WAAA,CACA,qBAAA,CACA,QAAA,CACA,8FAEI,iBAAA,CACA,SAAA,CACA,qBAAA,CACA,0BAAA,CAGJ,gEACI,SAAA,CACA,wDAAA,CAGJ,gMAGI,SAAA,CACA,iDAAA,CAGJ,gEACI,SAAA,CACA,iDAAA,CAIR,2CAEI,sBAAA,CACA,UAAA,CACA,OAAA,CACA,WAAA,CACA,8FAEI,iBAAA,CACA,mBAAA,CACA,UAAA,CACA,0BAAA,CAGJ,gEACI,SAAA,CACA,wDAAA,CAGJ,gMAGI,SAAA,CACA,iDAAA,CAGJ,gEACI,SAAA,CACA,iDAAA,CAIR,2CACI,eAAA,CAGJ,2CACI,mBAAA,CAGJ,sBACI,SAAA,CACA,wBAAA,CACA,iBAAA,CAGJ,sBACI,SAAA,CACA,wBAAA,CACA,iBAAA,CACA,cAAA,CAGJ,sBACI,wBAAA,CACA,iBAAA,CAGJ,sBACI,SAAA,CACA,wBAAA,CACA,iBAAA,CAGJ,sBACI,SAAA,CACA,wBAAA,CACA,iBAAA,CAGJ,oDAEI,iBAAA,CACA,oBAAA,CACA,QAAA,CACA,0BAAA",sourcesContent:['@use "../../../assets/styles/index" as *;\n\n.tooltip {\n    @include typograpy("p");\n    font-weight: $medium;\n    line-height: 20px;\n    padding: Padding("5") Padding("4");\n    background: SolidColor("dark");\n    position: absolute;\n    bottom: calc(100% + 15px);\n    left: 50%;\n    transform: translateX(-50%);\n    color: $white;\n    border-radius: $borderRadius;\n    z-index: 3;\n    display: block;\n    min-width: 200px;\n    max-width: 300px;\n    text-align: center;\n    word-wrap: break-word;\n    word-break: normal;\n\n    &amp;.enter {\n        opacity: 0;\n        transform: translateX(-50%) translateY(10px) scale(0.95);\n    }\n\n    &amp;.enter-active,\n    &amp;.exit {\n        opacity: 1;\n        transform: translateX(-50%) translateY(0) scale(1);\n        transition: 0.2s all $transitionEaseOut;\n    }\n\n    &amp;.exit-active {\n        opacity: 0;\n        transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    &amp;.top-left {\n        transform: none;\n        bottom: calc(100% + 15px);\n        right: -14px;\n        left: auto;\n        img,\n        svg {\n            left: auto;\n            right: 0px;\n            top: calc(100% - 4px);\n            transform: translateX(-40%);\n        }\n\n        &amp;.enter {\n            opacity: 0;\n            transform: translateX(5px) translateY(10px) scale(0.95);\n        }\n\n        &amp;.enter-active,\n        &amp;.enter-done,\n        &amp;.exit {\n            opacity: 1;\n            transform: translateX(0) translateY(0) scale(1);\n        }\n\n        &amp;.exit-active {\n            opacity: 0;\n            transform: translateX(0) translateY(0) scale(1);\n        }\n    }\n\n    &amp;.top-right {\n        transform: none;\n        bottom: calc(100% + 15px);\n        left: -14px;\n        img,\n        svg {\n            left: 0px;\n            top: calc(100% - 4px);\n            transform: translateX(40%);\n        }\n\n        &amp;.enter {\n            opacity: 0;\n            transform: translateX(-5px) translateY(10px) scale(0.95);\n        }\n\n        &amp;.enter-active,\n        &amp;.enter-done,\n        &amp;.exit {\n            opacity: 1;\n            transform: translateX(0) translateY(0) scale(1);\n        }\n\n        &amp;.exit-active {\n            opacity: 0;\n            transform: translateX(0) translateY(0) scale(1);\n        }\n    }\n\n    &amp;.left {\n        left: auto;\n        right: calc(100% + 16px);\n        bottom: calc(100% - 4px);\n        img,\n        svg {\n            top: calc(41%);\n            left: calc(100% - 7px);\n            transform: rotateZ(-90deg);\n        }\n\n        &amp;.enter {\n            opacity: 0;\n            transform: translateX(16px) translateY(50%) scale(0.95);\n        }\n\n        &amp;.enter-active,\n        &amp;.enter-done,\n        &amp;.exit {\n            opacity: 1;\n            transform: translateX(0) translateY(50%) scale(1);\n        }\n\n        &amp;.exit-active {\n            opacity: 0;\n            transform: translateX(0) translateY(50%) scale(1);\n        }\n    }\n\n    &amp;.bottom {\n        // TODO: [dev] Currently works for RBF form. Not tested in other cases\n        bottom: auto;\n        top: calc(100% + 16px);\n        left: 50%;\n        img,\n        svg {\n            position: absolute;\n            top: -12px;\n            left: calc(50% - 12px);\n            transform: rotateZ(-180deg);\n        }\n\n        &amp;.enter {\n            opacity: 0;\n            transform: translateX(-50%) translateY(-10px) scale(0.95);\n        }\n\n        &amp;.enter-active,\n        &amp;.enter-done,\n        &amp;.exit {\n            opacity: 1;\n            transform: translateX(-50%) translateY(0) scale(1);\n        }\n\n        &amp;.exit-active {\n            opacity: 0;\n            transform: translateX(-50%) translateY(0) scale(1);\n        }\n    }\n\n    &amp;.right {\n        // TODO: [dev] Currently works for RBF form. Not tested in other cases\n        left: calc(100% + 16px);\n        right: auto;\n        top: 7px;\n        bottom: auto;\n        img,\n        svg {\n            position: absolute;\n            top: calc(50% - 6px);\n            left: -18px;\n            transform: rotateZ(-270deg);\n        }\n\n        &amp;.enter {\n            opacity: 0;\n            transform: translateX(-16px) translateY(-50%) scale(0.95);\n        }\n\n        &amp;.enter-active,\n        &amp;.enter-done,\n        &amp;.exit {\n            opacity: 1;\n            transform: translateX(0) translateY(-50%) scale(1);\n        }\n\n        &amp;.exit-active {\n            opacity: 0;\n            transform: translateX(0) translateY(-50%) scale(1);\n        }\n    }\n\n    &amp;.wide {\n        min-width: 300px;\n    }\n\n    &amp;.ignore-pointer {\n        pointer-events: none;\n    }\n\n    &amp;-enter {\n        opacity: 0;\n        bottom: calc(100% - 10px);\n        position: absolute;\n    }\n\n    &amp;-enter-active {\n        opacity: 1;\n        bottom: calc(100% + 15px);\n        position: absolute;\n        transition: 0.3s;\n    }\n\n    &amp;-enter-done {\n        bottom: calc(100% + 15px);\n        position: absolute;\n    }\n\n    &amp;-exit {\n        opacity: 1;\n        bottom: calc(100% + 15px);\n        position: absolute;\n    }\n\n    &amp;-exit-active {\n        opacity: 0;\n        bottom: calc(100% - 10px);\n        position: absolute;\n    }\n\n    img,\n    svg {\n        position: absolute;\n        top: calc(100% - 1px);\n        left: 50%;\n        transform: translateX(-50%);\n    }\n}\n','@use "variables" as *;\n@use "functions" as *;\n\n@mixin typograpy($tag) {\n    @if ($tag == "h1") {\n        font-size: 40px;\n        line-height: 50px;\n        letter-spacing: $letterSpacing;\n        font-weight: $extra-bold;\n        margin: 0;\n        color: SolidColor("dark");\n    }\n    @if ($tag == "h2") {\n        font-size: 35px;\n        line-height: 45px;\n        letter-spacing: $letterSpacing;\n        font-weight: $extra-bold;\n        margin: 0;\n        color: SolidColor("dark");\n    }\n    @if ($tag == "h3") {\n        font-size: 30px;\n        line-height: 40px;\n        letter-spacing: $letterSpacing;\n        font-weight: $extra-bold;\n        margin: 0;\n        color: SolidColor("dark");\n    }\n    @if ($tag == "h4") {\n        font-size: 25px;\n        line-height: 35px;\n        letter-spacing: $letterSpacing;\n        margin: 0;\n        color: SolidColor("dark");\n    }\n    @if ($tag == "h5") {\n        font-size: 20px;\n        line-height: 30px;\n        letter-spacing: $letterSpacing;\n        margin: 0;\n        font-weight: $medium;\n        color: SolidColor("dark");\n    }\n    @if ($tag == "h6") {\n        font-size: 16px;\n        line-height: 26px;\n        letter-spacing: $letterSpacing;\n        margin: 0;\n        font-weight: $medium;\n        color: SolidColor("dark");\n    }\n    @if ($tag == "p") {\n        font-size: 14px;\n        line-height: 24px;\n        letter-spacing: $letterSpacing;\n        margin: 0;\n        color: SolidColor("dark");\n    }\n}\n','@use "colors/solid-colors" as *;\n@use "colors/light-colors" as *;\n@use "size/margin-size" as *;\n@use "size/padding-size" as *;\n@use "functions" as *;\n\n$borderRadius: 16px;\n$background: linear-gradient(39deg, #6fdfa0 0%, #405db0 81%, #405db0 81%, #3b5bb6 81%);\n$white: #ffffff;\n\n$separatorBorder: 0.5px solid SolidColor("smoke");\n$buttonBorder: 2px solid SolidColor("tosca");\n$buttonBorderWhite: 2px solid $white;\n\n$shadowOutlineStatic:\n    0px 0px 0px 1px rgba(0, 0, 0, 0) inset,\n    0px 0px 3px 0px rgba(0, 0, 0, 0);\n$shadowOutlineHover:\n    0px 0px 0px 1px LightColor("dark-20") inset,\n    0px 0px 3px 0px rgba(0, 0, 0, 0);\n$shadowOutlineActive:\n    0px 0px 0px 1px #16cdd6 inset,\n    0px 0px 3px 0px rgba(22, 205, 214, 0.3);\n$shadowOutlineError:\n    0px 0px 0px 1px #ee6a7d inset,\n    0px 0px 3px 0px rgba(#ee6a7d, 0.3);\n\n$transitionEaseOut: cubic-bezier(0.22, 0.61, 0.36, 1);\n\n// Width values for breakpoints. Should be used with the "@media (max-width: ..."\n$wide-desktop-width: 1279.98px;\n$desktop-width: 1199.98px;\n$laptop-width: 991.98px;\n$tablet-width: 767.98px;\n$phone-width: 575.98px;\n$extra-small: 358.98px;\n\n$extra-bold: 900;\n$very-bold: 800;\n$bold: 700;\n$semi-bold: 600;\n$medium: 400;\n$regular: 300;\n\n$letterSpacing: 0.5px;\n\n// SSR landings width\n$landingMaxWidth: 1172px;\n'],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={tooltip:"TWBLKOSLdfLAUT4wxOxQ",enter:"nMPkDNGr_dDHPKKwJ8zN","enter-active":"hQjMPZla5BtcDx4S0HXf",exit:"IwlLtvXjt8pH8WDV7u_w","exit-active":"Rvw9XtCRYU7T_xflaWBq","top-left":"XX3l8baZPDTr657Csp1W","enter-done":"rXPdatt5w6RxUgjUWti3","top-right":"D51vOWEX8uijR5avfnhq",left:"Qvkx5HWHDw2fvk8uIALJ",bottom:"ylsBe4ryUKGJd0dt1KY0",right:"rYFPYLO5JbPizSaN6n6T",wide:"q9cal8onfwxOeC3WJtCC","ignore-pointer":"jmZ1WTJLpQVD3ISp6Hql","tooltip-enter":"N5fmyY0yM2xC_a1Bh3IY","tooltip-enter-active":"TWL9Lvs0Xd6XOu0Zdbvx","tooltip-enter-done":"JRgzRKw3MHZY9hTOoxDd","tooltip-exit":"gx_QG0f6OtE5TpzzAVQM","tooltip-exit-active":"ME6M0Pyb8gGAvxwV_YBm"};let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./src/common-apis/errorUtils.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=&gt;{__webpack_require__.d(__webpack_exports__,{J:()=&gt;logErrorOrOutputToConsole,M:()=&gt;improveAndRethrow});var _utils_logging_logger_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/common-apis/utils/logging/logger.js"),_utils_safeStringify_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/common-apis/utils/safeStringify.js");function improveAndRethrow(e,settingFunction){var additionalMessage=arguments.length&gt;2&amp;&amp;void 0!==arguments[2]?arguments[2]:"",message=improvedErrorMessage(e,settingFunction,additionalMessage);if(e)throw e.message=message,e;throw Error(message)}function improvedErrorMessage(e,settingFunction,additionalMessage){var message="\nFunction call ".concat(null!=settingFunction?settingFunction:""," failed. ");return e&amp;&amp;e.message&amp;&amp;(message+="Error message: ".concat(e.message,". ")),additionalMessage&amp;&amp;(message+="".concat(additionalMessage," ")),message}function logErrorOrOutputToConsole(e){try{console.log("BEFORE SAFE",e),_utils_logging_logger_js__WEBPACK_IMPORTED_MODULE_0__.Y.log("logErrorOrOutputToConsole",(0,_utils_safeStringify_js__WEBPACK_IMPORTED_MODULE_1__.o)(e))}catch(e){console.log("logErrorOrOutputToConsole",e)}}},"./src/ui-kit/components/atoms/Tooltip/Tooltip.jsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=&gt;{__webpack_require__.d(__webpack_exports__,{c:()=&gt;TOOLTIP_POSITIONS,u:()=&gt;Tooltip});var react=__webpack_require__("./node_modules/react/index.js"),CSSTransition=__webpack_require__("./node_modules/react-transition-group/esm/CSSTransition.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),tooltip_module=__webpack_require__("./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[15].use[1]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[15].use[3]!./src/ui-kit/components/atoms/Tooltip/tooltip.module.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default(),injectStylesIntoStyleTag_default()(tooltip_module.Z,options);let Tooltip_tooltip_module=tooltip_module.Z&amp;&amp;tooltip_module.Z.locals?tooltip_module.Z.locals:void 0;function darkRectangle(){return react.createElement("svg",{width:"25",height:"13",viewBox:"0 0 25 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},react.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12.5 13L25 0H0L12.5 13Z",fill:"#232D42"}))}var useCallHandlingErrors=__webpack_require__("./src/ui-kit/hooks/useCallHandlingErrors.js"),TOOLTIP_POSITIONS={TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",TOP_LEFT:"top-left",TOP_RIGHT:"top-right"},Tooltip=function(param){var children=param.children,showTooltip=param.showTooltip,_param_handleClick=param.handleClick,handleClick=void 0===_param_handleClick?function(){}:_param_handleClick,_param_wide=param.wide,_param_position=param.position,position=void 0===_param_position?TOOLTIP_POSITIONS.TOP:_param_position,_param_ignorePointerEvents=param.ignorePointerEvents,handleError=(0,useCallHandlingErrors.d)(),onClick=function(e){e.stopPropagation(),handleClick()};return react.createElement(CSSTransition.Z,{in:showTooltip,timeout:400,unmountOnExit:!0},react.createElement("span",{className:"".concat(Tooltip_tooltip_module.tooltip," ").concat(void 0!==_param_wide&amp;&amp;_param_wide?Tooltip_tooltip_module.wide:""," ").concat(Tooltip_tooltip_module[position]," ").concat(void 0!==_param_ignorePointerEvents&amp;&amp;_param_ignorePointerEvents?Tooltip_tooltip_module["ignore-pointer"]:""),onClick:function(e){return handleError(onClick,e)},onDoubleClick:function(e){return handleError(function(e){return e.stopPropagation()},e)}},react.createElement(darkRectangle,null),children))};Tooltip.propTypes={children:prop_types_default().node.isRequired,showTooltip:prop_types_default().bool.isRequired,handleClick:prop_types_default().func,wide:prop_types_default().bool,position:prop_types_default().oneOf(Object.values(TOOLTIP_POSITIONS)),ignorePointerEvents:prop_types_default().bool},Tooltip.defaultProps={handleClick:function(){},wide:!1,position:TOOLTIP_POSITIONS.TOP,ignorePointerEvents:!1},Tooltip.__docgenInfo={description:"Tooltip component for displaying contextual information.\n\n@component\n@param {Object} props - The props object.\n@param {React.ReactNode} props.children - The content to display inside the tooltip.\n@param {boolean} props.showTooltip - Controls whether the tooltip is visible.\n@param {Function} props.handleClick - Handler for click events.\n@param {boolean} [props.wide] - If true, applies a wider style to the tooltip.\n@param {string} props.position - One of the predefined positions for the tooltip.\n@param {boolean} [props.ignorePointerEvents] - If true, the tooltip will not react to pointer events.",methods:[],displayName:"Tooltip",props:{handleClick:{defaultValue:{value:"() =&gt; {}",computed:!1},description:"",type:{name:"func"},required:!1},wide:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},position:{defaultValue:{value:'"top"',computed:!1},description:"",type:{name:"enum",value:[{value:'"top"',computed:!1},{value:'"left"',computed:!1},{value:'"right"',computed:!1},{value:'"bottom"',computed:!1},{value:'"top-left"',computed:!1},{value:'"top-right"',computed:!1}]},required:!1},ignorePointerEvents:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},children:{description:"",type:{name:"node"},required:!0},showTooltip:{description:"",type:{name:"bool"},required:!0}}}}}]);</span></span></span></pre></td></tr></table></pre>
-
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-16T01:54:57.375Z
-            </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>
-