@deriv-web-design/ui 0.1.38 → 0.1.40

package/dist/index.mjs

@@ -1023,6 +1023,7 @@ var Pagination = ({
     {
       className: ["pagination", className ?? ""].filter(Boolean).join(" "),
       "aria-label": "Pagination navigation",
+      dir: "ltr",
       children: [
         /* @__PURE__ */ jsx16(
           "button",
@@ -4775,7 +4776,7 @@ import {
 
 // templates/DayNightTransition/webflowDayNightV2Ix.ts
 var DESC_SWATCH = { r: 24, g: 28, b: 37 };
-var BODY_TEXT = { r: 51, g: 51, b: 51 };
+var DAY_TEXT = { r: 0, g: 0, b: 0 };
 var rgb = (r, g, b) => `rgb(${r},${g},${b})`;
 var lerp = (a, b, u) => a + (b - a) * u;
 var seg = (t, t0, t1, v0, v1) => {
@@ -4785,33 +4786,33 @@ var seg = (t, t0, t1, v0, v1) => {
 };
 function webflowV2DescriptionColor(t, media) {
   if (media === "desktop") {
-    const body2 = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
+    const day2 = rgb(DAY_TEXT.r, DAY_TEXT.g, DAY_TEXT.b);
     const dark2 = rgb(DESC_SWATCH.r, DESC_SWATCH.g, DESC_SWATCH.b);
     const white2 = rgb(255, 255, 255);
-    if (t < 0.49) return body2;
+    if (t < 0.49) return day2;
     if (t < 0.5) return dark2;
     return white2;
   }
   const white = rgb(255, 255, 255);
   const dark = rgb(DESC_SWATCH.r, DESC_SWATCH.g, DESC_SWATCH.b);
-  const body = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
-  if (t < 0.58) return body;
+  const day = rgb(DAY_TEXT.r, DAY_TEXT.g, DAY_TEXT.b);
+  if (t < 0.58) return day;
   if (t < 0.59) return dark;
   return white;
 }
 function webflowV2TitleColor(t, media) {
   if (media === "desktop") {
-    const body2 = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
+    const day2 = rgb(DAY_TEXT.r, DAY_TEXT.g, DAY_TEXT.b);
     const black = rgb(0, 0, 0);
     const white2 = rgb(255, 255, 255);
-    if (t < 0.51) return body2;
+    if (t < 0.51) return day2;
     if (t >= 0.52) return white2;
     return seg(t, 0.51, 0.52, black, white2);
   }
   const dark = rgb(DESC_SWATCH.r, DESC_SWATCH.g, DESC_SWATCH.b);
   const white = rgb(255, 255, 255);
-  const body = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
-  if (t < 0.6) return body;
+  const day = rgb(DAY_TEXT.r, DAY_TEXT.g, DAY_TEXT.b);
+  if (t < 0.6) return day;
   if (t >= 0.61) return white;
   const u = (t - 0.6) / 0.01;
   return rgb(
@@ -4913,8 +4914,14 @@ var DayNightTransition = ({
     const ro = new ResizeObserver(syncNightPull);
     if (dayWordRef.current) ro.observe(dayWordRef.current);
     window.addEventListener("resize", syncNightPull);
+    const mo = new MutationObserver(syncNightPull);
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir", "lang"]
+    });
     return () => {
       ro.disconnect();
+      mo.disconnect();
       window.removeEventListener("resize", syncNightPull);
     };
   }, [
@@ -7339,7 +7346,7 @@ var FeatureAwards = ({
       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__scroller", children: /* @__PURE__ */ jsxs48("div", { className: "fa__track fa__track--auto", style: trackStyle, children: [
+        /* @__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",