@multiversx/sdk-dapp-liquidity 0.2.0-alpha.1

package/reactjs/components/TrimAddress/TrimAddress.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const TrimAddress = ({
+  address,
+  startLength = 4,
+  endLength = 5,
+  className = ""
+}) => {
+  if (!address) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `liq-truncate liq-text-left liq-text-neutral-100 uppercase liq-flex liq-gap-1 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: address.slice(0, startLength) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "..." }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: address.slice(-endLength) })
+      ]
+    }
+  );
+};
+exports.TrimAddress = TrimAddress;

package/reactjs/components/TrimAddress/TrimAddress.mjs

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const TrimAddress = ({
+  address,
+  startLength = 4,
+  endLength = 5,
+  className = ""
+}) => {
+  if (!address) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `liq-truncate liq-text-left liq-text-neutral-100 uppercase liq-flex liq-gap-1 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: address.slice(0, startLength) }),
+        /* @__PURE__ */ jsx("span", { children: "..." }),
+        /* @__PURE__ */ jsx("span", { children: address.slice(-endLength) })
+      ]
+    }
+  );
+};
+export {
+  TrimAddress
+};

package/reactjs/components/TrimAddress/index.d.ts

@@ -0,0 +1 @@
+export * from './TrimAddress';

package/reactjs/components/TrimAddress/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_TrimAddress_TrimAddress = require("./TrimAddress.js");
+exports.TrimAddress = reactjs_components_TrimAddress_TrimAddress.TrimAddress;

package/reactjs/components/TrimAddress/index.mjs

@@ -0,0 +1,4 @@
+import { TrimAddress } from "./TrimAddress.mjs";
+export {
+  TrimAddress
+};

package/reactjs/components/base/MxButton/MxButton.d.ts

@@ -0,0 +1,13 @@
+import { HTMLProps } from 'react';
+
+export type MxButtonSizeType = 'xs' | 'sm' | 'md' | 'lg';
+export type MxButtonVariantType = 'primary' | 'primary-300' | 'primary-50' | 'success' | 'danger' | 'danger-600' | 'neutral-400' | 'neutral-600' | 'neutral-700' | 'neutral-750' | 'neutral-800' | 'neutral-850' | 'link-neutral-100' | 'link-neutral-200' | 'link-neutral-300' | 'link-neutral-400' | 'link-neutral-500' | 'link-primary-300' | 'transparent' | 'translucent';
+interface MxButtonType extends HTMLProps<HTMLButtonElement> {
+    isLoading?: boolean;
+    isProcessing?: boolean;
+    btnSize?: MxButtonSizeType;
+    variant?: MxButtonVariantType;
+    type?: HTMLButtonElement['type'];
+}
+export declare const MxButton: ({ children, disabled, isLoading, isProcessing, className, btnSize, type, variant, ...rest }: MxButtonType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/reactjs/components/base/MxButton/MxButton.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
+const MxButton = ({
+  children,
+  disabled,
+  isLoading,
+  isProcessing,
+  className = "",
+  btnSize = "md",
+  type = "button",
+  variant = "transparent",
+  ...rest
+}) => {
+  const disabledText = isLoading ? "Loading..." : isProcessing ? "Processing..." : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      disabled: disabled || isLoading || isProcessing,
+      className: reactjs_utils_mxClsx.mxClsx(
+        // base style
+        "focus-primary liq-rounded-xl liq-font-semibold liq-transition-colors liq-duration-200 disabled:liq-opacity-50",
+        // normal btn
+        {
+          "liq-bg-primary liq-text-primary-50 hover:enabled:liq-bg-primary-700/80": variant === "primary",
+          "liq-bg-primary-300 liq-text-primary-950 hover:enabled:liq-bg-primary-200": variant === "primary-300",
+          "liq-bg-primary-50 liq-text-primary-950 hover:enabled:liq-bg-primary-200": variant === "primary-50",
+          "liq-bg-success-700 liq-text-success-50 hover:enabled:liq-bg-success-600": variant === "success",
+          "liq-bg-danger liq-text-danger-50 hover:enabled:liq-bg-danger-300": variant === "danger",
+          "liq-bg-danger-600 liq-text-danger-50 hover:enabled:liq-bg-danger-500": variant === "danger-600",
+          "liq-bg-neutral-400 liq-text-neutral-50 hover:enabled:liq-bg-neutral-300": variant === "neutral-400",
+          "liq-bg-neutral-600 liq-text-neutral-50 hover:enabled:liq-bg-neutral-500": variant === "neutral-600",
+          "liq-bg-neutral-700 liq-text-neutral-50 hover:enabled:liq-bg-neutral-600": variant === "neutral-700",
+          "liq-bg-neutral-750 liq-text-neutral-50 hover:enabled:liq-bg-neutral-650": variant === "neutral-750",
+          "liq-bg-neutral-800 liq-text-neutral-50 hover:enabled:liq-bg-neutral-700": variant === "neutral-800",
+          "liq-bg-neutral-850 liq-text-neutral-50 hover:enabled:liq-bg-neutral-750": variant === "neutral-850",
+          "liq-bg-white/5 liq-text-neutral-50 hover:enabled:liq-bg-white/10": variant === "translucent"
+        },
+        // link btn
+        {
+          "liq-text-neutral-100 hover:enabled:liq-text-white": variant === "link-neutral-100",
+          "liq-text-neutral-200 hover:enabled:liq-text-white": variant === "link-neutral-200",
+          "liq-text-neutral-300 hover:enabled:liq-text-white": variant === "link-neutral-300",
+          "liq-text-neutral-400 hover:enabled:liq-text-white": variant === "link-neutral-400",
+          "liq-text-neutral-500 hover:enabled:liq-text-white": variant === "link-neutral-500",
+          "liq-text-primary-300 hover:enabled:liq-text-white": variant === "link-primary-300"
+        },
+        {
+          "liq-border liq-border-neutral-750 liq-bg-transparent hover:enabled:liq-bg-neutral-800": variant === "transparent"
+        },
+        // size
+        {
+          "liq-px-2 liq-py-1 liq-text-xs": btnSize === "xs",
+          "liq-px-2 liq-py-1": btnSize === "sm",
+          "liq-px-4 liq-py-2": btnSize === "md",
+          "liq-px-8 liq-py-3": btnSize === "lg"
+        },
+        // external
+        className
+      ),
+      children: [
+        disabledText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-animate-pulse", children: disabledText }),
+        !disabledText && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+      ]
+    }
+  );
+};
+exports.MxButton = MxButton;

