@redis-ui/styles 14.6.0 → 14.9.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useTheme as ze, css as Po, ThemeProvider as Re, createGlobalStyle as We } from "styled-components";
-import Er, { useCallback as Ro, useRef as wr, useLayoutEffect as Sr, useEffect as No, useState as $r, createContext as Be, useMemo as Pe, useContext as Fe } from "react";
+import { useTheme as Re, css as Po, ThemeProvider as ze, createGlobalStyle as We } from "styled-components";
+import Er, { useCallback as zo, useRef as wr, useLayoutEffect as Sr, useEffect as No, useState as $r, createContext as Be, useMemo as Pe, useContext as Fe } from "react";
 const lo = {
   transparent: "#00000000",
   neutral0: "#00000000",
@@ -205,7 +205,7 @@ const lo = {
       color: lo.primary600
     }
   }
-}, Me = {
+}, Le = {
   sizes: {
     L: {
       size: "3rem",
@@ -258,7 +258,7 @@ const lo = {
       }
     }
   }
-}, Le = {
+}, Me = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${t.semantic.color.border.neutral400}`,
@@ -280,7 +280,7 @@ const lo = {
       accountNameColor: t.semantic.color.text.neutral100
     }
   }
-}, Te = {
+}, He = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -323,17 +323,17 @@ const lo = {
       color: t.semantic.color.text.neutral800
     }
   }
-}, He = {
+}, Te = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, zr = "1px", Ie = {
+}, Rr = "1px", Ie = {
   padding: `${t.core.space.space025} ${t.core.space.space050}`,
   gap: t.core.space.space025,
   borderRadius: "2px",
-  height: `calc(${t.core.space.space200} + ${zr} * 2)`,
-  borderWidth: zr,
+  height: `calc(${t.core.space.space200} + ${Rr} * 2)`,
+  borderWidth: Rr,
   borderStyle: "solid",
   variants: {
     white: {
@@ -456,6 +456,31 @@ const lo = {
     gap: "0.4rem"
   }
 }, Oe = {
+  gap: t.core.space.space100,
+  link: {
+    states: {
+      normal: {
+        textColor: t.semantic.color.text.secondary500
+      },
+      hover: {
+        textColor: t.semantic.color.text.secondary800
+      },
+      active: {
+        textColor: t.semantic.color.text.secondary800
+      },
+      disabled: {
+        textColor: t.semantic.color.text.secondary400
+      }
+    }
+  },
+  current: {
+    textColor: t.semantic.color.text.secondary800,
+    fontWeight: t.core.font.fontWeight.semiBold
+  },
+  separator: {
+    textColor: t.semantic.color.text.secondary500
+  }
+}, _e = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -590,7 +615,7 @@ const lo = {
       }
     }
   }
-}, _e = {
+}, Ae = {
   borderRadius: "0.4rem",
   border: `1px solid ${t.semantic.color.border.neutral600}`,
   fontSize: "1.4rem",
@@ -633,13 +658,13 @@ const lo = {
       }
     }
   }
-}, Ae = {
+}, je = {
   width: "100%",
   height: "fit-content",
   bgColor: t.semantic.color.background.neutral100,
   shadow: t.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, je = {
+}, De = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -703,7 +728,7 @@ const lo = {
       }
     }
   }
-}, De = {
+}, Ge = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -760,7 +785,7 @@ const lo = {
       }
     }
   }
-}, Ge = {
+}, Ne = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -778,13 +803,13 @@ const lo = {
     gap: "0.4rem",
     padding: "1.2rem 1.6rem"
   }
-}, Ne = {
+}, qe = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: t.semantic.color.border.neutral500
-}, qe = {
+}, Ye = {
   fontSize: t.core.font.fontSize.s14,
   fontWeight: t.core.font.fontWeight.normal,
   fontFamily: t.core.font.fontFamily.regular,
@@ -848,7 +873,7 @@ const lo = {
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Rr = {
+}, zr = {
   aliceblue: [240, 248, 255],
   antiquewhite: [250, 235, 215],
   aqua: [0, 255, 255],
@@ -1006,14 +1031,14 @@ var Wr = {
   blue: 240,
   purple: 300
 };
-function Ye(a) {
+function Ue(a) {
   var h, S;
   var n, i = [], s = 1, l;
   if (typeof a == "number")
     return { space: "rgb", values: [a >>> 16, (a & 65280) >>> 8, a & 255], alpha: 1 };
   if (typeof a == "number") return { space: "rgb", values: [a >>> 16, (a & 65280) >>> 8, a & 255], alpha: 1 };
-  if (a = String(a).toLowerCase(), Rr[a])
-    i = Rr[a].slice(), l = "rgb";
+  if (a = String(a).toLowerCase(), zr[a])
+    i = zr[a].slice(), l = "rgb";
   else if (a === "transparent")
     s = 0, l = "rgb", i = [0, 0, 0];
   else if (a[0] === "#") {
@@ -1031,10 +1056,10 @@ function Ye(a) {
     var x = n[1];
     l = x.replace(/a$/, "");
     var k = l === "cmyk" ? 4 : l === "gray" ? 1 : 3;
-    i = n[2].trim().split(/\s*[,\/]\s*|\s+/), l === "color" && (l = i.shift()), i = i.map(function(u, R) {
+    i = n[2].trim().split(/\s*[,\/]\s*|\s+/), l === "color" && (l = i.shift()), i = i.map(function(u, z) {
       if (u[u.length - 1] === "%")
-        return u = parseFloat(u) / 100, R === 3 ? u : l === "rgb" ? u * 255 : l[0] === "h" || l[0] === "l" && !R ? u * 100 : l === "lab" ? u * 125 : l === "lch" ? R < 2 ? u * 150 : u * 360 : l[0] === "o" && !R ? u : l === "oklab" ? u * 0.4 : l === "oklch" ? R < 2 ? u * 0.4 : u * 360 : u;
-      if (l[R] === "h" || R === 2 && l[l.length - 1] === "h") {
+        return u = parseFloat(u) / 100, z === 3 ? u : l === "rgb" ? u * 255 : l[0] === "h" || l[0] === "l" && !z ? u * 100 : l === "lab" ? u * 125 : l === "lch" ? z < 2 ? u * 150 : u * 360 : l[0] === "o" && !z ? u : l === "oklab" ? u * 0.4 : l === "oklch" ? z < 2 ? u * 0.4 : u * 360 : u;
+      if (l[z] === "h" || z === 2 && l[l.length - 1] === "h") {
         if (Wr[u] !== void 0) return Wr[u];
         if (u.endsWith("deg")) return parseFloat(u);
         if (u.endsWith("turn")) return parseFloat(u) * 360;
@@ -1052,20 +1077,20 @@ function Ye(a) {
     alpha: s
   };
 }
-function Ue(a, n) {
-  var { space: i, values: s, alpha: l } = Ye(a);
+function Ze(a, n) {
+  var { space: i, values: s, alpha: l } = Ue(a);
   return i[0] === "h" ? `${i}a(${s[0]}, ${s[1]}%, ${s[2]}%, ${n})` : `${i}a(${s}, ${n})`;
 }
-function H() {
-  return H = Object.assign ? Object.assign.bind() : function(a) {
+function T() {
+  return T = Object.assign ? Object.assign.bind() : function(a) {
     for (var n = 1; n < arguments.length; n++) {
       var i = arguments[n];
       for (var s in i) ({}).hasOwnProperty.call(i, s) && (a[s] = i[s]);
     }
     return a;
-  }, H.apply(null, arguments);
+  }, T.apply(null, arguments);
 }
-function Ze(a) {
+function Ve(a) {
   if (a === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return a;
 }
@@ -1074,7 +1099,7 @@ function po(a, n) {
     return i.__proto__ = s, i;
   }, po(a, n);
 }
-function Ve(a, n) {
+function Je(a, n) {
   a.prototype = Object.create(n.prototype), a.prototype.constructor = a, po(a, n);
 }
 function qo(a) {
@@ -1082,7 +1107,7 @@ function qo(a) {
     return n.__proto__ || Object.getPrototypeOf(n);
   }, qo(a);
 }
-function Je(a) {
+function Ke(a) {
   try {
     return Function.toString.call(a).indexOf("[native code]") !== -1;
   } catch {
@@ -1099,7 +1124,7 @@ function Xr() {
     return !!a;
   })();
 }
-function Ke(a, n, i) {
+function Qe(a, n, i) {
   if (Xr()) return Reflect.construct.apply(null, arguments);
   var s = [null];
   s.push.apply(s, n);
@@ -1109,14 +1134,14 @@ function Ke(a, n, i) {
 function Yo(a) {
   var n = typeof Map == "function" ? /* @__PURE__ */ new Map() : void 0;
   return Yo = function(s) {
-    if (s === null || !Je(s)) return s;
+    if (s === null || !Ke(s)) return s;
     if (typeof s != "function") throw new TypeError("Super expression must either be null or a function");
     if (n !== void 0) {
       if (n.has(s)) return n.get(s);
       n.set(s, l);
     }
     function l() {
-      return Ke(s, arguments, qo(this).constructor);
+      return Qe(s, arguments, qo(this).constructor);
     }
     return l.prototype = Object.create(s.prototype, {
       constructor: {
@@ -1128,7 +1153,7 @@ function Yo(a) {
     }), po(l, s);
   }, Yo(a);
 }
-var Qe = {
+var ot = {
   1: `Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).
 
 `,
@@ -1356,7 +1381,7 @@ To pass a single animation please supply them in simple values, e.g. animation('
   78: `base must be set in "px" or "%" but you set it in "%s".
 `
 };
-function ot() {
+function rt() {
   for (var a = arguments.length, n = new Array(a), i = 0; i < a; i++)
     n[i] = arguments[i];
   var s = n[0], l = [], m;
@@ -1367,7 +1392,7 @@ function ot() {
   }), s;
 }
 var N = /* @__PURE__ */ function(a) {
-  Ve(n, a);
+  Je(n, a);
   function n(i) {
     var s;
     if (process.env.NODE_ENV === "production")
@@ -1375,25 +1400,25 @@ var N = /* @__PURE__ */ function(a) {
     else {
       for (var l = arguments.length, m = new Array(l > 1 ? l - 1 : 0), g = 1; g < l; g++)
         m[g - 1] = arguments[g];
-      s = a.call(this, ot.apply(void 0, [Qe[i]].concat(m))) || this;
+      s = a.call(this, rt.apply(void 0, [ot[i]].concat(m))) || this;
     }
-    return Ze(s);
+    return Ve(s);
   }
   return n;
 }(/* @__PURE__ */ Yo(Error));
 function jo(a) {
   return Math.round(a * 255);
 }
-function rt(a, n, i) {
+function et(a, n, i) {
   return jo(a) + "," + jo(n) + "," + jo(i);
 }
 function Co(a, n, i, s) {
-  if (s === void 0 && (s = rt), n === 0)
+  if (s === void 0 && (s = et), n === 0)
     return s(i, i, i);
   var l = (a % 360 + 360) % 360 / 60, m = (1 - Math.abs(2 * i - 1)) * n, g = m * (1 - Math.abs(l % 2 - 1)), C = 0, x = 0, k = 0;
   l >= 0 && l < 1 ? (C = m, x = g) : l >= 1 && l < 2 ? (C = g, x = m) : l >= 2 && l < 3 ? (x = m, k = g) : l >= 3 && l < 4 ? (x = g, k = m) : l >= 4 && l < 5 ? (C = g, k = m) : l >= 5 && l < 6 && (C = m, k = g);
-  var h = i - m / 2, S = C + h, u = x + h, R = k + h;
-  return s(S, u, R);
+  var h = i - m / 2, S = C + h, u = x + h, z = k + h;
+  return s(S, u, z);
 }
 var Br = {
   aliceblue: "f0f8ff",
@@ -1545,23 +1570,23 @@ var Br = {
   yellow: "ff0",
   yellowgreen: "9acd32"
 };
-function et(a) {
+function tt(a) {
   if (typeof a != "string") return a;
   var n = a.toLowerCase();
   return Br[n] ? "#" + Br[n] : a;
 }
-var tt = /^#[a-fA-F0-9]{6}$/, at = /^#[a-fA-F0-9]{8}$/, nt = /^#[a-fA-F0-9]{3}$/, ct = /^#[a-fA-F0-9]{4}$/, Do = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i, it = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i, lt = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i, st = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+var at = /^#[a-fA-F0-9]{6}$/, nt = /^#[a-fA-F0-9]{8}$/, ct = /^#[a-fA-F0-9]{3}$/, it = /^#[a-fA-F0-9]{4}$/, Do = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i, lt = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i, st = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i, dt = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
 function oo(a) {
   if (typeof a != "string")
     throw new N(3);
-  var n = et(a);
-  if (n.match(tt))
+  var n = tt(a);
+  if (n.match(at))
     return {
       red: parseInt("" + n[1] + n[2], 16),
       green: parseInt("" + n[3] + n[4], 16),
       blue: parseInt("" + n[5] + n[6], 16)
     };
-  if (n.match(at)) {
+  if (n.match(nt)) {
     var i = parseFloat((parseInt("" + n[7] + n[8], 16) / 255).toFixed(2));
     return {
       red: parseInt("" + n[1] + n[2], 16),
@@ -1570,13 +1595,13 @@ function oo(a) {
       alpha: i
     };
   }
-  if (n.match(nt))
+  if (n.match(ct))
     return {
       red: parseInt("" + n[1] + n[1], 16),
       green: parseInt("" + n[2] + n[2], 16),
       blue: parseInt("" + n[3] + n[3], 16)
     };
-  if (n.match(ct)) {
+  if (n.match(it)) {
     var s = parseFloat((parseInt("" + n[4] + n[4], 16) / 255).toFixed(2));
     return {
       red: parseInt("" + n[1] + n[1], 16),
@@ -1592,7 +1617,7 @@ function oo(a) {
       green: parseInt("" + l[2], 10),
       blue: parseInt("" + l[3], 10)
     };
-  var m = it.exec(n.substring(0, 50));
+  var m = lt.exec(n.substring(0, 50));
   if (m)
     return {
       red: parseInt("" + m[1], 10),
@@ -1600,7 +1625,7 @@ function oo(a) {
       blue: parseInt("" + m[3], 10),
       alpha: parseFloat("" + m[4]) > 1 ? parseFloat("" + m[4]) / 100 : parseFloat("" + m[4])
     };
-  var g = lt.exec(n);
+  var g = st.exec(n);
   if (g) {
     var C = parseInt("" + g[1], 10), x = parseInt("" + g[2], 10) / 100, k = parseInt("" + g[3], 10) / 100, h = "rgb(" + Co(C, x, k) + ")", S = Do.exec(h);
     if (!S)
@@ -1611,9 +1636,9 @@ function oo(a) {
       blue: parseInt("" + S[3], 10)
     };
   }
-  var u = st.exec(n.substring(0, 50));
+  var u = dt.exec(n.substring(0, 50));
   if (u) {
-    var R = parseInt("" + u[1], 10), xo = parseInt("" + u[2], 10) / 100, Mo = parseInt("" + u[3], 10) / 100, ho = "rgb(" + Co(R, xo, Mo) + ")", O = Do.exec(ho);
+    var z = parseInt("" + u[1], 10), xo = parseInt("" + u[2], 10) / 100, Lo = parseInt("" + u[3], 10) / 100, ho = "rgb(" + Co(z, xo, Lo) + ")", O = Do.exec(ho);
     if (!O)
       throw new N(4, n, ho);
     return {
@@ -1625,7 +1650,7 @@ function oo(a) {
   }
   throw new N(5);
 }
-function dt(a) {
+function mt(a) {
   var n = a.red / 255, i = a.green / 255, s = a.blue / 255, l = Math.max(n, i, s), m = Math.min(n, i, s), g = (l + m) / 2;
   if (l === m)
     return a.alpha !== void 0 ? {
@@ -1662,11 +1687,11 @@ function dt(a) {
   };
 }
 function U(a) {
-  return dt(oo(a));
+  return mt(oo(a));
 }
-var mt = function(n) {
+var bt = function(n) {
   return n.length === 7 && n[1] === n[2] && n[3] === n[4] && n[5] === n[6] ? "#" + n[1] + n[3] + n[5] : n;
-}, Uo = mt;
+}, Uo = bt;
 function Q(a) {
   var n = a.toString(16);
   return n.length === 1 ? "0" + n : n;
@@ -1674,20 +1699,20 @@ function Q(a) {
 function Go(a) {
   return Q(Math.round(a * 255));
 }
-function bt(a, n, i) {
+function gt(a, n, i) {
   return Uo("#" + Go(a) + Go(n) + Go(i));
 }
 function Wo(a, n, i) {
-  return Co(a, n, i, bt);
+  return Co(a, n, i, gt);
 }
-function gt(a, n, i) {
+function ut(a, n, i) {
   if (typeof a == "number" && typeof n == "number" && typeof i == "number")
     return Wo(a, n, i);
   if (typeof a == "object" && n === void 0 && i === void 0)
     return Wo(a.hue, a.saturation, a.lightness);
   throw new N(1);
 }
-function ut(a, n, i, s) {
+function pt(a, n, i, s) {
   if (typeof a == "number" && typeof n == "number" && typeof i == "number" && typeof s == "number")
     return s >= 1 ? Wo(a, n, i) : "rgba(" + Co(a, n, i) + "," + s + ")";
   if (typeof a == "object" && n === void 0 && i === void 0 && s === void 0)
@@ -1713,21 +1738,21 @@ function Fo(a, n, i, s) {
   }
   throw new N(7);
 }
-var pt = function(n) {
+var Ct = function(n) {
   return typeof n.red == "number" && typeof n.green == "number" && typeof n.blue == "number" && (typeof n.alpha != "number" || typeof n.alpha > "u");
-}, Ct = function(n) {
-  return typeof n.red == "number" && typeof n.green == "number" && typeof n.blue == "number" && typeof n.alpha == "number";
 }, xt = function(n) {
-  return typeof n.hue == "number" && typeof n.saturation == "number" && typeof n.lightness == "number" && (typeof n.alpha != "number" || typeof n.alpha > "u");
+  return typeof n.red == "number" && typeof n.green == "number" && typeof n.blue == "number" && typeof n.alpha == "number";
 }, ht = function(n) {
+  return typeof n.hue == "number" && typeof n.saturation == "number" && typeof n.lightness == "number" && (typeof n.alpha != "number" || typeof n.alpha > "u");
+}, ft = function(n) {
   return typeof n.hue == "number" && typeof n.saturation == "number" && typeof n.lightness == "number" && typeof n.alpha == "number";
 };
 function Z(a) {
   if (typeof a != "object") throw new N(8);
-  if (Ct(a)) return Fo(a);
-  if (pt(a)) return Zo(a);
+  if (xt(a)) return Fo(a);
+  if (Ct(a)) return Zo(a);
+  if (ft(a)) return pt(a);
   if (ht(a)) return ut(a);
-  if (xt(a)) return gt(a);
   throw new N(8);
 }
 function Or(a, n, i) {
@@ -1739,34 +1764,34 @@ function Or(a, n, i) {
 function I(a) {
   return Or(a, a.length, []);
 }
-function ft(a, n) {
+function yt(a, n) {
   if (n === "transparent") return n;
   var i = U(n);
-  return Z(H({}, i, {
+  return Z(T({}, i, {
     hue: i.hue + parseFloat(a)
   }));
 }
-I(ft);
+I(yt);
 function ao(a, n, i) {
   return Math.max(a, Math.min(n, i));
 }
-function yt(a, n) {
+function kt(a, n) {
   if (n === "transparent") return n;
   var i = U(n);
-  return Z(H({}, i, {
+  return Z(T({}, i, {
     lightness: ao(0, 1, i.lightness - parseFloat(a))
   }));
 }
-var kt = I(yt), vt = kt;
-function wt(a, n) {
+var vt = I(kt), wt = vt;
+function St(a, n) {
   if (n === "transparent") return n;
   var i = U(n);
-  return Z(H({}, i, {
+  return Z(T({}, i, {
     saturation: ao(0, 1, i.saturation - parseFloat(a))
   }));
 }
-I(wt);
-function St(a) {
+I(St);
+function $t(a) {
   if (a === "transparent") return 0;
   var n = oo(a), i = Object.keys(n).map(function(g) {
     var C = n[g] / 255;
@@ -1774,105 +1799,105 @@ function St(a) {
   }), s = i[0], l = i[1], m = i[2];
   return parseFloat((0.2126 * s + 0.7152 * l + 0.0722 * m).toFixed(3));
 }
-function $t(a, n) {
+function Rt(a, n) {
   if (n === "transparent") return n;
   var i = U(n);
-  return Z(H({}, i, {
+  return Z(T({}, i, {
     lightness: ao(0, 1, i.lightness + parseFloat(a))
   }));
 }
-var zt = I($t), Rt = zt;
-function Wt(a, n, i) {
+var zt = I(Rt), Wt = zt;
+function Bt(a, n, i) {
   if (n === "transparent") return i;
   if (i === "transparent") return n;
   if (a === 0) return i;
-  var s = oo(n), l = H({}, s, {
+  var s = oo(n), l = T({}, s, {
     alpha: typeof s.alpha == "number" ? s.alpha : 1
-  }), m = oo(i), g = H({}, m, {
+  }), m = oo(i), g = T({}, m, {
     alpha: typeof m.alpha == "number" ? m.alpha : 1
-  }), C = l.alpha - g.alpha, x = parseFloat(a) * 2 - 1, k = x * C === -1 ? x : x + C, h = 1 + x * C, S = (k / h + 1) / 2, u = 1 - S, R = {
+  }), C = l.alpha - g.alpha, x = parseFloat(a) * 2 - 1, k = x * C === -1 ? x : x + C, h = 1 + x * C, S = (k / h + 1) / 2, u = 1 - S, z = {
     red: Math.floor(l.red * S + g.red * u),
     green: Math.floor(l.green * S + g.green * u),
     blue: Math.floor(l.blue * S + g.blue * u),
     alpha: l.alpha * parseFloat(a) + g.alpha * (1 - parseFloat(a))
   };
-  return Fo(R);
+  return Fo(z);
 }
-var Bt = I(Wt), _r = Bt;
-function Pt(a, n) {
+var Pt = I(Bt), _r = Pt;
+function Ft(a, n) {
   if (n === "transparent") return n;
-  var i = oo(n), s = typeof i.alpha == "number" ? i.alpha : 1, l = H({}, i, {
+  var i = oo(n), s = typeof i.alpha == "number" ? i.alpha : 1, l = T({}, i, {
     alpha: ao(0, 1, (s * 100 + parseFloat(a) * 100) / 100)
   });
   return Fo(l);
 }
-I(Pt);
-function Ft(a, n) {
+I(Ft);
+function Lt(a, n) {
   if (n === "transparent") return n;
   var i = U(n);
-  return Z(H({}, i, {
+  return Z(T({}, i, {
     saturation: ao(0, 1, i.saturation + parseFloat(a))
   }));
 }
-I(Ft);
+I(Lt);
 function Mt(a, n) {
-  return n === "transparent" ? n : Z(H({}, U(n), {
+  return n === "transparent" ? n : Z(T({}, U(n), {
     hue: parseFloat(a)
   }));
 }
 I(Mt);
-function Lt(a, n) {
-  return n === "transparent" ? n : Z(H({}, U(n), {
+function Ht(a, n) {
+  return n === "transparent" ? n : Z(T({}, U(n), {
     lightness: parseFloat(a)
   }));
 }
-I(Lt);
+I(Ht);
 function Tt(a, n) {
-  return n === "transparent" ? n : Z(H({}, U(n), {
+  return n === "transparent" ? n : Z(T({}, U(n), {
     saturation: parseFloat(a)
   }));
 }
 I(Tt);
-function Ht(a, n) {
-  return n === "transparent" ? n : _r(parseFloat(a), "rgb(0, 0, 0)", n);
-}
-I(Ht);
 function It(a, n) {
-  return n === "transparent" ? n : _r(parseFloat(a), "rgb(255, 255, 255)", n);
+  return n === "transparent" ? n : _r(parseFloat(a), "rgb(0, 0, 0)", n);
 }
 I(It);
 function Et(a, n) {
+  return n === "transparent" ? n : _r(parseFloat(a), "rgb(255, 255, 255)", n);
+}
+I(Et);
+function Xt(a, n) {
   if (n === "transparent") return n;
-  var i = oo(n), s = typeof i.alpha == "number" ? i.alpha : 1, l = H({}, i, {
+  var i = oo(n), s = typeof i.alpha == "number" ? i.alpha : 1, l = T({}, i, {
     alpha: ao(0, 1, +(s * 100 - parseFloat(a) * 100).toFixed(2) / 100)
   });
   return Fo(l);
 }
-I(Et);
-const V = (a, n) => Ue(a, n);
-function K0(a) {
-  const n = St(a), i = Math.max(Math.abs(n - 0.5) * 1.2, 0.3);
-  return n < 0.5 ? Rt(i, a) : vt(i, a);
+I(Xt);
+const V = (a, n) => Ze(a, n);
+function di(a) {
+  const n = $t(a), i = Math.max(Math.abs(n - 0.5) * 1.2, 0.3);
+  return n < 0.5 ? Wt(i, a) : wt(i, a);
 }
-const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark), n), {
+const mi = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark), n), {
   light: [],
   dark: []
-}), oi = (a) => a.flatMap((n) => Object.values(n)), Xt = (a) => a.reduce((n, i) => {
+}), bi = (a) => a.flatMap((n) => Object.values(n)), Ot = (a) => a.reduce((n, i) => {
   const s = n[i.name] || {};
   return s[i.mode] = i, n[i.name] = s, n;
-}, {}), Ot = (a) => a.reduce((n, i) => (n[i.mode].push(i), n), {
+}, {}), _t = (a) => a.reduce((n, i) => (n[i.mode].push(i), n), {
   light: [],
   dark: []
-}), ri = (a) => ({
-  groupedByName: Xt(a),
-  groupedByMode: Ot(a)
-}), ei = (a, n, i) => {
+}), gi = (a) => ({
+  groupedByName: Ot(a),
+  groupedByMode: _t(a)
+}), ui = (a, n, i) => {
   var l, m;
   const s = a.groupedByName[n];
   if (s)
     return i ? s[i] || ((l = a.groupedByMode[i]) == null ? void 0 : l[0]) : s.light || s.dark;
   if (i) return (m = a.groupedByMode[i]) == null ? void 0 : m[0];
-}, _t = {
+}, At = {
   shadow: t.core.shadow.shadow500,
   bgColor: t.semantic.color.background.neutral100,
   sidePadding: "3.2rem",
@@ -1898,7 +1923,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: V(t.semantic.color.background.neutral100, 0.8)
   }
-}, At = {
+}, jt = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${t.semantic.color.border.neutral400}`
@@ -1931,7 +1956,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       padding: "0.8rem 1.6rem"
     }
   }
