@deriv-web-design/ui 0.1.40 → 0.1.41

package/dist/index.mjs

@@ -4885,6 +4885,7 @@ var DayNightTransition = ({
   const [nightMarginStart, setNightMarginStart] = useState13("0px");
   const [nightMarginEnd, setNightMarginEnd] = useState13("0px");
   const [ixMedia, setIxMedia] = useState13("desktop");
+  const [isRtl, setIsRtl] = useState13(false);
   const webflowV2 = scrollPreset === "webflow-day-night-v2";
   useEffect11(() => {
     const mq = window.matchMedia("(max-width: 991px)");
@@ -4893,6 +4894,21 @@ var DayNightTransition = ({
     mq.addEventListener("change", sync);
     return () => mq.removeEventListener("change", sync);
   }, []);
+  useEffect11(() => {
+    const syncRtl = () => {
+      const doc = document.documentElement;
+      setIsRtl(
+        doc.getAttribute("dir") === "rtl" || doc.lang.toLowerCase().startsWith("ar")
+      );
+    };
+    syncRtl();
+    const mo = new MutationObserver(syncRtl);
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir", "lang"]
+    });
+    return () => mo.disconnect();
+  }, []);
   const MotionHeadline = headlineLevel === "h1" ? motion3.h1 : motion3.h2;
   useLayoutEffect2(() => {
     if (!inlineDayNightHeadline) return;
@@ -4981,7 +4997,7 @@ var DayNightTransition = ({
   const v2NightWordOp = useTransform2(progress, (t) => webflowV2NightWordOpacity(t, ixMedia));
   const v2DayHeight = useTransform2(
     progress,
-    (t) => ixMedia === "mobile" ? `${webflowV2DayClipPercent(t, ixMedia)}%` : "100vh"
+    (t) => ixMedia === "mobile" || isRtl ? `${webflowV2DayClipPercent(t, "mobile")}%` : "100vh"
   );
   const hasDescription = Boolean(dayDescription || nightDescription);
   const useInlineHeadline = Boolean(inlineDayNightHeadline);
@@ -5003,19 +5019,23 @@ var DayNightTransition = ({
             motion3.div,
             {
               className: "dnt__v2-bg-day trade-day-night_background-day is-alternative",
-              style: {
-                backgroundImage: `url(${dayImageUrl})`,
-                height: v2DayHeight
-              }
+              style: { height: v2DayHeight },
+              children: /* @__PURE__ */ jsx36(
+                "div",
+                {
+                  className: "dnt__v2-bg-media",
+                  style: { backgroundImage: `url(${dayImageUrl})` }
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx36("div", { className: "dnt__v2-bg-night trade-day-night_background-night is-alternative", children: /* @__PURE__ */ jsx36(
             "div",
             {
-              className: "dnt__v2-bg-night trade-day-night_background-night is-alternative",
+              className: "dnt__v2-bg-media",
               style: { backgroundImage: `url(${nightImageUrl})` }
             }
-          )
+          ) })
         ] }),
         /* @__PURE__ */ jsxs33("div", { className: webflowV2 ? "dnt__sticky dnt__sticky--webflow-v2" : "dnt__sticky", children: [
           !webflowV2 && /* @__PURE__ */ jsxs33(Fragment5, { children: [
@@ -7278,6 +7298,9 @@ var CoralBanner = ({
   ] }) }) });
 };
 
+// templates/FeatureAwards/FeatureAwards.tsx
+import { useEffect as useEffect17, useState as useState19 } from "react";
+
 // assets/award-leaf-left.png
 var award_leaf_left_default = "data:image/png;base64,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";
 
@@ -7319,9 +7342,12 @@ var LaurelIcon = ({ side }) => /* @__PURE__ */ jsx52(
     draggable: false
   }
 );
-var AwardBadge2 = ({ award }) => /* @__PURE__ */ jsxs48("div", { className: "fa__item", role: "listitem", children: [
+var AwardBadge2 = ({
+  award,
+  textDir
+}) => /* @__PURE__ */ jsxs48("div", { className: "fa__item", role: "listitem", dir: "ltr", children: [
   /* @__PURE__ */ jsx52(LaurelIcon, { side: "left" }),
-  /* @__PURE__ */ jsxs48("div", { className: "fa__item-text", children: [
+  /* @__PURE__ */ jsxs48("div", { className: "fa__item-text", dir: textDir, children: [
     /* @__PURE__ */ jsx52("p", { className: "fa__item-title", children: award.title }),
     /* @__PURE__ */ jsx52("p", { className: "fa__item-subtitle", children: award.subtitle })
   ] }),
@@ -7334,6 +7360,21 @@ var FeatureAwards = ({
   className,
   ...props
 }) => {
+  const [textDir, setTextDir] = useState19("ltr");
+  useEffect17(() => {
+    const sync = () => {
+      setTextDir(
+        document.documentElement.getAttribute("dir") === "rtl" ? "rtl" : "ltr"
+      );
+    };
+    sync();
+    const mo = new MutationObserver(sync);
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir"]
+    });
+    return () => mo.disconnect();
+  }, []);
   if (!awards || awards.length === 0) return null;
   const trackStyle = {
     "--fa-duration": `${autoScrollDuration}s`
@@ -7345,16 +7386,16 @@ var FeatureAwards = ({
       ...props,
       children: /* @__PURE__ */ jsxs48("div", { className: "fa__inner", children: [
         title && /* @__PURE__ */ jsx52("h2", { className: "fa__title", children: title }),
-        /* @__PURE__ */ jsx52("div", { className: "fa__grid", role: "list", children: awards.map((award, i) => /* @__PURE__ */ jsx52(AwardBadge2, { award }, `g-${i}`)) }),
+        /* @__PURE__ */ jsx52("div", { className: "fa__grid", role: "list", children: awards.map((award, i) => /* @__PURE__ */ jsx52(AwardBadge2, { award, textDir }, `g-${i}`)) }),
         /* @__PURE__ */ jsx52("div", { className: "fa__scroller", dir: "ltr", children: /* @__PURE__ */ jsxs48("div", { className: "fa__track fa__track--auto", style: trackStyle, children: [
-          /* @__PURE__ */ jsx52("div", { className: "fa__track-group", role: "list", children: awards.map((award, i) => /* @__PURE__ */ jsx52(AwardBadge2, { award }, `m-${i}`)) }),
+          /* @__PURE__ */ jsx52("div", { className: "fa__track-group", role: "list", children: awards.map((award, i) => /* @__PURE__ */ jsx52(AwardBadge2, { award, textDir }, `m-${i}`)) }),
           /* @__PURE__ */ jsx52(
             "div",
             {
               className: "fa__track-group",
               role: "presentation",
               "aria-hidden": "true",
-              children: awards.map((award, i) => /* @__PURE__ */ jsx52(AwardBadge2, { award }, `m-dup-${i}`))
+              children: awards.map((award, i) => /* @__PURE__ */ jsx52(AwardBadge2, { award, textDir }, `m-dup-${i}`))
             }
           )
         ] }) })
@@ -7441,7 +7482,7 @@ var FeatureBlog = ({
 };
 
 // templates/FeatureBlogCategories/FeatureBlogCategories.tsx
-import { useMemo as useMemo3, useState as useState19 } from "react";
+import { useMemo as useMemo3, useState as useState20 } from "react";
 import { jsx as jsx54, jsxs as jsxs50 } from "react/jsx-runtime";
 var isExternalUrl = (href) => Boolean(href && /^https?:\/\//i.test(href));
 var FEATURE_BLOG_CATEGORIES_TEXT_CONTENT = {
@@ -7505,8 +7546,8 @@ var FeatureBlogCategories = ({
   className,
   ...props
 }) => {
-  const [search, setSearch] = useState19("");
-  const [internalActiveId, setInternalActiveId] = useState19(defaultActiveCategoryId ?? allCategoryId);
+  const [search, setSearch] = useState20("");
+  const [internalActiveId, setInternalActiveId] = useState20(defaultActiveCategoryId ?? allCategoryId);
   const isControlled = activeCategoryId !== void 0;
   const activeId = isControlled ? activeCategoryId : internalActiveId;
   const tabs = useMemo3(
@@ -7614,7 +7655,7 @@ var HelpCentreCategories = ({
 };
 
 // templates/HelpCentreSubCategories/HelpCentreSubCategories.tsx
-import { useMemo as useMemo4, useState as useState20 } from "react";
+import { useMemo as useMemo4, useState as useState21 } from "react";
 import { jsx as jsx56, jsxs as jsxs52 } from "react/jsx-runtime";
 var externalLinkRel4 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
 var QuestionCard = ({ item }) => {
@@ -7631,7 +7672,7 @@ var HelpCentreSubCategories = ({
   noResultsText = 'No results found for "{query}"',
   onSearchChange
 }) => {
-  const [search, setSearch] = useState20("");
+  const [search, setSearch] = useState21("");
   const filtered = useMemo4(() => {
     const q = search.trim().toLowerCase();
     if (!q) return items;
@@ -7663,7 +7704,7 @@ var HelpCentreSubCategories = ({
 };
 
 // templates/HelpCenterPage/HelpCenterPage.tsx
-import { useMemo as useMemo5, useState as useState21 } from "react";
+import { useMemo as useMemo5, useState as useState22 } from "react";
 import { jsx as jsx57, jsxs as jsxs53 } from "react/jsx-runtime";
 var externalLinkRel5 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
 var ChevronDownIcon5 = () => /* @__PURE__ */ jsx57("svg", { "aria-hidden": "true", fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx57("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) });
@@ -7729,9 +7770,9 @@ var HelpCenterPage = ({
   articlesSheetTitle = "Articles in this section",
   className
 }) => {
-  const [search, setSearch] = useState21("");
-  const [internalActiveId, setInternalActiveId] = useState21(defaultActiveQuestionId ?? questions[0]?.id);
-  const [sheetOpen, setSheetOpen] = useState21(false);
+  const [search, setSearch] = useState22("");
+  const [internalActiveId, setInternalActiveId] = useState22(defaultActiveQuestionId ?? questions[0]?.id);
+  const [sheetOpen, setSheetOpen] = useState22(false);
   const isControlled = activeQuestionId !== void 0;
   const activeId = isControlled ? activeQuestionId : internalActiveId;
   const activeItem = questions.find((item) => item.id === activeId);
@@ -7798,7 +7839,7 @@ var HelpCenterPage = ({
 };
 
 // templates/FeatureBlogPage/FeatureBlogPage.tsx
-import { useEffect as useEffect17, useMemo as useMemo6, useState as useState22 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo6, useState as useState23 } from "react";
 
 // assets/share-link.png
 var share_link_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABYklEQVR4AezVgU3DMBAFUMRAzMEQzMEQzMEQzMFE+FX5kuNGF4cgIVWp8us73/n/76vaPj/98+sycE3gmsBDTuCl/bQELayfv5zAW5P6avgYwEzb2n7OGBiJGYjK9xLoYWhJ75ffGCCUm2bF/N7e4HVZxS28Pc7cgvHtiAG3ITiSZd+tIRrizyXRs4TrZdYAgowyxG4IcqyjMXupOS+/w4wBh3txoojsqUVky0D20uPcCnsGCBByCEnEe2JjVtOj3wpiEKcuXmHPwJZ4SBEhloM8kPdnmUxttVYGeoLcfHV4SJiBUbw8WxkI/+ieSGo+CoL29IkPGa8MIIvQuBKz1xvQf0gcQWXArfQgtvZgoK8zAnrUyrFrCmYMIAZnmBEDEWAECAd6p1AZ6MkI+hU0YjEQIMwE9P1qU6gMIAgpITlkT3waewYIEHRDfzIgB7XTmDFwWqQiuAxcE3j8CVTfALUfAAAA//85/ClxAAAABklEQVQDABFpTkF24Li2AAAAAElFTkSuQmCC";
@@ -7855,7 +7896,7 @@ var TocCard = ({
   idSuffix,
   collapsible
 }) => {
-  const [open, setOpen] = useState22(defaultOpen);
+  const [open, setOpen] = useState23(defaultOpen);
   const panelId = `fbp-toc-panel-${idSuffix}`;
   const isOpen = collapsible ? open : true;
   const list = /* @__PURE__ */ jsx58("ol", { className: "fbp-tocList", id: panelId, children: headings.map((heading) => /* @__PURE__ */ jsx58("li", { className: "fbp-tocItem", children: /* @__PURE__ */ jsx58(
@@ -7897,7 +7938,7 @@ var ShareRow = ({
   onShare,
   copiedLabel
 }) => {
-  const [copied, setCopied] = useState22(false);
+  const [copied, setCopied] = useState23(false);
   const handleCopy = async () => {
     onShare?.("copy");
     try {
@@ -8007,8 +8048,8 @@ var FeatureBlogPage = ({
     ).map(({ block, i }) => ({ id: headingIds.get(i), text: block.text ?? "" })),
     [content, headingIds]
   );
-  const [activeId, setActiveId] = useState22(null);
-  useEffect17(() => {
+  const [activeId, setActiveId] = useState23(null);
+  useEffect18(() => {
     if (typeof IntersectionObserver === "undefined" || headings.length === 0) return;
     const elements = headings.map((heading) => document.getElementById(heading.id)).filter((el) => el !== null);
     if (elements.length === 0) return;
@@ -8222,7 +8263,7 @@ var ParallaxBanner = ({
 };
 
 // templates/TradingCalculator/TradingCalculator.tsx
-import { useCallback as useCallback6, useEffect as useEffect18, useId as useId6, useMemo as useMemo7, useRef as useRef21, useState as useState23 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect19, useId as useId6, useMemo as useMemo7, useRef as useRef21, useState as useState24 } from "react";
 
 // templates/TradingCalculator/TradingCalculator.types.ts
 var DEFAULT_TRADING_CALCULATOR_LABELS = {
@@ -8313,7 +8354,7 @@ function useExchangeRates(wsUrl) {
     /* @__PURE__ */ new Map()
   );
   const cacheRef = useRef21(/* @__PURE__ */ new Map());
-  useEffect18(() => {
+  useEffect19(() => {
     const pending = pendingRef.current;
     return () => {
       socketRef.current?.close();
@@ -8384,11 +8425,11 @@ function useExchangeRates(wsUrl) {
   return getRates;
 }
 function useSymbols(symbolsProp, endpoint) {
-  const [state, setState] = useState23(
+  const [state, setState] = useState24(
     symbolsProp ? { status: "ready", data: symbolsProp } : { status: "loading" }
   );
-  const [retryToken, setRetryToken] = useState23(0);
-  useEffect18(() => {
+  const [retryToken, setRetryToken] = useState24(0);
+  useEffect19(() => {
     if (symbolsProp) {
       setState({ status: "ready", data: symbolsProp });
       return;
@@ -8440,9 +8481,9 @@ var SymbolCombobox = ({
   inputId,
   copy
 }) => {
-  const [query, setQuery] = useState23("");
-  const [isOpen, setIsOpen] = useState23(false);
-  const [activeIndex, setActiveIndex] = useState23(-1);
+  const [query, setQuery] = useState24("");
+  const [isOpen, setIsOpen] = useState24(false);
+  const [activeIndex, setActiveIndex] = useState24(-1);
   const wrapperRef = useRef21(null);
   const listboxId = useId6();
   const isLoading = symbolsState.status === "loading";
@@ -8457,7 +8498,7 @@ var SymbolCombobox = ({
   }, [allSymbols, query]);
   const grouped = useMemo7(() => groupByAssetClass(filtered), [filtered]);
   const flatOptions = useMemo7(() => grouped.flatMap(([, items]) => items), [grouped]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!isOpen) return;
     const handlePointerDown = (event) => {
       if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
@@ -8599,15 +8640,15 @@ var TradingCalculator = ({
   const showTradeVolume = variant === "main";
   const [symbolsState, retrySymbols] = useSymbols(symbolsProp, symbolsEndpoint);
   const getRates = useExchangeRates(exchangeRateWsUrl);
-  const [selectedSymbol, setSelectedSymbol] = useState23(null);
-  const [volumeInLots, setVolumeInLots] = useState23("");
-  const [assetPrice, setAssetPrice] = useState23("");
-  const [errors, setErrors] = useState23({});
-  const [results, setResults] = useState23(null);
-  const [isCalculating, setIsCalculating] = useState23(false);
-  const [calcError, setCalcError] = useState23(null);
+  const [selectedSymbol, setSelectedSymbol] = useState24(null);
+  const [volumeInLots, setVolumeInLots] = useState24("");
+  const [assetPrice, setAssetPrice] = useState24("");
+  const [errors, setErrors] = useState24({});
+  const [results, setResults] = useState24(null);
+  const [isCalculating, setIsCalculating] = useState24(false);
+  const [calcError, setCalcError] = useState24(null);
   const didPreselect = useRef21(false);
-  useEffect18(() => {
+  useEffect19(() => {
     if (didPreselect.current || !defaultSymbol || symbolsState.status !== "ready") return;
     const match = symbolsState.data.find((item) => item.symbol === defaultSymbol);
     if (match) {
@@ -8817,7 +8858,7 @@ var TradingCalculator = ({
 };
 
 // templates/TradingCalculatorHowTo/TradingCalculatorHowTo.tsx
-import { Fragment as Fragment12, useEffect as useEffect19, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState24 } from "react";
+import { Fragment as Fragment12, useEffect as useEffect20, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState25 } from "react";
 
 // templates/TradingCalculatorHowTo/TradingCalculatorHowTo.types.ts
 var DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS = {
@@ -9018,7 +9059,7 @@ function swapTabsForLabels(labels) {
     { id: "percentage", label: percentage }
   ];
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect3 : useEffect19;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect3 : useEffect20;
 var FormulaBlockView = ({ block }) => {
   if (block.type === "footnote") {
     return /* @__PURE__ */ jsx61("p", { className: "tchow-footnote", children: block.content });
@@ -9042,7 +9083,7 @@ var ConnectorArrow = () => /* @__PURE__ */ jsxs57("svg", { width: "8", height: "
 var CalculationStrip = ({ tokens }) => {
   const wrapperRef = useRef22(null);
   const stripRef = useRef22(null);
-  const [fit, setFit] = useState24({ scale: 1, naturalHeight: 0 });
+  const [fit, setFit] = useState25({ scale: 1, naturalHeight: 0 });
   useIsomorphicLayoutEffect(() => {
     const wrapper = wrapperRef.current;
     const strip = stripRef.current;
@@ -9126,8 +9167,8 @@ var TradingCalculatorHowTo = ({
   ...props
 }) => {
   const isSwap = variant === "swap-points" || variant === "swap-percentage";
-  const [swapTab, setSwapTab] = useState24(() => swapModeForVariant(variant));
-  useEffect19(() => {
+  const [swapTab, setSwapTab] = useState25(() => swapModeForVariant(variant));
+  useEffect20(() => {
     setSwapTab(swapModeForVariant(variant));
   }, [variant]);
   const baseContent = variant === "pip" ? PIP_CONTENT : isSwap ? swapTab === "percentage" ? SWAP_PERCENTAGE_CONTENT : SWAP_POINTS_CONTENT : MARGIN_CONTENT;
@@ -9172,11 +9213,11 @@ var TradingCalculatorHowTo = ({
 // templates/CryptoTradeConverter/CryptoTradeConverter.tsx
 import {
   useCallback as useCallback7,
-  useEffect as useEffect21,
+  useEffect as useEffect22,
   useId as useId7,
   useMemo as useMemo8,
   useRef as useRef23,
-  useState as useState26
+  useState as useState27
 } from "react";
 
 // templates/cryptoMarketData/origins.ts
@@ -10012,7 +10053,7 @@ function getSharedMarketDataClient(apiOrigin) {
 }
 
 // templates/cryptoMarketData/useCryptoMarketData.ts
-import { useEffect as useEffect20, useState as useState25 } from "react";
+import { useEffect as useEffect21, useState as useState26 } from "react";
 var EMPTY = {
   kind: "spot",
   status: "idle",
@@ -10025,8 +10066,8 @@ var EMPTY = {
 };
 function useCryptoMarketData(options) {
   const { kind, kline, apiOrigin, enabled = true } = options;
-  const [snapshot, setSnapshot] = useState25({ ...EMPTY, kind });
-  useEffect20(() => {
+  const [snapshot, setSnapshot] = useState26({ ...EMPTY, kind });
+  useEffect21(() => {
     if (!enabled || typeof window === "undefined") return;
     const client = getSharedMarketDataClient(apiOrigin);
     return client.subscribe({ kind, kline }, setSnapshot);
@@ -10076,7 +10117,7 @@ function matchPair(rows, defaultPair) {
   return rows.find((r) => r.id === needle) ?? rows.find((r) => r.name.toLowerCase() === needle) ?? rows.find((r) => r.name.replace("/", "").toLowerCase() === needle.replace("/", "")) ?? rows[0] ?? null;
 }
 function CoinAvatar({ base, icon, label }) {
-  const [failed, setFailed] = useState26(false);
+  const [failed, setFailed] = useState27(false);
   if (failed) {
     return /* @__PURE__ */ jsx62("span", { className: "ctc-avatar ctc-avatar--fallback", "aria-hidden": "true", children: base.slice(0, 3) });
   }
@@ -10132,18 +10173,18 @@ var CryptoTradeConverter = ({
   const statusId = `ctc-status-${reactId}`;
   const snapshot = useCryptoMarketData({ kind: "spot", kline: false, apiOrigin });
   const rows = useMemo8(() => [...snapshot.rows.values()], [snapshot.rows]);
-  const [side, setSide] = useState26("buy");
-  const [selectedId, setSelectedId] = useState26(null);
-  const [pay, setPay] = useState26("");
-  const [receive, setReceive] = useState26("");
-  const [edited, setEdited] = useState26("pay");
-  const [pickerOpen, setPickerOpen] = useState26(false);
-  const [activeOption, setActiveOption] = useState26(0);
+  const [side, setSide] = useState27("buy");
+  const [selectedId, setSelectedId] = useState27(null);
+  const [pay, setPay] = useState27("");
+  const [receive, setReceive] = useState27("");
+  const [edited, setEdited] = useState27("pay");
+  const [pickerOpen, setPickerOpen] = useState27(false);
+  const [activeOption, setActiveOption] = useState27(0);
   const rootRef = useRef23(null);
   const buttonRef = useRef23(null);
   const listRef = useRef23(null);
   const selected = (selectedId ? rows.find((r) => r.id === selectedId) : null) ?? matchPair(rows, defaultPair);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!selectedId && selected) setSelectedId(selected.id);
   }, [selected, selectedId]);
   const conversion = useMemo8(
@@ -10160,7 +10201,7 @@ var CryptoTradeConverter = ({
     }),
     [side, selected?.last, pay, receive, edited, copy.waitingForPrice, copy.invalidAmount]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     if (edited === "pay") setReceive(conversion.receive);
     else setPay(conversion.pay);
   }, [conversion.pay, conversion.receive, edited]);
@@ -10169,7 +10210,7 @@ var CryptoTradeConverter = ({
     setPickerOpen(false);
     buttonRef.current?.focus();
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!pickerOpen) return;
     const onDoc = (event) => {
       if (!rootRef.current?.contains(event.target)) setPickerOpen(false);
@@ -10217,7 +10258,7 @@ var CryptoTradeConverter = ({
       closePicker();
     }
   };
-  useEffect21(() => {
+  useEffect22(() => {
     if (!pickerOpen) return;
     listRef.current?.querySelectorAll('[role="option"]')[activeOption]?.scrollIntoView({
       block: "nearest"
@@ -10479,7 +10520,7 @@ var CryptoTradeConverter = ({
 };
 
 // templates/CryptoMarketsTable/CryptoMarketsTable.tsx
-import { useEffect as useEffect22, useId as useId8, useMemo as useMemo9, useRef as useRef24, useState as useState27 } from "react";
+import { useEffect as useEffect23, useId as useId8, useMemo as useMemo9, useRef as useRef24, useState as useState28 } from "react";
 
 // templates/CryptoMarketsTable/CryptoMarketsTable.types.ts
 var DEFAULT_CRYPTO_MARKETS_TABLE_TITLE = "Explore the markets";
@@ -10512,7 +10553,7 @@ function mergeLabels3(overrides) {
   return { ...DEFAULT_CRYPTO_MARKETS_TABLE_LABELS, ...overrides };
 }
 function CoinAvatar2({ base, icon }) {
-  const [failed, setFailed] = useState27(false);
+  const [failed, setFailed] = useState28(false);
   if (failed) {
     return /* @__PURE__ */ jsx63("span", { className: "cmt-avatar cmt-avatar--fallback", "aria-hidden": "true", children: base.slice(0, 3) });
   }
@@ -10537,7 +10578,7 @@ function Sparkline({
   reducedMotion
 }) {
   const canvasRef = useRef24(null);
-  useEffect22(() => {
+  useEffect23(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const points = values.map(Number).filter(Number.isFinite);
@@ -10622,15 +10663,15 @@ var CryptoMarketsTable = ({
 }) => {
   const copy = mergeLabels3(labelsProp);
   const reactId = useId8().replace(/:/g, "");
-  const [kind, setKind] = useState27(initialMarket);
-  const [quote, setQuote] = useState27(initialQuoteCurrency.toUpperCase());
-  const [sortKey, setSortKey] = useState27("last");
-  const [sortDir, setSortDir] = useState27("desc");
-  const [reducedMotion, setReducedMotion] = useState27(false);
+  const [kind, setKind] = useState28(initialMarket);
+  const [quote, setQuote] = useState28(initialQuoteCurrency.toUpperCase());
+  const [sortKey, setSortKey] = useState28("last");
+  const [sortDir, setSortDir] = useState28("desc");
+  const [reducedMotion, setReducedMotion] = useState28(false);
   const scrollRef = useRef24(null);
-  const [scrolled, setScrolled] = useState27(false);
+  const [scrolled, setScrolled] = useState28(false);
   const snapshot = useCryptoMarketData({ kind, kline: true, apiOrigin });
-  useEffect22(() => {
+  useEffect23(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     const update = () => setReducedMotion(mq.matches);
@@ -10638,7 +10679,7 @@ var CryptoMarketsTable = ({
     mq.addEventListener?.("change", update);
     return () => mq.removeEventListener?.("change", update);
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     const node = scrollRef.current;
     if (!node) return;
     const onScroll = () => setScrolled(node.scrollLeft > 0);
@@ -10646,7 +10687,7 @@ var CryptoMarketsTable = ({
     node.addEventListener("scroll", onScroll, { passive: true });
     return () => node.removeEventListener("scroll", onScroll);
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     if (snapshot.quotes.length && !snapshot.quotes.includes(quote)) {
       setQuote(snapshot.quotes[0]);
     }
@@ -10786,7 +10827,7 @@ var CryptoMarketsTable = ({
 };
 
 // templates/FeatureOffices/FeatureOffices.tsx
-import { useMemo as useMemo10, useState as useState28 } from "react";
+import { useMemo as useMemo10, useState as useState29 } from "react";
 import { jsx as jsx64, jsxs as jsxs60 } from "react/jsx-runtime";
 var isExternalUrl2 = (href) => Boolean(href && /^https?:\/\//i.test(href));
 var FEATURE_OFFICES_TEXT_CONTENT = {
@@ -10840,7 +10881,7 @@ var FeatureOffices = ({
   className,
   ...props
 }) => {
-  const [internalActiveId, setInternalActiveId] = useState28(
+  const [internalActiveId, setInternalActiveId] = useState29(
     defaultActiveRegionId ?? regions[0]?.id
   );
   const isControlled = activeRegionId !== void 0;
@@ -11104,10 +11145,10 @@ var ResourceBanner = ({
 
 // templates/OptionsTypes/OptionsTypes.tsx
 import {
-  useEffect as useEffect23,
+  useEffect as useEffect24,
   useId as useId9,
   useRef as useRef25,
-  useState as useState29
+  useState as useState30
 } from "react";
 import { Fragment as Fragment15, jsx as jsx69, jsxs as jsxs65 } from "react/jsx-runtime";
 var OPTIONS_TYPES_PLACEHOLDER_ITEMS = [
@@ -11315,10 +11356,10 @@ function TogglePanel({
   setPlaying
 }) {
   const animations = item.animations;
-  const [activeIndex, setActiveIndex] = useState29(0);
+  const [activeIndex, setActiveIndex] = useState30(0);
   const switchRefs = useRef25([]);
   const safeIndex = Math.min(activeIndex, Math.max(animations.length - 1, 0));
-  useEffect23(() => {
+  useEffect24(() => {
     setPlaying({});
   }, [safeIndex, setPlaying]);
   const hasMarkets = Boolean(item.markets && item.markets.length > 0);
@@ -11441,15 +11482,15 @@ function OptionsTypes({
   ...props
 }) {
   const usableItems = Array.isArray(items) ? items.filter((item) => item?.id) : [];
-  const [internalActiveId, setInternalActiveId] = useState29(
+  const [internalActiveId, setInternalActiveId] = useState30(
     defaultActiveId ?? usableItems[0]?.id ?? ""
   );
   const selectedId = usableItems.find((item) => item.id === activeId)?.id ?? usableItems.find((item) => item.id === internalActiveId)?.id ?? usableItems[0]?.id ?? "";
-  const [playing, setPlaying] = useState29({});
+  const [playing, setPlaying] = useState30({});
   const generatedId = useId9().replace(/:/g, "");
   const tabPrefix = `options-types-${generatedId}`;
   const Heading = headingLevel;
-  useEffect23(() => {
+  useEffect24(() => {
     setPlaying({});
   }, [selectedId]);
   const selectItem = (id) => {
@@ -11865,7 +11906,7 @@ var CountryLinkGrid = ({
 };
 
 // templates/DocumentChips/DocumentChips.tsx
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 import { jsx as jsx72, jsxs as jsxs68 } from "react/jsx-runtime";
 var DEFAULT_GROUPS = [
   {
@@ -11969,7 +12010,7 @@ var DocumentChips = ({
 }) => {
   const resolvedGroups = groups && groups.length > 0 ? groups : DEFAULT_GROUPS;
   const groupKeys = resolvedGroups.map((group, i) => String(group.id ?? i));
-  const [openKeys, setOpenKeys] = useState30(void 0);
+  const [openKeys, setOpenKeys] = useState31(void 0);
   const resolvedOpenKeys = openKeys === void 0 ? groupKeys.slice(0, 1) : openKeys;
   const handleToggle = (key, next) => {
     setOpenKeys((current) => {
@@ -12020,7 +12061,7 @@ var DocumentChips = ({
 };
 
 // components/LinkModal/LinkModal.tsx
-import { useCallback as useCallback8, useEffect as useEffect24, useId as useId10, useRef as useRef26 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect25, useId as useId10, useRef as useRef26 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx73, jsxs as jsxs69 } from "react/jsx-runtime";
 var XMarkIcon3 = () => /* @__PURE__ */ jsx73(
@@ -12072,7 +12113,7 @@ var LinkModal = ({
       (el) => el.offsetParent !== null || el === document.activeElement
     );
   }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!open || typeof document === "undefined") return;
     triggerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     panelRef.current?.focus();
@@ -12082,7 +12123,7 @@ var LinkModal = ({
       if (trigger && document.contains(trigger)) trigger.focus();
     };
   }, [open]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!open || typeof document === "undefined") return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -12093,7 +12134,7 @@ var LinkModal = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!open || typeof document === "undefined") return;
     const body = document.body;
     const previousOverflow = body.style.overflow;
@@ -12233,7 +12274,7 @@ var LanguageSelectModal = ({
 };
 
 // templates/AffiliatesSlider/AffiliatesSlider.tsx
-import { useCallback as useCallback9, useMemo as useMemo11, useState as useState31 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo11, useState as useState32 } from "react";
 import { jsx as jsx75, jsxs as jsxs71 } from "react/jsx-runtime";
 var ArrowIcon2 = () => /* @__PURE__ */ jsx75(
   "svg",
@@ -12318,7 +12359,7 @@ var AffiliatesSlider = ({
   className,
   ...props
 }) => {
-  const [internalValue, setInternalValue] = useState31(defaultValue);
+  const [internalValue, setInternalValue] = useState32(defaultValue);
   const currentValue = value ?? internalValue;
   const handleChange = useCallback9(
     (next) => {