@loafmarkets/ui 0.1.4 → 0.1.6

package/dist/index.mjs

@@ -146,7 +146,7 @@ var PortfolioSummary = o.forwardRef(
     onResetAccount,
     positionsHeading = "Current Positions",
     emptyPositionsText = "No positions yet. Start trading to build your portfolio!",
-    formatCurrency: formatCurrency2 = defaultFormatCurrency,
+    formatCurrency: formatCurrency3 = defaultFormatCurrency,
     formatPercent: formatPercent2 = defaultFormatPercent,
     formatSignedCurrency = defaultFormatSignedCurrency,
     className,
@@ -184,11 +184,11 @@ var PortfolioSummary = o.forwardRef(
             /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Available Cash" }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency2(availableCash) })
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency3(availableCash) })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Portfolio Value" }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency2(portfolioValue) })
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency3(portfolioValue) })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Total Return" }),
@@ -3336,7 +3336,7 @@ function DesktopOrderbookLayout({
           /* @__PURE__ */ jsxs("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: [
             "$",
             formatNumber(midPrice, precision),
-            midChangePercent == null ? null : /* @__PURE__ */ jsxs("span", { className: "ml-2 text-sm font-semibold", children: [
+            midChangePercent == null ? null : /* @__PURE__ */ jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
               midChangePercent >= 0 ? "+" : "",
               midChangePercent.toFixed(2),
               "%"
@@ -3391,18 +3391,18 @@ function MobileOrderbookLayout({
   const visibleBids = o.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           "span",
           {
             onClick: () => handleTab("orderbook"),
             style: {
               cursor: "pointer",
-              fontSize: "0.8rem",
+              fontSize: "0.72rem",
               fontWeight: tab === "orderbook" ? 600 : 400,
               color: tab === "orderbook" ? "#fff" : "rgba(255,255,255,0.6)",
               borderBottom: tab === "orderbook" ? "2px solid #C9A227" : "none",
-              paddingBottom: "0.25rem"
+              paddingBottom: "0.2rem"
             },
             children: "Orderbook"
           }
@@ -3413,11 +3413,11 @@ function MobileOrderbookLayout({
             onClick: () => handleTab("trades"),
             style: {
               cursor: "pointer",
-              fontSize: "0.8rem",
+              fontSize: "0.72rem",
               fontWeight: tab === "trades" ? 600 : 400,
               color: tab === "trades" ? "#fff" : "rgba(255,255,255,0.6)",
               borderBottom: tab === "trades" ? "2px solid #C9A227" : "none",
-              paddingBottom: "0.25rem"
+              paddingBottom: "0.2rem"
             },
             children: "Trades"
           }
@@ -3477,20 +3477,26 @@ function MobileOrderbookLayout({
             gridTemplateColumns: "1.2fr 0.8fr",
             padding: "0.3rem 0",
             fontSize: "0.8rem",
-            backgroundColor: "rgba(0, 123, 255, 0.05)",
             borderTop: "1px solid rgba(255,255,255,0.1)",
             borderBottom: "1px solid rgba(255,255,255,0.1)"
           },
           children: [
-            /* @__PURE__ */ jsxs("div", { style: { fontWeight: "bold", display: "flex", alignItems: "center", gap: "8px" }, className: midClass, children: [
-              "$",
-              formatNumber(midPrice, precision),
-              midChangePercent != null && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.8rem" }, className: midClass, children: [
-                midChangePercent >= 0 ? "+" : "",
-                midChangePercent.toFixed(2),
-                "%"
-              ] })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { fontWeight: "bold", display: "flex", alignItems: "center", gap: "8px" },
+                className: midClass,
+                children: [
+                  "$",
+                  formatNumber(midPrice, precision),
+                  midChangePercent != null && /* @__PURE__ */ jsxs("span", { className: cn("text-[0.75rem] font-semibold tabular-nums", midClass), children: [
+                    midChangePercent >= 0 ? "+" : "",
+                    midChangePercent.toFixed(2),
+                    "%"
+                  ] })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx("div", {})
           ]
         }
@@ -3888,393 +3894,447 @@ var PropertyNewsUpdates = o.forwardRef(
   }
 );
 PropertyNewsUpdates.displayName = "PropertyNewsUpdates";
-var PropertyCompareBar = o.forwardRef(
+var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  notation: value >= 1e5 ? "compact" : "standard",
+  maximumFractionDigits: value >= 1e3 ? 0 : 2
+}).format(value);
+var TradingSlider = o.forwardRef(
   ({
+    label = "Trade size",
+    helperText = "Drag to pick the desired notional.",
+    min = 0,
+    max = 1e5,
+    step = 1e3,
+    minLabel,
+    maxLabel,
+    formatValue = defaultFormat,
+    accentColor = "#14b8a6",
+    value,
+    defaultValue,
+    onValueChange,
     className,
-    addresses,
-    selectedAddressId,
-    onSelectAddress,
-    propertyValue,
-    propertyValueVariant = "classic",
-    price,
-    ...props
+    ...rest
   }, ref) => {
-    const normalizedAddresses = o.useMemo(() => {
-      return addresses.map(
-        (option) => typeof option === "string" ? { id: option, label: option } : option
-      );
-    }, [addresses]);
-    const hasAddresses = normalizedAddresses.length > 0;
-    const firstAddressId = normalizedAddresses[0]?.id;
-    const isControlled = selectedAddressId !== void 0;
-    const [internalSelectedId, setInternalSelectedId] = o.useState(
-      () => isControlled ? void 0 : firstAddressId
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = o.useState(
+      defaultValue ?? (typeof min === "number" ? min : 0)
     );
-    const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
-    o.useEffect(() => {
+    const currentValue = isControlled ? Number(value) : internalValue;
+    const parsedMin = Number(min ?? 0);
+    const parsedMax = Number(max ?? 100);
+    const percent = (currentValue - parsedMin) / (parsedMax - parsedMin || 1) * 100;
+    const handleChange = (event) => {
+      const next2 = Number(event.target.value);
       if (!isControlled) {
-        setInternalSelectedId((current) => {
-          if (current != null && normalizedAddresses.some((option) => option.id === current)) {
-            return current;
-          }
-          return firstAddressId;
-        });
+        setInternalValue(next2);
       }
-    }, [firstAddressId, isControlled, normalizedAddresses]);
-    const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
-    const [isDropdownOpen, setIsDropdownOpen] = o.useState(false);
-    const dropdownRef = o.useRef(null);
-    o.useEffect(() => {
-      if (!isDropdownOpen) return;
-      const handleClick = (event) => {
-        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-          setIsDropdownOpen(false);
-        }
-      };
-      const handleKey = (event) => {
-        if (event.key === "Escape") {
-          setIsDropdownOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClick);
-      document.addEventListener("keydown", handleKey);
-      return () => {
-        document.removeEventListener("mousedown", handleClick);
-        document.removeEventListener("keydown", handleKey);
-      };
-    }, [isDropdownOpen]);
-    const handleAddressSelect = (addressId) => {
-      if (!isControlled) {
-        setInternalSelectedId(addressId);
-      }
-      onSelectAddress?.(addressId);
-      setIsDropdownOpen(false);
-    };
-    const propertyValueLabel = propertyValue?.label ?? "Property Value";
-    const propertyValueCurrency = propertyValue?.currencySymbol ?? "$";
-    const propertyValueFormat = propertyValue?.formatOptions ?? {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
+      onValueChange?.(next2, event);
     };
-    const formattedPropertyValue = propertyValue == null ? null : `${propertyValueCurrency}${propertyValue.value.toLocaleString(
-      void 0,
-      propertyValueFormat
-    )}`;
-    const formattedPropertyChange = propertyValue?.change == null ? null : `${propertyValue.change >= 0 ? "+" : "-"}${propertyValueCurrency}${Math.abs(
-      propertyValue.change
-    ).toLocaleString(void 0, propertyValueFormat)}`;
-    const priceCurrency = price?.currencySymbol ?? "$";
-    const priceFormat = price?.formatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
-    const pricePercentFormat = price?.percentFormatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
-    const formattedPriceValue = price == null ? null : `${priceCurrency}${price.value.toLocaleString(void 0, priceFormat)}`;
-    const formattedPriceChange = price?.change == null ? null : `${price.change >= 0 ? "+" : "-"}${priceCurrency}${Math.abs(price.change).toLocaleString(
-      void 0,
-      priceFormat
-    )}`;
-    const formattedPricePercent = price?.changePercent == null ? null : `${price.changePercent >= 0 ? "+" : "-"}${Math.abs(price.changePercent).toLocaleString(
-      void 0,
-      pricePercentFormat
-    )}%`;
-    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(PriceBlock, { $variant: propertyValueVariant, children: [
-      /* @__PURE__ */ jsx(PriceAmount, { children: formattedPriceValue }),
-      formattedPriceChange || formattedPricePercent ? /* @__PURE__ */ jsxs(
-        PriceChange,
-        {
-          $isPositive: price?.change != null ? price.change >= 0 : price?.changePercent != null ? price.changePercent >= 0 : void 0,
-          children: [
-            formattedPriceChange ? /* @__PURE__ */ jsx("span", { children: formattedPriceChange }) : null,
-            formattedPricePercent ? /* @__PURE__ */ jsx("span", { children: formattedPricePercent }) : null
-          ]
-        }
-      ) : null
-    ] }) : null;
-    const propertyValueContent = formattedPropertyValue ? /* @__PURE__ */ jsxs(PropertyValueBlock, { $variant: propertyValueVariant, children: [
-      /* @__PURE__ */ jsx(PropertyValueLabel, { children: propertyValueLabel }),
-      /* @__PURE__ */ jsx(PropertyValueAmount, { children: formattedPropertyValue }),
-      formattedPropertyChange ? /* @__PURE__ */ jsx(PropertyValueChange, { $isPositive: propertyValue?.change != null ? propertyValue.change >= 0 : void 0, children: formattedPropertyChange }) : null
-    ] }) : null;
-    return /* @__PURE__ */ jsxs(PropertySelectorContainer, { ref, className, $variant: propertyValueVariant, ...props, children: [
-      /* @__PURE__ */ jsxs(PropertySelector, { ref: dropdownRef, onClick: () => hasAddresses && setIsDropdownOpen((prev2) => !prev2), children: [
-        /* @__PURE__ */ jsxs(PropertyAddress, { children: [
-          selectedOption ? selectedOption.label : hasAddresses ? "Select address" : "No addresses available",
+    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-3xl border border-slate-200 bg-white p-6 shadow-sm", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium uppercase tracking-wide text-slate-500", children: label }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: helperText })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-wide text-slate-500", children: "Selected" }),
+          /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold text-slate-900", children: formatValue(currentValue) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: parsedMin,
+              max: parsedMax,
+              step,
+              value: currentValue,
+              onChange: handleChange,
+              ref,
+              className: "h-3 w-full appearance-none rounded-full bg-slate-200 accent-teal-500",
+              style: {
+                background: `linear-gradient(90deg, ${accentColor} ${percent}%, #e2e8f0 ${percent}%)`
+              },
+              ...rest
+            }
+          ),
           /* @__PURE__ */ jsx(
-            "svg",
+            "div",
             {
-              className: "dropdown-icon",
-              xmlns: "http://www.w3.org/2000/svg",
-              width: "20",
-              height: "20",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              style: { transform: isDropdownOpen ? "rotate(180deg)" : void 0 },
-              children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5H7z" })
+              className: "pointer-events-none absolute -top-7 translate-x-1/2 rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-700 shadow",
+              style: { right: `calc(${100 - percent}% - 12px)` },
+              children: formatValue(currentValue)
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(PropertySelectorDropdown, { $isOpen: isDropdownOpen && hasAddresses, children: normalizedAddresses.map((option) => /* @__PURE__ */ jsx(
-          PropertySelectorOption,
-          {
-            onClick: (event) => {
-              event.stopPropagation();
-              handleAddressSelect(option.id);
-            },
-            children: /* @__PURE__ */ jsx(PropertySelectorName, { children: option.label })
-          },
-          option.id
-        )) })
-      ] }),
-      propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        priceContent,
-        propertyValueContent
-      ] }) : propertyValueContent
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs font-semibold text-slate-500", children: [
+          /* @__PURE__ */ jsx("span", { children: minLabel ?? formatValue(parsedMin) }),
+          /* @__PURE__ */ jsx("span", { children: maxLabel ?? formatValue(parsedMax) })
+        ] })
+      ] })
     ] });
   }
 );
-PropertyCompareBar.displayName = "PropertyCompareBar";
-var PropertySelectorContainer = at.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  background-color: ${({ $variant }) => $variant === "pill" ? "#0f0f0f" : "rgba(30, 32, 38, 0.95)"};
-  border: ${({ $variant }) => $variant === "pill" ? "1px solid rgba(255, 255, 255, 0.15)" : "none"};
-  border-radius: 8px;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  color: var(--color-text, #f8f9fa);
-  font-family: var(--font-family, "Inter", sans-serif);
-
+TradingSlider.displayName = "TradingSlider";
+var MobileToggleContainer = at.div`
+  display: none;
+  
   @media (max-width: 1024px) {
+    display: flex;
+    gap: 0.5rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--color-card-darker, #111);
     padding: 0.75rem 1rem;
-    margin-bottom: 0.75rem;
-  }
-
-  @media (max-width: 768px) {
-    border-radius: 0;
-    margin-top: 0;
-    padding-top: 0.5rem;
-  }
-
-  @media (max-width: 600px) {
-    width: 100%;
-
-    ${({ $variant }) => $variant === "pill" ? rt`
-            display: grid;
-            grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
-            gap: 0.35rem;
-            align-items: center;
-
-            > *:nth-child(1) {
-              width: 100%;
-            }
-
-            > *:nth-child(2) {
-              justify-self: center;
-              width: 100%;
-            }
-
-            > *:nth-child(3) {
-              justify-self: end;
-              text-align: right;
-            }
-          ` : rt`
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-            gap: 0.5rem;
-          `};
+    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
+    border-top: 1px solid var(--color-border);
+    z-index: 100;
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
   }
 `;
-var PropertySelector = at.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 0.5rem 0;
+var MobileToggleButton = at.button`
   flex: 1;
-
-  &:hover {
-    .dropdown-icon {
-      transform: translateY(2px);
-    }
-  }
-`;
-var PropertyAddress = at.div`
-  font-size: 1.125rem;
+  padding: 0.75rem;
+  background-color: ${(props) => props.active ? "var(--color-accent)" : "transparent"};
+  color: ${(props) => props.active ? "#000" : "var(--color-text-secondary)"};
+  border: ${(props) => props.active ? "1px solid var(--color-accent)" : "1px solid rgba(255, 255, 255, 0.2)"};
+  border-radius: 6px;
+  font-size: 0.9rem;
   font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: inherit;
-
-  svg {
-    transition: transform 0.2s;
-  }
-
-  @media (max-width: 600px) {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.2rem;
-    font-size: 1rem;
-    line-height: 1.2;
-    white-space: normal;
-  }
-`;
-var PropertySelectorDropdown = at.div`
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  max-width: 400px;
-  background-color: var(--color-card, #1f232b);
-  border-radius: 8px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
-  overflow: hidden;
-  display: ${(props) => props.$isOpen ? "block" : "none"};
-`;
-var PropertySelectorOption = at.div`
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   cursor: pointer;
-  transition: background-color 0.2s;
-
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  
   &:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
-
-  &:last-child {
-    border-bottom: none;
+    background-color: ${(props) => props.active ? "var(--color-accent-hover)" : "rgba(255, 255, 255, 0.05)"};
+    border-color: ${(props) => props.active ? "var(--color-accent)" : "rgba(255, 255, 255, 0.3)"};
   }
-`;
-var PropertySelectorName = at.div`
-  font-weight: 600;
-`;
-var PropertyValueBlock = at.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-left: 1rem;
-  white-space: nowrap;
-
-  ${({ $variant }) => $variant === "card" && rt`
-      margin-left: auto;
-      flex-direction: row;
-      align-items: center;
-      min-width: 220px;
-      border: none;
-      background: rgba(30, 32, 38, 0.95);
-      border-radius: 14px;
-      padding: 0.9rem 1.25rem;
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-      gap: 0.85rem;
-      justify-content: flex-end;
-
-      @media (max-width: 600px) {
-        margin: 0;
-        width: auto;
-        min-width: 0;
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 0.125rem;
-        padding: 0;
-        background: transparent;
-        border-radius: 0;
-        box-shadow: none;
-      }
-    `}
-
-  ${({ $variant }) => $variant === "pill" && rt`
-      margin-left: auto;
-      margin-right: 1rem;
-      background: #191919;
-      border-radius: 8px;
-      border: 1px solid rgba(255, 255, 255, 0.05);
-      padding: 0.5rem 1rem;
-      gap: 1rem;
-      align-items: center;
-
-      @media (max-width: 600px) {
-        margin: 0;
-        width: 100%;
-        min-width: 0;
-        flex-direction: column;
-        align-items: flex-end;
-        text-align: right;
-        gap: 0.2rem;
-        padding: 0;
-        background: transparent;
-        border-radius: 0;
-        border: none;
-        white-space: normal;
-      }
-    `}
-
-  @media (max-width: 600px) {
-    margin: 0;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 0.2rem;
-    white-space: normal;
+  
+  @media (max-width: 480px) {
+    font-size: 0.85rem;
+    padding: 0.6rem 0.5rem;
   }
 `;
-var PropertyValueLabel = at.span`
-  font-size: 0.7rem;
-  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-
-  @media (max-width: 600px) {
-    font-size: 0.6rem;
-    letter-spacing: 0.4px;
+var MobileTradeNav = o.forwardRef(
+  ({ className, items, activeId, onChange, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
+      MobileToggleButton,
+      {
+        type: "button",
+        active: item.id === activeId,
+        onClick: () => onChange?.(item.id),
+        children: [
+          item.icon,
+          item.label
+        ]
+      },
+      item.id
+    )) });
   }
-`;
-var PropertyValueAmount = at.span`
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #fff;
-
-  @media (max-width: 600px) {
-    font-size: 0.95rem;
+);
+MobileTradeNav.displayName = "MobileTradeNav";
+function formatPrice(value) {
+  if (value == null || Number.isNaN(value)) {
+    return "0.00";
   }
-`;
-var PropertyValueChange = at.span`
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
-
-  @media (max-width: 600px) {
-    font-size: 0.65rem;
+  return value.toLocaleString(void 0, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+}
+function formatQuantity(value) {
+  if (value == null || Number.isNaN(value)) {
+    return "0";
   }
-`;
-var PriceBlock = at.div`
-  display: none;
-
-  ${({ $variant }) => $variant === "pill" && rt`
-      @media (max-width: 600px) {
-        display: flex;
-        flex: none;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 0.15rem;
-        width: 100%;
-      }
-    `}
-`;
-var PriceAmount = at.span`
-  font-size: 1.6rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.2px;
-`;
-var PriceChange = at.span`
-  font-size: 0.85rem;
-  font-weight: 500;
-  display: inline-flex;
-  gap: 0.35rem;
-  color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
-`;
+  return value.toLocaleString(void 0, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+}
+function formatCurrency(value) {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  return `$${value.toLocaleString(void 0, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`;
+}
+var overlayStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.7)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4,
+  backdropFilter: "blur(4px)",
+  padding: "1rem"
+};
+var modalBaseStyle = {
+  background: "linear-gradient(135deg, rgba(26, 29, 35, 0.95) 0%, rgba(26, 29, 35, 0.98) 100%)",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
+  borderRadius: "16px",
+  padding: "2rem",
+  width: "100%",
+  maxWidth: "480px",
+  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+  color: "#fff"
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "1.5rem",
+  paddingBottom: "1rem",
+  borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
+};
+var titleStyle = {
+  margin: 0,
+  fontSize: "1.25rem",
+  fontWeight: 600,
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem"
+};
+var badgeBaseStyle = {
+  display: "inline-block",
+  padding: "0.25rem 0.75rem",
+  borderRadius: "6px",
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var detailRowBase = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "0.75rem 0",
+  borderBottom: "1px solid rgba(255, 255, 255, 0.08)"
+};
+var detailLabelStyle = {
+  color: "rgba(255, 255, 255, 0.6)",
+  fontSize: "0.9rem"
+};
+var detailValueStyle = {
+  color: "#fff",
+  fontWeight: 500,
+  fontSize: "0.95rem"
+};
+var summaryBoxStyle = {
+  background: "rgba(255, 255, 255, 0.03)",
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  borderRadius: "8px",
+  padding: "1rem",
+  marginBottom: "1.5rem"
+};
+var summaryTextStyle = {
+  margin: 0,
+  color: "rgba(255, 255, 255, 0.8)",
+  fontSize: "0.9rem",
+  lineHeight: 1.5
+};
+var rememberChoiceRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "1.25rem",
+  color: "rgba(255, 255, 255, 0.8)",
+  fontSize: "0.85rem"
+};
+var rememberChoiceCheckboxBoxStyle = {
+  width: "18px",
+  height: "18px",
+  borderRadius: "4px",
+  border: "1px solid rgba(255, 255, 255, 0.4)",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "0.85rem",
+  fontWeight: 700,
+  transition: "all 0.2s ease",
+  lineHeight: 1
+};
+var rememberChoiceHiddenInputStyle = {
+  position: "absolute",
+  opacity: 0,
+  pointerEvents: "none",
+  width: 0,
+  height: 0
+};
+var buttonGroupStyle = {
+  display: "flex",
+  gap: "1rem",
+  justifyContent: "flex-end"
+};
+var buttonBaseStyle = {
+  padding: "0.75rem 1.5rem",
+  borderRadius: "8px",
+  fontWeight: 600,
+  fontSize: "0.95rem",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  border: "none"
+};
+function TradeConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  orderDetails,
+  className,
+  estimatedFeeUsd: _estimatedFeeUsd,
+  estimatedFeeBps: _estimatedFeeBps,
+  totalWithFeesUsd,
+  confirmDisabled,
+  confirmLoading,
+  rememberChoiceChecked = false,
+  rememberChoiceLabel = "Remember this choice and auto-confirm next time",
+  onRememberChoiceChange
+}) {
+  if (!isOpen || !orderDetails) return null;
+  const { type, orderType, quantity, price, totalValue, tokenSymbol, willExecuteImmediately } = orderDetails;
+  const isBuy = type === "buy";
+  const isLimit = orderType === "limit";
+  const netLabel = `Est. Total ${isBuy ? "Cost" : "Proceeds"}`;
+  const grossFallback = totalValue != null ? `$${formatPrice(totalValue)}` : "\u2014";
+  const netValue = totalWithFeesUsd != null ? formatCurrency(totalWithFeesUsd) : grossFallback;
+  const detailRows = [
+    { label: "Order Type", value: isLimit ? "Limit Order" : "Market Order" },
+    { label: "Token", value: tokenSymbol },
+    { label: "Quantity", value: `${formatQuantity(quantity)} tokens`, highlight: true },
+    { label: "Price", value: isLimit ? `$${formatPrice(price)}` : "Market" }
+  ];
+  detailRows.push({ label: netLabel, value: netValue, highlight: true });
+  const accentColor = isBuy ? "#0ecb81" : "#f6465d";
+  const badgeStyle = {
+    ...badgeBaseStyle,
+    color: accentColor,
+    border: `1px solid ${isBuy ? "rgba(14, 203, 129, 0.3)" : "rgba(246, 70, 93, 0.3)"}`,
+    background: isBuy ? "linear-gradient(135deg, rgba(14, 203, 129, 0.2) 0%, rgba(14, 203, 129, 0.1) 100%)" : "linear-gradient(135deg, rgba(246, 70, 93, 0.2) 0%, rgba(246, 70, 93, 0.1) 100%)"
+  };
+  const cancelButtonStyle = {
+    ...buttonBaseStyle,
+    background: "rgba(255, 255, 255, 0.1)",
+    color: "rgba(255, 255, 255, 0.8)",
+    border: "1px solid rgba(255, 255, 255, 0.2)"
+  };
+  const confirmButtonStyle = {
+    ...buttonBaseStyle,
+    color: "#fff",
+    background: isBuy ? "linear-gradient(135deg, #0ecb81 0%, #0ba968 100%)" : "linear-gradient(135deg, #f6465d 0%, #d93850 100%)",
+    boxShadow: isBuy ? "0 4px 12px rgba(14, 203, 129, 0.3)" : "0 4px 12px rgba(246, 70, 93, 0.3)",
+    opacity: confirmDisabled || confirmLoading ? 0.6 : 1,
+    cursor: confirmDisabled || confirmLoading ? "not-allowed" : "pointer"
+  };
+  const showRememberChoice = typeof onRememberChoiceChange === "function";
+  return /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: onClose, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { style: modalBaseStyle, className, onClick: (event) => event.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("header", { style: headerStyle, children: /* @__PURE__ */ jsxs("h3", { style: titleStyle, children: [
+      "Confirm Order",
+      /* @__PURE__ */ jsx("span", { style: badgeStyle, children: isBuy ? "BUY" : "SELL" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: "1.5rem" }, children: detailRows.map((row, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...detailRowBase,
+          borderBottom: index === detailRows.length - 1 ? "none" : detailRowBase.borderBottom
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: detailLabelStyle, children: row.label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                ...detailValueStyle,
+                color: row.highlight ? accentColor : detailValueStyle.color,
+                fontWeight: row.highlight ? 600 : detailValueStyle.fontWeight
+              },
+              children: row.value
+            }
+          )
+        ]
+      },
+      `${row.label}-${index}`
+    )) }),
+    /* @__PURE__ */ jsx("section", { style: summaryBoxStyle, children: /* @__PURE__ */ jsx("p", { style: summaryTextStyle, children: isLimit ? willExecuteImmediately ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Your limit ",
+      isBuy ? "buy" : "sell",
+      " order will ",
+      /* @__PURE__ */ jsx("strong", { style: { color: "#fff" }, children: "execute immediately" }),
+      " at market price because your limit price of ",
+      /* @__PURE__ */ jsxs("strong", { style: { color: "#fff" }, children: [
+        "$",
+        formatPrice(price)
+      ] }),
+      " is",
+      isBuy ? " above" : " below",
+      " the current market."
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Your limit ",
+      isBuy ? "buy" : "sell",
+      " order for",
+      " ",
+      /* @__PURE__ */ jsxs("strong", { style: { color: "#fff" }, children: [
+        formatQuantity(quantity),
+        " tokens"
+      ] }),
+      " at",
+      " ",
+      /* @__PURE__ */ jsxs("strong", { style: { color: "#fff" }, children: [
+        "$",
+        formatPrice(price)
+      ] }),
+      " will be placed."
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Your market ",
+      isBuy ? "buy" : "sell",
+      " order for",
+      " ",
+      /* @__PURE__ */ jsxs("strong", { style: { color: "#fff" }, children: [
+        formatQuantity(quantity),
+        " tokens"
+      ] }),
+      " will execute immediately at the best available market price."
+    ] }) }) }),
+    showRememberChoice ? /* @__PURE__ */ jsxs("label", { style: { ...rememberChoiceRowStyle, position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: rememberChoiceChecked,
+          onChange: (event) => onRememberChoiceChange?.(event.target.checked),
+          style: rememberChoiceHiddenInputStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          style: {
+            ...rememberChoiceCheckboxBoxStyle,
+            borderColor: rememberChoiceChecked ? accentColor : rememberChoiceCheckboxBoxStyle.border,
+            background: rememberChoiceChecked ? `linear-gradient(135deg, ${accentColor}33, ${accentColor}22)` : "transparent",
+            color: rememberChoiceChecked ? accentColor : "transparent"
+          },
+          children: "\u2713"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: rememberChoiceLabel })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { style: buttonGroupStyle, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, style: cancelButtonStyle, children: "Cancel" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: confirmDisabled ? void 0 : onConfirm, disabled: confirmDisabled || confirmLoading, style: confirmButtonStyle, children: confirmLoading ? "Submitting\u2026" : `Confirm ${isBuy ? "Buy" : "Sell"}` })
+    ] })
+  ] }) });
+}
 var DEFAULT_TABS = [
   { id: "portfolio", label: "Portfolio" },
   { id: "openOrders", label: "Open Orders" },
@@ -4290,10 +4350,10 @@ var panelStyle = {
   display: "flex",
   flexDirection: "column"
 };
-var headerStyle = {
+var headerStyle2 = {
   padding: "1.25rem 1.5rem 0.5rem"
 };
-var titleStyle = {
+var titleStyle2 = {
   margin: 0,
   fontSize: "1.1rem",
   fontWeight: 600
@@ -4322,6 +4382,30 @@ var tabContentWrapper = {
   gap: "0.75rem",
   flex: 1
 };
+var paginationContainerStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginTop: "0.75rem",
+  paddingTop: "0.75rem",
+  borderTop: "1px solid rgba(255,255,255,0.08)",
+  fontSize: "0.85rem",
+  color: "rgba(255,255,255,0.7)"
+};
+var paginationButtonsStyle = {
+  display: "flex",
+  gap: "0.5rem"
+};
+var paginationButtonStyle = {
+  border: "1px solid rgba(255,255,255,0.2)",
+  background: "rgba(255,255,255,0.05)",
+  color: "#fff",
+  borderRadius: "6px",
+  padding: "0.35rem 0.9rem",
+  fontSize: "0.8rem",
+  cursor: "pointer",
+  transition: "opacity 0.2s ease"
+};
 var tableHeaderStyle = {
   display: "grid",
   gridTemplateColumns: "1.8fr 0.9fr 0.7fr 0.8fr 0.8fr 1fr",
@@ -4358,7 +4442,7 @@ var rowStyle = {
   padding: "0.75rem 0",
   borderBottom: "1px solid rgba(255,255,255,0.08)"
 };
-var formatCurrency = (value) => {
+var formatCurrency2 = (value) => {
   if (value == null || Number.isNaN(value)) return "\u2014";
   return `$${value.toLocaleString(void 0, {
     minimumFractionDigits: 2,
@@ -4370,9 +4454,23 @@ var formatPercent = (value, fractionDigits = 2) => {
   return `${value.toFixed(fractionDigits)}%`;
 };
 var YourOrders = o.forwardRef(
-  ({ className, title, orders, tabs, activeTabId, onTabChange, renderOrderActions, ...props }, ref) => {
+  ({
+    className,
+    title,
+    orders,
+    tabs,
+    activeTabId,
+    onTabChange,
+    renderOrderActions,
+    renderTabContent,
+    ...props
+  }, ref) => {
     const [internalActiveTab, setInternalActiveTab] = o.useState(tabs?.[0]?.id ?? "portfolio");
+    const [page, setPage] = o.useState(0);
     const effectiveActiveTabId = activeTabId ?? internalActiveTab;
+    o.useEffect(() => {
+      setPage(0);
+    }, [effectiveActiveTabId]);
     const handleTabChange = (tabId) => {
       if (onTabChange) {
         onTabChange(tabId);
@@ -4383,6 +4481,24 @@ var YourOrders = o.forwardRef(
     const resolvedTabs = tabs ?? DEFAULT_TABS.map((t) => ({ ...t, orders: orders ?? [], emptyState: `No ${t.label.toLowerCase()} data available.` }));
     const activeTab = resolvedTabs.find((t) => t.id === effectiveActiveTabId) ?? resolvedTabs[0];
     const activeOrders = activeTab?.orders ?? orders ?? [];
+    const DEFAULT_PAGE_SIZE = 5;
+    const HISTORY_PAGE_SIZE = 3;
+    const pageSize = activeTab?.id === "order-history" || activeTab?.id === "trade-history" ? HISTORY_PAGE_SIZE : DEFAULT_PAGE_SIZE;
+    const totalOrders = activeOrders.length;
+    const totalPages = Math.max(1, Math.ceil(totalOrders / pageSize));
+    const safePage = Math.min(page, totalPages - 1);
+    const pageStart = safePage * pageSize;
+    const paginatedOrders = activeOrders.slice(pageStart, pageStart + pageSize);
+    const tabSupportsActions = activeTab?.enableCancel ?? true;
+    const showActionsColumn = Boolean(renderOrderActions && tabSupportsActions);
+    const columnVisibility = activeTab?.columnVisibility ?? {};
+    const showPropertyPercentColumn = columnVisibility.propertyPercent !== false;
+    const showPnlColumn = columnVisibility.pnl !== false;
+    const columnTemplateParts = ["1.8fr", "0.9fr", "0.7fr", ...showPropertyPercentColumn ? ["0.8fr"] : [], "0.8fr", ...showPnlColumn ? ["1fr"] : []];
+    if (showActionsColumn) {
+      columnTemplateParts.push("0.8fr");
+    }
+    const gridTemplateColumns = columnTemplateParts.join(" ");
     const displayTitle = title ?? activeTab?.title ?? activeTab?.label ?? "Portfolio Holdings";
     console.log("[YourOrders] tabs:", tabs?.map((t) => ({ id: t.id, ordersCount: t.orders?.length })));
     console.log("[YourOrders] activeTabId prop:", activeTabId);
@@ -4395,15 +4511,16 @@ var YourOrders = o.forwardRef(
         return /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: emptyMessage });
       }
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { style: tableHeaderStyle, children: [
+        /* @__PURE__ */ jsxs("div", { style: { ...tableHeaderStyle, gridTemplateColumns }, children: [
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Property" }),
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Value" }),
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Holding" }),
-          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "% of Property" }),
+          showPropertyPercentColumn ? /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "% of Property" }) : null,
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Avg Price" }),
-          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "P&L" })
+          showPnlColumn ? /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "P&L" }) : null,
+          showActionsColumn ? /* @__PURE__ */ jsx("div", { style: { ...tableHeaderCell, textAlign: "right" }, children: "Actions" }) : null
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: activeOrders.map((order) => {
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: paginatedOrders.map((order) => {
           const propertyName = order.asset;
           const holding = order.holdingLabel ?? `${order.amount.toLocaleString(void 0, {
             minimumFractionDigits: 0,
@@ -4419,7 +4536,7 @@ var YourOrders = o.forwardRef(
           const currentPrice = order.currentPrice ?? order.price;
           const priceChangePercent = order.priceChangePercent ?? order.pnlPercent;
           const priceChangePositive = order.priceChangePositive ?? (priceChangePercent != null ? priceChangePercent >= 0 : void 0);
-          return /* @__PURE__ */ jsxs("div", { style: { ...rowStyle, gridTemplateColumns: renderOrderActions ? "1.8fr 0.8fr 0.7fr 0.8fr 0.8fr 0.9fr 0.8fr" : "1.8fr 0.9fr 0.7fr 0.8fr 0.8fr 1fr" }, children: [
+          return /* @__PURE__ */ jsxs("div", { style: { ...rowStyle, gridTemplateColumns }, children: [
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.15rem" }, children: [
                 /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500 }, children: propertyName }),
@@ -4447,7 +4564,7 @@ var YourOrders = o.forwardRef(
                           children: priceChangePositive ? "\u25B2" : "\u25BC"
                         }
                       ) : null,
-                      formatCurrency(currentPrice)
+                      formatCurrency2(currentPrice)
                     ]
                   }
                 ),
@@ -4468,11 +4585,11 @@ var YourOrders = o.forwardRef(
                 ) : null
               ] }) : null
             ] }),
-            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500, color: "#D4AF37" }, children: formatCurrency(value) }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500, color: "#D4AF37" }, children: formatCurrency2(value) }),
             /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.92)" }, children: holding }),
-            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.8)" }, children: formatPercent(propertyPercent, 3) }),
-            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.9)" }, children: formatCurrency(avgPrice) }),
-            /* @__PURE__ */ jsxs(
+            showPropertyPercentColumn ? /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.8)" }, children: formatPercent(propertyPercent, 3) }) : null,
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.9)" }, children: formatCurrency2(avgPrice) }),
+            showPnlColumn ? /* @__PURE__ */ jsxs(
               "div",
               {
                 style: {
@@ -4481,7 +4598,7 @@ var YourOrders = o.forwardRef(
                   color: pnlPositive ? "#0ecb81" : "#f6465d"
                 },
                 children: [
-                  pnlValue != null ? `${pnlPositive ? "+" : "-"}${formatCurrency(Math.abs(pnlValue))}` : formatCurrency(pnlValue),
+                  pnlValue != null ? `${pnlPositive ? "+" : "-"}${formatCurrency2(Math.abs(pnlValue))}` : formatCurrency2(pnlValue),
                   pnlPercent != null ? /* @__PURE__ */ jsxs("span", { style: { marginLeft: "0.35rem", fontSize: "0.75rem", color: "rgba(255,255,255,0.6)" }, children: [
                     "(",
                     pnlPositive ? "+" : "",
@@ -4490,13 +4607,71 @@ var YourOrders = o.forwardRef(
                   ] }) : null
                 ]
               }
-            ),
-            renderOrderActions ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: renderOrderActions(order) }) : null
+            ) : null,
+            showActionsColumn ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: renderOrderActions?.(order) }) : null
           ] }, order.id);
         }) })
       ] });
     };
-    const tabContent = renderOrders();
+    const handlePageChange = (nextPage) => {
+      if (nextPage < 0 || nextPage >= totalPages) return;
+      setPage(nextPage);
+    };
+    const customTabContent = renderTabContent?.({
+      tab: activeTab,
+      orders: paginatedOrders,
+      page: safePage,
+      totalPages,
+      totalOrders,
+      pageSize,
+      onPageChange: handlePageChange
+    });
+    const tabContent = customTabContent ?? renderOrders();
+    const renderPagination = () => {
+      if (!hasOrders || totalPages <= 1) return null;
+      const rangeStart = pageStart + 1;
+      const rangeEnd = Math.min(pageStart + pageSize, totalOrders);
+      return /* @__PURE__ */ jsxs("div", { style: paginationContainerStyle, children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Showing ",
+          rangeStart,
+          "-",
+          rangeEnd,
+          " of ",
+          totalOrders
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: paginationButtonsStyle, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handlePageChange(safePage - 1),
+              disabled: safePage === 0,
+              style: {
+                ...paginationButtonStyle,
+                opacity: safePage === 0 ? 0.4 : 1,
+                cursor: safePage === 0 ? "not-allowed" : "pointer"
+              },
+              children: "Prev"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handlePageChange(safePage + 1),
+              disabled: safePage >= totalPages - 1,
+              style: {
+                ...paginationButtonStyle,
+                opacity: safePage >= totalPages - 1 ? 0.4 : 1,
+                cursor: safePage >= totalPages - 1 ? "not-allowed" : "pointer"
+              },
+              children: "Next"
+            }
+          )
+        ] })
+      ] });
+    };
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -4505,7 +4680,7 @@ var YourOrders = o.forwardRef(
         className,
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsx("h3", { style: titleStyle, children: displayTitle }) }),
+          /* @__PURE__ */ jsx("div", { style: headerStyle2, children: /* @__PURE__ */ jsx("h3", { style: titleStyle2, children: displayTitle }) }),
           resolvedTabs.length > 1 && /* @__PURE__ */ jsx("div", { style: tabsRowStyle, children: resolvedTabs.map((tab) => {
             const isActive = effectiveActiveTabId === tab.id;
             return /* @__PURE__ */ jsxs(
@@ -4538,7 +4713,10 @@ var YourOrders = o.forwardRef(
               tab.id
             );
           }) }),
-          /* @__PURE__ */ jsx("div", { style: tabContentWrapper, children: tabContent })
+          /* @__PURE__ */ jsxs("div", { style: tabContentWrapper, children: [
+            tabContent,
+            renderPagination()
+          ] })
         ]
       }
     );
@@ -4658,7 +4836,7 @@ var getPriceScaleOptions = (data) => {
 };
 var defaultRanges = ["30s", "1m", "5m", "15m", "1h", "4h", "24h", "1W", "1M"];
 var VISIBLE_RANGE_COUNT = 4;
-var formatPrice = (value, currencySymbol) => {
+var formatPrice2 = (value, currencySymbol) => {
   return `${currencySymbol}${value.toLocaleString(void 0, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
@@ -4935,7 +5113,7 @@ var PriceChart = o.forwardRef(
                 {
                   className: cn("text-xl font-semibold tabular-nums", changeClass),
                   style: { marginRight: "1rem" },
-                  children: formatPrice(resolvedPrice, currencySymbol)
+                  children: formatPrice2(resolvedPrice, currencySymbol)
                 }
               ),
               dollarChange != null ? /* @__PURE__ */ jsxs(
@@ -4979,7 +5157,7 @@ var PriceChart = o.forwardRef(
   }
 );
 PriceChart.displayName = "PriceChart";
-var formatPrice2 = (value, currencySymbol) => {
+var formatPrice3 = (value, currencySymbol) => {
   return `${currencySymbol}${value.toLocaleString(void 0, {
     minimumFractionDigits: 3,
     maximumFractionDigits: 3
@@ -5033,8 +5211,8 @@ var PropertyHeroHeader = o.forwardRef(
               /* @__PURE__ */ jsx("h1", { style: headingStyle, className: "break-words", children: name }),
               /* @__PURE__ */ jsxs(InfoRow, { className: "mb-3 max-[768px]:mb-[0.6rem] max-[480px]:mb-[0.5rem]", children: [
                 /* @__PURE__ */ jsx(LocationText, { children: location }),
-                price == null ? null : /* @__PURE__ */ jsxs(PriceBlock2, { children: [
-                  formatPrice2(price, currencySymbol),
+                price == null ? null : /* @__PURE__ */ jsxs(PriceBlock, { children: [
+                  formatPrice3(price, currencySymbol),
                   changePercent == null ? null : /* @__PURE__ */ jsxs(
                     "span",
                     {
@@ -5315,7 +5493,7 @@ var LocationText = at.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var PriceBlock2 = at.span`
+var PriceBlock = at.span`
   display: flex;
   align-items: center;
   font-size: clamp(1rem, 2.2vw, 1.25rem);
@@ -5450,66 +5628,7 @@ var PropertySubheader = o.forwardRef(
   }
 );
 PropertySubheader.displayName = "PropertySubheader";
-var MobileToggleContainer = at.div`
-  display: none;
-  
-  @media (max-width: 1024px) {
-    display: flex;
-    gap: 0.5rem;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: var(--color-card-darker, #111);
-    padding: 0.75rem 1rem;
-    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
-    border-top: 1px solid var(--color-border);
-    z-index: 100;
-    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
-  }
-`;
-var MobileToggleButton = at.button`
-  flex: 1;
-  padding: 0.75rem;
-  background-color: ${(props) => props.active ? "var(--color-accent)" : "transparent"};
-  color: ${(props) => props.active ? "#000" : "var(--color-text-secondary)"};
-  border: ${(props) => props.active ? "1px solid var(--color-accent)" : "1px solid rgba(255, 255, 255, 0.2)"};
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  
-  &:hover {
-    background-color: ${(props) => props.active ? "var(--color-accent-hover)" : "rgba(255, 255, 255, 0.05)"};
-    border-color: ${(props) => props.active ? "var(--color-accent)" : "rgba(255, 255, 255, 0.3)"};
-  }
-  
-  @media (max-width: 480px) {
-    font-size: 0.85rem;
-    padding: 0.6rem 0.5rem;
-  }
-`;
-var MobileTradeNav = o.forwardRef(
-  ({ className, items, activeId, onChange, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
-      MobileToggleButton,
-      {
-        type: "button",
-        active: item.id === activeId,
-        onClick: () => onChange?.(item.id),
-        children: [
-          item.icon,
-          item.label
-        ]
-      },
-      item.id
-    )) });
-  }
-);
-MobileTradeNav.displayName = "MobileTradeNav";
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, MobileTradeNav, Orderbook, PortfolioSummary, PriceChart, PropertyCompareBar, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, YourOrders, badgeVariants, buttonVariants };
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, MobileTradeNav, Orderbook, PortfolioSummary, PriceChart, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map