-}, jt = {
+}, Dt = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -1945,7 +1970,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: t.semantic.color.text.danger500
     }
   }
-}, Dt = {
+}, Gt = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -1989,7 +2014,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   },
   borderRadius: "0.4rem"
-}, Gt = {
+}, Nt = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -2082,7 +2107,34 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: t.semantic.color.text.danger500
     }
   }
-}, Nt = {
+}, qt = {
+  container: {
+    borderRadius: "0.8rem",
+    backgroundColor: t.semantic.color.background.neutral100,
+    boxShadow: `0px 0px 0px 1px ${t.semantic.color.border.neutral600}`
+  },
+  headerRow: {
+    minHeight: "5.6rem",
+    bgColor: t.semantic.color.background.neutral100,
+    separator: {
+      color: t.semantic.color.border.neutral400,
+      width: "1px"
+    }
+  },
+  headerCell: {
+    padding: "1rem 1.2rem",
+    color: t.semantic.color.text.neutral800,
+    separator: {
+      color: t.semantic.color.border.neutral400,
+      width: "1px",
+      blockPadding: "1rem"
+    }
+  },
+  bodyCell: {
+    padding: "0.4rem 1.2rem",
+    color: t.semantic.color.text.neutral700
+  }
+}, Yt = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -2103,7 +2155,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   required: {
     textColor: t.semantic.color.text.danger500
   }
-}, qt = {
+}, Ut = {
   flexGroup: {
     gap: {
       XXS: t.core.space.space025,
@@ -2139,7 +2191,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: t.core.space.space300
     }
   }
-}, Yt = {
+}, Zt = {
   variants: {
     block: {
       sizes: {
@@ -2210,7 +2262,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ut = {
+}, Vt = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -2226,11 +2278,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     },
     inverse: {
       bgColor: "rgba(255, 255, 255, 0.2)",
+      // todo: REPLACE ONCE ADDED TO COLOR PALETTE
       color: t.semantic.color.icon.neutral100,
       textColor: t.semantic.color.icon.neutral100
     }
   }
-}, Zt = {
+}, Jt = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -2306,7 +2359,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Vt = {
+}, Kt = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -2318,7 +2371,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, Jt = {
+}, Qt = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -2348,9 +2401,9 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: "rgba(255, 255, 255, 0.9)"
   }
-}, Kt = {
+}, oa = {
   iconColor: t.semantic.color.icon.neutral700
-}, Qt = {
+}, ra = {
   bgColor: t.semantic.color.background.neutral100,
   shadow: t.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -2363,7 +2416,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, oa = {
+}, ea = {
   closeButton: {
     iconColor: t.semantic.color.icon.neutral700
   },
@@ -2382,7 +2435,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, ra = {
+}, ta = {
   textColor: t.semantic.color.text.primary600,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -2412,7 +2465,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     L: "4.4rem"
   },
   fontWeight: t.core.font.fontWeight.bold
-}, ea = {
+}, aa = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -2466,7 +2519,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   text: {
     color: t.semantic.color.text.neutral800
   }
-}, ta = {
+}, na = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -2514,7 +2567,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, aa = {
+}, ca = {
   bgColor: t.semantic.color.background.neutral100,
   shadow: `0px 0px 0px 1px ${t.semantic.color.border.neutral600}`,
   borderRadius: "0.8rem",
@@ -2536,7 +2589,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, na = {
+}, ia = {
   width: "100%",
   height: "fit-content",
   bgColor: t.semantic.color.background.neutral100,
@@ -2585,7 +2638,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     width: "1px",
     color: t.semantic.color.border.neutral600
   }
-}, ca = {
+}, la = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -2702,7 +2755,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   textColor: {
     disabled: t.semantic.color.text.neutral500
   }
