design-system-silkhaus 3.5.1 → 3.7.0-beta.localeSelector.1

package/dist/app/index.d.ts

@@ -137,6 +137,11 @@ export declare interface DropdownProps {
      * @default false
      */
     isMultiSelect?: boolean;
+    /**
+     * The label for the close button for mobile popup
+     * @default 'Close'
+     */
+    closeButtonLabel?: string;
 }
 
 export declare const findOptionByValue: (value: string | string[] | undefined, options: DropdownOption[]) => DropdownOption | DropdownOption[] | undefined;

package/dist/app/index.js

@@ -2,7 +2,7 @@ var Y = Object.defineProperty, Z = Object.defineProperties;
 var O = Object.getOwnPropertyDescriptors;
 var S = Object.getOwnPropertySymbols;
 var P = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
-var W = (s, d, a) => d in s ? Y(s, d, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[d] = a, j = (s, d) => {
+var W = (s, d, a) => d in s ? Y(s, d, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[d] = a, w = (s, d) => {
   for (var a in d || (d = {}))
     P.call(d, a) && W(s, a, d[a]);
   if (S)
@@ -10,7 +10,7 @@ var W = (s, d, a) => d in s ? Y(s, d, { enumerable: !0, configurable: !0, writab
       V.call(d, a) && W(s, a, d[a]);
   return s;
 }, _ = (s, d) => Z(s, O(d));
-var I = (s, d) => {
+var B = (s, d) => {
   var a = {};
   for (var t in s)
     P.call(s, t) && d.indexOf(t) < 0 && (a[t] = s[t]);
@@ -19,8 +19,8 @@ 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-DzLgSwgu.js";
-import A, { forwardRef as js, useState as w, useEffect as ws } from "react";
+import { j as e, a as v, t as ss, c as es, p as ds, u as as, o as ts, i as rs, s as ls, r as ns, v as cs, d as os, e as is, f as us, g as xs, F as ms, A as ps, h as fs, w as hs, C as bs, l as gs, k as vs, n as ys } from "../Checkbox-Bhoxdirv.js";
+import A, { forwardRef as js, useState as N, useEffect as ws } from "react";
 const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
   "div",
   {
@@ -33,9 +33,9 @@ const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
 }, Fs = {
   primary: "ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",
   secondary: "ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"
-}, z = A.forwardRef(
-  (v, g) => {
-    var x = v, {
+}, I = A.forwardRef(
+  (b, y) => {
+    var x = b, {
       color: s = "primary",
       disabled: d = !1,
       className: a,
@@ -47,7 +47,7 @@ const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
       helperText: o,
       helpterTextClassName: f,
       buttonClassName: h
-    } = x, b = I(x, [
+    } = x, g = B(x, [
       "color",
       "disabled",
       "className",
@@ -60,25 +60,25 @@ const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
       "helpterTextClassName",
       "buttonClassName"
     ]);
-    return /* @__PURE__ */ e.jsxs("div", { className: y("ds-flex ds-flex-col ds-gap-1", a), children: [
+    return /* @__PURE__ */ e.jsxs("div", { className: v("ds-flex ds-flex-col ds-gap-1", a), children: [
       /* @__PURE__ */ e.jsxs(
         "button",
-        _(j({
+        _(w({
           "data-tracking-id": c,
-          ref: g,
+          ref: y,
           disabled: d,
           className: ss(
             es(
               { [Fs[s]]: u, [Ns[s]]: !u },
               "ds-px-2 ds-py-1",
-              "ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",
+              "ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center ds-gap-1",
               h
             )
           )
-        }, b), {
+        }, g), {
           children: [
             i && /* @__PURE__ */ e.jsx(T, { children: i }),
-            t && /* @__PURE__ */ e.jsx("div", { className: `${i ? "ds-ml-1" : ""} ${l ? "ds-mr-1" : ""}`, children: t }),
+            t && /* @__PURE__ */ e.jsx("div", { children: t }),
             l && /* @__PURE__ */ e.jsx(T, { children: l })
           ]
         })
@@ -86,7 +86,7 @@ const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
       o && /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: y(
+          className: v(
             "ds-w-full ds-text-right ds-text-mediumFootnoteRegular",
             f
           ),
@@ -96,7 +96,7 @@ const T = ({ children: s, size: d = "small" }) => /* @__PURE__ */ e.jsx(
     ] });
   }
 );
-z.displayName = "Button";
+I.displayName = "Button";
 const _s = js(
   (s, d) => {
     const F = s, {
@@ -110,8 +110,8 @@ const _s = js(
       buttonWidth: o,
       minSelectionError: f,
       buttonsContainerClassName: h,
-      buttonClassName: b
-    } = F, g = I(F, [
+      buttonClassName: g
+    } = F, y = B(F, [
       "value",
       "options",
       "onSelectionChange",
@@ -122,14 +122,14 @@ const _s = js(
       "minSelectionError",
       "buttonsContainerClassName",
       "buttonClassName"
-    ]), [v, x] = w([]), [m, N] = w("");
+    ]), [b, x] = N([]), [j, m] = N("");
     ws(() => {
       a && a.length ? x(a) : x([]);
     }, [a]);
     const k = (r, p) => {
       p.currentTarget.blur();
-      const n = [...v], C = n.findIndex((B) => B.value === r.value);
-      C !== -1 ? n.length > 1 ? (n.splice(C, 1), N("")) : N(f) : (n.push(r), N("")), x(n), i(n);
+      const n = [...b], C = n.findIndex((z) => z.value === r.value);
+      C !== -1 ? n.length > 1 ? (n.splice(C, 1), m("")) : m(f) : (n.push(r), m("")), x(n), i(n);
     }, D = (r, p) => {
       p.currentTarget.blur();
       const n = [r];
@@ -137,34 +137,34 @@ const _s = js(
     };
     return /* @__PURE__ */ e.jsxs(
       "div",
-      _(j({
+      _(w({
         ref: d
-      }, g), {
+      }, y), {
         children: [
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: y("ds-flex ds-flex-wrap ds-items-center ds-gap-2", h),
+              className: v("ds-flex ds-flex-wrap ds-items-center ds-gap-2", h),
               children: t.length > 0 ? t.map((r, p) => r.type === "separator" ? /* @__PURE__ */ e.jsx(A.Fragment, { children: r.component ? r.component : /* @__PURE__ */ e.jsx("div", { className: "ds-h-full ds-min-h-[30px] ds-w-[1px] ds-bg-Fills-terciary" }) }, `separator-${p}`) : /* @__PURE__ */ e.jsx(A.Fragment, { children: u ? /* @__PURE__ */ e.jsx(
-                z,
+                I,
                 {
-                  selected: v.some((n) => n.value === r.value),
+                  selected: b.some((n) => n.value === r.value),
                   onClick: (n) => k(r, n),
                   color: "secondary",
                   style: { minWidth: c, width: o },
-                  className: b,
+                  className: g,
                   startIcon: r.startIcon,
                   endIcon: r.endIcon,
                   children: r.label
                 }
               ) : /* @__PURE__ */ e.jsx(
-                z,
+                I,
                 {
-                  selected: v.some((n) => n.value === r.value),
+                  selected: b.some((n) => n.value === r.value),
                   onClick: (n) => D(r, n),
                   color: "secondary",
                   style: { minWidth: c, width: o },
-                  className: b,
+                  className: g,
                   startIcon: r.startIcon,
                   endIcon: r.endIcon,
                   children: r.label
@@ -172,16 +172,16 @@ const _s = js(
               ) }, r.value)) : /* @__PURE__ */ e.jsx("div", { className: "ds_xSmallSubheadRegular ds-p-2 ds-text-System-red", children: l })
             }
           ),
-          m && /* @__PURE__ */ e.jsx("div", { className: "ds_xSmallSubheadRegular ds-p-2 ds-text-System-red", children: m })
+          j && /* @__PURE__ */ e.jsx("div", { className: "ds_xSmallSubheadRegular ds-p-2 ds-text-System-red", children: j })
         ]
       })
     );
   }
 );
 _s.displayName = "ButtonsGroupSelector";
-const ks = (s) => window.innerWidth < ds ? /* @__PURE__ */ e.jsx(U, j({}, s)) : /* @__PURE__ */ e.jsx($, j({}, s));
+const ks = (s) => window.innerWidth < ds ? /* @__PURE__ */ e.jsx($, w({}, s)) : /* @__PURE__ */ e.jsx(U, w({}, s));
 ks.displayName = "Dropdown";
-const $ = ({
+const U = ({
   placement: s = "bottom-start",
   trigger: d,
   triggerContainerClassName: a,
@@ -193,55 +193,55 @@ const $ = ({
   getSelectedValueDisplayText: o = J,
   placeholder: f,
   value: h,
-  isMultiSelect: b,
-  onChange: g
+  isMultiSelect: g,
+  onChange: y
 }) => {
-  const [v, x] = w(), m = typeof h == "undefined" ? v : h, N = typeof h == "undefined" ? x : () => {
-  }, [k, D] = w(!1), { refs: F, floatingStyles: r, context: p } = as({
+  const [b, x] = N(), j = typeof h == "undefined" ? b : h, m = typeof h == "undefined" ? x : () => {
+  }, [k, D] = N(!1), { refs: F, floatingStyles: r, context: p } = as({
     open: k,
     onOpenChange: (E) => {
       D(E), i && i(E);
     },
     middleware: [
       ts(8),
-      ls({
+      rs({
         crossAxis: s.includes("-"),
         fallbackAxisSideDirection: "end"
       }),
-      rs({ padding: 4 }),
+      ls({ padding: 4 }),
       ns({
         apply({ availableWidth: E, availableHeight: X, elements: M }) {
           u && (M.floating.style.maxHeight = `${X - 4}px`), l && (M.floating.style.maxWidth = `${E - 4}px`);
         }
       })
     ],
-    whileElementsMounted: cs,
+    whileElementsMounted: fs,
     placement: s
-  }), n = is(p), C = os(p), B = us(p), K = xs(p), { getReferenceProps: L, getFloatingProps: Q } = ms([n, C, B, K]);
+  }), n = cs(p), C = os(p), z = is(p), K = us(p), { getReferenceProps: L, getFloatingProps: Q } = xs([n, C, z, K]);
   return d || (d = /* @__PURE__ */ e.jsx(
     q,
     {
-      selectedOption: R(m, c),
+      selectedOption: R(j, c),
       getSelectedValueDisplayText: o,
       placeholder: f
     }
   )), t ? /* @__PURE__ */ e.jsx("div", { className: a, children: d }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "div",
-      _(j({
-        className: y("ds-cursor-pointer", a),
+      _(w({
+        className: v("ds-cursor-pointer", a),
         ref: F.setReference
       }, L()), {
         children: d
       })
     ),
-    k && /* @__PURE__ */ e.jsx(ps, { children: /* @__PURE__ */ e.jsx(
+    k && /* @__PURE__ */ e.jsx(ms, { children: /* @__PURE__ */ e.jsx(
       "div",
-      _(j({
+      _(w({
         ref: F.setFloating,
         style: r
       }, Q()), {
-        className: y(
+        className: v(
           "ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md",
           u && "ds-overflow-y-auto",
           l && "ds-overflow-x-auto"
@@ -249,20 +249,20 @@ const $ = ({
         children: /* @__PURE__ */ e.jsx(
           H,
           {
-            isMultiSelect: b,
+            isMultiSelect: g,
             options: c,
-            value: m,
-            setValue: N,
+            value: j,
+            setValue: m,
             setIsOpen: D,
-            onChange: g
+            onChange: y
           }
         )
       })
     ) })
   ] });
 };
-$.displayName = "DesktopDropdown";
-const U = ({
+U.displayName = "DesktopDropdown";
+const $ = ({
   trigger: s,
   triggerContainerClassName: d,
   disabled: a,
@@ -272,14 +272,15 @@ const U = ({
   value: l,
   options: c,
   isMultiSelect: o,
-  onChange: f
+  onChange: f,
+  closeButtonLabel: h = "Close"
 }) => {
-  const [h, b] = w(), g = typeof l == "undefined" ? h : l, v = typeof l == "undefined" ? b : () => {
-  }, [x, m] = w(!1);
+  const [g, y] = N(), b = typeof l == "undefined" ? g : l, x = typeof l == "undefined" ? y : () => {
+  }, [j, m] = N(!1);
   return s || (s = /* @__PURE__ */ e.jsx(
     q,
     {
-      selectedOption: R(g, c),
+      selectedOption: R(b, c),
       getSelectedValueDisplayText: i,
       placeholder: u
     }
@@ -295,14 +296,14 @@ const U = ({
       }
     ),
     /* @__PURE__ */ e.jsx(
-      fs,
+      ps,
       {
         animation: "slideUp",
-        show: x,
+        show: j,
         handleClose: () => {
           m(!1), t && t(!1);
         },
-        contentClassName: y("ds-absolute ds-mb-0 ds-w-full"),
+        contentClassName: v("ds-absolute ds-mb-0 ds-w-full"),
         className: "ds-z-[29999]",
         children: /* @__PURE__ */ e.jsx(
           G,
@@ -310,13 +311,14 @@ const U = ({
             onClose: () => {
               m(!1), t && t(!1);
             },
+            closeButtonLabel: h,
             children: /* @__PURE__ */ e.jsx(
               H,
               {
                 isMultiSelect: o,
                 options: c,
-                value: g,
-                setValue: v,
+                value: b,
+                setValue: x,
                 setIsOpen: m,
                 onChange: f
               }
@@ -327,29 +329,26 @@ const U = ({
     )
   ] });
 };
-U.displayName = "MobileDropdown";
-const G = ({
-  onClose: s,
-  children: d
-}) => /* @__PURE__ */ e.jsxs("div", { className: "ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white", children: [
+$.displayName = "MobileDropdown";
+const G = ({ onClose: s, closeButtonLabel: d, children: a }) => /* @__PURE__ */ e.jsxs("div", { className: "ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white", children: [
   /* @__PURE__ */ e.jsxs("div", { className: "ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4", children: [
     /* @__PURE__ */ e.jsx(
       "div",
       {
         onClick: s,
         className: "ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",
-        children: /* @__PURE__ */ e.jsx(hs, { className: "ds-size-4" })
+        children: /* @__PURE__ */ e.jsx(bs, { className: "ds-size-4" })
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "ds-size-5" })
   ] }),
-  /* @__PURE__ */ e.jsx("div", { className: "ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular", children: d }),
+  /* @__PURE__ */ e.jsx("div", { className: "ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular", children: a }),
   /* @__PURE__ */ e.jsx("div", { className: "ds-px-8 ds-py-4", children: /* @__PURE__ */ e.jsx(
-    bs,
+    gs,
     {
       buttonClassName: "ds-py-3",
       onClick: s,
-      children: "Close"
+      children: d
     }
   ) })
 ] });
@@ -361,10 +360,10 @@ const q = ({
 }) => {
   const t = !s || Array.isArray(s) && s.length === 0 ? a || "" : d(s);
   return /* @__PURE__ */ e.jsx(
-    z,
+    I,
     {
       color: "secondary",
-      endIcon: /* @__PURE__ */ e.jsx(gs, { className: "ds-size-4" }),
+      endIcon: /* @__PURE__ */ e.jsx(hs, { className: "ds-size-4" }),
       buttonClassName: "ds-justify-between",
       children: t
     }
@@ -402,7 +401,7 @@ const q = ({
   "div",
   {
     onClick: d.disabled ? void 0 : s,
-    className: y(
+    className: v(
       "ds-group ds-flex ds-min-h-[72px] ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-smallFootnoteEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-min-h-[auto] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",
       !t && "ds-transition-[padding] ds-duration-300 hover:ds-px-4"
     ),
@@ -418,7 +417,7 @@ const q = ({
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: y(
+          className: v(
             "ds-flex-grow",
             !t && "ds-transition-[padding] ds-duration-300 group-hover:ds-pr-0 ds-tablet:ds-pr-4"
           ),
@@ -437,10 +436,10 @@ const q = ({
   }
 ), R = (s, d) => Array.isArray(s) ? d.filter((a) => s.includes(a.value)) : d.find((a) => a.value === s), J = (s) => Array.isArray(s) ? s.map((d) => d.label).join(", ") : s.label;
 export {
-  z as Button,
+  I as Button,
   _s as ButtonsGroupSelector,
-  $ as DesktopDropdown,
+  U as DesktopDropdown,
   ks as Dropdown,
-  U as MobileDropdown,
+  $ as MobileDropdown,
   R as findOptionByValue
 };

package/dist/index.d.ts

@@ -761,6 +761,19 @@ export declare const LoadingIcon: FC<{
     className?: string;
 }>;
 
+export declare interface LocaleSettingsModalProps {
+    languages?: Option_3[];
+    currencies?: Option_3[];
+    selectedLanguage?: Option_3;
+    selectedCurrency?: Option_3;
+    show: boolean;
+    onSave: (settings: {
+        language: Option_3;
+        currency: Option_3;
+    }) => void;
+    onClose: () => void;
+}
+
 export declare const LocationIcon: FC<{
     className?: string;
 }>;
@@ -885,6 +898,11 @@ declare interface Option_2 {
 }
 export { Option_2 as Option }
 
+declare type Option_3 = {
+    value: string;
+    label: string;
+};
+
 export declare const PartnerIcon: FC<{
     className?: string;
 }>;