@deriv-web-design/ui 0.1.40 → 0.1.41

package/dist/index.js

@@ -5003,6 +5003,7 @@ var DayNightTransition = ({
   const [nightMarginStart, setNightMarginStart] = (0, import_react20.useState)("0px");
   const [nightMarginEnd, setNightMarginEnd] = (0, import_react20.useState)("0px");
   const [ixMedia, setIxMedia] = (0, import_react20.useState)("desktop");
+  const [isRtl, setIsRtl] = (0, import_react20.useState)(false);
   const webflowV2 = scrollPreset === "webflow-day-night-v2";
   (0, import_react20.useEffect)(() => {
     const mq = window.matchMedia("(max-width: 991px)");
@@ -5011,6 +5012,21 @@ var DayNightTransition = ({
     mq.addEventListener("change", sync);
     return () => mq.removeEventListener("change", sync);
   }, []);
+  (0, import_react20.useEffect)(() => {
+    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" ? import_framer_motion3.motion.h1 : import_framer_motion3.motion.h2;
   (0, import_react20.useLayoutEffect)(() => {
     if (!inlineDayNightHeadline) return;
@@ -5099,7 +5115,7 @@ var DayNightTransition = ({
   const v2NightWordOp = (0, import_framer_motion3.useTransform)(progress, (t) => webflowV2NightWordOpacity(t, ixMedia));
   const v2DayHeight = (0, import_framer_motion3.useTransform)(
     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);
@@ -5121,19 +5137,23 @@ var DayNightTransition = ({
             import_framer_motion3.motion.div,
             {
               className: "dnt__v2-bg-day trade-day-night_background-day is-alternative",
-              style: {
-                backgroundImage: `url(${dayImageUrl})`,
-                height: v2DayHeight
-              }
+              style: { height: v2DayHeight },
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "div",
+                {
+                  className: "dnt__v2-bg-media",
+                  style: { backgroundImage: `url(${dayImageUrl})` }
+                }
+              )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "dnt__v2-bg-night trade-day-night_background-night is-alternative", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
-              className: "dnt__v2-bg-night trade-day-night_background-night is-alternative",
+              className: "dnt__v2-bg-media",
               style: { backgroundImage: `url(${nightImageUrl})` }
             }
-          )
+          ) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: webflowV2 ? "dnt__sticky dnt__sticky--webflow-v2" : "dnt__sticky", children: [
           !webflowV2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
@@ -7390,6 +7410,9 @@ var CoralBanner = ({
   ] }) }) });
 };
 
+// templates/FeatureAwards/FeatureAwards.tsx
+var import_react29 = require("react");
+
 // assets/award-leaf-left.png
 var award_leaf_left_default = "data:image/png;base64,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";
 
@@ -7431,9 +7454,12 @@ var LaurelIcon = ({ side }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     draggable: false
   }
 );
-var AwardBadge2 = ({ award }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fa__item", role: "listitem", children: [
+var AwardBadge2 = ({
+  award,
+  textDir
+}) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fa__item", role: "listitem", dir: "ltr", children: [
   /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(LaurelIcon, { side: "left" }),
-  /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fa__item-text", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fa__item-text", dir: textDir, children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "fa__item-title", children: award.title }),
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "fa__item-subtitle", children: award.subtitle })
   ] }),
