@deriv-web-design/ui 0.1.24 → 0.1.26

package/dist/index.mjs

@@ -2652,6 +2652,13 @@ function DotLottieInView({
   );
 }
 
+// components/DotLottieInView/lottie-src.ts
+function isLottieSrc(value) {
+  if (!value) return false;
+  if (/\.lottie(\?|#|$)/i.test(value)) return true;
+  return /\/[^/?#]+\.json(\?|#|$)/i.test(value) && /lottie|cdn\.|website-files/i.test(value);
+}
+
 // templates/FeatureScroll/FeatureScroll.tsx
 import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var FEATURE_SCROLL_DATA = [
@@ -2660,42 +2667,42 @@ var FEATURE_SCROLL_DATA = [
     description: "Trade the most popular currency pairs with high leverage, tight spreads, and fast execution.",
     linkLabel: "Learn more",
     link: "/markets/forex",
-    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a906489e5aadf94e501c4_Forex.lottie"
+    mediaUrl: "/lottie/markets/forex.lottie"
   },
   {
     title: "Derived Indices",
     description: "Trade 24/7 on exclusive Synthetic and Derived Indices. Choose volatility levels that match your strategy.",
     linkLabel: "Learn more",
     link: "/markets/derived-indices/synthetic-indices",
-    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064588b0d2709e7ceac_Derived%20Indices.lottie"
+    mediaUrl: "/lottie/markets/derived-indices.lottie"
   },
   {
     title: "Stocks",
     description: "Trade global market leaders like Apple, Tesla, and NVIDIA.",
     linkLabel: "Learn more",
     link: "/markets/stocks",
-    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064892f97175b724a9c_Stocks.lottie"
+    mediaUrl: "/lottie/markets/stocks.lottie"
   },
   {
     title: "Commodities",
     description: "Trade gold, silver, oil, natural gas, sugar, and more.",
     linkLabel: "Learn more",
     link: "/markets/commodities",
-    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064edd96a014a6092cf_Commodities.lottie"
+    mediaUrl: "/lottie/markets/commodities.lottie"
   },
   {
     title: "Cryptos",
     description: "Trade round the clock on the volatility of cryptocurrencies like Bitcoin and Ethereum.",
     linkLabel: "Learn more",
     link: "/markets/cryptocurrencies",
-    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a90647b8d9652a28b94e3_Crypto.lottie"
+    mediaUrl: "/lottie/markets/crypto.lottie"
   },
   {
     title: "Stock Indices",
     description: "Trade offerings that track the top global stock indices.",
     linkLabel: "Learn more",
     link: "/markets/stock-indices",
-    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064f2c16e4e0732abfb_Stock%20Indices.lottie"
+    mediaUrl: "/lottie/markets/stock-indices.lottie"
   }
 ];
 var ChevronRight2 = () => /* @__PURE__ */ jsx28(
@@ -2726,7 +2733,7 @@ function mediaSrc(item) {
 function resolveMediaType(item) {
   if (item.mediaType) return item.mediaType;
   const src = mediaSrc(item);
-  return src?.split("?")[0].endsWith(".lottie") ? "lottie" : "image";
+  return src && isLottieSrc(src) ? "lottie" : "image";
 }
 var MediaRenderer = ({ item, active, rootMargin, threshold }) => {
   const src = mediaSrc(item);
@@ -3481,6 +3488,18 @@ var CTABanner = ({
 import { useRef as useRef11, useState as useState11, useEffect as useEffect9, useCallback as useCallback2 } from "react";
 import { motion as motion2, AnimatePresence } from "framer-motion";
 
+// components/Navbar/languageGridVars.ts
+function resolveLanguageGridVars(itemCount, languageRows) {
+  if (typeof languageRows === "number" && Number.isFinite(languageRows) && languageRows >= 1) {
+    const rows = Math.floor(languageRows);
+    return {
+      "--lang-rows": rows,
+      "--lang-cols": Math.ceil(itemCount / rows)
+    };
+  }
+  return { "--lang-rows": Math.ceil(itemCount / 3) };
+}
+
 // assets/icon-globe.svg
 var icon_globe_default = 'data:image/svg+xml,<svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g clip-path="url(%23clip0_8670_6187)">%0A<path d="M8 18.5C8.21875 18.5 8.84375 18.2812 9.46875 17C9.75 16.4375 10 15.7812 10.1562 15H5.8125C6 15.7812 6.21875 16.4375 6.5 17C7.15625 18.2812 7.75 18.5 8 18.5ZM5.5625 13.5H10.4062C10.4688 13.0312 10.5 12.5312 10.5 12C10.5 11.5 10.4688 11 10.4062 10.5H5.5625C5.5 11 5.5 11.5 5.5 12C5.5 12.5312 5.5 13.0312 5.5625 13.5ZM5.8125 9H10.1562C10 8.25 9.75 7.59375 9.46875 7.03125C8.84375 5.75 8.21875 5.5 8 5.5C7.75 5.5 7.15625 5.75 6.5 7.03125C6.21875 7.59375 6 8.25 5.8125 9ZM11.9062 10.5C11.9688 11 11.9688 11.5 11.9688 12C11.9688 12.5312 11.9688 13.0312 11.9062 13.5H14.3125C14.4375 13.0312 14.5 12.5312 14.5 12C14.5 11.5 14.4375 11 14.3125 10.5H11.9062ZM13.75 9C13.0938 7.71875 12 6.6875 10.6875 6.09375C11.125 6.90625 11.4688 7.90625 11.6875 9H13.75ZM4.28125 9C4.5 7.90625 4.84375 6.90625 5.28125 6.09375C3.96875 6.6875 2.875 7.71875 2.21875 9H4.28125ZM1.65625 10.5C1.5625 11 1.5 11.5 1.5 12C1.5 12.5312 1.53125 13.0312 1.65625 13.5H4.0625C4 13.0312 4 12.5312 4 12C4 11.5 4 11 4.0625 10.5H1.65625ZM10.6875 17.9375C12 17.3438 13.0938 16.3125 13.75 15H11.6875C11.4688 16.125 11.125 17.125 10.6875 17.9375ZM5.28125 17.9375C4.84375 17.125 4.5 16.125 4.28125 15H2.21875C2.875 16.3125 3.96875 17.3438 5.28125 17.9375ZM8 20C5.125 20 2.5 18.5 1.0625 16C-0.375 13.5312 -0.375 10.5 1.0625 8C2.5 5.53125 5.125 4 8 4C10.8438 4 13.4688 5.53125 14.9062 8C16.3438 10.5 16.3438 13.5312 14.9062 16C13.4688 18.5 10.8438 20 8 20Z" fill="%23181C25"/>%0A</g>%0A<defs>%0A<clipPath id="clip0_8670_6187">%0A<rect width="16" height="24" fill="white"/>%0A</clipPath>%0A</defs>%0A</svg>%0A';
 
@@ -3711,6 +3730,7 @@ var Navbar = ({
   languageLabel,
   onLanguageClick,
   languageItems,
+  languageRows,
   activeLanguageCode,
   onLanguageSelect,
   className,
@@ -3911,7 +3931,10 @@ var Navbar = ({
                 "div",
                 {
                   className: "navbar__lang-dropdown-grid",
-                  style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
+                  style: resolveLanguageGridVars(
+                    languageItems.length,
+                    languageRows
+                  ),
                   children: languageItems.map((lang) => /* @__PURE__ */ jsx32(
                     "button",
                     {
@@ -8906,8 +8929,8 @@ function OptionsTypes({
 }
 
 // templates/OptionsTypes/OptionsTypes.data.ts
-var WEBFLOW_CDN = "https://cdn.prod.website-files.com/661e6e1e01dd2f56adc6d370";
 var WEBFLOW_ICON_CDN = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c2b7";
+var LOTTIE = "/lottie/trade-clips";
 var FOREX = {
   label: "Forex",
   icon: "forex",
@@ -8961,12 +8984,12 @@ var OPTIONS_TYPES_DIGITAL_CONTENT = {
         {
           id: "rise",
           label: "Rise",
-          src: `${WEBFLOW_CDN}/6630e43019db0934b75c5105_Web%20Trade%20Clip%20-%20UpDown%20(Rise).lottie`
+          src: `${LOTTIE}/rise.lottie`
         },
         {
           id: "fall",
           label: "Fall",
-          src: `${WEBFLOW_CDN}/6630e42f22255a766c2af8aa_Web%20Trade%20Clip%20-%20UpDown%20(Fall).lottie`
+          src: `${LOTTIE}/fall.lottie`
         }
       ],
       markets: DIGITAL_MARKETS,
@@ -8980,12 +9003,12 @@ var OPTIONS_TYPES_DIGITAL_CONTENT = {
         {
           id: "higher",
           label: "Higher",
-          src: `${WEBFLOW_CDN}/6630e42f93f0aa3f60d68dd2_Web%20Trade%20Clip%20-%20UpDown%20(Higher).lottie`
+          src: `${LOTTIE}/higher.lottie`
         },
         {
           id: "lower",
           label: "Lower",
-          src: `${WEBFLOW_CDN}/6630e42f8922eb31fcbf275f_Web%20Trade%20Clip%20-%20%20UpDown%20(Lower).lottie`
+          src: `${LOTTIE}/lower.lottie`
         }
       ],
       markets: DIGITAL_MARKETS,
@@ -8999,12 +9022,12 @@ var OPTIONS_TYPES_DIGITAL_CONTENT = {
         {
           id: "touch",
           label: "Touch",
-          src: `${WEBFLOW_CDN}/6630e3a120a6dcbe6ab22239_Web%20Trade%20Clip%20-%20TouchNoTouch%20(Touch).lottie`
+          src: `${LOTTIE}/touch.lottie`
         },
         {
           id: "no-touch",
           label: "No Touch",
-          src: `${WEBFLOW_CDN}/6630e3a158064e5c58362ddd_Web%20Trade%20Clip%20-%20TouchNoTouch%20(No%20Touch).lottie`
+          src: `${LOTTIE}/no-touch.lottie`
         }
       ],
       markets: DIGITAL_MARKETS,
@@ -9024,7 +9047,7 @@ var OPTIONS_TYPES_ACCUMULATOR_CONTENT = {
         {
           id: "accumulator",
           label: "Accumulator",
-          src: `${WEBFLOW_CDN}/6630e0fff230226872ee39ed_Web%20Trade%20Clip%20-%20Accumulators%20(Accumulators).lottie`
+          src: `${LOTTIE}/accumulator.lottie`
         }
       ],
       markets: [DERIVED_INDICES],
@@ -9044,12 +9067,12 @@ var OPTIONS_TYPES_VANILLA_CONTENT = {
         {
           id: "call",
           label: "Call",
-          src: `${WEBFLOW_CDN}/6630e3c100c107af706a72f6_Web%20Trade%20Clip%20-%20Vanilla%20(Call).lottie`
+          src: `${LOTTIE}/vanilla-call.lottie`
         },
         {
           id: "put",
           label: "Put",
-          src: `${WEBFLOW_CDN}/6630e3c2f230226872f0d58d_Web%20Trade%20Clip%20-%20Vanilla%20(Put).lottie`
+          src: `${LOTTIE}/vanilla-put.lottie`
         }
       ],
       markets: [DERIVED_INDICES],
@@ -9062,19 +9085,19 @@ var OPTIONS_TYPES_TURBO_CONTENT = {
   heading: "How do Turbo Options work",
   items: [
     {
-      id: "turbo-up-down",
-      title: "Turbo Up/Down",
-      description: "Decide whether the market price will stay above (Up) or drop below (Down) a set barrier. Your payout adjusts based on how far the price moves in your chosen direction, letting you take advantage of both rising and falling markets.",
+      id: "turbo-long-short",
+      title: "Turbo Long/Short",
+      description: "Decide whether the market price will stay above (Long) or drop below (Short) a set barrier. Your payout adjusts based on how far the price moves in your chosen direction, letting you take advantage of both rising and falling markets.",
       animations: [
         {
-          id: "up",
-          label: "Up",
-          src: `${WEBFLOW_CDN}/664aff68ca9411ee61c84443_Web%20Trade%20Clip%20(Up).lottie`
+          id: "long",
+          label: "Long",
+          src: `${LOTTIE}/turbo-long.lottie`
         },
         {
-          id: "down",
-          label: "Down",
-          src: `${WEBFLOW_CDN}/664aff6801c5297f6a1f6e6c_Web%20Trade%20Clip%20(Down).lottie`
+          id: "short",
+          label: "Short",
+          src: `${LOTTIE}/turbo-short.lottie`
         }
       ],
       markets: [DERIVED_INDICES],
@@ -9094,12 +9117,12 @@ var OPTIONS_TYPES_MULTIPLIERS_CONTENT = {
         {
           id: "up",
           label: "Up",
-          src: `${WEBFLOW_CDN}/6630e305e7f044e7deae8a90_Web%20Trade%20Clip%20-%20Multipliers%20(Up).lottie`
+          src: `${LOTTIE}/multipliers-up.lottie`
         },
         {
           id: "down",
           label: "Down",
-          src: `${WEBFLOW_CDN}/6630e3055be526fd74f10190_Web%20Trade%20Clip%20-%20Multipliers%20(Down).lottie`
+          src: `${LOTTIE}/multipliers-down.lottie`
         }
       ],
       markets: [DERIVED_INDICES, FOREX, CRYPTOCURRENCIES, COMMODITIES],
@@ -9119,13 +9142,13 @@ var OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT = {
         {
           id: "up",
           label: "Up",
-          src: `${WEBFLOW_CDN}/6630e305e7f044e7deae8a90_Web%20Trade%20Clip%20-%20Multipliers%20(Up).lottie`,
+          src: `${LOTTIE}/multipliers-up.lottie`,
           iconUrl: `${WEBFLOW_ICON_CDN}/68e4859893e33d078096e151_66585fe0e1dc7e70cc75dec1_multipliers-up-sm.svg`
         },
         {
           id: "down",
           label: "Down",
-          src: `${WEBFLOW_CDN}/6630e3055be526fd74f10190_Web%20Trade%20Clip%20-%20Multipliers%20(Down).lottie`,
+          src: `${LOTTIE}/multipliers-down.lottie`,
           iconUrl: `${WEBFLOW_ICON_CDN}/68e4859893e33d078096e155_66585fe0e1dc7e70cc75dee8_multipliers-down-sm.svg`
         }
       ]
@@ -9490,15 +9513,15 @@ var LinkModal = ({
     }
   };
   if (!open || typeof document === "undefined") return null;
-  const rootClass = ["lm", className].filter(Boolean).join(" ");
+  const rootClass = ["lkm", className].filter(Boolean).join(" ");
   return createPortal2(
     /* @__PURE__ */ jsxs63("div", { className: rootClass, onClick: onClose, children: [
-      /* @__PURE__ */ jsx67("div", { className: "lm__scrim", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx67("div", { className: "lkm__scrim", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs63(
         "div",
         {
           ref: panelRef,
-          className: "lm__panel",
+          className: "lkm__panel",
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": titleId,
@@ -9511,14 +9534,14 @@ var LinkModal = ({
               "button",
               {
                 type: "button",
-                className: "lm__close",
+                className: "lkm__close",
                 onClick: onClose,
                 "aria-label": closeLabel,
                 children: /* @__PURE__ */ jsx67(XMarkIcon3, {})
               }
             ),
-            /* @__PURE__ */ jsx67(HeadingTag, { id: titleId, className: "lm__title", children: title }),
-            children && /* @__PURE__ */ jsx67("div", { className: "lm__body", children })
+            /* @__PURE__ */ jsx67(HeadingTag, { id: titleId, className: "lkm__title", children: title }),
+            children && /* @__PURE__ */ jsx67("div", { className: "lkm__body", children })
           ]
         }
       )
@@ -9855,6 +9878,7 @@ export {
   Tiers,
   TradingCalculator,
   TradingCalculatorHowTo,
-  dayNightTransitionV2Preset
+  dayNightTransitionV2Preset,
+  isLottieSrc
 };
 //# sourceMappingURL=index.mjs.map