-}, j = (a, n) => `color-mix(in srgb-linear, ${a} ${n}%, transparent)`, ia = {
+}, j = (a, n) => `color-mix(in srgb-linear, ${a} ${n}%, transparent)`, sa = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -2901,7 +2954,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, la = {
+}, da = {
   sizes: {
     M: {
       borderRadius: t.core.space.space100,
@@ -2941,7 +2994,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: t.semantic.color.border.attention300
     }
   }
-}, sa = {
+}, ma = {
   variants: {
     informative: {
       iconColor: t.semantic.color.icon.informative600
@@ -2959,7 +3012,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       iconColor: t.semantic.color.icon.success600
     }
   }
-}, da = {
+}, ba = {
   collapsed: {
     bgColor: t.semantic.color.background.neutral300,
     shadow: "none",
@@ -3066,7 +3119,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ma = {
+}, ga = {
   card: {
     gap: "2.4rem",
     bgColor: t.semantic.color.background.neutral100,
@@ -3093,7 +3146,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, ba = {
+}, ua = {
+  gap: t.core.space.space150,
+  controlsHeight: "2rem",
+  track: {
+    height: "0.4rem",
+    states: {
+      normal: {
+        bgColor: t.semantic.color.background.secondary300
+      },
+      disabled: {
+        bgColor: t.semantic.color.background.secondary300
+      }
+    }
+  },
+  range: {
+    states: {
+      normal: {
+        bgColor: t.semantic.color.background.primary400
+      },
+      disabled: {
+        bgColor: t.semantic.color.background.neutral500
+      }
+    }
+  },
+  thumb: {
+    width: "2.4rem",
+    height: "2.4rem",
+    borderWidth: "0.8rem",
+    borderRadius: "50%",
+    states: {
+      normal: {
+        bgColor: t.semantic.color.background.secondary0,
+        borderColor: t.semantic.color.background.primary400
+      },
+      disabled: {
+        bgColor: t.semantic.color.background.secondary0,
+        borderColor: t.semantic.color.background.neutral500
+      }
+    }
+  },
+  mark: {
+    width: "0.4rem",
+    height: "0.4rem",
+    rangeStates: {
+      inRange: {
+        normal: {
+          bgColor: t.semantic.color.background.primary100
+        },
+        disabled: {
+          bgColor: t.semantic.color.background.secondary500
+        }
+      },
+      outOfRange: {
+        normal: {
+          bgColor: t.semantic.color.background.secondary500
+        },
+        disabled: {
+          bgColor: t.semantic.color.background.secondary500
+        }
+      }
+    }
+  },
+  label: {
+    offset: t.core.space.space200
+  }
+}, pa = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -3140,7 +3258,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ga = {
+}, Ca = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -3192,7 +3310,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ua = {
+}, xa = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -3280,7 +3398,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: t.semantic.color.text.secondary800
     }
   }
-}, pa = {
+}, ha = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -3303,7 +3421,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, Ca = {
+}, fa = {
   variants: {
     default: {
       gap: "4rem",
@@ -3386,22 +3504,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, q = "transparent", xa = {
+}, q = "transparent", ya = {
   layouts: {
     block: {
       sizes: {
-        M: {
+        medium: {
           height: "2.6rem",
           lineHeight: "1.9rem",
           gap: "0.2rem",
           padding: "0.4rem 0.6rem",
           borderRadius: "0.4rem"
+        },
+        small: {
+          height: "2.4rem",
+          lineHeight: "1.9rem",
+          gap: "0.2rem",
+          padding: "0.4rem 0.6rem",
+          borderRadius: "0.4rem"
         }
       }
     },
     inline: {
       sizes: {
-        M: {
+        medium: {
+          height: "unset",
+          lineHeight: "inherit",
+          gap: "0.2rem",
+          padding: "0",
+          borderRadius: "0"
+        },
+        small: {
           height: "unset",
           lineHeight: "inherit",
           gap: "0.2rem",
@@ -3486,7 +3618,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ha = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209Z'%20fill='%23FFCD01'/%3e%3cpath%20d='M17%209C17%2013.4183%2013.4183%2017%209%2017C4.58172%2017%201%2013.4183%201%209C1%204.58172%204.58172%201%209%201C13.4183%201%2017%204.58172%2017%209Z'%20fill='%23FFCD01'/%3e%3cpath%20d='M16.4185%2012C16.7935%2011.0736%2017%2010.0609%2017%209C17%208.3094%2016.9125%207.63924%2016.748%207H1.25203C1.08751%207.63924%201%208.3094%201%209C1%2010.0609%201.20651%2011.0736%201.58152%2012H16.4185Z'%20fill='%23FFBE01'/%3e%3cpath%20d='M3.70838%2015C2.78496%2014.185%202.05111%2013.1601%201.58152%2012H16.4185C15.9489%2013.1601%2015.2151%2014.185%2014.2917%2015H3.70838Z'%20fill='%23FFB001'/%3e%3cpath%20d='M14.2917%2015C12.8814%2016.2447%2011.0289%2017%209%2017C6.97111%2017%205.11864%2016.2447%203.70838%2015H14.2917Z'%20fill='%23FFA101'/%3e%3c/svg%3e", fa = {
+}, ka = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209Z'%20fill='%23FFCD01'/%3e%3cpath%20d='M17%209C17%2013.4183%2013.4183%2017%209%2017C4.58172%2017%201%2013.4183%201%209C1%204.58172%204.58172%201%209%201C13.4183%201%2017%204.58172%2017%209Z'%20fill='%23FFCD01'/%3e%3cpath%20d='M16.4185%2012C16.7935%2011.0736%2017%2010.0609%2017%209C17%208.3094%2016.9125%207.63924%2016.748%207H1.25203C1.08751%207.63924%201%208.3094%201%209C1%2010.0609%201.20651%2011.0736%201.58152%2012H16.4185Z'%20fill='%23FFBE01'/%3e%3cpath%20d='M3.70838%2015C2.78496%2014.185%202.05111%2013.1601%201.58152%2012H16.4185C15.9489%2013.1601%2015.2151%2014.185%2014.2917%2015H3.70838Z'%20fill='%23FFB001'/%3e%3cpath%20d='M14.2917%2015C12.8814%2016.2447%2011.0289%2017%209%2017C6.97111%2017%205.11864%2016.2447%203.70838%2015H14.2917Z'%20fill='%23FFA101'/%3e%3c/svg%3e", va = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -3495,12 +3627,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   borderColor: t.semantic.color.border.neutral600,
   bgColor: t.semantic.color.background.neutral300,
   thumb: {
-    icon: `url("${ha}")`,
+    icon: `url("${ka}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, ya = {
+}, wa = {
   width: "clamp(400px, 33vw, 640px)",
   padding: "12px max(12px, calc(20 * (100vw / 1920)))",
   shadow: "0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05)",
@@ -3512,7 +3644,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   toaster: {
     gap: "2rem"
   }
-}, wo = "transparent", ka = {
+}, wo = "transparent", Sa = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -3567,7 +3699,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, va = {
+}, $a = {
   textColor: t.semantic.color.text.neutral800,
   bgColor: t.semantic.color.background.neutral100,
   shadow: t.core.shadow.shadow400,
@@ -3581,7 +3713,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, wa = {
+}, Ra = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -3594,7 +3726,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     iconColor: t.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, Sa = {
+}, za = {
   colors: {
     primary: t.semantic.color.text.neutral800,
     secondary: t.semantic.color.text.neutral700
@@ -3664,7 +3796,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       semiBold: t.core.font.fontWeight.semiBold
     }
   }
-}, $a = {
+}, Wa = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -3716,13 +3848,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: t.semantic.color.border.neutral300
     }
   }
-}, za = {
+}, Ba = {
   bgColor: t.semantic.color.background.neutral100,
   textColor: t.semantic.color.background.neutral700,
   fontFamily: t.core.font.fontFamily.regular,
   fontSize: t.core.font.fontSize.s14,
   lineHeight: "1.4"
-}, Ra = {
+}, Pa = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: t.semantic.color.background.secondary100,
@@ -3736,64 +3868,67 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   mode: "light",
   ...t,
   components: {
-    actionIconButton: Me,
-    appBar: Le,
-    appSelectionMenu: Te,
-    autoComplete: He,
+    actionIconButton: Le,
+    appBar: Me,
+    appSelectionMenu: He,
+    autoComplete: Te,
     badge: Ie,
     banner: Ee,
     boxSelectionGroup: Xe,
-    button: Oe,
-    buttonGroup: _e,
-    card: Ae,
-    checkbox: je,
-    chip: De,
-    chipList: Ge,
-    countryFlag: Ne,
-    datePicker: qe,
-    drawer: _t,
-    filters: At,
-    formField: jt,
-    iconButton: Dt,
-    input: Gt,
-    label: Nt,
-    layouts: qt,
-    link: Yt,
-    loader: Ut,
-    menu: Zt,
-    midBar: Vt,
-    modal: Jt,
-    moreInfoIcon: Kt,
-    popover: Qt,
-    popupCard: oa,
-    profileIcon: ra,
-    progressBar: ea,
-    radio: ta,
-    searchBar: aa,
-    section: na,
-    select: ca,
-    semanticButton: ia,
-    semanticContainer: la,
-    semanticIcon: sa,
-    sideBar: da,
-    skeleton: ma,
-    stepper: ba,
-    switchButton: ga,
-    table: ua,
-    tableHeading: pa,
-    tabs: Ca,
-    textButton: xa,
-    themeModeSwitch: fa,
-    toast: ya,
-    toggleButton: ka,
-    tooltip: va,
-    treeView: wa,
-    typography: Sa,
-    windowBar: $a
+    breadcrumbs: Oe,
+    button: _e,
+    buttonGroup: Ae,
+    card: je,
+    checkbox: De,
+    chip: Ge,
+    chipList: Ne,
+    countryFlag: qe,
+    datePicker: Ye,
+    drawer: At,
+    filters: jt,
+    formField: Dt,
+    iconButton: Gt,
+    input: Nt,
+    keyValueList: qt,
+    label: Yt,
+    layouts: Ut,
+    link: Zt,
+    loader: Vt,
+    menu: Jt,
+    midBar: Kt,
+    modal: Qt,
+    moreInfoIcon: oa,
+    popover: ra,
+    popupCard: ea,
+    profileIcon: ta,
+    progressBar: aa,
+    radio: na,
+    searchBar: ca,
+    section: ia,
+    select: la,
+    semanticButton: sa,
+    semanticContainer: da,
+    semanticIcon: ma,
+    sideBar: ba,
+    skeleton: ga,
+    slider: ua,
+    stepper: pa,
+    switchButton: Ca,
+    table: xa,
+    tableHeading: ha,
+    tabs: fa,
+    textButton: ya,
+    themeModeSwitch: va,
+    toast: wa,
+    toggleButton: Sa,
+    tooltip: $a,
+    treeView: Ra,
+    typography: za,
+    windowBar: Wa
   },
   globals: {
-    body: za,
-    scrollbar: Ra
+    body: Ba,
+    scrollbar: Pa
   }
 }, so = {
   transparent: "#00000000",
@@ -4000,7 +4135,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: so.primary200
     }
   }
-}, Wa = {
+}, Fa = {
   sizes: {
     L: {
       size: "3rem",
@@ -4053,7 +4188,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ba = {
+}, La = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${e.semantic.color.border.neutral400}`,
@@ -4075,7 +4210,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       accountNameColor: e.semantic.color.text.neutral950
     }
   }
-}, Pa = {
+}, Ma = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -4118,12 +4253,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: e.semantic.color.text.neutral800
     }
   }
-}, Fa = {
+}, Ha = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Pr = "1px", Ma = {
+}, Pr = "1px", Ta = {
   padding: `${e.core.space.space025} ${e.core.space.space050}`,
   gap: e.core.space.space025,
   borderRadius: "2px",
@@ -4186,7 +4321,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       iconColor: e.semantic.color.text.neutral500
     }
   }
-}, La = {
+}, Ia = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -4204,7 +4339,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   split: {
     minWidth: "0.8rem"
   }
-}, Ta = {
+}, Ea = {
   gap: e.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -4250,7 +4385,32 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   defaultItem: {
     gap: "0.4rem"
   }
-}, Ha = {
+}, Xa = {
+  gap: e.core.space.space100,
+  link: {
+    states: {
+      normal: {
+        textColor: e.semantic.color.text.secondary500
+      },
+      hover: {
+        textColor: e.semantic.color.text.secondary800
+      },
+      active: {
+        textColor: e.semantic.color.text.secondary800
+      },
+      disabled: {
+        textColor: e.semantic.color.text.secondary400
+      }
+    }
+  },
+  current: {
+    textColor: e.semantic.color.text.secondary800,
+    fontWeight: e.core.font.fontWeight.semiBold
+  },
+  separator: {
+    textColor: e.semantic.color.text.secondary500
+  }
+}, Oa = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -4388,7 +4548,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ia = {
+}, _a = {
   borderRadius: "0.4rem",
   border: `1px solid ${e.semantic.color.border.neutral600}`,
   fontSize: "1.4rem",
@@ -4431,13 +4591,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ea = {
+}, Aa = {
   width: "100%",
   height: "fit-content",
   bgColor: e.semantic.color.background.neutral100,
   shadow: e.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, Xa = {
+}, ja = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -4501,7 +4661,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Oa = {
+}, Da = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -4558,7 +4718,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, _a = {
+}, Ga = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -4576,13 +4736,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     gap: "0.4rem",
     padding: "1.2rem 1.6rem"
   }
-}, Aa = {
+}, Na = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: e.semantic.color.border.neutral500
-}, ja = {
+}, qa = {
   fontSize: e.core.font.fontSize.s14,
   fontWeight: e.core.font.fontWeight.normal,
   fontFamily: e.core.font.fontFamily.regular,
@@ -4646,7 +4806,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Da = {
+}, Ya = {
   shadow: `0 0 0.5px 1px ${e.semantic.color.border.neutral400}, -8px 0 16px 0 ${e.semantic.color.border.neutral100}`,
   bgColor: e.semantic.color.background.neutral200,
   sidePadding: "3.2rem",
@@ -4672,7 +4832,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: V(e.semantic.color.background.neutral200, 0.8)
   }
-}, Ga = {
+}, Ua = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${e.semantic.color.border.neutral400}`
@@ -4705,7 +4865,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       padding: "0.8rem 1.6rem"
     }
   }
-}, Na = {
+}, Za = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -4719,7 +4879,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: e.semantic.color.text.danger500
     }
   }
-}, qa = {
+}, Va = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -4763,7 +4923,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   },
   borderRadius: "0.4rem"
-}, Ya = {
+}, Ja = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -4856,11 +5016,38 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: e.semantic.color.text.danger500
     }
   }
-}, Ua = {
-  gap: "0.5rem",
-  margin: "0 0 0.2rem 0",
-  minHeight: "20px",
-  state: {
+}, Ka = {
+  container: {
+    borderRadius: "0.8rem",
+    backgroundColor: e.semantic.color.background.neutral100,
+    boxShadow: `0px 0px 0px 1px ${e.semantic.color.border.neutral600}`
+  },
+  headerRow: {
+    minHeight: "5.6rem",
+    bgColor: e.semantic.color.background.neutral100,
+    separator: {
+      color: e.semantic.color.border.neutral400,
+      width: "1px"
+    }
+  },
+  headerCell: {
+    padding: "1rem 1.2rem",
+    color: e.semantic.color.text.neutral800,
+    separator: {
+      color: e.semantic.color.border.neutral400,
+      width: "1px",
+      blockPadding: "1rem"
+    }
+  },
+  bodyCell: {
+    padding: "0.4rem 1.2rem",
+    color: e.semantic.color.text.neutral700
+  }
+}, Qa = {
+  gap: "0.5rem",
+  margin: "0 0 0.2rem 0",
+  minHeight: "20px",
+  state: {
     normal: {
       textColor: e.semantic.color.text.neutral800
     },
@@ -4877,7 +5064,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   required: {
     textColor: e.semantic.color.text.danger500
   }
-}, Za = {
+}, on = {
   flexGroup: {
     gap: {
       XXS: e.core.space.space025,
@@ -4913,7 +5100,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: e.core.space.space300
     }
   }
-}, Va = {
+}, rn = {
   variants: {
     block: {
       sizes: {
@@ -4983,7 +5170,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ja = {
+}, en = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -4999,11 +5186,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     },
     inverse: {
       bgColor: "rgba(255, 255, 255, 0.2)",
+      // todo: REPLACE ONCE ADDED TO COLOR PALETTE
       color: e.semantic.color.icon.neutral100,
       textColor: e.semantic.color.icon.neutral100
     }
   }
-}, Ka = {
+}, tn = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -5079,7 +5267,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Qa = {
+}, an = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -5091,7 +5279,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, on = {
+}, nn = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -5121,9 +5309,9 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: "rgba(0, 0, 0, 0.9)"
   }
-}, rn = {
+}, cn = {
   iconColor: e.semantic.color.icon.neutral700
-}, en = {
+}, ln = {
   bgColor: e.semantic.color.background.neutral200,
   shadow: `0 0 0.5px 1px ${e.semantic.color.border.neutral400}, 0 0 16px 8px ${e.semantic.color.border.neutral100}`,
   borderRadius: "0.8rem",
@@ -5136,7 +5324,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: `${e.semantic.color.border.neutral400} 0px 1.5px`
   }
-}, tn = {
+}, sn = {
   closeButton: {
     iconColor: e.semantic.color.icon.neutral700
   },
@@ -5155,7 +5343,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, an = {
+}, dn = {
   textColor: e.semantic.color.text.neutral100,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -5185,7 +5373,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     L: "4.4rem"
   },
   fontWeight: e.core.font.fontWeight.bold
-}, nn = {
+}, mn = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -5239,7 +5427,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   text: {
     color: e.semantic.color.text.neutral800
   }
-}, cn = {
+}, bn = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -5287,7 +5475,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ln = {
+}, gn = {
   bgColor: e.semantic.color.background.neutral100,
   shadow: `0px 0px 0px 1px ${e.semantic.color.border.neutral600}`,
   borderRadius: "0.8rem",
@@ -5309,7 +5497,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, sn = {
+}, un = {
   width: "100%",
   height: "fit-content",
   bgColor: e.semantic.color.background.neutral100,
@@ -5358,7 +5546,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     width: "1px",
     color: e.semantic.color.border.neutral600
   }
-}, dn = {
+}, pn = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -5475,7 +5663,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   textColor: {
     disabled: e.semantic.color.text.neutral500
   }
-}, G = (a, n) => `color-mix(in srgb-linear, ${a} ${n}%, transparent)`, mn = {
+}, G = (a, n) => `color-mix(in srgb-linear, ${a} ${n}%, transparent)`, Cn = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -5674,7 +5862,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, bn = {
+}, xn = {
   sizes: {
     M: {
       borderRadius: e.core.space.space100,
@@ -5714,7 +5902,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: e.semantic.color.border.attention300
     }
   }
-}, gn = {
+}, hn = {
   variants: {
     informative: {
       iconColor: e.semantic.color.icon.informative600
@@ -5732,7 +5920,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       iconColor: e.semantic.color.icon.success600
     }
   }
-}, un = {
+}, fn = {
   collapsed: {
     bgColor: e.semantic.color.background.neutral100,
     shadow: "none",
@@ -5839,7 +6027,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, pn = {
+}, yn = {
   card: {
     gap: "2.4rem",
     bgColor: e.semantic.color.background.neutral100,
@@ -5866,7 +6054,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, Cn = {
+}, kn = {
+  gap: e.core.space.space150,
+  controlsHeight: "2rem",
+  track: {
+    height: "0.4rem",
+    states: {
+      normal: {
+        bgColor: e.semantic.color.background.secondary800
+      },
+      disabled: {
+        bgColor: e.semantic.color.background.secondary800
+      }
+    }
+  },
+  range: {
+    states: {
+      normal: {
+        bgColor: e.semantic.color.background.primary400
+      },
+      disabled: {
+        bgColor: e.semantic.color.background.neutral900
+      }
+    }
+  },
+  thumb: {
+    width: "2.4rem",
+    height: "2.4rem",
+    borderWidth: "0.8rem",
+    borderRadius: "50%",
+    states: {
+      normal: {
+        bgColor: e.semantic.color.background.secondary0,
+        borderColor: e.semantic.color.border.primary400
+      },
+      disabled: {
+        bgColor: e.semantic.color.background.neutral600,
+        borderColor: e.semantic.color.border.neutral900
+      }
+    }
+  },
+  mark: {
+    width: "0.4rem",
+    height: "0.4rem",
+    rangeStates: {
+      inRange: {
+        normal: {
+          bgColor: e.semantic.color.background.primary100
+        },
+        disabled: {
+          bgColor: e.semantic.color.background.secondary600
+        }
+      },
+      outOfRange: {
+        normal: {
+          bgColor: e.semantic.color.background.secondary600
+        },
+        disabled: {
+          bgColor: e.semantic.color.background.secondary700
+        }
+      }
+    }
+  },
+  label: {
+    offset: e.core.space.space200
+  }
+}, vn = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -5913,7 +6166,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, xn = {
+}, wn = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -5965,7 +6218,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, hn = {
+}, Sn = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -6053,7 +6306,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: e.semantic.color.text.neutral700
     }
   }
-}, fn = {
+}, $n = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -6076,7 +6329,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, yn = {
+}, Rn = {
   variants: {
     default: {
       gap: "4rem",
@@ -6162,22 +6415,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Y = "transparent", kn = {
+}, Y = "transparent", zn = {
   layouts: {
     block: {
       sizes: {
-        M: {
+        medium: {
           height: "2.6rem",
           lineHeight: "1.9rem",
           gap: "0.2rem",
           padding: "0.4rem 0.6rem",
           borderRadius: "0.4rem"
+        },
+        small: {
+          height: "2.4rem",
+          lineHeight: "1.9rem",
+          gap: "0.2rem",
+          padding: "0.4rem 0.6rem",
+          borderRadius: "0.4rem"
         }
       }
     },
     inline: {
       sizes: {
-        M: {
+        medium: {
+          height: "unset",
+          lineHeight: "inherit",
+          gap: "0.2rem",
+          padding: "0",
+          borderRadius: "0"
+        },
+        small: {
           height: "unset",
           lineHeight: "inherit",
           gap: "0.2rem",
@@ -6262,7 +6529,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, vn = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209Z'%20fill='%23F1F5FA'/%3e%3cpath%20d='M3%2014C7.97056%2014%2012%209.97056%2012%205C12%203.20867%2011.4767%201.53958%2010.5745%200.137268C10.0633%200.0470571%209.53713%200%209%200C4.02944%200%200%204.02944%200%209C0%2010.7913%200.523342%2012.4604%201.42547%2013.8627C1.93672%2013.9529%202.46287%2014%203%2014Z'%20fill='%23BDD0E7'/%3e%3cpath%20d='M2%2013C6.97056%2013%2011%208.97056%2011%204C11%202.58941%2010.6755%201.25461%2010.097%200.0661876C9.73747%200.0224918%209.37136%200%209%200C4.02944%200%200%204.02944%200%209C0%2010.4106%200.324521%2011.7454%200.902969%2012.9338C1.26253%2012.9775%201.62864%2013%202%2013Z'%20fill='%231C324D'/%3e%3cpath%20d='M7.10199%203.62067C7.04777%203.47308%206.90723%203.375%206.75%203.375C6.59277%203.375%206.45223%203.47308%206.39801%203.62067L6.25631%204.00631L5.87067%204.14801C5.72308%204.20223%205.625%204.34277%205.625%204.5C5.625%204.65723%205.72308%204.79777%205.87067%204.85199L6.25631%204.99369L6.39801%205.37933C6.45223%205.52692%206.59277%205.625%206.75%205.625C6.90723%205.625%207.04777%205.52692%207.10199%205.37933L7.24369%204.99369L7.62933%204.85199C7.77692%204.79777%207.875%204.65723%207.875%204.5C7.875%204.34277%207.77692%204.20223%207.62933%204.14801L7.24369%204.00631L7.10199%203.62067Z'%20fill='%23F1F5FA'/%3e%3cpath%20d='M4.47699%205.87067C4.42277%205.72308%204.28223%205.625%204.125%205.625C3.96777%205.625%203.82723%205.72308%203.77301%205.87067L3.32902%207.07902L2.12067%207.52301C1.97308%207.57723%201.875%207.71777%201.875%207.875C1.875%208.03223%201.97308%208.17277%202.12067%208.22699L3.32902%208.67098L3.77301%209.87933C3.82723%2010.0269%203.96777%2010.125%204.125%2010.125C4.28223%2010.125%204.42277%2010.0269%204.47699%209.87933L4.92098%208.67098L6.12933%208.22699C6.27692%208.17277%206.375%208.03223%206.375%207.875C6.375%207.71777%206.27692%207.57723%206.12933%207.52301L4.92098%207.07902L4.47699%205.87067Z'%20fill='%23F1F5FA'/%3e%3c/svg%3e", wn = {
+}, Wn = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209Z'%20fill='%23F1F5FA'/%3e%3cpath%20d='M3%2014C7.97056%2014%2012%209.97056%2012%205C12%203.20867%2011.4767%201.53958%2010.5745%200.137268C10.0633%200.0470571%209.53713%200%209%200C4.02944%200%200%204.02944%200%209C0%2010.7913%200.523342%2012.4604%201.42547%2013.8627C1.93672%2013.9529%202.46287%2014%203%2014Z'%20fill='%23BDD0E7'/%3e%3cpath%20d='M2%2013C6.97056%2013%2011%208.97056%2011%204C11%202.58941%2010.6755%201.25461%2010.097%200.0661876C9.73747%200.0224918%209.37136%200%209%200C4.02944%200%200%204.02944%200%209C0%2010.4106%200.324521%2011.7454%200.902969%2012.9338C1.26253%2012.9775%201.62864%2013%202%2013Z'%20fill='%231C324D'/%3e%3cpath%20d='M7.10199%203.62067C7.04777%203.47308%206.90723%203.375%206.75%203.375C6.59277%203.375%206.45223%203.47308%206.39801%203.62067L6.25631%204.00631L5.87067%204.14801C5.72308%204.20223%205.625%204.34277%205.625%204.5C5.625%204.65723%205.72308%204.79777%205.87067%204.85199L6.25631%204.99369L6.39801%205.37933C6.45223%205.52692%206.59277%205.625%206.75%205.625C6.90723%205.625%207.04777%205.52692%207.10199%205.37933L7.24369%204.99369L7.62933%204.85199C7.77692%204.79777%207.875%204.65723%207.875%204.5C7.875%204.34277%207.77692%204.20223%207.62933%204.14801L7.24369%204.00631L7.10199%203.62067Z'%20fill='%23F1F5FA'/%3e%3cpath%20d='M4.47699%205.87067C4.42277%205.72308%204.28223%205.625%204.125%205.625C3.96777%205.625%203.82723%205.72308%203.77301%205.87067L3.32902%207.07902L2.12067%207.52301C1.97308%207.57723%201.875%207.71777%201.875%207.875C1.875%208.03223%201.97308%208.17277%202.12067%208.22699L3.32902%208.67098L3.77301%209.87933C3.82723%2010.0269%203.96777%2010.125%204.125%2010.125C4.28223%2010.125%204.42277%2010.0269%204.47699%209.87933L4.92098%208.67098L6.12933%208.22699C6.27692%208.17277%206.375%208.03223%206.375%207.875C6.375%207.71777%206.27692%207.57723%206.12933%207.52301L4.92098%207.07902L4.47699%205.87067Z'%20fill='%23F1F5FA'/%3e%3c/svg%3e", Bn = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -6271,12 +6538,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   borderColor: e.semantic.color.border.neutral600,
   bgColor: e.semantic.color.background.neutral300,
   thumb: {
-    icon: `url("${vn}")`,
+    icon: `url("${Wn}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, Sn = {
+}, Pn = {
   width: "clamp(400px, 33vw, 640px)",
   padding: "12px max(12px, calc(20 * (100vw / 1920)))",
   shadow: "0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05)",
@@ -6288,7 +6555,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   toaster: {
     gap: "2rem"
   }
-}, So = "transparent", $n = {
+}, So = "transparent", Fn = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -6343,7 +6610,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, zn = {
+}, Ln = {
   textColor: e.semantic.color.text.neutral800,
   bgColor: e.semantic.color.background.neutral200,
   shadow: `0 0 0.5px 1px ${e.semantic.color.border.neutral400}`,
@@ -6357,7 +6624,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: `${e.semantic.color.border.neutral400} 0px 1.5px`
   }
-}, Rn = {
+}, Mn = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -6370,7 +6637,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     iconColor: e.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, Wn = {
+}, Hn = {
   colors: {
     primary: e.semantic.color.text.neutral800,
     secondary: e.semantic.color.text.neutral700
@@ -6440,7 +6707,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       semiBold: e.core.font.fontWeight.semiBold
     }
   }
