design-system-silkhaus 4.0.0-beta.color-names.2 → 4.0.0-beta.color-names.3

package/dist/index.js

@@ -19,8 +19,8 @@ var ze = (e, t) => {
       t.indexOf(n) < 0 && V0.call(e, n) && (r[n] = e[n]);
   return r;
 };
-import { j as u, t as Ve, c as AC, d as Re, e as xe, u as Lp, g as HC, h as Ap, i as Hp, k as Fp, l as qp, F as Vp, A as wa, m as $p, o as Bp, n as Wp, C as Fr, p as zp, q as wt, r as af, s as FC, v as of, w as Up, x as qC, y as VC, z as $C, a as W0, B as C2, D as BC } from "./index-dmbSCZ1I.js";
-import { E as B$, G as W$, H as z$ } from "./index-dmbSCZ1I.js";
+import { j as u, t as Ve, c as AC, d as Re, e as xe, u as Lp, g as HC, h as Ap, i as Hp, k as Fp, l as qp, F as Vp, A as wa, m as $p, o as Bp, n as Wp, C as Fr, p as zp, q as wt, r as af, s as FC, v as of, w as Up, x as qC, y as VC, z as $C, a as W0, B as C2, D as BC } from "./index-cVxmO35M.js";
+import { E as B$, G as W$, H as z$ } from "./index-cVxmO35M.js";
 import * as ee from "react";
 import de, { useState as Le, useMemo as Pr, useEffect as Ge, useCallback as Ze, forwardRef as wr, createContext as sf, useRef as mt, useContext as fa, useDebugValue as z0, useLayoutEffect as lf, isValidElement as _n, useSyncExternalStore as WC, cloneElement as w2 } from "react";
 import Ne from "moment";
@@ -49,10 +49,10 @@ function Ei(e) {
   }), r;
 }
 const U0 = {
-  primary: "ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentPrimary-highlight active:ds-bg-Background-accentPrimary-darkened focus:ds-rounded-none focus:ds-bg-Background-accentPrimary-100 focus:ds-border focus:ds-border-white focus:ds-shadow-[0px_0px_0px_1px_rgba(109,54,169,1)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentPrimary-20",
+  primary: "ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryInverse ds-rounded-sm hover:ds-text-Text-textPrimaryInverse hover:ds-bg-Background-accentPrimary-highlight active:ds-bg-Background-accentPrimary-darkened focus:ds-rounded-none focus:ds-bg-Background-accentPrimary-100 focus:ds-border focus:ds-border-Fills-inversePrimary focus:ds-shadow-[0px_0px_0px_1px_rgba(109,54,169,1)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentPrimary-20",
   secondary: "ds-text-Background-accentPrimary-100 ds-rounded-sm ds-border ds-border-Fills-secondary hover:ds-text-Background-accentPrimary-100 hover:ds-border hover:ds-bg-Background-accentPrimary-5 hover:ds-border-Fills-primary active:ds-text-Background-accentPrimary-100 active:ds-border active:ds-border-Fills-Background-accentPrimary-100 active:ds-bg-Background-accentPrimary-5 focus:ds-bg-Background-accentPrimary-5 focus:ds-bg-Background-accentPrimary-5 focus:ds-text-accentPrimary-100 focus:ds-border-2 focus:ds-border-Background-accentPrimary-100 disabled:ds-border disabled:ds-border-Fills-tertiary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent",
   tertiary: "ds-text-Text-secondary ds-rounded-sm hover:ds-bg-Fills-quinary active:ds-bg-Fills-quinary focus:ds-bg-Fills-quaternary disabled:ds-text-Fills-quaternary disabled:ds-bg-Fills-quinary",
-  quaternary: "ds-text-accentPrimary-100 ds-rounded-sm hover:ds-bg-Background-accentPrimary-5 active:ds-bg-Background-accentPrimary-5 focus:ds-bg-Background-accentPrimary-100 focus:ds-text-Text-textPrimaryDark disabled:ds-text-Background-accentPrimary-20",
+  quaternary: "ds-text-accentPrimary-100 ds-rounded-sm hover:ds-bg-Background-accentPrimary-5 active:ds-bg-Background-accentPrimary-5 focus:ds-bg-Background-accentPrimary-100 focus:ds-text-Text-textPrimaryInverse disabled:ds-text-Background-accentPrimary-20",
   small: "ds-py-space100 ds-px-space100",
   large: "ds-py-space150 ds-px-space150"
 }, UC = de.forwardRef(
@@ -346,7 +346,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "20.0098",
           height: "19.7949",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0 0.602539)"
         }
       ) }) })
@@ -392,7 +392,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "23.2129",
           height: "18.3618",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0 0.819336)"
         }
       ) }) })
@@ -837,7 +837,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "8",
           height: "12.6667",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0.5)"
         }
       ) }) })
@@ -992,7 +992,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "100%",
           height: "100%",
-          fill: "white"
+          fill: "var(--fills-inverse-primary)"
         }
       ) }) })
     ]
@@ -1019,7 +1019,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "100%",
           height: "100%",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0.666626 0.666504)"
         }
       ) }) })
@@ -1046,7 +1046,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         "path",
         {
           d: "M11.3129 6.43053C10.7227 6.43053 10.2058 5.9161 10.2058 5.31552C10.2058 4.72031 10.7227 4.21375 11.3129 4.21375C11.9185 4.21375 12.4147 4.72031 12.4147 5.31552C12.4147 5.9161 11.9185 6.43053 11.3129 6.43053Z",
-          fill: "white"
+          fill: "var(--fills-inverse-primary)"
         }
       )
     ]
@@ -1073,7 +1073,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "24",
           height: "24",
-          fill: "white"
+          fill: "var(--fills-inverse-primary)"
         }
       ) }) })
     ]
@@ -1138,7 +1138,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "14",
           height: "14",
-          fill: "white"
+          fill: "var(--fills-inverse-primary)"
         }
       ) }) })
     ]
@@ -1291,7 +1291,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "15",
           height: "13.5",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0.5 0.25)"
         }
       ) }) })
@@ -1328,7 +1328,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "15",
           height: "15",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0.5 0.5)"
         }
       ) }) })
@@ -1356,7 +1356,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "10.8486",
           height: "15",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0 0.5)"
         }
       ) }) })
@@ -1384,7 +1384,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "9.59108",
           height: "15",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0 0.5)"
         }
       ) }) })
@@ -1468,7 +1468,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "13.5",
           height: "13.5",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(2.25 2.75)"
         }
       ) }) })
@@ -1519,7 +1519,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "13.5",
           height: "13.5",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(2.25 2.75)"
         }
       ) }) })
@@ -1563,7 +1563,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "15",
           height: "12",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(1.5 3.5)"
         }
       ) }) })
@@ -1633,7 +1633,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "12",
           height: "13.5",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(3 2.75)"
         }
       ) }) })
@@ -1670,7 +1670,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "12",
           height: "13.5",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(3 2.75)"
         }
       ) }) })
@@ -1698,7 +1698,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "15",
           height: "14.25",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(1.5 2)"
         }
       ) }) })
