@redis-ui/styles 12.5.0 → 12.9.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useTheme as To, css as $r, ThemeProvider as Fo, createGlobalStyle as Eo } from "styled-components";
-import Ae, { useRef as Ge, useCallback as wr, useState as Ce, useEffect as Dr, useLayoutEffect as Io, createContext as Oo, useMemo as Mo, useContext as _o } from "react";
+import { useTheme as To, css as zr, ThemeProvider as Fo, createGlobalStyle as Io } from "styled-components";
+import Ae, { useRef as Ge, useCallback as wr, useState as Ce, useEffect as Dr, useLayoutEffect as Eo, createContext as Bo, useMemo as Oo, useContext as Mo } from "react";
 const l = {
   transparent: "#00000000",
   pink500: "#de47bb",
@@ -391,7 +391,7 @@ const l = {
       color: l.blue600
     }
   }
-}, Bo = {
+}, _o = {
   sizes: {
     L: {
       size: "3rem",
@@ -1202,14 +1202,14 @@ function Qo(t, a) {
   var { space: s, values: u, alpha: d } = Zo(t);
   return s[0] === "h" ? `${s}a(${u[0]}, ${u[1]}%, ${u[2]}%, ${a})` : `${s}a(${u}, ${a})`;
 }
-function B() {
-  return B = Object.assign ? Object.assign.bind() : function(t) {
+function _() {
+  return _ = Object.assign ? Object.assign.bind() : function(t) {
     for (var a = 1; a < arguments.length; a++) {
       var s = arguments[a];
       for (var u in s) ({}).hasOwnProperty.call(s, u) && (t[u] = s[u]);
     }
     return t;
-  }, B.apply(null, arguments);
+  }, _.apply(null, arguments);
 }
 function rt(t) {
   if (t === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -1527,11 +1527,11 @@ var Y = /* @__PURE__ */ function(t) {
   }
   return a;
 }(/* @__PURE__ */ Gr(Error));
-function Br(t) {
+function _r(t) {
   return Math.round(t * 255);
 }
 function lt(t, a, s) {
-  return Br(t) + "," + Br(a) + "," + Br(s);
+  return _r(t) + "," + _r(a) + "," + _r(s);
 }
 function br(t, a, s, u) {
   if (u === void 0 && (u = lt), a === 0)
@@ -1847,7 +1847,7 @@ function qr(t, a, s) {
     return Xr("#" + or(t.red) + or(t.green) + or(t.blue));
   throw new Y(6);
 }
-function zr(t, a, s, u) {
+function $r(t, a, s, u) {
   if (typeof t == "string" && typeof a == "number") {
     var d = tr(t);
     return "rgba(" + d.red + "," + d.green + "," + d.blue + "," + a + ")";
@@ -1870,7 +1870,7 @@ var yt = function(a) {
 };
 function Q(t) {
   if (typeof t != "object") throw new Y(8);
-  if (kt(t)) return zr(t);
+  if (kt(t)) return $r(t);
   if (yt(t)) return qr(t);
   if (wt(t)) return ht(t);
   if (vt(t)) return Ct(t);
@@ -1888,7 +1888,7 @@ function H(t) {
 function St(t, a) {
   if (a === "transparent") return a;
   var s = Z(a);
-  return Q(B({}, s, {
+  return Q(_({}, s, {
     hue: s.hue + parseFloat(t)
   }));
 }
@@ -1896,18 +1896,18 @@ H(St);
 function cr(t, a, s) {
   return Math.max(t, Math.min(a, s));
 }
-function $t(t, a) {
+function zt(t, a) {
   if (a === "transparent") return a;
   var s = Z(a);
-  return Q(B({}, s, {
+  return Q(_({}, s, {
     lightness: cr(0, 1, s.lightness - parseFloat(t))
   }));
 }
-var zt = H($t), Rt = zt;
+var $t = H(zt), Rt = $t;
 function Pt(t, a) {
   if (a === "transparent") return a;
   var s = Z(a);
-  return Q(B({}, s, {
+  return Q(_({}, s, {
     saturation: cr(0, 1, s.saturation - parseFloat(t))
   }));
 }
@@ -1923,18 +1923,18 @@ function Wt(t) {
 function Tt(t, a) {
   if (a === "transparent") return a;
   var s = Z(a);
-  return Q(B({}, s, {
+  return Q(_({}, s, {
     lightness: cr(0, 1, s.lightness + parseFloat(t))
   }));
 }
-var Ft = H(Tt), Et = Ft;
-function It(t, a, s) {
+var Ft = H(Tt), It = Ft;
+function Et(t, a, s) {
   if (a === "transparent") return s;
   if (s === "transparent") return a;
   if (t === 0) return s;
-  var u = tr(a), d = B({}, u, {
+  var u = tr(a), d = _({}, u, {
     alpha: typeof u.alpha == "number" ? u.alpha : 1
-  }), g = tr(s), f = B({}, g, {
+  }), g = tr(s), f = _({}, g, {
     alpha: typeof g.alpha == "number" ? g.alpha : 1
   }), h = d.alpha - f.alpha, C = parseFloat(t) * 2 - 1, y = C * h === -1 ? C : C + h, k = 1 + C * h, S = (y / k + 1) / 2, p = 1 - S, R = {
     red: Math.floor(d.red * S + f.red * p),
@@ -1942,39 +1942,39 @@ function It(t, a, s) {
     blue: Math.floor(d.blue * S + f.blue * p),
     alpha: d.alpha * parseFloat(t) + f.alpha * (1 - parseFloat(t))
   };
-  return zr(R);
+  return $r(R);
 }
-var Ot = H(It), Ne = Ot;
-function Mt(t, a) {
+var Bt = H(Et), Ne = Bt;
+function Ot(t, a) {
   if (a === "transparent") return a;
-  var s = tr(a), u = typeof s.alpha == "number" ? s.alpha : 1, d = B({}, s, {
+  var s = tr(a), u = typeof s.alpha == "number" ? s.alpha : 1, d = _({}, s, {
     alpha: cr(0, 1, (u * 100 + parseFloat(t) * 100) / 100)
   });
-  return zr(d);
+  return $r(d);
 }
-H(Mt);
-function _t(t, a) {
+H(Ot);
+function Mt(t, a) {
   if (a === "transparent") return a;
   var s = Z(a);
-  return Q(B({}, s, {
+  return Q(_({}, s, {
     saturation: cr(0, 1, s.saturation + parseFloat(t))
   }));
 }
-H(_t);
-function Bt(t, a) {
-  return a === "transparent" ? a : Q(B({}, Z(a), {
+H(Mt);
+function _t(t, a) {
+  return a === "transparent" ? a : Q(_({}, Z(a), {
     hue: parseFloat(t)
   }));
 }
-H(Bt);
+H(_t);
 function Ht(t, a) {
-  return a === "transparent" ? a : Q(B({}, Z(a), {
+  return a === "transparent" ? a : Q(_({}, Z(a), {
     lightness: parseFloat(t)
   }));
 }
 H(Ht);
 function jt(t, a) {
-  return a === "transparent" ? a : Q(B({}, Z(a), {
+  return a === "transparent" ? a : Q(_({}, Z(a), {
     saturation: parseFloat(t)
   }));
 }
@@ -1989,16 +1989,16 @@ function Dt(t, a) {
 H(Dt);
 function At(t, a) {
   if (a === "transparent") return a;
-  var s = tr(a), u = typeof s.alpha == "number" ? s.alpha : 1, d = B({}, s, {
+  var s = tr(a), u = typeof s.alpha == "number" ? s.alpha : 1, d = _({}, s, {
     alpha: cr(0, 1, +(u * 100 - parseFloat(t) * 100).toFixed(2) / 100)
   });
-  return zr(d);
+  return $r(d);
 }
 H(At);
 const F = (t, a) => Qo(t, a);
-function In(t) {
+function Mn(t) {
   const a = Wt(t), s = Math.max(Math.abs(a - 0.5) * 1.2, 0.3);
-  return a < 0.5 ? Et(s, t) : Rt(s, t);
+  return a < 0.5 ? It(s, t) : Rt(s, t);
 }
 const Gt = {
   shadow: o.core.shadow.shadow500,
@@ -2011,6 +2011,10 @@ const Gt = {
     closeIconColor: o.semantic.color.icon.neutral800,
     textColor: o.semantic.color.text.neutral800
   },
+  description: {
+    blockPadding: "3rem 0",
+    textColor: o.semantic.color.text.neutral800
+  },
   body: {
     blockPadding: "4rem 1.6rem"
   },
@@ -2396,6 +2400,10 @@ const Gt = {
     textColor: o.semantic.color.text.neutral800,
     gap: "0.8rem"
   },
+  description: {
+    blockPadding: "0 1.2rem",
+    textColor: o.semantic.color.text.neutral800
+  },
   body: {
     minWidth: "30rem",
     maxWidth: "50rem",
@@ -2407,6 +2415,8 @@ const Gt = {
   },
   overlay: { bgColor: F(o.semantic.color.background.neutral100, 0.9) }
 }, Qt = {
+  iconColor: o.semantic.color.icon.neutral700
+}, ra = {
   bgColor: o.semantic.color.background.neutral100,
   shadow: o.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -2419,7 +2429,7 @@ const Gt = {
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, ra = {
+}, ea = {
   closeButton: {
     iconColor: o.semantic.color.icon.neutral700
   },
@@ -2438,7 +2448,7 @@ const Gt = {
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, ea = {
+}, oa = {
   textColor: o.semantic.color.text.neutral100,
   border: "none",
   colorGroups: [
@@ -2453,7 +2463,7 @@ const Gt = {
     M: "3.2rem",
     L: "4.4rem"
   }
-}, oa = {
+}, ta = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -2507,7 +2517,7 @@ const Gt = {
   text: {
     color: o.semantic.color.text.neutral800
   }
-}, ta = {
+}, aa = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -2556,7 +2566,7 @@ const Gt = {
       }
     }
   }
-}, aa = {
+}, na = {
   bgColor: o.semantic.color.background.neutral100,
   shadow: o.core.shadow.shadow200,
   borderRadius: "0.8rem",
@@ -2576,7 +2586,7 @@ const Gt = {
     },
     customActions: { gap: "0.8rem" }
   }
-}, na = {
+}, la = {
   width: "100%",
   height: "fit-content",
   bgColor: o.semantic.color.background.neutral100,
@@ -2620,7 +2630,7 @@ const Gt = {
     width: "1px",
     color: o.semantic.color.border.neutral400
   }
-}, la = {
+}, ca = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -2723,11 +2733,11 @@ const Gt = {
 }, A = {
   bgColor: { disabled: o.semantic.color.background.neutral400 },
   textColor: { disabled: o.semantic.color.text.neutral600 }
-}, I = {
+}, E = {
   borderColor: { disabled: o.semantic.color.border.neutral500 },
   bgColor: { disabled: "transparent" },
   textColor: { disabled: o.semantic.color.text.neutral500 }
-}, ca = {
+}, ia = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -2766,9 +2776,9 @@ const Gt = {
           bgColor: F(o.semantic.color.background.success700, 0.12)
         },
         disabled: {
-          borderColor: I.borderColor.disabled,
-          bgColor: I.bgColor.disabled,
-          textColor: I.textColor.disabled
+          borderColor: E.borderColor.disabled,
+          bgColor: E.bgColor.disabled,
+          textColor: E.textColor.disabled
         }
       }
     },
@@ -2802,9 +2812,9 @@ const Gt = {
           bgColor: F(o.semantic.color.background.attention700, 0.12)
         },
         disabled: {
-          borderColor: I.borderColor.disabled,
-          bgColor: I.bgColor.disabled,
-          textColor: I.textColor.disabled
+          borderColor: E.borderColor.disabled,
+          bgColor: E.bgColor.disabled,
+          textColor: E.textColor.disabled
         }
       }
     },
@@ -2838,9 +2848,9 @@ const Gt = {
           bgColor: F(o.semantic.color.background.danger700, 0.12)
         },
         disabled: {
-          borderColor: I.borderColor.disabled,
-          bgColor: I.bgColor.disabled,
-          textColor: I.textColor.disabled
+          borderColor: E.borderColor.disabled,
+          bgColor: E.bgColor.disabled,
+          textColor: E.textColor.disabled
         }
       }
     },
@@ -2874,9 +2884,9 @@ const Gt = {
           bgColor: F(o.semantic.color.background.notice700, 0.12)
         },
         disabled: {
-          borderColor: I.borderColor.disabled,
-          bgColor: I.bgColor.disabled,
-          textColor: I.textColor.disabled
+          borderColor: E.borderColor.disabled,
+          bgColor: E.bgColor.disabled,
+          textColor: E.textColor.disabled
         }
       }
     },
@@ -2910,14 +2920,14 @@ const Gt = {
           bgColor: F(o.semantic.color.background.informative700, 0.12)
         },
         disabled: {
-          borderColor: I.borderColor.disabled,
-          bgColor: I.bgColor.disabled,
-          textColor: I.textColor.disabled
+          borderColor: E.borderColor.disabled,
+          bgColor: E.bgColor.disabled,
+          textColor: E.textColor.disabled
         }
       }
     }
   }
-}, ia = {
+}, sa = {
   sizes: {
     M: {
       borderRadius: o.core.space.space100,
@@ -2957,7 +2967,7 @@ const Gt = {
       borderColor: o.semantic.color.border.attention300
     }
   }
-}, sa = {
+}, da = {
   variants: {
     informative: { iconColor: o.semantic.color.icon.informative600 },
     danger: { iconColor: o.semantic.color.icon.danger600 },
@@ -2965,7 +2975,7 @@ const Gt = {
     notice: { iconColor: o.semantic.color.icon.notice600 },
     success: { iconColor: o.semantic.color.icon.success600 }
   }
-}, da = {
+}, ma = {
   collapsed: {
     bgColor: o.semantic.color.background.neutral100,
     shadow: o.core.shadow.shadow100,
@@ -3069,7 +3079,7 @@ const Gt = {
       }
     }
   }
-}, ma = {
+}, ua = {
   card: {
     gap: "2.4rem",
     bgColor: o.semantic.color.background.neutral100,
@@ -3096,7 +3106,7 @@ const Gt = {
   grid: {
     gap: "1.6rem"
   }
-}, ua = {
+}, ga = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -3140,7 +3150,7 @@ const Gt = {
       }
     }
   }
-}, ga = {
+}, ba = {
   width: "3rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -3192,7 +3202,7 @@ const Gt = {
       }
     }
   }
-}, ba = {
+}, pa = {
   table: {
     tableContainer: {
       backgroundColor: o.semantic.color.background.neutral100,
@@ -3211,6 +3221,31 @@ const Gt = {
       color: o.semantic.color.text.neutral700
     }
   },
+  pagination: {
+    bar: {
+      borderColor: o.semantic.color.border.neutral400,
+      borderSize: "1px 0 0",
+      gap: "3.2rem",
+      height: "4rem",
+      padding: "0 1.2rem",
+      fontSize: "1.2rem",
+      textColor: o.semantic.color.text.neutral700
+    },
+    navButton: {
+      color: o.semantic.color.text.neutral700,
+      disabledColor: o.semantic.color.text.neutral600,
+      width: "1.6rem",
+      height: "2rem",
+      padding: "0.4rem 0.2rem"
+    },
+    select: {
+      height: "2rem",
+      padding: "0 0.4rem",
+      gap: "0.4rem",
+      fontSize: "1.2rem",
+      textColor: o.semantic.color.text.neutral800
+    }
+  },
   components: {
     tablePagination: {
       paginationIconButton: {
@@ -3237,7 +3272,7 @@ const Gt = {
       }
     }
   }
-}, pa = {
+}, fa = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -3260,7 +3295,7 @@ const Gt = {
   actionsBar: {
     gap: "1.6rem"
   }
-}, fa = {
+}, xa = {
   variants: {
     default: {
       gap: "4rem",
@@ -3335,13 +3370,13 @@ const Gt = {
       }
     }
   }
-}, K = "transparent", $e = "0.4rem 0.6rem", ze = "0", Re = "0.4rem", Pe = "0", xa = {
+}, K = "transparent", ze = "0.4rem 0.6rem", $e = "0", Re = "0.4rem", Pe = "0", Ca = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
   variants: {
     primary: {
-      padding: $e,
+      padding: ze,
       borderRadius: Re,
       states: {
         normal: {
@@ -3361,7 +3396,7 @@ const Gt = {
       }
     },
     destructive: {
-      padding: $e,
+      padding: ze,
       borderRadius: Re,
       states: {
         normal: {
@@ -3381,7 +3416,7 @@ const Gt = {
       }
     },
     "primary-inline": {
-      padding: ze,
+      padding: $e,
       borderRadius: Pe,
       states: {
         normal: {
@@ -3401,7 +3436,7 @@ const Gt = {
       }
     },
     "destructive-inline": {
-      padding: ze,
+      padding: $e,
       borderRadius: Pe,
       states: {
         normal: {
@@ -3421,14 +3456,14 @@ const Gt = {
       }
     }
   }
-}, Ca = {
+}, ha = {
   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)",
   gap: "1.2rem",
   actions: { gap: "0.8rem", inlineMargin: "2.4rem 0" },
   toaster: { gap: "2rem" }
-}, We = "transparent", ha = {
+}, We = "transparent", ya = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -3470,7 +3505,7 @@ const Gt = {
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, ya = {
+}, ka = {
   textColor: o.semantic.color.text.neutral800,
   bgColor: o.semantic.color.background.neutral100,
   shadow: o.core.shadow.shadow400,
@@ -3484,7 +3519,7 @@ const Gt = {
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, ka = {
+}, va = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -3497,7 +3532,7 @@ const Gt = {
     iconColor: o.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, va = {
+}, wa = {
   colors: {
     primary: o.semantic.color.text.neutral800,
     secondary: o.semantic.color.text.neutral700
@@ -3529,6 +3564,10 @@ const Gt = {
         fontSize: o.core.font.fontSize.s14,
         fontWeight: "600"
       }
+    },
+    fontWeight: {
+      bold: "700",
+      semiBold: "600"
     }
   },
   body: {
@@ -3563,7 +3602,7 @@ const Gt = {
       semiBold: "600"
     }
   }
-}, wa = {
+}, Sa = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -3615,7 +3654,7 @@ const Gt = {
       borderColor: o.semantic.color.border.neutral300
     }
   }
-}, Sa = {
+}, za = {
   bgColor: o.semantic.color.background.neutral100,
   textColor: o.semantic.color.background.neutral700,
   fontFamily: o.core.font.fontFamily.regular,
@@ -3630,11 +3669,11 @@ const Gt = {
     bgColor: o.semantic.color.background.neutral600,
     borderRadius: "99rem"
   }
-}, On = {
+}, _n = {
   name: "old",
   ...o,
   components: {
-    actionIconButton: Bo,
+    actionIconButton: _o,
     appBar: Ho,
     appSelectionMenu: jo,
     autoComplete: Lo,
@@ -3659,34 +3698,35 @@ const Gt = {
     loader: Jt,
     menu: Vt,
     modal: Zt,
-    popover: Qt,
-    popupCard: ra,
-    profileIcon: ea,
-    progressBar: oa,
-    radio: ta,
-    searchBar: aa,
-    section: na,
-    select: la,
-    semanticButton: ca,
-    semanticContainer: ia,
-    semanticIcon: sa,
-    sideBar: da,
-    skeleton: ma,
-    stepper: ua,
-    switchButton: ga,
-    table: ba,
-    tableHeading: pa,
-    tabs: fa,
-    textButton: xa,
-    toast: Ca,
-    toggleButton: ha,
-    tooltip: ya,
-    treeView: ka,
-    typography: va,
-    windowBar: wa
+    moreInfoIcon: Qt,
+    popover: ra,
+    popupCard: ea,
+    profileIcon: oa,
+    progressBar: ta,
+    radio: aa,
+    searchBar: na,
+    section: la,
+    select: ca,
+    semanticButton: ia,
+    semanticContainer: sa,
+    semanticIcon: da,
+    sideBar: ma,
+    skeleton: ua,
+    stepper: ga,
+    switchButton: ba,
+    table: pa,
+    tableHeading: fa,
+    tabs: xa,
+    textButton: Ca,
+    toast: ha,
+    toggleButton: ya,
+    tooltip: ka,
+    treeView: va,
+    typography: wa,
+    windowBar: Sa
   },
   globals: {
-    body: Sa,
+    body: za,
     scrollbar: $a
   }
 }, c = {
@@ -4080,7 +4120,7 @@ const Gt = {
       color: c.blue600
     }
   }
-}, za = {
+}, Ra = {
   sizes: {
     L: {
       size: "3rem",
@@ -4133,7 +4173,7 @@ const Gt = {
       }
     }
   }
-}, Ra = {
+}, Pa = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${e.semantic.color.border.neutral400}`,
@@ -4151,7 +4191,7 @@ const Gt = {
       color: e.semantic.color.text.neutral100
     }
   }
-}, Pa = {
+}, Wa = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -4188,12 +4228,12 @@ const Gt = {
       color: e.semantic.color.text.neutral800
     }
   }
-}, Wa = {
+}, Ta = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Te = "1px", Ta = {
+}, Te = "1px", Fa = {
   padding: `${e.core.space.space025} ${e.core.space.space050}`,
   gap: e.core.space.space025,
   borderRadius: "2px",
@@ -4256,7 +4296,7 @@ const Gt = {
       iconColor: e.semantic.color.text.neutral500
     }
   }
-}, Fa = {
+}, Ia = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -4314,7 +4354,7 @@ const Gt = {
   defaultItem: {
     gap: "0.4rem"
   }
-}, Ia = {
+}, Ba = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -4537,7 +4577,7 @@ const Gt = {
       }
     }
   }
-}, Ba = {
+}, Ha = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -4594,7 +4634,7 @@ const Gt = {
       }
     }
   }
-}, Ha = {
+}, ja = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -4611,13 +4651,13 @@ const Gt = {
     gap: "0.4rem",
     padding: "1.2rem 1.6rem"
   }
-}, ja = {
+}, La = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: e.semantic.color.border.neutral500
-}, La = {
+}, Da = {
   fontSize: e.core.font.fontSize.s14,
   fontWeight: "400",
   fontFamily: e.core.font.fontFamily.regular,
@@ -4681,7 +4721,7 @@ const Gt = {
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Da = {
+}, Aa = {
   shadow: e.core.shadow.shadow500,
   bgColor: e.semantic.color.background.neutral100,
   sidePadding: "3.2rem",
@@ -4692,6 +4732,10 @@ const Gt = {
     closeIconColor: e.semantic.color.icon.neutral800,
     textColor: e.semantic.color.text.neutral800
   },
+  description: {
+    blockPadding: "3rem 0",
+    textColor: e.semantic.color.text.neutral800
+  },
   body: {
     blockPadding: "4rem 1.6rem"
   },
@@ -4701,7 +4745,7 @@ const Gt = {
     buttonsGap: "1.6rem"
   },
   overlay: { bgColor: F(e.semantic.color.background.neutral100, 0.8) }
-}, Aa = {
+}, Ga = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${e.semantic.color.border.neutral400}`
@@ -4734,7 +4778,7 @@ const Gt = {
       padding: "0.8rem 1.6rem"
     }
   }
-}, Ga = {
+}, Xa = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -4748,7 +4792,7 @@ const Gt = {
       textColor: e.semantic.color.text.danger500
     }
   }
-}, Xa = {
+}, qa = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -4792,7 +4836,7 @@ const Gt = {
     }
   },
   borderRadius: "0.4rem"
-}, qa = {
+}, Na = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -4883,7 +4927,7 @@ const Gt = {
       textColor: e.semantic.color.text.danger500
     }
   }
-}, Na = {
+}, Ya = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -4904,7 +4948,7 @@ const Gt = {
   required: {
     textColor: e.semantic.color.text.danger500
   }
-}, Ya = {
+}, Ua = {
   variants: {
     block: {
       sizes: {
@@ -4975,7 +5019,7 @@ const Gt = {
       }
     }
   }
-}, Ua = {
+}, Ka = {
   size: "5rem",
   gap: "0.5rem",
   textColor: e.semantic.color.icon.neutral700,
@@ -4996,7 +5040,7 @@ const Gt = {
       textColor: e.semantic.color.icon.neutral100
     }
   }
-}, Ka = {
+}, Ja = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -5067,7 +5111,7 @@ const Gt = {
       }
     }
   }
-}, Ja = {
+}, Va = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -5081,6 +5125,10 @@ const Gt = {
     textColor: e.semantic.color.text.neutral800,
     gap: "0.8rem"
   },
+  description: {
+    blockPadding: "0 1.2rem",
+    textColor: e.semantic.color.text.neutral800
+  },
   body: {
     minWidth: "30rem",
     maxWidth: "50rem",
@@ -5091,7 +5139,9 @@ const Gt = {
     buttonsGap: "0.8rem"
   },
   overlay: { bgColor: "rgba(255, 255, 255, 0.9)" }
-}, Va = {
+}, Za = {
+  iconColor: e.semantic.color.icon.neutral700
+}, Qa = {
   bgColor: e.semantic.color.background.neutral100,
   shadow: e.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -5104,7 +5154,7 @@ const Gt = {
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, Za = {
+}, r0 = {
   closeButton: {
     iconColor: e.semantic.color.icon.neutral700
   },
@@ -5123,7 +5173,7 @@ const Gt = {
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, Qa = {
+}, e0 = {
   textColor: e.semantic.color.text.primary600,
   border: "solid 1px transparent",
   colorGroups: [
@@ -5158,7 +5208,7 @@ const Gt = {
     M: "3.2rem",
     L: "4.4rem"
   }
-}, r0 = {
+}, o0 = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -5212,7 +5262,7 @@ const Gt = {
   text: {
     color: e.semantic.color.text.neutral800
   }
-}, e0 = {
+}, t0 = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -5261,7 +5311,7 @@ const Gt = {
       }
     }
   }
-}, o0 = {
+}, a0 = {
   bgColor: e.semantic.color.background.neutral100,
   shadow: `0px 0px 0px 1px ${e.semantic.color.border.neutral600}`,
   borderRadius: "0.8rem",
@@ -5281,7 +5331,7 @@ const Gt = {
     },
     customActions: { gap: "0.8rem" }
   }
-}, t0 = {
+}, n0 = {
   width: "100%",
   height: "fit-content",
   bgColor: e.semantic.color.background.neutral100,
@@ -5325,7 +5375,7 @@ const Gt = {
     width: "1px",
     color: e.semantic.color.border.neutral600
   }
-}, a0 = {
+}, l0 = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -5428,11 +5478,11 @@ const Gt = {
 }, G = {
   bgColor: { disabled: e.semantic.color.background.neutral400 },
   textColor: { disabled: e.semantic.color.text.neutral600 }
-}, O = {
+}, B = {
   borderColor: { disabled: e.semantic.color.border.neutral500 },
   bgColor: { disabled: "transparent" },
   textColor: { disabled: e.semantic.color.text.neutral500 }
-}, X = (t, a) => `color-mix(in srgb-linear, ${t} ${a}%, transparent)`, n0 = {
+}, X = (t, a) => `color-mix(in srgb-linear, ${t} ${a}%, transparent)`, c0 = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -5471,9 +5521,9 @@ const Gt = {
           bgColor: X(e.semantic.color.background.success700, 12)
         },
         disabled: {
-          borderColor: O.borderColor.disabled,
-          bgColor: O.bgColor.disabled,
-          textColor: O.textColor.disabled
+          borderColor: B.borderColor.disabled,
+          bgColor: B.bgColor.disabled,
+          textColor: B.textColor.disabled
         }
       }
     },
@@ -5507,9 +5557,9 @@ const Gt = {
           bgColor: X(e.semantic.color.background.attention700, 12)
         },
         disabled: {
-          borderColor: O.borderColor.disabled,
-          bgColor: O.bgColor.disabled,
-          textColor: O.textColor.disabled
+          borderColor: B.borderColor.disabled,
+          bgColor: B.bgColor.disabled,
+          textColor: B.textColor.disabled
         }
       }
     },
@@ -5543,9 +5593,9 @@ const Gt = {
           bgColor: X(e.semantic.color.background.danger700, 12)
         },
         disabled: {
-          borderColor: O.borderColor.disabled,
-          bgColor: O.bgColor.disabled,
-          textColor: O.textColor.disabled
+          borderColor: B.borderColor.disabled,
+          bgColor: B.bgColor.disabled,
+          textColor: B.textColor.disabled
         }
       }
     },
@@ -5579,9 +5629,9 @@ const Gt = {
           bgColor: X(e.semantic.color.background.notice700, 12)
         },
         disabled: {
-          borderColor: O.borderColor.disabled,
-          bgColor: O.bgColor.disabled,
-          textColor: O.textColor.disabled
+          borderColor: B.borderColor.disabled,
+          bgColor: B.bgColor.disabled,
+          textColor: B.textColor.disabled
         }
       }
     },
@@ -5615,14 +5665,14 @@ const Gt = {
           bgColor: X(e.semantic.color.background.informative700, 12)
         },
         disabled: {
-          borderColor: O.borderColor.disabled,
-          bgColor: O.bgColor.disabled,
-          textColor: O.textColor.disabled
+          borderColor: B.borderColor.disabled,
+          bgColor: B.bgColor.disabled,
+          textColor: B.textColor.disabled
         }
       }
     }
   }
-}, l0 = {
+}, i0 = {
   sizes: {
     M: {
       borderRadius: e.core.space.space100,
@@ -5662,7 +5712,7 @@ const Gt = {
       borderColor: e.semantic.color.border.attention300
     }
   }
-}, c0 = {
+}, s0 = {
   variants: {
     informative: { iconColor: e.semantic.color.icon.informative600 },
     danger: { iconColor: e.semantic.color.icon.danger600 },
@@ -5670,7 +5720,7 @@ const Gt = {
     notice: { iconColor: e.semantic.color.icon.notice600 },
     success: { iconColor: e.semantic.color.icon.success600 }
   }
-}, i0 = {
+}, d0 = {
   collapsed: {
     bgColor: e.semantic.color.background.neutral300,
     shadow: "none",
@@ -5775,7 +5825,7 @@ const Gt = {
       }
     }
   }
-}, s0 = {
+}, m0 = {
   card: {
     gap: "2.4rem",
     bgColor: e.semantic.color.background.neutral100,
@@ -5802,7 +5852,7 @@ const Gt = {
   grid: {
     gap: "1.6rem"
   }
-}, d0 = {
+}, u0 = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -5846,7 +5896,7 @@ const Gt = {
       }
     }
   }
-}, m0 = {
+}, g0 = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -5898,7 +5948,7 @@ const Gt = {
       }
     }
   }
-}, u0 = {
+}, b0 = {
   table: {
     tableContainer: {
       backgroundColor: e.semantic.color.background.neutral100,
@@ -5917,6 +5967,31 @@ const Gt = {
       color: e.semantic.color.text.neutral700
     }
   },
+  pagination: {
+    bar: {
+      borderColor: e.color.dusk200,
+      borderSize: "1px 0 0",
+      gap: "3.2rem",
+      height: "4rem",
+      padding: "0 1.2rem",
+      fontSize: "1.2rem",
+      textColor: e.semantic.color.text.neutral700
+    },
+    navButton: {
+      color: e.semantic.color.text.neutral700,
+      disabledColor: e.semantic.color.text.neutral600,
+      width: "1.6rem",
+      height: "2rem",
+      padding: "0.4rem 0.2rem"
+    },
+    select: {
+      height: "2rem",
+      padding: "0 0.4rem",
+      gap: "0.4rem",
+      fontSize: "1.2rem",
+      textColor: e.color.dusk800
+    }
+  },
   components: {
     tablePagination: {
       paginationIconButton: {
@@ -5924,7 +5999,7 @@ const Gt = {
         disabledColor: e.semantic.color.text.neutral700
       },
       paginationRow: {
-        borderTop: e.semantic.color.border.neutral400
+        borderTop: e.color.dusk200
       },
       countInfoText: {
         color: e.semantic.color.text.neutral700
@@ -5943,7 +6018,7 @@ const Gt = {
       }
     }
   }
-}, g0 = {
+}, p0 = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -5966,7 +6041,7 @@ const Gt = {
   actionsBar: {
     gap: "1.6rem"
   }
-}, b0 = {
+}, f0 = {
   variants: {
     default: {
       gap: "4rem",
@@ -6049,14 +6124,14 @@ const Gt = {
       }
     }
   }
-}, J = "transparent", Fe = "0.4rem 0.6rem", Ee = "0", Ie = "0.4rem", Oe = "0", p0 = {
+}, J = "transparent", Fe = "0.4rem 0.6rem", Ie = "0", Ee = "0.4rem", Be = "0", x0 = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
   variants: {
     primary: {
       padding: Fe,
-      borderRadius: Ie,
+      borderRadius: Ee,
       states: {
         normal: {
           bgColor: J,
@@ -6077,7 +6152,7 @@ const Gt = {
     },
     destructive: {
       padding: Fe,
-      borderRadius: Ie,
+      borderRadius: Ee,
       states: {
         normal: {
           bgColor: J,
@@ -6096,8 +6171,8 @@ const Gt = {
       }
     },
     "primary-inline": {
-      padding: Ee,
-      borderRadius: Oe,
+      padding: Ie,
+      borderRadius: Be,
       states: {
         normal: {
           bgColor: J,
@@ -6116,8 +6191,8 @@ const Gt = {
       }
     },
     "destructive-inline": {
-      padding: Ee,
-      borderRadius: Oe,
+      padding: Ie,
+      borderRadius: Be,
       states: {
         normal: {
           bgColor: J,
@@ -6136,14 +6211,14 @@ const Gt = {
       }
     }
   }
-}, f0 = {
+}, C0 = {
   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)",
   gap: "1.2rem",
   actions: { gap: "0.8rem", inlineMargin: "2.4rem 0" },
   toaster: { gap: "2rem" }
-}, kr = "transparent", x0 = {
+}, kr = "transparent", h0 = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -6198,7 +6273,7 @@ const Gt = {
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, C0 = {
+}, y0 = {
   textColor: e.semantic.color.text.neutral800,
   bgColor: e.semantic.color.background.neutral100,
   shadow: e.core.shadow.shadow400,
@@ -6212,7 +6287,7 @@ const Gt = {
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, h0 = {
+}, k0 = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -6225,7 +6300,7 @@ const Gt = {
     iconColor: e.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, y0 = {
+}, v0 = {
   colors: {
     primary: e.semantic.color.text.neutral800,
     secondary: e.semantic.color.text.neutral700
@@ -6257,6 +6332,10 @@ const Gt = {
         fontSize: e.core.font.fontSize.s14,
         fontWeight: "600"
       }
+    },
+    fontWeight: {
+      bold: "700",
+      semiBold: "600"
     }
   },
   body: {
@@ -6291,7 +6370,7 @@ const Gt = {
       semiBold: "600"
     }
   }
-}, k0 = {
+}, w0 = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -6343,13 +6422,13 @@ const Gt = {
       borderColor: e.semantic.color.border.neutral300
     }
   }
-}, v0 = {
+}, S0 = {
   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"
-}, w0 = {
+}, z0 = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: e.color.dusk100,
@@ -6358,64 +6437,65 @@ const Gt = {
     bgColor: e.color.dusk400,
     borderRadius: "99rem"
   }
-}, S0 = {
+}, $0 = {
   name: "light",
   ...e,
   components: {
-    actionIconButton: za,
-    appBar: Ra,
-    appSelectionMenu: Pa,
-    autoComplete: Wa,
-    badge: Ta,
-    banner: Fa,
+    actionIconButton: Ra,
+    appBar: Pa,
+    appSelectionMenu: Wa,
+    autoComplete: Ta,
+    badge: Fa,
+    banner: Ia,
     boxSelectionGroup: Ea,
-    button: Ia,
+    button: Ba,
     buttonGroup: Oa,
     card: Ma,
     checkbox: _a,
-    chip: Ba,
-    chipList: Ha,
-    countryFlag: ja,
-    datePicker: La,
-    drawer: Da,
-    filters: Aa,
-    formField: Ga,
-    iconButton: Xa,
-    input: qa,
-    label: Na,
-    link: Ya,
-    loader: Ua,
-    menu: Ka,
-    modal: Ja,
-    popover: Va,
-    popupCard: Za,
-    profileIcon: Qa,
-    progressBar: r0,
-    radio: e0,
-    searchBar: o0,
-    section: t0,
-    select: a0,
-    semanticButton: n0,
-    semanticContainer: l0,
-    semanticIcon: c0,
-    sideBar: i0,
-    skeleton: s0,
-    stepper: d0,
-    switchButton: m0,
-    table: u0,
-    tableHeading: g0,
-    tabs: b0,
-    textButton: p0,
-    toast: f0,
-    toggleButton: x0,
-    tooltip: C0,
-    treeView: h0,
-    typography: y0,
-    windowBar: k0
+    chip: Ha,
+    chipList: ja,
+    countryFlag: La,
+    datePicker: Da,
+    drawer: Aa,
+    filters: Ga,
+    formField: Xa,
+    iconButton: qa,
+    input: Na,
+    label: Ya,
+    link: Ua,
+    loader: Ka,
+    menu: Ja,
+    modal: Va,
+    moreInfoIcon: Za,
+    popover: Qa,
+    popupCard: r0,
+    profileIcon: e0,
+    progressBar: o0,
+    radio: t0,
+    searchBar: a0,
+    section: n0,
+    select: l0,
+    semanticButton: c0,
+    semanticContainer: i0,
+    semanticIcon: s0,
+    sideBar: d0,
+    skeleton: m0,
+    stepper: u0,
+    switchButton: g0,
+    table: b0,
+    tableHeading: p0,
+    tabs: f0,
+    textButton: x0,
+    toast: C0,
+    toggleButton: h0,
+    tooltip: y0,
+    treeView: k0,
+    typography: v0,
+    windowBar: w0
   },
   globals: {
-    body: v0,
-    scrollbar: w0
+    body: S0,
+    scrollbar: z0
   }
 }, i = {
   transparent: "#00000000",
@@ -6808,7 +6888,7 @@ const Gt = {
       color: i.blue600
     }
   }
-}, $0 = {
+}, R0 = {
   sizes: {
     L: {
       size: "3rem",
@@ -6861,7 +6941,7 @@ const Gt = {
       }
     }
   }
-}, z0 = {
+}, P0 = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${r.semantic.color.border.neutral400}`,
@@ -6879,7 +6959,7 @@ const Gt = {
       color: r.semantic.color.text.neutral100
     }
   }
-}, R0 = {
+}, W0 = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -6916,17 +6996,17 @@ const Gt = {
       color: r.semantic.color.text.neutral800
     }
   }
-}, P0 = {
+}, T0 = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Me = "1px", W0 = {
+}, Oe = "1px", F0 = {
   padding: `${r.core.space.space025} ${r.core.space.space050}`,
   gap: r.core.space.space025,
   borderRadius: "2px",
-  height: `calc(${r.core.space.space200} + ${Me} * 2)`,
-  borderWidth: Me,
+  height: `calc(${r.core.space.space200} + ${Oe} * 2)`,
+  borderWidth: Oe,
   borderStyle: "solid",
   variants: {
     white: {
@@ -6984,7 +7064,7 @@ const Gt = {
       iconColor: r.semantic.color.text.neutral500
     }
   }
-}, T0 = {
+}, I0 = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -6996,7 +7076,7 @@ const Gt = {
     }
   },
   split: { minWidth: "0.8rem" }
-}, F0 = {
+}, E0 = {
   gap: r.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -7042,7 +7122,7 @@ const Gt = {
   defaultItem: {
     gap: "0.4rem"
   }
-}, E0 = {
+}, B0 = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -7156,7 +7236,7 @@ const Gt = {
       }
     }
   }
-}, I0 = {
+}, O0 = {
   borderRadius: "0.4rem",
   border: `1px solid ${r.semantic.color.border.neutral600}`,
   fontSize: "1.4rem",
@@ -7199,13 +7279,13 @@ const Gt = {
       }
     }
   }
-}, O0 = {
+}, M0 = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.neutral100,
   shadow: r.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, M0 = {
+}, _0 = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -7269,7 +7349,7 @@ const Gt = {
       }
     }
   }
-}, _0 = {
+}, H0 = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -7326,7 +7406,7 @@ const Gt = {
       }
     }
   }
-}, B0 = {
+}, j0 = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -7343,13 +7423,13 @@ const Gt = {
     gap: "0.4rem",
     padding: "1.2rem 1.6rem"
   }
-}, H0 = {
+}, L0 = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: r.semantic.color.border.neutral500
-}, j0 = {
+}, D0 = {
   fontSize: r.core.font.fontSize.s14,
   fontWeight: "400",
   fontFamily: r.core.font.fontFamily.regular,
@@ -7413,7 +7493,7 @@ const Gt = {
   weekNumCell: {
     fontSize: "1rem"
   }
-}, L0 = {
+}, A0 = {
   shadow: `0 0 0.5px 1px ${r.color.dark600}, -8px 0 16px 0 ${r.color.dark900}`,
   bgColor: r.color.dark700,
   sidePadding: "3.2rem",
@@ -7424,6 +7504,10 @@ const Gt = {
     closeIconColor: r.semantic.color.icon.neutral800,
     textColor: r.semantic.color.text.neutral800
   },
+  description: {
+    blockPadding: "3rem 0",
+    textColor: r.semantic.color.text.neutral800
+  },
   body: {
     blockPadding: "4rem 1.6rem"
   },
@@ -7433,7 +7517,7 @@ const Gt = {
     buttonsGap: "1.6rem"
   },
   overlay: { bgColor: F(r.color.dark900, 0.8) }
-}, D0 = {
+}, G0 = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${r.semantic.color.border.neutral400}`
@@ -7466,7 +7550,7 @@ const Gt = {
       padding: "0.8rem 1.6rem"
     }
   }
-}, A0 = {
+}, X0 = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -7480,7 +7564,7 @@ const Gt = {
       textColor: r.semantic.color.text.danger500
     }
   }
-}, G0 = {
+}, q0 = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -7524,7 +7608,7 @@ const Gt = {
     }
   },
   borderRadius: "0.4rem"
-}, X0 = {
+}, N0 = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -7615,7 +7699,7 @@ const Gt = {
       textColor: r.semantic.color.text.danger500
     }
   }
-}, q0 = {
+}, Y0 = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -7636,7 +7720,7 @@ const Gt = {
   required: {
     textColor: r.semantic.color.text.danger500
   }
-}, N0 = {
+}, U0 = {
   variants: {
     block: {
       sizes: {
@@ -7706,7 +7790,7 @@ const Gt = {
       }
     }
   }
-}, Y0 = {
+}, K0 = {
   size: "5rem",
   gap: "0.5rem",
   textColor: r.semantic.color.icon.neutral700,
@@ -7727,7 +7811,7 @@ const Gt = {
       textColor: r.semantic.color.icon.neutral100
     }
   }
-}, U0 = {
+}, J0 = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -7798,7 +7882,7 @@ const Gt = {
       }
     }
   }
-}, K0 = {
+}, V0 = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -7812,6 +7896,10 @@ const Gt = {
     textColor: r.semantic.color.text.neutral800,
     gap: "0.8rem"
   },
+  description: {
+    blockPadding: "0 1.2rem",
+    textColor: r.semantic.color.text.neutral800
+  },
   body: {
     minWidth: "30rem",
     maxWidth: "50rem",
@@ -7822,7 +7910,9 @@ const Gt = {
     buttonsGap: "0.8rem"
   },
   overlay: { bgColor: "rgba(0, 0, 0, 0.9)" }
-}, J0 = {
+}, Z0 = {
+  iconColor: r.semantic.color.icon.neutral700
+}, Q0 = {
   bgColor: r.color.dark700,
   shadow: `0 0 0.5px 1px ${r.color.dark600}, 0 0 16px 8px ${r.color.dark900}`,
   borderRadius: "0.8rem",
@@ -7835,7 +7925,7 @@ const Gt = {
     height: "8px",
     shadow: `${r.color.dark600} 0px 1.5px`
   }
-}, V0 = {
+}, rn = {
   closeButton: {
     iconColor: r.semantic.color.icon.neutral700
   },
@@ -7854,7 +7944,7 @@ const Gt = {
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, Z0 = {
+}, en = {
   textColor: r.semantic.color.text.neutral100,
   border: "solid 1px transparent",
   colorGroups: [
@@ -7869,7 +7959,7 @@ const Gt = {
     M: "3.2rem",
     L: "4.4rem"
   }
-}, Q0 = {
+}, on = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -7923,7 +8013,7 @@ const Gt = {
   text: {
     color: r.semantic.color.text.neutral800
   }
-}, rn = {
+}, tn = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -7972,7 +8062,7 @@ const Gt = {
       }
     }
   }
-}, en = {
+}, an = {
   bgColor: r.semantic.color.background.neutral100,
   shadow: `0px 0px 0px 1px ${r.semantic.color.border.neutral600}`,
   borderRadius: "0.8rem",
@@ -7992,7 +8082,7 @@ const Gt = {
     },
     customActions: { gap: "0.8rem" }
   }
-}, on = {
+}, nn = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.neutral100,
@@ -8036,7 +8126,7 @@ const Gt = {
     width: "1px",
     color: r.semantic.color.border.neutral600
   }
-}, tn = {
+}, ln = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -8139,11 +8229,11 @@ const Gt = {
 }, q = {
   bgColor: { disabled: r.semantic.color.background.neutral400 },
   textColor: { disabled: r.semantic.color.text.neutral600 }
-}, M = {
+}, O = {
   borderColor: { disabled: r.semantic.color.border.neutral500 },
   bgColor: { disabled: "transparent" },
   textColor: { disabled: r.semantic.color.text.neutral500 }
-}, N = (t, a) => `color-mix(in srgb-linear, ${t} ${a}%, transparent)`, an = {
+}, N = (t, a) => `color-mix(in srgb-linear, ${t} ${a}%, transparent)`, cn = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -8182,9 +8272,9 @@ const Gt = {
           bgColor: N(r.semantic.color.background.success700, 12)
         },
         disabled: {
-          borderColor: M.borderColor.disabled,
-          bgColor: M.bgColor.disabled,
-          textColor: M.textColor.disabled
+          borderColor: O.borderColor.disabled,
+          bgColor: O.bgColor.disabled,
+          textColor: O.textColor.disabled
         }
       }
     },
@@ -8218,9 +8308,9 @@ const Gt = {
           bgColor: N(r.semantic.color.background.attention700, 12)
         },
         disabled: {
-          borderColor: M.borderColor.disabled,
-          bgColor: M.bgColor.disabled,
-          textColor: M.textColor.disabled
+          borderColor: O.borderColor.disabled,
+          bgColor: O.bgColor.disabled,
+          textColor: O.textColor.disabled
         }
       }
     },
@@ -8254,9 +8344,9 @@ const Gt = {
           bgColor: N(r.semantic.color.background.danger700, 12)
         },
         disabled: {
-          borderColor: M.borderColor.disabled,
-          bgColor: M.bgColor.disabled,
-          textColor: M.textColor.disabled
+          borderColor: O.borderColor.disabled,
+          bgColor: O.bgColor.disabled,
+          textColor: O.textColor.disabled
         }
       }
     },
@@ -8290,9 +8380,9 @@ const Gt = {
           bgColor: N(r.semantic.color.background.notice700, 12)
         },
         disabled: {
-          borderColor: M.borderColor.disabled,
-          bgColor: M.bgColor.disabled,
-          textColor: M.textColor.disabled
+          borderColor: O.borderColor.disabled,
+          bgColor: O.bgColor.disabled,
+          textColor: O.textColor.disabled
         }
       }
     },
@@ -8326,14 +8416,14 @@ const Gt = {
           bgColor: N(r.semantic.color.background.informative700, 12)
         },
         disabled: {
-          borderColor: M.borderColor.disabled,
-          bgColor: M.bgColor.disabled,
-          textColor: M.textColor.disabled
+          borderColor: O.borderColor.disabled,
+          bgColor: O.bgColor.disabled,
+          textColor: O.textColor.disabled
         }
       }
     }
   }
-}, nn = {
+}, sn = {
   sizes: {
     M: {
       borderRadius: r.core.space.space100,
@@ -8373,7 +8463,7 @@ const Gt = {
       borderColor: r.semantic.color.border.attention300
     }
   }
-}, ln = {
+}, dn = {
   variants: {
     informative: { iconColor: r.semantic.color.icon.informative600 },
     danger: { iconColor: r.semantic.color.icon.danger600 },
@@ -8381,7 +8471,7 @@ const Gt = {
     notice: { iconColor: r.semantic.color.icon.notice600 },
     success: { iconColor: r.semantic.color.icon.success600 }
   }
-}, cn = {
+}, mn = {
   collapsed: {
     bgColor: r.semantic.color.background.neutral100,
     shadow: "none",
@@ -8486,7 +8576,7 @@ const Gt = {
       }
     }
   }
-}, sn = {
+}, un = {
   card: {
     gap: "2.4rem",
     bgColor: r.semantic.color.background.neutral100,
@@ -8513,7 +8603,7 @@ const Gt = {
   grid: {
     gap: "1.6rem"
   }
-}, dn = {
+}, gn = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -8557,7 +8647,7 @@ const Gt = {
       }
     }
   }
-}, mn = {
+}, bn = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -8609,7 +8699,7 @@ const Gt = {
       }
     }
   }
-}, un = {
+}, pn = {
   table: {
     tableContainer: {
       backgroundColor: r.semantic.color.background.neutral100,
@@ -8628,6 +8718,31 @@ const Gt = {
       color: r.semantic.color.text.neutral700
     }
   },
+  pagination: {
+    bar: {
+      borderColor: r.semantic.color.border.neutral400,
+      borderSize: "1px 0 0",
+      gap: "3.2rem",
+      height: "4rem",
+      padding: "0 1.2rem",
+      fontSize: "1.2rem",
+      textColor: r.color.dark200
+    },
+    navButton: {
+      color: r.color.dark200,
+      disabledColor: r.color.dark300,
+      width: "1.6rem",
+      height: "2rem",
+      padding: "0.4rem 0.2rem"
+    },
+    select: {
+      height: "2rem",
+      padding: "0 0.4rem",
+      gap: "0.4rem",
+      fontSize: "1.2rem",
+      textColor: r.color.dark50
+    }
+  },
   components: {
     tablePagination: {
       paginationIconButton: {
@@ -8654,7 +8769,7 @@ const Gt = {
       }
     }
   }
-}, gn = {
+}, fn = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -8677,7 +8792,7 @@ const Gt = {
   actionsBar: {
     gap: "1.6rem"
   }
-}, bn = {
+}, xn = {
   variants: {
     default: {
       gap: "4rem",
@@ -8763,13 +8878,13 @@ const Gt = {
       }
     }
   }
-}, V = "transparent", _e = "0.4rem 0.6rem", Be = "0", He = "0.4rem", je = "0", pn = {
+}, V = "transparent", Me = "0.4rem 0.6rem", _e = "0", He = "0.4rem", je = "0", Cn = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
   variants: {
     primary: {
-      padding: _e,
+      padding: Me,
       borderRadius: He,
       states: {
         normal: {
@@ -8790,7 +8905,7 @@ const Gt = {
       }
     },
     destructive: {
-      padding: _e,
+      padding: Me,
       borderRadius: He,
       states: {
         normal: {
@@ -8810,7 +8925,7 @@ const Gt = {
       }
     },
     "primary-inline": {
-      padding: Be,
+      padding: _e,
       borderRadius: je,
       states: {
         normal: {
@@ -8830,7 +8945,7 @@ const Gt = {
       }
     },
     "destructive-inline": {
-      padding: Be,
+      padding: _e,
       borderRadius: je,
       states: {
         normal: {
@@ -8850,14 +8965,14 @@ const Gt = {
       }
     }
   }
-}, fn = {
+}, hn = {
   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)",
   gap: "1.2rem",
   actions: { gap: "0.8rem", inlineMargin: "2.4rem 0" },
   toaster: { gap: "2rem" }
-}, vr = "transparent", xn = {
+}, vr = "transparent", yn = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -8912,7 +9027,7 @@ const Gt = {
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, Cn = {
+}, kn = {
   textColor: r.semantic.color.text.neutral800,
   bgColor: r.color.dark600,
   shadow: `0 0 0.5px 1px ${r.color.dark700}`,
@@ -8926,7 +9041,7 @@ const Gt = {
     height: "8px",
     shadow: `${r.color.dark700} 0px 1.5px`
   }
-}, hn = {
+}, vn = {
   levelOffset: "1.8rem",
   item: {
     inlinePadding: "0.8rem 1.6rem",
@@ -8939,7 +9054,7 @@ const Gt = {
     iconColor: r.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, yn = {
+}, wn = {
   colors: {
     primary: r.semantic.color.text.neutral800,
     secondary: r.semantic.color.text.neutral700
@@ -8971,6 +9086,10 @@ const Gt = {
         fontSize: r.core.font.fontSize.s14,
         fontWeight: "600"
       }
+    },
+    fontWeight: {
+      bold: "700",
+      semiBold: "600"
     }
   },
   body: {
@@ -9005,7 +9124,7 @@ const Gt = {
       semiBold: "600"
     }
   }
-}, kn = {
+}, Sn = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -9057,13 +9176,13 @@ const Gt = {
       borderColor: r.semantic.color.border.neutral300
     }
   }
-}, vn = {
+}, zn = {
   bgColor: r.semantic.color.background.neutral100,
   textColor: r.semantic.color.background.neutral700,
   fontFamily: r.core.font.fontFamily.regular,
   fontSize: r.core.font.fontSize.s14,
   lineHeight: "1.4"
-}, wn = {
+}, $n = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: r.color.dark700,
@@ -9072,74 +9191,75 @@ const Gt = {
     bgColor: r.color.dark300,
     borderRadius: "99rem"
   }
-}, Mn = {
+}, Hn = {
   name: "dark",
   ...r,
   components: {
-    actionIconButton: $0,
-    appBar: z0,
-    appSelectionMenu: R0,
-    autoComplete: P0,
-    badge: W0,
-    banner: T0,
-    boxSelectionGroup: F0,
-    button: E0,
-    buttonGroup: I0,
-    card: O0,
-    checkbox: M0,
-    chip: _0,
-    chipList: B0,
-    countryFlag: H0,
-    datePicker: j0,
-    drawer: L0,
-    filters: D0,
-    formField: A0,
-    iconButton: G0,
-    input: X0,
-    label: q0,
-    link: N0,
-    loader: Y0,
-    menu: U0,
-    modal: K0,
-    popover: J0,
-    popupCard: V0,
-    profileIcon: Z0,
-    progressBar: Q0,
-    radio: rn,
-    searchBar: en,
-    section: on,
-    select: tn,
-    semanticButton: an,
-    semanticContainer: nn,
-    semanticIcon: ln,
-    sideBar: cn,
-    skeleton: sn,
-    stepper: dn,
-    switchButton: mn,
-    table: un,
-    tableHeading: gn,
-    tabs: bn,
-    textButton: pn,
-    toast: fn,
-    toggleButton: xn,
-    tooltip: Cn,
-    treeView: hn,
-    typography: yn,
-    windowBar: kn
+    actionIconButton: R0,
+    appBar: P0,
+    appSelectionMenu: W0,
+    autoComplete: T0,
+    badge: F0,
+    banner: I0,
+    boxSelectionGroup: E0,
+    button: B0,
+    buttonGroup: O0,
+    card: M0,
+    checkbox: _0,
+    chip: H0,
+    chipList: j0,
+    countryFlag: L0,
+    datePicker: D0,
+    drawer: A0,
+    filters: G0,
+    formField: X0,
+    iconButton: q0,
+    input: N0,
+    label: Y0,
+    link: U0,
+    loader: K0,
+    menu: J0,
+    modal: V0,
+    moreInfoIcon: Z0,
+    popover: Q0,
+    popupCard: rn,
+    profileIcon: en,
+    progressBar: on,
+    radio: tn,
+    searchBar: an,
+    section: nn,
+    select: ln,
+    semanticButton: cn,
+    semanticContainer: sn,
+    semanticIcon: dn,
+    sideBar: mn,
+    skeleton: un,
+    stepper: gn,
+    switchButton: bn,
+    table: pn,
+    tableHeading: fn,
+    tabs: xn,
+    textButton: Cn,
+    toast: hn,
+    toggleButton: yn,
+    tooltip: kn,
+    treeView: vn,
+    typography: wn,
+    windowBar: Sn
   },
   globals: {
-    body: vn,
-    scrollbar: wn
+    body: zn,
+    scrollbar: $n
   }
-}, lr = () => To() || S0, _n = (t) => $r`
+}, lr = () => To() || $0, jn = (t) => zr`
     &:focus-visible {
       outline: ${() => lr().core.focus.size} solid ${() => lr().core.focus.color};
       outline-offset: ${() => t || lr().core.focus.margin};
     }
-  `, Bn = (t) => $r`
+  `, Ln = (t) => zr`
     outline: ${() => lr().core.focus.size} solid ${() => lr().core.focus.color};
     outline-offset: ${() => t || lr().core.focus.margin};
-  `, Lr = () => window.matchMedia("(prefers-color-scheme: dark)"), Sn = (t) => {
+  `, Lr = () => window.matchMedia("(prefers-color-scheme: dark)"), Rn = (t) => {
   const a = Ge(t);
   a.current = t;
   const s = wr((y) => {
@@ -9169,13 +9289,13 @@ const Gt = {
     currentTheme: g
     // resolved theme (dark/light - selected or current system)
   };
-}, $n = ({ value: t, ...a }) => {
+}, Pn = ({ value: t, ...a }) => {
   const s = Ge(a);
   s.current = a;
   const u = wr(() => localStorage.getItem(s.current.storageKey) || "", []), d = wr((g) => {
     localStorage.setItem(s.current.storageKey, g);
   }, []);
-  return Io(() => {
+  return Eo(() => {
     s.current.onChange(u());
   }, [u]), Dr(() => {
     t && d(t);
@@ -9201,7 +9321,7 @@ var Nr = { exports: {} }, mr = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Le;
-function zn() {
+function Wn() {
   if (Le) return mr;
   Le = 1;
   var t = Ae, a = Symbol.for("react.element"), s = Symbol.for("react.fragment"), u = Object.prototype.hasOwnProperty, d = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, g = { key: !0, ref: !0, __self: !0, __source: !0 };
@@ -9225,7 +9345,7 @@ var ur = {};
  * LICENSE file in the root directory of this source tree.
  */
 var De;
-function Rn() {
+function Tn() {
   return De || (De = 1, process.env.NODE_ENV !== "production" && function() {
     var t = Ae, a = Symbol.for("react.element"), s = Symbol.for("react.portal"), u = Symbol.for("react.fragment"), d = Symbol.for("react.strict_mode"), g = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), h = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), k = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), R = Symbol.for("react.offscreen"), U = Symbol.iterator, Rr = "@@iterator";
     function pr(n) {
@@ -9244,12 +9364,12 @@ function Rn() {
     }
     function Ue(n, m, b) {
       {
-        var x = L.ReactDebugCurrentFrame, $ = x.getStackAddendum();
-        $ !== "" && (m += "%s", b = b.concat([$]));
-        var z = b.map(function(w) {
+        var x = L.ReactDebugCurrentFrame, z = x.getStackAddendum();
+        z !== "" && (m += "%s", b = b.concat([z]));
+        var $ = b.map(function(w) {
           return String(w);
         });
-        z.unshift("Warning: " + m), Function.prototype.apply.call(console[n], console, z);
+        $.unshift("Warning: " + m), Function.prototype.apply.call(console[n], console, $);
       }
     }
     var Ke = !1, Je = !1, Ve = !1, Ze = !1, Qe = !1, Ur;
@@ -9265,8 +9385,8 @@ function Rn() {
       var x = n.displayName;
       if (x)
         return x;
-      var $ = m.displayName || m.name || "";
-      return $ !== "" ? b + "(" + $ + ")" : b;
+      var z = m.displayName || m.name || "";
+      return z !== "" ? b + "(" + z + ")" : b;
     }
     function Kr(n) {
       return n.displayName || "Context";
@@ -9306,9 +9426,9 @@ function Rn() {
             var x = n.displayName || null;
             return x !== null ? x : D(n.type) || "Memo";
           case p: {
-            var $ = n, z = $._payload, w = $._init;
+            var z = n, $ = z._payload, w = z._init;
             try {
-              return D(w(z));
+              return D(w($));
             } catch {
               return null;
             }
@@ -9384,8 +9504,8 @@ function Rn() {
         if (Wr === void 0)
           try {
             throw Error();
-          } catch ($) {
-            var x = $.stack.trim().match(/\n( *(at )?)/);
+          } catch (z) {
+            var x = z.stack.trim().match(/\n( *(at )?)/);
             Wr = x && x[1] || "";
           }
         return `
@@ -9407,10 +9527,10 @@ function Rn() {
       }
       var x;
       Tr = !0;
-      var $ = Error.prepareStackTrace;
+      var z = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var z;
-      z = Pr.current, Pr.current = null, oo();
+      var $;
+      $ = Pr.current, Pr.current = null, oo();
       try {
         if (m) {
           var w = function() {
@@ -9423,37 +9543,37 @@ function Rn() {
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
               Reflect.construct(w, []);
-            } catch (_) {
-              x = _;
+            } catch (M) {
+              x = M;
             }
             Reflect.construct(n, [], w);
           } else {
             try {
               w.call();
-            } catch (_) {
-              x = _;
+            } catch (M) {
+              x = M;
             }
             n.call(w.prototype);
           }
         } else {
           try {
             throw Error();
-          } catch (_) {
-            x = _;
+          } catch (M) {
+            x = M;
           }
           n();
         }
-      } catch (_) {
-        if (_ && x && typeof _.stack == "string") {
-          for (var v = _.stack.split(`
-`), E = x.stack.split(`
-`), P = v.length - 1, W = E.length - 1; P >= 1 && W >= 0 && v[P] !== E[W]; )
+      } catch (M) {
+        if (M && x && typeof M.stack == "string") {
+          for (var v = M.stack.split(`
+`), I = x.stack.split(`
+`), P = v.length - 1, W = I.length - 1; P >= 1 && W >= 0 && v[P] !== I[W]; )
             W--;
           for (; P >= 1 && W >= 0; P--, W--)
-            if (v[P] !== E[W]) {
+            if (v[P] !== I[W]) {
               if (P !== 1 || W !== 1)
                 do
-                  if (P--, W--, W < 0 || v[P] !== E[W]) {
+                  if (P--, W--, W < 0 || v[P] !== I[W]) {
                     var j = `
 ` + v[P].replace(" at new ", " at ");
                     return n.displayName && j.includes("<anonymous>") && (j = j.replace("<anonymous>", n.displayName)), typeof n == "function" && xr.set(n, j), j;
@@ -9463,7 +9583,7 @@ function Rn() {
             }
         }
       } finally {
-        Tr = !1, Pr.current = z, to(), Error.prepareStackTrace = $;
+        Tr = !1, Pr.current = $, to(), Error.prepareStackTrace = z;
       }
       var nr = n ? n.displayName || n.name : "", er = nr ? fr(nr) : "";
       return typeof n == "function" && xr.set(n, er), er;
@@ -9495,9 +9615,9 @@ function Rn() {
           case S:
             return Cr(n.type, m, b);
           case p: {
-            var x = n, $ = x._payload, z = x._init;
+            var x = n, z = x._payload, $ = x._init;
             try {
-              return Cr(z($), m, b);
+              return Cr($(z), m, b);
             } catch {
             }
           }
@@ -9512,22 +9632,22 @@ function Rn() {
       } else
         le.setExtraStackFrame(null);
     }
-    function co(n, m, b, x, $) {
+    function co(n, m, b, x, z) {
       {
-        var z = Function.call.bind(sr);
+        var $ = Function.call.bind(sr);
         for (var w in n)
-          if (z(n, w)) {
+          if ($(n, w)) {
             var v = void 0;
             try {
               if (typeof n[w] != "function") {
-                var E = Error((x || "React class") + ": " + b + " type `" + w + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof n[w] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw E.name = "Invariant Violation", E;
+                var I = Error((x || "React class") + ": " + b + " type `" + w + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof n[w] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw I.name = "Invariant Violation", I;
               }
               v = n[w](m, w, x, b, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (P) {
               v = P;
             }
-            v && !(v instanceof Error) && (hr($), T("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", x || "React class", b, w, typeof v), hr(null)), v instanceof Error && !(v.message in ne) && (ne[v.message] = !0, hr($), T("Failed %s type: %s", b, v.message), hr(null));
+            v && !(v instanceof Error) && (hr(z), T("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", x || "React class", b, w, typeof v), hr(null)), v instanceof Error && !(v.message in ne) && (ne[v.message] = !0, hr(z), T("Failed %s type: %s", b, v.message), hr(null));
           }
       }
     }
@@ -9560,8 +9680,8 @@ function Rn() {
       ref: !0,
       __self: !0,
       __source: !0
-    }, se, de, Er;
-    Er = {};
+    }, se, de, Ir;
+    Ir = {};
     function go(n) {
       if (sr.call(n, "ref")) {
         var m = Object.getOwnPropertyDescriptor(n, "ref").get;
@@ -9581,7 +9701,7 @@ function Rn() {
     function po(n, m) {
       if (typeof n.ref == "string" && dr.current && m && dr.current.stateNode !== m) {
         var b = D(dr.current.type);
-        Er[b] || (T('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', D(dr.current.type), n.ref), Er[b] = !0);
+        Ir[b] || (T('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', D(dr.current.type), n.ref), Ir[b] = !0);
       }
     }
     function fo(n, m) {
@@ -9606,7 +9726,7 @@ function Rn() {
         });
       }
     }
-    var Co = function(n, m, b, x, $, z, w) {
+    var Co = function(n, m, b, x, z, $, w) {
       var v = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: a,
@@ -9616,7 +9736,7 @@ function Rn() {
         ref: b,
         props: w,
         // Record the component responsible for creating this element.
-        _owner: z
+        _owner: $
       };
       return v._store = {}, Object.defineProperty(v._store, "validated", {
         configurable: !1,
@@ -9632,28 +9752,28 @@ function Rn() {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: $
+        value: z
       }), Object.freeze && (Object.freeze(v.props), Object.freeze(v)), v;
     };
-    function ho(n, m, b, x, $) {
+    function ho(n, m, b, x, z) {
       {
-        var z, w = {}, v = null, E = null;
-        b !== void 0 && (ie(b), v = "" + b), bo(m) && (ie(m.key), v = "" + m.key), go(m) && (E = m.ref, po(m, $));
-        for (z in m)
-          sr.call(m, z) && !uo.hasOwnProperty(z) && (w[z] = m[z]);
+        var $, w = {}, v = null, I = null;
+        b !== void 0 && (ie(b), v = "" + b), bo(m) && (ie(m.key), v = "" + m.key), go(m) && (I = m.ref, po(m, z));
+        for ($ in m)
+          sr.call(m, $) && !uo.hasOwnProperty($) && (w[$] = m[$]);
         if (n && n.defaultProps) {
           var P = n.defaultProps;
-          for (z in P)
-            w[z] === void 0 && (w[z] = P[z]);
+          for ($ in P)
+            w[$] === void 0 && (w[$] = P[$]);
         }
-        if (v || E) {
+        if (v || I) {
           var W = typeof n == "function" ? n.displayName || n.name || "Unknown" : n;
-          v && fo(w, W), E && xo(w, W);
+          v && fo(w, W), I && xo(w, W);
         }
-        return Co(n, v, E, $, x, dr.current, w);
+        return Co(n, v, I, z, x, dr.current, w);
       }
     }
-    var Ir = L.ReactCurrentOwner, me = L.ReactDebugCurrentFrame;
+    var Er = L.ReactCurrentOwner, me = L.ReactDebugCurrentFrame;
     function ar(n) {
       if (n) {
         var m = n._owner, b = Cr(n.type, n._source, m ? m.type : null);
@@ -9661,15 +9781,15 @@ function Rn() {
       } else
         me.setExtraStackFrame(null);
     }
-    var Or;
-    Or = !1;
-    function Mr(n) {
+    var Br;
+    Br = !1;
+    function Or(n) {
       return typeof n == "object" && n !== null && n.$$typeof === a;
     }
     function ue() {
       {
-        if (Ir.current) {
-          var n = D(Ir.current.type);
+        if (Er.current) {
+          var n = D(Er.current.type);
           if (n)
             return `
 
@@ -9704,7 +9824,7 @@ Check the top-level render call using <` + b + ">.");
           return;
         ge[b] = !0;
         var x = "";
-        n && n._owner && n._owner !== Ir.current && (x = " It was passed a child from " + D(n._owner.type) + "."), ar(n), T('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', b, x), ar(null);
+        n && n._owner && n._owner !== Er.current && (x = " It was passed a child from " + D(n._owner.type) + "."), ar(n), T('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', b, x), ar(null);
       }
     }
     function pe(n, m) {
@@ -9714,15 +9834,15 @@ Check the top-level render call using <` + b + ">.");
         if (Fr(n))
           for (var b = 0; b < n.length; b++) {
             var x = n[b];
-            Mr(x) && be(x, m);
+            Or(x) && be(x, m);
           }
-        else if (Mr(n))
+        else if (Or(n))
           n._store && (n._store.validated = !0);
         else if (n) {
-          var $ = pr(n);
-          if (typeof $ == "function" && $ !== n.entries)
-            for (var z = $.call(n), w; !(w = z.next()).done; )
-              Mr(w.value) && be(w.value, m);
+          var z = pr(n);
+          if (typeof z == "function" && z !== n.entries)
+            for (var $ = z.call(n), w; !(w = $.next()).done; )
+              Or(w.value) && be(w.value, m);
         }
       }
     }
@@ -9743,10 +9863,10 @@ Check the top-level render call using <` + b + ">.");
         if (b) {
           var x = D(m);
           co(b, n.props, "prop", x, n);
-        } else if (m.PropTypes !== void 0 && !Or) {
-          Or = !0;
-          var $ = D(m);
-          T("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", $ || "Unknown");
+        } else if (m.PropTypes !== void 0 && !Br) {
+          Br = !0;
+          var z = D(m);
+          T("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", z || "Unknown");
         }
         typeof m.getDefaultProps == "function" && !m.getDefaultProps.isReactClassApproved && T("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
@@ -9764,18 +9884,18 @@ Check the top-level render call using <` + b + ">.");
       }
     }
     var fe = {};
-    function xe(n, m, b, x, $, z) {
+    function xe(n, m, b, x, z, $) {
       {
         var w = ro(n);
         if (!w) {
           var v = "";
           (n === void 0 || typeof n == "object" && n !== null && Object.keys(n).length === 0) && (v += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var E = yo();
-          E ? v += E : v += ue();
+          var I = yo();
+          I ? v += I : v += ue();
           var P;
           n === null ? P = "null" : Fr(n) ? P = "array" : n !== void 0 && n.$$typeof === a ? (P = "<" + (D(n.type) || "Unknown") + " />", v = " Did you accidentally export a JSX literal instead of a component?") : P = typeof n, T("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", P, v);
         }
-        var W = ho(n, m, b, $, z);
+        var W = ho(n, m, b, z, $);
         if (W == null)
           return W;
         if (w) {
@@ -9792,17 +9912,17 @@ Check the top-level render call using <` + b + ">.");
               pe(j, n);
         }
         if (sr.call(m, "key")) {
-          var er = D(n), _ = Object.keys(m).filter(function(Wo) {
+          var er = D(n), M = Object.keys(m).filter(function(Wo) {
             return Wo !== "key";
-          }), _r = _.length > 0 ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!fe[er + _r]) {
-            var Po = _.length > 0 ? "{" + _.join(": ..., ") + ": ...}" : "{}";
+          }), Mr = M.length > 0 ? "{key: someKey, " + M.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!fe[er + Mr]) {
+            var Po = M.length > 0 ? "{" + M.join(": ..., ") + ": ...}" : "{}";
             T(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`, _r, er, Po, er), fe[er + _r] = !0;
+  <%s key={someKey} {...props} />`, Mr, er, Po, er), fe[er + Mr] = !0;
           }
         }
         return n === u ? wo(W) : vo(W), W;
@@ -9811,30 +9931,30 @@ React keys must be passed directly to JSX without using spread:
     function So(n, m, b) {
       return xe(n, m, b, !0);
     }
-    function $o(n, m, b) {
+    function zo(n, m, b) {
       return xe(n, m, b, !1);
     }
-    var zo = $o, Ro = So;
-    ur.Fragment = u, ur.jsx = zo, ur.jsxs = Ro;
+    var $o = zo, Ro = So;
+    ur.Fragment = u, ur.jsx = $o, ur.jsxs = Ro;
   }()), ur;
 }
-process.env.NODE_ENV === "production" ? Nr.exports = zn() : Nr.exports = Rn();
+process.env.NODE_ENV === "production" ? Nr.exports = Wn() : Nr.exports = Tn();
 var Yr = Nr.exports;
-const Ye = Oo(null), Pn = ({ children: t, selectedTheme: a, setSelectedTheme: s, lightThemeName: u, darkThemeName: d, systemThemeName: g }) => {
-  const f = Mo(() => ({ selectedTheme: a, setSelectedTheme: s, lightThemeName: u, darkThemeName: d, systemThemeName: g }), [a, s, u, d, g]);
+const Ye = Bo(null), Fn = ({ children: t, selectedTheme: a, setSelectedTheme: s, lightThemeName: u, darkThemeName: d, systemThemeName: g }) => {
+  const f = Oo(() => ({ selectedTheme: a, setSelectedTheme: s, lightThemeName: u, darkThemeName: d, systemThemeName: g }), [a, s, u, d, g]);
   return Yr.jsx(Ye.Provider, { value: f, children: t });
-}, Hn = () => {
-  const t = _o(Ye);
+}, Dn = () => {
+  const t = Mo(Ye);
   if (!t)
     throw new Error("Missing ThemeSwitchContext");
   return t;
-}, jn = ({ children: t, lightTheme: a, darkTheme: s, systemThemeName: u, initialThemeName: d, storageKey: g }) => {
-  const f = a == null ? void 0 : a.name, h = s == null ? void 0 : s.name, C = { lightThemeName: f, darkThemeName: h, systemThemeName: u }, { selectedTheme: y, setSelectedTheme: k, currentTheme: S } = Sn({
+}, An = ({ children: t, lightTheme: a, darkTheme: s, systemThemeName: u, initialThemeName: d, storageKey: g }) => {
+  const f = a == null ? void 0 : a.name, h = s == null ? void 0 : s.name, C = { lightThemeName: f, darkThemeName: h, systemThemeName: u }, { selectedTheme: y, setSelectedTheme: k, currentTheme: S } = Rn({
     initialThemeName: d,
     ...C
   });
-  return $n({ storageKey: g, value: y, onChange: k }), Yr.jsx(Fo, { theme: S === (s == null ? void 0 : s.name) ? s : a, children: Yr.jsx(Pn, { selectedTheme: y, setSelectedTheme: k, ...C, children: t }) });
-}, Wn = $r`
+  return Pn({ storageKey: g, value: y, onChange: k }), Yr.jsx(Fo, { theme: S === (s == null ? void 0 : s.name) ? s : a, children: Yr.jsx(Fn, { selectedTheme: y, setSelectedTheme: k, ...C, children: t }) });
+}, In = zr`
   body {
     background: ${({ theme: t }) => t.globals.body.bgColor};
     color: ${({ theme: t }) => t.globals.body.textColor};
@@ -9844,7 +9964,7 @@ const Ye = Oo(null), Pn = ({ children: t, selectedTheme: a, setSelectedTheme: s,
 
     color-scheme: only ${({ theme: t }) => t.name === "dark" ? "dark" : "light"};
   }
-`, Tn = $r`
+`, En = zr`
   @media (pointer: fine) {
     @-moz-document url-prefix() {
       * {
@@ -9881,24 +10001,24 @@ const Ye = Oo(null), Pn = ({ children: t, selectedTheme: a, setSelectedTheme: s,
       background-color: transparent;
     }
   }
-`, Ln = Eo`
-  ${Wn};
-  ${Tn};
+`, Gn = Io`
+  ${In};
+  ${En};
 `;
 export {
-  Ln as CommonStyles,
-  jn as SwitchableThemeProvider,
-  Pn as ThemeSwitchProvider,
-  _n as getFocusStyle,
-  Bn as getFocusStyleProperties,
-  S0 as theme,
-  Mn as themeDark,
-  S0 as themeLight,
-  On as themeOld,
-  $n as useStorage,
+  Gn as CommonStyles,
+  An as SwitchableThemeProvider,
+  Fn as ThemeSwitchProvider,
+  jn as getFocusStyle,
+  Ln as getFocusStyleProperties,
+  $0 as theme,
+  Hn as themeDark,
+  $0 as themeLight,
+  _n as themeOld,
+  Pn as useStorage,
   lr as useTheme,
-  Sn as useThemeSelector,
-  Hn as useThemeSwitchContext,
-  In as withContrast,
+  Rn as useThemeSelector,
+  Dn as useThemeSwitchContext,
+  Mn as withContrast,
   F as withOpacity
 };