-}, Bn = {
+}, Tn = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -6492,13 +6759,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: e.semantic.color.border.neutral300
     }
   }
-}, Pn = {
+}, In = {
   bgColor: e.semantic.color.background.neutral100,
   textColor: e.semantic.color.background.neutral700,
   fontFamily: e.core.font.fontFamily.regular,
   fontSize: e.core.font.fontSize.s14,
   lineHeight: "1.4"
-}, Fn = {
+}, En = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: e.semantic.color.background.neutral100,
@@ -6507,69 +6774,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     bgColor: e.semantic.color.background.neutral400,
     borderRadius: "99rem"
   }
-}, Mn = {
+}, Xn = {
   name: "dark",
   mode: "dark",
   ...e,
   components: {
-    actionIconButton: Wa,
-    appBar: Ba,
-    appSelectionMenu: Pa,
-    autoComplete: Fa,
-    badge: Ma,
-    banner: La,
-    boxSelectionGroup: Ta,
-    button: Ha,
-    buttonGroup: Ia,
-    card: Ea,
-    checkbox: Xa,
-    chip: Oa,
-    chipList: _a,
-    countryFlag: Aa,
-    datePicker: ja,
-    drawer: Da,
-    filters: Ga,
-    formField: Na,
-    iconButton: qa,
-    input: Ya,
-    label: Ua,
-    layouts: Za,
-    link: Va,
-    loader: Ja,
-    menu: Ka,
-    midBar: Qa,
-    modal: on,
-    moreInfoIcon: rn,
-    popover: en,
-    popupCard: tn,
-    profileIcon: an,
-    progressBar: nn,
-    radio: cn,
-    searchBar: ln,
-    section: sn,
-    select: dn,
-    semanticButton: mn,
-    semanticContainer: bn,
-    semanticIcon: gn,
-    sideBar: un,
-    skeleton: pn,
-    stepper: Cn,
-    switchButton: xn,
-    table: hn,
-    tableHeading: fn,
-    tabs: yn,
-    textButton: kn,
-    themeModeSwitch: wn,
-    toast: Sn,
-    toggleButton: $n,
-    tooltip: zn,
-    treeView: Rn,
-    typography: Wn,
-    windowBar: Bn
+    actionIconButton: Fa,
+    appBar: La,
+    appSelectionMenu: Ma,
+    autoComplete: Ha,
+    badge: Ta,
+    banner: Ia,
+    boxSelectionGroup: Ea,
+    breadcrumbs: Xa,
+    button: Oa,
+    buttonGroup: _a,
+    card: Aa,
+    checkbox: ja,
+    chip: Da,
+    chipList: Ga,
+    countryFlag: Na,
+    datePicker: qa,
+    drawer: Ya,
+    filters: Ua,
+    formField: Za,
+    iconButton: Va,
+    input: Ja,
+    keyValueList: Ka,
+    label: Qa,
+    layouts: on,
+    link: rn,
+    loader: en,
+    menu: tn,
+    midBar: an,
+    modal: nn,
+    moreInfoIcon: cn,
+    popover: ln,
+    popupCard: sn,
+    profileIcon: dn,
+    progressBar: mn,
+    radio: bn,
+    searchBar: gn,
+    section: un,
+    select: pn,
+    semanticButton: Cn,
+    semanticContainer: xn,
+    semanticIcon: hn,
+    sideBar: fn,
+    skeleton: yn,
+    slider: kn,
+    stepper: vn,
+    switchButton: wn,
+    table: Sn,
+    tableHeading: $n,
+    tabs: Rn,
+    textButton: zn,
+    themeModeSwitch: Bn,
+    toast: Pn,
+    toggleButton: Fn,
+    tooltip: Ln,
+    treeView: Mn,
+    typography: Hn,
+    windowBar: Tn
   },
   globals: {
-    body: Pn,
-    scrollbar: Fn
+    body: In,
+    scrollbar: En
   }
 }, mo = {
   transparent: "#00000000",
@@ -6776,7 +7046,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: mo.primary600
     }
   }
