@matbea-ui/matbea-ui 0.1.0

package/dist/matbea-ui.es.js

@@ -0,0 +1,2672 @@
+import Xe, { useState as W, forwardRef as Ie, useCallback as L, useId as we, useRef as Z, useMemo as ve, useLayoutEffect as Oe, useEffect as ye } from "react";
+import $, { css as g, styled as s, keyframes as Ue } from "styled-components";
+var xe = { exports: {} }, ce = {};
+var Ee;
+function qe() {
+  if (Ee) return ce;
+  Ee = 1;
+  var e = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
+  function o(i, l, c) {
+    var d = null;
+    if (c !== void 0 && (d = "" + c), l.key !== void 0 && (d = "" + l.key), "key" in l) {
+      c = {};
+      for (var x in l)
+        x !== "key" && (c[x] = l[x]);
+    } else c = l;
+    return l = c.ref, {
+      $$typeof: e,
+      type: i,
+      key: d,
+      ref: l !== void 0 ? l : null,
+      props: c
+    };
+  }
+  return ce.Fragment = r, ce.jsx = o, ce.jsxs = o, ce;
+}
+var de = {};
+var Te;
+function Je() {
+  return Te || (Te = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(n) {
+      if (n == null) return null;
+      if (typeof n == "function")
+        return n.$$typeof === R ? null : n.displayName || n.name || null;
+      if (typeof n == "string") return n;
+      switch (n) {
+        case _:
+          return "Fragment";
+        case O:
+          return "Profiler";
+        case C:
+          return "StrictMode";
+        case re:
+          return "Suspense";
+        case F:
+          return "SuspenseList";
+        case q:
+          return "Activity";
+      }
+      if (typeof n == "object")
+        switch (typeof n.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), n.$$typeof) {
+          case B:
+            return "Portal";
+          case I:
+            return n.displayName || "Context";
+          case G:
+            return (n._context.displayName || "Context") + ".Consumer";
+          case P:
+            var h = n.render;
+            return n = n.displayName, n || (n = h.displayName || h.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
+          case H:
+            return h = n.displayName || null, h !== null ? h : e(n.type) || "Memo";
+          case N:
+            h = n._payload, n = n._init;
+            try {
+              return e(n(h));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function r(n) {
+      return "" + n;
+    }
+    function o(n) {
+      try {
+        r(n);
+        var h = !1;
+      } catch {
+        h = !0;
+      }
+      if (h) {
+        h = console;
+        var p = h.error, a = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
+        return p.call(
+          h,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          a
+        ), r(n);
+      }
+    }
+    function i(n) {
+      if (n === _) return "<>";
+      if (typeof n == "object" && n !== null && n.$$typeof === N)
+        return "<...>";
+      try {
+        var h = e(n);
+        return h ? "<" + h + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function l() {
+      var n = U.A;
+      return n === null ? null : n.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function d(n) {
+      if (V.call(n, "key")) {
+        var h = Object.getOwnPropertyDescriptor(n, "key").get;
+        if (h && h.isReactWarning) return !1;
+      }
+      return n.key !== void 0;
+    }
+    function x(n, h) {
+      function p() {
+        J || (J = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          h
+        ));
+      }
+      p.isReactWarning = !0, Object.defineProperty(n, "key", {
+        get: p,
+        configurable: !0
+      });
+    }
+    function w() {
+      var n = e(this.type);
+      return D[n] || (D[n] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), n = this.props.ref, n !== void 0 ? n : null;
+    }
+    function b(n, h, p, a, f, E) {
+      var m = p.ref;
+      return n = {
+        $$typeof: k,
+        type: n,
+        key: h,
+        props: p,
+        _owner: a
+      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(n, "ref", {
+        enumerable: !1,
+        get: w
+      }) : Object.defineProperty(n, "ref", { enumerable: !1, value: null }), n._store = {}, Object.defineProperty(n._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(n, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(n, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: f
+      }), Object.defineProperty(n, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: E
+      }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
+    }
+    function j(n, h, p, a, f, E) {
+      var m = h.children;
+      if (m !== void 0)
+        if (a)
+          if (ie(m)) {
+            for (a = 0; a < m.length; a++)
+              y(m[a]);
+            Object.freeze && Object.freeze(m);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else y(m);
+      if (V.call(h, "key")) {
+        m = e(n);
+        var z = Object.keys(h).filter(function(te) {
+          return te !== "key";
+        });
+        a = 0 < z.length ? "{key: someKey, " + z.join(": ..., ") + ": ...}" : "{key: someKey}", ee[m + a] || (z = 0 < z.length ? "{" + z.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          a,
+          m,
+          z,
+          m
+        ), ee[m + a] = !0);
+      }
+      if (m = null, p !== void 0 && (o(p), m = "" + p), d(h) && (o(h.key), m = "" + h.key), "key" in h) {
+        p = {};
+        for (var ae in h)
+          ae !== "key" && (p[ae] = h[ae]);
+      } else p = h;
+      return m && x(
+        p,
+        typeof n == "function" ? n.displayName || n.name || "Unknown" : n
+      ), b(
+        n,
+        m,
+        p,
+        l(),
+        f,
+        E
+      );
+    }
+    function y(n) {
+      S(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === N && (n._payload.status === "fulfilled" ? S(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
+    }
+    function S(n) {
+      return typeof n == "object" && n !== null && n.$$typeof === k;
+    }
+    var T = Xe, k = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), O = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), I = Symbol.for("react.context"), P = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), F = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), R = Symbol.for("react.client.reference"), U = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ie = Array.isArray, Q = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    T = {
+      react_stack_bottom_frame: function(n) {
+        return n();
+      }
+    };
+    var J, D = {}, Y = T.react_stack_bottom_frame.bind(
+      T,
+      c
+    )(), oe = Q(i(c)), ee = {};
+    de.Fragment = _, de.jsx = function(n, h, p) {
+      var a = 1e4 > U.recentlyCreatedOwnerStacks++;
+      return j(
+        n,
+        h,
+        p,
+        !1,
+        a ? Error("react-stack-top-frame") : Y,
+        a ? Q(i(n)) : oe
+      );
+    }, de.jsxs = function(n, h, p) {
+      var a = 1e4 > U.recentlyCreatedOwnerStacks++;
+      return j(
+        n,
+        h,
+        p,
+        !0,
+        a ? Error("react-stack-top-frame") : Y,
+        a ? Q(i(n)) : oe
+      );
+    };
+  })()), de;
+}
+var Re;
+function Ke() {
+  return Re || (Re = 1, process.env.NODE_ENV === "production" ? xe.exports = qe() : xe.exports = Je()), xe.exports;
+}
+var t = Ke();
+const ne = {
+  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"
+  }
+}, Qe = (e) => ({ theme: r }) => {
+  const o = r.colors, l = {
+    primary: {
+      default: {
+        bg: o.primary.primaryBlue,
+        color: o.primary.white,
+        border: o.primary.primaryBlue
+      },
+      hover: {
+        bg: o.primary.hoverBlue,
+        color: o.primary.white,
+        border: o.primary.hoverBlue
+      },
+      active: {
+        bg: o.primary.activeBlue,
+        color: o.primary.white,
+        border: o.primary.activeBlue
+      },
+      disabled: {
+        bg: o.gray.lightGray2,
+        color: o.gray.darkGray,
+        border: o.gray.lightGray2
+      }
+    },
+    secondary: {
+      default: {
+        bg: "transparent",
+        color: o.primary.primaryBlue,
+        border: o.primary.primaryBlue
+      },
+      hover: {
+        bg: o.primary.primaryBlue,
+        color: o.primary.white,
+        border: o.primary.primaryBlue
+      },
+      active: {
+        bg: o.primary.activeBlue,
+        color: o.primary.white,
+        border: o.primary.activeBlue
+      },
+      disabled: {
+        bg: "transparent",
+        color: o.gray.darkGray,
+        border: o.gray.lightGray2
+      }
+    },
+    tertiary: {
+      default: {
+        bg: "transparent",
+        color: o.primary.primaryBlue,
+        border: "transparent"
+      },
+      hover: {
+        bg: o.gray.lightBlueGray,
+        color: o.primary.primaryBlue,
+        border: "transparent"
+      },
+      active: {
+        bg: o.gray.lightBlueGray2,
+        color: o.primary.primaryBlue,
+        border: "transparent"
+      },
+      disabled: {
+        bg: "transparent",
+        color: o.gray.darkGray,
+        border: "transparent"
+      }
+    }
+  }[e];
+  return g`
+      background-color: ${l.default.bg};
+      color: ${l.default.color};
+      border-color: ${l.default.border};
+
+      &:hover:not(:disabled) {
+        background-color: ${l.hover.bg};
+        color: ${l.hover.color};
+        border-color: ${l.hover.border};
+      }
+
+      &:active:not(:disabled) {
+        background-color: ${l.active.bg};
+        color: ${l.active.color};
+        border-color: ${l.active.border};
+      }
+
+      &:disabled {
+        background-color: ${l.disabled.bg};
+        color: ${l.disabled.color};
+        border-color: ${l.disabled.border};
+      }
+    `;
+}, et = $.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: ${({ $form: e }) => e === "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: e }) => g`
+    padding: ${ne[e].padding};
+    min-height: ${ne[e].minHeight};
+    font-size: ${ne[e].fontSize};
+    line-height: ${ne[e].lineHeight};
+  `}
+
+  ${({ $hasIcon: e, $iconOnly: r, $size: o }) => g`
+    gap: ${r ? "0" : e ? ne[o].iconGap : ne[o].gap};
+  `}
+
+  ${({ $fullWidth: e }) => e && g`
+      width: 100%;
+    `}
+
+  ${({ $variant: e }) => Qe(e)}
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`, je = $.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  ${({ $iconOnly: e }) => e && g`
+      width: 18px;
+      height: 18px;
+    `}
+`, tt = ({
+  variant: e = "primary",
+  size: r = "default",
+  form: o = "default",
+  fullWidth: i = !1,
+  icon: l,
+  iconPosition: c = "left",
+  children: d,
+  disabled: x,
+  ...w
+}) => {
+  const b = !!d, j = !!l && (!b || c === "only"), y = !!l && !j && c === "left", S = !!l && !j && c === "right";
+  return /* @__PURE__ */ t.jsxs(
+    et,
+    {
+      type: "button",
+      $variant: e,
+      $size: r,
+      $form: o,
+      $fullWidth: i,
+      $hasIcon: !!l && b,
+      $iconOnly: j,
+      disabled: x,
+      ...w,
+      children: [
+        y && /* @__PURE__ */ t.jsx(je, { $iconOnly: !1, children: l }),
+        (!j || !l) && d,
+        j && l && /* @__PURE__ */ t.jsx(je, { $iconOnly: !0, children: l }),
+        S && /* @__PURE__ */ t.jsx(je, { $iconOnly: !1, children: l })
+      ]
+    }
+  );
+}, be = s.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+`, rt = s.button`
+  border: none;
+  background: transparent;
+  padding: 4px 8px;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+`, ot = s.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;
+
+  ${be}:hover &,
+  ${be}:focus-within &,
+  ${be}:active & {
+    opacity: 1;
+    transform: translate(-50%, -10px);
+  }
+`, Nr = ({
+  label: e,
+  children: r,
+  copiedText: o = "Скопировано!",
+  copyDuration: i = 1500
+}) => {
+  const [l, c] = W(!1), d = async () => {
+    try {
+      await navigator.clipboard.writeText(e), c(!0), setTimeout(() => c(!1), i);
+    } catch (x) {
+      console.error("Copy failed", x);
+    }
+  };
+  return /* @__PURE__ */ t.jsxs(be, { onClick: d, children: [
+    r ?? /* @__PURE__ */ t.jsx(rt, { type: "button", children: e }),
+    /* @__PURE__ */ t.jsx(ot, { children: l ? o : e })
+  ] });
+}, u = {
+  regular: 400,
+  semibold: 600,
+  bold: 700
+}, nt = {
+  h1: {
+    mobile: {
+      fontSize: "26px",
+      lineHeight: "32px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "34px",
+      lineHeight: "42px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "44px",
+      lineHeight: "54px",
+      fontWeight: u.semibold,
+      textTransform: "uppercase"
+    }
+  },
+  h2: {
+    mobile: {
+      fontSize: "22px",
+      lineHeight: "28px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "30px",
+      lineHeight: "37px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "32px",
+      lineHeight: "40px",
+      fontWeight: u.semibold
+    }
+  },
+  h3: {
+    mobile: {
+      fontSize: "20px",
+      lineHeight: "24px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "28px",
+      lineHeight: "34px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "30px",
+      lineHeight: "38px",
+      fontWeight: u.semibold
+    }
+  },
+  h4: {
+    mobile: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: u.semibold
+    }
+  },
+  h5: {
+    mobile: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "20px",
+      lineHeight: "24px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "20px",
+      lineHeight: "24px",
+      fontWeight: u.semibold
+    }
+  },
+  "body-xl-semibold": {
+    mobile: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "22px",
+      lineHeight: "28px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: u.semibold
+    }
+  },
+  "body-xl": {
+    mobile: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: u.regular
+    },
+    tablet: {
+      fontSize: "22px",
+      lineHeight: "28px",
+      fontWeight: u.regular
+    },
+    desktop: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: u.regular
+    }
+  },
+  "body-l-semibold": {
+    mobile: {
+      fontSize: "16px",
+      lineHeight: "19px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: u.semibold
+    }
+  },
+  "body-l": {
+    mobile: {
+      fontSize: "16px",
+      lineHeight: "19px",
+      fontWeight: u.regular
+    },
+    tablet: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: u.regular
+    },
+    desktop: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: u.regular
+    }
+  },
+  "body-m-bold": {
+    mobile: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: u.bold
+    },
+    tablet: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: u.bold
+    },
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: u.bold
+    }
+  },
+  "body-m-semibold": {
+    mobile: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: u.semibold
+    }
+  },
+  "body-m": {
+    mobile: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: u.regular
+    },
+    tablet: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: u.regular
+    },
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: u.regular
+    }
+  },
+  "body-s-semibold": {
+    mobile: {
+      fontSize: "12px",
+      lineHeight: "15px",
+      fontWeight: u.semibold
+    },
+    tablet: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: u.semibold
+    },
+    desktop: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: u.semibold
+    }
+  },
+  "body-s": {
+    mobile: {
+      fontSize: "12px",
+      lineHeight: "15px",
+      fontWeight: u.regular
+    },
+    tablet: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: u.regular
+    },
+    desktop: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: u.regular
+    }
+  },
+  button: {
+    desktop: {
+      fontSize: "15px",
+      lineHeight: "18px",
+      fontWeight: u.semibold
+    }
+  },
+  "form-input": {
+    desktop: {
+      fontSize: "15px",
+      lineHeight: "18px",
+      fontWeight: u.regular
+    }
+  },
+  "avatar-basic": {
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "18px",
+      fontWeight: u.semibold
+    }
+  },
+  "avatar-m": {
+    desktop: {
+      fontSize: "14px",
+      lineHeight: "16px",
+      fontWeight: u.semibold
+    }
+  },
+  "avatar-s": {
+    desktop: {
+      fontSize: "12px",
+      lineHeight: "14px",
+      fontWeight: u.semibold
+    }
+  }
+}, it = (e) => {
+  const { mobile: r, tablet: o, desktop: i } = nt[e];
+  return g`
+    ${({ theme: l }) => g`
+      ${g`
+        font-size: ${i.fontSize};
+        font-weight: ${i.fontWeight};
+        line-height: ${i.lineHeight};
+      `}
+
+      ${o && g`
+        ${l.media.maxWidth.tablet} {
+          font-size: ${o.fontSize};
+          font-weight: ${o.fontWeight};
+          line-height: ${o.lineHeight};
+        }
+      `}
+
+    ${r && g`
+        ${l.media.maxWidth.mobile} {
+          font-size: ${r.fontSize};
+          font-weight: ${r.fontWeight};
+          line-height: ${r.lineHeight};
+        }
+      `}
+    `}
+  `;
+}, at = s.span`
+  margin: 0;
+  color: ${({ $color: e }) => e ?? "inherit"};
+  ${({ $variant: e }) => it(e)};
+  text-align: ${({ $align: e }) => e ?? "inherit"};
+  ${({ $inline: e }) => e ? g`
+          display: inline;
+        ` : g`
+          display: block;
+        `};
+  ${({ $uppercase: e }) => e && g`
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    `}
+  ${({ $truncate: e }) => e && g`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `}
+`, v = ({
+  as: e = "span",
+  forwardedAs: r,
+  variant: o = "body-m-semibold",
+  color: i,
+  align: l,
+  uppercase: c = !1,
+  truncate: d = !1,
+  inline: x = !1,
+  children: w,
+  ...b
+}) => /* @__PURE__ */ t.jsx(
+  at,
+  {
+    as: e,
+    forwardedAs: r,
+    $variant: o,
+    $color: i,
+    $align: l,
+    $uppercase: c,
+    $truncate: d,
+    $inline: x,
+    ...b,
+    children: w
+  }
+), X = ({ size: e = 24, children: r, ...o }) => /* @__PURE__ */ t.jsx(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...o,
+    children: r
+  }
+), lt = (e) => /* @__PURE__ */ t.jsxs(X, { ...e, children: [
+  /* @__PURE__ */ t.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "#5E6F8D", "stroke-width": "2" }),
+  /* @__PURE__ */ t.jsx("path", { d: "M7 12L10.3333 15L17 9", stroke: "#5E6F8D", "stroke-width": "2" })
+] }), st = (e) => /* @__PURE__ */ t.jsxs(X, { ...e, children: [
+  /* @__PURE__ */ t.jsxs("g", { "clip-path": "url(#clip0_487_8651)", children: [
+    /* @__PURE__ */ t.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"
+      }
+    ),
+    /* @__PURE__ */ t.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"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_487_8651", children: /* @__PURE__ */ t.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
+] }), ct = (e) => /* @__PURE__ */ t.jsxs(X, { ...e, children: [
+  /* @__PURE__ */ t.jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: "#9296A5" }),
+  /* @__PURE__ */ t.jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: "#9296A5" }),
+  /* @__PURE__ */ t.jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: "#9296A5" })
+] }), dt = (e) => /* @__PURE__ */ t.jsxs(X, { ...e, children: [
+  /* @__PURE__ */ t.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"
+    }
+  ),
+  /* @__PURE__ */ t.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"
+    }
+  )
+] }), Me = (e) => /* @__PURE__ */ t.jsx(X, { ...e, viewBox: "0 0 18 18", children: /* @__PURE__ */ t.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"
+  }
+) }), pt = (e) => /* @__PURE__ */ t.jsx(X, { ...e, viewBox: "0 0 18 18", children: /* @__PURE__ */ t.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"
+  }
+) }), Pe = (e) => /* @__PURE__ */ t.jsxs(X, { ...e, viewBox: "0 0 18 18", children: [
+  /* @__PURE__ */ t.jsx("g", { "clip-path": "url(#clip0_309_1899)", children: /* @__PURE__ */ t.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: e.color || "#9296A5"
+    }
+  ) }),
+  /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_309_1899", children: /* @__PURE__ */ t.jsx("rect", { width: "18", height: "18", fill: "white" }) }) })
+] }), De = (e) => /* @__PURE__ */ t.jsx(X, { ...e, viewBox: "0 0 18 18", children: /* @__PURE__ */ t.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"
+  }
+) }), ut = (e) => /* @__PURE__ */ t.jsxs(X, { ...e, viewBox: "0 0 18 18", children: [
+  /* @__PURE__ */ t.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"
+    }
+  ),
+  /* @__PURE__ */ t.jsx("path", { d: "M8.25 12H9.75V13.5H8.25V12Z", fill: "#FFA63E" })
+] }), ht = (e) => /* @__PURE__ */ t.jsxs(X, { ...e, viewBox: "0 0 18 18", children: [
+  /* @__PURE__ */ t.jsx("circle", { cx: "9", cy: "9", r: "9", fill: "#EFF2FB" }),
+  /* @__PURE__ */ t.jsx(
+    "path",
+    {
+      d: "M13 9L9 12L5 9",
+      stroke: "#5E6F8D",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  ),
+  /* @__PURE__ */ t.jsx(
+    "path",
+    {
+      d: "M13 6L9 9L5 6",
+      stroke: "#5E6F8D",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  )
+] }), xt = s.div`
+  display: grid;
+  align-items: center;
+  grid-template-columns: ${({ $icon: e }) => e ? "auto 1fr" : "1fr"};
+  gap: 12px;
+  width: 458px;
+  height: auto;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: ${({ $type: e, theme: r }) => {
+  switch (e) {
+    case "success":
+      return r.colors.accent.green2Light;
+    case "error":
+      return r.colors.accent.red;
+    case "info":
+      return r.colors.primary.lightBlue2;
+    case "warning":
+      return r.colors.accent.orange;
+  }
+}};
+`, Vr = ({
+  label: e,
+  description: r,
+  type: o,
+  icon: i
+}) => /* @__PURE__ */ t.jsxs(xt, { $icon: i, $type: o, children: [
+  i && /* @__PURE__ */ t.jsx(Pe, { size: 18, color: "#fff" }),
+  e && /* @__PURE__ */ t.jsx(v, { color: "#fff", variant: "body-l-semibold", children: e }),
+  i && /* @__PURE__ */ t.jsx("div", {}),
+  r && /* @__PURE__ */ t.jsx(v, { color: "#fff", variant: "body-m-semibold", children: r })
+] }), ft = s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`, gt = s(v).attrs({
+  variant: "form-input",
+  forwardedAs: "label"
+})`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, mt = s.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  height: 48px;
+  padding-left: 12px;
+  border-radius: 5px;
+  outline: 1px solid ${({ theme: e }) => e.colors.gray.lightGray2};
+  outline-offset: -1px;
+  background: ${({ theme: e }) => e.colors.primary.white};
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 140ms ease;
+
+  ${({ $disabled: e }) => e && g`
+      opacity: 0.6;
+      cursor: not-allowed;
+    `}
+
+  ${({ $hasError: e, theme: r }) => e && g`
+      outline-color: ${r.colors.accent.red};
+    `}
+
+  &:hover {
+    outline-color: ${({ theme: e, $hasError: r }) => r ? e.colors.accent.red : e.colors.primary.lightBlue2};
+  }
+
+  &[data-state="active"] {
+    outline-color: ${({ theme: e, $hasError: r }) => r ? e.colors.accent.red : e.colors.primary.primaryBlue};
+  }
+`, bt = s.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+`, yt = s.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  & > button {
+    border-radius: 0px;
+  }
+`, wt = s.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: e }) => e.colors.primary.darkBlue};
+
+  &::placeholder {
+    color: ${({ theme: e }) => e.colors.gray.darkGray};
+  }
+`, vt = s.span`
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme: e }) => e.colors.accent.red};
+`, $t = Ie(
+  ({
+    value: e,
+    defaultValue: r,
+    placeholder: o = "Text",
+    label: i,
+    error: l,
+    disabled: c = !1,
+    icon: d,
+    action: x,
+    name: w,
+    type: b = "text",
+    onChange: j,
+    onFocus: y,
+    onBlur: S,
+    className: T
+  }, k) => {
+    const [B, _] = W(!1), C = !!l, O = (I) => {
+      _(!0), y?.(I);
+    }, G = (I) => {
+      _(!1), S?.(I);
+    };
+    return /* @__PURE__ */ t.jsxs(ft, { className: T, children: [
+      i && /* @__PURE__ */ t.jsx(gt, { children: i }),
+      /* @__PURE__ */ t.jsxs(
+        mt,
+        {
+          $hasError: C,
+          $disabled: c,
+          "data-state": C ? "error" : B ? "active" : void 0,
+          children: [
+            d && /* @__PURE__ */ t.jsx(bt, { children: d }),
+            /* @__PURE__ */ t.jsx(
+              wt,
+              {
+                ref: k,
+                type: b,
+                name: w,
+                value: e,
+                defaultValue: r,
+                placeholder: o,
+                disabled: c,
+                onChange: j,
+                onFocus: O,
+                onBlur: G
+              }
+            ),
+            x && /* @__PURE__ */ t.jsx(yt, { children: x })
+          ]
+        }
+      ),
+      l && /* @__PURE__ */ t.jsx(vt, { children: l })
+    ] });
+  }
+);
+$t.displayName = "TextField";
+const kt = s.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 24px 28px;
+  background-color: ${({ theme: e }) => e.colors.primary.white};
+  border-radius: 10px;
+  ${({ theme: e }) => e.media.maxWidth.tablet} {
+    padding: 24px 20px;
+  }
+  ${({ theme: e }) => e.media.maxWidth.mobile} {
+    padding: 16px;
+  }
+`, Yr = kt, jt = s(v).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: e }) => e.colors.primary.primaryBlue};
+`, Zr = ({ count: e = 0 }) => /* @__PURE__ */ t.jsx(jt, { variant: "body-s-semibold", children: e }), Xr = ({
+  open: e,
+  onToggle: r
+}) => {
+  const [o, i] = W(!1), l = e !== void 0, c = l ? e : o, d = L(() => {
+    const x = !c;
+    l || i(x), r?.(x);
+  }, [l, c, r]);
+  return /* @__PURE__ */ t.jsx(
+    tt,
+    {
+      iconPosition: "only",
+      variant: "tertiary",
+      icon: c ? /* @__PURE__ */ t.jsx(st, {}) : /* @__PURE__ */ t.jsx(ct, {}),
+      size: "small",
+      onClick: d
+    }
+  );
+}, Ct = Ue`
+  0% {
+    transform: scale(0.5);
+  }
+  25% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(0.5);
+  }
+`, St = s.div`
+  display: flex;
+`, Ce = s.div`
+  margin: 2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${({ theme: e }) => e.colors.primary.primaryBlue};
+  transform: scale(0.5);
+  animation: ${Ct} 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;
+  }
+`, Ur = () => /* @__PURE__ */ t.jsxs(St, { children: [
+  /* @__PURE__ */ t.jsx(Ce, {}),
+  /* @__PURE__ */ t.jsx(Ce, {}),
+  /* @__PURE__ */ t.jsx(Ce, {})
+] }), Et = s.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+`, Tt = s.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`, Rt = s.span`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ theme: e }) => e.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: e, theme: r }) => e && g`
+      border-color: ${r.colors.primary.primaryBlue};
+      &::after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${r.colors.primary.primaryBlue};
+        transition: background-color 160ms ease;
+      }
+    `}
+
+  ${({ $checked: e, theme: r }) => !e && g`
+      &:hover {
+        border-color: ${r.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $checked: e, $disabled: r, theme: o }) => !r && e && g`
+      &:hover {
+        border-color: ${o.colors.primary.hoverBlue};
+        &::after {
+          background-color: ${o.colors.primary.hoverBlue};
+        }
+      }
+    `}
+
+  ${({ $disabled: e, theme: r }) => e && g`
+      border-color: ${r.colors.icon.iconSecondary};
+      background-color: ${r.colors.gray.lightGray2};
+      &::after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${r.colors.icon.iconSecondary};
+      }
+    `}
+`, Bt = s(v)`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, qr = ({
+  checked: e,
+  defaultChecked: r = !1,
+  disabled: o = !1,
+  name: i,
+  value: l,
+  label: c,
+  onChange: d,
+  className: x
+}) => {
+  const w = we(), [b, j] = W(r), y = e !== void 0, S = y ? e : b, T = L(
+    (k) => {
+      o || (y || j(k.target.checked), d?.(k.target.checked));
+    },
+    [o, y, d]
+  );
+  return /* @__PURE__ */ t.jsxs(
+    Et,
+    {
+      className: x,
+      htmlFor: w,
+      disabled: o,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          Tt,
+          {
+            id: w,
+            type: "radio",
+            checked: S,
+            onChange: T,
+            disabled: o,
+            name: i,
+            value: l
+          }
+        ),
+        /* @__PURE__ */ t.jsx(Rt, { $checked: S, $disabled: o }),
+        c && /* @__PURE__ */ t.jsx(Bt, { variant: "button", children: c })
+      ]
+    }
+  );
+}, Ht = s.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+`, At = s(v).attrs({
+  variant: "form-input",
+  forwardedAs: "label"
+})`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, Lt = s.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  height: 48px;
+  padding: 0 12px;
+  border-radius: 5px;
+  outline: 1px solid ${({ theme: e }) => e.colors.gray.lightGray2};
+  outline-offset: -1px;
+  background: ${({ theme: e }) => e.colors.primary.white};
+  width: 100%;
+  box-sizing: border-box;
+  transition: outline-color 140ms ease;
+  cursor: pointer;
+
+  ${({ $disabled: e }) => e && g`
+      opacity: 0.6;
+      cursor: not-allowed;
+    `}
+
+  ${({ $hasError: e, theme: r }) => e && g`
+      outline-color: ${r.colors.accent.red};
+    `}
+
+  &:hover {
+    outline-color: ${({ theme: e, $hasError: r }) => r ? e.colors.accent.red : e.colors.primary.lightBlue2};
+  }
+
+  &[data-state="active"] {
+    outline-color: ${({ theme: e, $hasError: r }) => r ? e.colors.accent.red : e.colors.primary.primaryBlue};
+  }
+`, zt = s.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  color: ${({ theme: e }) => e.colors.primary.primaryBlue};
+`, Wt = s.span`
+  flex: 1;
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme: e, $placeholder: r }) => r ? e.colors.gray.darkGray : e.colors.primary.darkBlue};
+  user-select: none;
+`, _t = s.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`, It = s.span`
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 13px;
+  line-height: 16px;
+  color: ${({ theme: e }) => e.colors.accent.red};
+`, Ot = s.div`
+  position: fixed;
+  top: ${({ $top: e }) => `${e}px`};
+  left: ${({ $left: e }) => `${e}px`};
+  width: ${({ $width: e }) => `${e}px`};
+  z-index: 999;
+  border-radius: 5px;
+  border: 1px solid ${({ theme: e }) => e.colors.gray.lightGray2};
+  background: ${({ theme: e }) => e.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;
+`, Mt = s.button`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 13px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+  cursor: pointer;
+  transition: background 140ms ease;
+
+  &[data-hovered="true"],
+  &:hover {
+    background: ${({ theme: e }) => e.colors.gray.lightBlueGray};
+  }
+
+  &[data-active="true"] {
+    background: ${({ theme: e }) => e.colors.gray.lightGray};
+  }
+`, Pt = s.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+`, Dt = 8, Gt = Ie(
+  ({
+    options: e,
+    value: r,
+    defaultValue: o,
+    placeholder: i = "Text",
+    label: l,
+    error: c,
+    disabled: d = !1,
+    icon: x,
+    name: w,
+    onChange: b,
+    onFocus: j,
+    onBlur: y,
+    className: S
+  }, T) => {
+    const k = Z(null), B = Z(null), _ = Z(null), [C, O] = W(!1), [G, I] = W(!1), [P, re] = W(o ?? ""), [F, H] = W(null), [N, q] = W({
+      top: 0,
+      left: 0,
+      width: 0
+    }), R = r ?? P, U = ve(
+      () => e.find((a) => a.value === R),
+      [e, R]
+    ), V = !!c, ie = !U, Q = U?.label ?? i, J = L(() => {
+      if (!B.current) return;
+      const a = B.current.getBoundingClientRect();
+      q({
+        top: a.bottom + Dt,
+        left: a.left,
+        width: a.width
+      });
+    }, []);
+    Oe(() => {
+      if (!C) return;
+      J();
+      const a = () => J();
+      return window.addEventListener("resize", a), window.addEventListener("scroll", a, !0), () => {
+        window.removeEventListener("resize", a), window.removeEventListener("scroll", a, !0);
+      };
+    }, [C, J]);
+    const D = L(() => {
+      O(!1), H(null);
+    }, []), Y = L(() => {
+      d || (O(!0), H((a) => {
+        if (a !== null) return a;
+        const f = e.findIndex(
+          (E) => E.value === R
+        );
+        return f >= 0 ? f : 0;
+      }));
+    }, [d, e, R]), oe = L(() => {
+      C ? D() : Y();
+    }, [C, D, Y]), ee = (a) => {
+      d || (re(a.value), b?.(a.value), D());
+    }, n = (a) => {
+      if (!d)
+        switch (a.key) {
+          case "ArrowDown":
+            a.preventDefault(), Y(), H(
+              (f) => f === null ? 0 : Math.min(f + 1, e.length - 1)
+            );
+            break;
+          case "ArrowUp":
+            a.preventDefault(), Y(), H(
+              (f) => f === null ? e.length - 1 : Math.max(f - 1, 0)
+            );
+            break;
+          case "Enter":
+          case " ":
+            a.preventDefault(), C ? F !== null && e[F] && ee(e[F]) : Y();
+            break;
+          case "Escape":
+          case "Tab":
+            D();
+            break;
+        }
+    };
+    ye(() => {
+      if (!C) return;
+      const a = (f) => {
+        const E = f.target, m = k.current && k.current.contains(E), z = _.current && _.current.contains(E);
+        !m && !z && D();
+      };
+      return document.addEventListener("mousedown", a), () => {
+        document.removeEventListener("mousedown", a);
+      };
+    }, [C, D]);
+    const h = (a) => {
+      I(!0), j?.(a);
+    }, p = (a) => {
+      I(!1), y?.(a);
+    };
+    return /* @__PURE__ */ t.jsxs(
+      Ht,
+      {
+        className: S,
+        ref: k,
+        onKeyDown: n,
+        onFocus: h,
+        onBlur: p,
+        children: [
+          l && /* @__PURE__ */ t.jsx(At, { children: l }),
+          /* @__PURE__ */ t.jsxs(
+            Lt,
+            {
+              ref: B,
+              role: "button",
+              tabIndex: d ? -1 : 0,
+              "aria-haspopup": "listbox",
+              "aria-expanded": C,
+              "aria-invalid": V,
+              "aria-disabled": d,
+              $hasError: V,
+              $disabled: d,
+              "data-state": V ? "error" : C || G ? "active" : void 0,
+              onClick: oe,
+              children: [
+                x && /* @__PURE__ */ t.jsx(zt, { children: x }),
+                /* @__PURE__ */ t.jsx(Wt, { $placeholder: ie, children: Q }),
+                /* @__PURE__ */ t.jsx(
+                  _t,
+                  {
+                    ref: T,
+                    readOnly: !0,
+                    name: w,
+                    value: R,
+                    tabIndex: -1,
+                    "aria-hidden": !0
+                  }
+                )
+              ]
+            }
+          ),
+          c && /* @__PURE__ */ t.jsx(It, { children: c }),
+          C && /* @__PURE__ */ t.jsx(
+            Ot,
+            {
+              ref: _,
+              role: "listbox",
+              $top: N.top,
+              $left: N.left,
+              $width: N.width,
+              children: e.map((a, f) => {
+                const E = a.value === R, m = f === F;
+                return /* @__PURE__ */ t.jsxs(
+                  Mt,
+                  {
+                    role: "option",
+                    "aria-selected": E,
+                    "data-active": E || void 0,
+                    "data-hovered": m || void 0,
+                    onMouseEnter: () => H(f),
+                    onMouseLeave: () => H(null),
+                    onMouseDown: (z) => z.preventDefault(),
+                    onClick: () => ee(a),
+                    children: [
+                      a.icon && /* @__PURE__ */ t.jsx(Pt, { children: a.icon }),
+                      /* @__PURE__ */ t.jsx(v, { variant: "form-input", children: a.label })
+                    ]
+                  },
+                  a.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Gt.displayName = "SelectField";
+const Ft = {
+  top: "translate3d(0, 6px, 0)",
+  bottom: "translate3d(0, -6px, 0)",
+  left: "translate3d(6px, 0, 0)",
+  right: "translate3d(-6px, 0, 0)"
+}, Nt = $.div`
+  display: inline-flex;
+  position: relative;
+`, Vt = $.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;
+  }
+`, Yt = $.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: e }) => e.colors.primary.white};
+  z-index: 9999;
+  opacity: ${({ $visible: e }) => e ? 1 : 0};
+  visibility: ${({ $visible: e }) => e ? "visible" : "hidden"};
+  transform: ${({ $visible: e, $placement: r }) => e ? "translate3d(0, 0, 0)" : Ft[r]};
+  transition: opacity 0.18s ease, transform 0.18s ease;
+
+  pointer-events: ${({ $visible: e, $interactive: r }) => e && r ? "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;
+  }
+`, Zt = $.span`
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  border: inherit;
+  border-radius: 2px;
+  transform: rotate(45deg);
+  pointer-events: none;
+
+  ${({ $placement: e }) => {
+  switch (e) {
+    case "top":
+      return g`
+          bottom: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;
+    case "bottom":
+      return g`
+          top: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;
+    case "left":
+      return g`
+          right: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `;
+    case "right":
+    default:
+      return g`
+          left: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `;
+  }
+}}
+`, Xt = $(v).attrs({
+  variant: "body-s"
+})`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, M = 8, K = 12, Be = 12, Ut = {
+  top: ["top", "bottom", "right", "left"],
+  bottom: ["bottom", "top", "right", "left"],
+  left: ["left", "right", "top", "bottom"],
+  right: ["right", "left", "top", "bottom"]
+}, fe = (e, r, o) => Math.min(Math.max(e, r), o), qt = ({
+  content: e,
+  children: r,
+  position: o = "top",
+  open: i,
+  defaultOpen: l = !1,
+  onOpenChange: c,
+  showDelay: d = 150,
+  hideDelay: x = 150,
+  interactive: w = !1,
+  disabled: b = !1,
+  hideOnClick: j = !1,
+  maxWidth: y
+}) => {
+  const [S, T] = W(l), k = typeof i == "boolean", B = k ? !!i : S, _ = Z(null), C = Z(null), O = Z(null), G = Z(null), I = Z(null), P = Z(null), re = we(), F = ve(
+    () => ({
+      top: -9999,
+      left: -9999,
+      arrowX: 0,
+      arrowY: 0,
+      placement: o
+    }),
+    [o]
+  ), [H, N] = W(F), q = () => {
+    G.current && (clearTimeout(G.current), G.current = null), I.current && (clearTimeout(I.current), I.current = null);
+  }, R = L(
+    (p) => {
+      k || T(p), p || N(F), c?.(p);
+    },
+    [F, k, c]
+  ), U = L(() => {
+    b || (q(), G.current = setTimeout(() => R(!0), d));
+  }, [b, R, d]), V = L(() => {
+    b || (q(), I.current = setTimeout(() => R(!1), x));
+  }, [b, R, x]), ie = () => {
+    b || U();
+  }, Q = () => {
+    b || V();
+  }, J = () => {
+    b || U();
+  }, D = () => {
+    b || V();
+  }, Y = () => {
+    j && R(!1);
+  }, oe = () => {
+    w && q();
+  }, ee = () => {
+    w && V();
+  }, n = L(() => {
+    if (typeof window > "u" || !C.current || !O.current)
+      return;
+    const p = C.current.getBoundingClientRect(), a = O.current.getBoundingClientRect(), f = window.innerWidth, E = window.innerHeight, m = p.left + p.width / 2, z = p.top + p.height / 2, ae = (A) => {
+      switch (A) {
+        case "top":
+          return p.top >= a.height + K + M;
+        case "bottom":
+          return E - p.bottom >= a.height + K + M;
+        case "left":
+          return p.left >= a.width + K + M;
+        case "right":
+          return f - p.right >= a.width + K + M;
+        default:
+          return !0;
+      }
+    }, te = Ut[o].find((A) => ae(A)) ?? o;
+    let le = 0, se = 0;
+    switch (te) {
+      case "top":
+        le = p.top - a.height - K, se = m - a.width / 2;
+        break;
+      case "bottom":
+        le = p.bottom + K, se = m - a.width / 2;
+        break;
+      case "left":
+        le = z - a.height / 2, se = p.left - a.width - K;
+        break;
+      case "right":
+      default:
+        le = z - a.height / 2, se = p.right + K;
+        break;
+    }
+    const Ge = Math.max(f - M * 2, 0), Fe = Math.max(E - M * 2, 0), Ne = M, Ve = f - a.width - M, Ye = M, Ze = E - a.height - M, $e = a.width >= Ge ? M : fe(se, Ne, Ve), ke = a.height >= Fe ? M : fe(le, Ye, Ze);
+    let ue = 0, he = 0;
+    if (te === "top" || te === "bottom") {
+      const A = Math.max(a.width / 2 - Be, 0);
+      ue = fe(
+        m - ($e + a.width / 2),
+        -A,
+        A
+      ), he = 0;
+    } else {
+      const A = Math.max(a.height / 2 - Be, 0);
+      he = fe(
+        z - (ke + a.height / 2),
+        -A,
+        A
+      ), ue = 0;
+    }
+    N((A) => A.top === ke && A.left === $e && A.arrowX === ue && A.arrowY === he && A.placement === te ? A : {
+      top: ke,
+      left: $e,
+      arrowX: ue,
+      arrowY: he,
+      placement: te
+    });
+  }, [o]);
+  Oe(() => {
+    if (!B)
+      return;
+    const p = O.current, a = C.current;
+    if (!p || !a) return;
+    const f = () => {
+      P.current !== null && cancelAnimationFrame(P.current), P.current = window.requestAnimationFrame(() => {
+        P.current = null, n();
+      });
+    };
+    f();
+    const m = typeof window < "u" && "ResizeObserver" in window ? new ResizeObserver(f) : null;
+    return m?.observe(p), m?.observe(a), window.addEventListener("resize", f), window.addEventListener("scroll", f, !0), () => {
+      window.removeEventListener("resize", f), window.removeEventListener("scroll", f, !0), m?.disconnect(), P.current !== null && (cancelAnimationFrame(P.current), P.current = null);
+    };
+  }, [B, n]), ye(() => q, []), ye(() => {
+    if (!B) return;
+    const p = (f) => {
+      f.key === "Escape" && R(!1);
+    }, a = (f) => {
+      const E = f.target;
+      _.current?.contains(E) || O.current?.contains(E) || R(!1);
+    };
+    return document.addEventListener("keydown", p), document.addEventListener("pointerdown", a), () => {
+      document.removeEventListener("keydown", p), document.removeEventListener("pointerdown", a);
+    };
+  }, [B, R]);
+  const h = {
+    top: H.top,
+    left: H.left,
+    "--tooltip-arrow-x": `${H.arrowX}px`,
+    "--tooltip-arrow-y": `${H.arrowY}px`
+  };
+  return y !== void 0 && (h.maxWidth = typeof y == "number" ? `${y}px` : y), /* @__PURE__ */ t.jsxs(Nt, { ref: _, "data-disabled": b, children: [
+    /* @__PURE__ */ t.jsx(
+      Vt,
+      {
+        ref: C,
+        tabIndex: b ? -1 : 0,
+        "aria-describedby": B ? re : void 0,
+        onMouseEnter: ie,
+        onMouseLeave: Q,
+        onFocus: J,
+        onBlur: D,
+        onClick: Y,
+        "data-open": B,
+        children: r
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      Yt,
+      {
+        ref: O,
+        id: re,
+        role: "tooltip",
+        "aria-hidden": !B,
+        $visible: B,
+        $interactive: w,
+        $placement: H.placement,
+        style: h,
+        "data-placement": H.placement,
+        onMouseEnter: oe,
+        onMouseLeave: ee,
+        children: [
+          ["string", "number"].includes(typeof e) ? /* @__PURE__ */ t.jsx(Xt, { variant: "body-m", children: e }) : e,
+          /* @__PURE__ */ t.jsx(Zt, { $placement: H.placement })
+        ]
+      }
+    )
+  ] });
+}, Jt = (e, r = 4, o = 7) => {
+  const i = e.trim();
+  if (!i) return i;
+  const l = i.lastIndexOf(".");
+  if (l <= 0 || l === i.length - 1)
+    return i;
+  const c = i.slice(l + 1), x = i.slice(0, l).replace(/[@.]/g, "").slice(0, r), w = "*".repeat(o);
+  return `${x}${w}${c}`;
+}, Kt = (e) => e.toString().padStart(16, "0").replace(/(\d{4})(?=\d)/g, "$1 "), Qt = async (e) => {
+  try {
+    await navigator.clipboard.writeText(e), console.log("Скопировано в буфер обмена");
+  } catch (r) {
+    console.error("Ошибка копирования:", r);
+  }
+}, er = s.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`, tr = s(v)`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, Jr = ({ email: e }) => /* @__PURE__ */ t.jsxs(er, { children: [
+  /* @__PURE__ */ t.jsx(dt, {}),
+  /* @__PURE__ */ t.jsx(tr, { variant: "body-m-semibold", children: Jt(e) })
+] }), pe = {
+  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 }
+}, rr = $.button`
+  ${({ $size: e }) => g`
+    min-width: ${pe[e].minWidth}px;
+    height: ${pe[e].height}px;
+    padding: 0 ${pe[e].paddingX}px;
+    font-size: ${pe[e].fontSize}px;
+    line-height: ${pe[e].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: e, $active: r }) => r ? e.colors.primary.darkBlue : e.colors.gray.darkGray};
+  transition: color 120ms ease;
+  padding-bottom: 25px;
+  &::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: ${({ $active: e }) => e ? 2 : 1}px;
+    background: ${({ theme: e, $active: r }) => r ? e.colors.primary.primaryBlue : e.colors.gray.lightGray2};
+    transition: height 120ms ease, background 120ms ease;
+  }
+
+  &:hover:not(:disabled) {
+    color: ${({ theme: e }) => e.colors.primary.darkBlue2};
+
+    &::after {
+      height: 2px;
+      background: ${({ theme: e }) => e.colors.primary.hoverBlue};
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 -2px 0 ${({ theme: e }) => e.colors.primary.hoverBlue};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({ theme: e }) => e.colors.gray.darkGray + "80"};
+    &::after {
+      background: ${({ theme: e }) => e.colors.gray.lightGray2};
+    }
+  }
+`, or = $.div`
+  display: flex;
+  box-shadow: inset 0 -1px 0 ${({ theme: e }) => e.colors.gray.lightGray2};
+`, nr = ({
+  id: e,
+  label: r,
+  active: o = !1,
+  disabled: i = !1,
+  size: l = "m",
+  onSelect: c,
+  className: d
+}) => {
+  const x = L(() => {
+    i || c?.(e);
+  }, [i, e, c]);
+  return /* @__PURE__ */ t.jsx(
+    rr,
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": o,
+      "aria-disabled": i,
+      disabled: i,
+      $size: l,
+      $active: o,
+      className: d,
+      onClick: x,
+      children: r
+    }
+  );
+}, Kr = ({
+  size: e = "m",
+  activeId: r,
+  items: o,
+  onChange: i,
+  className: l
+}) => {
+  const c = L(
+    (d) => {
+      i(d);
+    },
+    [i]
+  );
+  return /* @__PURE__ */ t.jsx(or, { role: "tablist", className: l, children: o.map((d) => /* @__PURE__ */ t.jsx(
+    nr,
+    {
+      ...d,
+      size: e,
+      active: d.id === r,
+      onSelect: c
+    },
+    d.id
+  )) });
+}, ir = $.table`
+  width: 100%;
+  border-collapse: collapse;
+  overflow: hidden;
+`, He = $.tr`
+  &:nth-child(2n) {
+    background: ${({ theme: e }) => e.colors.gray.lightBlueGray};
+  }
+`, ar = $(v).attrs({
+  forwardedAs: "td",
+  variant: "body-m"
+})`
+  display: table-cell;
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+  padding: 16px 14px;
+  &:first-child {
+    border-radius: 10px 0 0 10px;
+  }
+  &:last-child {
+    border-radius: 0 10px 10px 0;
+  }
+`, lr = $(v).attrs({
+  forwardedAs: "th",
+  variant: "body-s"
+})`
+  display: table-cell;
+  color: ${({ theme: e }) => e.colors.gray.darkGray2};
+  padding: 16px 14px;
+`, sr = $.tbody``, cr = $.thead``, Qr = ({ columns: e, data: r }) => /* @__PURE__ */ t.jsxs(ir, { children: [
+  /* @__PURE__ */ t.jsx(cr, { children: /* @__PURE__ */ t.jsx(He, { children: e.map((o) => /* @__PURE__ */ t.jsx(
+    lr,
+    {
+      width: o.width,
+      align: o.align || "left",
+      children: o.name
+    },
+    o.id
+  )) }) }),
+  /* @__PURE__ */ t.jsx(sr, { children: r.map((o) => /* @__PURE__ */ t.jsx(He, { children: e.map((i) => /* @__PURE__ */ t.jsx(
+    ar,
+    {
+      width: i.width,
+      align: i.align || "left",
+      children: i.render ? i.render(o) : o[i.id]
+    },
+    i.id
+  )) }, o.id)) })
+] }), dr = s.div`
+  display: inline-flex;
+`, pr = s.button`
+  position: relative;
+  width: 56px;
+  height: 26px;
+  padding: 4px;
+  border: none;
+  border-radius: 22px;
+  background: ${({ $checked: e, theme: r }) => e ? r.colors.primary.primaryBlue : r.colors.gray.darkGray2};
+  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: e, theme: r }) => e ? r.colors.primary.hoverBlue : r.colors.gray.darkGray};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: ${({ theme: e }) => e.colors.gray.darkGray};
+  }
+`, ur = s.span`
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: ${({ $disabled: e, theme: r }) => e ? r.colors.primary.darkBlue2 : "#ffffff"};
+  box-shadow: ${({ $disabled: e }) => e ? "none" : "0 3px 6px rgba(0, 0, 0, 0.25)"};
+  transform: translate(${({ $checked: e }) => e ? "30px" : "0"}, -50%);
+  transition: transform 180ms ease, background 150ms ease, box-shadow 150ms ease;
+`, eo = ({
+  checked: e,
+  defaultChecked: r = !1,
+  disabled: o = !1,
+  onChange: i,
+  id: l,
+  className: c
+}) => {
+  const d = we(), x = l ?? d, w = e !== void 0, [b, j] = W(r), y = w ? e : b, S = L(() => {
+    if (o) return;
+    const k = !y;
+    w || j(k), i?.(k);
+  }, [y, w, o, i]), T = L(
+    (k) => {
+      (k.key === "Enter" || k.key === " ") && (k.preventDefault(), S());
+    },
+    [S]
+  );
+  return /* @__PURE__ */ t.jsx(dr, { className: c, children: /* @__PURE__ */ t.jsx(
+    pr,
+    {
+      id: x,
+      role: "switch",
+      "aria-checked": y,
+      "aria-disabled": o,
+      tabIndex: o ? -1 : 0,
+      onClick: S,
+      onKeyDown: T,
+      disabled: o,
+      $checked: y,
+      children: /* @__PURE__ */ t.jsx(ur, { $checked: y, $disabled: o })
+    }
+  ) });
+}, hr = $.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+`, xr = $.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`, fr = $.span`
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  border: 1px solid ${({ theme: e }) => e.colors.gray.lightGray3};
+  background-color: ${({ theme: e }) => e.colors.primary.white};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 140ms ease, border-color 140ms ease;
+
+  ${({ $checked: e, theme: r }) => e && g`
+      border-color: ${r.colors.primary.primaryBlue};
+      background-color: ${r.colors.primary.primaryBlue};
+    `}
+
+  ${({ $checked: e, $disabled: r, theme: o }) => !r && !e && g`
+      &:hover {
+        border-color: ${o.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $checked: e, $disabled: r, theme: o }) => !r && e && g`
+      &:hover {
+        border-color: ${o.colors.primary.hoverBlue};
+        background-color: ${o.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $disabled: e, theme: r }) => e && g`
+      border-color: ${r.colors.gray.lightGray2};
+      background-color: ${r.colors.gray.lightGray};
+    `}
+`, gr = $.svg`
+  width: 12px;
+  height: 9px;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: opacity 120ms ease;
+  stroke: ${({ theme: e }) => e.colors.primary.white};
+`, to = ({
+  checked: e,
+  defaultChecked: r = !1,
+  disabled: o = !1,
+  name: i,
+  value: l,
+  onChange: c,
+  className: d
+}) => {
+  const x = we(), w = e !== void 0, [b, j] = W(r), y = w ? e : b, S = L(
+    (T) => {
+      o || (w || j(T.target.checked), c?.(T.target.checked));
+    },
+    [o, w, c]
+  );
+  return /* @__PURE__ */ t.jsxs(hr, { htmlFor: x, disabled: o, className: d, children: [
+    /* @__PURE__ */ t.jsx(
+      xr,
+      {
+        id: x,
+        type: "checkbox",
+        checked: y,
+        disabled: o,
+        onChange: S,
+        name: i,
+        value: l
+      }
+    ),
+    /* @__PURE__ */ t.jsx(fr, { $checked: y, $disabled: o, children: y && /* @__PURE__ */ t.jsx(gr, { viewBox: "0 0 15 11", children: /* @__PURE__ */ t.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"
+      }
+    ) }) })
+  ] });
+}, mr = s.div`
+  display: flex;
+  column-gap: 10px;
+  row-gap: 12px;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  ${({ theme: e }) => e.media.maxWidth.tablet} {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  ${({ theme: e }) => e.media.maxWidth.mobile} {
+    flex-direction: column;
+  }
+`, br = s(v).attrs({
+  forwardedAs: "p",
+  variant: "body-s-semibold"
+})`
+  white-space: nowrap;
+  color: ${({ theme: e }) => e.colors.gray.darkGray};
+`, Ae = s.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+`, yr = s(v).attrs({
+  forwardedAs: "p",
+  variant: "body-m-semibold"
+})`
+  margin: 0;
+  white-space: nowrap;
+  color: ${({ theme: e }) => `${e.colors.primary.darkBlue}`};
+`, ro = ({
+  label: e,
+  statusValue: r,
+  withdraw: o,
+  info: i
+}) => /* @__PURE__ */ t.jsxs(mr, { children: [
+  /* @__PURE__ */ t.jsxs(Ae, { children: [
+    /* @__PURE__ */ t.jsx(br, { children: e }),
+    i && /* @__PURE__ */ t.jsx(qt, { content: i, children: /* @__PURE__ */ t.jsx(Pe, { size: 18 }) })
+  ] }),
+  /* @__PURE__ */ t.jsxs(Ae, { children: [
+    ["number", "string"].includes(typeof r) && /* @__PURE__ */ t.jsx(yr, { children: r }),
+    !["number", "string"].includes(typeof r) && r,
+    o && /* @__PURE__ */ t.jsx(ht, { size: 18 })
+  ] })
+] }), wr = s.div`
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 22px;
+  ${({ $variant: e }) => {
+  switch (e) {
+    case "secondary":
+      return g`
+          padding: 24px;
+          background: #f5f5f5;
+        `;
+    case "primary":
+    default:
+      return g`
+          padding: 24px 20px;
+          background: ${({ theme: r }) => r.colors.primary.white};
+          border: 1px solid ${({ theme: r }) => r.colors.gray.lightGray2};
+        `;
+  }
+}}
+
+  border-radius: 6px;
+  ${({ theme: e }) => e.media.maxWidth.tablet} {
+    width: 100%;
+    flex-direction: column;
+    gap: 18px;
+    padding: 18px 20px;
+  }
+  ${({ theme: e }) => e.media.maxWidth.mobile} {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px 20px;
+  }
+`, vr = s.div`
+  display: flex;
+  gap: 56px;
+  width: fit-content;
+  ${({ theme: e }) => e.media.maxWidth.tablet} {
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+  }
+  ${({ theme: e }) => e.media.maxWidth.mobile} {
+    flex-direction: column;
+    gap: 8px;
+  }
+`, $r = s.div`
+  display: flex;
+  gap: 22px;
+  width: fit-content;
+  ${({ theme: e }) => e.media.maxWidth.tablet} {
+    width: 100%;
+    gap: 20px;
+  }
+`, oo = ({
+  children: e,
+  actions: r,
+  variant: o = "primary"
+}) => /* @__PURE__ */ t.jsxs(wr, { $variant: o, children: [
+  /* @__PURE__ */ t.jsx(vr, { children: e }),
+  r && /* @__PURE__ */ t.jsx($r, { children: r })
+] }), kr = s.div`
+  display: flex;
+  column-gap: 10px;
+  row-gap: 12px;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  ${({ theme: e }) => e.media.maxWidth.tablet} {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  ${({ theme: e }) => e.media.maxWidth.mobile} {
+    flex-direction: column;
+  }
+`, jr = s(v).attrs({
+  forwardedAs: "p",
+  variant: "body-s-semibold"
+})`
+  margin: 0;
+  white-space: nowrap;
+  color: ${({ theme: e }) => e.colors.gray.darkGray};
+`, Le = s.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+`, Cr = s(v).attrs({
+  forwardedAs: "p",
+  variant: "body-m-semibold"
+})`
+  white-space: nowrap;
+  margin: 0;
+  ${({ $type: e, theme: r }) => {
+  switch (e) {
+    case "success":
+      return `
+          color: ${r.colors.accent.green};
+        `;
+    case "pending":
+      return `
+          color: ${r.colors.primary.darkBlue};
+        `;
+    case "warning":
+      return `
+          color: ${r.colors.accent.orange};
+        `;
+  }
+}}
+`, no = ({
+  label: e,
+  statusValue: r,
+  type: o
+}) => {
+  const i = ve(() => {
+    switch (o) {
+      case "success":
+        return /* @__PURE__ */ t.jsx(De, { size: 18 });
+      case "warning":
+        return /* @__PURE__ */ t.jsx(ut, { size: 18 });
+      case "pending":
+      default:
+        return /* @__PURE__ */ t.jsx(Me, { size: 18 });
+    }
+  }, [o]);
+  return /* @__PURE__ */ t.jsxs(kr, { children: [
+    /* @__PURE__ */ t.jsx(Le, { children: /* @__PURE__ */ t.jsx(jr, { children: e }) }),
+    /* @__PURE__ */ t.jsxs(Le, { children: [
+      i,
+      /* @__PURE__ */ t.jsx(Cr, { $type: o, children: r })
+    ] })
+  ] });
+}, Sr = s.tr`
+  position: relative;
+`, Se = s.td`
+  padding: 14px 16px;
+  border-collapse: separate;
+  border-spacing: 0;
+  white-space: nowrap;
+  background: ${({ theme: e }) => e.colors.gray.lightBlueGray};
+`, Er = s.td`
+  background: ${({ theme: e }) => e.colors.gray.lightBlueGray};
+`, io = ({
+  valueLabel: e,
+  count: r,
+  amount: o,
+  actions: i
+}) => /* @__PURE__ */ t.jsxs(Sr, { children: [
+  /* @__PURE__ */ t.jsx(Se, { children: e }),
+  /* @__PURE__ */ t.jsx(Se, { children: r }),
+  /* @__PURE__ */ t.jsx(Se, { children: o }),
+  /* @__PURE__ */ t.jsx(Er, { children: i })
+] }), Tr = $.div`
+  display: grid;
+  grid-template-columns: ${({ $longname: e, $shortname: r, $network: o, $icon: i }) => `
+    ${i ? "auto" : ""}
+    ${e || o ? "1fr" : ""}
+    ${r ? "auto" : ""}
+  `};
+  grid-template-areas: ${({ $network: e, $icon: r }) => `
+  "${r ? "icon " : ""}longname shortname"
+    ${e ? `"${r ? "." : ""} network ."` : ""}
+  `};
+  width: 100%;
+  column-gap: 10px;
+  align-items: center;
+`, Rr = $(v).attrs({
+  variant: "body-m-bold"
+})`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+  grid-area: longname;
+`, Br = $(v).attrs({
+  variant: "body-m"
+})`
+  color: ${({ theme: e }) => e.colors.gray.darkGray};
+  grid-area: shortname;
+`, Hr = $(v).attrs({
+  variant: "body-s"
+})`
+  color: ${({ theme: e }) => e.colors.gray.darkGray2};
+  grid-area: network;
+`, Ar = ({
+  icon: e,
+  network: r,
+  longName: o,
+  shortName: i
+}) => /* @__PURE__ */ t.jsxs(
+  Tr,
+  {
+    $icon: !!e,
+    $longname: !!o,
+    $shortname: !!i,
+    $network: !!r,
+    children: [
+      e,
+      /* @__PURE__ */ t.jsx(Rr, { children: o }),
+      i && /* @__PURE__ */ t.jsx(Br, { children: i }),
+      r && /* @__PURE__ */ t.jsx(Hr, { children: r })
+    ]
+  }
+), Lr = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px;
+  background: ${({ theme: e }) => e.colors.gray.lightBlueGray};
+  border-radius: 10px;
+  gap: 14px;
+`, zr = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 10px;
+  width: 100%;
+`, ze = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0px;
+  width: 100%;
+`, We = s(v).attrs({
+  variant: "body-s"
+})`
+  color: ${({ theme: e }) => e.colors.gray.darkGray};
+`, _e = s(v).attrs({
+  variant: "body-m-bold"
+})`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, ao = ({
+  longName: e,
+  shortName: r,
+  network: o,
+  icon: i,
+  buyLabel: l,
+  sellLabel: c,
+  buyValue: d,
+  sellValue: x
+}) => /* @__PURE__ */ t.jsxs(Lr, { children: [
+  /* @__PURE__ */ t.jsx(
+    Ar,
+    {
+      longName: e,
+      shortName: r,
+      network: o,
+      icon: i
+    }
+  ),
+  (d || x) && /* @__PURE__ */ t.jsxs(zr, { children: [
+    d && /* @__PURE__ */ t.jsxs(ze, { children: [
+      /* @__PURE__ */ t.jsx(We, { children: l }),
+      /* @__PURE__ */ t.jsx(_e, { children: d })
+    ] }),
+    x && /* @__PURE__ */ t.jsxs(ze, { children: [
+      /* @__PURE__ */ t.jsx(We, { children: c }),
+      /* @__PURE__ */ t.jsx(_e, { children: x })
+    ] })
+  ] })
+] }), Wr = s.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: e }) => e.media.maxWidth.tablet} {
+    grid-template-columns: 1fr 1fr;
+    padding: 18px 20px;
+  }
+  ${({ theme: e }) => e.media.maxWidth.mobile} {
+    padding: 16px 14px;
+    grid-template-columns: auto;
+    row-gap: 8px;
+    & > *:not(:nth-child(2n)) {
+      margin-top: 4px;
+    }
+  }
+`, ge = s(v).attrs({
+  variant: "body-m",
+  forwardedAs: "p"
+})`
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, me = s(v).attrs({
+  variant: "body-m-bold",
+  forwardedAs: "p"
+})`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, _r = s.button`
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+`, Ir = ({ text: e, size: r = 18 }) => {
+  const [o, i] = W(!1), l = Z(null);
+  ye(() => (o && (l.current = setTimeout(() => {
+    i(!1);
+  }, 1500)), () => {
+    l.current && clearTimeout(l.current);
+  }), [o]);
+  const c = async () => {
+    await Qt(e), i(!0);
+  };
+  return /* @__PURE__ */ t.jsx(_r, { onClick: c, children: o ? /* @__PURE__ */ t.jsx(lt, { size: r }) : /* @__PURE__ */ t.jsx(pt, { size: r }) });
+}, lo = ({
+  cardHolderLabel: e,
+  cardHolderName: r,
+  cardNumberLabel: o,
+  cardNumber: i,
+  merchantLabel: l,
+  merchantName: c,
+  descriptionLabel: d,
+  description: x
+}) => /* @__PURE__ */ t.jsxs(Wr, { children: [
+  /* @__PURE__ */ t.jsx(ge, { children: e }),
+  /* @__PURE__ */ t.jsx(me, { children: r }),
+  /* @__PURE__ */ t.jsx(ge, { children: o }),
+  /* @__PURE__ */ t.jsxs(me, { children: [
+    i && Kt(i),
+    i && /* @__PURE__ */ t.jsx(Ir, { text: i.toString() })
+  ] }),
+  /* @__PURE__ */ t.jsx(ge, { children: l }),
+  /* @__PURE__ */ t.jsx(me, { children: c }),
+  /* @__PURE__ */ t.jsx(ge, { children: d }),
+  /* @__PURE__ */ t.jsx(me, { children: x })
+] }), Or = s.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-between;
+`, Mr = s(v).attrs({
+  forwardedAs: "p",
+  variant: "body-m-semibold"
+})`
+  margin: 0;
+  flex: 1 1 auto;
+  color: ${({ theme: e }) => e.colors.gray.darkGray};
+`, Pr = s.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+`, Dr = s(v).attrs({
+  forwardedAs: "p",
+  variant: "body-s-semibold"
+})`
+  margin: 0;
+  color: ${({ theme: e }) => e.colors.primary.darkBlue};
+`, so = ({
+  label: e,
+  statusValue: r,
+  type: o
+}) => {
+  const i = ve(() => {
+    switch (o) {
+      case "success":
+        return /* @__PURE__ */ t.jsx(De, { size: 18 });
+      case "pending":
+      default:
+        return /* @__PURE__ */ t.jsx(Me, { size: 18 });
+    }
+  }, [o]);
+  return /* @__PURE__ */ t.jsxs(Or, { children: [
+    /* @__PURE__ */ t.jsx(Mr, { children: e }),
+    /* @__PURE__ */ t.jsxs(Pr, { children: [
+      i,
+      /* @__PURE__ */ t.jsx(Dr, { children: r })
+    ] })
+  ] });
+};
+export {
+  ro as ApplicationData,
+  oo as ApplicationInfo,
+  no as ApplicationStatus,
+  io as BalanceRow,
+  tt as Button,
+  to as Checkbox,
+  Yr as Container,
+  Nr as CopyTooltip,
+  Zr as Counter,
+  Ar as CurrencyName,
+  ao as CurrencyRate,
+  Xr as HamburgerButton,
+  Vr as Informer,
+  Ur as Loader,
+  qr as RadioButton,
+  lo as Requisites,
+  Gt as SelectField,
+  eo as Switcher,
+  Kr as TabList,
+  Qr as Table,
+  $t as TextField,
+  qt as Tooltip,
+  so as TransactionStatus,
+  v as Typography,
+  Jr as UserAccount,
+  Qt as copyToClipboard,
+  Kt as formatCardNumber,
+  Jt as maskEmail
+};