@matbea-ui/matbea-ui 0.1.9 → 0.2.0

package/dist/matbea-ui.es.js

@@ -1,60 +1,2258 @@
-import { Button as t } from "./matbea-ui.es2.js";
-import { CopyTooltip as p } from "./matbea-ui.es3.js";
-import { Typography as f } from "./matbea-ui.es4.js";
-import { Informer as a } from "./matbea-ui.es5.js";
-import { TextField as n } from "./matbea-ui.es6.js";
-import { Container as l } from "./matbea-ui.es7.js";
-import { Counter as s } from "./matbea-ui.es8.js";
-import { HamburgerButton as T } from "./matbea-ui.es9.js";
-import { Loader as d } from "./matbea-ui.es10.js";
-import { RadioButton as h } from "./matbea-ui.es11.js";
-import { SelectField as B } from "./matbea-ui.es12.js";
-import { Tooltip as S } from "./matbea-ui.es13.js";
-import { UserAccount as L } from "./matbea-ui.es14.js";
-import { TabList as w } from "./matbea-ui.es15.js";
-import { Table as I } from "./matbea-ui.es16.js";
-import { Switcher as q } from "./matbea-ui.es17.js";
-import { Checkbox as E } from "./matbea-ui.es18.js";
-import { Logo as U } from "./matbea-ui.es19.js";
-import { ApplicationData as v } from "./matbea-ui.es20.js";
-import { ApplicationInfo as G } from "./matbea-ui.es21.js";
-import { ApplicationStatus as K } from "./matbea-ui.es22.js";
-import { BalanceRow as O } from "./matbea-ui.es23.js";
-import { CurrencyName as Q } from "./matbea-ui.es24.js";
-import { CurrencyRate as W } from "./matbea-ui.es25.js";
-import { Requisites as Y } from "./matbea-ui.es26.js";
-import { TransactionStatus as _ } from "./matbea-ui.es27.js";
-import { copyToClipboard as oo, formatCardNumber as ro, maskEmail as to } from "./matbea-ui.es28.js";
-import { theme as po } from "./matbea-ui.es29.js";
-export {
-  v as ApplicationData,
-  G as ApplicationInfo,
-  K as ApplicationStatus,
-  O as BalanceRow,
-  t as Button,
-  E as Checkbox,
-  l as Container,
-  p as CopyTooltip,
-  s as Counter,
-  Q as CurrencyName,
-  W as CurrencyRate,
-  T as HamburgerButton,
-  a as Informer,
-  d as Loader,
-  U as Logo,
-  h as RadioButton,
-  Y as Requisites,
-  B as SelectField,
-  q as Switcher,
-  w as TabList,
-  I as Table,
-  n as TextField,
-  S as Tooltip,
-  _ as TransactionStatus,
-  f as Typography,
-  L as UserAccount,
-  oo as copyToClipboard,
-  ro as formatCardNumber,
-  to as maskEmail,
-  po as theme
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled, { css, styled as styled$1, keyframes } from 'styled-components';
+import { useState, forwardRef, useCallback, useId, useRef, useMemo, useLayoutEffect, useEffect } from 'react';
+
+const sizeMap = {
+    default: {
+        padding: "15px 22px",
+        minHeight: "48px",
+        fontSize: "15px",
+        lineHeight: "18px",
+        gap: "10px",
+        iconGap: "6px",
+    },
+    medium: {
+        padding: "12px 16px",
+        minHeight: "42px",
+        fontSize: "15px",
+        lineHeight: "18px",
+        gap: "10px",
+        iconGap: "6px",
+    },
+    small: {
+        padding: "10px",
+        minHeight: "36px",
+        fontSize: "14px",
+        lineHeight: "17px",
+        gap: "4px",
+        iconGap: "4px",
+    },
 };
+const getVariantStyles$1 = (variant) => {
+    return ({ theme }) => {
+        const colors = theme.colors;
+        const palette = {
+            primary: {
+                default: {
+                    bg: colors.primary.primaryBlue,
+                    color: colors.primary.white,
+                    border: colors.primary.primaryBlue,
+                },
+                hover: {
+                    bg: colors.primary.hoverBlue,
+                    color: colors.primary.white,
+                    border: colors.primary.hoverBlue,
+                },
+                active: {
+                    bg: colors.primary.activeBlue,
+                    color: colors.primary.white,
+                    border: colors.primary.activeBlue,
+                },
+                disabled: {
+                    bg: colors.gray.lightGray2,
+                    color: colors.gray.darkGray,
+                    border: colors.gray.lightGray2,
+                },
+            },
+            secondary: {
+                default: {
+                    bg: "transparent",
+                    color: colors.primary.primaryBlue,
+                    border: colors.primary.primaryBlue,
+                },
+                hover: {
+                    bg: colors.primary.primaryBlue,
+                    color: colors.primary.white,
+                    border: colors.primary.primaryBlue,
+                },
+                active: {
+                    bg: colors.primary.activeBlue,
+                    color: colors.primary.white,
+                    border: colors.primary.activeBlue,
+                },
+                disabled: {
+                    bg: "transparent",
+                    color: colors.gray.darkGray,
+                    border: colors.gray.lightGray2,
+                },
+            },
+            tertiary: {
+                default: {
+                    bg: "transparent",
+                    color: colors.primary.primaryBlue,
+                    border: "transparent",
+                },
+                hover: {
+                    bg: colors.gray.lightBlueGray,
+                    color: colors.primary.primaryBlue,
+                    border: "transparent",
+                },
+                active: {
+                    bg: colors.gray.lightBlueGray2,
+                    color: colors.primary.primaryBlue,
+                    border: "transparent",
+                },
+                disabled: {
+                    bg: "transparent",
+                    color: colors.gray.darkGray,
+                    border: "transparent",
+                },
+            },
+        };
+        const tokens = palette[variant];
+        return css `
+      background-color: ${tokens.default.bg};
+      color: ${tokens.default.color};
+      border-color: ${tokens.default.border};
+
+      &:hover:not(:disabled) {
+        background-color: ${tokens.hover.bg};
+        color: ${tokens.hover.color};
+        border-color: ${tokens.hover.border};
+      }
+
+      &:active:not(:disabled) {
+        background-color: ${tokens.active.bg};
+        color: ${tokens.active.color};
+        border-color: ${tokens.active.border};
+      }
+
+      &:disabled {
+        background-color: ${tokens.disabled.bg};
+        color: ${tokens.disabled.color};
+        border-color: ${tokens.disabled.border};
+      }
+    `;
+    };
+};
+const StyledButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: ${({ $form }) => $form === "brick-right" ? "0 5px 5px 0" : "5px"};
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease,
+    color 0.15s ease, opacity 0.15s ease;
+  font-weight: 600;
+
+  ${({ $size }) => css `
+    padding: ${sizeMap[$size].padding};
+    min-height: ${sizeMap[$size].minHeight};
+    font-size: ${sizeMap[$size].fontSize};
+    line-height: ${sizeMap[$size].lineHeight};
+  `}
+
+  ${({ $hasIcon, $iconOnly, $size }) => css `
+    gap: ${$iconOnly
+    ? "0"
+    : $hasIcon
+        ? sizeMap[$size].iconGap
+        : sizeMap[$size].gap};
+  `}
+
+  ${({ $fullWidth }) => $fullWidth &&
+    css `
+      width: 100%;
+    `}
+
+  ${({ $variant }) => getVariantStyles$1($variant)}
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+const IconSlot = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  ${({ $iconOnly }) => $iconOnly &&
+    css `
+      width: 18px;
+      height: 18px;
+    `}
+`;
+
+const Button = ({ variant = "primary", size = "default", form = "default", fullWidth = false, icon, iconPosition = "left", children, disabled, ...rest }) => {
+    const hasText = Boolean(children);
+    const iconOnly = !!icon && (!hasText || iconPosition === "only");
+    const showLeftIcon = !!icon && !iconOnly && iconPosition === "left";
+    const showRightIcon = !!icon && !iconOnly && iconPosition === "right";
+    return (jsxs(StyledButton, { type: "button", "$variant": variant, "$size": size, "$form": form, "$fullWidth": fullWidth, "$hasIcon": !!icon && hasText, "$iconOnly": iconOnly, disabled: disabled, ...rest, children: [showLeftIcon && jsx(IconSlot, { "$iconOnly": false, children: icon }), (!iconOnly || !icon) && children, iconOnly && icon && jsx(IconSlot, { "$iconOnly": true, children: icon }), showRightIcon && jsx(IconSlot, { "$iconOnly": false, children: icon })] }));
+};
+
+const Wrapper$2 = styled$1.div `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+`;
+const Trigger = styled$1.button `
+  border: none;
+  background: transparent;
+  padding: 4px 8px;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+`;
+const Bubble = styled$1.span `
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -6px);
+  white-space: nowrap;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+
+  ${Wrapper$2}:hover &,
+  ${Wrapper$2}:focus-within &,
+  ${Wrapper$2}:active & {
+    opacity: 1;
+    transform: translate(-50%, -10px);
+  }
+`;
+
+const CopyTooltip = ({ label, children, copiedText = "Скопировано!", copyDuration = 1500, }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(label);
+            setCopied(true);
+            setTimeout(() => setCopied(false), copyDuration);
+        }
+        catch (err) {
+            console.error("Copy failed", err);
+        }
+    };
+    return (jsxs(Wrapper$2, { onClick: handleCopy, children: [children ?? jsx(Trigger, { type: "button", children: label }), jsx(Bubble, { children: copied ? copiedText : label })] }));
+};
+
+const weights = {
+    regular: 400,
+    semibold: 600,
+    bold: 700,
+};
+const variantMap = {
+    h1: {
+        mobile: {
+            fontSize: "26px",
+            lineHeight: "32px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "34px",
+            lineHeight: "42px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "44px",
+            lineHeight: "54px",
+            fontWeight: weights.semibold,
+            textTransform: "uppercase",
+        },
+    },
+    h2: {
+        mobile: {
+            fontSize: "22px",
+            lineHeight: "28px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "30px",
+            lineHeight: "37px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "32px",
+            lineHeight: "40px",
+            fontWeight: weights.semibold,
+        },
+    },
+    h3: {
+        mobile: {
+            fontSize: "20px",
+            lineHeight: "24px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "28px",
+            lineHeight: "34px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "30px",
+            lineHeight: "38px",
+            fontWeight: weights.semibold,
+        },
+    },
+    h4: {
+        mobile: {
+            fontSize: "18px",
+            lineHeight: "22px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: weights.semibold,
+        },
+    },
+    h5: {
+        mobile: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "20px",
+            lineHeight: "24px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "20px",
+            lineHeight: "24px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "body-xl-semibold": {
+        mobile: {
+            fontSize: "18px",
+            lineHeight: "22px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "22px",
+            lineHeight: "28px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "body-xl": {
+        mobile: {
+            fontSize: "18px",
+            lineHeight: "22px",
+            fontWeight: weights.regular,
+        },
+        tablet: {
+            fontSize: "22px",
+            lineHeight: "28px",
+            fontWeight: weights.regular,
+        },
+        desktop: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: weights.regular,
+        },
+    },
+    "body-l-semibold": {
+        mobile: {
+            fontSize: "16px",
+            lineHeight: "19px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "18px",
+            lineHeight: "22px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "18px",
+            lineHeight: "22px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "body-l": {
+        mobile: {
+            fontSize: "16px",
+            lineHeight: "19px",
+            fontWeight: weights.regular,
+        },
+        tablet: {
+            fontSize: "18px",
+            lineHeight: "22px",
+            fontWeight: weights.regular,
+        },
+        desktop: {
+            fontSize: "18px",
+            lineHeight: "22px",
+            fontWeight: weights.regular,
+        },
+    },
+    "body-m-bold": {
+        mobile: {
+            fontSize: "14px",
+            lineHeight: "17px",
+            fontWeight: weights.bold,
+        },
+        tablet: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: weights.bold,
+        },
+        desktop: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: weights.bold,
+        },
+    },
+    "body-m-semibold": {
+        mobile: {
+            fontSize: "14px",
+            lineHeight: "17px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "body-m": {
+        mobile: {
+            fontSize: "14px",
+            lineHeight: "17px",
+            fontWeight: weights.regular,
+        },
+        tablet: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: weights.regular,
+        },
+        desktop: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: weights.regular,
+        },
+    },
+    "body-s-semibold": {
+        mobile: {
+            fontSize: "12px",
+            lineHeight: "15px",
+            fontWeight: weights.semibold,
+        },
+        tablet: {
+            fontSize: "14px",
+            lineHeight: "17px",
+            fontWeight: weights.semibold,
+        },
+        desktop: {
+            fontSize: "14px",
+            lineHeight: "17px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "body-s": {
+        mobile: {
+            fontSize: "12px",
+            lineHeight: "15px",
+            fontWeight: weights.regular,
+        },
+        tablet: {
+            fontSize: "14px",
+            lineHeight: "17px",
+            fontWeight: weights.regular,
+        },
+        desktop: {
+            fontSize: "14px",
+            lineHeight: "17px",
+            fontWeight: weights.regular,
+        },
+    },
+    button: {
+        desktop: {
+            fontSize: "15px",
+            lineHeight: "18px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "form-input": {
+        desktop: {
+            fontSize: "15px",
+            lineHeight: "18px",
+            fontWeight: weights.regular,
+        },
+    },
+    "avatar-basic": {
+        desktop: {
+            fontSize: "16px",
+            lineHeight: "18px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "avatar-m": {
+        desktop: {
+            fontSize: "14px",
+            lineHeight: "16px",
+            fontWeight: weights.semibold,
+        },
+    },
+    "avatar-s": {
+        desktop: {
+            fontSize: "12px",
+            lineHeight: "14px",
+            fontWeight: weights.semibold,
+        },
+    },
+};
+const getVariantStyles = (variant) => {
+    const { mobile, tablet, desktop } = variantMap[variant];
+    return css `
+    ${({ theme }) => css `
+      ${css `
+        font-size: ${desktop.fontSize};
+        font-weight: ${desktop.fontWeight};
+        line-height: ${desktop.lineHeight};
+      `}
+
+      ${tablet &&
+        css `
+        ${theme.media.maxWidth.tablet} {
+          font-size: ${tablet.fontSize};
+          font-weight: ${tablet.fontWeight};
+          line-height: ${tablet.lineHeight};
+        }
+      `}
+
+    ${mobile &&
+        css `
+        ${theme.media.maxWidth.mobile} {
+          font-size: ${mobile.fontSize};
+          font-weight: ${mobile.fontWeight};
+          line-height: ${mobile.lineHeight};
+        }
+      `}
+    `}
+  `;
+};
+const StyledTypography = styled$1.span `
+  margin: 0;
+  color: ${({ $color }) => $color ?? "inherit"};
+  ${({ $variant }) => getVariantStyles($variant)};
+  text-align: ${({ $align }) => $align ?? "inherit"};
+  ${({ $inline }) => $inline
+    ? css `
+          display: inline;
+        `
+    : css `
+          display: block;
+        `};
+  ${({ $uppercase }) => $uppercase &&
+    css `
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    `}
+  ${({ $truncate }) => $truncate &&
+    css `
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `}
+`;
+
+const Typography = ({ as = "span", forwardedAs, variant = "body-m-semibold", color, align, uppercase = false, truncate = false, inline = false, children, ...rest }) => (jsx(StyledTypography, { as: as, forwardedAs: forwardedAs, "$variant": variant, "$color": color, "$align": align, "$uppercase": uppercase, "$truncate": truncate, "$inline": inline, ...rest, children: children }));
+
+const Icon = ({ size = 24, children, ...rest }) => {
+    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: children }));
+};
+
+const CheckIcon$1 = (props) => (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "#5E6F8D", "stroke-width": "2" }), jsx("path", { d: "M7 12L10.3333 15L17 9", stroke: "#5E6F8D", "stroke-width": "2" })] }));
+
+const CloseIcon = (props) => (jsxs(Icon, { ...props, children: [jsxs("g", { "clip-path": "url(#clip0_487_8651)", children: [jsx("path", { d: "M4.99543 4.85076C5.38596 4.46024 6.01912 4.46024 6.40965 4.85076L19.265 17.7061C19.6555 18.0966 19.6555 18.7298 19.265 19.1203L19.0937 19.2916C18.7032 19.6821 18.07 19.6821 17.6795 19.2916L4.82414 6.43627C4.43362 6.04574 4.43362 5.41258 4.82414 5.02206L4.99543 4.85076Z", fill: "#9296A5" }), jsx("path", { d: "M4.85129 19.1203C4.46077 18.7298 4.46077 18.0966 4.85129 17.7061L17.7066 4.85075C18.0971 4.46023 18.7303 4.46023 19.1208 4.85075L19.2921 5.02205C19.6827 5.41257 19.6827 6.04574 19.2921 6.43626L6.4368 19.2916C6.04627 19.6821 5.41311 19.6821 5.02258 19.2916L4.85129 19.1203Z", fill: "#9296A5" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_487_8651", children: jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+
+const HamburgerIcon = (props) => (jsxs(Icon, { ...props, children: [jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: "#9296A5" }), jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: "#9296A5" }), jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: "#9296A5" })] }));
+
+const UserIcon = (props) => (jsxs(Icon, { ...props, children: [jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13ZM12 15C15.3137 15 18 12.3137 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 12.3137 8.68629 15 12 15Z", fill: "#202D52" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 15C8.13401 15 5 18.134 5 22H3C3 17.0294 7.02944 13 12 13C16.9706 13 21 17.0294 21 22H19C19 18.134 15.866 15 12 15Z", fill: "#202D52" })] }));
+
+const ClockIcon = (props) => (jsx(Icon, { ...props, viewBox: "0 0 18 18", children: jsx("path", { d: "M9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9C16.4954 13.1402 13.1402 16.4954 9 16.5ZM9 3C5.68629 3 3 5.68629 3 9C3 12.3137 5.68629 15 9 15C12.3137 15 15 12.3137 15 9C14.9963 5.68783 12.3122 3.00372 9 3ZM12.75 9.75H8.25V5.25H9.75V8.25H12.75V9.75Z", fill: "#9296A5" }) }));
+
+const CopyIcon = (props) => (jsx(Icon, { ...props, viewBox: "0 0 18 18", children: jsx("path", { d: "M10.4999 16.5H2.9999C2.59796 16.514 2.20826 16.3604 1.92387 16.076C1.63948 15.7916 1.48593 15.4019 1.4999 15V7.50001C1.48593 7.09807 1.63948 6.70837 1.92387 6.42399C2.20826 6.1396 2.59796 5.98605 2.9999 6.00002H5.9999V3.00002C5.98593 2.59807 6.13948 2.20837 6.42387 1.92399C6.70826 1.6396 7.09796 1.48605 7.49991 1.50002H14.9999C15.4018 1.48605 15.7915 1.6396 16.0759 1.92399C16.3603 2.20837 16.5139 2.59807 16.4999 3.00002V10.5C16.5136 10.9019 16.36 11.2915 16.0757 11.5758C15.7914 11.8601 15.4018 12.0137 14.9999 12H11.9999V15C12.0136 15.4019 11.86 15.7915 11.5757 16.0758C11.2914 16.3601 10.9018 16.5137 10.4999 16.5ZM2.9999 7.50001V15H10.4999V12H7.49991C7.09802 12.0137 6.70845 11.8601 6.42411 11.5758C6.13977 11.2915 5.98616 10.9019 5.9999 10.5V7.50001H2.9999ZM7.49991 3.00002V10.5H14.9999V3.00002H7.49991Z", fill: "#5E6F8D" }) }));
+
+const InfoIcon = (props) => (jsxs(Icon, { ...props, viewBox: "0 0 18 18", children: [jsx("g", { "clip-path": "url(#clip0_309_1899)", children: jsx("path", { d: "M9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9C16.4955 13.1403 13.1403 16.4955 9 16.5ZM3 9.129C3.03549 12.4299 5.73083 15.0822 9.0319 15.0645C12.333 15.0467 14.9997 12.3656 14.9997 9.0645C14.9997 5.76338 12.333 3.08233 9.0319 3.0645C5.73083 3.04684 3.03549 5.69907 3 9V9.129ZM10.5 12.75H8.25V9.75H7.5V8.25H9.75V11.25H10.5V12.75ZM9.75 6.75H8.25V5.25H9.75V6.75Z", fill: props.color || "#9296A5" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_309_1899", children: jsx("rect", { width: "18", height: "18", fill: "white" }) }) })] }));
+
+const SuccessfullSmallIcon = (props) => (jsx(Icon, { ...props, viewBox: "0 0 18 18", children: jsx("path", { d: "M9 16.5C4.85975 16.4954 1.50454 13.1402 1.5 9.00001V8.85001C1.58245 4.72841 4.97594 1.44598 9.09803 1.50067C13.2201 1.55537 16.5253 4.92668 16.4984 9.04899C16.4714 13.1714 13.1224 16.4992 9 16.5ZM5.5575 8.69251L4.5 9.75001L7.5 12.75L13.5 6.75001L12.4425 5.68501L7.5 10.6275L5.5575 8.69251Z", fill: "#1CD850" }) }));
+
+const WarningIcon = (props) => (jsxs(Icon, { ...props, viewBox: "0 0 18 18", children: [jsx("path", { d: "M15.9495 15.7485H2.04978C1.78184 15.7485 1.53426 15.6056 1.40028 15.3735C1.26631 15.1415 1.26631 14.8556 1.40028 14.6235L8.3498 2.62349C8.4839 2.39183 8.73125 2.24918 8.99892 2.24918C9.2666 2.24918 9.51395 2.39183 9.64805 2.62349L16.5975 14.6235C16.7314 14.8554 16.7315 15.1412 16.5977 15.3731C16.464 15.6052 16.2166 15.7482 15.9488 15.7485H15.9495ZM9.00005 4.49849L3.35178 14.2485H14.6498L9.00005 4.49849ZM9.7463 11.2493H8.2463V7.49849H9.7463V11.2493Z", fill: "#FFA63E" }), jsx("path", { d: "M8.25 12H9.75V13.5H8.25V12Z", fill: "#FFA63E" })] }));
+
+const WithdrawIcon = (props) => (jsxs(Icon, { ...props, viewBox: "0 0 18 18", children: [jsx("circle", { cx: "9", cy: "9", r: "9", fill: "#EFF2FB" }), jsx("path", { d: "M13 9L9 12L5 9", stroke: "#5E6F8D", "stroke-linecap": "round", "stroke-linejoin": "round" }), jsx("path", { d: "M13 6L9 9L5 6", stroke: "#5E6F8D", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+
+const InformerStyled = styled$1.div `
+  display: grid;
+  align-items: center;
+  grid-template-columns: ${({ $icon }) => ($icon ? "auto 1fr" : "1fr")};
+  gap: 12px;
+  width: 458px;
+  height: auto;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: ${({ $type, theme }) => {
+    switch ($type) {
+        case "success":
+            return theme.colors.accent.green2Light;
+        case "error":
+            return theme.colors.accent.red;
+        case "info":
+            return theme.colors.primary.lightBlue2;
+        case "warning":
+            return theme.colors.accent.orange;
+    }
+}};
+`;
+
+const Informer = ({ label, description, type, icon, }) => {
+    return (jsxs(InformerStyled, { "$icon": icon, "$type": type, children: [icon && jsx(InfoIcon, { size: 18, color: "#fff" }), label && (jsx(Typography, { color: "#fff", variant: "body-l-semibold", children: label })), icon && jsx("div", {}), description && (jsx(Typography, { color: "#fff", variant: "body-m-semibold", children: description }))] }));
+};
+
+const Wrapper$1 = styled$1.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`;
+const Label$2 = styled$1(Typography).attrs({
+    variant: "form-input",
+    forwardedAs: "label",
+}) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+const FieldContainer$1 = styled$1.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  height: 48px;
+  padding-left: 12px;
+  border-radius: 5px;
+  outline: 1px solid ${({ theme }) => theme.colors.gray.lightGray2};
+  outline-offset: -1px;
+  background: ${({ theme }) => theme.colors.primary.white};
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 140ms ease;
+
+  ${({ $disabled }) => $disabled &&
+    css `
+      opacity: 0.6;
+      cursor: not-allowed;
+    `}
+
+  ${({ $hasError, theme }) => $hasError &&
+    css `
+      outline-color: ${theme.colors.accent.red};
+    `}
+
+  &:hover {
+    outline-color: ${({ theme, $hasError }) => $hasError ? theme.colors.accent.red : theme.colors.primary.lightBlue2};
+  }
+
+  &[data-state="active"] {
+    outline-color: ${({ theme, $hasError }) => $hasError ? theme.colors.accent.red : theme.colors.primary.primaryBlue};
+  }
+`;
+const LeadingIcon$1 = styled$1.span `
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+`;
+const ActionSlot = styled$1.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  & > button {
+    border-radius: 0px;
+  }
+`;
+const Input = styled$1.input `
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: "Proxima Nova", sans-serif;
+  padding-right: 12px;
+  height: 100%;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.gray.darkGray};
+  }
+`;
+const ErrorText$1 = styled$1.span `
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme }) => theme.colors.accent.red};
+`;
+
+const TextField = forwardRef(({ value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, action, name, type = "text", onChange, onFocus, onBlur, className, }, ref) => {
+    const [focused, setFocused] = useState(false);
+    const hasError = Boolean(error);
+    const handleFocus = (evt) => {
+        setFocused(true);
+        onFocus?.(evt);
+    };
+    const handleBlur = (evt) => {
+        setFocused(false);
+        onBlur?.(evt);
+    };
+    return (jsxs(Wrapper$1, { className: className, children: [label && jsx(Label$2, { children: label }), jsxs(FieldContainer$1, { "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : focused ? "active" : undefined, children: [icon && jsx(LeadingIcon$1, { children: icon }), jsx(Input, { ref: ref, type: type, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }), action && jsx(ActionSlot, { children: action })] }), error && jsx(ErrorText$1, { children: error })] }));
+});
+TextField.displayName = "TextField";
+
+const ContainerStyled = styled$1.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 24px 28px;
+  background-color: ${({ theme }) => theme.colors.primary.white};
+  border-radius: 10px;
+  ${({ theme }) => theme.media.maxWidth.tablet} {
+    padding: 24px 20px;
+  }
+  ${({ theme }) => theme.media.maxWidth.mobile} {
+    padding: 16px;
+  }
+`;
+
+const Container = ContainerStyled;
+
+const CounterStyled = styled$1(Typography).attrs({
+    forwardedAs: "div",
+}) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  color: #fff;
+  background-color: ${({ theme }) => theme.colors.primary.primaryBlue};
+`;
+
+const Counter = ({ count = 0 }) => {
+    return jsx(CounterStyled, { variant: "body-s-semibold", children: count });
+};
+
+const HamburgerButton = ({ open, onToggle, }) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internalOpen;
+    const handleClick = useCallback(() => {
+        const next = !isOpen;
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onToggle?.(next);
+    }, [isControlled, isOpen, onToggle]);
+    return (jsx(Button, { iconPosition: "only", variant: "tertiary", icon: isOpen ? jsx(CloseIcon, {}) : jsx(HamburgerIcon, {}), size: "small", onClick: handleClick }));
+};
+
+const scaleDot = keyframes `
+  0% {
+    transform: scale(0.5);
+  }
+  25% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(0.5);
+  }
+`;
+const LoaderDots = styled$1.div `
+  display: flex;
+`;
+const LoaderDot = styled$1.div `
+  margin: 2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.primary.primaryBlue};
+  transform: scale(0.5);
+  animation: ${scaleDot} 1.2s ease-out infinite;
+
+  &:nth-of-type(2) {
+    animation-delay: 0.2s;
+  }
+  &:nth-of-type(3) {
+    animation-delay: 0.3s;
+  }
+  &:nth-of-type(4) {
+    animation-delay: 0.4s;
+  }
+  &:nth-of-type(5) {
+    animation-delay: 0.5s;
+  }
+`;
+
+const Loader = () => (jsxs(LoaderDots, { children: [jsx(LoaderDot, {}), jsx(LoaderDot, {}), jsx(LoaderDot, {})] }));
+
+const RadioLabel = styled$1.label `
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+`;
+const HiddenInput$2 = styled$1.input `
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+const VisualRadio = styled$1.span `
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ theme }) => theme.colors.gray.darkGray2};
+  background-color: transparent;
+  transition: border-color 160ms ease, background-color 160ms ease;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ $checked, theme }) => $checked &&
+    css `
+      border-color: ${theme.colors.primary.primaryBlue};
+      &::after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${theme.colors.primary.primaryBlue};
+        transition: background-color 160ms ease;
+      }
+    `}
+
+  ${({ $checked, theme }) => !$checked &&
+    css `
+      &:hover {
+        border-color: ${theme.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $checked, $disabled, theme }) => !$disabled &&
+    $checked &&
+    css `
+      &:hover {
+        border-color: ${theme.colors.primary.hoverBlue};
+        &::after {
+          background-color: ${theme.colors.primary.hoverBlue};
+        }
+      }
+    `}
+
+  ${({ $disabled, theme }) => $disabled &&
+    css `
+      border-color: ${theme.colors.icon.iconSecondary};
+      background-color: ${theme.colors.gray.lightGray2};
+      &::after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${theme.colors.icon.iconSecondary};
+      }
+    `}
+`;
+const LabelText = styled$1(Typography) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+
+const RadioButton = ({ checked, defaultChecked = false, disabled = false, name, value, label, onChange, className, }) => {
+    const generatedId = useId();
+    const [innerChecked, setInnerChecked] = useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : innerChecked;
+    const handleChange = useCallback((e) => {
+        if (disabled)
+            return;
+        if (!isControlled) {
+            setInnerChecked(e.target.checked);
+        }
+        onChange?.(e.target.checked);
+    }, [disabled, isControlled, onChange]);
+    return (jsxs(RadioLabel, { className: className, htmlFor: generatedId, disabled: disabled, children: [jsx(HiddenInput$2, { id: generatedId, type: "radio", checked: isChecked, onChange: handleChange, disabled: disabled, name: name, value: value }), jsx(VisualRadio, { "$checked": isChecked, "$disabled": disabled }), label && jsx(LabelText, { variant: "button", children: label })] }));
+};
+
+const Wrapper = styled$1.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+`;
+const Label$1 = styled$1(Typography).attrs({
+    variant: "form-input",
+    forwardedAs: "label",
+}) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+const FieldContainer = styled$1.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  height: 48px;
+  padding: 0 12px;
+  border-radius: 5px;
+  outline: 1px solid ${({ theme }) => theme.colors.gray.lightGray2};
+  outline-offset: -1px;
+  background: ${({ theme }) => theme.colors.primary.white};
+  width: 100%;
+  box-sizing: border-box;
+  transition: outline-color 140ms ease;
+  cursor: pointer;
+
+  ${({ $disabled }) => $disabled &&
+    css `
+      opacity: 0.6;
+      cursor: not-allowed;
+    `}
+
+  ${({ $hasError, theme }) => $hasError &&
+    css `
+      outline-color: ${theme.colors.accent.red};
+    `}
+
+  &:hover {
+    outline-color: ${({ theme, $hasError }) => $hasError ? theme.colors.accent.red : theme.colors.primary.lightBlue2};
+  }
+
+  &[data-state="active"] {
+    outline-color: ${({ theme, $hasError }) => $hasError ? theme.colors.accent.red : theme.colors.primary.primaryBlue};
+  }
+`;
+const LeadingIcon = styled$1.span `
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  color: ${({ theme }) => theme.colors.primary.primaryBlue};
+`;
+const Value = styled$1.span `
+  flex: 1;
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme, $placeholder }) => $placeholder ? theme.colors.gray.darkGray : theme.colors.primary.darkBlue};
+  user-select: none;
+`;
+const HiddenInput$1 = styled$1.input `
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+const ErrorText = styled$1.span `
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 13px;
+  line-height: 16px;
+  color: ${({ theme }) => theme.colors.accent.red};
+`;
+const List = styled$1.div `
+  position: fixed;
+  top: ${({ $top }) => `${$top}px`};
+  left: ${({ $left }) => `${$left}px`};
+  width: ${({ $width }) => `${$width}px`};
+  z-index: 999;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.colors.gray.lightGray2};
+  background: ${({ theme }) => theme.colors.primary.white};
+  box-shadow: 0px 8px 24px rgba(15, 23, 42, 0.12);
+  display: flex;
+  flex-direction: column;
+  max-height: 260px;
+  overflow-y: auto;
+`;
+const Option = styled$1.button `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 13px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+  cursor: pointer;
+  transition: background 140ms ease;
+
+  &[data-hovered="true"],
+  &:hover {
+    background: ${({ theme }) => theme.colors.gray.lightBlueGray};
+  }
+
+  &[data-active="true"] {
+    background: ${({ theme }) => theme.colors.gray.lightGray};
+  }
+`;
+const OptionIcon = styled$1.span `
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+`;
+
+const DROPDOWN_OFFSET = 8;
+const SelectField = forwardRef(({ options, value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
+    const wrapperRef = useRef(null);
+    const fieldRef = useRef(null);
+    const listRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [dropdownRect, setDropdownRect] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    });
+    const selectedValue = value ?? internalValue;
+    const selectedOption = useMemo(() => options.find((opt) => opt.value === selectedValue), [options, selectedValue]);
+    const hasError = Boolean(error);
+    const displayPlaceholder = !selectedOption;
+    const displayText = selectedOption?.label ?? placeholder;
+    const updateDropdownPosition = useCallback(() => {
+        if (!fieldRef.current)
+            return;
+        const rect = fieldRef.current.getBoundingClientRect();
+        setDropdownRect({
+            top: rect.bottom + DROPDOWN_OFFSET,
+            left: rect.left,
+            width: rect.width,
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (!isOpen)
+            return;
+        updateDropdownPosition();
+        const handleRecalc = () => updateDropdownPosition();
+        window.addEventListener("resize", handleRecalc);
+        window.addEventListener("scroll", handleRecalc, true);
+        return () => {
+            window.removeEventListener("resize", handleRecalc);
+            window.removeEventListener("scroll", handleRecalc, true);
+        };
+    }, [isOpen, updateDropdownPosition]);
+    const closeDropdown = useCallback(() => {
+        setIsOpen(false);
+        setHoveredIndex(null);
+    }, []);
+    const openDropdown = useCallback(() => {
+        if (disabled)
+            return;
+        setIsOpen(true);
+        setHoveredIndex((prev) => {
+            if (prev !== null)
+                return prev;
+            const currentIndex = options.findIndex((opt) => opt.value === selectedValue);
+            return currentIndex >= 0 ? currentIndex : 0;
+        });
+    }, [disabled, options, selectedValue]);
+    const toggleDropdown = useCallback(() => {
+        if (isOpen) {
+            closeDropdown();
+        }
+        else {
+            openDropdown();
+        }
+    }, [isOpen, closeDropdown, openDropdown]);
+    const handleSelect = (option) => {
+        if (disabled)
+            return;
+        setInternalValue(option.value);
+        onChange?.(option.value);
+        closeDropdown();
+    };
+    const handleKeyDown = (evt) => {
+        if (disabled)
+            return;
+        switch (evt.key) {
+            case "ArrowDown":
+                evt.preventDefault();
+                openDropdown();
+                setHoveredIndex((prev) => prev === null ? 0 : Math.min(prev + 1, options.length - 1));
+                break;
+            case "ArrowUp":
+                evt.preventDefault();
+                openDropdown();
+                setHoveredIndex((prev) => prev === null ? options.length - 1 : Math.max(prev - 1, 0));
+                break;
+            case "Enter":
+            case " ":
+                evt.preventDefault();
+                if (!isOpen) {
+                    openDropdown();
+                }
+                else if (hoveredIndex !== null && options[hoveredIndex]) {
+                    handleSelect(options[hoveredIndex]);
+                }
+                break;
+            case "Escape":
+            case "Tab":
+                closeDropdown();
+                break;
+        }
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (evt) => {
+            const target = evt.target;
+            const isInsideField = wrapperRef.current && wrapperRef.current.contains(target);
+            const isInsideList = listRef.current && listRef.current.contains(target);
+            if (!isInsideField && !isInsideList) {
+                closeDropdown();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, closeDropdown]);
+    const handleFocus = (evt) => {
+        setFocused(true);
+        onFocus?.(evt);
+    };
+    const handleBlur = (evt) => {
+        setFocused(false);
+        onBlur?.(evt);
+    };
+    return (jsxs(Wrapper, { className: className, ref: wrapperRef, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, children: [label && jsx(Label$1, { children: label }), jsxs(FieldContainer, { ref: fieldRef, role: "button", tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-invalid": hasError, "aria-disabled": disabled, "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : isOpen || focused ? "active" : undefined, onClick: toggleDropdown, children: [icon && jsx(LeadingIcon, { children: icon }), jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsx(ErrorText, { children: error }), isOpen && (jsx(List, { ref: listRef, role: "listbox", "$top": dropdownRect.top, "$left": dropdownRect.left, "$width": dropdownRect.width, children: options.map((option, index) => {
+                    const isActiveOption = option.value === selectedValue;
+                    const isHovered = index === hoveredIndex;
+                    return (jsxs(Option, { role: "option", "aria-selected": isActiveOption, "data-active": isActiveOption || undefined, "data-hovered": isHovered || undefined, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onMouseDown: (evt) => evt.preventDefault(), onClick: () => handleSelect(option), children: [option.icon && jsx(OptionIcon, { children: option.icon }), jsx(Typography, { variant: "form-input", children: option.label })] }, option.value));
+                }) }))] }));
+});
+SelectField.displayName = "SelectField";
+
+const hiddenShift = {
+    top: "translate3d(0, 6px, 0)",
+    bottom: "translate3d(0, -6px, 0)",
+    left: "translate3d(6px, 0, 0)",
+    right: "translate3d(-6px, 0, 0)",
+};
+const TooltipWrapper = styled.div `
+  display: inline-flex;
+  position: relative;
+`;
+const TooltipTrigger = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px rgba(84, 132, 255, 0.65);
+    border-radius: 6px;
+  }
+
+  &[data-open="true"] {
+    cursor: default;
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+  }
+`;
+const TooltipBubble = styled.div `
+  position: fixed;
+  top: -9999px;
+  left: -9999px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.35;
+  max-width: min(320px, calc(100vw - 16px));
+  box-shadow: 0px 8px 24px 0px #0000001f;
+  filter: drop-shadow(0px 8px 24px 0px #0000001f);
+  background: ${({ theme }) => theme.colors.primary.white};
+  z-index: 9999;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  visibility: ${({ $visible }) => ($visible ? "visible" : "hidden")};
+  transform: ${({ $visible, $placement }) => $visible ? "translate3d(0, 0, 0)" : hiddenShift[$placement]};
+  transition: opacity 0.18s ease, transform 0.18s ease;
+
+  pointer-events: ${({ $visible, $interactive }) => $visible && $interactive ? "auto" : "none"};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &[data-placement="top"] {
+    --tooltip-arrow-x: 0px;
+  }
+
+  &[data-placement="bottom"] {
+    --tooltip-arrow-x: 0px;
+  }
+
+  &[data-placement="left"] {
+    --tooltip-arrow-y: 0px;
+  }
+
+  &[data-placement="right"] {
+    --tooltip-arrow-y: 0px;
+  }
+`;
+const TooltipArrow = styled.span `
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  border: inherit;
+  border-radius: 2px;
+  transform: rotate(45deg);
+  pointer-events: none;
+
+  ${({ $placement }) => {
+    switch ($placement) {
+        case "top":
+            return css `
+          bottom: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;
+        case "bottom":
+            return css `
+          top: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;
+        case "left":
+            return css `
+          right: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `;
+        case "right":
+        default:
+            return css `
+          left: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `;
+    }
+}}
+`;
+const TooltipContentText = styled(Typography).attrs({
+    variant: "body-s",
+}) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+
+const VIEWPORT_PADDING = 8;
+const GUTTER = 12;
+const ARROW_SAFE_ZONE = 12;
+const fallbackOrder = {
+    top: ["top", "bottom", "right", "left"],
+    bottom: ["bottom", "top", "right", "left"],
+    left: ["left", "right", "top", "bottom"],
+    right: ["right", "left", "top", "bottom"],
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const Tooltip = ({ content, children, position = "top", open, defaultOpen = false, onOpenChange, showDelay = 150, hideDelay = 150, interactive = false, disabled = false, hideOnClick = false, maxWidth, }) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = typeof open === "boolean";
+    const isOpen = isControlled ? !!open : internalOpen;
+    const wrapperRef = useRef(null);
+    const triggerRef = useRef(null);
+    const bubbleRef = useRef(null);
+    const showTimer = useRef(null);
+    const hideTimer = useRef(null);
+    const rafRef = useRef(null);
+    const tooltipId = useId();
+    const INITIAL_LAYOUT = useMemo(() => ({
+        top: -9999,
+        left: -9999,
+        arrowX: 0,
+        arrowY: 0,
+        placement: position,
+    }), [position]);
+    const [layout, setLayout] = useState(INITIAL_LAYOUT);
+    const clearTimers = () => {
+        if (showTimer.current) {
+            clearTimeout(showTimer.current);
+            showTimer.current = null;
+        }
+        if (hideTimer.current) {
+            clearTimeout(hideTimer.current);
+            hideTimer.current = null;
+        }
+    };
+    const commitState = useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        if (!next) {
+            setLayout(INITIAL_LAYOUT);
+        }
+        onOpenChange?.(next);
+    }, [INITIAL_LAYOUT, isControlled, onOpenChange]);
+    const scheduleShow = useCallback(() => {
+        if (disabled)
+            return;
+        clearTimers();
+        showTimer.current = setTimeout(() => commitState(true), showDelay);
+    }, [disabled, commitState, showDelay]);
+    const scheduleHide = useCallback(() => {
+        if (disabled)
+            return;
+        clearTimers();
+        hideTimer.current = setTimeout(() => commitState(false), hideDelay);
+    }, [disabled, commitState, hideDelay]);
+    const handlePointerEnter = () => {
+        if (!disabled)
+            scheduleShow();
+    };
+    const handlePointerLeave = () => {
+        if (!disabled)
+            scheduleHide();
+    };
+    const handleFocus = () => {
+        if (!disabled)
+            scheduleShow();
+    };
+    const handleBlur = () => {
+        if (!disabled)
+            scheduleHide();
+    };
+    const handleClick = () => {
+        if (hideOnClick) {
+            commitState(false);
+        }
+    };
+    const handleInteractiveEnter = () => {
+        if (!interactive)
+            return;
+        clearTimers();
+    };
+    const handleInteractiveLeave = () => {
+        if (!interactive)
+            return;
+        scheduleHide();
+    };
+    const recomputePosition = useCallback(() => {
+        if (typeof window === "undefined" ||
+            !triggerRef.current ||
+            !bubbleRef.current) {
+            return;
+        }
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const bubbleRect = bubbleRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const anchorX = triggerRect.left + triggerRect.width / 2;
+        const anchorY = triggerRect.top + triggerRect.height / 2;
+        const fits = (placement) => {
+            switch (placement) {
+                case "top":
+                    return (triggerRect.top >= bubbleRect.height + GUTTER + VIEWPORT_PADDING);
+                case "bottom":
+                    return (viewportHeight - triggerRect.bottom >=
+                        bubbleRect.height + GUTTER + VIEWPORT_PADDING);
+                case "left":
+                    return (triggerRect.left >= bubbleRect.width + GUTTER + VIEWPORT_PADDING);
+                case "right":
+                    return (viewportWidth - triggerRect.right >=
+                        bubbleRect.width + GUTTER + VIEWPORT_PADDING);
+                default:
+                    return true;
+            }
+        };
+        const nextPlacement = fallbackOrder[position].find((option) => fits(option)) ?? position;
+        let top = 0;
+        let left = 0;
+        switch (nextPlacement) {
+            case "top":
+                top = triggerRect.top - bubbleRect.height - GUTTER;
+                left = anchorX - bubbleRect.width / 2;
+                break;
+            case "bottom":
+                top = triggerRect.bottom + GUTTER;
+                left = anchorX - bubbleRect.width / 2;
+                break;
+            case "left":
+                top = anchorY - bubbleRect.height / 2;
+                left = triggerRect.left - bubbleRect.width - GUTTER;
+                break;
+            case "right":
+            default:
+                top = anchorY - bubbleRect.height / 2;
+                left = triggerRect.right + GUTTER;
+                break;
+        }
+        const horizontalSpace = Math.max(viewportWidth - VIEWPORT_PADDING * 2, 0);
+        const verticalSpace = Math.max(viewportHeight - VIEWPORT_PADDING * 2, 0);
+        const minLeft = VIEWPORT_PADDING;
+        const maxLeft = viewportWidth - bubbleRect.width - VIEWPORT_PADDING;
+        const minTop = VIEWPORT_PADDING;
+        const maxTop = viewportHeight - bubbleRect.height - VIEWPORT_PADDING;
+        const clampedLeft = bubbleRect.width >= horizontalSpace
+            ? VIEWPORT_PADDING
+            : clamp(left, minLeft, maxLeft);
+        const clampedTop = bubbleRect.height >= verticalSpace
+            ? VIEWPORT_PADDING
+            : clamp(top, minTop, maxTop);
+        let arrowX = 0;
+        let arrowY = 0;
+        if (nextPlacement === "top" || nextPlacement === "bottom") {
+            const arrowLimit = Math.max(bubbleRect.width / 2 - ARROW_SAFE_ZONE, 0);
+            arrowX = clamp(anchorX - (clampedLeft + bubbleRect.width / 2), -arrowLimit, arrowLimit);
+            arrowY = 0;
+        }
+        else {
+            const arrowLimit = Math.max(bubbleRect.height / 2 - ARROW_SAFE_ZONE, 0);
+            arrowY = clamp(anchorY - (clampedTop + bubbleRect.height / 2), -arrowLimit, arrowLimit);
+            arrowX = 0;
+        }
+        setLayout((prev) => {
+            if (prev.top === clampedTop &&
+                prev.left === clampedLeft &&
+                prev.arrowX === arrowX &&
+                prev.arrowY === arrowY &&
+                prev.placement === nextPlacement) {
+                return prev;
+            }
+            return {
+                top: clampedTop,
+                left: clampedLeft,
+                arrowX,
+                arrowY,
+                placement: nextPlacement,
+            };
+        });
+    }, [position]);
+    useLayoutEffect(() => {
+        if (!isOpen) {
+            return; // никакого setLayout здесь
+        }
+        const bubbleEl = bubbleRef.current;
+        const triggerEl = triggerRef.current;
+        if (!bubbleEl || !triggerEl)
+            return;
+        const schedule = () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+            }
+            rafRef.current = window.requestAnimationFrame(() => {
+                rafRef.current = null;
+                recomputePosition();
+            });
+        };
+        schedule();
+        const canObserve = typeof window !== "undefined" && "ResizeObserver" in window;
+        const resizeObserver = canObserve ? new ResizeObserver(schedule) : null;
+        resizeObserver?.observe(bubbleEl);
+        resizeObserver?.observe(triggerEl);
+        window.addEventListener("resize", schedule);
+        window.addEventListener("scroll", schedule, true);
+        return () => {
+            window.removeEventListener("resize", schedule);
+            window.removeEventListener("scroll", schedule, true);
+            resizeObserver?.disconnect();
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [isOpen, recomputePosition]);
+    useEffect(() => clearTimers, []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                commitState(false);
+            }
+        };
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (wrapperRef.current?.contains(target) ||
+                bubbleRef.current?.contains(target)) {
+                return;
+            }
+            commitState(false);
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            document.removeEventListener("pointerdown", handlePointerDown);
+        };
+    }, [isOpen, commitState]);
+    const bubbleStyle = {
+        top: layout.top,
+        left: layout.left,
+        ["--tooltip-arrow-x"]: `${layout.arrowX}px`,
+        ["--tooltip-arrow-y"]: `${layout.arrowY}px`,
+    };
+    if (maxWidth !== undefined) {
+        bubbleStyle.maxWidth =
+            typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+    }
+    return (jsxs(TooltipWrapper, { ref: wrapperRef, "data-disabled": disabled, children: [jsx(TooltipTrigger, { ref: triggerRef, tabIndex: disabled ? -1 : 0, "aria-describedby": isOpen ? tooltipId : undefined, onMouseEnter: handlePointerEnter, onMouseLeave: handlePointerLeave, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, "data-open": isOpen, children: children }), jsxs(TooltipBubble, { ref: bubbleRef, id: tooltipId, role: "tooltip", "aria-hidden": !isOpen, "$visible": isOpen, "$interactive": interactive, "$placement": layout.placement, style: bubbleStyle, "data-placement": layout.placement, onMouseEnter: handleInteractiveEnter, onMouseLeave: handleInteractiveLeave, children: [["string", "number"].includes(typeof content) ? (jsx(TooltipContentText, { variant: "body-m", children: content })) : (content), jsx(TooltipArrow, { "$placement": layout.placement })] })] }));
+};
+
+const maskEmail = (email, keep = 4, stars = 7) => {
+    const trimmed = email.trim();
+    if (!trimmed)
+        return trimmed;
+    const lastDotIndex = trimmed.lastIndexOf(".");
+    if (lastDotIndex <= 0 || lastDotIndex === trimmed.length - 1) {
+        return trimmed;
+    }
+    const tld = trimmed.slice(lastDotIndex + 1);
+    const core = trimmed.slice(0, lastDotIndex).replace(/[@.]/g, "");
+    const visible = core.slice(0, keep);
+    const mask = "*".repeat(stars);
+    return `${visible}${mask}${tld}`;
+};
+const formatCardNumber = (cardNum) => {
+    const digits = cardNum.toString().padStart(16, "0");
+    return digits.replace(/(\d{4})(?=\d)/g, "$1 ");
+};
+const copyToClipboard = async (text) => {
+    try {
+        await navigator.clipboard.writeText(text);
+        console.log("Скопировано в буфер обмена");
+    }
+    catch (err) {
+        console.error("Ошибка копирования:", err);
+    }
+};
+
+const UserAccountStyled = styled$1.div `
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`;
+const UserAccountText = styled$1(Typography) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+
+const UserAccount = ({ email }) => (jsxs(UserAccountStyled, { children: [jsx(UserIcon, {}), jsx(UserAccountText, { variant: "body-m-semibold", children: maskEmail(email) })] }));
+
+const sizeTokens = {
+    m: { minWidth: 55, height: 46, fontSize: 16, lineHeight: 20, paddingX: 14 },
+    l: { minWidth: 58, height: 48, fontSize: 18, lineHeight: 22, paddingX: 14 },
+    xl: { minWidth: 68, height: 56, fontSize: 24, lineHeight: 30, paddingX: 14 },
+};
+const TabButton = styled.button `
+  ${({ $size }) => css `
+    min-width: ${sizeTokens[$size].minWidth}px;
+    height: ${sizeTokens[$size].height}px;
+    padding: 0 ${sizeTokens[$size].paddingX}px;
+    font-size: ${sizeTokens[$size].fontSize}px;
+    line-height: ${sizeTokens[$size].lineHeight}px;
+  `}
+  position: relative;
+  background: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-weight: 700;
+  cursor: pointer;
+  text-transform: none;
+  color: ${({ theme, $active }) => $active ? theme.colors.primary.darkBlue : theme.colors.gray.darkGray};
+  transition: color 120ms ease;
+  padding-bottom: 25px;
+  &::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: ${({ $active }) => ($active ? 2 : 1)}px;
+    background: ${({ theme, $active }) => $active
+    ? theme.colors.primary.primaryBlue
+    : theme.colors.gray.lightGray2};
+    transition: height 120ms ease, background 120ms ease;
+  }
+
+  &:hover:not(:disabled) {
+    color: ${({ theme }) => theme.colors.primary.darkBlue2};
+
+    &::after {
+      height: 2px;
+      background: ${({ theme }) => theme.colors.primary.hoverBlue};
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 -2px 0 ${({ theme }) => theme.colors.primary.hoverBlue};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.colors.gray.darkGray + "80"};
+    &::after {
+      background: ${({ theme }) => theme.colors.gray.lightGray2};
+    }
+  }
+`;
+const TabRow = styled.div `
+  display: flex;
+  box-shadow: inset 0 -1px 0 ${({ theme }) => theme.colors.gray.lightGray2};
+`;
+
+const Tab = ({ id, label, active = false, disabled = false, size = "m", onSelect, className, }) => {
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        onSelect?.(id);
+    }, [disabled, id, onSelect]);
+    return (jsx(TabButton, { type: "button", role: "tab", "aria-selected": active, "aria-disabled": disabled, disabled: disabled, "$size": size, "$active": active, className: className, onClick: handleClick, children: label }));
+};
+
+const TabList = ({ size = "m", activeId, items, onChange, className, }) => {
+    const handleSelect = useCallback((id) => {
+        onChange(id);
+    }, [onChange]);
+    return (jsx(TabRow, { role: "tablist", className: className, children: items.map((tab) => (jsx(Tab, { ...tab, size: size, active: tab.id === activeId, onSelect: handleSelect }, tab.id))) }));
+};
+
+const TableStyled = styled.table `
+  width: 100%;
+  border-collapse: collapse;
+  overflow: hidden;
+`;
+const TableRow = styled.tr `
+  &:nth-child(2n) {
+    background: ${({ theme }) => theme.colors.gray.lightBlueGray};
+  }
+`;
+const TableCell = styled(Typography).attrs({
+    forwardedAs: "td",
+    variant: "body-m",
+}) `
+  display: table-cell;
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+  padding: 16px 14px;
+  &:first-child {
+    border-radius: 10px 0 0 10px;
+  }
+  &:last-child {
+    border-radius: 0 10px 10px 0;
+  }
+`;
+const TableHeader = styled(Typography).attrs({
+    forwardedAs: "th",
+    variant: "body-s",
+}) `
+  display: table-cell;
+  color: ${({ theme }) => theme.colors.gray.darkGray2};
+  padding: 16px 14px;
+`;
+const TableBody = styled.tbody ``;
+const TableHead = styled.thead ``;
+
+const Table = ({ columns, data }) => {
+    return (jsxs(TableStyled, { children: [jsx(TableHead, { children: jsx(TableRow, { children: columns.map((column) => (jsx(TableHeader, { width: column.width, align: column.align || "left", children: column.name }, column.id))) }) }), jsx(TableBody, { children: data.map((row) => (jsx(TableRow, { children: columns.map((column) => (jsx(TableCell, { width: column.width, align: column.align || "left", children: column.render ? column.render(row) : row[column.id] }, column.id))) }, row.id))) })] }));
+};
+
+const SwitcherRoot = styled$1.div `
+  display: inline-flex;
+`;
+const Track = styled$1.button `
+  position: relative;
+  width: 56px;
+  height: 26px;
+  padding: 4px;
+  border: none;
+  border-radius: 22px;
+  background: ${({ $checked, theme }) => !$checked ? theme.colors.gray.darkGray2 : theme.colors.primary.primaryBlue};
+  cursor: pointer;
+  transition: background 150ms ease;
+  outline: none;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(49, 99, 240, 0.4);
+  }
+
+  &:hover {
+    background: ${({ $checked, theme }) => $checked ? theme.colors.primary.hoverBlue : theme.colors.gray.darkGray};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: ${({ theme }) => theme.colors.gray.darkGray};
+  }
+`;
+const Thumb = styled$1.span `
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: ${({ $disabled, theme }) => $disabled ? theme.colors.primary.darkBlue2 : "#ffffff"};
+  box-shadow: ${({ $disabled }) => $disabled ? "none" : "0 3px 6px rgba(0, 0, 0, 0.25)"};
+  transform: translate(${({ $checked }) => ($checked ? "30px" : "0")}, -50%);
+  transition: transform 180ms ease, background 150ms ease, box-shadow 150ms ease;
+`;
+
+const Switcher = ({ checked, defaultChecked = false, disabled = false, onChange, id, className, }) => {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    const isControlled = checked !== undefined;
+    const [innerValue, setInnerValue] = useState(defaultChecked);
+    const value = isControlled ? checked : innerValue;
+    const toggle = useCallback(() => {
+        if (disabled)
+            return;
+        const next = !value;
+        if (!isControlled)
+            setInnerValue(next);
+        onChange?.(next);
+    }, [value, isControlled, disabled, onChange]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            toggle();
+        }
+    }, [toggle]);
+    return (jsx(SwitcherRoot, { className: className, children: jsx(Track, { id: controlId, role: "switch", "aria-checked": value, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: toggle, onKeyDown: handleKeyDown, disabled: disabled, "$checked": value, children: jsx(Thumb, { "$checked": value, "$disabled": disabled }) }) }));
+};
+
+const Label = styled.label `
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+`;
+const HiddenInput = styled.input `
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+const Box = styled.span `
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  border: 1px solid ${({ theme }) => theme.colors.gray.lightGray3};
+  background-color: ${({ theme }) => theme.colors.primary.white};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 140ms ease, border-color 140ms ease;
+
+  ${({ $checked, theme }) => $checked &&
+    css `
+      border-color: ${theme.colors.primary.primaryBlue};
+      background-color: ${theme.colors.primary.primaryBlue};
+    `}
+
+  ${({ $checked, $disabled, theme }) => !$disabled &&
+    !$checked &&
+    css `
+      &:hover {
+        border-color: ${theme.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $checked, $disabled, theme }) => !$disabled &&
+    $checked &&
+    css `
+      &:hover {
+        border-color: ${theme.colors.primary.hoverBlue};
+        background-color: ${theme.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $disabled, theme }) => $disabled &&
+    css `
+      border-color: ${theme.colors.gray.lightGray2};
+      background-color: ${theme.colors.gray.lightGray};
+    `}
+`;
+const CheckIcon = styled.svg `
+  width: 12px;
+  height: 9px;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: opacity 120ms ease;
+  stroke: ${({ theme }) => theme.colors.primary.white};
+`;
+
+const Checkbox = ({ checked, defaultChecked = false, disabled = false, name, value, onChange, className, }) => {
+    const generatedId = useId();
+    const isControlled = checked !== undefined;
+    const [innerChecked, setInnerChecked] = useState(defaultChecked);
+    const isChecked = isControlled ? checked : innerChecked;
+    const handleChange = useCallback((event) => {
+        if (disabled)
+            return;
+        if (!isControlled) {
+            setInnerChecked(event.target.checked);
+        }
+        onChange?.(event.target.checked);
+    }, [disabled, isControlled, onChange]);
+    return (jsxs(Label, { htmlFor: generatedId, disabled: disabled, className: className, children: [jsx(HiddenInput, { id: generatedId, type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, name: name, value: value }), jsx(Box, { "$checked": isChecked, "$disabled": disabled, children: isChecked && (jsx(CheckIcon, { viewBox: "0 0 15 11", children: jsx("path", { d: "M5.00034 11L0 6.18738L1.42838 4.81262L5.00185 8.24806L5.00034 8.24951L13.5716 0L15 1.37476L6.42872 9.62524L5.00135 10.999L5.00034 11Z", fill: "#fff" }) })) })] }));
+};
+
+const Logo = () => (jsxs(Icon, { width: "201", height: "32", viewBox: "0 0 201 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M178.7 1.20835C178.453 1.86745 177.971 3.0758 177.655 3.91341C177.325 4.73728 176.83 6.01429 176.554 6.72832C176.279 7.44234 175.77 8.74681 175.44 9.61188C175.11 10.4769 174.739 11.3969 174.629 11.6441C174.519 11.8913 174.422 12.1659 174.422 12.262C174.409 12.3581 174.298 12.674 174.147 12.976C173.996 13.2781 173.886 13.5939 173.872 13.6901C173.872 13.7862 173.79 14.0608 173.679 14.308C173.281 15.2142 172.496 17.2465 172.496 17.37C172.483 17.4524 172.373 17.7545 172.221 18.0566C172.07 18.3587 171.96 18.6745 171.946 18.7706C171.946 18.9217 171.85 19.1688 171.286 20.4596C171.176 20.7205 171.038 21.1187 170.983 21.3521C170.915 21.5718 170.612 22.4094 170.296 23.2058C169.979 24.0022 169.663 24.8673 169.58 25.1282C169.511 25.3891 169.388 25.6637 169.333 25.7461C169.278 25.8148 169.154 26.1031 169.085 26.364C169.002 26.6249 168.81 27.1879 168.645 27.5998C168.48 28.0118 168.177 28.8219 167.957 29.3986C167.751 29.9891 167.544 30.5246 167.489 30.5932C167.448 30.6756 167.462 30.7717 167.544 30.8267C167.613 30.8679 169.759 30.9091 172.318 30.9091H176.967L177.49 29.1515C177.792 28.1903 178.15 26.9819 178.301 26.4601L178.577 25.5401H184.065H189.54L189.746 25.9383C189.87 26.158 190.241 27.3389 190.572 28.561C190.916 29.7831 191.218 30.8129 191.246 30.8541C191.287 30.8816 193.502 30.9091 196.17 30.9091C199.678 30.9091 201.026 30.8541 200.999 30.7443C200.985 30.6619 200.104 28.3001 199.059 25.4989C198 22.684 196.693 19.1826 196.156 17.7133C195.606 16.2441 195.042 14.7199 194.891 14.3492C194.74 13.9647 194.451 13.1683 194.231 12.5641C194.011 11.9599 193.653 10.9987 193.419 10.4358C193.185 9.87277 192.993 9.35098 192.993 9.29606C192.993 9.2274 192.91 8.98024 192.8 8.74681C192.442 7.89547 192.03 6.79697 192.03 6.65966C192.016 6.57727 191.906 6.27518 191.755 5.9731C191.603 5.67101 191.493 5.32773 191.48 5.20415C191.48 5.0943 191.383 4.8746 191.273 4.72355C191.163 4.58624 191.067 4.36654 191.067 4.25669C191.067 4.02326 190.585 2.73252 190.297 2.16954C190.186 1.9773 190.104 1.68894 190.104 1.55163C190.104 1.41432 190.021 1.18089 189.911 1.02984C189.815 0.878801 189.691 0.590445 189.636 0.370745L189.554 0H184.354H179.168L178.7 1.20835ZM184.602 8.26622C184.767 8.81547 185.482 11.2184 186.184 13.5939C186.885 15.9695 187.559 18.2488 187.683 18.6333L187.889 19.3611H184.244C182.249 19.3611 180.612 19.3061 180.612 19.2512C180.612 19.1963 181.286 16.8345 182.112 14.0059C182.937 11.1772 183.707 8.49965 183.831 8.06025C183.955 7.63458 184.12 7.27757 184.189 7.27757C184.258 7.27757 184.45 7.7307 184.602 8.26622Z", fill: "white" }), jsx("path", { d: "M0 15.586V31.02L3.48022 31.0611C5.37852 31.0886 7.05673 31.0474 7.19429 30.9925C7.44189 30.8826 7.45565 30.3883 7.42814 19.0463C7.41438 12.5377 7.41438 7.11385 7.41438 7.004C7.45565 6.59206 7.84081 7.31982 7.84081 7.78668C7.84081 8.03384 7.9371 8.47324 8.04715 8.74787C8.1572 9.03623 8.30851 9.54428 8.37729 9.88756C8.44607 10.2308 8.76245 11.4941 9.07883 12.7025C9.39522 13.9108 9.82165 15.5723 10.0417 16.4099C10.2481 17.2338 10.6883 18.8815 10.9909 20.0487C11.2935 21.2158 12.0638 24.1543 12.6966 26.571L13.8521 30.965L17.1397 31.0337C18.9418 31.0749 20.4824 31.0611 20.5374 31.02C20.5924 30.9788 20.8263 30.2647 21.0464 29.4409C21.4591 27.8618 23.9076 18.5108 24.7192 15.3801C24.9806 14.3639 25.4482 12.5926 25.7371 11.4667C26.0397 10.327 26.3561 9.06369 26.4387 8.65175C26.5212 8.23981 26.7 7.64937 26.8376 7.34728C27.0852 6.81176 27.0852 7.11385 27.0989 18.909C27.0989 25.5824 27.1402 31.0337 27.209 31.0337C27.264 31.0337 28.9422 31.0474 30.9506 31.0474L34.5959 31.0611L34.6371 15.5998L34.6646 0.138376H28.5571H22.4357L22.2294 0.852402C22.0643 1.45658 20.2623 8.22608 18.9005 13.4577C18.0201 16.7669 17.4424 18.8953 17.3461 19.06C17.2635 19.1973 17.1948 19.1424 17.0985 18.8541C17.0159 18.6481 15.9155 14.4463 14.6637 9.54428C13.3982 4.6285 12.339 0.509121 12.2977 0.371807C12.2289 0.152107 11.8162 0.138376 6.10758 0.138376H0V15.586Z", fill: "white" }), jsx("path", { d: "M49.2589 1.34428C49.0113 2.00338 48.5299 3.21173 48.2135 4.04934C47.8833 4.87321 47.3881 6.15022 47.113 6.86424C46.8379 7.57827 46.3289 8.88274 45.9988 9.7478C45.6687 10.6129 45.2972 11.5329 45.1872 11.78C45.0772 12.0272 44.9809 12.3018 44.9809 12.3979C44.9671 12.4941 44.8571 12.8099 44.7057 13.112C44.5544 13.414 44.4444 13.7299 44.4306 13.826C44.4306 13.9221 44.3481 14.1967 44.238 14.4439C43.8391 15.3502 43.055 17.3824 43.055 17.506C43.0413 17.5883 42.9312 17.8904 42.7799 18.1925C42.6286 18.4946 42.5186 18.8104 42.5048 18.9065C42.5048 19.0576 42.4085 19.3047 41.8445 20.5955C41.7345 20.8564 41.5969 21.2546 41.5419 21.488C41.4731 21.7077 41.1705 22.5453 40.8541 23.3417C40.5377 24.1381 40.2213 25.0032 40.1388 25.2641C40.07 25.525 39.9462 25.7996 39.8912 25.882C39.8362 25.9507 39.7124 26.239 39.6436 26.4999C39.5611 26.7608 39.3685 27.3238 39.2034 27.7357C39.0383 28.1477 38.7357 28.9578 38.5156 29.5345C38.3093 30.125 38.1029 30.6605 38.0479 30.7291C38.0067 30.8115 38.0204 30.9077 38.1029 30.9626C38.1717 31.0038 40.3176 31.045 42.8762 31.045H47.5257L48.0484 29.2874C48.351 28.3262 48.7087 27.1178 48.86 26.596L49.1351 25.676H54.6237H60.0985L60.3049 26.0743C60.5249 26.4725 60.8688 27.6533 61.3778 29.5895C61.5291 30.1936 61.6942 30.7703 61.7492 30.8665C61.8868 31.1136 71.6259 31.1274 71.5571 30.8802C71.5434 30.7978 70.663 28.436 69.6175 25.6349C68.5583 22.8199 67.2515 19.3185 66.7151 17.8492C66.1648 16.38 65.6008 14.8558 65.4495 14.4851C65.2982 14.1006 65.0093 13.3042 64.7893 12.7C64.5692 12.0958 64.2115 11.1347 63.9777 10.5717C63.7438 10.0087 63.5512 9.48691 63.5512 9.43199C63.5512 9.36333 63.4687 9.11617 63.3586 8.88274C63.001 8.0314 62.5883 6.9329 62.5883 6.79559C62.5746 6.7132 62.4645 6.41111 62.3132 6.10903C62.1619 5.80694 62.0518 5.46366 62.0381 5.34007C62.0381 5.23022 61.9418 5.01052 61.8317 4.85948C61.7217 4.72217 61.6254 4.50247 61.6254 4.39262C61.6254 4.15919 61.144 2.86845 60.8551 2.30547C60.745 2.11323 60.6625 1.82487 60.6625 1.68756C60.6625 1.55025 60.58 1.31682 60.4699 1.16578C60.3736 1.01473 60.2498 0.726376 60.1948 0.506676L60.1123 0.135933H54.9126H49.7266L49.2589 1.34428ZM55.1602 8.40214C55.3252 8.95139 56.0405 11.3544 56.7421 13.7299C57.4436 16.1054 58.1177 18.3848 58.2415 18.7692L58.4478 19.497H54.8025C52.8079 19.497 51.171 19.4421 51.171 19.3871C51.171 19.3322 51.845 16.9704 52.6704 14.1418C53.4957 11.3132 54.266 8.63557 54.3898 8.19617C54.5136 7.77051 54.6787 7.41349 54.7475 7.41349C54.8163 7.41349 55.0089 7.86662 55.1602 8.40214Z", fill: "white" }), jsx("path", { d: "M72.5197 3.73433L72.561 7.34565L77.3893 7.38684L82.2313 7.4143L82.3138 7.73012C82.3551 7.8949 82.3964 13.2089 82.3964 19.539V31.032L87.0183 31.0046L91.6265 30.9634V19.4978C91.6128 12.3713 91.6678 7.94982 91.7503 7.82624C91.8604 7.64773 92.6169 7.60654 96.7299 7.55161L101.586 7.48296L101.627 3.80298L101.654 0.136742H87.0733H72.4922L72.5197 3.73433Z", fill: "white" }), jsx("path", { d: "M107.185 0.302076C106.951 0.535509 106.951 30.909 107.185 31.1425C107.405 31.3622 120.762 31.3759 122.922 31.1562C129.47 30.4971 132.881 27.3252 132.881 21.9013C132.881 18.853 131.767 16.4638 129.745 15.1867L129.153 14.816L129.786 14.102C131.492 12.1521 132.235 9.25485 131.739 6.49487C131.052 2.74624 128.369 0.810133 123.128 0.274614C121.051 0.0686455 107.405 0.0823765 107.185 0.302076ZM122.028 7.14024C123.692 7.45606 124.256 8.0465 124.325 9.52947C124.38 10.5319 124.38 10.5456 123.871 11.0948C123.004 12.0698 122.55 12.1521 118.162 12.1521H114.379L114.338 9.57067L114.311 7.00292H117.791C119.717 7.00292 121.615 7.07158 122.028 7.14024ZM123.183 19.0178C124.132 19.2649 124.573 19.5396 125.013 20.1987C125.302 20.6106 125.329 20.8028 125.288 21.6954C125.233 22.9174 124.944 23.4392 124.036 23.8786C123.059 24.3592 122.138 24.4416 118.149 24.4416H114.311V21.6267V18.8118H118.341C121.505 18.8118 122.55 18.853 123.183 19.0178Z", fill: "white" }), jsx("path", { d: "M139.002 0.301773C138.96 0.397892 138.946 7.40082 138.96 15.8593L139.002 31.2383L150.955 31.2795C159.676 31.2932 162.95 31.2657 163.088 31.1559C163.239 31.0323 163.28 30.332 163.28 27.8604C163.28 24.9082 163.267 24.7159 163.019 24.5786C162.84 24.4962 159.897 24.4413 154.422 24.4413H146.086V21.6264V18.8115L153.83 18.784L161.561 18.7428V15.516V12.2891L153.83 12.248L146.086 12.2205V9.61156V7.00262L154.38 6.97516L162.661 6.93396V3.56981V0.205654L150.859 0.164461C141.491 0.136997 139.043 0.164461 139.002 0.301773Z", fill: "white" })] }));
+
+const ApplicationDataStyled = styled$1.div `
+  display: flex;
+  column-gap: 10px;
+  row-gap: 12px;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  ${({ theme }) => theme.media.maxWidth.tablet} {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  ${({ theme }) => theme.media.maxWidth.mobile} {
+    flex-direction: column;
+  }
+`;
+const ApplicationDataLabel = styled$1(Typography).attrs({
+    forwardedAs: "p",
+    variant: "body-s-semibold",
+}) `
+  white-space: nowrap;
+  color: ${({ theme }) => theme.colors.gray.darkGray};
+`;
+const ApplicationDataContent = styled$1.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+`;
+const ApplicationDataValue = styled$1(Typography).attrs({
+    forwardedAs: "p",
+    variant: "body-m-semibold",
+}) `
+  margin: 0;
+  white-space: nowrap;
+  color: ${({ theme }) => `${theme.colors.primary.darkBlue}`};
+`;
+
+const ApplicationData = ({ label, statusValue, withdraw, info, }) => {
+    return (jsxs(ApplicationDataStyled, { children: [jsxs(ApplicationDataContent, { children: [jsx(ApplicationDataLabel, { children: label }), info && (jsx(Tooltip, { content: info, children: jsx(InfoIcon, { size: 18 }) }))] }), jsxs(ApplicationDataContent, { children: [["number", "string"].includes(typeof statusValue) && (jsx(ApplicationDataValue, { children: statusValue })), !["number", "string"].includes(typeof statusValue) && statusValue, withdraw && jsx(WithdrawIcon, { size: 18 })] })] }));
+};
+
+const ApplicationInfoStyled = styled$1.div `
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 22px;
+  ${({ $variant }) => {
+    switch ($variant) {
+        case "secondary":
+            return css `
+          padding: 24px;
+          background: #f5f5f5;
+        `;
+        case "primary":
+        default:
+            return css `
+          padding: 24px 20px;
+          background: ${({ theme }) => theme.colors.primary.white};
+          border: 1px solid ${({ theme }) => theme.colors.gray.lightGray2};
+        `;
+    }
+}}
+
+  border-radius: 6px;
+  ${({ theme }) => theme.media.maxWidth.tablet} {
+    width: 100%;
+    flex-direction: column;
+    gap: 18px;
+    padding: 18px 20px;
+  }
+  ${({ theme }) => theme.media.maxWidth.mobile} {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px 20px;
+  }
+`;
+const ApplicationInfoDataContainer = styled$1.div `
+  display: flex;
+  gap: 56px;
+  width: fit-content;
+  ${({ theme }) => theme.media.maxWidth.tablet} {
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+  }
+  ${({ theme }) => theme.media.maxWidth.mobile} {
+    flex-direction: column;
+    gap: 8px;
+  }
+`;
+const ApplicationDataActions = styled$1.div `
+  display: flex;
+  gap: 22px;
+  width: fit-content;
+  ${({ theme }) => theme.media.maxWidth.tablet} {
+    width: 100%;
+    gap: 20px;
+  }
+`;
+
+const ApplicationInfo = ({ children, actions, variant = "primary", }) => (jsxs(ApplicationInfoStyled, { "$variant": variant, children: [jsx(ApplicationInfoDataContainer, { children: children }), actions && jsx(ApplicationDataActions, { children: actions })] }));
+
+const ApplicationStatusStyled = styled$1.div `
+  display: flex;
+  column-gap: 10px;
+  row-gap: 12px;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  ${({ theme }) => theme.media.maxWidth.tablet} {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  ${({ theme }) => theme.media.maxWidth.mobile} {
+    flex-direction: column;
+  }
+`;
+const ApplicationStatusLabel = styled$1(Typography).attrs({
+    forwardedAs: "p",
+    variant: "body-s-semibold",
+}) `
+  margin: 0;
+  white-space: nowrap;
+  color: ${({ theme }) => theme.colors.gray.darkGray};
+`;
+const ApplicationStatusContent = styled$1.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+`;
+const ApplicationStatusValue = styled$1(Typography).attrs({
+    forwardedAs: "p",
+    variant: "body-m-semibold",
+}) `
+  white-space: nowrap;
+  margin: 0;
+  ${({ $type, theme }) => {
+    switch ($type) {
+        case "success":
+            return `
+          color: ${theme.colors.accent.green};
+        `;
+        case "pending":
+            return `
+          color: ${theme.colors.primary.darkBlue};
+        `;
+        case "warning":
+            return `
+          color: ${theme.colors.accent.orange};
+        `;
+    }
+}}
+`;
+
+const ApplicationStatus = ({ label, statusValue, type, }) => {
+    const icon = useMemo(() => {
+        switch (type) {
+            case "success":
+                return jsx(SuccessfullSmallIcon, { size: 18 });
+            case "warning":
+                return jsx(WarningIcon, { size: 18 });
+            case "pending":
+            default:
+                return jsx(ClockIcon, { size: 18 });
+        }
+    }, [type]);
+    return (jsxs(ApplicationStatusStyled, { children: [jsx(ApplicationStatusContent, { children: jsx(ApplicationStatusLabel, { children: label }) }), jsxs(ApplicationStatusContent, { children: [icon, jsx(ApplicationStatusValue, { "$type": type, children: statusValue })] })] }));
+};
+
+const BalanceRowStyled = styled$1.tr `
+  position: relative;
+`;
+const BalanceCell = styled$1.td `
+  padding: 14px 16px;
+  border-collapse: separate;
+  border-spacing: 0;
+  white-space: nowrap;
+  background: ${({ theme }) => theme.colors.gray.lightBlueGray};
+`;
+const BalanceCellActions = styled$1.td `
+  background: ${({ theme }) => theme.colors.gray.lightBlueGray};
+`;
+
+const BalanceRow = ({ valueLabel, count, amount, actions, }) => {
+    return (jsxs(BalanceRowStyled, { children: [jsx(BalanceCell, { children: valueLabel }), jsx(BalanceCell, { children: count }), jsx(BalanceCell, { children: amount }), jsx(BalanceCellActions, { children: actions })] }));
+};
+
+const CurrencyNameStyled = styled.div `
+  display: grid;
+  grid-template-columns: ${({ $longname, $shortname, $network, $icon }) => `
+    ${$icon ? "auto" : ""}
+    ${$longname || $network ? "1fr" : ""}
+    ${$shortname ? "auto" : ""}
+  `};
+  grid-template-areas: ${({ $network, $icon }) => `
+  "${$icon ? "icon " : ""}longname shortname"
+    ${$network ? `"${!$icon ? "" : "."} network ."` : ""}
+  `};
+  width: 100%;
+  column-gap: 10px;
+  align-items: center;
+`;
+const CurrencyNameLongname = styled(Typography).attrs({
+    variant: "body-m-bold",
+}) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+  grid-area: longname;
+`;
+const CurrencyNameShortname = styled(Typography).attrs({
+    variant: "body-m",
+}) `
+  color: ${({ theme }) => theme.colors.gray.darkGray};
+  grid-area: shortname;
+`;
+const CurrencyNameNetwork = styled(Typography).attrs({
+    variant: "body-s",
+}) `
+  color: ${({ theme }) => theme.colors.gray.darkGray2};
+  grid-area: network;
+`;
+
+const CurrencyName = ({ icon, network, longName, shortName, }) => (jsxs(CurrencyNameStyled, { "$icon": !!icon, "$longname": !!longName, "$shortname": !!shortName, "$network": !!network, children: [icon, jsx(CurrencyNameLongname, { children: longName }), shortName && jsx(CurrencyNameShortname, { children: shortName }), network && jsx(CurrencyNameNetwork, { children: network })] }));
+
+const CurrencyRateCard = styled$1.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px;
+  background: ${({ theme }) => theme.colors.gray.lightBlueGray};
+  border-radius: 10px;
+  gap: 14px;
+`;
+const CurrencyRateBody = styled$1.div `
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 10px;
+  width: 100%;
+`;
+const CurrencyRateBox = styled$1.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0px;
+  width: 100%;
+`;
+const CurrencyRatePriceLabel = styled$1(Typography).attrs({
+    variant: "body-s",
+}) `
+  color: ${({ theme }) => theme.colors.gray.darkGray};
+`;
+const CurrencyRateAmount = styled$1(Typography).attrs({
+    variant: "body-m-bold",
+}) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+
+const CurrencyRate = ({ longName, shortName, network, icon, buyLabel, sellLabel, buyValue, sellValue, }) => (jsxs(CurrencyRateCard, { children: [jsx(CurrencyName, { longName: longName, shortName: shortName, network: network, icon: icon }), (buyValue || sellValue) && (jsxs(CurrencyRateBody, { children: [buyValue && (jsxs(CurrencyRateBox, { children: [jsx(CurrencyRatePriceLabel, { children: buyLabel }), jsx(CurrencyRateAmount, { children: buyValue })] })), sellValue && (jsxs(CurrencyRateBox, { children: [jsx(CurrencyRatePriceLabel, { children: sellLabel }), jsx(CurrencyRateAmount, { children: sellValue })] }))] }))] }));
+
+const RequisitesStyled = styled$1.div `
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: 12px;
+  column-gap: 10px;
+  width: 100%;
+  background: #f5f5f5;
+  border-radius: 10px;
+  padding: 18px 24px;
+  ${({ theme }) => theme.media.maxWidth.tablet} {
+    grid-template-columns: 1fr 1fr;
+    padding: 18px 20px;
+  }
+  ${({ theme }) => theme.media.maxWidth.mobile} {
+    padding: 16px 14px;
+    grid-template-columns: auto;
+    row-gap: 8px;
+    & > *:not(:nth-child(2n)) {
+      margin-top: 4px;
+    }
+  }
+`;
+const RequisitesItemLabel = styled$1(Typography).attrs({
+    variant: "body-m",
+    forwardedAs: "p",
+}) `
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+const RequisitesItemValue = styled$1(Typography).attrs({
+    variant: "body-m-bold",
+    forwardedAs: "p",
+}) `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+
+const CopyButtonStyled = styled$1.button `
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+`;
+
+const CopyButton = ({ text, size = 18 }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isCopied) {
+            ref.current = setTimeout(() => {
+                setIsCopied(false);
+            }, 1500);
+        }
+        return () => {
+            if (ref.current) {
+                clearTimeout(ref.current);
+            }
+        };
+    }, [isCopied]);
+    const handleClick = async () => {
+        await copyToClipboard(text);
+        setIsCopied(true);
+    };
+    return (jsx(CopyButtonStyled, { onClick: handleClick, children: isCopied ? jsx(CheckIcon$1, { size: size }) : jsx(CopyIcon, { size: size }) }));
+};
+
+const Requisites = ({ cardHolderLabel, cardHolderName, cardNumberLabel, cardNumber, merchantLabel, merchantName, descriptionLabel, description, }) => (jsxs(RequisitesStyled, { children: [jsx(RequisitesItemLabel, { children: cardHolderLabel }), jsx(RequisitesItemValue, { children: cardHolderName }), jsx(RequisitesItemLabel, { children: cardNumberLabel }), jsxs(RequisitesItemValue, { children: [cardNumber && formatCardNumber(cardNumber), cardNumber && jsx(CopyButton, { text: cardNumber.toString() })] }), jsx(RequisitesItemLabel, { children: merchantLabel }), jsx(RequisitesItemValue, { children: merchantName }), jsx(RequisitesItemLabel, { children: descriptionLabel }), jsx(RequisitesItemValue, { children: description })] }));
+
+const TransactionStatusStyled = styled$1.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-between;
+`;
+const TransactionStatusLabel = styled$1(Typography).attrs({
+    forwardedAs: "p",
+    variant: "body-m-semibold",
+}) `
+  margin: 0;
+  flex: 1 1 auto;
+  color: ${({ theme }) => theme.colors.gray.darkGray};
+`;
+const TransactionStatusContent = styled$1.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+`;
+const TransactionStatusValue = styled$1(Typography).attrs({
+    forwardedAs: "p",
+    variant: "body-s-semibold",
+}) `
+  margin: 0;
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+
+const TransactionStatus = ({ label, statusValue, type, }) => {
+    const icon = useMemo(() => {
+        switch (type) {
+            case "success":
+                return jsx(SuccessfullSmallIcon, { size: 18 });
+            case "pending":
+            default:
+                return jsx(ClockIcon, { size: 18 });
+        }
+    }, [type]);
+    return (jsxs(TransactionStatusStyled, { children: [jsx(TransactionStatusLabel, { children: label }), jsxs(TransactionStatusContent, { children: [icon, jsx(TransactionStatusValue, { children: statusValue })] })] }));
+};
+
+const colors = {
+    primary: {
+        primaryBlue: "#2D58B6",
+        hoverBlue: "#3163F0",
+        activeBlue: "#244AB7",
+        lightBlue2: "#6D93FF",
+        darkBlue: "#202D52",
+        darkBlue2: "#1F2635",
+        darkBlue3: "#131A2A",
+        white: "#FFFFFF",
+    },
+    gray: {
+        lightGray2: "#D9D9D9",
+        lightGray3: "#D0D1D8",
+        darkGray: "#9296A5",
+        lightGray: "#F3F3F5",
+        darkGray2: "#5E6F8D",
+        lightBlueGray: "#EFF2FB",
+        lightBlueGray2: "#F1F4F9",
+    },
+    accent: {
+        red: "#F84545",
+        green: "#1CD850",
+        greenLight: "#A7FFC0",
+        green2: "#00BC9E",
+        green2Light: "#00D6B3",
+        green2Dark: "#009E85",
+        orange: "#FFA63E",
+        purple: "#843CF0",
+    },
+    icon: {
+        iconPrimary: "#202D52",
+        iconSecondary: "#202D52",
+        iconThirty: "#5E6F8D",
+        iconFourth: "#FFA63E",
+        iconFive: "#2D5B86",
+    },
+};
+
+const theme = {
+    colors,
+    media: {
+        maxWidth: {
+            mobile: "@media (max-width: 375px)",
+            tablet: "@media (max-width: 834px)",
+        },
+    },
+};
+
+export { ApplicationData, ApplicationInfo, ApplicationStatus, BalanceRow, Button, Checkbox, Container, CopyTooltip, Counter, CurrencyName, CurrencyRate, HamburgerButton, Informer, Loader, Logo, RadioButton, Requisites, SelectField, Switcher, TabList, Table, TextField, Tooltip, TransactionStatus, Typography, UserAccount, copyToClipboard, formatCardNumber, maskEmail, theme };
+//# sourceMappingURL=matbea-ui.es.js.map