-}, Ln = {
+}, On = {
   sizes: {
     L: {
       size: "3rem",
@@ -6829,7 +7099,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Tn = {
+}, _n = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${o.semantic.color.border.secondary200}`,
@@ -6851,7 +7121,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       accountNameColor: o.semantic.color.text.secondary950
     }
   }
-}, Hn = {
+}, An = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -6894,12 +7164,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: o.semantic.color.text.neutral800
     }
   }
-}, In = {
+}, jn = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Fr = "1px", En = {
+}, Fr = "1px", Dn = {
   padding: `${o.core.space.space025} ${o.core.space.space050}`,
   gap: o.core.space.space025,
   borderRadius: "2px",
@@ -6962,7 +7232,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       iconColor: o.semantic.color.text.secondary800
     }
   }
-}, Xn = {
+}, Gn = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -6980,7 +7250,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   split: {
     minWidth: "0.8rem"
   }
-}, On = {
+}, Nn = {
   gap: o.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -7035,7 +7305,32 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   defaultItem: {
     gap: "0.4rem"
   }
-}, _n = {
+}, qn = {
+  gap: o.core.space.space100,
+  link: {
+    states: {
+      normal: {
+        textColor: o.semantic.color.text.secondary600
+      },
+      hover: {
+        textColor: o.semantic.color.text.secondary950
+      },
+      active: {
+        textColor: o.semantic.color.text.secondary950
+      },
+      disabled: {
+        textColor: o.semantic.color.text.secondary500
+      }
+    }
+  },
+  current: {
+    textColor: o.semantic.color.text.secondary950,
+    fontWeight: o.core.font.fontWeight.semiBold
+  },
+  separator: {
+    textColor: o.semantic.color.text.secondary600
+  }
+}, Yn = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -7190,7 +7485,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, An = {
+}, Un = {
   borderRadius: "0.4rem",
   border: `1px solid ${o.semantic.color.border.transparent}`,
   fontSize: "1.4rem",
@@ -7233,13 +7528,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, jn = {
+}, Zn = {
   width: "100%",
   height: "fit-content",
   bgColor: o.semantic.color.background.neutral100,
   shadow: o.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, Dn = {
+}, Vn = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -7303,7 +7598,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Gn = {
+}, Jn = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -7360,7 +7655,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Nn = {
+}, Kn = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -7378,13 +7673,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     gap: "0.4rem",
     padding: "1.2rem 1.6rem"
   }
-}, qn = {
+}, Qn = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: o.semantic.color.border.secondary400
-}, Yn = {
+}, oc = {
   fontSize: o.core.font.fontSize.s14,
   fontWeight: o.core.font.fontWeight.normal,
   fontFamily: o.core.font.fontFamily.regular,
@@ -7448,7 +7743,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Un = {
+}, rc = {
   shadow: o.core.shadow.shadow500,
   bgColor: o.semantic.color.background.neutral0,
   sidePadding: "3.2rem",
@@ -7474,7 +7769,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: V(o.semantic.color.background.secondary0, 0.8)
   }
-}, Zn = {
+}, ec = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${o.semantic.color.border.secondary300}`
@@ -7507,7 +7802,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       padding: "0.8rem 1.6rem"
     }
   }
-}, Vn = {
+}, tc = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -7521,7 +7816,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: o.semantic.color.text.danger400
     }
   }
-}, Jn = {
+}, ac = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -7567,7 +7862,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   },
   borderRadius: "0.4rem"
-}, Kn = {
+}, nc = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -7661,7 +7956,34 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: o.semantic.color.text.secondary600
     }
   }
-}, Qn = {
+}, cc = {
+  container: {
+    borderRadius: "0.8rem",
+    backgroundColor: o.semantic.color.background.secondary0,
+    boxShadow: `0px 0px 0px 1px ${o.semantic.color.border.secondary300}`
+  },
+  headerRow: {
+    minHeight: "5.6rem",
+    bgColor: o.semantic.color.background.secondary0,
+    separator: {
+      color: o.semantic.color.border.secondary300,
+      width: "1px"
+    }
+  },
+  headerCell: {
+    padding: "1rem 1.2rem",
+    color: o.semantic.color.text.secondary950,
+    separator: {
+      color: o.semantic.color.border.secondary300,
+      width: "1px",
+      blockPadding: "1rem"
+    }
+  },
+  bodyCell: {
+    padding: "0.4rem 1.2rem",
+    color: o.semantic.color.text.secondary900
+  }
+}, ic = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -7682,7 +8004,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   required: {
     textColor: o.semantic.color.text.danger500
   }
-}, oc = {
+}, lc = {
   flexGroup: {
     gap: {
       XXS: o.core.space.space025,
@@ -7718,7 +8040,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: o.core.space.space300
     }
   }
-}, rc = {
+}, sc = {
   variants: {
     block: {
       sizes: {
@@ -7787,7 +8109,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ec = {
+}, dc = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -7807,7 +8129,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: o.semantic.color.icon.secondary0
     }
   }
-}, tc = {
+}, mc = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -7883,7 +8205,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ac = {
+}, bc = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -7895,7 +8217,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, nc = {
+}, gc = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -7925,9 +8247,9 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: V(o.semantic.color.background.secondary0, 0.8)
   }
