@getpara/react-sdk-lite 2.0.0-alpha.71 → 2.0.0-alpha.73

package/dist/modal/components/AddFunds/AddFundsSettings.js

@@ -6,13 +6,21 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
-import { CpslButton, CpslIcon, CpslInput, CpslRow, CpslText } from "@getpara/react-components";
-import { AssetIcon, HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
+import { CpslButton, CpslIcon, CpslRow, CpslText } from "@getpara/react-components";
+import {
+  AssetIcon,
+  contentMotionProps,
+  HeaderSelect,
+  HeaderSelectContainer,
+  HeaderSelectItem,
+  NetworkIcon
+} from "../common.js";
+import { QuantityInput } from "../QuantityInput.js";
 import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { safeStyled, getAssetCode, getNetworkName } from "@getpara/react-common";
-import { contentMotionProps, NoProviders } from "./common.js";
+import { NoProviders } from "./common.js";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { AddFundsAsset } from "./AddFundsAsset.js";
 function NetworkPill({
@@ -117,40 +125,7 @@ function AddFundsSettings() {
         ) : network ? /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, fix: true }) : null })
       ] }),
       /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "16px", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            value: value || "",
-            fitContent: true,
-            autoselect: true,
-            onKeyDown: (e) => {
-              if (!/^(\d|\.)$/.test(e.key) && !["Delete", "Backspace", "Tab", "Shift"].includes(e.key)) {
-                e.preventDefault();
-              }
-            },
-            onChange: (e) => {
-              var _a;
-              const numericValue = (((_a = e.currentTarget) == null ? void 0 : _a.value) || "").replace(/[^0-9.]/g, "");
-              if (numericValue !== "") {
-                const formattedValue = parseFloat(numericValue).toFixed(2);
-                setValue(formattedValue);
-              } else {
-                setValue(null);
-              }
-            },
-            onBlur: (e) => {
-              const numericValue = (e.currentTarget.value || "").replace(/[^0-9.]/g, "");
-              if (numericValue === "") {
-                setValue(null);
-              } else {
-                setValue(parseFloat(numericValue).toFixed(2));
-              }
-            },
-            placeholder: "0",
-            children: /* @__PURE__ */ jsx(CurrencySign, { slot: "start", children: "$" })
-          },
-          value || ""
-        ),
+        /* @__PURE__ */ jsx(QuantityInput, { value, onChange: setValue, symbol: "$" }),
         /* @__PURE__ */ jsx(CpslRow, { style: { width: "100%" }, children: ["25", "50", "100"].map((quantity) => {
           return /* @__PURE__ */ jsxs(PresetButton, { fullWidth: true, variant: "secondary", onClick: () => setValue(`${quantity}.00`), children: [
             "$",
@@ -206,12 +181,6 @@ const Container = safeStyled(motion.div)`
 const AssetContainer = safeStyled(Container)`
   gap: 8px;
 `;
-const CurrencySign = safeStyled.div`
-  font-size: 72px;
-  color: var(--cpsl-color-text-primary);
-  position: relative;
-  right: -16px;
-`;
 const PresetButton = safeStyled(CpslButton)`
   --button-color: var(--cpsl-color-text-contrast);
   --button-font-size: 24px;
@@ -222,15 +191,6 @@ const PresetButton = safeStyled(CpslButton)`
   --button-secondary-hover-border-color: var(--cpsl-color-background-16);
   flex: 1;
 `;
-const Input = safeStyled(CpslInput)`
-  --container-background-color: transparent;
-  --container-height: 90px;
-  --container-border-width: 0;
-  --input-background-color: transparent;
-  --input-font-size: 72px;
-  --input-text-align: center;
-  --input-width: 100%;
-`;
 export {
   AddFundsSettings
 };

package/dist/modal/components/AddFunds/common.d.ts

@@ -1,17 +1,3 @@
-export declare const contentMotionProps: {
-    transition: {
-        duration: number;
-    };
-    initial: {
-        opacity: number;
-    };
-    animate: {
-        opacity: number;
-    };
-    exit: {
-        opacity: number;
-    };
-};
 export declare const NoProviders: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, {

package/dist/modal/components/AddFunds/common.js

@@ -2,12 +2,6 @@
 import "../../../chunk-MMUBH76A.js";
 import { CpslText } from "@getpara/react-components";
 import { safeStyled } from "@getpara/react-common";
-const contentMotionProps = {
-  transition: { duration: 0.2 },
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 }
-};
 const NoProviders = safeStyled(CpslText)`
   width: 100%;
   text-align: center;
@@ -19,6 +13,5 @@ const NoProviders = safeStyled(CpslText)`
   transition: visibility 0.2s;
 `;
 export {
-  NoProviders,
-  contentMotionProps
+  NoProviders
 };

package/dist/modal/components/Body/Body.js

@@ -46,12 +46,10 @@ import { SwitchWalletsStep } from "../SwitchWalletsStep/SwitchWalletsStep.js";
 import { Footer } from "../Footer/Footer.js";
 import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
 import { AccountWallet } from "../Account/AccountWallet.js";
+import { AccountSend } from "../Account/AccountSend/index.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
-const PADDING_TOP = {
-  [ModalStep.TELEGRAM_OAUTH]: "36px"
-};
 const Body = ({
   oAuthMethods,
   twoFactorAuthEnabled,
@@ -217,6 +215,15 @@ const Body = ({
       case ModalStep.SWITCH_WALLETS: {
         return /* @__PURE__ */ jsx(SwitchWalletsStep, {});
       }
+      case ModalStep.ACCOUNT_SEND: {
+        return /* @__PURE__ */ jsx(AccountSend, { step: "SEND_FORM" });
+      }
+      case ModalStep.ACCOUNT_SEND_ASSET: {
+        return /* @__PURE__ */ jsx(AccountSend, { step: "SEND_ASSET" });
+      }
+      case ModalStep.ACCOUNT_SEND_NETWORK: {
+        return /* @__PURE__ */ jsx(AccountSend, { step: "SEND_NETWORK" });
+      }
       default: {
         if (IFrameSteps.includes(currentStep)) {
           return null;
@@ -276,7 +283,7 @@ const Body = ({
                     $step: currentStep,
                     $isIFrameStep: IFrameSteps.includes(currentStep),
                     children: [
-                      /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
+                      !IFrameSteps.includes(currentStep) && /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
                       Content(),
                       (onRampConfig == null ? void 0 : onRampConfig.testMode) && [
                         ModalStep.ADD_FUNDS_BUY,
@@ -298,7 +305,7 @@ const Body = ({
                 modalError && /* @__PURE__ */ jsx(WarningBanner, { onClose: () => setModalError(void 0), children: renderTextWithLinks(modalError) })
               ]
             },
-            ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
+            ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : ["ACCOUNT_SEND", "ACCOUNT_SEND_ASSET", "ACCOUNT_SEND_NETWORK"].includes(currentStep) ? "ACCOUNT_SEND" : currentStep
           )
         }
       ),
@@ -340,14 +347,7 @@ const InnerContainer = safeStyled.div`
 }};
 
   @media (max-width: ${MOBILE_SIZE}px) {
-    padding: ${({ $embeddedModal, $step, $isIFrameStep }) => {
-  var _a;
-  return $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : `${(_a = PADDING_TOP[$step]) != null ? _a : "72px"} 16px 0px`;
-}};
-  }
-
-  cpsl-auth-modal.force-mobile-media & {
-    padding: 72px 16px 0px;
+    padding: ${({ $embeddedModal, $isIFrameStep }) => $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : "0px"};
   }
 `;
 const TestModeAlert = safeStyled(CpslAlert)`

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -81,7 +81,10 @@ const useStepTitle = () => {
         [ModalStep.ADD_EX_WALLET_SELECTED]: "Add Wallet",
         [ModalStep.EXTERNAL_WALLET_VERIFICATION]: "Verify Wallet",
         [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up",
-        [ModalStep.ACCOUNT_WALLET]: (_a2 = profileWallet == null ? void 0 : profileWallet.displayName) != null ? _a2 : "Wallet Settings"
+        [ModalStep.ACCOUNT_WALLET]: (_a2 = profileWallet == null ? void 0 : profileWallet.displayName) != null ? _a2 : "Wallet Settings",
+        [ModalStep.ACCOUNT_SEND]: "Send",
+        [ModalStep.ACCOUNT_SEND_ASSET]: "Send",
+        [ModalStep.ACCOUNT_SEND_NETWORK]: "Send"
       };
     },
     [isLogin, chainId, hideWallets, authStepTitle]

package/dist/modal/components/IFrameStep/IFrameStep.js

@@ -63,7 +63,7 @@ const OuterContainer = safeStyled.div`
   justify-content: center;
 
   @media (max-width: ${MOBILE_SIZE}px) {
-    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 16px 0px"};
+    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "0px"};
   }
 `;
 const Container = safeStyled.div`

package/dist/modal/components/QuantityInput.d.ts

@@ -0,0 +1,9 @@
+export declare function QuantityInput({ value, onChange, onFocus, onBlur, placeholder, size, symbol, }: {
+    value: string | null;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange: (_: string | null) => void;
+    placeholder?: string;
+    size?: string;
+    symbol?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/QuantityInput.js

@@ -0,0 +1,91 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+function QuantityInput({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  size = "72px",
+  symbol
+}) {
+  return /* @__PURE__ */ jsxs(Container, { style: { fontSize: size, position: "relative" }, children: [
+    symbol && /* @__PURE__ */ jsx(CurrencySign, { slot: "start", children: symbol }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: value != null ? value : "",
+        onFocus: (e) => {
+          e.currentTarget.select();
+          onFocus == null ? void 0 : onFocus();
+        },
+        onKeyDown: (e) => {
+          if (!/^(\d|\.)$/.test(e.key) && !["Delete", "Backspace", "Tab", "Shift", "ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+            e.preventDefault();
+          }
+        },
+        onChange: (e) => {
+          const rawValue = e.currentTarget.value;
+          if (rawValue === "") {
+            onChange(null);
+            return;
+          }
+          const numericValue = rawValue.replace(/[^0-9.]/g, "");
+          if (numericValue === "") {
+            onChange(null);
+            return;
+          }
+          const isValidNumberFormat = /^\d*\.?\d*$/.test(numericValue);
+          if (isValidNumberFormat) {
+            onChange(numericValue);
+          } else {
+            onChange(null);
+          }
+        },
+        onBlur: (e) => {
+          const numericValue = (e.currentTarget.value || "").replace(/[^0-9.]/g, "");
+          if (numericValue === "") {
+            onChange(null);
+          } else {
+            const parsed = parseFloat(numericValue);
+            if (!isNaN(parsed)) {
+              onChange(parsed.toString());
+            } else {
+              onChange(null);
+            }
+          }
+          onBlur == null ? void 0 : onBlur();
+        },
+        placeholder: placeholder || "0"
+      }
+    )
+  ] });
+}
+const Container = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--cpsl-font-family);
+  color: var(--cpsl-color-text-primary);
+`;
+const CurrencySign = safeStyled.div`
+  position: relative;
+  left: 0px;
+`;
+const Input = safeStyled.input`
+  font-family: var(--cpsl-font-family);
+  font-size: inherit;
+  color: inherit;
+  background-color: transparent;
+  height: auto;
+  border-width: 0;
+  text-align: center;
+  width: 100%;
+  outline: none;
+  field-sizing: content;
+`;
+export {
+  QuantityInput
+};

package/dist/modal/components/SearchableButtonList.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+type AssetItem = {
+    key: string;
+    icon: ReactNode;
+    text: ReactNode;
+    textSecondary?: ReactNode;
+    endText?: ReactNode;
+    endTextSecondary?: ReactNode;
+};
+export declare const contentMotionProps: {
+    transition: {
+        duration: number;
+    };
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare function SearchableButtonList<T>({ items, transformItem, searchFilter, searchPlaceholder, onSelect, }: {
+    items: T[];
+    transformItem: (_: T) => AssetItem;
+    searchFilter?: (_: {
+        item: T;
+        searchStr: string;
+    }) => boolean;
+    searchPlaceholder?: string;
+    onSelect: (_: T) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/components/SearchableButtonList.js

@@ -0,0 +1,223 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as comp from "@getpara/react-components";
+import { safeStyled } from "@getpara/react-common";
+import { useState, useMemo, useRef, useEffect } from "react";
+import { GradientScroll } from "./common.js";
+import { AnimatePresence, motion } from "framer-motion";
+const contentMotionProps = {
+  transition: { duration: 0.2 },
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 }
+};
+const ESTIMATED_ITEM_HEIGHT = 72;
+const VISIBILITY_BUFFER = 3;
+function SearchableButtonList({
+  items,
+  transformItem,
+  searchFilter,
+  searchPlaceholder = "Search for an asset",
+  onSelect
+}) {
+  const [searchStr, setSearchStr] = useState("");
+  const outerContainerRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [renderedRange, setRenderedRange] = useState({ start: 0, end: 0 });
+  const transformedAndFiltered = useMemo(() => {
+    return items.filter((item) => !searchFilter || searchFilter({ item, searchStr })).map((item) => ({
+      assetItem: transformItem(item),
+      originalItem: item
+    }));
+  }, [items, searchFilter, searchStr, transformItem]);
+  useEffect(() => {
+    setRenderedRange({ start: 0, end: 0 });
+  }, [items, searchStr]);
+  const desiredRange = useMemo(() => {
+    if (containerHeight === 0) {
+      return { start: 0, end: transformedAndFiltered.length };
+    }
+    const startIndex = Math.max(0, Math.floor(scrollTop / ESTIMATED_ITEM_HEIGHT) - VISIBILITY_BUFFER);
+    const endIndex = Math.min(
+      transformedAndFiltered.length,
+      Math.ceil((scrollTop + containerHeight) / ESTIMATED_ITEM_HEIGHT) + VISIBILITY_BUFFER
+    );
+    return { start: startIndex, end: endIndex };
+  }, [scrollTop, containerHeight, transformedAndFiltered.length]);
+  useEffect(() => {
+    setRenderedRange((prev) => ({
+      start: Math.min(desiredRange.start, prev.start),
+      end: Math.max(desiredRange.end, prev.end)
+    }));
+  }, [desiredRange]);
+  const visibleRange = renderedRange;
+  const visibleItems = useMemo(() => {
+    return transformedAndFiltered.slice(visibleRange.start, visibleRange.end);
+  }, [transformedAndFiltered, visibleRange.start, visibleRange.end]);
+  useEffect(() => {
+    var _a, _b;
+    const container = (_b = (_a = scrollContainerRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
+    if (!container) return;
+    const updateDimensions = () => {
+      setContainerHeight(container.clientHeight);
+      setContentHeight(container.scrollHeight);
+    };
+    let scrollTimeout;
+    const handleScroll = () => {
+      if (scrollTimeout) {
+        cancelAnimationFrame(scrollTimeout);
+      }
+      scrollTimeout = requestAnimationFrame(() => {
+        setScrollTop(container.scrollTop);
+      });
+    };
+    updateDimensions();
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(container);
+    const contentDiv = scrollContainerRef.current;
+    if (contentDiv) {
+      const contentResizeObserver = new ResizeObserver(updateDimensions);
+      contentResizeObserver.observe(contentDiv);
+      return () => {
+        if (scrollTimeout) {
+          cancelAnimationFrame(scrollTimeout);
+        }
+        container.removeEventListener("scroll", handleScroll);
+        resizeObserver.disconnect();
+        contentResizeObserver.disconnect();
+      };
+    }
+    return () => {
+      if (scrollTimeout) {
+        cancelAnimationFrame(scrollTimeout);
+      }
+      container.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const paddingTop = visibleRange.start * ESTIMATED_ITEM_HEIGHT;
+  const paddingBottom = Math.max(0, (transformedAndFiltered.length - visibleRange.end) * ESTIMATED_ITEM_HEIGHT);
+  const MAX_CONTAINER_HEIGHT = 480;
+  useEffect(() => {
+    var _a, _b;
+    const container = (_b = (_a = scrollContainerRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
+    if (container) {
+      requestAnimationFrame(() => {
+        setContentHeight(container.scrollHeight);
+      });
+    }
+  }, [visibleRange.start, visibleRange.end, transformedAndFiltered.length]);
+  const outerContainerHeight = useMemo(() => {
+    if (contentHeight === 0) {
+      return MAX_CONTAINER_HEIGHT;
+    }
+    const searchInputHeight = items.length >= 4 && !!searchFilter ? 56 : 0;
+    const totalNeededHeight = contentHeight + searchInputHeight;
+    if (totalNeededHeight < MAX_CONTAINER_HEIGHT) {
+      return totalNeededHeight + 4;
+    }
+    return MAX_CONTAINER_HEIGHT;
+  }, [contentHeight, items.length, searchFilter]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: outerContainerRef,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: `${outerContainerHeight}px`,
+        maxHeight: `${MAX_CONTAINER_HEIGHT}px`,
+        overflow: "hidden"
+      },
+      children: [
+        items.length >= 4 && !!searchFilter && /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            placeholder: searchPlaceholder,
+            value: searchStr,
+            onCpslInput: (e) => {
+              setSearchStr(e.detail.value);
+            },
+            style: { marginBottom: "8px" },
+            children: /* @__PURE__ */ jsx(comp.CpslIcon, { icon: "search", slot: "start" })
+          }
+        ),
+        /* @__PURE__ */ jsx(GradientScroll, { height: "100%", gap: "8px", children: /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, children: /* @__PURE__ */ jsx(List, { style: { paddingTop, paddingBottom }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: visibleItems.map(({ assetItem, originalItem }) => {
+          const { key, icon, text, textSecondary, endText, endTextSecondary } = assetItem;
+          return /* @__PURE__ */ jsx(motion.li, __spreadProps(__spreadValues({ style: { width: "100%" } }, contentMotionProps), { children: /* @__PURE__ */ jsxs(AssetButton, { fullWidth: true, variant: "secondary", onClick: () => onSelect(originalItem), children: [
+            icon,
+            /* @__PURE__ */ jsxs(Info, { children: [
+              /* @__PURE__ */ jsx(Code, { color: "contrast", variant: "bodyL", children: text }),
+              textSecondary && /* @__PURE__ */ jsx(Name, { color: "contrast", variant: "bodyS", children: textSecondary })
+            ] }),
+            endText && /* @__PURE__ */ jsxs(End, { children: [
+              /* @__PURE__ */ jsx(EndText, { color: "primary", variant: "bodyM", children: endText }),
+              endTextSecondary && /* @__PURE__ */ jsx(EndTextSecondary, { color: "contrast", variant: "bodyS", children: endTextSecondary })
+            ] })
+          ] }) }), key);
+        }) }) }) }) })
+      ]
+    }
+  );
+}
+const List = safeStyled.ul`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+  list-style: none;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  margin: 0;
+`;
+const AssetButton = safeStyled(comp.CpslButton)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  --button-secondary-background-color: var(--cpsl-color-background-8);
+  --button-secondary-border-color: var(--cpsl-color-background-8);
+  --button-secondary-hover-background-color: var(--cpsl-color-background-16);
+  --button-secondary-hover-border-color: var(--cpsl-color-background-16);
+`;
+const Info = safeStyled(comp.CpslCol)`
+    text-align: left;
+    min-width: 0;
+  `, Code = comp.CpslText, Name = safeStyled(comp.CpslText)`
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    height: 20px;
+  `, EndText = safeStyled(comp.CpslText)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  `, EndTextSecondary = safeStyled(comp.CpslText)`
+    overflow: hidden;
+  `;
+const End = safeStyled(comp.CpslCol)`
+  text-align: right;
+  align-items: flex-end;
+  gap: 4px;
+  min-width: 0;
+`;
+const SearchInput = safeStyled(comp.CpslInput)`
+  --container-background-color: var(--cpsl-color-background-8);
+  --input-background-color: transparent;
+`;
+export {
+  SearchableButtonList,
+  contentMotionProps
+};

package/dist/modal/components/WalletSelectOld/WalletSelectOld.d.ts

@@ -1,4 +1,10 @@
-export declare const WalletSelectOld: () => import("react/jsx-runtime").JSX.Element;
+import { TWalletType } from '@getpara/web-sdk';
+export declare const WalletSelectOld: ({ style, noTitle, types, isEmbeddedOnly, }: {
+    style?: React.CSSProperties;
+    noTitle?: boolean;
+    types?: TWalletType[];
+    isEmbeddedOnly?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Select: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, {

package/dist/modal/components/WalletSelectOld/WalletSelectOld.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
 import { MOBILE_SIZE, safeStyled, useCopyToClipboard, WalletTypeIcon as WalletTypeIconBase } from "@getpara/react-common";
@@ -45,13 +45,21 @@ const Wallet = ({
     )
   ] });
 };
-const WalletSelectOld = () => {
+const WalletSelectOld = ({
+  style,
+  noTitle,
+  types,
+  isEmbeddedOnly
+}) => {
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
   const { setSelectedWallet } = useWalletState();
   const { data: activeWallet } = useWallet();
   const { embedded } = useAccount();
-  const availableWallets = embedded == null ? void 0 : embedded.wallets;
+  const availableWallets = useMemo(() => {
+    var _a;
+    return (_a = embedded == null ? void 0 : embedded.wallets) == null ? void 0 : _a.filter((wallet) => !isEmbeddedOnly || !wallet.isExternal);
+  }, [embedded, isEmbeddedOnly]);
   const isMultiWallet = availableWallets && availableWallets.length > 1;
   const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsx(Wallet, { withCopy: true, wallet: activeWallet, slot: "selected-item", withIcon: true }) : null;
   useEffect(() => {
@@ -59,9 +67,9 @@ const WalletSelectOld = () => {
       resize();
     }
   }, [activeWallet, availableWallets, dropdownMaxHeight]);
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    isMultiWallet && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: "Select Wallet" }),
-    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainerOld", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Container, { style, children: [
+    isMultiWallet && !noTitle && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: "Select Wallet" }),
+    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainerOld", style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
       Select,
       {
         selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
@@ -78,9 +86,10 @@ const WalletSelectOld = () => {
         selectedItemVariant: "bodyXS",
         icon: isMultiWallet ? "chevronUp" : null,
         disabled: !isMultiWallet,
+        style: { width: "100%" },
         children: [
           activeWallet && ActiveWalletNode,
-          (availableWallets || []).map((wallet) => {
+          (availableWallets || []).filter((wallet) => !types || !wallet.type || types.includes(wallet.type)).map((wallet) => {
             const key = getValue(wallet.id, wallet.type);
             return /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsx(Wallet, { wallet, withIcon: true }) }, key);
           })

package/dist/modal/components/common.d.ts

@@ -10,7 +10,7 @@ export declare const FullWidthFilledDisabledInput: typeof CpslInput;
 export declare const CenteredText: typeof CpslText;
 export declare const InnerStepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, {
     $wide?: boolean;
 }>> & string;
@@ -59,3 +59,6 @@ export declare function GradientScroll({ height, gap, children }: PropsWithChild
 export declare const HeroGenericIcon: ({ accountType }: {
     accountType: "EMAIL" | "PHONE";
 }) => import("react/jsx-runtime").JSX.Element;
+export * from './SearchableButtonList.js';
+export * from './QuantityInput.js';
+export { AnimatedHeightWrapper } from './Body/AnimatedHeightWrapper.js';