@rabbitio/ui-kit 1.0.0-beta.70 → 1.0.0-beta.72

package/src/{components → ui-kit/components}/organisms/SwapForm/SwapForm.jsx

@@ -4,17 +4,18 @@ import PropTypes from "prop-types";
 
 import s from "./swap-form.module.scss";
 
-import { useReferredState } from "../../hooks/useReferredState.js";
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+import { useReferredState } from "../../../hooks/useReferredState.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
 
-import { AmountUtils } from "../../../common/amountUtils.js";
+import { AmountUtils } from "../../../../common-apis/amountUtils.js";
 import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
 import { AmountInput } from "../../molecules/AmountInput/AmountInput.jsx";
 import { Validation } from "../../atoms/Validation/Validation.jsx";
 import { Button } from "../../atoms/buttons/Button/Button.jsx";
 import { Textarea } from "../../atoms/Textarea/Textarea.jsx";
-import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
 import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
+import { TOOLTIP_POSITIONS } from "../../atoms/Tooltip/Tooltip.jsx";
+import { useIsHydrated } from "../../../hooks/useIsHydrated.js";
 
 /**
  * This is the type definition of a function used inside SwapForm to compose the URL for the hero button.
@@ -79,17 +80,21 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  */
 
 /**
- * Handler for the confirm button click. You should implement errors handling inside it.
+ * Handler for the confirm button click. You should implement error handling inside it.
  *
  * @function
  * @name handleConfirmButtonClick
- * @param {function} resetButtonLoader - callback resetting the confirm button loader
+ * @param {function} resetButtonLoader - Callback for resetting the confirm button loader.
  * @param {function} setValidationContent - Function to set the validation error message on the form.
  * @param {function} setBalanceValid - Function to set the balance validity, accepts a boolean.
  * @param {function} setMinimalAmountValid - Function to set the minimal amount validity, accepts a boolean.
  * @param {function} setMaximumAmountValid - Function to set the maximum amount validity, accepts a boolean.
  * @param {function} setIsPairSupported - Function to set the pair support status, accepts a boolean.
  * @param {function} setIsSameCoins - Function to set the status if the same coins are used, accepts a boolean.
+ * @param {string} recipientAddress - The address of the recipient.
+ * @param {string} recipientAddressExtraId - Additional identifier for the recipient address.
+ * @param {string} refundAddress - The address for refund.
+ * @param {string} refundAddressExtraId - Additional identifier for the refund address.
  * @return {void}
  */
 
@@ -136,6 +141,28 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  *         }>}
  */
 
+/**
+ * Function returning extraId name for asset if present.
+ * You must pass it if you use the form with addresses inputs.
+ *
+ * @function
+ * @name getExtraIdNameByTicker
+ * @param {string} ticker - Ticker symbol of the asset.
+ * @return {string|null}
+ */
+
+/**
+ * Function validating addresses.
+ * By default, will treat any addresses as valid.
+ * You must pass it if you use the form with addresses inputs and want to validate addresses.
+ *
+ * @function
+ * @name validateAddressByTicker
+ * @param {string} ticker - Ticker symbol of the asset.
+ * @param {string} address - Address to be validated
+ * @return {Promise<boolean>}
+ */
+
 /**
  * Swap form provides basic functionality for entering to/from amounts both in crypto and fiat, switching assets,
  * selecting assets, showing balance for assets. It gracefully handles unavailable fiat rates and can work
@@ -183,6 +210,8 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  * @param {object} [props.translations] - Object containing translations, default English texts will be used if omitted.
  * @param {string} props.swapSeparatorIconSrc - Source URL for the swap separator icon.
  * @param {boolean} props.swapButtonAlwaysActive - Setting that allows the form state to proceed to the next step regardless of validity.
+ * @param {getExtraIdNameByTicker} props.getExtraIdNameByTicker - Function returning extraId name for asset
+ * @param {validateAddressByTicker} [props.validateAddressByTicker] - Function validating address
  * @return {JSX.Element} Rendered SwapForm component.
  * @constructor
  */