-}, cc = {
+}, uc = {
   iconColor: o.semantic.color.icon.secondary600
-}, ic = {
+}, pc = {
   bgColor: o.semantic.color.background.neutral100,
   shadow: o.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -7940,7 +8262,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, lc = {
+}, Cc = {
   closeButton: {
     iconColor: o.semantic.color.icon.neutral700
   },
@@ -7959,7 +8281,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, sc = {
+}, xc = {
   textColor: o.semantic.color.text.secondary950,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -7989,7 +8311,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     L: "4.4rem"
   },
   fontWeight: o.core.font.fontWeight.bold
-}, dc = {
+}, hc = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -8043,7 +8365,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   text: {
     color: o.semantic.color.text.secondary950
   }
-}, mc = {
+}, fc = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -8091,7 +8413,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, bc = {
+}, yc = {
   bgColor: o.semantic.color.background.secondary0,
   shadow: `0px 0px 0px 1px ${o.semantic.color.border.secondary300}`,
   borderRadius: "0.8rem",
@@ -8113,7 +8435,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, gc = {
+}, kc = {
   width: "100%",
   height: "fit-content",
   bgColor: o.semantic.color.background.secondary0,
@@ -8162,7 +8484,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     width: "1px",
     color: o.semantic.color.border.secondary200
   }
-}, uc = {
+}, vc = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -8262,7 +8584,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, pc = {
+}, wc = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -8509,7 +8831,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Cc = {
+}, Sc = {
   sizes: {
     M: {
       borderRadius: o.core.space.space100,
@@ -8549,7 +8871,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: o.semantic.color.border.attention300
     }
   }
-}, xc = {
+}, $c = {
   variants: {
     informative: {
       iconColor: o.semantic.color.icon.informative600
@@ -8567,7 +8889,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       iconColor: o.semantic.color.icon.success600
     }
   }
-}, hc = {
+}, Rc = {
   collapsed: {
     bgColor: o.semantic.color.background.secondary50,
     shadow: "none",
@@ -8674,7 +8996,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, fc = {
+}, zc = {
   card: {
     gap: "2.4rem",
     bgColor: o.semantic.color.background.neutral100,
@@ -8701,7 +9023,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, yc = {
+}, Wc = {
+  gap: o.core.space.space150,
+  controlsHeight: "2rem",
+  track: {
+    height: "0.4rem",
+    states: {
+      normal: {
+        bgColor: o.semantic.color.background.secondary300
+      },
+      disabled: {
+        bgColor: o.semantic.color.background.secondary300
+      }
+    }
+  },
+  range: {
+    states: {
+      normal: {
+        bgColor: o.semantic.color.background.primary400
+      },
+      disabled: {
+        bgColor: o.semantic.color.background.neutral500
+      }
+    }
+  },
+  thumb: {
+    width: "2.4rem",
+    height: "2.4rem",
+    borderWidth: "0.8rem",
+    borderRadius: "50%",
+    states: {
+      normal: {
+        bgColor: o.semantic.color.background.secondary0,
+        borderColor: o.semantic.color.background.primary400
+      },
+      disabled: {
+        bgColor: o.semantic.color.background.secondary0,
+        borderColor: o.semantic.color.background.neutral500
+      }
+    }
+  },
+  mark: {
+    width: "0.4rem",
+    height: "0.4rem",
+    rangeStates: {
+      inRange: {
+        normal: {
+          bgColor: o.semantic.color.background.primary100
+        },
+        disabled: {
+          bgColor: o.semantic.color.background.secondary500
+        }
+      },
+      outOfRange: {
+        normal: {
+          bgColor: o.semantic.color.background.secondary500
+        },
+        disabled: {
+          bgColor: o.semantic.color.background.secondary500
+        }
+      }
+    }
+  },
+  label: {
+    offset: o.core.space.space200
+  }
+}, Bc = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -8748,7 +9135,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, kc = {
+}, Pc = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -8800,7 +9187,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, vc = {
+}, Fc = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -8888,7 +9275,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: o.semantic.color.text.secondary950
     }
   }
-}, wc = {
+}, Lc = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -8911,7 +9298,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, Sc = {
+}, Mc = {
   variants: {
     default: {
       gap: "4rem",
@@ -8994,22 +9381,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, X = "transparent", $c = {
+}, X = "transparent", Hc = {
   layouts: {
     block: {
       sizes: {
-        M: {
+        medium: {
           height: "2.6rem",
           lineHeight: "1.9rem",
           gap: "0.2rem",
           padding: "0.4rem 0.6rem",
           borderRadius: "0.4rem"
+        },
+        small: {
+          height: "2.4rem",
+          lineHeight: "1.9rem",
+          gap: "0.2rem",
+          padding: "0.4rem 0.6rem",
+          borderRadius: "0.4rem"
         }
       }
     },
     inline: {
       sizes: {
-        M: {
+        medium: {
+          height: "unset",
+          lineHeight: "inherit",
+          gap: "0.2rem",
+          padding: "0",
+          borderRadius: "0"
+        },
+        small: {
           height: "unset",
           lineHeight: "inherit",
           gap: "0.2rem",
@@ -9101,7 +9502,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, zc = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_20208_3890)'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='%23F9FAFA'%20/%3e%3cpath%20d='M13.0002%2010C13.0002%208.34315%2011.6571%207%2010.0002%207C8.34339%207%207.00024%208.34315%207.00024%2010C7.00024%2011.6569%208.34339%2013%2010.0002%2013C11.6571%2013%2013.0002%2011.6569%2013.0002%2010ZM14.0002%2010C14.0002%2012.2091%2012.2094%2014%2010.0002%2014C7.79111%2014%206.00024%2012.2091%206.00024%2010C6.00024%207.79086%207.79111%206%2010.0002%206C12.2094%206%2014.0002%207.79086%2014.0002%2010Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M16.9998%209.5L17.1013%209.50977C17.329%209.55649%2017.4998%209.75847%2017.4998%2010C17.4998%2010.2415%2017.329%2010.4435%2017.1013%2010.4902L16.9998%2010.5H15.5457C15.2695%2010.5%2015.0457%2010.2761%2015.0457%2010C15.0457%209.72386%2015.2695%209.5%2015.5457%209.5H16.9998Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M4.50024%209.5L4.60083%209.50977C4.82874%209.55634%205.00024%209.75833%205.00024%2010C5.00024%2010.2417%204.82874%2010.4437%204.60083%2010.4902L4.50024%2010.5H3.00024C2.7241%2010.5%202.50024%2010.2761%202.50024%2010C2.50024%209.72386%202.7241%209.5%203.00024%209.5H4.50024Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M10.5002%2017L10.4905%2017.1006C10.444%2017.3286%2010.242%2017.5%2010.0002%2017.5C9.75852%2017.5%209.55653%2017.3286%209.51001%2017.1006L9.50024%2017V15.5C9.50024%2015.2239%209.7241%2015%2010.0002%2015C10.2764%2015%2010.5002%2015.2239%2010.5002%2015.5V17Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M10.5002%204.5L10.4905%204.60059C10.444%204.82855%2010.242%205%2010.0002%205C9.75853%205%209.55654%204.82855%209.51001%204.60059L9.50024%204.5V3C9.50024%202.72386%209.7241%202.5%2010.0002%202.5C10.2764%202.5%2010.5002%202.72386%2010.5002%203V4.5Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M14.6466%204.64655L14.7246%204.58233C14.9187%204.45395%2015.1827%204.4756%2015.3537%204.64655C15.5246%204.81751%2015.5463%205.08152%2015.4179%205.27563L15.3537%205.35366L14.3538%206.35355C14.1585%206.54882%2013.842%206.54882%2013.6467%206.35355C13.4514%206.15829%2013.4514%205.84171%2013.6467%205.64645L14.6466%204.64655Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M5.64658%2013.6466L5.72461%2013.5823C5.91872%2013.4539%206.18274%2013.4756%206.35369%2013.6466C6.52464%2013.8175%206.5463%2014.0815%206.41791%2014.2756L6.35369%2014.3537L5.3538%2015.3536C5.15854%2015.5488%204.84195%2015.5488%204.64669%2015.3536C4.45143%2015.1583%204.45143%2014.8417%204.64669%2014.6464L5.64658%2013.6466Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M15.3537%2014.6463L15.4179%2014.7244C15.5463%2014.9185%2015.5246%2015.1825%2015.3537%2015.3534C15.1827%2015.5244%2014.9187%2015.5461%2014.7246%2015.4177L14.6466%2015.3534L13.6467%2014.3536C13.4514%2014.1583%2013.4514%2013.8417%2013.6467%2013.6464C13.842%2013.4512%2014.1585%2013.4512%2014.3538%2013.6464L15.3537%2014.6463Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M6.35369%205.64634L6.41791%205.72437C6.5463%205.91848%206.52464%206.18249%206.35369%206.35345C6.18274%206.5244%205.91872%206.54605%205.72461%206.41767L5.64658%206.35345L4.64669%205.35355C4.45143%205.15829%204.45143%204.84171%204.64669%204.64645C4.84195%204.45118%205.15854%204.45118%205.3538%204.64645L6.35369%205.64634Z'%20fill='%23091A23'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_20208_3890'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='white'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", Rc = {
+}, Tc = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_20208_3890)'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='%23F9FAFA'%20/%3e%3cpath%20d='M13.0002%2010C13.0002%208.34315%2011.6571%207%2010.0002%207C8.34339%207%207.00024%208.34315%207.00024%2010C7.00024%2011.6569%208.34339%2013%2010.0002%2013C11.6571%2013%2013.0002%2011.6569%2013.0002%2010ZM14.0002%2010C14.0002%2012.2091%2012.2094%2014%2010.0002%2014C7.79111%2014%206.00024%2012.2091%206.00024%2010C6.00024%207.79086%207.79111%206%2010.0002%206C12.2094%206%2014.0002%207.79086%2014.0002%2010Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M16.9998%209.5L17.1013%209.50977C17.329%209.55649%2017.4998%209.75847%2017.4998%2010C17.4998%2010.2415%2017.329%2010.4435%2017.1013%2010.4902L16.9998%2010.5H15.5457C15.2695%2010.5%2015.0457%2010.2761%2015.0457%2010C15.0457%209.72386%2015.2695%209.5%2015.5457%209.5H16.9998Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M4.50024%209.5L4.60083%209.50977C4.82874%209.55634%205.00024%209.75833%205.00024%2010C5.00024%2010.2417%204.82874%2010.4437%204.60083%2010.4902L4.50024%2010.5H3.00024C2.7241%2010.5%202.50024%2010.2761%202.50024%2010C2.50024%209.72386%202.7241%209.5%203.00024%209.5H4.50024Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M10.5002%2017L10.4905%2017.1006C10.444%2017.3286%2010.242%2017.5%2010.0002%2017.5C9.75852%2017.5%209.55653%2017.3286%209.51001%2017.1006L9.50024%2017V15.5C9.50024%2015.2239%209.7241%2015%2010.0002%2015C10.2764%2015%2010.5002%2015.2239%2010.5002%2015.5V17Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M10.5002%204.5L10.4905%204.60059C10.444%204.82855%2010.242%205%2010.0002%205C9.75853%205%209.55654%204.82855%209.51001%204.60059L9.50024%204.5V3C9.50024%202.72386%209.7241%202.5%2010.0002%202.5C10.2764%202.5%2010.5002%202.72386%2010.5002%203V4.5Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M14.6466%204.64655L14.7246%204.58233C14.9187%204.45395%2015.1827%204.4756%2015.3537%204.64655C15.5246%204.81751%2015.5463%205.08152%2015.4179%205.27563L15.3537%205.35366L14.3538%206.35355C14.1585%206.54882%2013.842%206.54882%2013.6467%206.35355C13.4514%206.15829%2013.4514%205.84171%2013.6467%205.64645L14.6466%204.64655Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M5.64658%2013.6466L5.72461%2013.5823C5.91872%2013.4539%206.18274%2013.4756%206.35369%2013.6466C6.52464%2013.8175%206.5463%2014.0815%206.41791%2014.2756L6.35369%2014.3537L5.3538%2015.3536C5.15854%2015.5488%204.84195%2015.5488%204.64669%2015.3536C4.45143%2015.1583%204.45143%2014.8417%204.64669%2014.6464L5.64658%2013.6466Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M15.3537%2014.6463L15.4179%2014.7244C15.5463%2014.9185%2015.5246%2015.1825%2015.3537%2015.3534C15.1827%2015.5244%2014.9187%2015.5461%2014.7246%2015.4177L14.6466%2015.3534L13.6467%2014.3536C13.4514%2014.1583%2013.4514%2013.8417%2013.6467%2013.6464C13.842%2013.4512%2014.1585%2013.4512%2014.3538%2013.6464L15.3537%2014.6463Z'%20fill='%23091A23'%20/%3e%3cpath%20d='M6.35369%205.64634L6.41791%205.72437C6.5463%205.91848%206.52464%206.18249%206.35369%206.35345C6.18274%206.5244%205.91872%206.54605%205.72461%206.41767L5.64658%206.35345L4.64669%205.35355C4.45143%205.15829%204.45143%204.84171%204.64669%204.64645C4.84195%204.45118%205.15854%204.45118%205.3538%204.64645L6.35369%205.64634Z'%20fill='%23091A23'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_20208_3890'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='white'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", Ic = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -9110,12 +9511,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   borderColor: o.semantic.color.border.transparent,
   bgColor: o.semantic.color.background.secondary200,
   thumb: {
-    icon: `url("${zc}")`,
+    icon: `url("${Tc}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, Wc = {
+}, Ec = {
   width: "clamp(400px, 33vw, 640px)",
   padding: "12px max(12px, calc(20 * (100vw / 1920)))",
   shadow: "0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05)",
@@ -9127,7 +9528,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   toaster: {
     gap: "2rem"
   }
-}, $o = "transparent", Bc = {
+}, $o = "transparent", Xc = {
   gap: "0.4rem",
   height: "3rem",
   lineHeight: "1.9rem",
@@ -9180,7 +9581,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, Pc = {
+}, Oc = {
   textColor: o.semantic.color.text.secondary950,
   bgColor: o.semantic.color.background.secondary0,
   shadow: o.core.shadow.shadow400,
@@ -9194,7 +9595,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, Fc = {
+}, _c = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -9207,10 +9608,10 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     iconColor: o.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, Mc = {
+}, Ac = {
   colors: {
-    primary: o.semantic.color.text.secondary990,
-    secondary: o.semantic.color.text.secondary500
+    primary: o.semantic.color.text.secondary950,
+    secondary: o.semantic.color.text.secondary700
   },
   heading: {
     fontFamily: o.core.font.fontFamily.regular,
@@ -9277,7 +9678,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       semiBold: o.core.font.fontWeight.semiBold
     }
   }
-}, Lc = {
+}, jc = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -9329,13 +9730,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: o.semantic.color.border.neutral300
     }
   }
-}, Tc = {
+}, Dc = {
   bgColor: o.semantic.color.background.secondary0,
   textColor: o.semantic.color.background.secondary990,
   fontFamily: o.core.font.fontFamily.regular,
   fontSize: o.core.font.fontSize.s14,
   lineHeight: "1.4"
-}, Hc = {
+}, Gc = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: o.semantic.color.background.secondary100,
@@ -9344,69 +9745,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     bgColor: o.semantic.color.background.secondary600,
     borderRadius: "99rem"
   }
-}, Ic = {
+}, Nc = {
   name: "light-2",
   mode: "light",
   ...o,
   components: {
-    actionIconButton: Ln,
-    appBar: Tn,
-    appSelectionMenu: Hn,
-    autoComplete: In,
-    badge: En,
-    banner: Xn,
-    boxSelectionGroup: On,
-    button: _n,
-    buttonGroup: An,
-    card: jn,
-    checkbox: Dn,
-    chip: Gn,
-    chipList: Nn,
-    countryFlag: qn,
-    datePicker: Yn,
-    drawer: Un,
-    filters: Zn,
-    formField: Vn,
-    iconButton: Jn,
-    input: Kn,
-    label: Qn,
-    layouts: oc,
-    link: rc,
-    loader: ec,
-    menu: tc,
-    midBar: ac,
-    modal: nc,
-    moreInfoIcon: cc,
-    popover: ic,
-    popupCard: lc,
-    profileIcon: sc,
-    progressBar: dc,
-    radio: mc,
-    searchBar: bc,
-    section: gc,
-    select: uc,
-    semanticButton: pc,
-    semanticContainer: Cc,
-    semanticIcon: xc,
-    sideBar: hc,
-    skeleton: fc,
-    stepper: yc,
-    switchButton: kc,
-    table: vc,
-    tableHeading: wc,
-    tabs: Sc,
-    textButton: $c,
-    themeModeSwitch: Rc,
-    toast: Wc,
-    toggleButton: Bc,
-    tooltip: Pc,
-    treeView: Fc,
-    typography: Mc,
-    windowBar: Lc
+    actionIconButton: On,
+    appBar: _n,
+    appSelectionMenu: An,
+    autoComplete: jn,
+    badge: Dn,
+    banner: Gn,
+    boxSelectionGroup: Nn,
+    breadcrumbs: qn,
+    button: Yn,
+    buttonGroup: Un,
+    card: Zn,
+    checkbox: Vn,
+    chip: Jn,
+    chipList: Kn,
+    countryFlag: Qn,
+    datePicker: oc,
+    drawer: rc,
+    filters: ec,
+    formField: tc,
+    iconButton: ac,
+    input: nc,
+    keyValueList: cc,
+    label: ic,
+    layouts: lc,
+    link: sc,
+    loader: dc,
+    menu: mc,
+    midBar: bc,
+    modal: gc,
+    moreInfoIcon: uc,
+    popover: pc,
+    popupCard: Cc,
+    profileIcon: xc,
+    progressBar: hc,
+    radio: fc,
+    searchBar: yc,
+    section: kc,
+    select: vc,
+    semanticButton: wc,
+    semanticContainer: Sc,
+    semanticIcon: $c,
+    sideBar: Rc,
+    skeleton: zc,
+    slider: Wc,
+    stepper: Bc,
+    switchButton: Pc,
+    table: Fc,
+    tableHeading: Lc,
+    tabs: Mc,
+    textButton: Hc,
+    themeModeSwitch: Ic,
+    toast: Ec,
+    toggleButton: Xc,
+    tooltip: Oc,
+    treeView: _c,
+    typography: Ac,
+    windowBar: jc
   },
   globals: {
-    body: Tc,
-    scrollbar: Hc
+    body: Dc,
+    scrollbar: Gc
   }
 }, bo = {
   transparent: "#00000000",
@@ -9613,7 +10017,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: bo.primary200
     }
   }
-}, Ec = {
+}, qc = {
   sizes: {
     L: {
       size: "3rem",
@@ -9666,7 +10070,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Xc = {
+}, Yc = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${r.semantic.color.border.secondary800}`,
@@ -9688,7 +10092,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       accountNameColor: r.semantic.color.text.secondary950
     }
   }
-}, Oc = {
+}, Uc = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -9731,17 +10135,17 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: r.semantic.color.text.neutral800
     }
   }
-}, _c = {
+}, Zc = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Mr = "1px", Ac = {
+}, Lr = "1px", Vc = {
   padding: `${r.core.space.space025} ${r.core.space.space050}`,
   gap: r.core.space.space025,
   borderRadius: "2px",
-  height: `calc(${r.core.space.space200} + ${Mr} * 2)`,
-  borderWidth: Mr,
+  height: `calc(${r.core.space.space200} + ${Lr} * 2)`,
+  borderWidth: Lr,
   borderStyle: "solid",
   variants: {
     white: {
@@ -9799,7 +10203,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       iconColor: r.semantic.color.text.secondary700
     }
   }
-}, jc = {
+}, Jc = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -9817,7 +10221,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   split: {
     minWidth: "0.8rem"
   }
-}, Dc = {
+}, Kc = {
   gap: r.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -9872,7 +10276,32 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   defaultItem: {
     gap: "0.4rem"
   }
-}, Gc = {
+}, Qc = {
+  gap: r.core.space.space100,
+  link: {
+    states: {
+      normal: {
+        textColor: r.semantic.color.text.secondary500
+      },
+      hover: {
+        textColor: r.semantic.color.text.secondary200
+      },
+      active: {
+        textColor: r.semantic.color.text.secondary200
+      },
+      disabled: {
+        textColor: r.semantic.color.text.secondary600
+      }
+    }
+  },
+  current: {
+    textColor: r.semantic.color.text.secondary200,
+    fontWeight: r.core.font.fontWeight.semiBold
+  },
+  separator: {
+    textColor: r.semantic.color.text.secondary500
+  }
+}, o0 = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -10027,7 +10456,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Nc = {
+}, r0 = {
   borderRadius: "0.4rem",
   border: `1px solid ${r.semantic.color.border.transparent}`,
   fontSize: "1.4rem",
@@ -10070,13 +10499,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, qc = {
+}, e0 = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.secondary900,
   shadow: r.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, Yc = {
+}, t0 = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -10140,7 +10569,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Uc = {
+}, a0 = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -10197,7 +10626,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Zc = {
+}, n0 = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -10215,13 +10644,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     gap: "0.4rem",
     padding: "1.2rem 1.6rem"
   }
-}, Vc = {
+}, c0 = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: r.semantic.color.border.secondary700
-}, Jc = {
+}, i0 = {
   fontSize: r.core.font.fontSize.s14,
   fontWeight: r.core.font.fontWeight.normal,
   fontFamily: r.core.font.fontFamily.regular,
@@ -10285,7 +10714,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Kc = {
+}, l0 = {
   shadow: r.core.shadow.shadow500,
   bgColor: r.semantic.color.background.secondary900,
   sidePadding: "3.2rem",
@@ -10311,7 +10740,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: V(r.semantic.color.background.secondary990, 0.8)
   }
-}, Qc = {
+}, s0 = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${r.semantic.color.border.secondary800}`
@@ -10344,7 +10773,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       padding: "0.8rem 1.6rem"
     }
   }
-}, o0 = {
+}, d0 = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -10358,7 +10787,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: r.semantic.color.text.danger400
     }
   }
-}, r0 = {
+}, m0 = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -10404,7 +10833,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   },
   borderRadius: "0.4rem"
-}, e0 = {
+}, b0 = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -10498,7 +10927,34 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: r.semantic.color.text.secondary500
     }
   }
-}, t0 = {
+}, g0 = {
+  container: {
+    borderRadius: "0.8rem",
+    backgroundColor: r.semantic.color.background.secondary950,
+    boxShadow: `0px 0px 0px 1px ${r.semantic.color.border.secondary800}`
+  },
+  headerRow: {
+    minHeight: "5.6rem",
+    bgColor: r.semantic.color.background.secondary950,
+    separator: {
+      color: r.semantic.color.border.secondary800,
+      width: "1px"
+    }
+  },
+  headerCell: {
+    padding: "1rem 1.2rem",
+    color: r.semantic.color.text.secondary200,
+    separator: {
+      color: r.semantic.color.border.secondary800,
+      width: "1px",
+      blockPadding: "1rem"
+    }
+  },
+  bodyCell: {
+    padding: "0.4rem 1.2rem",
+    color: r.semantic.color.text.secondary300
+  }
+}, u0 = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -10519,7 +10975,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   required: {
     textColor: r.semantic.color.text.danger500
   }
-}, a0 = {
+}, p0 = {
   flexGroup: {
     gap: {
       XXS: r.core.space.space025,
@@ -10555,7 +11011,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: r.core.space.space300
     }
   }
-}, n0 = {
+}, C0 = {
   variants: {
     block: {
       sizes: {
@@ -10624,7 +11080,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, c0 = {
+}, x0 = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -10644,7 +11100,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: r.semantic.color.icon.secondary950
     }
   }
-}, i0 = {
+}, h0 = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -10709,7 +11165,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
           textColor: r.semantic.color.text.danger400
         },
         hover: {
-          bgColor: r.semantic.color.background.danger400
+          bgColor: r.semantic.color.background.danger900
         },
         selected: {
           textColor: r.semantic.color.text.danger400
@@ -10720,7 +11176,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, l0 = {
+}, f0 = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -10732,7 +11188,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, s0 = {
+}, y0 = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -10762,9 +11218,9 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   overlay: {
     bgColor: V(r.semantic.color.background.secondary990, 0.8)
   }
-}, d0 = {
+}, k0 = {
   iconColor: r.semantic.color.icon.secondary500
-}, m0 = {
+}, v0 = {
   bgColor: r.semantic.color.background.secondary900,
   shadow: r.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -10777,7 +11233,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: r.core.shadow.shadow400
   }
-}, b0 = {
+}, w0 = {
   closeButton: {
     iconColor: r.semantic.color.icon.neutral700
   },
@@ -10796,7 +11252,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, g0 = {
+}, S0 = {
   textColor: r.semantic.color.text.secondary950,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -10826,7 +11282,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     L: "4.4rem"
   },
   fontWeight: r.core.font.fontWeight.bold
-}, u0 = {
+}, $0 = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -10880,7 +11336,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   text: {
     color: r.semantic.color.text.secondary200
   }
-}, p0 = {
+}, R0 = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -10928,7 +11384,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, C0 = {
+}, z0 = {
   bgColor: r.semantic.color.background.secondary950,
   shadow: `0px 0px 0px 1px ${r.semantic.color.border.secondary800}`,
   borderRadius: "0.8rem",
@@ -10950,7 +11406,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, x0 = {
+}, W0 = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.secondary950,
@@ -10999,7 +11455,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     width: "1px",
     color: r.semantic.color.border.secondary800
   }
-}, h0 = {
+}, B0 = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -11100,7 +11556,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, f0 = {
+}, P0 = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -11347,7 +11803,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, y0 = {
+}, F0 = {
   sizes: {
     M: {
       borderRadius: r.core.space.space100,
@@ -11387,7 +11843,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: r.semantic.color.border.attention600
     }
   }
-}, k0 = {
+}, L0 = {
   variants: {
     informative: {
       iconColor: r.semantic.color.icon.informative600
@@ -11405,7 +11861,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       iconColor: r.semantic.color.icon.success600
     }
   }
-}, v0 = {
+}, M0 = {
   collapsed: {
     bgColor: r.semantic.color.background.secondary950,
     shadow: "none",
@@ -11512,7 +11968,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, w0 = {
+}, H0 = {
   card: {
     gap: "2.4rem",
     bgColor: r.semantic.color.background.neutral100,
@@ -11539,7 +11995,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, S0 = {
+}, T0 = {
+  gap: r.core.space.space150,
+  controlsHeight: "2rem",
+  track: {
+    height: "0.4rem",
+    states: {
+      normal: {
+        bgColor: r.semantic.color.background.secondary800
+      },
+      disabled: {
+        bgColor: r.semantic.color.background.secondary800
+      }
+    }
+  },
+  range: {
+    states: {
+      normal: {
+        bgColor: r.semantic.color.background.primary400
+      },
+      disabled: {
+        bgColor: r.semantic.color.background.neutral900
+      }
+    }
+  },
+  thumb: {
+    width: "2.4rem",
+    height: "2.4rem",
+    borderWidth: "0.8rem",
+    borderRadius: "50%",
+    states: {
+      normal: {
+        bgColor: r.semantic.color.background.secondary0,
+        borderColor: r.semantic.color.border.primary400
+      },
+      disabled: {
+        bgColor: r.semantic.color.background.neutral600,
+        borderColor: r.semantic.color.border.neutral900
+      }
+    }
+  },
+  mark: {
+    width: "0.4rem",
+    height: "0.4rem",
+    rangeStates: {
+      inRange: {
+        normal: {
+          bgColor: r.semantic.color.background.primary100
+        },
+        disabled: {
+          bgColor: r.semantic.color.background.secondary600
+        }
+      },
+      outOfRange: {
+        normal: {
+          bgColor: r.semantic.color.background.secondary600
+        },
+        disabled: {
+          bgColor: r.semantic.color.background.secondary700
+        }
+      }
+    }
+  },
+  label: {
+    offset: r.core.space.space200
+  }
+}, I0 = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -11586,7 +12107,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, $0 = {
+}, E0 = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -11638,7 +12159,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, z0 = {
+}, X0 = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -11726,7 +12247,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: r.semantic.color.text.secondary200
     }
   }
-}, R0 = {
+}, O0 = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -11749,7 +12270,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, W0 = {
+}, _0 = {
   variants: {
     default: {
       gap: "4rem",
@@ -11835,22 +12356,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, T = "transparent", B0 = {
+}, H = "transparent", A0 = {
   layouts: {
     block: {
       sizes: {
-        M: {
+        medium: {
           height: "2.6rem",
           lineHeight: "1.9rem",
           gap: "0.2rem",
           padding: "0.4rem 0.6rem",
           borderRadius: "0.4rem"
+        },
+        small: {
+          height: "2.4rem",
+          lineHeight: "1.9rem",
+          gap: "0.2rem",
+          padding: "0.4rem 0.6rem",
+          borderRadius: "0.4rem"
         }
       }
     },
     inline: {
       sizes: {
-        M: {
+        medium: {
+          height: "unset",
+          lineHeight: "inherit",
+          gap: "0.2rem",
+          padding: "0",
+          borderRadius: "0"
+        },
+        small: {
           height: "unset",
           lineHeight: "inherit",
           gap: "0.2rem",
@@ -11864,7 +12399,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     primary: {
       states: {
         normal: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.primary300
         },
         hover: {
@@ -11872,11 +12407,11 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
           textColor: r.semantic.color.background.primary200
         },
         active: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.primary300
         },
         disabled: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.secondary600
         }
       }
@@ -11884,7 +12419,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     destructive: {
       states: {
         normal: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.danger400
         },
         hover: {
@@ -11892,11 +12427,11 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
           textColor: r.semantic.color.text.danger300
         },
         active: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.danger400
         },
         disabled: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.secondary600
         }
       }
@@ -11904,19 +12439,19 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     "primary-inline": {
       states: {
         normal: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.primary300
         },
         hover: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.primary200
         },
         active: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.primary300
         },
         disabled: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.secondary600
         }
       }
@@ -11924,25 +12459,25 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     "destructive-inline": {
       states: {
         normal: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.danger400
         },
         hover: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.danger300
         },
         active: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.danger400
         },
         disabled: {
-          bgColor: T,
+          bgColor: H,
           textColor: r.semantic.color.text.secondary600
         }
       }
     }
   }
-}, P0 = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_20208_5211)'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='%23091A23'%20/%3e%3cpath%20d='M8.44141%207.17676C8.44141%206.18781%208.77004%205.276%209.32227%204.54297C6.60456%204.87704%204.50004%207.19197%204.5%2010C4.5%2013.0376%206.96241%2015.5%2010%2015.5C12.8087%2015.5%2015.1238%2013.3945%2015.457%2010.6758C14.7923%2011.1774%2013.9809%2011.4954%2013.0967%2011.5498L12.8242%2011.5586C10.4797%2011.5586%208.56481%209.71782%208.44727%207.40234L8.44141%207.17676ZM9.44629%207.35059C9.53691%209.1376%2011.0144%2010.5586%2012.8242%2010.5586L13.0342%2010.5518C14.0764%2010.4877%2014.9905%209.951%2015.5674%209.15137L15.6172%209.09277C15.7426%208.96585%2015.9285%208.91385%2016.1045%208.96191C16.3056%209.01686%2016.4516%209.19088%2016.4707%209.39844C16.4886%209.59298%2016.5%209.79401%2016.5%2010C16.5%2013.5899%2013.5899%2016.5%2010%2016.5C6.41013%2016.5%203.5%2013.5899%203.5%2010C3.50005%206.41017%206.41015%203.50001%2010%203.5C10.2042%203.5%2010.4047%203.51036%2010.6006%203.52832L10.6768%203.54102C10.8498%203.58449%2010.989%203.7186%2011.0371%203.89453C11.092%204.09552%2011.0165%204.30959%2010.8477%204.43164C9.99518%205.0468%209.44141%206.04731%209.44141%207.17676L9.44629%207.35059Z'%20fill='%23E8EBEC'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_20208_5211'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='white'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", F0 = {
+}, j0 = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_20208_5211)'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='%23091A23'%20/%3e%3cpath%20d='M8.44141%207.17676C8.44141%206.18781%208.77004%205.276%209.32227%204.54297C6.60456%204.87704%204.50004%207.19197%204.5%2010C4.5%2013.0376%206.96241%2015.5%2010%2015.5C12.8087%2015.5%2015.1238%2013.3945%2015.457%2010.6758C14.7923%2011.1774%2013.9809%2011.4954%2013.0967%2011.5498L12.8242%2011.5586C10.4797%2011.5586%208.56481%209.71782%208.44727%207.40234L8.44141%207.17676ZM9.44629%207.35059C9.53691%209.1376%2011.0144%2010.5586%2012.8242%2010.5586L13.0342%2010.5518C14.0764%2010.4877%2014.9905%209.951%2015.5674%209.15137L15.6172%209.09277C15.7426%208.96585%2015.9285%208.91385%2016.1045%208.96191C16.3056%209.01686%2016.4516%209.19088%2016.4707%209.39844C16.4886%209.59298%2016.5%209.79401%2016.5%2010C16.5%2013.5899%2013.5899%2016.5%2010%2016.5C6.41013%2016.5%203.5%2013.5899%203.5%2010C3.50005%206.41017%206.41015%203.50001%2010%203.5C10.2042%203.5%2010.4047%203.51036%2010.6006%203.52832L10.6768%203.54102C10.8498%203.58449%2010.989%203.7186%2011.0371%203.89453C11.092%204.09552%2011.0165%204.30959%2010.8477%204.43164C9.99518%205.0468%209.44141%206.04731%209.44141%207.17676L9.44629%207.35059Z'%20fill='%23E8EBEC'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_20208_5211'%3e%3crect%20width='20'%20height='20'%20rx='10'%20fill='white'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", D0 = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -11951,12 +12486,12 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   borderColor: r.semantic.color.border.transparent,
   bgColor: r.semantic.color.background.secondary700,
   thumb: {
-    icon: `url("${P0}")`,
+    icon: `url("${j0}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, M0 = {
+}, G0 = {
   width: "clamp(400px, 33vw, 640px)",
   padding: "12px max(12px, calc(20 * (100vw / 1920)))",
   shadow: "0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05)",
@@ -11968,7 +12503,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   toaster: {
     gap: "2rem"
   }
-}, zo = "transparent", L0 = {
+}, Ro = "transparent", N0 = {
   gap: "0.4rem",
   height: "3rem",
   lineHeight: "1.9rem",
@@ -11985,17 +12520,17 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
         textColor: r.semantic.color.text.secondary100
       },
       active: {
-        bgColor: zo,
+        bgColor: Ro,
         textColor: r.semantic.color.text.secondary200
       },
       disabled: {
-        bgColor: zo,
+        bgColor: Ro,
         textColor: r.semantic.color.text.secondary600
       }
     },
     off: {
       normal: {
-        bgColor: zo,
+        bgColor: Ro,
         textColor: r.semantic.color.text.secondary200
       },
       hover: {
@@ -12007,7 +12542,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
         textColor: r.semantic.color.text.secondary100
       },
       disabled: {
-        bgColor: zo,
+        bgColor: Ro,
         textColor: r.semantic.color.text.secondary600
       }
     }
