@agg-build/ui 2.0.0 → 2.1.0

package/dist/{chunk-2UKDQ7WP.mjs → chunk-3OI2ZLLT.mjs}

@@ -38,7 +38,7 @@ import {
   shortenAddress,
   useOptionalToast,
   venueLogoLabels
-} from "./chunk-2ZS3BPSF.mjs";
+} from "./chunk-DXF2LMNN.mjs";
 
 // src/deposit/index.tsx
 import { useAggAuthState, useAggUiConfig, useDepositAddresses, useLabels as useLabels11 } from "@agg-build/hooks";
@@ -1873,8 +1873,30 @@ var WithdrawMethodStep = ({
 };
 
 // src/withdraw/steps/withdraw-amount.tsx
-import { useLabels as useLabels13, useWithdrawEstimate as useWithdrawEstimate2 } from "@agg-build/hooks";
+import { useLabels as useLabels13, useWithdrawPreview } from "@agg-build/hooks";
 import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var formatRawTokenAmount = (rawAmount, decimals) => {
+  if (!rawAmount) return "0";
+  const raw = BigInt(rawAmount);
+  const divisor = BigInt(`1${"0".repeat(decimals)}`);
+  const whole = raw / divisor;
+  const remainder = raw % divisor;
+  if (remainder === BigInt(0)) return whole.toString();
+  return `${whole.toString()}.${remainder.toString().padStart(decimals, "0").replace(/0+$/, "")}`;
+};
+var parseTokenAmountToRaw = (amount, decimals) => {
+  const normalizedAmount = amount.trim();
+  if (!normalizedAmount || !/^\d*(?:\.\d*)?$/.test(normalizedAmount)) return null;
+  const [wholePart = "0", fractionalPart = ""] = normalizedAmount.split(".");
+  if (fractionalPart.length > decimals) return null;
+  const normalizedWhole = wholePart === "" ? "0" : wholePart;
+  const normalizedFraction = fractionalPart.padEnd(decimals, "0");
+  try {
+    return `${BigInt(normalizedWhole)}${normalizedFraction}`.replace(/^0+(?=\d)/, "");
+  } catch (e) {
+    return null;
+  }
+};
 var WithdrawAmountStep = ({
   amount,
   destinationWallet,
@@ -1883,8 +1905,10 @@ var WithdrawAmountStep = ({
   networkOptions,
   selectedToken,
   selectedNetwork,
+  destDecimals,
   isConfirming = false,
   error,
+  max = false,
   onBack,
   onAmountChange,
   onDestinationChange,
@@ -1893,18 +1917,31 @@ var WithdrawAmountStep = ({
   onMaxClick,
   onContinue
 }) => {
+  var _a, _b, _c, _d;
   const labels = useLabels13();
   const SOLANA_CHAIN_ID = "792703809";
   const isSolanaDest = selectedNetwork === SOLANA_CHAIN_ID;
   const trimmedDestination = destinationWallet.trim();
   const isValidAddress = isSolanaDest ? /^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(trimmedDestination) : /^0x[a-fA-F0-9]{40}$/.test(trimmedDestination);
   const isValid = Number(amount) > 0 && isValidAddress;
-  const isDisabled = !isValid || isConfirming;
-  const withdrawEstimate = useWithdrawEstimate2({
-    amount,
-    selectedToken,
-    selectedNetwork
+  const amountRaw = amount && Number(amount) > 0 ? parseTokenAmountToRaw(amount, destDecimals) : null;
+  const destinationChainId = Number(selectedNetwork) || null;
+  const preview = useWithdrawPreview({
+    amountRaw,
+    tokenSymbol: selectedToken || null,
+    destinationChainId,
+    destinationAddress: trimmedDestination || null,
+    max
   });
+  const previewUnviable = ((_a = preview.data) == null ? void 0 : _a.pricingStatus) === "unviable";
+  const previewUnviableMessage = previewUnviable ? ((_b = preview.data) == null ? void 0 : _b.maxDeliverableRaw) != null && BigInt(preview.data.maxDeliverableRaw) > BigInt(0) ? `Amount exceeds your withdrawable balance. Max: ~${formatRawTokenAmount(preview.data.maxDeliverableRaw, destDecimals)} ${selectedToken}` : (_d = (_c = preview.data) == null ? void 0 : _c.unviableReason) != null ? _d : "This amount can't be withdrawn right now." : null;
+  const previewLoading = preview.isFetching;
+  const isDisabled = !isValid || isConfirming || previewUnviable || previewLoading;
+  const withdrawEstimate = preview.data && preview.data.pricingStatus === "quoted" ? {
+    estimatedFees: preview.data.feeRaw != null ? `~${formatRawTokenAmount(preview.data.feeRaw, destDecimals)} ${selectedToken}` : "\u2014",
+    networkReserve: preview.data.networkFeeRaw != null ? `~${formatRawTokenAmount(preview.data.networkFeeRaw, destDecimals)} ${selectedToken}` : "\u2014",
+    youReceive: preview.data.receiveAmountRaw != null ? `~${formatRawTokenAmount(preview.data.receiveAmountRaw, destDecimals)} ${selectedToken}` : "\u2014"
+  } : null;
   const shouldShowWithdrawEstimate = Boolean(withdrawEstimate);
   return /* @__PURE__ */ jsxs14(Fragment8, { children: [
     /* @__PURE__ */ jsx14(
@@ -2007,17 +2044,19 @@ var WithdrawAmountStep = ({
             )
           ] })
         ] }),
-        shouldShowWithdrawEstimate && withdrawEstimate ? /* @__PURE__ */ jsx14(TransferFeeSummary, { estimate: withdrawEstimate, view: "withdraw" }) : null
+        shouldShowWithdrawEstimate && withdrawEstimate ? /* @__PURE__ */ jsx14(TransferFeeSummary, { estimate: withdrawEstimate, view: "withdraw" }) : null,
+        previewUnviableMessage ? /* @__PURE__ */ jsx14("p", { className: "agg-type-label text-agg-error", role: "alert", children: previewUnviableMessage }) : null
       ] }),
       /* @__PURE__ */ jsx14(
         Button,
         {
-          variant: isValid && !isConfirming ? "primary" : "secondary",
+          variant: isValid && !isConfirming && !previewUnviable && !previewLoading ? "primary" : "secondary",
           size: "large",
           className: "w-full",
           disabled: isDisabled,
+          prefix: previewLoading && !isConfirming ? /* @__PURE__ */ jsx14(LoadingIcon, { size: "small", className: "mr-2 text-current" }) : void 0,
           onClick: onContinue,
-          children: isConfirming ? labels.common.loading : labels.withdraw.walletFlow.confirm
+          children: isConfirming ? labels.common.loading : previewLoading ? labels.withdraw.walletFlow.calculatingFees : labels.withdraw.walletFlow.confirm
         }
       ),
       error ? /* @__PURE__ */ jsx14("p", { className: "agg-type-label text-agg-error text-center", role: "alert", children: error }) : null
@@ -2247,7 +2286,7 @@ var getTokenDecimals = (tokenSymbol, chainId) => {
   }
   return (_a = TOKEN_DECIMALS_BY_SYMBOL[normalizedSymbol]) != null ? _a : DEFAULT_TOKEN_DECIMALS;
 };
-var formatRawTokenAmount = (rawAmount, decimals) => {
+var formatRawTokenAmount2 = (rawAmount, decimals) => {
   const raw = BigInt(rawAmount);
   const divisor = BigInt(`1${"0".repeat(decimals)}`);
   const whole = raw / divisor;
@@ -2259,11 +2298,12 @@ var formatLifecycleTokenAmount = ({
   rawAmount,
   tokenSymbol,
   chainId
-}) => `${formatRawTokenAmount(rawAmount, getTokenDecimals(tokenSymbol, chainId))} ${tokenSymbol}`;
+}) => `${formatRawTokenAmount2(rawAmount, getTokenDecimals(tokenSymbol, chainId))} ${tokenSymbol}`;
 var buildTerminalSummary = ({
   fallbackSummary,
   lifecycleCompletedAmountRaw,
   lifecycleRequestedAmountRaw,
+  lifecycleFeeRaw,
   tokenSymbol,
   chainId
 }) => {
@@ -2273,24 +2313,25 @@ var buildTerminalSummary = ({
     tokenSymbol,
     chainId
   });
-  if (!lifecycleRequestedAmountRaw) {
-    return __spreadProps(__spreadValues({}, fallbackSummary), { amountReceived });
-  }
-  try {
-    const requestedRaw = BigInt(lifecycleRequestedAmountRaw);
-    const completedRaw = BigInt(lifecycleCompletedAmountRaw);
-    const feeRaw = requestedRaw > completedRaw ? requestedRaw - completedRaw : BigInt(0);
-    return __spreadProps(__spreadValues({}, fallbackSummary), {
-      amountReceived,
-      fees: formatLifecycleTokenAmount({
-        rawAmount: feeRaw.toString(),
-        tokenSymbol,
-        chainId
-      })
-    });
-  } catch (e) {
-    return __spreadProps(__spreadValues({}, fallbackSummary), { amountReceived });
+  let feeRaw = lifecycleFeeRaw;
+  if (feeRaw == null && lifecycleRequestedAmountRaw) {
+    try {
+      const r = BigInt(lifecycleRequestedAmountRaw);
+      const c = BigInt(lifecycleCompletedAmountRaw);
+      feeRaw = (r > c ? r - c : BigInt(0)).toString();
+    } catch (e) {
+      feeRaw = null;
+    }
   }
+  return __spreadValues(__spreadProps(__spreadValues({}, fallbackSummary), {
+    amountReceived
+  }), feeRaw != null ? {
+    fees: formatLifecycleTokenAmount({
+      rawAmount: feeRaw,
+      tokenSymbol,
+      chainId
+    })
+  } : {});
 };
 function isControlledWithdrawModalProps(props) {
   return "withdrawFlow" in props;
@@ -2394,6 +2435,7 @@ function WithdrawModalControlled({
     fallbackSummary: withdrawFlow.purchaseSummary,
     lifecycleCompletedAmountRaw: withdrawalLifecycleState.completedAmountRaw,
     lifecycleRequestedAmountRaw: withdrawalLifecycleState.requestedAmountRaw,
+    lifecycleFeeRaw: withdrawalLifecycleState.feeRaw,
     tokenSymbol: withdrawFlow.selectedToken,
     chainId: withdrawFlow.selectedNetwork
   });
@@ -2415,8 +2457,13 @@ function WithdrawModalControlled({
         networkOptions: withdrawNetworkOptions,
         selectedToken: withdrawFlow.selectedToken,
         selectedNetwork: withdrawFlow.selectedNetwork,
+        destDecimals: getTokenDecimals(
+          withdrawFlow.selectedToken,
+          withdrawFlow.selectedNetwork
+        ),
         isConfirming,
         error: confirmError,
+        max: withdrawFlow.isMax,
         onBack: handleBack,
         onAmountChange: onWithdrawAmountChange,
         onDestinationChange: onWithdrawDestinationChange,
@@ -3577,9 +3624,9 @@ var AccountsWalletsTab = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs24("div", { className: "agg-wallets-section flex flex-col gap-3", children: [
+    wallets.length > 0 ? /* @__PURE__ */ jsxs24("div", { className: "agg-wallets-section flex flex-col gap-3", children: [
       /* @__PURE__ */ jsx24(SectionTitle, { children: "Wallets" }),
-      /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-2", children: wallets.length > 0 ? wallets.map((wallet) => {
+      /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-2", children: wallets.map((wallet) => {
         var _a;
         return /* @__PURE__ */ jsx24(AccountRow, { className: "gap-4", children: /* @__PURE__ */ jsxs24("div", { className: "flex min-w-0 items-center gap-3", children: [
           /* @__PURE__ */ jsx24(
@@ -3592,8 +3639,8 @@ var AccountsWalletsTab = ({
           ),
           /* @__PURE__ */ jsx24(VerifiedBadge, {})
         ] }) }, `${wallet.chain}:${wallet.address}`);
-      }) : null })
-    ] })
+      }) })
+    ] }) : null
   ] });
 };
 AccountsWalletsTab.displayName = "AccountsWalletsTab";