@@ -1726,7 +1726,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "15",
           height: "14.25",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(1.5 2)"
         }
       ) }) })
@@ -1764,7 +1764,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
           {
             width: "18",
             height: "18",
-            fill: "white",
+            fill: "var(--fills-inverse-primary)",
             transform: "translate(0 0.5)"
           }
         ) }),
@@ -1773,7 +1773,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
           {
             width: "17.25",
             height: "17.25",
-            fill: "white",
+            fill: "var(--fills-inverse-primary)",
             transform: "translate(-0.75 0.5)"
           }
         ) })
@@ -1811,7 +1811,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "18",
           height: "18",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0 0.5)"
         }
       ) }) })
@@ -1856,7 +1856,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "18.3333",
           height: "10",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(0.833496 5)"
         }
       ) }) })
@@ -1900,7 +1900,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "13.3333",
           height: "15.8333",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(3.3335 1.66669)"
         }
       ) }) })
@@ -1937,7 +1937,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "15.8333",
           height: "13.3333",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(1.6665 3.33331)"
         }
       ) }) })
@@ -1974,7 +1974,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "15",
           height: "15",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(2.5 2.5)"
         }
       ) }) })
@@ -2029,7 +2029,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
       "path",
       {
         d: "M1.5 9.49999C1.5 9.9009 1.87273 10.2282 2.30909 10.2282H8.1909V15.5218C8.1909 15.9145 8.55453 16.25 8.99999 16.25C9.44545 16.25 9.81817 15.9145 9.81817 15.5218V10.2282H15.6909C16.1273 10.2282 16.5 9.9009 16.5 9.49999C16.5 9.09908 16.1273 8.76363 15.6909 8.76363H9.81817V3.47818C9.81817 3.08545 9.44545 2.75 8.99999 2.75C8.55453 2.75 8.1909 3.08545 8.1909 3.47818V8.76363H2.30909C1.87273 8.76363 1.5 9.09908 1.5 9.49999Z",
-        fill: "black"
+        fill: "currentColor"
       }
     )
   }
@@ -2072,7 +2072,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "13.3333",
           height: "10.6667",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(1.33398 2.66669)"
         }
       ) }) })
@@ -2126,7 +2126,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "14",
           height: "18",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(5 3)"
         }
       ) }) })
@@ -2172,7 +2172,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "12",
           height: "17.316",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(6 3)"
         }
       ) }) })
@@ -2226,7 +2226,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "18",
           height: "16",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(3 4.57971)"
         }
       ) }) })
@@ -2263,7 +2263,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "18",
           height: "16",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(3 4.57971)"
         }
       ) }) })
@@ -2619,7 +2619,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "22",
           height: "22",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(2 1.57971)"
         }
       ) }) })
@@ -2716,7 +2716,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "20",
           height: "17.9774",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(2 3)"
         }
       ) }) })
@@ -2753,7 +2753,7 @@ const uf = ({ label: e, required: t, error: r, className: n, disabled: a }) => /
         {
           width: "14",
           height: "18",
-          fill: "white",
+          fill: "var(--fills-inverse-primary)",
           transform: "translate(5 3)"
         }
       ) }) })