@@ -12021,7 +12556,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, T0 = {
+}, q0 = {
   textColor: r.semantic.color.text.secondary200,
   bgColor: r.semantic.color.background.secondary900,
   shadow: `0 0 0.5px 1px ${r.semantic.color.border.neutral400}`,
@@ -12035,7 +12570,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     height: "8px",
     shadow: `${r.semantic.color.border.neutral400} 0px 1.5px`
   }
-}, H0 = {
+}, Y0 = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -12048,10 +12583,10 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     iconColor: r.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, I0 = {
+}, U0 = {
   colors: {
-    primary: r.semantic.color.text.secondary50,
-    secondary: r.semantic.color.text.secondary200
+    primary: r.semantic.color.text.secondary200,
+    secondary: r.semantic.color.text.secondary400
   },
   heading: {
     fontFamily: r.core.font.fontFamily.regular,
@@ -12118,7 +12653,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       semiBold: r.core.font.fontWeight.semiBold
     }
   }
-}, E0 = {
+}, Z0 = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -12170,13 +12705,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       borderColor: r.semantic.color.border.neutral300
     }
   }
-}, X0 = {
+}, V0 = {
   bgColor: r.semantic.color.background.secondary990,
   textColor: r.semantic.color.background.secondary50,
   fontFamily: r.core.font.fontFamily.regular,
   fontSize: r.core.font.fontSize.s14,
   lineHeight: "1.4"
-}, O0 = {
+}, J0 = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: r.semantic.color.background.neutral100,
@@ -12185,88 +12720,91 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     bgColor: r.semantic.color.background.neutral400,
     borderRadius: "99rem"
   }
