design-system-silkhaus 4.0.0-beta.color-names.4 → 4.0.0-beta.color-names.6

package/dist/app/index.js

@@ -1,4 +1,4 @@
-import { B as s, a as t, b as n, D as p, M as r, f as e } from "../index-cVxmO35M.js";
+import { B as s, a as t, b as n, D as p, M as r, f as e } from "../index-CS40ZeSb.js";
 export {
   s as Button,
   t as ButtonsGroupSelector,

package/dist/eslint-rules/tailwind/no-hardcoded-colors.js

@@ -0,0 +1,65 @@
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow hardcoded color values like hex, rgb, rgba, hsl, hsla',
+      recommended: false,
+    },
+    messages: {
+      hardcodedColor:
+        "Do not use hardcoded color value: '{{ color }}'. Use a tailwind class with design token name instead",
+    },
+    schema: [],
+  },
+
+  create(context) {
+    const COLOR_REGEX = new RegExp(
+      /#(?:[0-9a-fA-F]{3,8})\b|(rgb|hsl)a?\(\s*\d+\s*,\s*\d+%?\s*,\s*\d+%?(?:\s*,\s*(?:\d+(?:\.\d+)?|\.\d+))?\s*\)/,
+      'i',
+    );
+
+    function reportIfHardcodedColor(node, value) {
+      const match = value.match(COLOR_REGEX);
+      if (match) {
+        context.report({
+          node,
+          messageId: 'hardcodedColor',
+          data: {
+            color: match[0],
+          },
+        });
+      }
+    }
+
+    return {
+      Literal(node) {
+        if (typeof node.value === 'string') {
+          reportIfHardcodedColor(node, node.value);
+        }
+      },
+
+      JSXAttribute(node) {
+        if (node.name && ['class', 'className', 'style'].includes(node.name.name) && node.value) {
+          if (node.value.type === 'Literal' && typeof node.value.value === 'string') {
+            reportIfHardcodedColor(node.value, node.value.value);
+          }
+
+          if (
+            node.value.type === 'JSXExpressionContainer' &&
+            node.value.expression &&
+            node.value.expression.type === 'Literal' &&
+            typeof node.value.expression.value === 'string'
+          ) {
+            reportIfHardcodedColor(node.value.expression, node.value.expression.value);
+          }
+        }
+      },
+
+      TemplateLiteral(node) {
+        node.quasis.forEach((quasi) => {
+          reportIfHardcodedColor(quasi, quasi.value.cooked || '');
+        });
+      },
+    };
+  },
+};

package/dist/{index-cVxmO35M.js → index-CS40ZeSb.js}

