npm - @redis-ui/styles - Versions diffs - 14.5.3 → 14.9.2 - Mend

@redis-ui/styles 14.5.3 → 14.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/index.js CHANGED Viewed

@@ -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: {
@@ -567,6 +567,27 @@ const lo = {
         bgColor: "transparent",
         textColor: t.semantic.color.text.secondary300
       }
+    },
+    upsell: {
+      normal: {
+        bgGradient: `linear-gradient(316deg, ${t.semantic.color.background.discovery500} 0%, ${t.semantic.color.background.discovery400} 78%)`,
+        textColor: t.semantic.color.text.neutral100,
+        borderColor: t.semantic.color.border.discovery600
+      },
+      hover: {
+        bgGradient: `linear-gradient(316deg, ${t.semantic.color.background.discovery500} 0%, ${t.semantic.color.background.discovery500} 78%)`,
+        borderColor: t.semantic.color.border.discovery600
+      },
+      active: {
+        bgGradient: `linear-gradient(316deg, ${t.semantic.color.background.discovery600} 0%, ${t.semantic.color.background.discovery600} 78%)`,
+        borderColor: t.semantic.color.border.discovery700
+      },
+      disabled: {
+        bgGradient: "unset",
+        bgColor: t.semantic.color.background.neutral100,
+        borderColor: t.semantic.color.border.neutral200,
+        textColor: t.semantic.color.text.neutral400
+      }
     }
   }
 }, _e = {
@@ -827,7 +848,7 @@ const lo = {
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Rr = {
+}, zr = {
   aliceblue: [240, 248, 255],
   antiquewhite: [250, 235, 215],
   aqua: [0, 255, 255],
@@ -991,8 +1012,8 @@ function Ye(a) {
   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] === "#") {
@@ -1010,10 +1031,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;
@@ -1035,14 +1056,14 @@ function Ue(a, n) {
   var { space: i, values: s, alpha: l } = Ye(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) {
   if (a === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -1371,8 +1392,8 @@ function Co(a, n, i, s) {
     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",
@@ -1592,7 +1613,7 @@ function oo(a) {
   }
   var u = st.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 {
@@ -1721,7 +1742,7 @@ function I(a) {
 function ft(a, n) {
   if (n === "transparent") return n;
   var i = U(n);
-  return Z(H({}, i, {
+  return Z(T({}, i, {
     hue: i.hue + parseFloat(a)
   }));
 }
@@ -1732,7 +1753,7 @@ function ao(a, n, i) {
 function yt(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))
   }));
 }
@@ -1740,7 +1761,7 @@ var kt = I(yt), vt = kt;
 function wt(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))
   }));
 }
@@ -1756,31 +1777,31 @@ function St(a) {
 function $t(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;
+var Rt = I($t), zt = Rt;
 function Wt(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) {
   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);
@@ -1789,63 +1810,63 @@ I(Pt);
 function Ft(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);
-function Mt(a, n) {
-  return n === "transparent" ? n : Z(H({}, U(n), {
+function Lt(a, 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), {
+I(Lt);
+function Mt(a, n) {
+  return n === "transparent" ? n : Z(T({}, U(n), {
     lightness: parseFloat(a)
   }));
 }
-I(Lt);
-function Tt(a, n) {
-  return n === "transparent" ? n : Z(H({}, U(n), {
+I(Mt);
+function Ht(a, n) {
+  return n === "transparent" ? n : Z(T({}, U(n), {
     saturation: parseFloat(a)
   }));
 }
-I(Tt);
-function Ht(a, n) {
+I(Ht);
+function Tt(a, n) {
   return n === "transparent" ? n : _r(parseFloat(a), "rgb(0, 0, 0)", n);
 }
-I(Ht);
+I(Tt);
 function It(a, n) {
   return n === "transparent" ? n : _r(parseFloat(a), "rgb(255, 255, 255)", n);
 }
 I(It);
 function Et(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) {
+function ci(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);
+  return n < 0.5 ? zt(i, a) : vt(i, a);
 }
-const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark), n), {
+const ii = (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) => {
+}), li = (a) => a.flatMap((n) => Object.values(n)), Xt = (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), {
   light: [],
   dark: []
-}), ri = (a) => ({
+}), si = (a) => ({
   groupedByName: Xt(a),
   groupedByMode: Ot(a)
-}), ei = (a, n, i) => {
+}), di = (a, n, i) => {
   var l, m;
   const s = a.groupedByName[n];
   if (s)
@@ -2062,6 +2083,33 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   }
 }, Nt = {
+  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
+  }
+}, qt = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -2082,7 +2130,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 = {
+}, Yt = {
   flexGroup: {
     gap: {
       XXS: t.core.space.space025,
@@ -2118,7 +2166,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: t.core.space.space300
     }
   }
-}, Yt = {
+}, Ut = {
   variants: {
     block: {
       sizes: {
@@ -2189,7 +2237,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ut = {
+}, Zt = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -2205,11 +2253,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 = {
+}, Vt = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -2285,7 +2334,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Vt = {
+}, Jt = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -2297,7 +2346,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, Jt = {
+}, Kt = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -2327,9 +2376,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 = {
-  iconColor: t.semantic.color.icon.neutral700
 }, Qt = {
+  iconColor: t.semantic.color.icon.neutral700
+}, oa = {
   bgColor: t.semantic.color.background.neutral100,
   shadow: t.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -2342,7 +2391,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 = {
+}, ra = {
   closeButton: {
     iconColor: t.semantic.color.icon.neutral700
   },
@@ -2361,7 +2410,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 = {
+}, ea = {
   textColor: t.semantic.color.text.primary600,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -2391,7 +2440,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 = {
+}, ta = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -2445,7 +2494,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 = {
+}, aa = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -2493,7 +2542,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, aa = {
+}, na = {
   bgColor: t.semantic.color.background.neutral100,
   shadow: `0px 0px 0px 1px ${t.semantic.color.border.neutral600}`,
   borderRadius: "0.8rem",
@@ -2515,7 +2564,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, na = {
+}, ca = {
   width: "100%",
   height: "fit-content",
   bgColor: t.semantic.color.background.neutral100,
@@ -2564,7 +2613,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 = {
+}, ia = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -2681,7 +2730,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)`, la = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -2880,7 +2929,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, la = {
+}, sa = {
   sizes: {
     M: {
       borderRadius: t.core.space.space100,
@@ -2920,7 +2969,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 = {
+}, da = {
   variants: {
     informative: {
       iconColor: t.semantic.color.icon.informative600
@@ -2938,7 +2987,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 = {
+}, ma = {
   collapsed: {
     bgColor: t.semantic.color.background.neutral300,
     shadow: "none",
@@ -3045,7 +3094,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ma = {
+}, ba = {
   card: {
     gap: "2.4rem",
     bgColor: t.semantic.color.background.neutral100,
@@ -3072,7 +3121,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, ba = {
+}, ga = {
+  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
+  }
+}, ua = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -3119,7 +3233,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ga = {
+}, pa = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -3171,7 +3285,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ua = {
+}, Ca = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -3259,7 +3373,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 = {
+}, xa = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -3282,7 +3396,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, Ca = {
+}, ha = {
   variants: {
     default: {
       gap: "4rem",
@@ -3365,22 +3479,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, q = "transparent", xa = {
+}, q = "transparent", fa = {
   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",
@@ -3465,7 +3593,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 = {
+}, ya = "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", ka = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -3474,12 +3602,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("${ya}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, ya = {
+}, va = {
   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)",
@@ -3491,7 +3619,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", wa = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -3546,7 +3674,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, va = {
+}, Sa = {
   textColor: t.semantic.color.text.neutral800,
   bgColor: t.semantic.color.background.neutral100,
   shadow: t.core.shadow.shadow400,
@@ -3560,7 +3688,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 = {
+}, $a = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -3573,7 +3701,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 = {
+}, Ra = {
   colors: {
     primary: t.semantic.color.text.neutral800,
     secondary: t.semantic.color.text.neutral700
@@ -3643,7 +3771,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 = {
+}, za = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -3695,13 +3823,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 = {
+}, Wa = {
   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 = {
+}, Ba = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: t.semantic.color.background.secondary100,
@@ -3715,10 +3843,10 @@ 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,
@@ -3735,44 +3863,46 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     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
+    keyValueList: Nt,
+    label: qt,
+    layouts: Yt,
+    link: Ut,
+    loader: Zt,
+    menu: Vt,
+    midBar: Jt,
+    modal: Kt,
+    moreInfoIcon: Qt,
+    popover: oa,
+    popupCard: ra,
+    profileIcon: ea,
+    progressBar: ta,
+    radio: aa,
+    searchBar: na,
+    section: ca,
+    select: ia,
+    semanticButton: la,
+    semanticContainer: sa,
+    semanticIcon: da,
+    sideBar: ma,
+    skeleton: ba,
+    slider: ga,
+    stepper: ua,
+    switchButton: pa,
+    table: Ca,
+    tableHeading: xa,
+    tabs: ha,
+    textButton: fa,
+    themeModeSwitch: ka,
+    toast: va,
+    toggleButton: wa,
+    tooltip: Sa,
+    treeView: $a,
+    typography: Ra,
+    windowBar: za
   },
   globals: {
-    body: za,
-    scrollbar: Ra
+    body: Wa,
+    scrollbar: Ba
   }
 }, so = {
   transparent: "#00000000",
@@ -3979,7 +4109,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: so.primary200
     }
   }
-}, Wa = {
+}, Pa = {
   sizes: {
     L: {
       size: "3rem",
@@ -4032,7 +4162,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ba = {
+}, Fa = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${e.semantic.color.border.neutral400}`,
@@ -4054,7 +4184,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 = {
+}, La = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -4097,12 +4227,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 = {
+}, Ma = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Pr = "1px", Ma = {
+}, Pr = "1px", Ha = {
   padding: `${e.core.space.space025} ${e.core.space.space050}`,
   gap: e.core.space.space025,
   borderRadius: "2px",
@@ -4165,7 +4295,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 = {
+}, Ta = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -4183,7 +4313,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   split: {
     minWidth: "0.8rem"
   }
-}, Ta = {
+}, Ia = {
   gap: e.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -4229,7 +4359,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   defaultItem: {
     gap: "0.4rem"
   }
-}, Ha = {
+}, Ea = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -4344,9 +4474,30 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
         borderColor: e.semantic.color.border.neutral600,
         textColor: e.semantic.color.text.neutral600
       }
+    },
+    upsell: {
+      normal: {
+        bgGradient: `linear-gradient(316deg, ${e.semantic.color.background.discovery500} 0%, ${e.semantic.color.background.discovery400} 78%)`,
+        textColor: e.semantic.color.text.neutral100,
+        borderColor: e.semantic.color.border.discovery600
+      },
+      hover: {
+        bgGradient: `linear-gradient(316deg, ${e.semantic.color.background.discovery500} 0%, ${e.semantic.color.background.discovery500} 78%)`,
+        borderColor: e.semantic.color.border.discovery600
+      },
+      active: {
+        bgGradient: `linear-gradient(316deg, ${e.semantic.color.background.discovery600} 0%, ${e.semantic.color.background.discovery600} 78%)`,
+        borderColor: e.semantic.color.border.discovery700
+      },
+      disabled: {
+        bgGradient: "unset",
+        bgColor: e.semantic.color.background.neutral100,
+        borderColor: e.semantic.color.border.neutral200,
+        textColor: e.semantic.color.text.neutral400
+      }
     }
   }
-}, Ia = {
+}, Xa = {
   borderRadius: "0.4rem",
   border: `1px solid ${e.semantic.color.border.neutral600}`,
   fontSize: "1.4rem",
@@ -4389,13 +4540,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ea = {
+}, Oa = {
   width: "100%",
   height: "fit-content",
   bgColor: e.semantic.color.background.neutral100,
   shadow: e.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, Xa = {
+}, _a = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -4459,7 +4610,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Oa = {
+}, Aa = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -4516,7 +4667,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, _a = {
+}, ja = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -4534,13 +4685,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 = {
+}, Da = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: e.semantic.color.border.neutral500
-}, ja = {
+}, Ga = {
   fontSize: e.core.font.fontSize.s14,
   fontWeight: e.core.font.fontWeight.normal,
   fontFamily: e.core.font.fontFamily.regular,
@@ -4604,7 +4755,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Da = {
+}, Na = {
   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",
@@ -4630,7 +4781,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 = {
+}, qa = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${e.semantic.color.border.neutral400}`
@@ -4663,7 +4814,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       padding: "0.8rem 1.6rem"
     }
   }
-}, Na = {
+}, Ya = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -4677,7 +4828,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 = {
+}, Ua = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -4721,7 +4872,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   },
   borderRadius: "0.4rem"
-}, Ya = {
+}, Za = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -4814,7 +4965,34 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       textColor: e.semantic.color.text.danger500
     }
   }
-}, Ua = {
+}, Va = {
+  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
+  }
+}, Ja = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -4835,7 +5013,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 = {
+}, Ka = {
   flexGroup: {
     gap: {
       XXS: e.core.space.space025,
@@ -4871,7 +5049,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: e.core.space.space300
     }
   }
-}, Va = {
+}, Qa = {
   variants: {
     block: {
       sizes: {
@@ -4941,7 +5119,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Ja = {
+}, on = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -4957,11 +5135,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 = {
+}, rn = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -5037,7 +5216,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Qa = {
+}, en = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -5049,7 +5228,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, on = {
+}, tn = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -5079,9 +5258,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 = {
+}, an = {
   iconColor: e.semantic.color.icon.neutral700
-}, en = {
+}, nn = {
   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",
@@ -5094,7 +5273,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 = {
+}, cn = {
   closeButton: {
     iconColor: e.semantic.color.icon.neutral700
   },
@@ -5113,7 +5292,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 = {
+}, ln = {
   textColor: e.semantic.color.text.neutral100,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -5143,7 +5322,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 = {
+}, sn = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -5197,7 +5376,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 = {
+}, dn = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -5245,7 +5424,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ln = {
+}, mn = {
   bgColor: e.semantic.color.background.neutral100,
   shadow: `0px 0px 0px 1px ${e.semantic.color.border.neutral600}`,
   borderRadius: "0.8rem",
@@ -5267,7 +5446,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, sn = {
+}, bn = {
   width: "100%",
   height: "fit-content",
   bgColor: e.semantic.color.background.neutral100,
@@ -5316,7 +5495,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 = {
+}, gn = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -5433,7 +5612,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)`, un = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -5632,7 +5811,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, bn = {
+}, pn = {
   sizes: {
     M: {
       borderRadius: e.core.space.space100,
@@ -5672,7 +5851,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 = {
+}, Cn = {
   variants: {
     informative: {
       iconColor: e.semantic.color.icon.informative600
@@ -5690,7 +5869,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 = {
+}, xn = {
   collapsed: {
     bgColor: e.semantic.color.background.neutral100,
     shadow: "none",
@@ -5797,7 +5976,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, pn = {
+}, hn = {
   card: {
     gap: "2.4rem",
     bgColor: e.semantic.color.background.neutral100,
@@ -5824,9 +6003,74 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, Cn = {
-  gap: "2.4rem",
-  step: {
+}, fn = {
+  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
+  }
+}, yn = {
+  gap: "2.4rem",
+  step: {
     gap: "0.8rem",
     indicator: {
       size: "2rem"
@@ -5871,7 +6115,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, xn = {
+}, kn = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -5923,7 +6167,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, hn = {
+}, vn = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -6011,7 +6255,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 = {
+}, wn = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -6034,7 +6278,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, yn = {
+}, Sn = {
   variants: {
     default: {
       gap: "4rem",
@@ -6120,22 +6364,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Y = "transparent", kn = {
+}, Y = "transparent", $n = {
   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",
@@ -6220,7 +6478,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 = {
+}, Rn = "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", zn = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -6229,12 +6487,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("${Rn}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, Sn = {
+}, Wn = {
   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)",
@@ -6246,7 +6504,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", Bn = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -6301,7 +6559,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, zn = {
+}, Pn = {
   textColor: e.semantic.color.text.neutral800,
   bgColor: e.semantic.color.background.neutral200,
   shadow: `0 0 0.5px 1px ${e.semantic.color.border.neutral400}`,
@@ -6315,7 +6573,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 = {
+}, Fn = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -6328,7 +6586,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 = {
+}, Ln = {
   colors: {
     primary: e.semantic.color.text.neutral800,
     secondary: e.semantic.color.text.neutral700
@@ -6398,7 +6656,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 = {
+}, Mn = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -6450,13 +6708,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 = {
+}, Hn = {
   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 = {
+}, Tn = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: e.semantic.color.background.neutral100,
@@ -6465,69 +6723,71 @@ 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 = {
+}, In = {
   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: Pa,
+    appBar: Fa,
+    appSelectionMenu: La,
+    autoComplete: Ma,
+    badge: Ha,
+    banner: Ta,
+    boxSelectionGroup: Ia,
+    button: Ea,
+    buttonGroup: Xa,
+    card: Oa,
+    checkbox: _a,
+    chip: Aa,
+    chipList: ja,
+    countryFlag: Da,
+    datePicker: Ga,
+    drawer: Na,
+    filters: qa,
+    formField: Ya,
+    iconButton: Ua,
+    input: Za,
+    keyValueList: Va,
+    label: Ja,
+    layouts: Ka,
+    link: Qa,
+    loader: on,
+    menu: rn,
+    midBar: en,
+    modal: tn,
+    moreInfoIcon: an,
+    popover: nn,
+    popupCard: cn,
+    profileIcon: ln,
+    progressBar: sn,
+    radio: dn,
+    searchBar: mn,
+    section: bn,
+    select: gn,
+    semanticButton: un,
+    semanticContainer: pn,
+    semanticIcon: Cn,
+    sideBar: xn,
+    skeleton: hn,
+    slider: fn,
+    stepper: yn,
+    switchButton: kn,
+    table: vn,
+    tableHeading: wn,
+    tabs: Sn,
+    textButton: $n,
+    themeModeSwitch: zn,
+    toast: Wn,
+    toggleButton: Bn,
+    tooltip: Pn,
+    treeView: Fn,
+    typography: Ln,
+    windowBar: Mn
   },
   globals: {
-    body: Pn,
-    scrollbar: Fn
+    body: Hn,
+    scrollbar: Tn
   }
 }, mo = {
   transparent: "#00000000",
@@ -6734,7 +6994,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: mo.primary600
     }
   }
-}, Ln = {
+}, En = {
   sizes: {
     L: {
       size: "3rem",
@@ -6787,7 +7047,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Tn = {
+}, Xn = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${o.semantic.color.border.secondary200}`,
@@ -6809,7 +7069,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 = {
+}, On = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -6852,12 +7112,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 = {
+}, _n = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Fr = "1px", En = {
+}, Fr = "1px", An = {
   padding: `${o.core.space.space025} ${o.core.space.space050}`,
   gap: o.core.space.space025,
   borderRadius: "2px",
@@ -6920,7 +7180,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 = {
+}, jn = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -6938,7 +7198,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   split: {
     minWidth: "0.8rem"
   }
-}, On = {
+}, Dn = {
   gap: o.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -6993,7 +7253,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   defaultItem: {
     gap: "0.4rem"
   }
-}, _n = {
+}, Gn = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -7125,9 +7385,30 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
         borderColor: o.semantic.color.border.neutral200,
         textColor: o.semantic.color.text.neutral400
       }
+    },
+    upsell: {
+      normal: {
+        bgGradient: `linear-gradient(316deg, ${o.semantic.color.background.discovery500} 0%, ${o.semantic.color.background.discovery400} 78%)`,
+        textColor: o.semantic.color.text.secondary0,
+        borderColor: o.semantic.color.border.discovery600
+      },
+      hover: {
+        bgGradient: `linear-gradient(316deg, ${o.semantic.color.background.discovery500} 0%, ${o.semantic.color.background.discovery500} 78%)`,
+        borderColor: o.semantic.color.border.discovery600
+      },
+      active: {
+        bgGradient: `linear-gradient(316deg, ${o.semantic.color.background.discovery600} 0%, ${o.semantic.color.background.discovery600} 78%)`,
+        borderColor: o.semantic.color.border.discovery700
+      },
+      disabled: {
+        bgGradient: "unset",
+        bgColor: o.semantic.color.background.neutral100,
+        borderColor: o.semantic.color.border.neutral200,
+        textColor: o.semantic.color.text.neutral400
+      }
     }
   }
-}, An = {
+}, Nn = {
   borderRadius: "0.4rem",
   border: `1px solid ${o.semantic.color.border.transparent}`,
   fontSize: "1.4rem",
@@ -7170,13 +7451,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, jn = {
+}, qn = {
   width: "100%",
   height: "fit-content",
   bgColor: o.semantic.color.background.neutral100,
   shadow: o.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, Dn = {
+}, Yn = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -7240,7 +7521,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Gn = {
+}, Un = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -7297,7 +7578,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Nn = {
+}, Zn = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -7315,13 +7596,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 = {
+}, Vn = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: o.semantic.color.border.secondary400
-}, Yn = {
+}, Jn = {
   fontSize: o.core.font.fontSize.s14,
   fontWeight: o.core.font.fontWeight.normal,
   fontFamily: o.core.font.fontFamily.regular,
@@ -7385,7 +7666,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Un = {
+}, Kn = {
   shadow: o.core.shadow.shadow500,
   bgColor: o.semantic.color.background.neutral0,
   sidePadding: "3.2rem",
@@ -7411,7 +7692,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 = {
+}, Qn = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${o.semantic.color.border.secondary300}`
@@ -7444,7 +7725,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       padding: "0.8rem 1.6rem"
     }
   }
-}, Vn = {
+}, oc = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -7458,7 +7739,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 = {
+}, rc = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -7504,7 +7785,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   },
   borderRadius: "0.4rem"
-}, Kn = {
+}, ec = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -7598,7 +7879,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 = {
+}, tc = {
+  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
+  }
+}, ac = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -7619,7 +7927,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 = {
+}, nc = {
   flexGroup: {
     gap: {
       XXS: o.core.space.space025,
@@ -7655,7 +7963,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: o.core.space.space300
     }
   }
-}, rc = {
+}, cc = {
   variants: {
     block: {
       sizes: {
@@ -7724,7 +8032,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ec = {
+}, ic = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -7744,7 +8052,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 = {
+}, lc = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -7820,7 +8128,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, ac = {
+}, sc = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -7832,7 +8140,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, nc = {
+}, dc = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -7862,9 +8170,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 = {
+}, mc = {
   iconColor: o.semantic.color.icon.secondary600
-}, ic = {
+}, bc = {
   bgColor: o.semantic.color.background.neutral100,
   shadow: o.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -7877,7 +8185,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 = {
+}, gc = {
   closeButton: {
     iconColor: o.semantic.color.icon.neutral700
   },
@@ -7896,7 +8204,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 = {
+}, uc = {
   textColor: o.semantic.color.text.secondary950,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -7926,7 +8234,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 = {
+}, pc = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -7980,7 +8288,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 = {
+}, Cc = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -8028,7 +8336,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, bc = {
+}, xc = {
   bgColor: o.semantic.color.background.secondary0,
   shadow: `0px 0px 0px 1px ${o.semantic.color.border.secondary300}`,
   borderRadius: "0.8rem",
@@ -8050,7 +8358,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, gc = {
+}, hc = {
   width: "100%",
   height: "fit-content",
   bgColor: o.semantic.color.background.secondary0,
@@ -8099,7 +8407,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 = {
+}, fc = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -8199,7 +8507,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, pc = {
+}, yc = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -8446,7 +8754,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Cc = {
+}, kc = {
   sizes: {
     M: {
       borderRadius: o.core.space.space100,
@@ -8486,7 +8794,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 = {
+}, vc = {
   variants: {
     informative: {
       iconColor: o.semantic.color.icon.informative600
@@ -8504,7 +8812,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 = {
+}, wc = {
   collapsed: {
     bgColor: o.semantic.color.background.secondary50,
     shadow: "none",
@@ -8611,7 +8919,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, fc = {
+}, Sc = {
   card: {
     gap: "2.4rem",
     bgColor: o.semantic.color.background.neutral100,
@@ -8638,7 +8946,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, yc = {
+}, $c = {
+  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
+  }
+}, Rc = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -8685,7 +9058,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, kc = {
+}, zc = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -8737,7 +9110,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, vc = {
+}, Wc = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -8825,7 +9198,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 = {
+}, Bc = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -8848,7 +9221,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, Sc = {
+}, Pc = {
   variants: {
     default: {
       gap: "4rem",
@@ -8931,22 +9304,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, X = "transparent", $c = {
+}, X = "transparent", Fc = {
   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",
@@ -9038,7 +9425,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 = {
+}, Lc = "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", Mc = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -9047,12 +9434,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("${Lc}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, Wc = {
+}, Hc = {
   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)",
@@ -9064,7 +9451,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", Tc = {
   gap: "0.4rem",
   height: "3rem",
   lineHeight: "1.9rem",
@@ -9117,7 +9504,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, Pc = {
+}, Ic = {
   textColor: o.semantic.color.text.secondary950,
   bgColor: o.semantic.color.background.secondary0,
   shadow: o.core.shadow.shadow400,
@@ -9131,7 +9518,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 = {
+}, Ec = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -9144,10 +9531,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 = {
+}, Xc = {
   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,
@@ -9214,7 +9601,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 = {
+}, Oc = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -9266,13 +9653,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 = {
+}, _c = {
   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 = {
+}, Ac = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: o.semantic.color.background.secondary100,
@@ -9281,69 +9668,71 @@ 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 = {
+}, jc = {
   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: En,
+    appBar: Xn,
+    appSelectionMenu: On,
+    autoComplete: _n,
+    badge: An,
+    banner: jn,
+    boxSelectionGroup: Dn,
+    button: Gn,
+    buttonGroup: Nn,
+    card: qn,
+    checkbox: Yn,
+    chip: Un,
+    chipList: Zn,
+    countryFlag: Vn,
+    datePicker: Jn,
+    drawer: Kn,
+    filters: Qn,
+    formField: oc,
+    iconButton: rc,
+    input: ec,
+    keyValueList: tc,
+    label: ac,
+    layouts: nc,
+    link: cc,
+    loader: ic,
+    menu: lc,
+    midBar: sc,
+    modal: dc,
+    moreInfoIcon: mc,
+    popover: bc,
+    popupCard: gc,
+    profileIcon: uc,
+    progressBar: pc,
+    radio: Cc,
+    searchBar: xc,
+    section: hc,
+    select: fc,
+    semanticButton: yc,
+    semanticContainer: kc,
+    semanticIcon: vc,
+    sideBar: wc,
+    skeleton: Sc,
+    slider: $c,
+    stepper: Rc,
+    switchButton: zc,
+    table: Wc,
+    tableHeading: Bc,
+    tabs: Pc,
+    textButton: Fc,
+    themeModeSwitch: Mc,
+    toast: Hc,
+    toggleButton: Tc,
+    tooltip: Ic,
+    treeView: Ec,
+    typography: Xc,
+    windowBar: Oc
   },
   globals: {
-    body: Tc,
-    scrollbar: Hc
+    body: _c,
+    scrollbar: Ac
   }
 }, bo = {
   transparent: "#00000000",
@@ -9550,7 +9939,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       color: bo.primary200
     }
   }
-}, Ec = {
+}, Dc = {
   sizes: {
     L: {
       size: "3rem",
@@ -9603,7 +9992,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Xc = {
+}, Gc = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${r.semantic.color.border.secondary800}`,
@@ -9625,7 +10014,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 = {
+}, Nc = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -9668,17 +10057,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 = {
+}, qc = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Mr = "1px", Ac = {
+}, Lr = "1px", Yc = {
   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: {
@@ -9736,7 +10125,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 = {
+}, Uc = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -9754,7 +10143,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   split: {
     minWidth: "0.8rem"
   }
-}, Dc = {
+}, Zc = {
   gap: r.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -9809,7 +10198,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   defaultItem: {
     gap: "0.4rem"
   }
-}, Gc = {
+}, Vc = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -9941,9 +10330,30 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
         borderColor: r.semantic.color.border.secondary700,
         textColor: r.semantic.color.text.secondary600
       }
+    },
+    upsell: {
+      normal: {
+        bgGradient: `linear-gradient(316deg, ${r.semantic.color.background.discovery500} 0%, ${r.semantic.color.background.discovery400} 78%)`,
+        textColor: r.semantic.color.text.secondary0,
+        borderColor: r.semantic.color.border.discovery600
+      },
+      hover: {
+        bgGradient: `linear-gradient(316deg, ${r.semantic.color.background.discovery500} 0%, ${r.semantic.color.background.discovery500} 78%)`,
+        borderColor: r.semantic.color.border.discovery600
+      },
+      active: {
+        bgGradient: `linear-gradient(316deg, ${r.semantic.color.background.discovery600} 0%, ${r.semantic.color.background.discovery600} 78%)`,
+        borderColor: r.semantic.color.border.discovery700
+      },
+      disabled: {
+        bgGradient: "unset",
+        bgColor: r.semantic.color.background.neutral100,
+        borderColor: r.semantic.color.border.neutral200,
+        textColor: r.semantic.color.text.neutral400
+      }
     }
   }
-}, Nc = {
+}, Jc = {
   borderRadius: "0.4rem",
   border: `1px solid ${r.semantic.color.border.transparent}`,
   fontSize: "1.4rem",
@@ -9986,13 +10396,13 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, qc = {
+}, Kc = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.secondary900,
   shadow: r.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, Yc = {
+}, Qc = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -10056,7 +10466,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Uc = {
+}, o0 = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -10113,7 +10523,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, Zc = {
+}, r0 = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -10131,13 +10541,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 = {
+}, e0 = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: r.semantic.color.border.secondary700
-}, Jc = {
+}, t0 = {
   fontSize: r.core.font.fontSize.s14,
   fontWeight: r.core.font.fontWeight.normal,
   fontFamily: r.core.font.fontFamily.regular,
@@ -10201,7 +10611,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Kc = {
+}, a0 = {
   shadow: r.core.shadow.shadow500,
   bgColor: r.semantic.color.background.secondary900,
   sidePadding: "3.2rem",
@@ -10227,7 +10637,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 = {
+}, n0 = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${r.semantic.color.border.secondary800}`
@@ -10260,7 +10670,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       padding: "0.8rem 1.6rem"
     }
   }
-}, o0 = {
+}, c0 = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -10274,7 +10684,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 = {
+}, i0 = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -10320,7 +10730,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     }
   },
   borderRadius: "0.4rem"
-}, e0 = {
+}, l0 = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -10414,7 +10824,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 = {
+}, s0 = {
+  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
+  }
+}, d0 = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -10435,7 +10872,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 = {
+}, m0 = {
   flexGroup: {
     gap: {
       XXS: r.core.space.space025,
@@ -10471,7 +10908,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       XXL: r.core.space.space300
     }
   }
-}, n0 = {
+}, b0 = {
   variants: {
     block: {
       sizes: {
@@ -10540,7 +10977,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, c0 = {
+}, g0 = {
   size: "5rem",
   gap: "0.5rem",
   variants: {
@@ -10560,7 +10997,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 = {
+}, u0 = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -10625,7 +11062,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
@@ -10636,7 +11073,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, l0 = {
+}, p0 = {
   header: {
     height: "6.2rem",
     paddingInline: "1.6rem",
@@ -10648,7 +11085,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, s0 = {
+}, C0 = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -10678,9 +11115,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 = {
+}, x0 = {
   iconColor: r.semantic.color.icon.secondary500
-}, m0 = {
+}, h0 = {
   bgColor: r.semantic.color.background.secondary900,
   shadow: r.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -10693,7 +11130,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 = {
+}, f0 = {
   closeButton: {
     iconColor: r.semantic.color.icon.neutral700
   },
@@ -10712,7 +11149,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 = {
+}, y0 = {
   textColor: r.semantic.color.text.secondary950,
   border: "solid 1px transparent",
   colorGroups: [{
@@ -10742,7 +11179,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 = {
+}, k0 = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -10796,7 +11233,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 = {
+}, v0 = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -10844,7 +11281,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, C0 = {
+}, w0 = {
   bgColor: r.semantic.color.background.secondary950,
   shadow: `0px 0px 0px 1px ${r.semantic.color.border.secondary800}`,
   borderRadius: "0.8rem",
@@ -10866,7 +11303,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       gap: "0.8rem"
     }
   }
-}, x0 = {
+}, S0 = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.secondary950,
@@ -10915,7 +11352,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 = {
+}, $0 = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -11016,7 +11453,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, f0 = {
+}, R0 = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -11263,7 +11700,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, y0 = {
+}, z0 = {
   sizes: {
     M: {
       borderRadius: r.core.space.space100,
@@ -11303,7 +11740,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 = {
+}, W0 = {
   variants: {
     informative: {
       iconColor: r.semantic.color.icon.informative600
@@ -11321,7 +11758,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 = {
+}, B0 = {
   collapsed: {
     bgColor: r.semantic.color.background.secondary950,
     shadow: "none",
@@ -11428,7 +11865,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, w0 = {
+}, P0 = {
   card: {
     gap: "2.4rem",
     bgColor: r.semantic.color.background.neutral100,
@@ -11455,7 +11892,72 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   grid: {
     gap: "1.6rem"
   }
-}, S0 = {
+}, F0 = {
+  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
+  }
+}, L0 = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -11502,7 +12004,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, $0 = {
+}, M0 = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -11554,7 +12056,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, z0 = {
+}, H0 = {
   table: {
     tableContainer: {
       borderRadius: "0.8rem",
@@ -11642,7 +12144,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 = {
+}, T0 = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -11665,7 +12167,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
   actionsBar: {
     gap: "1.6rem"
   }
-}, W0 = {
+}, I0 = {
   variants: {
     default: {
       gap: "4rem",
@@ -11751,22 +12253,36 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
       }
     }
   }
-}, T = "transparent", B0 = {
+}, H = "transparent", E0 = {
   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",
@@ -11780,7 +12296,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: {
@@ -11788,11 +12304,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
         }
       }
@@ -11800,7 +12316,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: {
@@ -11808,11 +12324,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
         }
       }
@@ -11820,19 +12336,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
         }
       }
@@ -11840,25 +12356,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 = {
+}, X0 = "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", O0 = {
   width: "3.6rem",
   height: "2.2rem",
   padding: "0.1rem",
@@ -11867,12 +12383,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("${X0}")`,
     iconAspectRatio: "1/1",
     borderRadius: "0",
     bgColor: "transparent"
   }
-}, M0 = {
+}, _0 = {
   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)",
@@ -11884,7 +12400,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", A0 = {
   gap: "0.4rem",
   height: "3rem",
   lineHeight: "1.9rem",
@@ -11901,17 +12417,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: {
@@ -11923,7 +12439,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
       }
     }
@@ -11937,7 +12453,7 @@ const Q0 = (a) => a.reduce((n, i) => (n.light.push(i.light), n.dark.push(i.dark)
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, T0 = {
+}, j0 = {
   textColor: r.semantic.color.text.secondary200,
   bgColor: r.semantic.color.background.secondary900,
   shadow: `0 0 0.5px 1px ${r.semantic.color.border.neutral400}`,
@@ -11951,7 +12467,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 = {
+}, D0 = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -11964,10 +12480,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 = {
+}, G0 = {
   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,
@@ -12034,7 +12550,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 = {
+}, N0 = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -12086,13 +12602,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 = {
+}, q0 = {
   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 = {
+}, Y0 = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: r.semantic.color.background.neutral100,
@@ -12101,88 +12617,90 @@ 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 = {
+}, U0 = {
   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: Dc,
+    appBar: Gc,
+    appSelectionMenu: Nc,
+    autoComplete: qc,
+    badge: Yc,
+    banner: Uc,
+    boxSelectionGroup: Zc,
+    button: Vc,
+    buttonGroup: Jc,
+    card: Kc,
+    checkbox: Qc,
+    chip: o0,
+    chipList: r0,
+    countryFlag: e0,
+    datePicker: t0,
+    drawer: a0,
+    filters: n0,
+    formField: c0,
+    iconButton: i0,
+    input: l0,
+    keyValueList: s0,
+    label: d0,
+    layouts: m0,
+    link: b0,
+    loader: g0,
+    menu: u0,
+    midBar: p0,
+    modal: C0,
+    moreInfoIcon: x0,
+    popover: h0,
+    popupCard: f0,
+    profileIcon: y0,
+    progressBar: k0,
+    radio: v0,
+    searchBar: w0,
+    section: S0,
+    select: $0,
+    semanticButton: R0,
+    semanticContainer: z0,
+    semanticIcon: W0,
+    sideBar: B0,
+    skeleton: P0,
+    slider: F0,
+    stepper: L0,
+    switchButton: M0,
+    table: H0,
+    tableHeading: T0,
+    tabs: I0,
+    textButton: E0,
+    themeModeSwitch: O0,
+    toast: _0,
+    toggleButton: A0,
+    tooltip: j0,
+    treeView: D0,
+    typography: G0,
+    windowBar: N0
   },
   globals: {
-    body: X0,
-    scrollbar: O0
+    body: q0,
+    scrollbar: Y0
   }
-}, A0 = Ar, ti = {
+}, Z0 = Ar, mi = {
   light: Ar,
-  dark: Mn
-}, ai = {
-  light: Ic,
-  dark: _0
-}, to = () => ze() || A0, j0 = ({
+  dark: In
+}, bi = {
+  light: jc,
+  dark: U0
+}, to = () => Re() || Z0, V0 = ({
   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 {
@@ -12213,55 +12731,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`
+}, gi = (a) => Po`
     &:focus-visible {
       outline: ${() => to().core.focus.size} solid ${() => to().core.focus.color};
       outline-offset: ${() => a || to().core.focus.margin};
     }
-  `, ci = (a) => Po`
+  `, ui = (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], J0 = [...jr, L.System], Vo = (a, n) => !!a && (n ? J0 : 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, K0 = ({
   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)
   };
@@ -12276,17 +12795,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 Q0() {
+  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;
 }
@@ -12301,13 +12820,13 @@ var uo = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Ir;
-function q0() {
+function oi() {
   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;
@@ -12331,7 +12850,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.
@@ -12454,27 +12973,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);
@@ -12482,11 +13001,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() {
@@ -12499,47 +13018,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;
@@ -12723,8 +13242,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);
       }
@@ -12851,9 +13370,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)
@@ -12868,11 +13387,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} />
@@ -12881,7 +13400,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) {
@@ -12894,9 +13413,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 = Q0() : Jo.exports = oi();
 var Ko = Jo.exports;
-const Gr = Be(null), Y0 = ({
+const Gr = Be(null), ri = ({
   children: a,
   ...n
 }) => {
@@ -12905,12 +13424,12 @@ const Gr = Be(null), Y0 = ({
     value: i,
     children: a
   });
-}, ii = () => {
+}, pi = () => {
   const a = Fe(Gr);
   if (!a)
     throw new Error("Missing ThemeSwitchContext");
   return a;
-}, li = ({
+}, Ci = ({
   children: a,
   storageKey: n,
   lightTheme: i,
@@ -12921,23 +13440,23 @@ const Gr = Be(null), Y0 = ({
   const {
     appThemeMode: g,
     ...C
-  } = G0({
+  } = K0({
     allowSystemThemeMode: l,
     defaultThemeMode: m
   });
-  return j0({
+  return V0({
     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(ri, {
       ...C,
       allowSystemThemeMode: l,
       children: a
     })
   });
-}, U0 = Po`
+}, ei = Po`
   body {
     background: ${({
   theme: a
@@ -12961,7 +13480,7 @@ const Gr = Be(null), Y0 = ({
 }) => a.mode};
     }
   }
-`, Z0 = Po`
+`, ti = Po`
   @media (pointer: fine) {
     @-moz-document url-prefix() {
       * {
@@ -13014,30 +13533,30 @@ const Gr = Be(null), Y0 = ({
       background-color: transparent;
     }
   }
-`, si = We`
-  ${U0};
-  ${Z0};
+`, xi = We`
+  ${ei};
+  ${ti};
 `;
 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,
+  xi as CommonStyles,
+  Ci as SwitchableModeThemeProvider,
+  ri as ThemeModeSwitchingProvider,
+  L as ThemeModes,
+  di as findThemeByNameAndMode,
+  gi as getFocusStyle,
+  ui as getFocusStyleProperties,
+  li 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,
+  ii as groupThemesByMode,
+  si as prepareThemesForSearch,
+  Z0 as theme,
+  mi as themesDefault,
+  bi as themesRebrand,
+  V0 as useStorage,
   to as useTheme,
-  ii as useThemeModeSwitchingContext,
-  G0 as useThemeModeSwitchingManager,
-  K0 as withContrast,
+  pi as useThemeModeSwitchingContext,
+  K0 as useThemeModeSwitchingManager,
+  ci as withContrast,
   V as withOpacity
 };