-}, _0 = {
+}, K0 = {
   name: "dark-2",
   mode: "dark",
   ...r,
   components: {
-    actionIconButton: Ec,
-    appBar: Xc,
-    appSelectionMenu: Oc,
-    autoComplete: _c,
-    badge: Ac,
-    banner: jc,
-    boxSelectionGroup: Dc,
-    button: Gc,
-    buttonGroup: Nc,
-    card: qc,
-    checkbox: Yc,
-    chip: Uc,
-    chipList: Zc,
-    countryFlag: Vc,
-    datePicker: Jc,
-    drawer: Kc,
-    filters: Qc,
-    formField: o0,
-    iconButton: r0,
-    input: e0,
-    label: t0,
-    layouts: a0,
-    link: n0,
-    loader: c0,
-    menu: i0,
-    midBar: l0,
-    modal: s0,
-    moreInfoIcon: d0,
-    popover: m0,
-    popupCard: b0,
-    profileIcon: g0,
-    progressBar: u0,
-    radio: p0,
-    searchBar: C0,
-    section: x0,
-    select: h0,
-    semanticButton: f0,
-    semanticContainer: y0,
-    semanticIcon: k0,
-    sideBar: v0,
-    skeleton: w0,
-    stepper: S0,
-    switchButton: $0,
-    table: z0,
-    tableHeading: R0,
-    tabs: W0,
-    textButton: B0,
-    themeModeSwitch: F0,
-    toast: M0,
-    toggleButton: L0,
-    tooltip: T0,
-    treeView: H0,
-    typography: I0,
-    windowBar: E0
+    actionIconButton: qc,
+    appBar: Yc,
+    appSelectionMenu: Uc,
+    autoComplete: Zc,
+    badge: Vc,
+    banner: Jc,
+    boxSelectionGroup: Kc,
+    breadcrumbs: Qc,
+    button: o0,
+    buttonGroup: r0,
+    card: e0,
+    checkbox: t0,
+    chip: a0,
+    chipList: n0,
+    countryFlag: c0,
+    datePicker: i0,
+    drawer: l0,
+    filters: s0,
+    formField: d0,
+    iconButton: m0,
+    input: b0,
+    keyValueList: g0,
+    label: u0,
+    layouts: p0,
+    link: C0,
+    loader: x0,
+    menu: h0,
+    midBar: f0,
+    modal: y0,
+    moreInfoIcon: k0,
+    popover: v0,
+    popupCard: w0,
+    profileIcon: S0,
+    progressBar: $0,
+    radio: R0,
+    searchBar: z0,
+    section: W0,
+    select: B0,
+    semanticButton: P0,
+    semanticContainer: F0,
+    semanticIcon: L0,
+    sideBar: M0,
+    skeleton: H0,
+    slider: T0,
+    stepper: I0,
+    switchButton: E0,
+    table: X0,
+    tableHeading: O0,
+    tabs: _0,
+    textButton: A0,
+    themeModeSwitch: D0,
+    toast: G0,
+    toggleButton: N0,
+    tooltip: q0,
+    treeView: Y0,
+    typography: U0,
+    windowBar: Z0
   },
   globals: {
-    body: X0,
-    scrollbar: O0
+    body: V0,
+    scrollbar: J0
   }
-}, A0 = Ar, ti = {
+}, Q0 = Ar, pi = {
   light: Ar,
-  dark: Mn
-}, ai = {
-  light: Ic,
-  dark: _0
-}, to = () => ze() || A0, j0 = ({
+  dark: Xn
+}, Ci = {
+  light: Nc,
+  dark: K0
+}, to = () => Re() || Q0, oi = ({
   value: a,
   storageKey: n,
   onChange: i
 }) => {
-  const s = Ro(() => {
+  const s = zo(() => {
     try {
       return localStorage.getItem(n) ?? void 0;
     } catch {
       return;
     }
-  }, [n]), l = Ro((C) => {
+  }, [n]), l = zo((C) => {
     try {
       C == null ? localStorage.removeItem(n) : localStorage.setItem(n, C);
     } catch {
@@ -12297,55 +12835,56 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     readFromStorage: s,
     saveToStorage: l
   };
-}, ni = (a) => Po`
+}, xi = (a) => Po`
     &:focus-visible {
       outline: ${() => to().core.focus.size} solid ${() => to().core.focus.color};
       outline-offset: ${() => a || to().core.focus.margin};
     }
-  `, ci = (a) => Po`
+  `, hi = (a) => Po`
     outline: ${() => to().core.focus.size} solid ${() => to().core.focus.color};
     outline-offset: ${() => a || to().core.focus.margin};
-  `, M = {
+  `, L = {
   System: "system",
   Light: "light",
   Dark: "dark"
-}, jr = [M.Light, M.Dark], D0 = [...jr, M.System], Vo = (a, n) => !!a && (n ? D0 : jr).includes(a), Dr = () => typeof window > "u" ? {
+}, jr = [L.Light, L.Dark], ri = [...jr, L.System], Vo = (a, n) => !!a && (n ? ri : jr).includes(a), Dr = () => typeof window > "u" ? {
   matches: !1
-} : window.matchMedia("(prefers-color-scheme: dark)"), Bo = (a) => M.System === a ? Dr().matches ? M.Dark : M.Light : a, Lr = (a, n) => Vo(a, n) ? a : Bo(M.System), Tr = (a) => Bo(a ?? M.System) === M.Dark ? M.Light : M.Dark, G0 = ({
+} : window.matchMedia("(prefers-color-scheme: dark)"), Bo = (a) => L.System === a ? Dr().matches ? L.Dark : L.Light : a, Mr = (a, n) => Vo(a, n) ? a : Bo(L.System), Hr = (a) => Bo(a ?? L.System) === L.Dark ? L.Light : L.Dark, ei = ({
   allowSystemThemeMode: a,
   defaultThemeMode: n
 }) => {
-  const [i, s] = $r(() => Lr(n, a)), [l, m] = $r(() => i && Bo(i)), g = Vo(i, a);
+  const [i, s] = $r(() => Mr(n, a)), [l, m] = $r(() => i && Bo(i)), g = Vo(i, a);
   No(() => {
     !g && l && s(l);
   }, [l, g]);
-  const C = Ro((k) => {
+  const C = zo((k) => {
     let h;
     if (Vo(k, a))
       h = k;
     else {
       if (g)
         return !1;
-      h = Lr(n, a);
+      h = Mr(n, a);
     }
     return s(h), m(Bo(h)), !0;
-  }, [g, a, n]), x = Ro(() => {
+  }, [g, a, n]), x = zo(() => {
     m((k) => {
       if (!k) return k;
-      const h = Tr(k);
+      const h = Hr(k);
       return s(h), h;
     });
   }, []);
   return No(() => {
-    if (!a || M.System !== i)
+    if (!a || L.System !== i)
       return;
-    const k = Dr(), h = (S) => m(S.matches ? M.Dark : M.Light);
+    const k = Dr(), h = (S) => m(S.matches ? L.Dark : L.Light);
     return k.addEventListener("change", h), () => k == null ? void 0 : k.removeEventListener("change", h);
   }, [i, a]), {
     setUserThemeMode: C,
     toggleAppThemeMode: x,
-    getNextThemeModeToToggle: Tr,
+    getNextThemeModeToToggle: Hr,
     userThemeMode: i,
+    // theme selected by user or got from storage (dark/light/system)
     appThemeMode: l
     // resolved theme (dark/light - selected or current system)
   };
@@ -12360,17 +12899,17 @@ var Jo = { exports: {} }, go = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Hr;
-function N0() {
-  if (Hr) return go;
-  Hr = 1;
+var Tr;
+function ti() {
+  if (Tr) return go;
+  Tr = 1;
   var a = Er, n = Symbol.for("react.element"), i = Symbol.for("react.fragment"), s = Object.prototype.hasOwnProperty, l = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, m = { key: !0, ref: !0, __self: !0, __source: !0 };
   function g(C, x, k) {
-    var h, S = {}, u = null, R = null;
-    k !== void 0 && (u = "" + k), x.key !== void 0 && (u = "" + x.key), x.ref !== void 0 && (R = x.ref);
+    var h, S = {}, u = null, z = null;
+    k !== void 0 && (u = "" + k), x.key !== void 0 && (u = "" + x.key), x.ref !== void 0 && (z = x.ref);
     for (h in x) s.call(x, h) && !m.hasOwnProperty(h) && (S[h] = x[h]);
     if (C && C.defaultProps) for (h in x = C.defaultProps, x) S[h] === void 0 && (S[h] = x[h]);
-    return { $$typeof: n, type: C, key: u, ref: R, props: S, _owner: l.current };
+    return { $$typeof: n, type: C, key: u, ref: z, props: S, _owner: l.current };
   }
   return go.Fragment = i, go.jsx = g, go.jsxs = g, go;
 }
@@ -12385,13 +12924,13 @@ var uo = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Ir;
-function q0() {
+function ai() {
   return Ir || (Ir = 1, process.env.NODE_ENV !== "production" && function() {
-    var a = Er, n = Symbol.for("react.element"), i = Symbol.for("react.portal"), s = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), m = Symbol.for("react.profiler"), g = Symbol.for("react.provider"), C = Symbol.for("react.context"), x = Symbol.for("react.forward_ref"), k = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), u = Symbol.for("react.lazy"), R = Symbol.for("react.offscreen"), xo = Symbol.iterator, Mo = "@@iterator";
+    var a = Er, n = Symbol.for("react.element"), i = Symbol.for("react.portal"), s = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), m = Symbol.for("react.profiler"), g = Symbol.for("react.provider"), C = Symbol.for("react.context"), x = Symbol.for("react.forward_ref"), k = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), u = Symbol.for("react.lazy"), z = Symbol.for("react.offscreen"), xo = Symbol.iterator, Lo = "@@iterator";
     function ho(c) {
       if (c === null || typeof c != "object")
         return null;
-      var d = xo && c[xo] || c[Mo];
+      var d = xo && c[xo] || c[Lo];
       return typeof d == "function" ? d : null;
     }
     var O = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -12415,7 +12954,7 @@ function q0() {
     var qr = !1, Yr = !1, Ur = !1, Zr = !1, Vr = !1, Qo;
     Qo = Symbol.for("react.module.reference");
     function Jr(c) {
-      return !!(typeof c == "string" || typeof c == "function" || c === s || c === m || Vr || c === l || c === k || c === h || Zr || c === R || qr || Yr || Ur || typeof c == "object" && c !== null && (c.$$typeof === u || c.$$typeof === S || c.$$typeof === g || c.$$typeof === C || c.$$typeof === x || // This needs to include all possible module reference object
+      return !!(typeof c == "string" || typeof c == "function" || c === s || c === m || Vr || c === l || c === k || c === h || Zr || c === z || qr || Yr || Ur || typeof c == "object" && c !== null && (c.$$typeof === u || c.$$typeof === S || c.$$typeof === g || c.$$typeof === C || c.$$typeof === x || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
@@ -12538,27 +13077,27 @@ function q0() {
         no < 0 && W("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var Lo = O.ReactCurrentDispatcher, To;
+    var Mo = O.ReactCurrentDispatcher, Ho;
     function fo(c, d, b) {
       {
-        if (To === void 0)
+        if (Ho === void 0)
           try {
             throw Error();
           } catch (v) {
             var p = v.stack.trim().match(/\n( *(at )?)/);
-            To = p && p[1] || "";
+            Ho = p && p[1] || "";
           }
         return `
-` + To + c;
+` + Ho + c;
       }
     }
-    var Ho = !1, yo;
+    var To = !1, yo;
     {
       var re = typeof WeakMap == "function" ? WeakMap : Map;
       yo = new re();
     }
     function sr(c, d) {
-      if (!c || Ho)
+      if (!c || To)
         return "";
       {
         var b = yo.get(c);
@@ -12566,11 +13105,11 @@ function q0() {
           return b;
       }
       var p;
-      Ho = !0;
+      To = !0;
       var v = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var w;
-      w = Lo.current, Lo.current = null, Qr();
+      w = Mo.current, Mo.current = null, Qr();
       try {
         if (d) {
           var y = function() {
@@ -12583,47 +13122,47 @@ function q0() {
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
               Reflect.construct(y, []);
-            } catch (L) {
-              p = L;
+            } catch (M) {
+              p = M;
             }
             Reflect.construct(c, [], y);
           } else {
             try {
               y.call();
-            } catch (L) {
-              p = L;
+            } catch (M) {
+              p = M;
             }
             c.call(y.prototype);
           }
         } else {
           try {
             throw Error();
-          } catch (L) {
-            p = L;
+          } catch (M) {
+            p = M;
           }
           c();
         }
-      } catch (L) {
-        if (L && p && typeof L.stack == "string") {
-          for (var f = L.stack.split(`
+      } catch (M) {
+        if (M && p && typeof M.stack == "string") {
+          for (var f = M.stack.split(`
 `), B = p.stack.split(`
-`), $ = f.length - 1, z = B.length - 1; $ >= 1 && z >= 0 && f[$] !== B[z]; )
-            z--;
-          for (; $ >= 1 && z >= 0; $--, z--)
-            if (f[$] !== B[z]) {
-              if ($ !== 1 || z !== 1)
+`), $ = f.length - 1, R = B.length - 1; $ >= 1 && R >= 0 && f[$] !== B[R]; )
+            R--;
+          for (; $ >= 1 && R >= 0; $--, R--)
+            if (f[$] !== B[R]) {
+              if ($ !== 1 || R !== 1)
                 do
-                  if ($--, z--, z < 0 || f[$] !== B[z]) {
+                  if ($--, R--, R < 0 || f[$] !== B[R]) {
                     var E = `
 ` + f[$].replace(" at new ", " at ");
                     return c.displayName && E.includes("<anonymous>") && (E = E.replace("<anonymous>", c.displayName)), typeof c == "function" && yo.set(c, E), E;
                   }
-                while ($ >= 1 && z >= 0);
+                while ($ >= 1 && R >= 0);
               break;
             }
         }
       } finally {
-        Ho = !1, Lo.current = w, oe(), Error.prepareStackTrace = v;
+        To = !1, Mo.current = w, oe(), Error.prepareStackTrace = v;
       }
       var eo = c ? c.displayName || c.name : "", K = eo ? fo(eo) : "";
       return typeof c == "function" && yo.set(c, K), K;
@@ -12807,8 +13346,8 @@ function q0() {
             y[w] === void 0 && (y[w] = $[w]);
         }
         if (f || B) {
-          var z = typeof c == "function" ? c.displayName || c.name || "Unknown" : c;
-          f && be(y, z), B && ge(y, z);
+          var R = typeof c == "function" ? c.displayName || c.name || "Unknown" : c;
+          f && be(y, R), B && ge(y, R);
         }
         return ue(c, f, B, v, p, io.current, y);
       }
@@ -12935,9 +13474,9 @@ Check the top-level render call using <` + b + ">.");
           var $;
           c === null ? $ = "null" : Io(c) ? $ = "array" : c !== void 0 && c.$$typeof === n ? ($ = "<" + (_(c.type) || "Unknown") + " />", f = " Did you accidentally export a JSX literal instead of a component?") : $ = typeof c, W("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", $, f);
         }
-        var z = pe(c, d, b, v, w);
-        if (z == null)
-          return z;
+        var R = pe(c, d, b, v, w);
+        if (R == null)
+          return R;
         if (y) {
           var E = d.children;
           if (E !== void 0)
@@ -12952,11 +13491,11 @@ Check the top-level render call using <` + b + ">.");
               yr(E, c);
         }
         if (co.call(d, "key")) {
-          var K = _(c), L = Object.keys(d).filter(function($e) {
+          var K = _(c), M = Object.keys(d).filter(function($e) {
             return $e !== "key";
-          }), Ao = L.length > 0 ? "{key: someKey, " + L.join(": ..., ") + ": ...}" : "{key: someKey}";
+          }), Ao = M.length > 0 ? "{key: someKey, " + M.join(": ..., ") + ": ...}" : "{key: someKey}";
           if (!kr[K + Ao]) {
-            var Se = L.length > 0 ? "{" + L.join(": ..., ") + ": ...}" : "{}";
+            var Se = M.length > 0 ? "{" + M.join(": ..., ") + ": ...}" : "{}";
             W(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -12965,7 +13504,7 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`, Ao, K, Se, K), kr[K + Ao] = !0;
           }
         }
-        return c === s ? fe(z) : he(z), z;
+        return c === s ? fe(R) : he(R), R;
       }
     }
     function ye(c, d, b) {
@@ -12978,9 +13517,9 @@ React keys must be passed directly to JSX without using spread:
     uo.Fragment = s, uo.jsx = ve, uo.jsxs = we;
   }()), uo;
 }
-process.env.NODE_ENV === "production" ? Jo.exports = N0() : Jo.exports = q0();
+process.env.NODE_ENV === "production" ? Jo.exports = ti() : Jo.exports = ai();
 var Ko = Jo.exports;
-const Gr = Be(null), Y0 = ({
+const Gr = Be(null), ni = ({
   children: a,
   ...n
 }) => {
@@ -12989,12 +13528,12 @@ const Gr = Be(null), Y0 = ({
     value: i,
     children: a
   });
-}, ii = () => {
+}, fi = () => {
   const a = Fe(Gr);
   if (!a)
     throw new Error("Missing ThemeSwitchContext");
   return a;
-}, li = ({
+}, yi = ({
   children: a,
   storageKey: n,
   lightTheme: i,
@@ -13005,23 +13544,23 @@ const Gr = Be(null), Y0 = ({
   const {
     appThemeMode: g,
     ...C
-  } = G0({
+  } = ei({
     allowSystemThemeMode: l,
     defaultThemeMode: m
   });
-  return j0({
+  return oi({
     storageKey: n,
     value: C.userThemeMode,
     onChange: C.setUserThemeMode
-  }), Ko.jsx(Re, {
-    theme: g === M.Dark ? s : i,
-    children: Ko.jsx(Y0, {
+  }), Ko.jsx(ze, {
+    theme: g === L.Dark ? s : i,
+    children: Ko.jsx(ni, {
       ...C,
       allowSystemThemeMode: l,
       children: a
     })
   });
-}, U0 = Po`
+}, ci = Po`
   body {
     background: ${({
   theme: a
@@ -13045,7 +13584,7 @@ const Gr = Be(null), Y0 = ({
 }) => a.mode};
     }
   }
-`, Z0 = Po`
+`, ii = Po`
   @media (pointer: fine) {
     @-moz-document url-prefix() {
       * {
@@ -13098,30 +13637,30 @@ const Gr = Be(null), Y0 = ({
       background-color: transparent;
     }
   }
-`, si = We`
-  ${U0};
-  ${Z0};
+`, ki = We`
+  ${ci};
+  ${ii};
 `;
 export {
-  si as CommonStyles,
-  li as SwitchableModeThemeProvider,
-  Y0 as ThemeModeSwitchingProvider,
-  M as ThemeModes,
-  ei as findThemeByNameAndMode,
-  ni as getFocusStyle,
-  ci as getFocusStyleProperties,
-  oi as getThemesFlatList,
-  Ot as groupFlatByMode,
-  Xt as groupFlatByNameAndMode,
-  Q0 as groupThemesByMode,
-  ri as prepareThemesForSearch,
-  A0 as theme,
-  ti as themesDefault,
-  ai as themesRebrand,
-  j0 as useStorage,
+  ki as CommonStyles,
+  yi as SwitchableModeThemeProvider,
+  ni as ThemeModeSwitchingProvider,
+  L as ThemeModes,
+  ui as findThemeByNameAndMode,
+  xi as getFocusStyle,
+  hi as getFocusStyleProperties,
+  bi as getThemesFlatList,
+  _t as groupFlatByMode,
+  Ot as groupFlatByNameAndMode,
+  mi as groupThemesByMode,
+  gi as prepareThemesForSearch,
+  Q0 as theme,
+  pi as themesDefault,
+  Ci as themesRebrand,
+  oi as useStorage,
   to as useTheme,
-  ii as useThemeModeSwitchingContext,
-  G0 as useThemeModeSwitchingManager,
-  K0 as withContrast,
+  fi as useThemeModeSwitchingContext,
+  ei as useThemeModeSwitchingManager,
+  di as withContrast,
   V as withOpacity
 };