@@ -95,8 +95,8 @@ function xo() {
       {
         var O = x.ReactDebugCurrentFrame, Y = O.getStackAddendum();
         Y !== "" && (b += "%s", T = T.concat([Y]));
-        var K = T.map(function(B) {
-          return String(B);
+        var K = T.map(function(I) {
+          return String(I);
         });
         K.unshift("Warning: " + b), Function.prototype.apply.call(console[s], console, K);
       }
@@ -155,10 +155,10 @@ function xo() {
             var O = s.displayName || null;
             return O !== null ? O : q(s.type) || "Memo";
           case p: {
-            var Y = s, K = Y._payload, B = Y._init;
+            var Y = s, K = Y._payload, I = Y._init;
             try {
-              return q(B(K));
-            } catch (I) {
+              return q(I(K));
+            } catch (B) {
               return null;
             }
           }
@@ -262,27 +262,27 @@ function xo() {
       K = se.current, se.current = null, rt();
       try {
         if (b) {
-          var B = function() {
+          var I = function() {
             throw Error();
           };
-          if (Object.defineProperty(B.prototype, "props", {
+          if (Object.defineProperty(I.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(B, []);
+              Reflect.construct(I, []);
             } catch (ne) {
               O = ne;
             }
-            Reflect.construct(s, [], B);
+            Reflect.construct(s, [], I);
           } else {
             try {
-              B.call();
+              I.call();
             } catch (ne) {
               O = ne;
             }
-            s.call(B.prototype);
+            s.call(I.prototype);
           }
         } else {
           try {
@@ -294,17 +294,17 @@ function xo() {
         }
       } catch (ne) {
         if (ne && O && typeof ne.stack == "string") {
-          for (var I = ne.stack.split(`
+          for (var B = ne.stack.split(`
 `), te = O.stack.split(`
-`), Q = I.length - 1, ee = te.length - 1; Q >= 1 && ee >= 0 && I[Q] !== te[ee]; )
+`), Q = B.length - 1, ee = te.length - 1; Q >= 1 && ee >= 0 && B[Q] !== te[ee]; )
             ee--;
           for (; Q >= 1 && ee >= 0; Q--, ee--)
-            if (I[Q] !== te[ee]) {
+            if (B[Q] !== te[ee]) {
               if (Q !== 1 || ee !== 1)
                 do
-                  if (Q--, ee--, ee < 0 || I[Q] !== te[ee]) {
+                  if (Q--, ee--, ee < 0 || B[Q] !== te[ee]) {
                     var ce = `
-` + I[Q].replace(" at new ", " at ");
+` + B[Q].replace(" at new ", " at ");
                     return s.displayName && ce.includes("<anonymous>") && (ce = ce.replace("<anonymous>", s.displayName)), typeof s == "function" && nt.set(s, ce), ce;
                   }
                 while (Q >= 1 && ee >= 0);
@@ -347,7 +347,7 @@ function xo() {
             var O = s, Y = O._payload, K = O._init;
             try {
               return ot(K(Y), b, T);
-            } catch (B) {
+            } catch (I) {
             }
           }
         }
@@ -364,19 +364,19 @@ function xo() {
     function Vn(s, b, T, O, Y) {
       {
         var K = Function.call.bind($e);
-        for (var B in s)
-          if (K(s, B)) {
-            var I = void 0;
+        for (var I in s)
+          if (K(s, I)) {
+            var B = void 0;
             try {
-              if (typeof s[B] != "function") {
-                var te = Error((O || "React class") + ": " + T + " 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`.");
+              if (typeof s[I] != "function") {
+                var te = Error((O || "React class") + ": " + T + " type `" + I + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof s[I] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw te.name = "Invariant Violation", te;
               }
-              I = s[B](b, B, O, T, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+              B = s[I](b, I, O, T, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (Q) {
-              I = Q;
+              B = Q;
             }
-            I && !(I instanceof Error) && (it(Y), w("%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", T, B, typeof I), it(null)), I instanceof Error && !(I.message in ir) && (ir[I.message] = !0, it(Y), w("Failed %s type: %s", T, I.message), it(null));
+            B && !(B instanceof Error) && (it(Y), w("%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", T, I, typeof B), it(null)), B instanceof Error && !(B.message in ir) && (ir[B.message] = !0, it(Y), w("Failed %s type: %s", T, B.message), it(null));
           }
       }
     }
@@ -451,51 +451,51 @@ function xo() {
         });
       }
     }
-    var eo = function(s, b, T, O, Y, K, B) {
-      var I = {
+    var eo = function(s, b, T, O, Y, K, I) {
+      var B = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: t,
         // Built-in properties that belong on the element
         type: s,
         key: b,
         ref: T,
-        props: B,
+        props: I,
         // Record the component responsible for creating this element.
         _owner: K
       };
-      return I._store = {}, Object.defineProperty(I._store, "validated", {
+      return B._store = {}, Object.defineProperty(B._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: !1
-      }), Object.defineProperty(I, "_self", {
+      }), Object.defineProperty(B, "_self", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
         value: O
-      }), Object.defineProperty(I, "_source", {
+      }), Object.defineProperty(B, "_source", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
         value: Y
-      }), Object.freeze && (Object.freeze(I.props), Object.freeze(I)), I;
+      }), Object.freeze && (Object.freeze(B.props), Object.freeze(B)), B;
     };
     function to(s, b, T, O, Y) {
       {
-        var K, B = {}, I = null, te = null;
-        T !== void 0 && (sr(T), I = "" + T), Xn(b) && (sr(b.key), I = "" + b.key), Kn(b) && (te = b.ref, Jn(b, Y));
+        var K, I = {}, B = null, te = null;
+        T !== void 0 && (sr(T), B = "" + T), Xn(b) && (sr(b.key), B = "" + b.key), Kn(b) && (te = b.ref, Jn(b, Y));
         for (K in b)
-          $e.call(b, K) && !Yn.hasOwnProperty(K) && (B[K] = b[K]);
+          $e.call(b, K) && !Yn.hasOwnProperty(K) && (I[K] = b[K]);
         if (s && s.defaultProps) {
           var Q = s.defaultProps;
           for (K in Q)
-            B[K] === void 0 && (B[K] = Q[K]);
+            I[K] === void 0 && (I[K] = Q[K]);
         }
-        if (I || te) {
+        if (B || te) {
           var ee = typeof s == "function" ? s.displayName || s.name || "Unknown" : s;
-          I && Zn(B, ee), te && Qn(B, ee);
+          B && Zn(I, ee), te && Qn(I, ee);
         }
-        return eo(s, I, te, Y, O, cr.current, B);
+        return eo(s, B, te, Y, O, cr.current, I);
       }
     }
     var Rt = x.ReactCurrentOwner, fr = x.ReactDebugCurrentFrame;
@@ -566,8 +566,8 @@ Check the top-level render call using <` + T + ">.");
         else if (s) {
           var Y = y(s);
           if (typeof Y == "function" && Y !== s.entries)
-            for (var K = Y.call(s), B; !(B = K.next()).done; )
-              St(B.value) && hr(B.value, b);
+            for (var K = Y.call(s), I; !(I = K.next()).done; )
+              St(I.value) && hr(I.value, b);
         }
       }
     }
@@ -611,19 +611,19 @@ Check the top-level render call using <` + T + ">.");
     var vr = {};
     function br(s, b, T, O, Y, K) {
       {
-        var B = U(s);
-        if (!B) {
-          var I = "";
-          (s === void 0 || typeof s == "object" && s !== null && Object.keys(s).length === 0) && (I += " 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 I = U(s);
+        if (!I) {
+          var B = "";
+          (s === void 0 || typeof s == "object" && s !== null && Object.keys(s).length === 0) && (B += " 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 = ro();
-          te ? I += te : I += gr();
+          te ? B += te : B += gr();
           var Q;
-          s === null ? Q = "null" : wt(s) ? Q = "array" : s !== void 0 && s.$$typeof === t ? (Q = "<" + (q(s.type) || "Unknown") + " />", I = " Did you accidentally export a JSX literal instead of a component?") : Q = typeof s, w("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", Q, I);
+          s === null ? Q = "null" : wt(s) ? Q = "array" : s !== void 0 && s.$$typeof === t ? (Q = "<" + (q(s.type) || "Unknown") + " />", B = " Did you accidentally export a JSX literal instead of a component?") : Q = typeof s, w("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", Q, B);
         }
         var ee = to(s, b, T, Y, K);
         if (ee == null)
           return ee;
-        if (B) {
+        if (I) {
           var ce = b.children;
           if (ce !== void 0)
             if (O)
@@ -708,9 +708,9 @@ const Kt = "-", yo = (e) => {
     validators: []
   };
   return So(Object.entries(e.classGroups), r).forEach(([a, i]) => {
-    It(i, n, a, t);
+    Bt(i, n, a, t);
   }), n;
-}, It = (e, t, r, n) => {
+}, Bt = (e, t, r, n) => {
   e.forEach((o) => {
     if (typeof o == "string") {
       const a = o === "" ? t : Tr(t, o);
@@ -719,7 +719,7 @@ const Kt = "-", yo = (e) => {
     }
     if (typeof o == "function") {
       if (Eo(o)) {
-        It(o(n), t, r, n);
+        Bt(o(n), t, r, n);
         return;
       }
       t.validators.push({
@@ -729,7 +729,7 @@ const Kt = "-", yo = (e) => {
       return;
     }
     Object.entries(o).forEach(([a, i]) => {
-      It(i, Tr(t, a), r, n);
+      Bt(i, Tr(t, a), r, n);
     });
   });
 }, Tr = (e, t) => {
@@ -864,7 +864,7 @@ const Zr = (e) => {
     e[n] && (t = Zr(e[n])) && (r && (r += " "), r += t);
   return r;
 };
-function Bt(e, ...t) {
+function It(e, ...t) {
   let r, n, o, a = i;
   function i(c) {
     const u = t.reduce((f, m) => m(f), e());
@@ -884,7 +884,7 @@ function Bt(e, ...t) {
 const Z = (e) => {
   const t = (r) => r[e] || [];
   return t.isThemeGetter = !0, t;
-}, Qr = /^\[(?:([a-z-]+):)?(.+)\]$/i, Ho = /^\d+\/\d+$/, _o = /* @__PURE__ */ new Set(["px", "full", "screen"]), Ao = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Wo = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Oo = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, jo = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Fo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, pe = (e) => Oe(e) || _o.has(e) || Ho.test(e), ye = (e) => Be(e, "length", Uo), Oe = (e) => !!e && !Number.isNaN(Number(e)), kt = (e) => Be(e, "number", Oe), Ue = (e) => !!e && Number.isInteger(Number(e)), Io = (e) => e.endsWith("%") && Oe(e.slice(0, -1)), j = (e) => Qr.test(e), we = (e) => Ao.test(e), Bo = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Do = (e) => Be(e, Bo, en), No = (e) => Be(e, "position", en), $o = /* @__PURE__ */ new Set(["image", "url"]), Vo = (e) => Be(e, $o, Yo), Go = (e) => Be(e, "", qo), qe = () => !0, Be = (e, t, r) => {
+}, Qr = /^\[(?:([a-z-]+):)?(.+)\]$/i, Ho = /^\d+\/\d+$/, _o = /* @__PURE__ */ new Set(["px", "full", "screen"]), Ao = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Wo = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Oo = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, jo = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Fo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, pe = (e) => Oe(e) || _o.has(e) || Ho.test(e), ye = (e) => Ie(e, "length", Uo), Oe = (e) => !!e && !Number.isNaN(Number(e)), kt = (e) => Ie(e, "number", Oe), Ue = (e) => !!e && Number.isInteger(Number(e)), Bo = (e) => e.endsWith("%") && Oe(e.slice(0, -1)), j = (e) => Qr.test(e), we = (e) => Ao.test(e), Io = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Do = (e) => Ie(e, Io, en), No = (e) => Ie(e, "position", en), $o = /* @__PURE__ */ new Set(["image", "url"]), Vo = (e) => Ie(e, $o, Yo), Go = (e) => Ie(e, "", qo), qe = () => !0, Ie = (e, t, r) => {
   const n = Qr.exec(e);
   return n ? n[1] ? typeof t == "string" ? n[1] === t : t.has(n[1]) : r(n[2]) : !1;
 }, Uo = (e) => (
@@ -912,7 +912,7 @@ const Z = (e) => {
       invert: N(),
       gap: H(),
       gradientColorStops: [e],
-      gradientColorStopPositions: [Io, ye],
+      gradientColorStopPositions: [Bo, ye],
       inset: V(),
       margin: V(),
       opacity: F(),
@@ -2947,7 +2947,7 @@ const Z = (e) => {
       const n = t[r];
       n !== void 0 && (e[r] = (e[r] || []).concat(n));
     }
-}, Zo = (e, ...t) => typeof e == "function" ? Bt(Dt, e, ...t) : Bt(() => Ko(Dt(), e), ...t), ct = /* @__PURE__ */ Bt(Dt), Cr = ({ children: e, size: t = "small" }) => /* @__PURE__ */ R.jsx(
+}, Zo = (e, ...t) => typeof e == "function" ? It(Dt, e, ...t) : It(() => Ko(Dt(), e), ...t), ct = /* @__PURE__ */ It(Dt), Cr = ({ children: e, size: t = "small" }) => /* @__PURE__ */ R.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"}`,
@@ -3905,7 +3905,10 @@ const Qa = (e, t = "AED") => {
   }) : "";
   return `${t} ${n}`;
 }, kr = {
-  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",
+  primary: (
+    // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
+    "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 active:ds-text-accentPrimary-50 focus:ds-bg-Background-accentPrimary-100 focus:ds-text-Text-textPrimaryInverse disabled:ds-text-Background-accentPrimary-20",
@@ -3913,7 +3916,10 @@ const Qa = (e, t = "AED") => {
   large: "ds-py-3 ds-px-8 ds_MediumBodyEmphasized",
   empty: ""
 }, ei = {
-  primary: "ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryInverse ds-rounded-none ds-border ds-border-Fills-inversePrimary ds-shadow-[0px_0px_0px_1px_rgba(109,54,169,1)]",
+  primary: (
+    // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
+    "ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryInverse ds-rounded-none ds-border ds-border-Fills-inversePrimary ds-shadow-[0px_0px_0px_1px_rgba(109,54,169,1)]"
+  ),
   secondary: "ds-rounded-sm ds-border ds-bg-Background-accentPrimary-5 ds-text-accentPrimary-100 ds-border-2 ds-border-Background-accentPrimary-100",
   tertiary: "ds-text-Text-secondary ds-rounded-sm ds-bg-Fills-quaternary",
   quaternary: "ds-rounded-sm ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryInverse",
@@ -4173,7 +4179,7 @@ function $t(e) {
   }
   return t;
 }
-function Ie(e, t) {
+function Be(e, t) {
   if (!e || !t)
     return !1;
   const r = t.getRootNode == null ? void 0 : t.getRootNode();
@@ -4683,7 +4689,7 @@ function Zt(e, t) {
     };
   });
 }
-const Ii = function(e) {
+const Bi = function(e) {
   return e === void 0 && (e = {}), {
     name: "flip",
     options: e,
@@ -4771,7 +4777,7 @@ const Ii = function(e) {
     }
   };
 };
-function Bi(e, t) {
+function Ii(e, t) {
   return he(this, null, function* () {
     const {
       placement: r,
@@ -4812,7 +4818,7 @@ const Di = function(e) {
           y: i,
           placement: l,
           middlewareData: c
-        } = r, u = yield Bi(r, e);
+        } = r, u = yield Ii(r, e);
         return l === ((n = c.offset) == null ? void 0 : n.placement) && (o = c.arrow) != null && o.alignmentOffset ? {} : {
           x: a + u.x,
           y: i + u.y,
@@ -5264,7 +5270,7 @@ function ia(e, t, r, n) {
     }), m == null || m(), (x = d) == null || x.disconnect(), d = null, c && cancelAnimationFrame(g);
   };
 }
-const aa = Di, la = Ni, sa = Ii, ca = $i, ua = (e, t, r) => {
+const aa = Di, la = Ni, sa = Bi, ca = $i, ua = (e, t, r) => {
   const n = /* @__PURE__ */ new Map(), o = P({
     platform: na
   }, r), a = $(P({}, o.platform), {
@@ -5499,7 +5505,7 @@ function Mt(e) {
     t.current = e;
   }), t;
 }
-const Ir = /* @__PURE__ */ tt("safe-polygon");
+const Br = /* @__PURE__ */ tt("safe-polygon");
 function Ht(e, t, r) {
   return r && !Ke(r) ? 0 : typeof e == "number" ? e : e == null ? void 0 : e[t];
 }
@@ -5554,7 +5560,7 @@ function el(e, t) {
   }), H = Re(() => {
     if (D.current) {
       const k = Ee(i.floating).body;
-      k.style.pointerEvents = "", k.removeAttribute(Ir), D.current = !1;
+      k.style.pointerEvents = "", k.removeAttribute(Br), D.current = !1;
     }
   });
   v.useEffect(() => {
@@ -5589,7 +5595,7 @@ function el(e, t) {
         };
         return;
       }
-      (w.current === "touch" ? !Ie(i.floating, W.relatedTarget) : !0) && U(W);
+      (w.current === "touch" ? !Be(i.floating, W.relatedTarget) : !0) && U(W);
     }
     function M(W) {
       k() || o.current.floatingContext && (h.current == null || h.current($(P({}, o.current.floatingContext), {
@@ -5615,7 +5621,7 @@ function el(e, t) {
     var k;
     if (l && r && (k = h.current) != null && k.__options.blockPointerEvents && J()) {
       const L = Ee(i.floating).body;
-      L.setAttribute(Ir, ""), L.style.pointerEvents = "none", D.current = !0;
+      L.setAttribute(Br, ""), L.style.pointerEvents = "none", D.current = !0;
       const M = i.floating;
       if (X(i.domReference) && M) {
         var C;
@@ -5698,7 +5704,7 @@ function Ca() {
 }
 function At(e, t) {
   const r = t || e.currentTarget, n = e.relatedTarget;
-  return !n || !Ie(r, n);
+  return !n || !Be(r, n);
 }
 function ka(e) {
   yn(e, zn()).forEach((r) => {
@@ -5725,13 +5731,13 @@ const Ln = {
   left: 0
 };
 let Pa;
-function Br(e) {
+function Ir(e) {
   e.key === "Tab" && (e.target, clearTimeout(Pa));
 }
 const Dr = /* @__PURE__ */ v.forwardRef(function(t, r) {
   const [n, o] = v.useState();
-  fe(() => (dn() && o("button"), document.addEventListener("keydown", Br), () => {
-    document.removeEventListener("keydown", Br);
+  fe(() => (dn() && o("button"), document.addEventListener("keydown", Ir), () => {
+    document.removeEventListener("keydown", Ir);
   }), []);
   const a = {
     ref: r,
@@ -5961,9 +5967,9 @@ function Oa(e, t) {
       F = re;
     }
     if (W.length && X(M) && !ui(M) && // Clicked on a direct ancestor (e.g. FloatingOverlay).
-    !Ie(M, o.floating) && // If the target root element contains none of the markers, then the
+    !Be(M, o.floating) && // If the target root element contains none of the markers, then the
     // element was injected after the floating element rendered.
-    Array.from(W).every((re) => !Ie(F, re)))
+    Array.from(W).every((re) => !Be(F, re)))
       return;
     if (ae(M) && q) {
       const re = M.clientWidth > 0 && M.scrollWidth > M.clientWidth, se = M.clientHeight > 0 && M.scrollHeight > M.clientHeight;
@@ -6128,7 +6134,7 @@ function Fa(e) {
     elements: x
   }), [d, y, x, w]);
 }
-function Ia(e, t) {
+function Ba(e, t) {
   t === void 0 && (t = {});
   const {
     open: r,
@@ -6192,7 +6198,7 @@ function Ia(e, t) {
       f.current = window.setTimeout(() => {
         var x;
         const w = $t(i.domReference ? i.domReference.ownerDocument : document);
-        !g && w === i.domReference || Ie((x = a.current.floatingContext) == null ? void 0 : x.refs.floating.current, w) || Ie(i.domReference, w) || y || n(!1, h, "focus");
+        !g && w === i.domReference || Be((x = a.current.floatingContext) == null ? void 0 : x.refs.floating.current, w) || Be(i.domReference, w) || y || n(!1, h, "focus");
       });
     }
   }), [a, i.domReference, n, c]);
@@ -6235,7 +6241,7 @@ function jt(e, t, r) {
         l[f] = m;
   }), l), {}));
 }
-function Ba(e) {
+function Ia(e) {
   e === void 0 && (e = []);
   const t = e.map((l) => l == null ? void 0 : l.reference), r = e.map((l) => l == null ? void 0 : l.floating), n = e.map((l) => l == null ? void 0 : l.item), o = v.useCallback(
     (l) => jt(l, e, "reference"),
@@ -6370,7 +6376,8 @@ const $a = {
             {
               className: oe(
                 "modal-animated-backdrop",
-                m && "ds-bg-[rgba(255,255,255,0.24)] ds-backdrop-blur-[12px]"
+                // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
+                m && "ds-bg-[RGBA(255,255,255,0.24)] ds-backdrop-blur-[12px]"
               ),
               onClick: f ? n : void 0
             }
@@ -6460,11 +6467,23 @@ const qr = ({ children: e, size: t = "small" }) => /* @__PURE__ */ R.jsx(
     children: e
   }
 ), Ga = {
-  primary: "ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryInverse ds-rounded-sm hover:ds-text-Text-textPrimaryInverse hover:ds-bg-Background-accentPrimary-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentPrimary-darkened focus:ds-bg-Background-accentPrimary-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentPrimary-20 ds-text-mediumFootnoteEmphasized",
-  secondary: "ds-bg-Background-primary ds-text-Text-primary ds-rounded-sm ds-border ds-border-Fills-tertiary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-tertiary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"
+  primary: (
+    // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
+    "ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryInverse ds-rounded-sm hover:ds-text-Text-textPrimaryInverse hover:ds-bg-Background-accentPrimary-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentPrimary-darkened focus:ds-bg-Background-accentPrimary-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentPrimary-20 ds-text-mediumFootnoteEmphasized"
+  ),
+  secondary: (
+    // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
+    "ds-bg-Background-primary ds-text-Text-primary ds-rounded-sm ds-border ds-border-Fills-tertiary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-tertiary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"
+  )
 }, Ua = {
-  primary: "ds-rounded-sm ds-border ds-text-Text-primary ds-border-Fills-tertiary 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-accentPrimary-100 ds-text-Text-textPrimaryInverse ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"
+  primary: (
+    // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
+    "ds-rounded-sm ds-border ds-text-Text-primary ds-border-Fills-tertiary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)]  ds-text-mediumFootnoteEmphasized"
+  ),
+  secondary: (
+    // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
+    "ds-rounded-sm ds-bg-Background-accentPrimary-100 ds-text-Text-textPrimaryInverse ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"
+  )
 }, vt = Fe.forwardRef(
   (d, p) => {
     var g = d, {
@@ -6622,7 +6641,7 @@ const Wn = ({
   adjustHeight: a = !0,
   adjustWidth: i = !0,
   options: l,
-  getSelectedValueDisplayText: c = Bn,
+  getSelectedValueDisplayText: c = In,
   placeholder: u,
   value: f,
   isMultiSelect: m,
@@ -6649,7 +6668,7 @@ const Wn = ({
     ],
     whileElementsMounted: ia,
     placement: e
-  }), A = _a(z), D = Ia(z), G = Oa(z), J = Na(z), { getReferenceProps: U, getFloatingProps: V } = Ba([A, D, G, J]);
+  }), A = _a(z), D = Ba(z), G = Oa(z), J = Na(z), { getReferenceProps: U, getFloatingProps: V } = Ia([A, D, G, J]);
   return t || (t = /* @__PURE__ */ R.jsx(
     Fn,
     {
@@ -6679,7 +6698,7 @@ const Wn = ({
           i && "ds-overflow-x-auto"
         ),
         children: /* @__PURE__ */ R.jsx(
-          In,
+          Bn,
           {
             isMultiSelect: m,
             options: l,
@@ -6699,7 +6718,7 @@ const On = ({
   triggerContainerClassName: t,
   disabled: r,
   onOpenChange: n,
-  getSelectedValueDisplayText: o = Bn,
+  getSelectedValueDisplayText: o = In,
   placeholder: a,
   value: i,
   options: l,
@@ -6746,7 +6765,7 @@ const On = ({
             closeButtonLabel: f,
             isMultiSelect: c,
             children: /* @__PURE__ */ R.jsx(
-              In,
+              Bn,
               {
                 isMultiSelect: c,
                 options: l,
@@ -6801,7 +6820,7 @@ const Fn = ({
       children: n
     }
   );
-}, In = ({
+}, Bn = ({
   options: e,
   isMultiSelect: t,
   value: r,
@@ -6835,6 +6854,7 @@ const Fn = ({
   {
     onClick: t.disabled ? void 0 : e,
     className: oe(
+      // eslint-disable-next-line tailwind/no-hardcoded-colors -- TODO: use tailwind classes with design system tokens instead of hardcoded colors
       "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-mediumSubHeadEmphasized 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",
       !n && "ds-transition-[padding] ds-duration-300 hover:ds-px-4"
     ),
@@ -6867,7 +6887,7 @@ const Fn = ({
       )
     ]
   }
-), nr = (e, t) => Array.isArray(e) ? t.filter((r) => e.includes(r.value)) : t.find((r) => r.value === e), Bn = (e) => Array.isArray(e) ? e.map((t) => t.label).join(", ") : e.label;
+), nr = (e, t) => Array.isArray(e) ? t.filter((r) => e.includes(r.value)) : t.find((r) => r.value === e), In = (e) => Array.isArray(e) ? e.map((t) => t.label).join(", ") : e.label;
 export {
   Hn as A,
   vt as B,
@@ -6885,11 +6905,11 @@ export {
   oe as e,
   nr as f,
   el as g,
-  Ia as h,
+  Ba as h,
   Oa as i,
   R as j,
   Na as k,
-  Ba as l,
+  Ia as l,
   ia as m,
   ma as n,
   fa as o,