package/reactjs/components/base/MxButton/MxButton.mjs

@@ -0,0 +1,71 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { mxClsx } from "../../../utils/mxClsx.mjs";
+const MxButton = ({
+  children,
+  disabled,
+  isLoading,
+  isProcessing,
+  className = "",
+  btnSize = "md",
+  type = "button",
+  variant = "transparent",
+  ...rest
+}) => {
+  const disabledText = isLoading ? "Loading..." : isProcessing ? "Processing..." : void 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      disabled: disabled || isLoading || isProcessing,
+      className: mxClsx(
+        // base style
+        "focus-primary liq-rounded-xl liq-font-semibold liq-transition-colors liq-duration-200 disabled:liq-opacity-50",
+        // normal btn
+        {
+          "liq-bg-primary liq-text-primary-50 hover:enabled:liq-bg-primary-700/80": variant === "primary",
+          "liq-bg-primary-300 liq-text-primary-950 hover:enabled:liq-bg-primary-200": variant === "primary-300",
+          "liq-bg-primary-50 liq-text-primary-950 hover:enabled:liq-bg-primary-200": variant === "primary-50",
+          "liq-bg-success-700 liq-text-success-50 hover:enabled:liq-bg-success-600": variant === "success",
+          "liq-bg-danger liq-text-danger-50 hover:enabled:liq-bg-danger-300": variant === "danger",
+          "liq-bg-danger-600 liq-text-danger-50 hover:enabled:liq-bg-danger-500": variant === "danger-600",
+          "liq-bg-neutral-400 liq-text-neutral-50 hover:enabled:liq-bg-neutral-300": variant === "neutral-400",
+          "liq-bg-neutral-600 liq-text-neutral-50 hover:enabled:liq-bg-neutral-500": variant === "neutral-600",
+          "liq-bg-neutral-700 liq-text-neutral-50 hover:enabled:liq-bg-neutral-600": variant === "neutral-700",
+          "liq-bg-neutral-750 liq-text-neutral-50 hover:enabled:liq-bg-neutral-650": variant === "neutral-750",
+          "liq-bg-neutral-800 liq-text-neutral-50 hover:enabled:liq-bg-neutral-700": variant === "neutral-800",
+          "liq-bg-neutral-850 liq-text-neutral-50 hover:enabled:liq-bg-neutral-750": variant === "neutral-850",
+          "liq-bg-white/5 liq-text-neutral-50 hover:enabled:liq-bg-white/10": variant === "translucent"
+        },
+        // link btn
+        {
+          "liq-text-neutral-100 hover:enabled:liq-text-white": variant === "link-neutral-100",
+          "liq-text-neutral-200 hover:enabled:liq-text-white": variant === "link-neutral-200",
+          "liq-text-neutral-300 hover:enabled:liq-text-white": variant === "link-neutral-300",
+          "liq-text-neutral-400 hover:enabled:liq-text-white": variant === "link-neutral-400",
+          "liq-text-neutral-500 hover:enabled:liq-text-white": variant === "link-neutral-500",
+          "liq-text-primary-300 hover:enabled:liq-text-white": variant === "link-primary-300"
+        },
+        {
+          "liq-border liq-border-neutral-750 liq-bg-transparent hover:enabled:liq-bg-neutral-800": variant === "transparent"
+        },
+        // size
+        {
+          "liq-px-2 liq-py-1 liq-text-xs": btnSize === "xs",
+          "liq-px-2 liq-py-1": btnSize === "sm",
+          "liq-px-4 liq-py-2": btnSize === "md",
+          "liq-px-8 liq-py-3": btnSize === "lg"
+        },
+        // external
+        className
+      ),
+      children: [
+        disabledText && /* @__PURE__ */ jsx("span", { className: "liq-animate-pulse", children: disabledText }),
+        !disabledText && /* @__PURE__ */ jsx(Fragment, { children })
+      ]
+    }
+  );
+};
+export {
+  MxButton
+};