@@ -212,7 +241,11 @@ export const SwapForm = ({
         setMinimalAmountValid,
         setMaximumAmountValid,
         setIsPairSupported,
-        setIsSameCoins
+        setIsSameCoins,
+        recipientAddress,
+        recipientAddressExtraId,
+        refundAddress,
+        refundAddressExtraId
     ) => {},
     composeConfirmButtonTo = (fromTicker, toTicker, fromAmount) => "",
     setSwapCreationEstimation = details => {},
@@ -241,6 +274,10 @@ export const SwapForm = ({
     formHasFiat = true,
     termsOfUseUrl = null,
     privacyPolicyUrl = null,
+    getExtraIdNameByTicker = ticker => null,
+    validateAddressByTicker = ticker => false,
+    swapSeparatorIconSrc,
+    swapButtonAlwaysActive = false,
     translations = {
         swapAllButtonTitles: {
             enable: "Swap all",
@@ -268,10 +305,12 @@ export const SwapForm = ({
         },
         addressFields: {
             addressTitle: "Recepient address",
-            extraIdTitle: "Extra ID (optional)",
-            extraIdPlaceholder: "Example: ABC123",
-            extraIdNotice:
-                "Please check if your recipient address requires a 'Memo' or 'Destination Tag' - sometimes called a tag, ID, label, or a note. Exchanges may require such ID for the deposit. Including this identifier is crucial when required, as omitting or misentering it can result in lost assets.",
+            refundAddressTitle: "Refund address",
+            extraIdPlaceholder: "(optional)",
+            refundAddressExtraIdNotice:
+                "Please check if your address requires additional identifier (sometimes called a Memo, Destination Tag, Tag, ID, Label or Note). Including this identifier is crucial when required, as omitting or misentering it can result in lost assets.",
+            receivingAddressExtraIdNotice:
+                "Please check if your address requires additional identifier (sometimes called a Memo, Destination Tag, Tag, ID, Label or Note). Including this identifier is crucial when required, as omitting or misentering it can result in lost assets.",
         },
         rateSelector: {
             floatingRate: "Floating rate",
@@ -279,16 +318,6 @@ export const SwapForm = ({
         },
         confirmButtonText: "Swap",
     },
-    swapSeparatorIconSrc,
-    swapButtonAlwaysActive = false,
-    recepientAddress,
-    recepientAddressExtraId,
-    recepientAddressValid = true,
-    recepientAddressExtraIdValid = true,
-    setRecepientAddress,
-    setRecepientAddressExtraId,
-    recepientAddressExtraIdAvailable = false,
-    displayRateSelector = false,
 }) => {
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
     const IS_FIXED_BY_DEFAULT = false;
@@ -316,7 +345,6 @@ export const SwapForm = ({
     //       write single useEffect setting sendAssetAmount to the=is passed value and simplify the logic below. task_id=6453251e49b04c5e88a3cc771479ffb5
     const [isAmountZero, setIsAmountZero] = useState(preservedAmount == null || String(preservedAmount) === "0");
     const [isLoading, setIsLoading] = useReferredState(false); // Whether the form is in the progress of loading some data (new rates, for example)
-    const [isAddressFieldEnabled, setIsAddressFieldEnabled] = useState(false);
     const [isFixedRate, setIsFixedRate] = useReferredState(null);
 
     const [confirmButtonTo, setConfirmButtonTo] = useState(
@@ -331,10 +359,24 @@ export const SwapForm = ({
     const [dataUpdateTimeoutId, setDataUpdateTimeoutId] = useReferredState(null);
     const [idleDataUpdateTimeoutId, setIdleDataUpdateTimeoutId] = useReferredState(null);
 
+    const [recipientAddress, setRecipientAddress] = useReferredState("");
+    const [recipientAddressExtraId, setRecipientAddressExtraId] = useReferredState("");
+    const [isRecipientAddressValid, setIsRecipientAddressValid] = useReferredState(false);
+    const [isRefundAddressRequired, setIsRefundAddressRequired] = useState(false);
+    const [refundAddress, setRefundAddress] = useReferredState("");
+    const [refundAddressExtraId, setRefundAddressExtraId] = useReferredState("");
+    const [isRefundAddressValid, setIsRefundAddressValid] = useReferredState(false);
+
     const callHandlingErrors = useCallHandlingErrors();
+    const isHydrated = useIsHydrated();
 
     const recalculationDelayOnTyping = 1000;
 
+    const isAddressFieldEnabled = !formHasBalance;
+    const displayRateSelector = !formHasBalance;
+    const recipientAddressExtraIdName = getExtraIdNameByTicker(receivingAssetTicker);
+    const refundAddressExtraIdName = getExtraIdNameByTicker(sendingAssetTicker);
+
     const handleSendAssetAmountChange = amount => {
         if (amount != null && amount !== "") {
             setUpdateReceiveInputTo(AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount));
@@ -491,6 +533,7 @@ export const SwapForm = ({
 
                     setAmountLimitsAndRate(swapCreationInfo);
                     setSwapCreationEstimation(swapCreationInfo);
+                    setIsRefundAddressRequired(swapCreationInfo?.isRefundAddressRequired);
                     processMinMaxAmounts(isSwapAll.current ? swapCreationInfo.fromAmountCoins : amount);
                     setIsSwapCalculated(true);
                 } else {
@@ -630,9 +673,9 @@ export const SwapForm = ({
                     isSwapCalculated &&
                     (!isSameCoins || !formHasBalance) &&
                     isPairSupported &&
-                    (!isAddressFieldEnabled || recepientAddressValid))
+                    (!isAddressFieldEnabled || isRecipientAddressValid.current) &&
+                    (!isRefundAddressRequired || isRefundAddressValid.current))
         );
-
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         balanceValid,
@@ -643,9 +686,49 @@ export const SwapForm = ({
         isSameCoins,
         isPairSupported,
         isAddressFieldEnabled,
-        recepientAddressValid,
+        isRecipientAddressValid.current,
+        isRefundAddressRequired,
+        isRefundAddressValid.current,
     ]);
 
+    useEffect(() => {
+        setIsRecipientAddressValid(false);
+        setRecipientAddress("");
+        setRecipientAddressExtraId("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [receivingAssetTicker]);
+
+    useEffect(() => {
+        setIsRefundAddressValid(false);
+        setRefundAddress("");
+        setRefundAddressExtraId("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sendingAssetTicker]);
+
+    useEffect(() => {
+        (async () => {
+            if (!receivingAssetTicker) return;
+            setIsRecipientAddressValid(
+                recipientAddress.current === ""
+                    ? false
+                    : await validateAddressByTicker(receivingAssetTicker, recipientAddress.current)
+            );
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [recipientAddress.current, recipientAddressExtraId.current, receivingAssetTicker]);
+
+    useEffect(() => {
+        (async () => {
+            if (!sendingAssetTicker || !isRefundAddressRequired) return;
+            setIsRefundAddressValid(
+                refundAddress.current === ""
+                    ? false
+                    : await validateAddressByTicker(sendingAssetTicker, refundAddress.current)
+            );
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [refundAddress.current, refundAddressExtraId.current, sendingAssetTicker, isRefundAddressRequired]);
+
     useEffect(() => {
         // Here we set up auto recalculations for the swap details if the form is ready to swap but is idle for some time
         let timeoutId = null;
@@ -714,27 +797,6 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sendAssetAmount.current]);
 
-    // Checking if all necessary props for address input are passed properly.
-    useEffect(() => {
-        setIsAddressFieldEnabled(
-            recepientAddress !== undefined &&
-                recepientAddressExtraId !== undefined &&
-                recepientAddressValid !== undefined &&
-                setRecepientAddress !== undefined &&
-                typeof setRecepientAddress === "function" &&
-                setRecepientAddressExtraId !== undefined &&
-                typeof setRecepientAddressExtraId === "function"
-        );
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        recepientAddress,
-        recepientAddressExtraId,
-        recepientAddressValid,
-        recepientAddressExtraIdValid,
-        setRecepientAddress,
-        setRecepientAddressExtraId,
-    ]);
-
     return (
         <div className={s["swap-form"]}>
             <TitleBox
@@ -882,6 +944,8 @@ export const SwapForm = ({
                                         ""
                                     )}
                                 </>
+                            ) : !minimalAmount.current ? (
+                                ""
                             ) : (
                                 <>
                                     {translations.informationBlock.minimumAmount}
@@ -923,34 +987,57 @@ export const SwapForm = ({
                         <TitleBox title={translations.addressFields.addressTitle}>
                             <Textarea
                                 type={"text"}
-                                onChange={e => setRecepientAddress(e.target.value)}
-                                value={recepientAddress}
+                                onChange={e => setRecipientAddress(e.target.value)}
+                                value={recipientAddress.current}
                                 adaptiveHeight={true}
-                                errorEncountered={!recepientAddressValid && recepientAddress !== ""}
+                                errorEncountered={recipientAddress.current !== "" && !isRecipientAddressValid.current}
                             />
                         </TitleBox>
-                        {recepientAddressExtraIdAvailable ? (
+                        {isHydrated && recipientAddressExtraIdName ? (
                             <TitleBox
-                                title={translations.addressFields.extraIdTitle}
-                                titleNoticeText={translations.addressFields.extraIdNotice}
+                                title={recipientAddressExtraIdName}
+                                titleNoticeText={translations.addressFields.receivingAddressExtraIdNotice}
                                 titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
                             >
                                 <Textarea
                                     type={"text"}
-                                    onChange={e => setRecepientAddressExtraId(e.target.value)}
-                                    value={recepientAddressExtraId}
+                                    onChange={e => setRecipientAddressExtraId(e.target.value)}
+                                    value={recipientAddressExtraId.current}
                                     adaptiveHeight={true}
-                                    errorEncountered={!recepientAddressExtraIdValid}
                                     placeholder={translations.addressFields.extraIdPlaceholder}
                                 />
                             </TitleBox>
-                        ) : (
-                            ""
-                        )}
+                        ) : null}
+                        {isHydrated && isRefundAddressRequired ? (
+                            <>
+                                <TitleBox title={translations.addressFields.refundAddressTitle}>
+                                    <Textarea
+                                        type={"text"}
+                                        onChange={e => setRefundAddress(e.target.value)}
+                                        value={refundAddress.current}
+                                        adaptiveHeight={true}
+                                        errorEncountered={refundAddress.current !== "" && !isRefundAddressValid.current}
+                                    />
+                                </TitleBox>
+                                {refundAddressExtraIdName ? (
+                                    <TitleBox
+                                        title={refundAddressExtraIdName}
+                                        titleNoticeText={translations.addressFields.refundAddressExtraIdNotice}
+                                        titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
+                                    >
+                                        <Textarea
+                                            type={"text"}
+                                            onChange={e => setRefundAddressExtraId(e.target.value)}
+                                            value={refundAddressExtraId.current}
+                                            adaptiveHeight={true}
+                                            placeholder={translations.addressFields.extraIdPlaceholder}
+                                        />
+                                    </TitleBox>
+                                ) : null}
+                            </>
+                        ) : null}
                     </div>
-                ) : (
-                    ""
-                )}
+                ) : null}
 
                 {displayRateSelector ? (
                     <div className={s["swap-form-rate-selector"]}>
@@ -1005,7 +1092,11 @@ export const SwapForm = ({
                                 setMinimalAmountValid,
                                 setMaximumAmountValid,
                                 setIsPairSupported,
-                                setIsSameCoins
+                                setIsSameCoins,
+                                recipientAddress.current,
+                                recipientAddressExtraId.current,
+                                refundAddress.current,
+                                refundAddressExtraId.current
                             )
                         }
                         fullWidthOnMobiles
@@ -1075,7 +1166,11 @@ SwapForm.defaultProps = {
         setMinimalAmountValid,
         setMaximumAmountValid,
         setIsPairSupported,
-        setIsSameCoins
+        setIsSameCoins,
+        recipientAddress,
+        recipientAddressExtraId,
+        refundAddress,
+        refundAddressExtraId
     ) => {},
     composeConfirmButtonTo: (fromTicker, toTicker, fromAmount) => "",
     setSwapCreationEstimation: details => {},

package/src/{components → ui-kit/components}/organisms/SwapForm/swap-form.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .swap-form {
     width: 100%;

package/src/{components → ui-kit/components}/templates/DeterminedErrorDialogStep/DeterminedErrorDialogStep.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { DialogStep } from "../../organisms/Dialog/DialogStep/DialogStep";
+import { DialogStep } from "../../organisms/Dialog/DialogStep/DialogStep.jsx";
 
-import determinedErrorImage from "../../../assets/wrappedImages/determinedError";
+import determinedErrorImage from "../../../assets/wrappedImages/determinedError.jsx";
 
 /**
  * Template dialog step to display an error through the title and subtitle.

package/src/{components → ui-kit}/hooks/useCallHandlingErrors.js

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 
-import { Logger } from "../../common/utils/logging/logger.js";
+import { Logger } from "../../common-apis/utils/logging/logger.js";
 
 export function useCallHandlingErrors() {
     const [, setState] = useState();

package/src/ui-kit/hooks/useIsHydrated.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+
+// Custom hook to check if the component is hydrated
+export function useIsHydrated() {
+    const [isHydrated, setIsHydrated] = useState(false);
+
+    useEffect(() => {
+        setIsHydrated(true);
+    }, []);
+
+    return isHydrated;
+}

package/src/{components → ui-kit}/utils/textUtils.js

@@ -1,6 +1,6 @@
 import copy from "clipboard-copy";
 
-import { improveAndRethrow } from "../../common/errorUtils.js";
+import { improveAndRethrow } from "../../common-apis/errorUtils.js";
 
 /**
  * Copies given text to clipboard inside browser.

package/coverage/rabbit-ui-kit/src/components/atoms/AssetIcon/index.html

@@ -1,116 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for rabbit-ui-kit/src/components/atoms/AssetIcon</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> rabbit-ui-kit/src/components/atoms/AssetIcon</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/54</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/54</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>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file low" data-value="AssetIcon.jsx"><a href="AssetIcon.jsx.html">AssetIcon.jsx</a></td>
-	<td data-value="0" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
-	</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="54" class="abs low">0/54</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="54" class="abs low">0/54</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <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-05-26T11:41:12.304Z
-            </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>
-    

package/coverage/rabbit-ui-kit/src/components/atoms/Input/index.html

@@ -1,116 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for rabbit-ui-kit/src/components/atoms/Input</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> rabbit-ui-kit/src/components/atoms/Input</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/182</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/182</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>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file low" data-value="Input.jsx"><a href="Input.jsx.html">Input.jsx</a></td>
-	<td data-value="0" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
-	</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="182" class="abs low">0/182</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="182" class="abs low">0/182</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <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-05-26T11:41:12.304Z
-            </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>
-