@@ -7446,6 +7472,21 @@ var FeatureAwards = ({
   className,
   ...props
 }) => {
+  const [textDir, setTextDir] = (0, import_react29.useState)("ltr");
+  (0, import_react29.useEffect)(() => {
+    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`
@@ -7457,16 +7498,16 @@ var FeatureAwards = ({
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fa__inner", children: [
         title && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h2", { className: "fa__title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fa__grid", role: "list", children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AwardBadge2, { award }, `g-${i}`)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fa__grid", role: "list", children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AwardBadge2, { award, textDir }, `g-${i}`)) }),
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fa__scroller", dir: "ltr", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fa__track fa__track--auto", style: trackStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fa__track-group", role: "list", children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AwardBadge2, { award }, `m-${i}`)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fa__track-group", role: "list", children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AwardBadge2, { award, textDir }, `m-${i}`)) }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "div",
             {
               className: "fa__track-group",
               role: "presentation",
               "aria-hidden": "true",
-              children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AwardBadge2, { award }, `m-dup-${i}`))
+              children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AwardBadge2, { award, textDir }, `m-dup-${i}`))
             }
           )
         ] }) })
@@ -7553,7 +7594,7 @@ var FeatureBlog = ({
 };
 
 // templates/FeatureBlogCategories/FeatureBlogCategories.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var isExternalUrl = (href) => Boolean(href && /^https?:\/\//i.test(href));
 var FEATURE_BLOG_CATEGORIES_TEXT_CONTENT = {
@@ -7617,20 +7658,20 @@ var FeatureBlogCategories = ({
   className,
   ...props
 }) => {
-  const [search, setSearch] = (0, import_react29.useState)("");
-  const [internalActiveId, setInternalActiveId] = (0, import_react29.useState)(defaultActiveCategoryId ?? allCategoryId);
+  const [search, setSearch] = (0, import_react30.useState)("");
+  const [internalActiveId, setInternalActiveId] = (0, import_react30.useState)(defaultActiveCategoryId ?? allCategoryId);
   const isControlled = activeCategoryId !== void 0;
   const activeId = isControlled ? activeCategoryId : internalActiveId;
-  const tabs = (0, import_react29.useMemo)(
+  const tabs = (0, import_react30.useMemo)(
     () => [{ id: allCategoryId, label: allCategoryLabel }, ...categories],
     [allCategoryId, allCategoryLabel, categories]
   );
-  const categoryLabelById = (0, import_react29.useMemo)(() => {
+  const categoryLabelById = (0, import_react30.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     categories.forEach((category) => map.set(category.id, category.label));
     return map;
   }, [categories]);
-  const filteredPosts = (0, import_react29.useMemo)(() => {
+  const filteredPosts = (0, import_react30.useMemo)(() => {
     const query = search.trim().toLowerCase();
     return posts.filter((post) => {
       const matchesCategory = activeId === allCategoryId || post.category === activeId;
@@ -7726,7 +7767,7 @@ var HelpCentreCategories = ({
 };
 
 // templates/HelpCentreSubCategories/HelpCentreSubCategories.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var externalLinkRel4 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
 var QuestionCard = ({ item }) => {
@@ -7743,8 +7784,8 @@ var HelpCentreSubCategories = ({
   noResultsText = 'No results found for "{query}"',
   onSearchChange
 }) => {
-  const [search, setSearch] = (0, import_react30.useState)("");
-  const filtered = (0, import_react30.useMemo)(() => {
+  const [search, setSearch] = (0, import_react31.useState)("");
+  const filtered = (0, import_react31.useMemo)(() => {
     const q = search.trim().toLowerCase();
     if (!q) return items;
     return items.filter((item) => item.question.toLowerCase().includes(q));
@@ -7775,7 +7816,7 @@ var HelpCentreSubCategories = ({
 };
 
 // templates/HelpCenterPage/HelpCenterPage.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var externalLinkRel5 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
 var ChevronDownIcon5 = () => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { "aria-hidden": "true", fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) });
@@ -7841,13 +7882,13 @@ var HelpCenterPage = ({
   articlesSheetTitle = "Articles in this section",
   className
 }) => {
-  const [search, setSearch] = (0, import_react31.useState)("");
-  const [internalActiveId, setInternalActiveId] = (0, import_react31.useState)(defaultActiveQuestionId ?? questions[0]?.id);
-  const [sheetOpen, setSheetOpen] = (0, import_react31.useState)(false);
+  const [search, setSearch] = (0, import_react32.useState)("");
+  const [internalActiveId, setInternalActiveId] = (0, import_react32.useState)(defaultActiveQuestionId ?? questions[0]?.id);
+  const [sheetOpen, setSheetOpen] = (0, import_react32.useState)(false);
   const isControlled = activeQuestionId !== void 0;
   const activeId = isControlled ? activeQuestionId : internalActiveId;
   const activeItem = questions.find((item) => item.id === activeId);
-  const filtered = (0, import_react31.useMemo)(() => {
+  const filtered = (0, import_react32.useMemo)(() => {
     const q = search.trim().toLowerCase();
     if (!q) return questions;
     return questions.filter((item) => item.question.toLowerCase().includes(q));
@@ -7910,7 +7951,7 @@ var HelpCenterPage = ({
 };
 
 // templates/FeatureBlogPage/FeatureBlogPage.tsx
-var import_react32 = require("react");
+var import_react33 = require("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";
@@ -7967,7 +8008,7 @@ var TocCard = ({
   idSuffix,
   collapsible
 }) => {
-  const [open, setOpen] = (0, import_react32.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react33.useState)(defaultOpen);
   const panelId = `fbp-toc-panel-${idSuffix}`;
   const isOpen = collapsible ? open : true;
   const list = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ol", { className: "fbp-tocList", id: panelId, children: headings.map((heading) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("li", { className: "fbp-tocItem", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -8009,7 +8050,7 @@ var ShareRow = ({
   onShare,
   copiedLabel
 }) => {
-  const [copied, setCopied] = (0, import_react32.useState)(false);
+  const [copied, setCopied] = (0, import_react33.useState)(false);
   const handleCopy = async () => {
     onShare?.("copy");
     try {
@@ -8101,7 +8142,7 @@ var FeatureBlogPage = ({
   copiedLabel = "Copied!",
   className
 }) => {
-  const headingIds = (0, import_react32.useMemo)(() => {
+  const headingIds = (0, import_react33.useMemo)(() => {
     const seen = /* @__PURE__ */ new Map();
     const ids = /* @__PURE__ */ new Map();
     content.forEach((block, i) => {
@@ -8113,14 +8154,14 @@ var FeatureBlogPage = ({
     });
     return ids;
   }, [content]);
-  const headings = (0, import_react32.useMemo)(
+  const headings = (0, import_react33.useMemo)(
     () => content.map((block, i) => ({ block, i })).filter(
       ({ block }) => block.type === "steps" || block.type === "heading" && (block.level ?? 2) === 2
     ).map(({ block, i }) => ({ id: headingIds.get(i), text: block.text ?? "" })),
     [content, headingIds]
   );
-  const [activeId, setActiveId] = (0, import_react32.useState)(null);
-  (0, import_react32.useEffect)(() => {
+  const [activeId, setActiveId] = (0, import_react33.useState)(null);
+  (0, import_react33.useEffect)(() => {
     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;
@@ -8225,7 +8266,7 @@ var FeatureBlogPage = ({
 };
 
 // templates/ParallaxBanner/ParallaxBanner.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_framer_motion5 = require("framer-motion");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var PARALLAX_BANNER_TEXT_CONTENT = {
@@ -8268,7 +8309,7 @@ var ParallaxBanner = ({
   className,
   ...props
 }) => {
-  const sectionRef = (0, import_react33.useRef)(null);
+  const sectionRef = (0, import_react34.useRef)(null);
   const prefersReducedMotion = (0, import_framer_motion5.useReducedMotion)();
   const parallaxActive = enableParallax && !prefersReducedMotion;
   const showCards = variant !== "banner-only" && cards.length > 0;
@@ -8334,7 +8375,7 @@ var ParallaxBanner = ({
 };
 
 // templates/TradingCalculator/TradingCalculator.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // templates/TradingCalculator/TradingCalculator.types.ts
 var DEFAULT_TRADING_CALCULATOR_LABELS = {
@@ -8419,13 +8460,13 @@ function computeResults(symbol, volumeInLots, assetPrice, rates) {
   return { marginRequired, tradeVolume, pipValue, swapChargeLong, swapChargeShort };
 }
 function useExchangeRates(wsUrl) {
-  const socketRef = (0, import_react34.useRef)(null);
-  const reqIdRef = (0, import_react34.useRef)(1);
-  const pendingRef = (0, import_react34.useRef)(
+  const socketRef = (0, import_react35.useRef)(null);
+  const reqIdRef = (0, import_react35.useRef)(1);
+  const pendingRef = (0, import_react35.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const cacheRef = (0, import_react34.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react34.useEffect)(() => {
+  const cacheRef = (0, import_react35.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react35.useEffect)(() => {
     const pending = pendingRef.current;
     return () => {
       socketRef.current?.close();
@@ -8434,7 +8475,7 @@ function useExchangeRates(wsUrl) {
       pending.clear();
     };
   }, [wsUrl]);
-  const getRates = (0, import_react34.useCallback)(
+  const getRates = (0, import_react35.useCallback)(
     (baseCurrency) => {
       if (!wsUrl) return Promise.reject(new Error("Live exchange rate conversion is disabled"));
       const cached = cacheRef.current.get(baseCurrency);
@@ -8496,11 +8537,11 @@ function useExchangeRates(wsUrl) {
   return getRates;
 }
 function useSymbols(symbolsProp, endpoint) {
-  const [state, setState] = (0, import_react34.useState)(
+  const [state, setState] = (0, import_react35.useState)(
     symbolsProp ? { status: "ready", data: symbolsProp } : { status: "loading" }
   );
-  const [retryToken, setRetryToken] = (0, import_react34.useState)(0);
-  (0, import_react34.useEffect)(() => {
+  const [retryToken, setRetryToken] = (0, import_react35.useState)(0);
+  (0, import_react35.useEffect)(() => {
     if (symbolsProp) {
       setState({ status: "ready", data: symbolsProp });
       return;
@@ -8522,7 +8563,7 @@ function useSymbols(symbolsProp, endpoint) {
       cancelled = true;
     };
   }, [symbolsProp, endpoint, retryToken]);
-  const retry = (0, import_react34.useCallback)(() => setRetryToken((n) => n + 1), []);
+  const retry = (0, import_react35.useCallback)(() => setRetryToken((n) => n + 1), []);
   return [state, retry];
 }
 var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
@@ -8552,24 +8593,24 @@ var SymbolCombobox = ({
   inputId,
   copy
 }) => {
-  const [query, setQuery] = (0, import_react34.useState)("");
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react34.useState)(-1);
-  const wrapperRef = (0, import_react34.useRef)(null);
-  const listboxId = (0, import_react34.useId)();
+  const [query, setQuery] = (0, import_react35.useState)("");
+  const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react35.useState)(-1);
+  const wrapperRef = (0, import_react35.useRef)(null);
+  const listboxId = (0, import_react35.useId)();
   const isLoading = symbolsState.status === "loading";
   const isError = symbolsState.status === "error";
   const allSymbols = symbolsState.status === "ready" ? symbolsState.data : [];
-  const filtered = (0, import_react34.useMemo)(() => {
+  const filtered = (0, import_react35.useMemo)(() => {
     const term = query.trim().toLowerCase();
     if (!term) return allSymbols;
     return allSymbols.filter(
       (item) => item.symbol.toLowerCase().includes(term) || item.description.toLowerCase().includes(term) || item.asset_class.toLowerCase().includes(term)
     );
   }, [allSymbols, query]);
-  const grouped = (0, import_react34.useMemo)(() => groupByAssetClass(filtered), [filtered]);
-  const flatOptions = (0, import_react34.useMemo)(() => grouped.flatMap(([, items]) => items), [grouped]);
-  (0, import_react34.useEffect)(() => {
+  const grouped = (0, import_react35.useMemo)(() => groupByAssetClass(filtered), [filtered]);
+  const flatOptions = (0, import_react35.useMemo)(() => grouped.flatMap(([, items]) => items), [grouped]);
+  (0, import_react35.useEffect)(() => {
     if (!isOpen) return;
     const handlePointerDown = (event) => {
       if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
@@ -8711,15 +8752,15 @@ var TradingCalculator = ({
   const showTradeVolume = variant === "main";
   const [symbolsState, retrySymbols] = useSymbols(symbolsProp, symbolsEndpoint);
   const getRates = useExchangeRates(exchangeRateWsUrl);
-  const [selectedSymbol, setSelectedSymbol] = (0, import_react34.useState)(null);
-  const [volumeInLots, setVolumeInLots] = (0, import_react34.useState)("");
-  const [assetPrice, setAssetPrice] = (0, import_react34.useState)("");
-  const [errors, setErrors] = (0, import_react34.useState)({});
-  const [results, setResults] = (0, import_react34.useState)(null);
-  const [isCalculating, setIsCalculating] = (0, import_react34.useState)(false);
-  const [calcError, setCalcError] = (0, import_react34.useState)(null);
-  const didPreselect = (0, import_react34.useRef)(false);
-  (0, import_react34.useEffect)(() => {
+  const [selectedSymbol, setSelectedSymbol] = (0, import_react35.useState)(null);
+  const [volumeInLots, setVolumeInLots] = (0, import_react35.useState)("");
+  const [assetPrice, setAssetPrice] = (0, import_react35.useState)("");
+  const [errors, setErrors] = (0, import_react35.useState)({});
+  const [results, setResults] = (0, import_react35.useState)(null);
+  const [isCalculating, setIsCalculating] = (0, import_react35.useState)(false);
+  const [calcError, setCalcError] = (0, import_react35.useState)(null);
+  const didPreselect = (0, import_react35.useRef)(false);
+  (0, import_react35.useEffect)(() => {
     if (didPreselect.current || !defaultSymbol || symbolsState.status !== "ready") return;
     const match = symbolsState.data.find((item) => item.symbol === defaultSymbol);
     if (match) {
@@ -8776,9 +8817,9 @@ var TradingCalculator = ({
       setIsCalculating(false);
     }
   };
-  const symbolInputId = (0, import_react34.useId)();
-  const volumeInputId = (0, import_react34.useId)();
-  const priceInputId = (0, import_react34.useId)();
+  const symbolInputId = (0, import_react35.useId)();
+  const volumeInputId = (0, import_react35.useId)();
+  const priceInputId = (0, import_react35.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("section", { className: ["tcalc-section", className ?? ""].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "tcalc-container", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "tcalc-card", children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "tcalc-column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h3", { className: "tcalc-panelTitle", children: copy.calculatorPanel }),
@@ -8929,7 +8970,7 @@ var TradingCalculator = ({
 };
 
 // templates/TradingCalculatorHowTo/TradingCalculatorHowTo.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // templates/TradingCalculatorHowTo/TradingCalculatorHowTo.types.ts
 var DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS = {
@@ -9130,7 +9171,7 @@ function swapTabsForLabels(labels) {
     { id: "percentage", label: percentage }
   ];
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react35.useLayoutEffect : import_react35.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react36.useLayoutEffect : import_react36.useEffect;
 var FormulaBlockView = ({ block }) => {
   if (block.type === "footnote") {
     return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "tchow-footnote", children: block.content });
@@ -9152,9 +9193,9 @@ var ConnectorArrow = () => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("svg",
   /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { d: "M1.4 5.6L4 8.6L6.6 5.6", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 var CalculationStrip = ({ tokens }) => {
-  const wrapperRef = (0, import_react35.useRef)(null);
-  const stripRef = (0, import_react35.useRef)(null);
-  const [fit, setFit] = (0, import_react35.useState)({ scale: 1, naturalHeight: 0 });
+  const wrapperRef = (0, import_react36.useRef)(null);
+  const stripRef = (0, import_react36.useRef)(null);
+  const [fit, setFit] = (0, import_react36.useState)({ scale: 1, naturalHeight: 0 });
   useIsomorphicLayoutEffect(() => {
     const wrapper = wrapperRef.current;
     const strip = stripRef.current;
@@ -9191,7 +9232,7 @@ var CalculationStrip = ({ tokens }) => {
           style: isShrunk ? { transform: `scale(${fit.scale})` } : void 0,
           role: "img",
           "aria-label": tokens.map((token) => token.text).join(" "),
-          children: tokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react35.Fragment, { children: [
+          children: tokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react36.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
               "span",
               {
@@ -9238,8 +9279,8 @@ var TradingCalculatorHowTo = ({
   ...props
 }) => {
   const isSwap = variant === "swap-points" || variant === "swap-percentage";
-  const [swapTab, setSwapTab] = (0, import_react35.useState)(() => swapModeForVariant(variant));
-  (0, import_react35.useEffect)(() => {
+  const [swapTab, setSwapTab] = (0, import_react36.useState)(() => swapModeForVariant(variant));
+  (0, import_react36.useEffect)(() => {
     setSwapTab(swapModeForVariant(variant));
   }, [variant]);
   const baseContent = variant === "pip" ? PIP_CONTENT : isSwap ? swapTab === "percentage" ? SWAP_PERCENTAGE_CONTENT : SWAP_POINTS_CONTENT : MARGIN_CONTENT;
@@ -9282,7 +9323,7 @@ var TradingCalculatorHowTo = ({
 };
 
 // templates/CryptoTradeConverter/CryptoTradeConverter.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // templates/cryptoMarketData/origins.ts
 var DEFAULT_API_ORIGIN = "https://deriv.exchange";
@@ -10117,7 +10158,7 @@ function getSharedMarketDataClient(apiOrigin) {
 }
 
 // templates/cryptoMarketData/useCryptoMarketData.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 var EMPTY = {
   kind: "spot",
   status: "idle",
@@ -10130,8 +10171,8 @@ var EMPTY = {
 };
 function useCryptoMarketData(options) {
   const { kind, kline, apiOrigin, enabled = true } = options;
-  const [snapshot, setSnapshot] = (0, import_react36.useState)({ ...EMPTY, kind });
-  (0, import_react36.useEffect)(() => {
+  const [snapshot, setSnapshot] = (0, import_react37.useState)({ ...EMPTY, kind });
+  (0, import_react37.useEffect)(() => {
     if (!enabled || typeof window === "undefined") return;
     const client = getSharedMarketDataClient(apiOrigin);
     return client.subscribe({ kind, kline }, setSnapshot);
@@ -10181,7 +10222,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] = (0, import_react37.useState)(false);
+  const [failed, setFailed] = (0, import_react38.useState)(false);
   if (failed) {
     return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-avatar ctc-avatar--fallback", "aria-hidden": "true", children: base.slice(0, 3) });
   }
@@ -10230,28 +10271,28 @@ var CryptoTradeConverter = ({
   className
 }) => {
   const copy = mergeLabels2(labelsProp);
-  const reactId = (0, import_react37.useId)().replace(/:/g, "");
+  const reactId = (0, import_react38.useId)().replace(/:/g, "");
   const listboxId = `ctc-listbox-${reactId}`;
   const payId = `ctc-pay-${reactId}`;
   const receiveId = `ctc-receive-${reactId}`;
   const statusId = `ctc-status-${reactId}`;
   const snapshot = useCryptoMarketData({ kind: "spot", kline: false, apiOrigin });
-  const rows = (0, import_react37.useMemo)(() => [...snapshot.rows.values()], [snapshot.rows]);
-  const [side, setSide] = (0, import_react37.useState)("buy");
-  const [selectedId, setSelectedId] = (0, import_react37.useState)(null);
-  const [pay, setPay] = (0, import_react37.useState)("");
-  const [receive, setReceive] = (0, import_react37.useState)("");
-  const [edited, setEdited] = (0, import_react37.useState)("pay");
-  const [pickerOpen, setPickerOpen] = (0, import_react37.useState)(false);
-  const [activeOption, setActiveOption] = (0, import_react37.useState)(0);
-  const rootRef = (0, import_react37.useRef)(null);
-  const buttonRef = (0, import_react37.useRef)(null);
-  const listRef = (0, import_react37.useRef)(null);
+  const rows = (0, import_react38.useMemo)(() => [...snapshot.rows.values()], [snapshot.rows]);
+  const [side, setSide] = (0, import_react38.useState)("buy");
+  const [selectedId, setSelectedId] = (0, import_react38.useState)(null);
+  const [pay, setPay] = (0, import_react38.useState)("");
+  const [receive, setReceive] = (0, import_react38.useState)("");
+  const [edited, setEdited] = (0, import_react38.useState)("pay");
+  const [pickerOpen, setPickerOpen] = (0, import_react38.useState)(false);
+  const [activeOption, setActiveOption] = (0, import_react38.useState)(0);
+  const rootRef = (0, import_react38.useRef)(null);
+  const buttonRef = (0, import_react38.useRef)(null);
+  const listRef = (0, import_react38.useRef)(null);
   const selected = (selectedId ? rows.find((r) => r.id === selectedId) : null) ?? matchPair(rows, defaultPair);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!selectedId && selected) setSelectedId(selected.id);
   }, [selected, selectedId]);
-  const conversion = (0, import_react37.useMemo)(
+  const conversion = (0, import_react38.useMemo)(
     () => convertAmounts({
       side,
       price: selected?.last ?? null,
@@ -10265,16 +10306,16 @@ var CryptoTradeConverter = ({
     }),
     [side, selected?.last, pay, receive, edited, copy.waitingForPrice, copy.invalidAmount]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (edited === "pay") setReceive(conversion.receive);
     else setPay(conversion.pay);
   }, [conversion.pay, conversion.receive, edited]);
   const labels = currenciesForSide(side, selected?.base ?? "\u2014", selected?.quote ?? "\u2014");
-  const closePicker = (0, import_react37.useCallback)(() => {
+  const closePicker = (0, import_react38.useCallback)(() => {
     setPickerOpen(false);
     buttonRef.current?.focus();
   }, []);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!pickerOpen) return;
     const onDoc = (event) => {
       if (!rootRef.current?.contains(event.target)) setPickerOpen(false);
@@ -10292,7 +10333,7 @@ var CryptoTradeConverter = ({
       document.removeEventListener("keydown", onKey);
     };
   }, [pickerOpen, closePicker]);
-  const sortedRows = (0, import_react37.useMemo)(
+  const sortedRows = (0, import_react38.useMemo)(
     () => [...rows].sort((a, b) => a.name.localeCompare(b.name)),
     [rows]
   );
@@ -10322,7 +10363,7 @@ var CryptoTradeConverter = ({
       closePicker();
     }
   };
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!pickerOpen) return;
     listRef.current?.querySelectorAll('[role="option"]')[activeOption]?.scrollIntoView({
       block: "nearest"
@@ -10584,7 +10625,7 @@ var CryptoTradeConverter = ({
 };
 
 // templates/CryptoMarketsTable/CryptoMarketsTable.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // templates/CryptoMarketsTable/CryptoMarketsTable.types.ts
 var DEFAULT_CRYPTO_MARKETS_TABLE_TITLE = "Explore the markets";
@@ -10617,7 +10658,7 @@ function mergeLabels3(overrides) {
   return { ...DEFAULT_CRYPTO_MARKETS_TABLE_LABELS, ...overrides };
 }
 function CoinAvatar2({ base, icon }) {
-  const [failed, setFailed] = (0, import_react38.useState)(false);
+  const [failed, setFailed] = (0, import_react39.useState)(false);
   if (failed) {
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "cmt-avatar cmt-avatar--fallback", "aria-hidden": "true", children: base.slice(0, 3) });
   }
@@ -10641,8 +10682,8 @@ function Sparkline({
   label,
   reducedMotion
 }) {
-  const canvasRef = (0, import_react38.useRef)(null);
-  (0, import_react38.useEffect)(() => {
+  const canvasRef = (0, import_react39.useRef)(null);
+  (0, import_react39.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const points = values.map(Number).filter(Number.isFinite);
@@ -10726,16 +10767,16 @@ var CryptoMarketsTable = ({
   className
 }) => {
   const copy = mergeLabels3(labelsProp);
-  const reactId = (0, import_react38.useId)().replace(/:/g, "");
-  const [kind, setKind] = (0, import_react38.useState)(initialMarket);
-  const [quote, setQuote] = (0, import_react38.useState)(initialQuoteCurrency.toUpperCase());
-  const [sortKey, setSortKey] = (0, import_react38.useState)("last");
-  const [sortDir, setSortDir] = (0, import_react38.useState)("desc");
-  const [reducedMotion, setReducedMotion] = (0, import_react38.useState)(false);
-  const scrollRef = (0, import_react38.useRef)(null);
-  const [scrolled, setScrolled] = (0, import_react38.useState)(false);
+  const reactId = (0, import_react39.useId)().replace(/:/g, "");
+  const [kind, setKind] = (0, import_react39.useState)(initialMarket);
+  const [quote, setQuote] = (0, import_react39.useState)(initialQuoteCurrency.toUpperCase());
+  const [sortKey, setSortKey] = (0, import_react39.useState)("last");
+  const [sortDir, setSortDir] = (0, import_react39.useState)("desc");
+  const [reducedMotion, setReducedMotion] = (0, import_react39.useState)(false);
+  const scrollRef = (0, import_react39.useRef)(null);
+  const [scrolled, setScrolled] = (0, import_react39.useState)(false);
   const snapshot = useCryptoMarketData({ kind, kline: true, apiOrigin });
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     const update = () => setReducedMotion(mq.matches);
@@ -10743,7 +10784,7 @@ var CryptoMarketsTable = ({
     mq.addEventListener?.("change", update);
     return () => mq.removeEventListener?.("change", update);
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const node = scrollRef.current;
     if (!node) return;
     const onScroll = () => setScrolled(node.scrollLeft > 0);
@@ -10751,12 +10792,12 @@ var CryptoMarketsTable = ({
     node.addEventListener("scroll", onScroll, { passive: true });
     return () => node.removeEventListener("scroll", onScroll);
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (snapshot.quotes.length && !snapshot.quotes.includes(quote)) {
       setQuote(snapshot.quotes[0]);
     }
   }, [snapshot.quotes, quote]);
-  const filtered = (0, import_react38.useMemo)(() => {
+  const filtered = (0, import_react39.useMemo)(() => {
     const rows = [...snapshot.rows.values()].filter(
       (row) => row.quote.toUpperCase() === quote.toUpperCase()
     );
@@ -10891,7 +10932,7 @@ var CryptoMarketsTable = ({
 };
 
 // templates/FeatureOffices/FeatureOffices.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var isExternalUrl2 = (href) => Boolean(href && /^https?:\/\//i.test(href));
 var FEATURE_OFFICES_TEXT_CONTENT = {
@@ -10945,12 +10986,12 @@ var FeatureOffices = ({
   className,
   ...props
 }) => {
-  const [internalActiveId, setInternalActiveId] = (0, import_react39.useState)(
+  const [internalActiveId, setInternalActiveId] = (0, import_react40.useState)(
     defaultActiveRegionId ?? regions[0]?.id
   );
   const isControlled = activeRegionId !== void 0;
   const activeId = isControlled ? activeRegionId : internalActiveId;
-  const filteredOffices = (0, import_react39.useMemo)(
+  const filteredOffices = (0, import_react40.useMemo)(
     () => offices.filter((office) => office.region === activeId),
     [offices, activeId]
   );
@@ -11208,7 +11249,7 @@ var ResourceBanner = ({
 };
 
 // templates/OptionsTypes/OptionsTypes.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var OPTIONS_TYPES_PLACEHOLDER_ITEMS = [
   {
@@ -11415,10 +11456,10 @@ function TogglePanel({
   setPlaying
 }) {
   const animations = item.animations;
-  const [activeIndex, setActiveIndex] = (0, import_react40.useState)(0);
-  const switchRefs = (0, import_react40.useRef)([]);
+  const [activeIndex, setActiveIndex] = (0, import_react41.useState)(0);
+  const switchRefs = (0, import_react41.useRef)([]);
   const safeIndex = Math.min(activeIndex, Math.max(animations.length - 1, 0));
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setPlaying({});
   }, [safeIndex, setPlaying]);
   const hasMarkets = Boolean(item.markets && item.markets.length > 0);
@@ -11541,15 +11582,15 @@ function OptionsTypes({
   ...props
 }) {
   const usableItems = Array.isArray(items) ? items.filter((item) => item?.id) : [];
-  const [internalActiveId, setInternalActiveId] = (0, import_react40.useState)(
+  const [internalActiveId, setInternalActiveId] = (0, import_react41.useState)(
     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] = (0, import_react40.useState)({});
-  const generatedId = (0, import_react40.useId)().replace(/:/g, "");
+  const [playing, setPlaying] = (0, import_react41.useState)({});
+  const generatedId = (0, import_react41.useId)().replace(/:/g, "");
   const tabPrefix = `options-types-${generatedId}`;
   const Heading = headingLevel;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setPlaying({});
   }, [selectedId]);
   const selectItem = (id) => {
@@ -11965,7 +12006,7 @@ var CountryLinkGrid = ({
 };
 
 // templates/DocumentChips/DocumentChips.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var DEFAULT_GROUPS = [
   {
@@ -12069,7 +12110,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] = (0, import_react41.useState)(void 0);
+  const [openKeys, setOpenKeys] = (0, import_react42.useState)(void 0);
   const resolvedOpenKeys = openKeys === void 0 ? groupKeys.slice(0, 1) : openKeys;
   const handleToggle = (key, next) => {
     setOpenKeys((current) => {
@@ -12120,7 +12161,7 @@ var DocumentChips = ({
 };
 
 // components/LinkModal/LinkModal.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var XMarkIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -12162,17 +12203,17 @@ var LinkModal = ({
   className,
   ...props
 }) => {
-  const titleId = (0, import_react42.useId)();
-  const panelRef = (0, import_react42.useRef)(null);
-  const triggerRef = (0, import_react42.useRef)(null);
-  const getFocusable = (0, import_react42.useCallback)(() => {
+  const titleId = (0, import_react43.useId)();
+  const panelRef = (0, import_react43.useRef)(null);
+  const triggerRef = (0, import_react43.useRef)(null);
+  const getFocusable = (0, import_react43.useCallback)(() => {
     const panel = panelRef.current;
     if (!panel) return [];
     return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
       (el) => el.offsetParent !== null || el === document.activeElement
     );
   }, []);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!open || typeof document === "undefined") return;
     triggerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     panelRef.current?.focus();
@@ -12182,7 +12223,7 @@ var LinkModal = ({
       if (trigger && document.contains(trigger)) trigger.focus();
     };
   }, [open]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!open || typeof document === "undefined") return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -12193,7 +12234,7 @@ var LinkModal = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!open || typeof document === "undefined") return;
     const body = document.body;
     const previousOverflow = body.style.overflow;
@@ -12333,7 +12374,7 @@ var LanguageSelectModal = ({
 };
 
 // templates/AffiliatesSlider/AffiliatesSlider.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var ArrowIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
   "svg",
@@ -12418,16 +12459,16 @@ var AffiliatesSlider = ({
   className,
   ...props
 }) => {
-  const [internalValue, setInternalValue] = (0, import_react43.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react44.useState)(defaultValue);
   const currentValue = value ?? internalValue;
-  const handleChange = (0, import_react43.useCallback)(
+  const handleChange = (0, import_react44.useCallback)(
     (next) => {
       if (value === void 0) setInternalValue(next);
       onValueChange?.(next);
     },
     [onValueChange, value]
   );
-  const ticks = (0, import_react43.useMemo)(
+  const ticks = (0, import_react44.useMemo)(
     () => tickValues ?? buildDefaultTicks(min, max),
     [max, min, tickValues]
   );