package/reactjs/components/base/MxButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MxButton';

package/reactjs/components/base/MxButton/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_base_MxButton_MxButton = require("./MxButton.js");
+exports.MxButton = reactjs_components_base_MxButton_MxButton.MxButton;

package/reactjs/components/base/MxButton/index.mjs

@@ -0,0 +1,4 @@
+import { MxButton } from "./MxButton.mjs";
+export {
+  MxButton
+};

package/reactjs/components/base/MxCard/MxCard.d.ts

@@ -0,0 +1,10 @@
+import { HTMLProps } from 'react';
+
+export type MxCardSizeType = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type MxCardVariantType = 'primary' | 'primary-300' | 'neutral-650' | 'neutral-750' | 'neutral-800' | 'neutral-850' | 'neutral-900' | 'transparent' | 'warning' | 'danger';
+interface MxCardType extends HTMLProps<HTMLDivElement> {
+    cardSize?: MxCardSizeType;
+    variant?: MxCardVariantType;
+}
+export declare const MxCard: import('react').ForwardRefExoticComponent<Omit<MxCardType, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/reactjs/components/base/MxCard/MxCard.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const require$$0 = require("react");
+const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
+const MxCard = require$$0.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      cardSize = "md",
+      className = "",
+      variant = "neutral-850",
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...rest,
+        className: reactjs_utils_mxClsx.mxClsx(
+          `liq-rounded-2xl liq-transition-colors liq-duration-200`,
+          {
+            "liq-bg-primary": variant === "primary",
+            "liq-bg-primary-300 liq-bg-opacity-5": variant === "primary-300"
+          },
+          {
+            "liq-bg-neutral-650/50": variant === "neutral-650",
+            "liq-bg-neutral-750/50": variant === "neutral-750",
+            "liq-bg-neutral-800/50": variant === "neutral-800",
+            "liq-bg-neutral-850/50": variant === "neutral-850",
+            "liq-bg-neutral-900/50": variant === "neutral-900"
+          },
+          {
+            "liq-border liq-border-neutral-750 liq-bg-transparent": variant === "transparent"
+          },
+          {
+            "liq-bg-warning liq-bg-opacity-5": variant === "warning",
+            "liq-bg-danger liq-bg-opacity-5": variant === "danger"
+          },
+          {
+            "liq-p-1": cardSize === "xs",
+            "liq-px-4 liq-py-1": cardSize === "sm",
+            "liq-p-4": cardSize === "md",
+            "liq-p-5 lg:liq-p-6": cardSize === "lg",
+            "liq-p-5 md:liq-p-10": cardSize === "xl"
+          },
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+exports.MxCard = MxCard;

package/reactjs/components/base/MxCard/MxCard.mjs

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { mxClsx } from "../../../utils/mxClsx.mjs";
+const MxCard = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      cardSize = "md",
+      className = "",
+      variant = "neutral-850",
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...rest,
+        className: mxClsx(
+          `liq-rounded-2xl liq-transition-colors liq-duration-200`,
+          {
+            "liq-bg-primary": variant === "primary",
+            "liq-bg-primary-300 liq-bg-opacity-5": variant === "primary-300"
+          },
+          {
+            "liq-bg-neutral-650/50": variant === "neutral-650",
+            "liq-bg-neutral-750/50": variant === "neutral-750",
+            "liq-bg-neutral-800/50": variant === "neutral-800",
+            "liq-bg-neutral-850/50": variant === "neutral-850",
+            "liq-bg-neutral-900/50": variant === "neutral-900"
+          },
+          {
+            "liq-border liq-border-neutral-750 liq-bg-transparent": variant === "transparent"
+          },
+          {
+            "liq-bg-warning liq-bg-opacity-5": variant === "warning",
+            "liq-bg-danger liq-bg-opacity-5": variant === "danger"
+          },
+          {
+            "liq-p-1": cardSize === "xs",
+            "liq-px-4 liq-py-1": cardSize === "sm",
+            "liq-p-4": cardSize === "md",
+            "liq-p-5 lg:liq-p-6": cardSize === "lg",
+            "liq-p-5 md:liq-p-10": cardSize === "xl"
+          },
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+export {
+  MxCard
+};

package/reactjs/components/base/MxCard/index.d.ts

@@ -0,0 +1 @@
+export * from './MxCard';

package/reactjs/components/base/MxCard/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_base_MxCard_MxCard = require("./MxCard.js");
+exports.MxCard = reactjs_components_base_MxCard_MxCard.MxCard;

package/reactjs/components/base/MxCard/index.mjs

@@ -0,0 +1,4 @@
+import { MxCard } from "./MxCard.mjs";
+export {
+  MxCard
+};

package/reactjs/components/base/MxLink/MxLink.d.ts

@@ -0,0 +1,10 @@
+import { LinkProps } from 'react-router-dom';
+
+export type MxLinkVariantType = 'primary-300' | 'green-300' | 'neutral-100' | 'neutral-200' | 'neutral-300' | 'neutral-400' | 'neutral-500' | 'neutral-750' | 'button-neutral-50' | 'button-neutral-600' | 'button-neutral-700' | 'button-neutral-750' | 'button-neutral-800' | 'button-neutral-850' | 'button-primary' | 'button-primary-300' | 'button-translucent';
+interface MxLinkType extends LinkProps {
+    disabled?: boolean;
+    showExternalIcon?: boolean;
+    variant?: MxLinkVariantType;
+}
+export declare const MxLink: import('react').ForwardRefExoticComponent<MxLinkType & import('react').RefAttributes<HTMLAnchorElement>>;
+export {};

package/reactjs/components/base/MxLink/MxLink.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faArrowUpRightFromSquare = require("@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const require$$0 = require("react");
+const reactRouterDom = require("react-router-dom");
+const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
+const MxLink = require$$0.forwardRef(
+  (props, ref) => {
+    const {
+      disabled,
+      children,
+      className,
+      showExternalIcon = true,
+      variant = "neutral-100",
+      ...rest
+    } = props;
+    const isExternal = Boolean(rest.target);
+    const rel = isExternal ? "noopener noreferrer nofollow" : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactRouterDom.Link,
+      {
+        ref,
+        ...rest,
+        ...rel ? { rel } : {},
+        className: reactjs_utils_mxClsx.mxClsx(
+          "focus-primary liq-rounded-xl liq-font-semibold liq-no-underline liq-transition-colors liq-duration-200",
+          {
+            "liq-text-primary-300 hover:liq-text-primary-200": variant === "primary-300",
+            "liq-text-green-300 hover:liq-text-green-200": variant === "green-300",
+            "liq-text-neutral-100 hover:liq-text-white": variant === "neutral-100",
+            "liq-text-neutral-200 hover:liq-text-white": variant === "neutral-200",
+            "liq-text-neutral-300 hover:liq-text-white": variant === "neutral-300",
+            "liq-text-neutral-400 hover:liq-text-white": variant === "neutral-400",
+            "liq-text-neutral-500 hover:liq-text-white": variant === "neutral-500",
+            "liq-text-neutral-750 hover:liq-text-white": variant === "neutral-750"
+          },
+          // button
+          {
+            "liq-bg-neutral-600 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-500": variant === "button-neutral-600",
+            "liq-bg-neutral-700 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-[#3B3D48] hover:liq-bg-opacity-80": variant === "button-neutral-700",
+            "liq-bg-neutral-750 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-650": variant === "button-neutral-750",
+            "liq-bg-neutral-800 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-700": variant === "button-neutral-800",
+            "liq-bg-neutral-850 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-800": variant === "button-neutral-850",
+            "liq-bg-primary liq-px-4 liq-py-2 liq-text-center hover:liq-bg-[#1E65E7] hover:liq-bg-opacity-80": variant === "button-primary",
+            "liq-bg-primary-300 liq-px-4 liq-py-2 liq-text-center liq-text-black hover:liq-bg-primary-200": variant === "button-primary-300",
+            "liq-bg-neutral-50 liq-px-4 liq-py-2 liq-text-center liq-text-black hover:liq-bg-opacity-80": variant === "button-neutral-50",
+            "liq-bg-white/5 liq-px-4 liq-py-2 liq-text-center liq-text-neutral-50 hover:liq-bg-white/10": variant === "button-translucent"
+          },
+          { "liq-flex liq-items-center": isExternal && showExternalIcon },
+          { "liq-pointer-events-none liq-opacity-50": disabled },
+          className
+        ),
+        children: [
+          children,
+          isExternal && showExternalIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            reactFontawesome.FontAwesomeIcon,
+            {
+              size: "sm",
+              icon: faArrowUpRightFromSquare.faArrowUpRightFromSquare,
+              className: "liq-ml-1"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.MxLink = MxLink;

package/reactjs/components/base/MxLink/MxLink.mjs

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { forwardRef } from "react";
+import { Link } from "react-router-dom";
+import { mxClsx } from "../../../utils/mxClsx.mjs";
+const MxLink = forwardRef(
+  (props, ref) => {
+    const {
+      disabled,
+      children,
+      className,
+      showExternalIcon = true,
+      variant = "neutral-100",
+      ...rest
+    } = props;
+    const isExternal = Boolean(rest.target);
+    const rel = isExternal ? "noopener noreferrer nofollow" : void 0;
+    return /* @__PURE__ */ jsxs(
+      Link,
+      {
+        ref,
+        ...rest,
+        ...rel ? { rel } : {},
+        className: mxClsx(
+          "focus-primary liq-rounded-xl liq-font-semibold liq-no-underline liq-transition-colors liq-duration-200",
+          {
+            "liq-text-primary-300 hover:liq-text-primary-200": variant === "primary-300",
+            "liq-text-green-300 hover:liq-text-green-200": variant === "green-300",
+            "liq-text-neutral-100 hover:liq-text-white": variant === "neutral-100",
+            "liq-text-neutral-200 hover:liq-text-white": variant === "neutral-200",
+            "liq-text-neutral-300 hover:liq-text-white": variant === "neutral-300",
+            "liq-text-neutral-400 hover:liq-text-white": variant === "neutral-400",
+            "liq-text-neutral-500 hover:liq-text-white": variant === "neutral-500",
+            "liq-text-neutral-750 hover:liq-text-white": variant === "neutral-750"
+          },
+          // button
+          {
+            "liq-bg-neutral-600 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-500": variant === "button-neutral-600",
+            "liq-bg-neutral-700 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-[#3B3D48] hover:liq-bg-opacity-80": variant === "button-neutral-700",
+            "liq-bg-neutral-750 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-650": variant === "button-neutral-750",
+            "liq-bg-neutral-800 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-700": variant === "button-neutral-800",
+            "liq-bg-neutral-850 liq-px-4 liq-py-2 liq-text-center hover:liq-bg-neutral-800": variant === "button-neutral-850",
+            "liq-bg-primary liq-px-4 liq-py-2 liq-text-center hover:liq-bg-[#1E65E7] hover:liq-bg-opacity-80": variant === "button-primary",
+            "liq-bg-primary-300 liq-px-4 liq-py-2 liq-text-center liq-text-black hover:liq-bg-primary-200": variant === "button-primary-300",
+            "liq-bg-neutral-50 liq-px-4 liq-py-2 liq-text-center liq-text-black hover:liq-bg-opacity-80": variant === "button-neutral-50",
+            "liq-bg-white/5 liq-px-4 liq-py-2 liq-text-center liq-text-neutral-50 hover:liq-bg-white/10": variant === "button-translucent"
+          },
+          { "liq-flex liq-items-center": isExternal && showExternalIcon },
+          { "liq-pointer-events-none liq-opacity-50": disabled },
+          className
+        ),
+        children: [
+          children,
+          isExternal && showExternalIcon && /* @__PURE__ */ jsx(
+            FontAwesomeIcon,
+            {
+              size: "sm",
+              icon: faArrowUpRightFromSquare,
+              className: "liq-ml-1"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  MxLink
+};

package/reactjs/components/base/MxLink/index.d.ts

@@ -0,0 +1 @@
+export * from './MxLink';

package/reactjs/components/base/MxLink/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_base_MxLink_MxLink = require("./MxLink.js");
+exports.MxLink = reactjs_components_base_MxLink_MxLink.MxLink;

package/reactjs/components/base/MxLink/index.mjs

@@ -0,0 +1,4 @@
+import { MxLink } from "./MxLink.mjs";
+export {
+  MxLink
+};

package/reactjs/components/base/MxSearch/MxSearch.d.ts

@@ -0,0 +1,10 @@
+interface MxSearchProps {
+    placeholder?: string;
+    iconsClassName?: string;
+    inputClassName?: string;
+    containerClassName?: string;
+    inputDefaultValue?: string;
+    onChange: (value: string) => void;
+}
+export declare const MxSearch: import('react').ForwardRefExoticComponent<MxSearchProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/reactjs/components/base/MxSearch/MxSearch.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faClose = require("@fortawesome/free-solid-svg-icons/faClose");
+const faSearch = require("@fortawesome/free-solid-svg-icons/faSearch");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const require$$0 = require("react");
+const reactjs_hooks_useDebounce = require("../../../hooks/useDebounce.js");
+const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
+const MxSearch = require$$0.forwardRef(
+  (props, ref) => {
+    const {
+      iconsClassName = "",
+      inputClassName = "",
+      containerClassName = "",
+      placeholder = "Search by name or symbol",
+      inputDefaultValue = "",
+      onChange
+    } = props;
+    const [inputValue, setInputValue] = require$$0.useState(inputDefaultValue);
+    const onDebounceInputChange = reactjs_hooks_useDebounce.useDebounce(inputValue, 200);
+    const onClear = () => setInputValue("");
+    require$$0.useEffect(() => onChange(onDebounceInputChange), [onDebounceInputChange]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `liq-relative liq-flex liq-flex-1 liq-items-center  ${containerClassName}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactFontawesome.FontAwesomeIcon,
+            {
+              icon: faSearch.faSearch,
+              className: reactjs_utils_mxClsx.mxClsx(
+                "liq-pointer-events-none liq-absolute liq-inset-4 liq-top-1/3 liq-h-4 liq-w-4 liq-items-center liq-text-neutral-300",
+                iconsClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              value: inputValue,
+              onChange: (val) => setInputValue(val.target.value),
+              placeholder,
+              className: reactjs_utils_mxClsx.mxClsx(
+                "focus-primary liq-text-medium placeholder:liq-font-medium liq-flex liq-w-full liq-gap-2 liq-rounded-xl liq-border liq-border-neutral-800 liq-bg-neutral-900 liq-px-11 liq-py-2 placeholder:liq-text-neutral-300",
+                inputClassName
+              ),
+              tabIndex: 1,
+              ref
+            }
+          ),
+          Boolean(inputValue) && /* @__PURE__ */ jsxRuntime.jsx(
+            reactFontawesome.FontAwesomeIcon,
+            {
+              icon: faClose.faClose,
+              onClick: onClear,
+              className: reactjs_utils_mxClsx.mxClsx(
+                "liq-absolute liq-inset-4 liq-left-auto liq-top-1/3 liq-h-4 liq-w-4 liq-cursor-pointer liq-items-center liq-text-neutral-300 liq-transition-colors liq-duration-200 hover:liq-text-neutral-400",
+                iconsClassName
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.MxSearch = MxSearch;