design-system-silkhaus 3.3.0 → 3.4.0-beta.rtl-issues.2

package/dist/{Checkbox-DwGmxWYP.js → Checkbox-C6k7oFhV.js}

@@ -95,8 +95,8 @@ function to() {
       {
         var O = x.ReactDebugCurrentFrame, $ = O.getStackAddendum();
         $ !== "" && (b += "%s", R = R.concat([$]));
-        var K = R.map(function(F) {
-          return String(F);
+        var K = R.map(function(B) {
+          return String(B);
         });
         K.unshift("Warning: " + b), Function.prototype.apply.call(console[s], console, K);
       }
@@ -155,9 +155,9 @@ function to() {
             var O = s.displayName || null;
             return O !== null ? O : q(s.type) || "Memo";
           case v: {
-            var $ = s, K = $._payload, F = $._init;
+            var $ = s, K = $._payload, B = $._init;
             try {
-              return q(F(K));
+              return q(B(K));
             } catch (D) {
               return null;
             }
@@ -262,27 +262,27 @@ function to() {
       K = le.current, le.current = null, Qe();
       try {
         if (b) {
-          var F = function() {
+          var B = function() {
             throw Error();
           };
-          if (Object.defineProperty(F.prototype, "props", {
+          if (Object.defineProperty(B.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(F, []);
+              Reflect.construct(B, []);
             } catch (re) {
               O = re;
             }
-            Reflect.construct(s, [], F);
+            Reflect.construct(s, [], B);
           } else {
             try {
-              F.call();
+              B.call();
             } catch (re) {
               O = re;
             }
-            s.call(F.prototype);
+            s.call(B.prototype);
           }
         } else {
           try {
@@ -347,7 +347,7 @@ function to() {
             var O = s, $ = O._payload, K = O._init;
             try {
               return tt(K($), b, R);
-            } catch (F) {
+            } catch (B) {
             }
           }
         }
@@ -364,19 +364,19 @@ function to() {
     function kr(s, b, R, O, $) {
       {
         var K = Function.call.bind(Ie);
-        for (var F in s)
-          if (K(s, F)) {
+        for (var B in s)
+          if (K(s, B)) {
             var D = void 0;
             try {
-              if (typeof s[F] != "function") {
-                var te = Error((O || "React class") + ": " + R + " type `" + F + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof s[F] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+              if (typeof s[B] != "function") {
+                var te = Error((O || "React class") + ": " + R + " type `" + B + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof s[B] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw te.name = "Invariant Violation", te;
               }
-              D = s[F](b, F, O, R, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+              D = s[B](b, B, O, R, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (Q) {
               D = Q;
             }
-            D && !(D instanceof Error) && (nt($), y("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", O || "React class", R, F, typeof D), nt(null)), D instanceof Error && !(D.message in tn) && (tn[D.message] = !0, nt($), y("Failed %s type: %s", R, D.message), nt(null));
+            D && !(D instanceof Error) && (nt($), y("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", O || "React class", R, B, typeof D), nt(null)), D instanceof Error && !(D.message in tn) && (tn[D.message] = !0, nt($), y("Failed %s type: %s", R, D.message), nt(null));
           }
       }
     }
@@ -451,7 +451,7 @@ function to() {
         });
       }
     }
-    var Dr = function(s, b, R, O, $, K, F) {
+    var Dr = function(s, b, R, O, $, K, B) {
       var D = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: t,
@@ -459,7 +459,7 @@ function to() {
         type: s,
         key: b,
         ref: R,
-        props: F,
+        props: B,
         // Record the component responsible for creating this element.
         _owner: K
       };
@@ -482,20 +482,20 @@ function to() {
     };
     function Fr(s, b, R, O, $) {
       {
-        var K, F = {}, D = null, te = null;
+        var K, B = {}, D = null, te = null;
         R !== void 0 && (on(R), D = "" + R), Ar(b) && (on(b.key), D = "" + b.key), Hr(b) && (te = b.ref, Or(b, $));
         for (K in b)
-          Ie.call(b, K) && !Pr.hasOwnProperty(K) && (F[K] = b[K]);
+          Ie.call(b, K) && !Pr.hasOwnProperty(K) && (B[K] = b[K]);
         if (s && s.defaultProps) {
           var Q = s.defaultProps;
           for (K in Q)
-            F[K] === void 0 && (F[K] = Q[K]);
+            B[K] === void 0 && (B[K] = Q[K]);
         }
         if (D || te) {
           var ee = typeof s == "function" ? s.displayName || s.name || "Unknown" : s;
-          D && Wr(F, ee), te && _r(F, ee);
+          D && Wr(B, ee), te && _r(B, ee);
         }
-        return Dr(s, D, te, $, O, an.current, F);
+        return Dr(s, D, te, $, O, an.current, B);
       }
     }
     var vt = x.ReactCurrentOwner, cn = x.ReactDebugCurrentFrame;
@@ -566,8 +566,8 @@ Check the top-level render call using <` + R + ">.");
         else if (s) {
           var $ = w(s);
           if (typeof $ == "function" && $ !== s.entries)
-            for (var K = $.call(s), F; !(F = K.next()).done; )
-              xt(F.value) && fn(F.value, b);
+            for (var K = $.call(s), B; !(B = K.next()).done; )
+              xt(B.value) && fn(B.value, b);
         }
       }
     }
@@ -611,8 +611,8 @@ Check the top-level render call using <` + R + ">.");
     var hn = {};
     function mn(s, b, R, O, $, K) {
       {
-        var F = V(s);
-        if (!F) {
+        var B = V(s);
+        if (!B) {
           var D = "";
           (s === void 0 || typeof s == "object" && s !== null && Object.keys(s).length === 0) && (D += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
           var te = Br();
@@ -623,7 +623,7 @@ Check the top-level render call using <` + R + ">.");
         var ee = Fr(s, b, R, $, K);
         if (ee == null)
           return ee;
-        if (F) {
+        if (B) {
           var se = b.children;
           if (se !== void 0)
             if (O)
@@ -664,7 +664,7 @@ React keys must be passed directly to JSX without using spread:
   }()), Ne;
 }
 process.env.NODE_ENV === "production" ? At.exports = eo() : At.exports = to();
-var B = At.exports;
+var F = At.exports;
 const Gt = "-", no = (e) => {
   const t = oo(e), {
     conflictingClassGroups: n,
@@ -2947,7 +2947,7 @@ const J = (e) => {
       const r = t[n];
       r !== void 0 && (e[n] = (e[n] || []).concat(r));
     }
-}, Wo = (e, ...t) => typeof e == "function" ? Wt(_t, e, ...t) : Wt(() => Ho(_t(), e), ...t), Dt = /* @__PURE__ */ Wt(_t), En = ({ children: e, size: t = "small" }) => /* @__PURE__ */ B.jsx(
+}, Wo = (e, ...t) => typeof e == "function" ? Wt(_t, e, ...t) : Wt(() => Ho(_t(), e), ...t), Dt = /* @__PURE__ */ Wt(_t), En = ({ children: e, size: t = "small" }) => /* @__PURE__ */ F.jsx(
   "div",
   {
     className: `ds-flex ds-items-center ds-justify-center ${t === "small" ? "ds-h-5 ds-w-5" : "ds-h-6 ds-w-6"}`,
@@ -2977,7 +2977,7 @@ const Ut = {
       "ds-mobile": { min: "375px" },
       "ds-tablet": { min: "768px" },
       "ds-desktop": { min: "1024px" },
-      "ds-wide_desktop": { min: "1440px" }
+      "ds-wide_desktop": { min: "1280px" }
     },
     extend: {
       colors: {
@@ -3859,8 +3859,8 @@ const wa = (e, t = "AED") => {
       "helpterTextClassName",
       "buttonClassName"
     ]);
-    return /* @__PURE__ */ B.jsxs("div", { className: Ue("ds-flex ds-flex-col ds-gap-1", r), children: [
-      /* @__PURE__ */ B.jsxs(
+    return /* @__PURE__ */ F.jsxs("div", { className: Ue("ds-flex ds-flex-col ds-gap-1", r), children: [
+      /* @__PURE__ */ F.jsx(
         "button",
         G(L({
           "data-tracking-id": c,
@@ -3875,14 +3875,14 @@ const wa = (e, t = "AED") => {
             )
           )
         }, v), {
-          children: [
-            a && /* @__PURE__ */ B.jsx(En, { size: t, children: a }),
-            o && /* @__PURE__ */ B.jsx("div", { className: `${a ? "ds-ml-2" : ""} ${l ? "ds-mr-2" : ""}`, children: o }),
-            l && /* @__PURE__ */ B.jsx(En, { size: t, children: l })
-          ]
+          children: /* @__PURE__ */ F.jsxs("div", { className: "ds-flex ds-items-center ds-gap-2", children: [
+            a && /* @__PURE__ */ F.jsx(En, { size: t, children: a }),
+            o && /* @__PURE__ */ F.jsx("div", { children: o }),
+            l && /* @__PURE__ */ F.jsx(En, { size: t, children: l })
+          ] })
         })
       ),
-      u && /* @__PURE__ */ B.jsx(
+      u && /* @__PURE__ */ F.jsx(
         "div",
         {
           className: Ue(
@@ -3896,7 +3896,7 @@ const wa = (e, t = "AED") => {
   }
 );
 Bo.displayName = "Button";
-const Ra = ({ className: e }) => /* @__PURE__ */ B.jsxs(
+const Ra = ({ className: e }) => /* @__PURE__ */ F.jsxs(
   "svg",
   {
     width: "100%",
@@ -3906,14 +3906,14 @@ const Ra = ({ className: e }) => /* @__PURE__ */ B.jsxs(
     xmlns: "http://www.w3.org/2000/svg",
     className: e,
     children: [
-      /* @__PURE__ */ B.jsx("g", { clipPath: "url(#hei1mmknga)", children: /* @__PURE__ */ B.jsx(
+      /* @__PURE__ */ F.jsx("g", { clipPath: "url(#hei1mmknga)", children: /* @__PURE__ */ F.jsx(
         "path",
         {
           d: "M3.261 14.356a.664.664 0 0 0 .92 0l4.629-4.63 4.63 4.63a.657.657 0 0 0 .918 0 .655.655 0 0 0 0-.911l-4.63-4.637 4.63-4.63a.648.648 0 0 0 0-.911.65.65 0 0 0-.919 0l-4.63 4.63-4.629-4.63a.644.644 0 0 0-.919 0 .655.655 0 0 0 0 .911l4.63 4.63-4.63 4.637a.648.648 0 0 0 0 .911z",
           fill: "currentColor"
         }
       ) }),
-      /* @__PURE__ */ B.jsx("defs", { children: /* @__PURE__ */ B.jsx("clipPath", { id: "hei1mmknga", children: /* @__PURE__ */ B.jsx(
+      /* @__PURE__ */ F.jsx("defs", { children: /* @__PURE__ */ F.jsx("clipPath", { id: "hei1mmknga", children: /* @__PURE__ */ F.jsx(
         "path",
         {
           fill: "currentColor",
@@ -3923,7 +3923,7 @@ const Ra = ({ className: e }) => /* @__PURE__ */ B.jsxs(
       ) }) })
     ]
   }
-), Ea = ({ className: e }) => /* @__PURE__ */ B.jsx(B.Fragment, { children: /* @__PURE__ */ B.jsxs(
+), Ea = ({ className: e }) => /* @__PURE__ */ F.jsx(F.Fragment, { children: /* @__PURE__ */ F.jsxs(
   "svg",
   {
     width: "100%",
@@ -3933,14 +3933,14 @@ const Ra = ({ className: e }) => /* @__PURE__ */ B.jsxs(
     xmlns: "http://www.w3.org/2000/svg",
     className: e,
     children: [
-      /* @__PURE__ */ B.jsx("g", { clipPath: "url(#clip0_4866_5637)", children: /* @__PURE__ */ B.jsx(
+      /* @__PURE__ */ F.jsx("g", { clipPath: "url(#clip0_4866_5637)", children: /* @__PURE__ */ F.jsx(
         "path",
         {
           d: "M6.52428 13.4203C6.90774 13.4203 7.20983 13.2655 7.41784 12.9501L13.5122 3.52347C13.6646 3.28912 13.7267 3.08171 13.7267 2.88436C13.7267 2.36687 13.3495 2 12.8237 2C12.4557 2 12.2359 2.12604 12.0113 2.47695L6.49823 11.2137L3.67348 7.63567C3.4631 7.36641 3.23617 7.25042 2.91898 7.25042C2.38226 7.25042 2 7.63061 2 8.15017C2 8.3765 2.07753 8.59131 2.26954 8.82004L5.6381 12.9764C5.88517 13.278 6.15945 13.4203 6.52428 13.4203Z",
           fill: "currentColor"
         }
       ) }),
-      /* @__PURE__ */ B.jsx("defs", { children: /* @__PURE__ */ B.jsx("clipPath", { id: "clip0_4866_5637", children: /* @__PURE__ */ B.jsx(
+      /* @__PURE__ */ F.jsx("defs", { children: /* @__PURE__ */ F.jsx("clipPath", { id: "clip0_4866_5637", children: /* @__PURE__ */ F.jsx(
         "rect",
         {
           width: "16",
@@ -3950,7 +3950,7 @@ const Ra = ({ className: e }) => /* @__PURE__ */ B.jsxs(
       ) }) })
     ]
   }
-) }), Ta = ({ className: e }) => /* @__PURE__ */ B.jsxs(
+) }), Ta = ({ className: e }) => /* @__PURE__ */ F.jsxs(
   "svg",
   {
     width: "100%",
@@ -3960,14 +3960,14 @@ const Ra = ({ className: e }) => /* @__PURE__ */ B.jsxs(
     xmlns: "http://www.w3.org/2000/svg",
     className: e,
     children: [
-      /* @__PURE__ */ B.jsx("g", { clipPath: "url(#clip0_4866_6306)", children: /* @__PURE__ */ B.jsx(
+      /* @__PURE__ */ F.jsx("g", { clipPath: "url(#clip0_4866_6306)", children: /* @__PURE__ */ F.jsx(
         "path",
         {
           d: "M8.00315 10.6667C8.15667 10.6667 8.31019 10.6053 8.41458 10.4888L13.1676 5.62374C13.272 5.51945 13.3334 5.38448 13.3334 5.23111C13.3334 4.91208 13.0939 4.66669 12.7746 4.66669C12.6211 4.66669 12.4798 4.72804 12.3755 4.8262L7.67154 9.62987H8.32862L3.62472 4.8262C3.52647 4.72804 3.38523 4.66669 3.22557 4.66669C2.90624 4.66669 2.66675 4.91208 2.66675 5.23111C2.66675 5.38448 2.72816 5.51945 2.83255 5.62988L7.58557 10.4888C7.70225 10.6053 7.84349 10.6667 8.00315 10.6667Z",
           fill: "currentColor"
         }
       ) }),
-      /* @__PURE__ */ B.jsx("defs", { children: /* @__PURE__ */ B.jsx("clipPath", { id: "clip0_4866_6306", children: /* @__PURE__ */ B.jsx(
+      /* @__PURE__ */ F.jsx("defs", { children: /* @__PURE__ */ F.jsx("clipPath", { id: "clip0_4866_6306", children: /* @__PURE__ */ F.jsx(
         "rect",
         {
           width: "16",
@@ -6266,21 +6266,21 @@ const ga = {
     const d = {
       marginTop: a ? `${a}` : void 0,
       maxWidth: i ? `${i}` : void 0
-    }, h = /* @__PURE__ */ B.jsxs(
+    }, h = /* @__PURE__ */ F.jsxs(
       "div",
       G(L({
         ref: t,
         className: Dt("modal-animated", n ? "show" : "hide", c)
       }, f), {
         children: [
-          /* @__PURE__ */ B.jsx(
+          /* @__PURE__ */ F.jsx(
             "div",
             {
               className: "modal-animated-backdrop",
               onClick: r
             }
           ),
-          /* @__PURE__ */ B.jsx(
+          /* @__PURE__ */ F.jsx(
             "div",
             {
               className: Dt(
@@ -6316,7 +6316,7 @@ const ma = Number(
     };
   }, []), { documentWidth: e, documentHeight: n, screenSize: o };
 }, va = Gn(
-  ({ label: e, isChecked: t, onSelectionChange: n, disabled: r, className: o, labelPosition: a = "right" }, i) => /* @__PURE__ */ B.jsxs(
+  ({ label: e, isChecked: t, onSelectionChange: n, disabled: r, className: o, labelPosition: a = "right" }, i) => /* @__PURE__ */ F.jsxs(
     "label",
     {
       className: Ue(
@@ -6326,7 +6326,7 @@ const ma = Number(
         o
       ),
       children: [
-        /* @__PURE__ */ B.jsx(
+        /* @__PURE__ */ F.jsx(
           "input",
           {
             className: "ds-hidden",
@@ -6340,7 +6340,7 @@ const ma = Number(
             onClick: (l) => l.stopPropagation()
           }
         ),
-        /* @__PURE__ */ B.jsx(
+        /* @__PURE__ */ F.jsx(
           "div",
           {
             className: Ue(
@@ -6349,7 +6349,7 @@ const ma = Number(
             )
           }
         ),
-        e && /* @__PURE__ */ B.jsx("div", { className: "ds-flex-grow", children: e })
+        e && /* @__PURE__ */ F.jsx("div", { className: "ds-flex-grow", children: e })
       ]
     }
   )
@@ -6369,7 +6369,7 @@ export {
   _a as g,
   La as h,
   Sa as i,
-  B as j,
+  F as j,
   Ea as k,
   Bo as l,
   Fa as m,

package/dist/app/index.js

@@ -19,7 +19,7 @@ var I = (s, d) => {
       d.indexOf(t) < 0 && V.call(s, t) && (a[t] = s[t]);
   return a;
 };
-import { j as e, a as y, t as ss, c as es, p as ds, u as as, o as ts, h as ls, s as rs, r as ns, i as cs, v as is, d as os, e as us, f as xs, g as ms, F as ps, A as fs, C as hs, l as bs, w as gs, k as vs, n as ys } from "../Checkbox-DwGmxWYP.js";
+import { j as e, a as y, t as ss, c as es, p as ds, u as as, o as ts, h as ls, s as rs, r as ns, i as cs, v as is, d as os, e as us, f as xs, g as ms, F as ps, A as fs, C as hs, l as bs, w as gs, k as vs, n as ys } from "../Checkbox-C6k7oFhV.js";
 import A, { forwardRef as js, useState as w, useEffect as ws } from "react";
 const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
   "div",

package/dist/index.d.ts

@@ -383,7 +383,7 @@ declare interface DateRangePickerProps {
     lTBannerDesc?: string | default_2.ReactNode;
     lTBannerBgColor?: string;
     thirdColumn?: string | default_2.ReactNode;
-    onMobileCloseClick: () => void;
+    onMobileCloseClick?: () => void;
     onOutsideClick?: (e: unknown) => void;
     onPrevMonthClick?: (e: unknown) => void;
     onNextMonthClick?: (e: unknown) => void;
@@ -798,6 +798,7 @@ export declare interface MobileFilterMenuProps extends HTMLAttributes<HTMLDivEle
     backgroundImage?: string;
     marginTop?: string;
     maxWidth?: string;
+    rtl?: boolean;
 }
 
 export declare const MobileMultiSelectFilterDropDown: ForwardRefExoticComponent<MobileMultiSelectFilterDropDownProps & RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -19,8 +19,8 @@ var Ot = (t, e) => {
       e.indexOf(n) < 0 && jh.call(t, n) && (r[n] = t[n]);
   return r;
 };
-import { j as u, t as He, c as Ee, B as P9, a as xe, u as og, b as x9, d as sg, e as lg, f as ug, g as dg, F as cg, A as Xn, C as Br, o as fg, h as hg, i as pg, k as vg, l as Bt, m as D9, n as S9, p as v1, q as yg, s as O9, r as T9, v as M9 } from "./Checkbox-DwGmxWYP.js";
-import { w as TL, x as ML, y as kL } from "./Checkbox-DwGmxWYP.js";
+import { j as u, t as He, c as Ee, B as P9, a as xe, u as og, b as x9, d as sg, e as lg, f as ug, g as dg, F as cg, A as Xn, C as Br, o as fg, h as hg, i as pg, k as vg, l as Bt, m as D9, n as S9, p as v1, q as yg, s as O9, r as T9, v as M9 } from "./Checkbox-C6k7oFhV.js";
+import { w as TL, x as ML, y as kL } from "./Checkbox-C6k7oFhV.js";
 import * as ct from "react";
 import oe, { useState as qe, useMemo as yr, useEffect as ft, useCallback as ze, forwardRef as er, createContext as gg, useRef as Tt, useContext as Ta, useDebugValue as Ah, useLayoutEffect as y1, isValidElement as on, useSyncExternalStore as k9, cloneElement as Lf } from "react";
 import Fe from "moment";
@@ -3139,7 +3139,7 @@ const Fh = "data:image/svg+xml,%3csvg%20width='11'%20height='11'%20viewBox='0%20
                 h && /* @__PURE__ */ u.jsx(
                   "span",
                   {
-                    className: `py-2 ds_MediumBodyEmphasized ds-text-Text-primary ltr:ds-pl-3 rtl:ds-pr-3 ${e ? "ds-opacity-50" : ""}`,
+                    className: `py-2 ds_MediumBodyEmphasized ds-pl-3 ds-text-Text-primary rtl:ds-pl-0 rtl:ds-pr-3 ${e ? "ds-opacity-50" : ""}`,
                     children: h
                   }
                 ),
@@ -3159,7 +3159,7 @@ const Fh = "data:image/svg+xml,%3csvg%20width='11'%20height='11'%20viewBox='0%20
                 p && /* @__PURE__ */ u.jsx(
                   "span",
                   {
-                    className: `py-2 ds_MediumBodyEmphasized ds-pr-3 ds-text-Text-primary ${e ? "ds-opacity-50" : ""}`,
+                    className: `py-2 ds_MediumBodyEmphasized ds-pr-3 ds-text-Text-primary rtl:ds-pl-3 rtl:ds-pr-0 ${e ? "ds-opacity-50" : ""}`,
                     children: p
                   }
                 )
@@ -21424,7 +21424,13 @@ const GD = oe.forwardRef(
                   renderCalendarDay: m,
                   renderDayContents: g,
                   renderCalendarInfo: y,
-                  isDayBlocked: E
+                  isDayBlocked: E,
+                  renderWeekHeaderElement: (se) => ({
+                    ح: "أ",
+                    // sunday
+                    ن: "إ"
+                    // monday
+                  })[se] || se
                 }
               ),
               /* @__PURE__ */ u.jsxs(
@@ -21628,7 +21634,6 @@ const f7 = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%20
                   /* @__PURE__ */ u.jsx(
                     S9,
                     {
-                      label: I.label,
                       isChecked: g.findIndex((P) => P.label === I.label) !== -1,
                       onSelectionChange: () => S(I.label, I.id),
                       onClick: (P) => P.stopPropagation()
@@ -21667,8 +21672,9 @@ const XD = er((t, e) => {
     animation: d = "slideUp",
     marginTop: c,
     maxWidth: f,
-    children: h
-  } = t, p = !l && i ? { backgroundImage: `url(${i})` } : { backgroundColor: "white" };
+    children: h,
+    rtl: p = !1
+  } = t, m = !l && i ? { backgroundImage: `url(${i})` } : { backgroundColor: "white" };
   return /* @__PURE__ */ u.jsx(
     Xn,
     {
@@ -21680,8 +21686,9 @@ const XD = er((t, e) => {
       children: /* @__PURE__ */ u.jsxs(
         "div",
         {
-          style: p,
+          style: m,
           className: "ds-h-dvh",
+          dir: p ? "rtl" : "ltr",
           children: [
             /* @__PURE__ */ u.jsx("div", { children: /* @__PURE__ */ u.jsxs(
               "div",
@@ -21783,7 +21790,7 @@ const QD = er(
                         className: Ee(
                           s && "ds-text-black",
                           !s && "ds-text-Fills-secondary",
-                          "ds-absolute ds-left-0 ds-top-1/2 ds-max-w-6 -ds-translate-y-1/2"
+                          "ds-absolute ds-start-0 ds-top-1/2 ds-max-w-6 -ds-translate-y-1/2"
                         ),
                         children: [
                           f && !l ? f : "",
@@ -21823,7 +21830,7 @@ const QD = er(
               /* @__PURE__ */ u.jsx("div", { className: "ds-z-0 ds-flex-1 ds-overflow-auto ds-p-6", children: (a == null ? void 0 : a.length) > 0 ? a.map((C, b) => /* @__PURE__ */ u.jsxs(
                 "div",
                 {
-                  className: "design-dropdown-select-item",
+                  className: "design-dropdown-select-item ds-flex ds-items-center ds-gap-6",
                   onClick: () => {
                     i(C), g(!1);
                   },
@@ -21836,7 +21843,7 @@ const QD = er(
                         alt: C == null ? void 0 : C.label
                       }
                     ),
-                    /* @__PURE__ */ u.jsx("span", { className: "ds_MediumBodyEmphasized ds-pl-6", children: (C == null ? void 0 : C.label) || "" })
+                    /* @__PURE__ */ u.jsx("span", { className: "ds_MediumBodyEmphasized", children: (C == null ? void 0 : C.label) || "" })
                   ]
                 },
                 b