@@ -4175,7 +4175,7 @@ const tv = ({
     after:ds-rotate-[45deg]
     after:ds-border-solid
     after:ds-border-Fills-tertiary
-    after:ds-bg-white
+    after:ds-bg-Background-primary
   `;
   return h.indexOf("left") > -1 ? O += `
       after:ds-top-[50%]
@@ -4222,7 +4222,7 @@ const tv = ({
         style: c
       }, C()), {
         className: Ve(
-          "ds-z-[29999] ds-max-w-[300px] ds-rounded ds-border ds-border-Fills-tertiary ds-bg-white ds-p-4 ds-text-mediumSubHeadRegular ds-text-black ds-shadow",
+          "ds-z-[29999] ds-max-w-[300px] ds-rounded ds-border ds-border-Fills-tertiary ds-bg-Background-primary ds-p-4 ds-text-mediumSubHeadRegular ds-text-Text-primary ds-shadow",
           O,
           r
         ),
@@ -4275,7 +4275,7 @@ const nv = ({
   onClose: e,
   children: t,
   title: r = ""
-}) => /* @__PURE__ */ u.jsxs("div", { className: "ds-group/mobile ds-mb-0 ds-flex ds-w-full ds-flex-col ds-bg-white ds-p-6", children: [
+}) => /* @__PURE__ */ u.jsxs("div", { className: "ds-group/mobile ds-mb-0 ds-flex ds-w-full ds-flex-col ds-bg-Background-primary ds-p-6", children: [
   /* @__PURE__ */ u.jsxs("div", { className: "ds-mb-6 ds-flex ds-h-10 ds-items-center ds-justify-between", children: [
     /* @__PURE__ */ u.jsx(
       "div",
@@ -4927,7 +4927,7 @@ const e3 = (e) => {
       t = "ds-font-semibold ds-text-Text-primary ds-text-xSmallSubheadEmphasized ds-tablet:ds-text-smallSubheadEmphasized ds-desktop:ds-text-mediumSubheadEmphasized";
       break;
     case "DISCOUNT":
-      t = "ds-font-normal ds-text-teal-400 ds-text-xSmallSubheadEmphasized ds-tablet:ds-text-smallSubheadEmphasized ds-desktop:ds-text-mediumSubheadEmphasized";
+      t = "ds-font-normal ds-text-Background-accentSuccess-100 ds-text-xSmallSubheadEmphasized ds-tablet:ds-text-smallSubheadEmphasized ds-desktop:ds-text-mediumSubheadEmphasized";
       break;
     case "FEE":
     case "TAX":
@@ -5040,7 +5040,7 @@ const cw = de.forwardRef(
           e.length > 1 && /* @__PURE__ */ u.jsx(
             "button",
             {
-              className: "backdrop-blur-sm ds-absolute ds-left-4 ds-top-[50%] ds-z-10 ds-flex ds-h-6 ds-w-6 -ds-translate-y-1/2 ds-items-center ds-justify-center ds-rounded-sm ds-bg-[rgba(255,255,255,0.25)] ds-text-white",
+              className: "backdrop-blur-sm ds-absolute ds-left-4 ds-top-[50%] ds-z-10 ds-flex ds-h-6 ds-w-6 -ds-translate-y-1/2 ds-items-center ds-justify-center ds-rounded-sm ds-bg-[rgba(255,255,255,0.25)] ds-text-Text-textPrimaryInverse",
               onClick: i,
               children: /* @__PURE__ */ u.jsx("div", { className: "ds-text-Text-primary", children: /* @__PURE__ */ u.jsx(df, { className: "ds-mb-[3px] ds-size-4" }) })
             }
@@ -5057,7 +5057,7 @@ const cw = de.forwardRef(
           e.length > 1 && /* @__PURE__ */ u.jsx(
             "button",
             {
-              className: "backdrop-blur-sm ds-absolute ds-right-4 ds-top-[50%] ds-z-10 ds-flex ds-h-6 ds-w-6 -ds-translate-y-1/2 ds-items-center ds-justify-center ds-rounded-sm ds-bg-[rgba(255,255,255,0.25)] ds-text-white",
+              className: "backdrop-blur-sm ds-absolute ds-right-4 ds-top-[50%] ds-z-10 ds-flex ds-h-6 ds-w-6 -ds-translate-y-1/2 ds-items-center ds-justify-center ds-rounded-sm ds-bg-[rgba(255,255,255,0.25)] ds-text-Text-textPrimaryInverse",
               onClick: a,
               children: /* @__PURE__ */ u.jsx("div", { className: "ds-text-Text-primary", children: /* @__PURE__ */ u.jsx(cf, { className: "ds-mb-[3px] ds-size-4" }) })
             }
@@ -5207,7 +5207,7 @@ const hw = de.forwardRef(
     {
       className: Ve(
         Re(
-          "ds-wide_ds-desktop:ds-w-[528px] ds-w-full ds-rounded ds-border ds-bg-white ds-tablet:ds-w-[528px] ds-desktop:ds-w-[528px]",
+          "ds-wide_ds-desktop:ds-w-[528px] ds-w-full ds-rounded ds-border ds-bg-Background-primary ds-tablet:ds-w-[528px] ds-desktop:ds-w-[528px]",
           t && "ds-p-6"
         )
       ),
@@ -5232,13 +5232,13 @@ const hw = de.forwardRef(
                   "h2",
                   {
                     className: Re(
-                      "ds_MediumTitle1Emphasized ds-mb-0 ds-pb-4 ds-text-black",
+                      "ds_MediumTitle1Emphasized ds-mb-0 ds-pb-4 ds-text-Text-primary",
                       t && "ds-border-t-2 ds-border-Background-accentPrimary-100 ds-pt-4"
                     ),
                     children: r
                   }
                 ),
-                n && /* @__PURE__ */ u.jsx("span", { className: "MediumBodyRegular ds-text-black", children: n })
+                n && /* @__PURE__ */ u.jsx("span", { className: "MediumBodyRegular ds-text-Text-primary", children: n })
               ] }),
               /* @__PURE__ */ u.jsxs(
                 "div",
@@ -5385,8 +5385,8 @@ const pw = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%20
                   /* @__PURE__ */ u.jsx(
                     "div",
                     {
-                      className: `ds-flex ds-h-[22px] ds-w-[22px] ds-items-center ds-justify-center ds-rounded ds-border ds-border-Background-accentPrimary-100 ${s.status === "active" || s.status === "completed" ? "ds-bg-Background-accentPrimary-100" : "ds-bg-white"} `,
-                      children: s.status === "completed" ? /* @__PURE__ */ u.jsx("span", { className: "ds-flex ds-items-center ds-justify-center ds-text-white", children: /* @__PURE__ */ u.jsx(
+                      className: `ds-flex ds-h-[22px] ds-w-[22px] ds-items-center ds-justify-center ds-rounded ds-border ds-border-Background-accentPrimary-100 ${s.status === "active" || s.status === "completed" ? "ds-bg-Background-accentPrimary-100" : "ds-bg-Background-primary"} `,
+                      children: s.status === "completed" ? /* @__PURE__ */ u.jsx("span", { className: "ds-flex ds-items-center ds-justify-center ds-text-Text-textPrimaryInverse", children: /* @__PURE__ */ u.jsx(
                         "img",
                         {
                           src: pw,
@@ -5395,7 +5395,7 @@ const pw = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%20
                       ) }) : /* @__PURE__ */ u.jsx(
                         "span",
                         {
-                          className: `ds_MediumCaption2Emphasized ${s.status === "active" ? "ds-text-white" : "ds-text-gray-600"}`,
+                          className: `ds_MediumCaption2Emphasized ${s.status === "active" ? "ds-text-Text-textPrimaryInverse" : "ds-text-gray-600"}`,
                           children: s.number
                         }
                       )
@@ -5404,7 +5404,7 @@ const pw = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%20
                   /* @__PURE__ */ u.jsx(
                     "div",
                     {
-                      className: "ds_MediumCaption2Regular ds-absolute ds-left-1/2 ds-mt-2 ds-block -ds-translate-x-1/2 ds-text-nowrap ds-text-black",
+                      className: "ds_MediumCaption2Regular ds-absolute ds-left-1/2 ds-mt-2 ds-block -ds-translate-x-1/2 ds-text-nowrap ds-text-Text-primary",
                       children: s.title
                     }
                   )
@@ -22619,8 +22619,8 @@ const Xc = {
               "ds-flex ds-grow ds-flex-col ds-justify-center"
             ),
             children: [
-              t && /* @__PURE__ */ u.jsx("span", { className: "ds_MediumSubheadEmphasized ds-mb-1 ds-text-black", children: t }),
-              r && /* @__PURE__ */ u.jsx("span", { className: "ds-text-mediumFootnoteRegular ds-text-black", children: r })
+              t && /* @__PURE__ */ u.jsx("span", { className: "ds_MediumSubheadEmphasized ds-mb-1 ds-text-Text-primary", children: t }),
+              r && /* @__PURE__ */ u.jsx("span", { className: "ds-text-mediumFootnoteRegular ds-text-Text-primary", children: r })
             ]
           }
         )
@@ -22635,7 +22635,7 @@ const rM = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%20
     {
       className: Ve(Re(e, "mobile-header ds-px-space300 ds-py-space200")),
       ref: n,
-      children: /* @__PURE__ */ u.jsxs("div", { className: "ds-relative ds-flex ds-w-full ds-flex-row ds-items-center ds-justify-center ds-bg-white", children: [
+      children: /* @__PURE__ */ u.jsxs("div", { className: "ds-relative ds-flex ds-w-full ds-flex-row ds-items-center ds-justify-center ds-bg-Background-primary", children: [
         /* @__PURE__ */ u.jsx(
           "div",
           {
@@ -22833,7 +22833,7 @@ const sM = de.forwardRef(
         children: /* @__PURE__ */ u.jsxs(
           "div",
           {
-            className: Re(L.dateWrapper, "date-wrapper ds-bg-white"),
+            className: Re(L.dateWrapper, "date-wrapper ds-bg-Background-primary"),
             ref: N,
             style: U,
             children: [
@@ -23267,7 +23267,7 @@ const DM = (e) => `not ${e}`, OM = (e, t) => {
     "div",
     {
       id: "silkhaus-range-calendar",
-      className: "silkhaus-range-calendar ds-relative ds-max-w-full ds-rounded-[4px] ds-border ds-border-Fills-quaternary ds-bg-white ds-py-2",
+      className: "silkhaus-range-calendar ds-relative ds-max-w-full ds-rounded-[4px] ds-border ds-border-Fills-quaternary ds-bg-Background-primary ds-py-2",
       ref: m,
       children: [
         f && p && /* @__PURE__ */ u.jsx(
@@ -23410,7 +23410,7 @@ const DM = (e) => `not ${e}`, OM = (e, t) => {
                     "div",
                     {
                       className: Re(
-                        s && "ds-text-black",
+                        s && "ds-text-Text-primary",
                         !s && "ds-text-Fills-secondary",
                         "ds-absolute ds-start-0 ds-top-1/2 ds-max-w-6 -ds-translate-y-1/2"
                       ),
@@ -23501,7 +23501,7 @@ const HM = wr((e, t) => {
     maxWidth: f,
     children: h,
     rtl: p = !1
-  } = e, g = !l && i ? { backgroundImage: `url(${i})` } : { backgroundColor: "white" };
+  } = e, g = !l && i ? { backgroundImage: `url(${i})` } : { backgroundColor: "var(--background-primary)" };
   return /* @__PURE__ */ u.jsx(
     wa,
     {
@@ -23541,19 +23541,19 @@ const HM = wr((e, t) => {
                       )
                     }
                   ),
-                  l && /* @__PURE__ */ u.jsx("h1", { className: "ds_MediumBodyEmphasized ds-mb-0 ds-text-black", children: o })
+                  l && /* @__PURE__ */ u.jsx("h1", { className: "ds_MediumBodyEmphasized ds-mb-0 ds-text-Text-primary", children: o })
                 ]
               }
             ) }),
             /* @__PURE__ */ u.jsxs("div", { children: [
               !l && /* @__PURE__ */ u.jsxs("div", { className: "ds-p-6", children: [
-                /* @__PURE__ */ u.jsx("h1", { className: "ds_xSmallHeroTitleRegular ds-mb-2 ds-mt-12 ds-text-Text-textPrimaryDark", children: o }),
-                /* @__PURE__ */ u.jsx("p", { className: "ds_xSmallBodyEmphasized ds-pt-2 ds-text-Text-textPrimaryDark", children: s })
+                /* @__PURE__ */ u.jsx("h1", { className: "ds_xSmallHeroTitleRegular ds-mb-2 ds-mt-12 ds-text-Text-textPrimaryInverse", children: o }),
+                /* @__PURE__ */ u.jsx("p", { className: "ds_xSmallBodyEmphasized ds-pt-2 ds-text-Text-textPrimaryInverse", children: s })
               ] }),
               /* @__PURE__ */ u.jsx(
                 "div",
                 {
-                  className: `ds-bg-white ${l ? "filter-content-secondary" : "filter-content ds-rounded-t-lg"}`,
+                  className: `ds-bg-Background-primary ${l ? "filter-content-secondary" : "filter-content ds-rounded-t-lg"}`,
                   children: h
                 }
               )
@@ -23615,7 +23615,7 @@ const FM = wr(
                       "div",
                       {
                         className: Re(
-                          s && "ds-text-black",
+                          s && "ds-text-Text-primary",
                           !s && "ds-text-Fills-secondary",
                           "ds-absolute ds-start-0 ds-top-1/2 ds-max-w-6 -ds-translate-y-1/2"
                         ),
@@ -26232,7 +26232,7 @@ const Hk = /* @__PURE__ */ Ln(Wm), Fk = ({ key: e, image: t, onClick: r, aspectR
       ),
       onLoad: () => i(!1)
     }
-  ), s = () => /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-1/2 ds-top-1/2 ds-flex ds-size-full -ds-translate-x-1/2 -ds-translate-y-1/2 ds-items-center ds-justify-center", children: /* @__PURE__ */ u.jsx(ev, { className: "ds-w-8 ds-animate-spin ds-text-black" }) });
+  ), s = () => /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-1/2 ds-top-1/2 ds-flex ds-size-full -ds-translate-x-1/2 -ds-translate-y-1/2 ds-items-center ds-justify-center", children: /* @__PURE__ */ u.jsx(ev, { className: "ds-w-8 ds-animate-spin ds-text-Text-primary" }) });
   return r ? /* @__PURE__ */ u.jsxs(
     "div",
     {
@@ -26267,7 +26267,7 @@ const Hk = /* @__PURE__ */ Ln(Wm), Fk = ({ key: e, image: t, onClick: r, aspectR
         "ds-left-4 ds-right-auto ds-z-[1] ds-flex ds-h-8 ds-w-8 ds-items-center ds-justify-center ds-rounded ds-bg-Text-textSecondaryPlusDark"
       ),
       onClick: r,
-      children: /* @__PURE__ */ u.jsx(df, { className: "ds-size-4 ds-text-black" })
+      children: /* @__PURE__ */ u.jsx(df, { className: "ds-size-4 ds-text-Text-primary" })
     }
   );
 }, Vk = (e) => {
@@ -26280,7 +26280,7 @@ const Hk = /* @__PURE__ */ Ln(Wm), Fk = ({ key: e, image: t, onClick: r, aspectR
         "ds-left-auto ds-right-4 ds-flex ds-h-8 ds-w-8 ds-items-center ds-justify-center ds-rounded ds-bg-Text-textSecondaryPlusDark"
       ),
       onClick: r,
-      children: /* @__PURE__ */ u.jsx(cf, { className: "ds-size-4 ds-text-black" })
+      children: /* @__PURE__ */ u.jsx(cf, { className: "ds-size-4 ds-text-Text-primary" })
     }
   );
 }, Sg = de.forwardRef(
@@ -26363,12 +26363,12 @@ const Bk = de.forwardRef(
       ref: I,
       className: xe(
         "ds-box-border ds-w-full ds-overflow-hidden ds-rounded",
-        (!m || y === "none") && "ds-border-2 ds-border-Fills-quaternary ds-bg-white hover:ds-shadow-[0_12px_24px_0_rgba(0,0,0,0.12)]",
+        (!m || y === "none") && "ds-border-2 ds-border-Fills-quaternary ds-bg-Background-primary hover:ds-shadow-[0_12px_24px_0_rgba(0,0,0,0.12)]",
         m && y === "selected" && "ds-border-2 ds-border-accentPrimary-100 ds-bg-accentPrimary-5 ds-bg-opacity-50 hover:ds-shadow-[0_12px_24px_0_rgba(0,0,0,0.12)]",
         m && y && [
           "added"
           /* Added */
-        ].includes(y) && "ds-border-2 ds-border-Fills-quaternary ds-bg-white ds-opacity-[0.72]",
+        ].includes(y) && "ds-border-2 ds-border-Fills-quaternary ds-bg-Background-primary ds-opacity-[0.72]",
         C
       ),
       children: [
@@ -26377,7 +26377,7 @@ const Bk = de.forwardRef(
             /* @__PURE__ */ u.jsx(
               "div",
               {
-                className: "ds-relative ds-size-7 ds-rounded-full ds-border-2 ds-border-white",
+                className: "ds-relative ds-size-7 ds-rounded-full ds-border-2 ds-border-Fills-inversePrimary",
                 role: !y || y && [
                   "none",
                   "selected"
@@ -26406,12 +26406,12 @@ const Bk = de.forwardRef(
                       y === "selected" && "ds-cursor-pointer ds-bg-accentPrimary-100",
                       y === "added" && "ds-bg-Background-accentSuccess-100"
                     ),
-                    children: /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-1/2 ds-top-1/2 -ds-mt-[2px] -ds-translate-x-1/2 -ds-translate-y-1/2 ds-text-white", children: /* @__PURE__ */ u.jsx(zp, { className: "ds-size-[14px]" }) })
+                    children: /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-1/2 ds-top-1/2 -ds-mt-[2px] -ds-translate-x-1/2 -ds-translate-y-1/2 ds-text-Text-textPrimaryInverse", children: /* @__PURE__ */ u.jsx(zp, { className: "ds-size-[14px]" }) })
                   }
                 ) })
               }
             ),
-            y === "added" && /* @__PURE__ */ u.jsx("span", { className: "ds_MediumFootnoteEmphasized ds-ms-[10px] ds-text-white", children: "Added to list" })
+            y === "added" && /* @__PURE__ */ u.jsx("span", { className: "ds_MediumFootnoteEmphasized ds-ms-[10px] ds-text-Text-textPrimaryInverse", children: "Added to list" })
           ] }) }) }),
           (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ u.jsx("div", { className: `ds-absolute ds-top-2 ds-z-10 ${O ? "ds-left-4" : "ds-right-4"}`, children: /* @__PURE__ */ u.jsx("div", { className: "ds-flex ds-flex-row ds-items-end ds-justify-center", children: o.map((T, _) => /* @__PURE__ */ u.jsx(
             "div",
@@ -26556,7 +26556,7 @@ const Bk = de.forwardRef(
               m && y && [
                 "added"
                 /* Added */
-              ].includes(y) && /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-0 ds-top-0 ds-z-10 ds-h-full ds-w-full ds-rounded ds-bg-white ds-opacity-60" })
+              ].includes(y) && /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-0 ds-top-0 ds-z-10 ds-h-full ds-w-full ds-rounded ds-bg-Background-primary ds-opacity-60" })
             ]
           }
         )
@@ -26599,7 +26599,7 @@ const Wk = de.forwardRef(
         className: y,
         ref: C,
         dir: b,
-        children: /* @__PURE__ */ u.jsxs("div", { className: "overflow-hidden ds-grid ds-grid-cols-1 ds-gap-0 ds-rounded ds-bg-white ds-shadow-[0_12px_24px_12px_rgba(0,0,0,0.12)] ds-tablet:ds-grid-cols-2", children: [
+        children: /* @__PURE__ */ u.jsxs("div", { className: "overflow-hidden ds-grid ds-grid-cols-1 ds-gap-0 ds-rounded ds-bg-Background-primary ds-shadow-[0_12px_24px_12px_rgba(0,0,0,0.12)] ds-tablet:ds-grid-cols-2", children: [
           /* @__PURE__ */ u.jsx(
             "div",
             {
@@ -26609,7 +26609,7 @@ const Wk = de.forwardRef(
                 "button",
                 {
                   onClick: c,
-                  className: "ds-relative ds-left-4 ds-top-4 ds-cursor-pointer ds-text-white",
+                  className: "ds-relative ds-left-4 ds-top-4 ds-cursor-pointer ds-text-Text-textPrimaryInverse",
                   "data-tracking-id": g,
                   children: /* @__PURE__ */ u.jsx(Fr, { className: "ds-size-5" })
                 }
@@ -26625,7 +26625,7 @@ const Wk = de.forwardRef(
                 "button",
                 {
                   onClick: c,
-                  className: "ds-relative ds-left-4 ds-top-4 ds-cursor-pointer ds-text-white",
+                  className: "ds-relative ds-left-4 ds-top-4 ds-cursor-pointer ds-text-Text-textPrimaryInverse",
                   "data-tracking-id": g,
                   children: [
                     /* @__PURE__ */ u.jsx(Fr, { className: "ds-size-5" }),
@@ -26804,7 +26804,7 @@ const Uk = wr((e, t) => {
     $e(he({
       ref: t
     }, d), {
-      children: /* @__PURE__ */ u.jsxs("div", { className: "ds-rounded ds-border ds-border-Fills-quaternary ds-bg-white", children: [
+      children: /* @__PURE__ */ u.jsxs("div", { className: "ds-rounded ds-border ds-border-Fills-quaternary ds-bg-Background-primary", children: [
         /* @__PURE__ */ u.jsxs("div", { className: "ds-flex ds-min-h-[80px] ds-justify-between ds-zero:ds-p-2 ds-mobile:ds-p-2 ds-tablet:ds-p-4", children: [
           /* @__PURE__ */ u.jsxs("div", { className: "ds-flex", children: [
             /* @__PURE__ */ u.jsx(
@@ -31420,7 +31420,7 @@ const bb = ({
       "ds-tablet:ds-relative ds-absolute ds-w-full",
       t
     ),
-    children: /* @__PURE__ */ u.jsxs("div", { className: "ds-bg-white", children: [
+    children: /* @__PURE__ */ u.jsxs("div", { className: "ds-bg-Background-primary", children: [
       /* @__PURE__ */ u.jsx("div", { className: "ds-h-[56px] ds-w-full", children: /* @__PURE__ */ u.jsx(
         "span",
         {
@@ -31469,7 +31469,7 @@ const Cb = ({
       ref: a,
       className: Ve(
         Re(
-          "ds-mt-4 ds-h-[117px] ds-w-[145px] ds-flex-col ds-items-start ds-justify-center ds-gap-2 ds-rounded ds-border-[1px] ds-bg-white ds-p-4 ds-shadow-[0px_12px_24px_0px_rgba(0,0,0,0.12)] ds-tablet:ds-flex",
+          "ds-mt-4 ds-h-[117px] ds-w-[145px] ds-flex-col ds-items-start ds-justify-center ds-gap-2 ds-rounded ds-border-[1px] ds-bg-Background-primary ds-p-4 ds-shadow-[0px_12px_24px_0px_rgba(0,0,0,0.12)] ds-tablet:ds-flex",
           t
         )
       ),
@@ -31477,7 +31477,7 @@ const Cb = ({
         "div",
         {
           onClick: () => n(i.value),
-          className: "ds-flex ds-cursor-pointer ds-flex-row-reverse ds-items-center ds-justify-between ds-gap-2 ds-bg-white",
+          className: "ds-flex ds-cursor-pointer ds-flex-row-reverse ds-items-center ds-justify-between ds-gap-2 ds-bg-Background-primary",
           children: [
             /* @__PURE__ */ u.jsx("span", { className: "ds_MediumSubheadEmphasized ds-mt-1", children: i.label }),
             /* @__PURE__ */ u.jsx("span", { children: i.icon })
@@ -31539,7 +31539,7 @@ const AA = ({ hideEdit: e, hideShare: t }) => [
       "div",
       {
         className: xe(
-          "ds-flex ds-flex-row ds-items-start ds-gap-x-4 ds-border-b ds-border-Fills-quaternary ds-bg-white ds-py-4 last:ds-border-b-0 ds-tablet:ds-cursor-default ds-tablet:ds-py-6",
+          "ds-flex ds-flex-row ds-items-start ds-gap-x-4 ds-border-b ds-border-Fills-quaternary ds-bg-Background-primary ds-py-4 last:ds-border-b-0 ds-tablet:ds-cursor-default ds-tablet:ds-py-6",
           (!l || !d) && "ds-cursor-pointer"
         ),
         onClick: () => {
@@ -31630,7 +31630,7 @@ const HA = ({
   hideShare: t,
   hideEdit: r,
   emptyListMessage: n = "Please add your first travel list."
-}) => /* @__PURE__ */ u.jsxs("div", { className: "ds-rounded ds-border ds-border-Fills-quaternary ds-bg-white ds-px-4 ds-tablet:ds-px-10", children: [
+}) => /* @__PURE__ */ u.jsxs("div", { className: "ds-rounded ds-border ds-border-Fills-quaternary ds-bg-Background-primary ds-px-4 ds-tablet:ds-px-10", children: [
   e && e.length > 0 && e.map((a) => /* @__PURE__ */ u.jsx(
     wb,
     $e(he({}, a), {
@@ -31645,7 +31645,7 @@ const HA = ({
   ] }) })
 ] });
 HA.displayName = "TravelList";
-const cp = () => /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-0 ds-top-0 ds-z-[1] ds-h-full ds-w-full ds-bg-white ds-opacity-50" }), FA = de.forwardRef(
+const cp = () => /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-0 ds-top-0 ds-z-[1] ds-h-full ds-w-full ds-bg-Background-primary ds-opacity-50" }), FA = de.forwardRef(
   ({
     className: e = "",
     title: t = "",
@@ -31706,7 +31706,7 @@ const cp = () => /* @__PURE__ */ u.jsx("div", { className: "ds-absolute ds-left-
           /* @__PURE__ */ u.jsx(
             "span",
             {
-              className: "ds-relative ds-bottom-[36px] ds-left-[180px] ds-inline-flex ds-h-[28px] ds-w-[28px] ds-cursor-pointer ds-items-center ds-justify-center ds-rounded-[4px] ds-bg-white ds-opacity-[.72] ds-backdrop-blur-[32px]",
+              className: "ds-relative ds-bottom-[36px] ds-left-[180px] ds-inline-flex ds-h-[28px] ds-w-[28px] ds-cursor-pointer ds-items-center ds-justify-center ds-rounded-[4px] ds-bg-Background-primary ds-opacity-[.72] ds-backdrop-blur-[32px]",
               onClick: l,
               children: /* @__PURE__ */ u.jsx(x2, { className: "ds-size-4" })
             }
@@ -32107,7 +32107,7 @@ const E$ = pt, R$ = (e) => {
       "div",
       {
         className: xe(
-          "ds-flex ds-max-h-dvh ds-flex-col ds-items-center ds-bg-white ds-p-4 ds-pb-8 ds-shadow-[0px_12px_24px_0px_rgba(0,0,0,0.12)] ds-tablet:ds-max-h-[80dvh] ds-tablet:ds-max-w-[496px] ds-tablet:ds-rounded ds-tablet:ds-pb-4",
+          "ds-flex ds-max-h-dvh ds-flex-col ds-items-center ds-bg-Background-primary ds-p-4 ds-pb-8 ds-shadow-[0px_12px_24px_0px_rgba(0,0,0,0.12)] ds-tablet:ds-max-h-[80dvh] ds-tablet:ds-max-w-[496px] ds-tablet:ds-rounded ds-tablet:ds-pb-4",
           n
         ),
         dir: p,
@@ -32816,7 +32816,7 @@ jb.displayName = "PaymentRadioInput";
 const RH = {
   completed: "ds-bg-Background-accentSuccess-100",
   "next-due": "ds-bg-Background-accentInfo-100",
-  scheduled: "ds-bg-black",
+  scheduled: "ds-bg-Background-primaryInverse",
   failed: "ds-bg-error"
 }, IH = ({
   date: e,
@@ -32872,9 +32872,9 @@ const RH = {
   return /* @__PURE__ */ u.jsxs("div", { className: xe(a), children: [
     /* @__PURE__ */ u.jsxs("div", { className: "ds-flex ds-cursor-text ds-flex-row ds-flex-nowrap ds-items-center ds-justify-between", children: [
       /* @__PURE__ */ u.jsxs("div", { className: "ds-relative ds-flex ds-flex-row ds-flex-nowrap ds-items-center ds-justify-start", children: [
-        e === Dn && /* @__PURE__ */ u.jsx(pa, { className: "ds-absolute ds-left-0 ds-top-1/2 ds-size-4 -ds-translate-y-1/2 ds-text-black" }),
-        e === Ti && /* @__PURE__ */ u.jsx(Jp, { className: "ds-absolute ds-left-0 ds-top-1/2 ds-size-4 -ds-translate-y-1/2 ds-text-black" }),
-        e === tn && /* @__PURE__ */ u.jsx(XC, { className: "ds-absolute ds-left-0 ds-top-1/2 ds-size-3 -ds-translate-y-1/2 ds-text-black" }),
+        e === Dn && /* @__PURE__ */ u.jsx(pa, { className: "ds-absolute ds-left-0 ds-top-1/2 ds-size-4 -ds-translate-y-1/2 ds-text-Text-primary" }),
+        e === Ti && /* @__PURE__ */ u.jsx(Jp, { className: "ds-absolute ds-left-0 ds-top-1/2 ds-size-4 -ds-translate-y-1/2 ds-text-Text-primary" }),
+        e === tn && /* @__PURE__ */ u.jsx(XC, { className: "ds-absolute ds-left-0 ds-top-1/2 ds-size-3 -ds-translate-y-1/2 ds-text-Text-primary" }),
         /* @__PURE__ */ u.jsx(
           "div",
           {
@@ -32891,7 +32891,7 @@ const RH = {
         "div",
         {
           className: Re(
-            e === Ti && "ds_MediumFootnoteRegular ds-text-black",
+            e === Ti && "ds_MediumFootnoteRegular ds-text-Text-primary",
             e === Dn && "ds_MediumFootnoteEmphasized ds-text-Background-accentWarning-100",
             e === tn && "ds_MediumFootnoteEmphasized ds-text-Background-accentSuccess-100",
             "ds-cursor-text"
@@ -32969,7 +32969,7 @@ const jH = ({
       } else
         return null;
     }) }),
-    (f == null ? void 0 : f.length) > 0 && /* @__PURE__ */ u.jsx(pf, { open: d, children: /* @__PURE__ */ u.jsxs("div", { className: "ds-mx-4 ds-w-full ds-max-w-[428px] ds-bg-white ds-tablet:ds-m-auto", children: [
+    (f == null ? void 0 : f.length) > 0 && /* @__PURE__ */ u.jsx(pf, { open: d, children: /* @__PURE__ */ u.jsxs("div", { className: "ds-mx-4 ds-w-full ds-max-w-[428px] ds-bg-Background-primary ds-tablet:ds-m-auto", children: [
       /* @__PURE__ */ u.jsxs("div", { className: "ds-relative ds-flex ds-flex-row ds-items-center ds-justify-center ds-px-6 ds-py-4", children: [
         /* @__PURE__ */ u.jsx(
           "div",
@@ -32982,7 +32982,7 @@ const jH = ({
             children: /* @__PURE__ */ u.jsx(Fr, { className: "ds-size-4" })
           }
         ),
-        /* @__PURE__ */ u.jsx("div", { className: "ds_MediumBodyEmphasized ds-text-black", children: i })
+        /* @__PURE__ */ u.jsx("div", { className: "ds_MediumBodyEmphasized ds-text-Text-primary", children: i })
       ] }),
       /* @__PURE__ */ u.jsx("div", { className: "ds-p-10", children: /* @__PURE__ */ u.jsx(NH, { paymentItems: f }) })
     ] }) })
@@ -33100,7 +33100,7 @@ const j$ = ({
               ref: p,
               className: "ds-group ds-text-mediumBodyRegular " + // cn merges ds-text for font size and color, which is a bug. So we keep this outside
               xe(
-                "ds-flex ds-items-center ds-justify-between ds-gap-2 ds-whitespace-nowrap ds-rounded-sm ds-border ds-border-Fills-tertiary ds-bg-white ds-px-4 ds-py-2 ds-text-Text-primary hover:ds-border-Fills-secondary focus:ds-border-Fills-primary active:ds-border-Fills-primary",
+                "ds-flex ds-items-center ds-justify-between ds-gap-2 ds-whitespace-nowrap ds-rounded-sm ds-border ds-border-Fills-tertiary ds-bg-Background-primary ds-px-4 ds-py-2 ds-text-Text-primary hover:ds-border-Fills-secondary focus:ds-border-Fills-primary active:ds-border-Fills-primary",
                 {
                   "ds-border-Fills-primary hover:ds-border-Fills-primary": c,
                   "ds-border-error ds-bg-error-10 ds-text-error hover:ds-border-error focus:ds-border-error active:ds-border-error": n,
@@ -33132,7 +33132,7 @@ const j$ = ({
           {
             ref: h,
             className: xe(
-              "ds-absolute ds-z-[1000] ds-m-0 ds-mt-2 ds-max-h-60 ds-w-full ds-min-w-max ds-list-none ds-overflow-y-auto ds-rounded-sm ds-border ds-border-Fills-primary ds-bg-white ds-shadow-[0px_12px_24px_0px_rgba(0,0,0,0.12)]"
+              "ds-absolute ds-z-[1000] ds-m-0 ds-mt-2 ds-max-h-60 ds-w-full ds-min-w-max ds-list-none ds-overflow-y-auto ds-rounded-sm ds-border ds-border-Fills-primary ds-bg-Background-primary ds-shadow-[0px_12px_24px_0px_rgba(0,0,0,0.12)]"
             ),
             children: e.map((y) => /* @__PURE__ */ u.jsx(
               "li",
@@ -33207,7 +33207,7 @@ const j$ = ({
       "div",
       {
         className: xe(
-          "ds-flex ds-cursor-pointer ds-items-center ds-gap-2 ds-rounded-sm ds-border ds-border-Fills-tertiary ds-bg-white ds-px-2 ds-py-1.5 hover:ds-border-Fills-secondary",
+          "ds-flex ds-cursor-pointer ds-items-center ds-gap-2 ds-rounded-sm ds-border ds-border-Fills-tertiary ds-bg-Background-primary ds-px-2 ds-py-1.5 hover:ds-border-Fills-secondary",
           {
             "ds-border-error ds-bg-error-10 hover:ds-border-error": f,
             "ds-pointer-events-none ds-bg-Fills-quinary ds-bg-opacity-[0.05]": a
@@ -33347,7 +33347,7 @@ const j$ = ({
           "aria-label": e,
           disabled: r,
           className: xe(
-            "ds-group ds-size-6 ds-flex-shrink-0 ds-appearance-none ds-rounded-full ds-border ds-border-black checked:ds-border-4 checked:ds-border-white checked:ds-bg-black checked:ds-ring-1 checked:ds-ring-black",
+            "ds-group ds-size-6 ds-flex-shrink-0 ds-appearance-none ds-rounded-full ds-border ds-border-Fills-primary checked:ds-border-4 checked:ds-border-Fills-inversePrimary checked:ds-bg-Background-primaryInverse checked:ds-ring-1 checked:ds-ring-Fills-primary",
             s,
             { "ds-cursor-not-allowed ds-border-gray-400 ds-bg-gray-200": r },
             { "ds-cursor-pointer": !r }
@@ -33411,9 +33411,9 @@ const VH = ({
           ),
           onClick: () => l(d),
           children: [
-            /* @__PURE__ */ u.jsx("span", { className: "ds-flex ds-size-4 ds-desktop:ds-h-[18px] ds-desktop:ds-w-[18px]", children: s === d.value ? /* @__PURE__ */ u.jsx(d.HoverIconComponent, { className: "ds-text-white ds-desktop:ds-text-accentPrimary-100" }) : /* @__PURE__ */ u.jsxs(u.Fragment, { children: [
+            /* @__PURE__ */ u.jsx("span", { className: "ds-flex ds-size-4 ds-desktop:ds-h-[18px] ds-desktop:ds-w-[18px]", children: s === d.value ? /* @__PURE__ */ u.jsx(d.HoverIconComponent, { className: "ds-text-Text-textPrimaryInverse ds-desktop:ds-text-accentPrimary-100" }) : /* @__PURE__ */ u.jsxs(u.Fragment, { children: [
               /* @__PURE__ */ u.jsx(d.IconComponent, { className: "ds-block group-hover:ds-hidden" }),
-              /* @__PURE__ */ u.jsx(d.HoverIconComponent, { className: "ds-hidden ds-text-black group-hover:ds-block" })
+              /* @__PURE__ */ u.jsx(d.HoverIconComponent, { className: "ds-hidden ds-text-Text-primary group-hover:ds-block" })
             ] }) }),
             /* @__PURE__ */ u.jsx(
               "span",
@@ -33421,7 +33421,7 @@ const VH = ({
                 className: xe(
                   "ds-desktop:ds_MediumSubheadEmphasized ds_xSmallCalloutEmphasized ds-flex",
                   {
-                    "ds-text-white ds-desktop:ds-text-accentPrimary-100": s === d.value
+                    "ds-text-Text-textPrimaryInverse ds-desktop:ds-text-accentPrimary-100": s === d.value
                   }
                 ),
                 children: d.label
@@ -33462,7 +33462,7 @@ const $H = ({
           onClick: () => o(l.value),
           className: xe(
             "transition-colors ds-flex ds-flex-row ds-items-center ds-justify-center ds-gap-1 ds-rounded ds-px-4 ds-py-1 hover:ds-cursor-pointer",
-            a === l.value ? "ds-bg-white" : "hover:ds-bg-gray-200"
+            a === l.value ? "ds-bg-Background-primary" : "hover:ds-bg-gray-200"
           ),
           children: [
             l.icon,
@@ -33481,7 +33481,7 @@ const A$ = (e) => {
     "div",
     {
       className: xe(
-        "ds-flex ds-gap-4 ds-bg-white ds-p-4 hover:ds-bg-[#F6F8FC]",
+        "ds-flex ds-gap-4 ds-bg-Background-primary ds-p-4 hover:ds-bg-[#F6F8FC]",
         s && "ds-cursor-pointer",
         t
       ),
@@ -33575,7 +33575,7 @@ const w0 = ({
         style: y
       }, k()), {
         className: Ve(
-          "ds-z-[29999] ds-rounded ds-bg-white ds-shadow-[0px_4px_18px_0px_rgba(0,0,0,0.17)]",
+          "ds-z-[29999] ds-rounded ds-bg-Background-primary ds-shadow-[0px_4px_18px_0px_rgba(0,0,0,0.17)]",
           r
         ),
         children: t
@@ -33631,7 +33631,7 @@ const _0 = ({
   ] });
 };
 _0.displayName = "MobilePopover";
-const Lb = ({ onClose: e, children: t, title: r = "" }) => /* @__PURE__ */ u.jsxs("div", { className: "ds-group/mobile ds-mb-0 ds-flex ds-h-full ds-w-full ds-flex-col ds-bg-white", children: [
+const Lb = ({ onClose: e, children: t, title: r = "" }) => /* @__PURE__ */ u.jsxs("div", { className: "ds-group/mobile ds-mb-0 ds-flex ds-h-full ds-w-full ds-flex-col ds-bg-Background-primary", children: [
   /* @__PURE__ */ u.jsxs("div", { className: "ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-border-b ds-border-b-Fills-quaternary ds-p-4", children: [
     /* @__PURE__ */ u.jsx(
       "div",
@@ -34995,7 +34995,7 @@ const q$ = ({
               "div",
               {
                 className: Re(
-                  "ds-absolute ds-flex ds-h-full ds-items-center ds-text-mediumSubHeadEmphasized ds-text-white",
+                  "ds-absolute ds-flex ds-h-full ds-items-center ds-text-mediumSubHeadEmphasized ds-text-Text-textPrimaryInverse",
                   a ? "ds-right-2 ds-tablet:ds-right-0" : "ds-left-2 ds-tablet:ds-left-0"
                 ),
                 children: (l = (s = (o = i == null ? void 0 : i.current) == null ? void 0 : o.getLightboxState()) == null ? void 0 : s.currentSlide) == null ? void 0 : l.alt
@@ -35011,7 +35011,7 @@ const q$ = ({
                     var d;
                     return (d = i.current) == null ? void 0 : d.prev();
                   },
-                  buttonClassName: "ds-text-white ds-p-[12px] ds-border ds-border-[rgba(255, 255, 255, 0.80)] ds-rounded"
+                  buttonClassName: "ds-text-Text-textPrimaryInverse ds-p-[12px] ds-border ds-border-[rgba(255, 255, 255, 0.80)] ds-rounded"
                 }
               ),
               /* @__PURE__ */ u.jsx(
@@ -35023,7 +35023,7 @@ const q$ = ({
                     var d;
                     return (d = i.current) == null ? void 0 : d.next();
                   },
-                  buttonClassName: "ds-text-white ds-p-[12px] ds-border ds-border-[rgba(255, 255, 255, 0.80)] ds-rounded"
+                  buttonClassName: "ds-text-Text-textPrimaryInverse ds-p-[12px] ds-border ds-border-[rgba(255, 255, 255, 0.80)] ds-rounded"
                 }
               )
             ] })
@@ -35035,12 +35035,12 @@ const q$ = ({
           wt,
           {
             color: "empty",
-            className: "ds-bg-none ds-text-white",
+            className: "ds-bg-none ds-text-Text-textPrimaryInverse",
             startIcon: /* @__PURE__ */ u.jsx(Fr, { className: "ds-size-4" }),
             onClick: () => {
               t(!1);
             },
-            buttonClassName: "ds-text-white ds-px-4 ds-py-2 ds_MediumCalloutEmphasized ds-tablet:ds-border ds-tablet:ds-border-[#969696] ds-rounded",
+            buttonClassName: "ds-text-Text-textPrimaryInverse ds-px-4 ds-py-2 ds_MediumCalloutEmphasized ds-tablet:ds-border ds-tablet:ds-border-[#969696] ds-rounded",
             children: /* @__PURE__ */ u.jsx("span", { className: "ds-hidden ds-tablet:ds-block", children: "Close" })
           }
         )
@@ -35159,12 +35159,12 @@ const q$ = ({
     d
   )) });
 }, Sq = {
-  unselected: "ds-bg-white",
-  selected: "ds-bg-accentEggplant-100 ds-text-white ds-rounded",
-  "selected-start": "ds-bg-accentEggplant-100 ds-text-white ds-rounded-l rtl:ds-rounded-r rtl:ds-rounded-l-none",
-  "selected-end": "ds-bg-accentEggplant-100 ds-text-white ds-rounded-r rtl:ds-rounded-l rtl:ds-rounded-r-none",
+  unselected: "ds-bg-Background-primary",
+  selected: "ds-bg-accentEggplant-100 ds-text-Text-textPrimaryInverse ds-rounded",
+  "selected-start": "ds-bg-accentEggplant-100 ds-text-Text-textPrimaryInverse ds-rounded-l rtl:ds-rounded-r rtl:ds-rounded-l-none",
+  "selected-end": "ds-bg-accentEggplant-100 ds-text-Text-textPrimaryInverse ds-rounded-r rtl:ds-rounded-l rtl:ds-rounded-r-none",
   "in-range": "ds-bg-accentEggplant-5 ds-text-accentEggplant-100",
-  disabled: "ds-bg-white ds-text-Text-tertiary ds-pointer-events-none"
+  disabled: "ds-bg-Background-primary ds-text-Text-tertiary ds-pointer-events-none"
 }, Dq = ({ state: e = "unselected", value: t, className: r, onClick: n }) => /* @__PURE__ */ u.jsx(
   jn,
   {
@@ -35396,7 +35396,7 @@ const kq = ({
   cancelLabel: t,
   onApply: r,
   onCancel: n
-}) => /* @__PURE__ */ u.jsxs("div", { className: "ds-flex ds-items-center ds-gap-4 ds-bg-white ds-p-4 ds-shadow-[0px_-1px_1px_0px_rgba(0,0,0,0.25)] ds-tablet:ds-justify-end ds-tablet:ds-border-t ds-tablet:ds-border-Fills-quintiary ds-tablet:ds-shadow-none", children: [
+}) => /* @__PURE__ */ u.jsxs("div", { className: "ds-flex ds-items-center ds-gap-4 ds-bg-Background-primary ds-p-4 ds-shadow-[0px_-1px_1px_0px_rgba(0,0,0,0.25)] ds-tablet:ds-justify-end ds-tablet:ds-border-t ds-tablet:ds-border-Fills-quintiary ds-tablet:ds-shadow-none", children: [
   /* @__PURE__ */ u.jsx(
     C2,
     {