@@ -4016,15 +4063,22 @@ var ProfileModal = ({
   const resolvedWallets = useMemo3(() => {
     var _a2, _b2;
     if (wallets) return wallets;
-    return (_b2 = (_a2 = user == null ? void 0 : user.wallets) == null ? void 0 : _a2.map((wallet) => {
+    const walletAccounts = (_b2 = (_a2 = user == null ? void 0 : user.accounts) == null ? void 0 : _a2.filter((account) => {
       var _a3;
+      const provider = (_a3 = account.provider) == null ? void 0 : _a3.toLowerCase();
+      return provider === "wallet" || provider === "solana_wallet";
+    })) != null ? _b2 : [];
+    return walletAccounts.filter((account) => Boolean(account.providerAccountId)).map((account) => {
+      var _a3, _b3;
+      const chain = ((_a3 = account.provider) == null ? void 0 : _a3.toLowerCase()) === "solana_wallet" ? "solana" : "evm";
+      const address = account.providerAccountId;
       return {
-        chain: wallet.chain,
-        address: wallet.address,
-        displayAddress: (_a3 = shortenAddress(wallet.address, { chain: wallet.chain })) != null ? _a3 : wallet.address
+        chain,
+        address,
+        displayAddress: (_b3 = shortenAddress(address, { chain })) != null ? _b3 : address
       };
-    })) != null ? _b2 : [];
-  }, [user == null ? void 0 : user.wallets, wallets]);
+    });
+  }, [user == null ? void 0 : user.accounts, wallets]);
   return /* @__PURE__ */ jsx26(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs26(
     Modal.Container,
     {
@@ -4227,6 +4281,7 @@ export {
   clearPendingCardSession,
   getPendingCardSession,
   DepositModal,
+  buildTerminalSummary,
   WithdrawModal,
   HowItWorksStep,
   ProfileSetupStep,

package/dist/{chunk-4CM4F4S6.mjs → chunk-C5M2OOM3.mjs}

@@ -17,7 +17,7 @@ import {
   selectPrimaryVenueMarket,
   skeletonViews,
   sortOutcomes
-} from "./chunk-2ZS3BPSF.mjs";
+} from "./chunk-DXF2LMNN.mjs";
 
 // src/trading/trading-context/index.tsx
 import { useEventTradingContext } from "@agg-build/hooks";

package/dist/{chunk-2ZS3BPSF.mjs → chunk-DXF2LMNN.mjs}

@@ -4955,7 +4955,7 @@ var Footer = ({
         "div",
         {
           className: cn(
-            "agg-footer-inner mx-auto flex h-10 w-full max-w-[1360px] px-6 lg:px-10 items-center justify-between",
+            "agg-footer-inner mx-auto flex h-10 w-full max-w-[1440px] px-6 lg:px-10 items-center justify-between",
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
@@ -7516,7 +7516,7 @@ var Header = ({
         "div",
         {
           className: cn(
-            "agg-header-inner mx-auto flex h-auto w-full max-w-[1360px] px-6 lg:px-10 items-center gap-2 md:gap-4 py-5",
+            "agg-header-inner mx-auto flex h-auto w-full max-w-[1440px] px-6 lg:px-10 items-center gap-2 md:gap-4 py-5",
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
@@ -8558,7 +8558,37 @@ StateMessage.displayName = "StateMessage";
 
 // src/primitives/tabs/index.tsx
 import { useLabels as useLabels16, useSdkUiConfig as useSdkUiConfig15 } from "@agg-build/hooks";
-import { useCallback as useCallback5, useEffect as useEffect8, useLayoutEffect as useLayoutEffect3, useMemo as useMemo7, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useMemo as useMemo7, useRef as useRef9, useState as useState10 } from "react";
+
+// src/shared/use-horizontal-scroll-state.ts
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
+var useHorizontalScrollState = () => {
+  const containerRef = useRef8(null);
+  const [canScrollLeft, setCanScrollLeft] = useState9(false);
+  const [canScrollRight, setCanScrollRight] = useState9(false);
+  const update = useCallback5(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > 4);
+    setCanScrollRight(maxScroll - el.scrollLeft > 4);
+  }, []);
+  useEffect8(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", update, { passive: true });
+    return () => el.removeEventListener("scroll", update);
+  }, [update]);
+  useEffect8(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [update]);
+  return { containerRef, canScrollLeft, canScrollRight, update };
+};
 
 // src/primitives/tabs/tabs.constants.ts
 var MOBILE_TABS_MEDIA_QUERY = "(max-width: 736px)";
@@ -8632,8 +8662,8 @@ var Tabs = ({
   const {
     features: { enableAnimations }
   } = useSdkUiConfig15();
-  const buttonRefs = useRef8([]);
-  const dragStateRef = useRef8({
+  const buttonRefs = useRef9([]);
+  const dragStateRef = useRef9({
     isPointerDown: false,
     isDragging: false,
     pointerId: null,
@@ -8641,20 +8671,21 @@ var Tabs = ({
     startClientY: 0,
     startScrollLeft: 0
   });
-  const suppressClickRef = useRef8(false);
+  const suppressClickRef = useRef9(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const [isMobileViewport, setIsMobileViewport] = useState9(false);
-  const [isDraggingTabs, setIsDraggingTabs] = useState9(false);
-  const [activeUnderlineStyle, setActiveUnderlineStyle] = useState9({
+  const [isMobileViewport, setIsMobileViewport] = useState10(false);
+  const [isDraggingTabs, setIsDraggingTabs] = useState10(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = useState10({
     transform: "translateX(0px)",
     width: 0,
     opacity: 0
   });
-  const [scrollAffordanceState, setScrollAffordanceState] = useState9({
-    showStart: false,
-    showEnd: false
-  });
-  const tabListRef = useRef8(null);
+  const {
+    containerRef: tabListRef,
+    canScrollLeft,
+    canScrollRight,
+    update: updateScrollState
+  } = useHorizontalScrollState();
   const isBarVariant = variant === "bar";
   const resolvedOverflowBehavior = useMemo7(() => {
     if (overflowBehavior) return overflowBehavior;
@@ -8663,7 +8694,7 @@ var Tabs = ({
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  useEffect8(() => {
+  useEffect9(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -8681,22 +8712,6 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const updateScrollAffordances = useCallback5(() => {
-    if (!shouldUseOverflowScroll) {
-      setScrollAffordanceState({
-        showStart: false,
-        showEnd: false
-      });
-      return;
-    }
-    const tabListElement = tabListRef.current;
-    if (!tabListElement) return;
-    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
-    setScrollAffordanceState({
-      showStart: tabListElement.scrollLeft > 4,
-      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
-    });
-  }, [shouldUseOverflowScroll]);
   const renderedItems = useMemo7(() => {
     return items.map((item) => __spreadProps(__spreadValues({}, item), {
       disabled: item.disabled || item.isComingSoon
@@ -8835,7 +8850,7 @@ var Tabs = ({
     event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const updateActiveUnderline = useCallback5(() => {
+  const updateActiveUnderline = useCallback6(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
         transform: "translateX(0px)",
@@ -8861,39 +8876,36 @@ var Tabs = ({
   useLayoutEffect3(() => {
     updateActiveUnderline();
   }, [updateActiveUnderline]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (isBarVariant || !shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const handleScroll = () => {
       updateActiveUnderline();
-      updateScrollAffordances();
     };
     tabListElement.addEventListener("scroll", handleScroll, { passive: true });
-    updateScrollAffordances();
     return () => {
       tabListElement.removeEventListener("scroll", handleScroll);
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  useEffect8(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  useEffect9(() => {
     if (!shouldUseOverflowScroll) return;
-    updateScrollAffordances();
-  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
-  useEffect8(() => {
-    if (isBarVariant && !shouldUseOverflowScroll) return;
+    updateScrollState();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
+  useEffect9(() => {
+    if (isBarVariant || !shouldUseOverflowScroll) return;
     if (typeof ResizeObserver === "undefined") return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const resizeObserver = new ResizeObserver(() => {
       updateActiveUnderline();
-      updateScrollAffordances();
     });
     resizeObserver.observe(tabListElement);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  useEffect8(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  useEffect9(() => {
     if (!shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
@@ -9040,7 +9052,7 @@ var Tabs = ({
                 "agg-tab-scroll-start",
                 "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+                canScrollLeft ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -9052,24 +9064,63 @@ var Tabs = ({
                 "agg-tab-scroll-end",
                 "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+                canScrollRight ? "opacity-100" : "opacity-0"
               )
             }
           )
         ] }) : null,
-        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ jsx127(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "agg-tab-scroll-end",
-              "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-[120px] overflow-hidden rounded-r-[8px] bg-linear-to-l from-agg-secondary from-[20%] via-agg-secondary/85 to-transparent",
-              getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-              scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
-            ),
-            children: /* @__PURE__ */ jsx127("span", { className: "absolute inset-y-0 right-3 inline-flex items-center text-agg-foreground", children: /* @__PURE__ */ jsx127(Icon, { name: "chevron-right", size: "small", color: "currentColor" }) })
-          }
-        ) : null
+        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ jsxs120(Fragment9, { children: [
+          /* @__PURE__ */ jsx127(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsLeft,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-start",
+                "absolute top-0 bottom-0 left-0 z-10 w-20 rounded-l-agg-lg",
+                "inline-flex items-center justify-start pl-2",
+                "bg-linear-to-r from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollLeft ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: -200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ jsx127(Icon, { name: "chevron-left", size: "small", color: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ jsx127(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsRight,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-end",
+                "absolute top-0 right-0 bottom-0 z-10 w-20 rounded-r-agg-lg",
+                "inline-flex items-center justify-end pr-2",
+                "bg-linear-to-l from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollRight ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: 200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ jsx127(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -9080,11 +9131,11 @@ Tabs.displayName = "Tabs";
 import * as RadixToast from "@radix-ui/react-toast";
 import {
   createContext,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useContext,
-  useEffect as useEffect9,
-  useRef as useRef9,
-  useState as useState10
+  useEffect as useEffect10,
+  useRef as useRef10,
+  useState as useState11
 } from "react";
 import { jsx as jsx128, jsxs as jsxs121 } from "react/jsx-runtime";
 var DEFAULT_DURATION_MS = 5e3;
@@ -9109,12 +9160,12 @@ function ToastProvider({
   swipeThreshold = 50,
   viewportClassName
 }) {
-  const [toasts, setToasts] = useState10([]);
-  const idRef = useRef9(0);
-  const dismiss = useCallback6((id) => {
+  const [toasts, setToasts] = useState11([]);
+  const idRef = useRef10(0);
+  const dismiss = useCallback7((id) => {
     setToasts((current) => current.filter((entry) => entry.id !== id));
   }, []);
-  const toast = useCallback6(
+  const toast = useCallback7(
     (message, options) => {
       const id = ++idRef.current;
       setToasts((current) => {
@@ -9159,31 +9210,31 @@ function ToastProvider({
   ] }) });
 }
 function ToastRow({ entry, onOpenChange }) {
-  const [isOpen, setIsOpen] = useState10(true);
+  const [isOpen, setIsOpen] = useState11(true);
   const hasAutoDismiss = entry.durationMs > 0 && Number.isFinite(entry.durationMs);
   const duration = hasAutoDismiss ? entry.durationMs : Number.POSITIVE_INFINITY;
-  const timeoutRef = useRef9(null);
-  const closeTimeoutRef = useRef9(null);
-  const remainingMsRef = useRef9(duration);
-  const timerStartedAtRef = useRef9(null);
-  const onOpenChangeRef = useRef9(onOpenChange);
+  const timeoutRef = useRef10(null);
+  const closeTimeoutRef = useRef10(null);
+  const remainingMsRef = useRef10(duration);
+  const timerStartedAtRef = useRef10(null);
+  const onOpenChangeRef = useRef10(onOpenChange);
   const rootStyle = {
     "--agg-toast-duration": `${duration}ms`
   };
-  useEffect9(() => {
+  useEffect10(() => {
     onOpenChangeRef.current = onOpenChange;
   }, [onOpenChange]);
-  const clearDismissTimer = useCallback6(() => {
+  const clearDismissTimer = useCallback7(() => {
     if (!timeoutRef.current) return;
     clearTimeout(timeoutRef.current);
     timeoutRef.current = null;
   }, []);
-  const clearCloseTimer = useCallback6(() => {
+  const clearCloseTimer = useCallback7(() => {
     if (!closeTimeoutRef.current) return;
     clearTimeout(closeTimeoutRef.current);
     closeTimeoutRef.current = null;
   }, []);
-  const handleOpenChange = useCallback6(
+  const handleOpenChange = useCallback7(
     (open) => {
       if (open) {
         clearCloseTimer();
@@ -9200,7 +9251,7 @@ function ToastRow({ entry, onOpenChange }) {
     },
     [clearCloseTimer, clearDismissTimer]
   );
-  const startDismissTimer = useCallback6(() => {
+  const startDismissTimer = useCallback7(() => {
     if (!hasAutoDismiss) return;
     clearDismissTimer();
     timerStartedAtRef.current = Date.now();
@@ -9208,18 +9259,18 @@ function ToastRow({ entry, onOpenChange }) {
       handleOpenChange(false);
     }, remainingMsRef.current);
   }, [clearDismissTimer, handleOpenChange, hasAutoDismiss]);
-  const handlePauseDismissTimer = useCallback6(() => {
+  const handlePauseDismissTimer = useCallback7(() => {
     if (!hasAutoDismiss || timerStartedAtRef.current === null) return;
     const elapsedMs = Date.now() - timerStartedAtRef.current;
     remainingMsRef.current = Math.max(0, remainingMsRef.current - elapsedMs);
     timerStartedAtRef.current = null;
     clearDismissTimer();
   }, [clearDismissTimer, hasAutoDismiss]);
-  const handleResumeDismissTimer = useCallback6(() => {
+  const handleResumeDismissTimer = useCallback7(() => {
     if (!hasAutoDismiss || timerStartedAtRef.current !== null) return;
     startDismissTimer();
   }, [hasAutoDismiss, startDismissTimer]);
-  useEffect9(() => {
+  useEffect10(() => {
     remainingMsRef.current = duration;
     startDismissTimer();
     return () => {