@redis-ui/styles 12.5.0 → 12.7.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 $r, 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 Oo, useMemo as Mo, useContext as _o } from "react";
 const l = {
   transparent: "#00000000",
   pink500: "#de47bb",
@@ -1927,8 +1927,8 @@ function Tt(t, a) {
     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;
@@ -1944,7 +1944,7 @@ function It(t, a, s) {
   };
   return zr(R);
 }
-var Ot = H(It), Ne = Ot;
+var Ot = H(Et), Ne = Ot;
 function Mt(t, a) {
   if (a === "transparent") return a;
   var s = tr(a), u = typeof s.alpha == "number" ? s.alpha : 1, d = B({}, s, {
@@ -1996,9 +1996,9 @@ function At(t, a) {
 }
 H(At);
 const F = (t, a) => Qo(t, a);
-function In(t) {
+function _n(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,
@@ -3237,7 +3247,7 @@ const Gt = {
       }
     }
   }
-}, pa = {
+}, fa = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -3260,7 +3270,7 @@ const Gt = {
   actionsBar: {
     gap: "1.6rem"
   }
-}, fa = {
+}, xa = {
   variants: {
     default: {
       gap: "4rem",
@@ -3335,7 +3345,7 @@ const Gt = {
       }
     }
   }
-}, K = "transparent", $e = "0.4rem 0.6rem", ze = "0", Re = "0.4rem", Pe = "0", xa = {
+}, K = "transparent", $e = "0.4rem 0.6rem", ze = "0", Re = "0.4rem", Pe = "0", Ca = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -3421,14 +3431,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 +3480,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 +3494,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 +3507,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
@@ -3563,7 +3573,7 @@ const Gt = {
       semiBold: "600"
     }
   }
-}, wa = {
+}, Sa = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -3615,13 +3625,13 @@ const Gt = {
       borderColor: o.semantic.color.border.neutral300
     }
   }
-}, Sa = {
+}, $a = {
   bgColor: o.semantic.color.background.neutral100,
   textColor: o.semantic.color.background.neutral700,
   fontFamily: o.core.font.fontFamily.regular,
   fontSize: o.core.font.fontSize.s14,
   lineHeight: "1.4"
-}, $a = {
+}, za = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: o.semantic.color.background.neutral300,
@@ -3630,7 +3640,7 @@ const Gt = {
     bgColor: o.semantic.color.background.neutral600,
     borderRadius: "99rem"
   }
-}, On = {
+}, Bn = {
   name: "old",
   ...o,
   components: {
@@ -3659,35 +3669,36 @@ 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,
-    scrollbar: $a
+    body: $a,
+    scrollbar: za
   }
 }, c = {
   transparent: "#00000000",
@@ -4080,7 +4091,7 @@ const Gt = {
       color: c.blue600
     }
   }
-}, za = {
+}, Ra = {
   sizes: {
     L: {
       size: "3rem",
@@ -4133,7 +4144,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 +4162,7 @@ const Gt = {
       color: e.semantic.color.text.neutral100
     }
   }
-}, Pa = {
+}, Wa = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -4188,12 +4199,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 +4267,7 @@ const Gt = {
       iconColor: e.semantic.color.text.neutral500
     }
   }
-}, Fa = {
+}, Ia = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -4314,7 +4325,7 @@ const Gt = {
   defaultItem: {
     gap: "0.4rem"
   }
-}, Ia = {
+}, Oa = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -4424,7 +4435,7 @@ const Gt = {
       }
     }
   }
-}, Oa = {
+}, Ma = {
   borderRadius: "0.4rem",
   border: `1px solid ${e.semantic.color.border.neutral600}`,
   fontSize: "1.4rem",
@@ -4467,13 +4478,13 @@ const Gt = {
       }
     }
   }
-}, Ma = {
+}, _a = {
   width: "100%",
   height: "fit-content",
   bgColor: e.semantic.color.background.neutral100,
   shadow: e.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, _a = {
+}, Ba = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -4537,7 +4548,7 @@ const Gt = {
       }
     }
   }
-}, Ba = {
+}, Ha = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -4594,7 +4605,7 @@ const Gt = {
       }
     }
   }
-}, Ha = {
+}, ja = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -4611,13 +4622,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 +4692,7 @@ const Gt = {
   weekNumCell: {
     fontSize: "1rem"
   }
-}, Da = {
+}, Aa = {
   shadow: e.core.shadow.shadow500,
   bgColor: e.semantic.color.background.neutral100,
   sidePadding: "3.2rem",
@@ -4692,6 +4703,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 +4716,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 +4749,7 @@ const Gt = {
       padding: "0.8rem 1.6rem"
     }
   }
-}, Ga = {
+}, Xa = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -4748,7 +4763,7 @@ const Gt = {
       textColor: e.semantic.color.text.danger500
     }
   }
-}, Xa = {
+}, qa = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -4792,7 +4807,7 @@ const Gt = {
     }
   },
   borderRadius: "0.4rem"
-}, qa = {
+}, Na = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -4883,7 +4898,7 @@ const Gt = {
       textColor: e.semantic.color.text.danger500
     }
   }
-}, Na = {
+}, Ya = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -4904,7 +4919,7 @@ const Gt = {
   required: {
     textColor: e.semantic.color.text.danger500
   }
-}, Ya = {
+}, Ua = {
   variants: {
     block: {
       sizes: {
@@ -4975,7 +4990,7 @@ const Gt = {
       }
     }
   }
-}, Ua = {
+}, Ka = {
   size: "5rem",
   gap: "0.5rem",
   textColor: e.semantic.color.icon.neutral700,
@@ -4996,7 +5011,7 @@ const Gt = {
       textColor: e.semantic.color.icon.neutral100
     }
   }
-}, Ka = {
+}, Ja = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -5067,7 +5082,7 @@ const Gt = {
       }
     }
   }
-}, Ja = {
+}, Va = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -5081,6 +5096,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 +5110,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 +5125,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 +5144,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 +5179,7 @@ const Gt = {
     M: "3.2rem",
     L: "4.4rem"
   }
-}, r0 = {
+}, o0 = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -5212,7 +5233,7 @@ const Gt = {
   text: {
     color: e.semantic.color.text.neutral800
   }
-}, e0 = {
+}, t0 = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -5261,7 +5282,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 +5302,7 @@ const Gt = {
     },
     customActions: { gap: "0.8rem" }
   }
-}, t0 = {
+}, n0 = {
   width: "100%",
   height: "fit-content",
   bgColor: e.semantic.color.background.neutral100,
@@ -5325,7 +5346,7 @@ const Gt = {
     width: "1px",
     color: e.semantic.color.border.neutral600
   }
-}, a0 = {
+}, l0 = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -5432,7 +5453,7 @@ const Gt = {
   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",
@@ -5622,7 +5643,7 @@ const Gt = {
       }
     }
   }
-}, l0 = {
+}, i0 = {
   sizes: {
     M: {
       borderRadius: e.core.space.space100,
@@ -5662,7 +5683,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 +5691,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 +5796,7 @@ const Gt = {
       }
     }
   }
-}, s0 = {
+}, m0 = {
   card: {
     gap: "2.4rem",
     bgColor: e.semantic.color.background.neutral100,
@@ -5802,7 +5823,7 @@ const Gt = {
   grid: {
     gap: "1.6rem"
   }
-}, d0 = {
+}, u0 = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -5846,7 +5867,7 @@ const Gt = {
       }
     }
   }
-}, m0 = {
+}, g0 = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -5898,7 +5919,7 @@ const Gt = {
       }
     }
   }
-}, u0 = {
+}, b0 = {
   table: {
     tableContainer: {
       backgroundColor: e.semantic.color.background.neutral100,
@@ -5943,7 +5964,7 @@ const Gt = {
       }
     }
   }
-}, g0 = {
+}, p0 = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -5966,7 +5987,7 @@ const Gt = {
   actionsBar: {
     gap: "1.6rem"
   }
-}, b0 = {
+}, f0 = {
   variants: {
     default: {
       gap: "4rem",
@@ -6049,14 +6070,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", Oe = "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 +6098,7 @@ const Gt = {
     },
     destructive: {
       padding: Fe,
-      borderRadius: Ie,
+      borderRadius: Ee,
       states: {
         normal: {
           bgColor: J,
@@ -6096,7 +6117,7 @@ const Gt = {
       }
     },
     "primary-inline": {
-      padding: Ee,
+      padding: Ie,
       borderRadius: Oe,
       states: {
         normal: {
@@ -6116,7 +6137,7 @@ const Gt = {
       }
     },
     "destructive-inline": {
-      padding: Ee,
+      padding: Ie,
       borderRadius: Oe,
       states: {
         normal: {
@@ -6136,14 +6157,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 +6219,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 +6233,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 +6246,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
@@ -6291,7 +6312,7 @@ const Gt = {
       semiBold: "600"
     }
   }
-}, k0 = {
+}, w0 = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -6343,13 +6364,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 = {
+}, $0 = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: e.color.dusk100,
@@ -6358,64 +6379,65 @@ const Gt = {
     bgColor: e.color.dusk400,
     borderRadius: "99rem"
   }
-}, S0 = {
+}, z0 = {
   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,
-    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
+    button: Oa,
+    buttonGroup: Ma,
+    card: _a,
+    checkbox: Ba,
+    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: $0
   }
 }, i = {
   transparent: "#00000000",
@@ -6808,7 +6830,7 @@ const Gt = {
       color: i.blue600
     }
   }
-}, $0 = {
+}, R0 = {
   sizes: {
     L: {
       size: "3rem",
@@ -6861,7 +6883,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 +6901,7 @@ const Gt = {
       color: r.semantic.color.text.neutral100
     }
   }
-}, R0 = {
+}, W0 = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -6916,12 +6938,12 @@ const Gt = {
       color: r.semantic.color.text.neutral800
     }
   }
-}, P0 = {
+}, T0 = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, Me = "1px", W0 = {
+}, Me = "1px", F0 = {
   padding: `${r.core.space.space025} ${r.core.space.space050}`,
   gap: r.core.space.space025,
   borderRadius: "2px",
@@ -6984,7 +7006,7 @@ const Gt = {
       iconColor: r.semantic.color.text.neutral500
     }
   }
-}, T0 = {
+}, I0 = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -6996,7 +7018,7 @@ const Gt = {
     }
   },
   split: { minWidth: "0.8rem" }
-}, F0 = {
+}, E0 = {
   gap: r.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -7042,7 +7064,7 @@ const Gt = {
   defaultItem: {
     gap: "0.4rem"
   }
-}, E0 = {
+}, O0 = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -7156,7 +7178,7 @@ const Gt = {
       }
     }
   }
-}, I0 = {
+}, M0 = {
   borderRadius: "0.4rem",
   border: `1px solid ${r.semantic.color.border.neutral600}`,
   fontSize: "1.4rem",
@@ -7199,13 +7221,13 @@ const Gt = {
       }
     }
   }
-}, O0 = {
+}, _0 = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.neutral100,
   shadow: r.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, M0 = {
+}, B0 = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -7269,7 +7291,7 @@ const Gt = {
       }
     }
   }
-}, _0 = {
+}, H0 = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -7326,7 +7348,7 @@ const Gt = {
       }
     }
   }
-}, B0 = {
+}, j0 = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -7343,13 +7365,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 +7435,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 +7446,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 +7459,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 +7492,7 @@ const Gt = {
       padding: "0.8rem 1.6rem"
     }
   }
-}, A0 = {
+}, X0 = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -7480,7 +7506,7 @@ const Gt = {
       textColor: r.semantic.color.text.danger500
     }
   }
-}, G0 = {
+}, q0 = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -7524,7 +7550,7 @@ const Gt = {
     }
   },
   borderRadius: "0.4rem"
-}, X0 = {
+}, N0 = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -7615,7 +7641,7 @@ const Gt = {
       textColor: r.semantic.color.text.danger500
     }
   }
-}, q0 = {
+}, Y0 = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -7636,7 +7662,7 @@ const Gt = {
   required: {
     textColor: r.semantic.color.text.danger500
   }
-}, N0 = {
+}, U0 = {
   variants: {
     block: {
       sizes: {
@@ -7706,7 +7732,7 @@ const Gt = {
       }
     }
   }
-}, Y0 = {
+}, K0 = {
   size: "5rem",
   gap: "0.5rem",
   textColor: r.semantic.color.icon.neutral700,
@@ -7727,7 +7753,7 @@ const Gt = {
       textColor: r.semantic.color.icon.neutral100
     }
   }
-}, U0 = {
+}, J0 = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -7798,7 +7824,7 @@ const Gt = {
       }
     }
   }
-}, K0 = {
+}, V0 = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -7812,6 +7838,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 +7852,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 +7867,7 @@ const Gt = {
     height: "8px",
     shadow: `${r.color.dark600} 0px 1.5px`
   }
-}, V0 = {
+}, rn = {
   closeButton: {
     iconColor: r.semantic.color.icon.neutral700
   },
@@ -7854,7 +7886,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 +7901,7 @@ const Gt = {
     M: "3.2rem",
     L: "4.4rem"
   }
-}, Q0 = {
+}, on = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -7923,7 +7955,7 @@ const Gt = {
   text: {
     color: r.semantic.color.text.neutral800
   }
-}, rn = {
+}, tn = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -7972,7 +8004,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 +8024,7 @@ const Gt = {
     },
     customActions: { gap: "0.8rem" }
   }
-}, on = {
+}, nn = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.neutral100,
@@ -8036,7 +8068,7 @@ const Gt = {
     width: "1px",
     color: r.semantic.color.border.neutral600
   }
-}, tn = {
+}, ln = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -8143,7 +8175,7 @@ const Gt = {
   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",
@@ -8333,7 +8365,7 @@ const Gt = {
       }
     }
   }
-}, nn = {
+}, sn = {
   sizes: {
     M: {
       borderRadius: r.core.space.space100,
@@ -8373,7 +8405,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 +8413,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 +8518,7 @@ const Gt = {
       }
     }
   }
-}, sn = {
+}, un = {
   card: {
     gap: "2.4rem",
     bgColor: r.semantic.color.background.neutral100,
@@ -8513,7 +8545,7 @@ const Gt = {
   grid: {
     gap: "1.6rem"
   }
-}, dn = {
+}, gn = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -8557,7 +8589,7 @@ const Gt = {
       }
     }
   }
-}, mn = {
+}, bn = {
   width: "3.2rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -8609,7 +8641,7 @@ const Gt = {
       }
     }
   }
-}, un = {
+}, pn = {
   table: {
     tableContainer: {
       backgroundColor: r.semantic.color.background.neutral100,
@@ -8654,7 +8686,7 @@ const Gt = {
       }
     }
   }
-}, gn = {
+}, fn = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -8677,7 +8709,7 @@ const Gt = {
   actionsBar: {
     gap: "1.6rem"
   }
-}, bn = {
+}, xn = {
   variants: {
     default: {
       gap: "4rem",
@@ -8763,7 +8795,7 @@ const Gt = {
       }
     }
   }
-}, V = "transparent", _e = "0.4rem 0.6rem", Be = "0", He = "0.4rem", je = "0", pn = {
+}, V = "transparent", _e = "0.4rem 0.6rem", Be = "0", He = "0.4rem", je = "0", Cn = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -8850,14 +8882,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 +8944,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 +8958,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 +8971,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
@@ -9005,7 +9037,7 @@ const Gt = {
       semiBold: "600"
     }
   }
-}, kn = {
+}, Sn = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -9057,13 +9089,13 @@ const Gt = {
       borderColor: r.semantic.color.border.neutral300
     }
   }
-}, vn = {
+}, $n = {
   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 = {
+}, zn = {
   width: "0.5rem",
   height: "0.5rem",
   bgColor: r.color.dark700,
@@ -9072,74 +9104,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: O0,
+    buttonGroup: M0,
+    card: _0,
+    checkbox: B0,
+    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: $n,
+    scrollbar: zn
   }
-}, lr = () => To() || S0, _n = (t) => $r`
+}, lr = () => To() || z0, jn = (t) => $r`
     &:focus-visible {
       outline: ${() => lr().core.focus.size} solid ${() => lr().core.focus.color};
       outline-offset: ${() => t || lr().core.focus.margin};
     }
-  `, Bn = (t) => $r`
+  `, Ln = (t) => $r`
     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 +9202,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 +9234,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 +9258,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) {
@@ -9446,14 +9479,14 @@ function Rn() {
       } 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]; )
+`), 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;
@@ -9520,8 +9553,8 @@ function Rn() {
             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) {
@@ -9560,8 +9593,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 +9614,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) {
@@ -9637,8 +9670,8 @@ function Rn() {
     };
     function ho(n, m, b, x, $) {
       {
-        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, $));
+        var z, 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, $));
         for (z in m)
           sr.call(m, z) && !uo.hasOwnProperty(z) && (w[z] = m[z]);
         if (n && n.defaultProps) {
@@ -9646,14 +9679,14 @@ function Rn() {
           for (z in P)
             w[z] === void 0 && (w[z] = P[z]);
         }
-        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, $, 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);
@@ -9668,8 +9701,8 @@ function Rn() {
     }
     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 +9737,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) {
@@ -9770,8 +9803,8 @@ Check the top-level render call using <` + b + ">.");
         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);
         }
@@ -9818,23 +9851,23 @@ React keys must be passed directly to JSX without using spread:
     ur.Fragment = u, ur.jsx = zo, 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 Ye = Oo(null), Fn = ({ 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]);
   return Yr.jsx(Ye.Provider, { value: f, children: t });
-}, Hn = () => {
+}, Dn = () => {
   const t = _o(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 = $r`
   body {
     background: ${({ theme: t }) => t.globals.body.bgColor};
     color: ${({ theme: t }) => t.globals.body.textColor};
@@ -9844,7 +9877,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 = $r`
   @media (pointer: fine) {
     @-moz-document url-prefix() {
       * {
@@ -9881,24 +9914,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,
+  z0 as theme,
+  Hn as themeDark,
+  z0 as themeLight,
+  Bn as themeOld,
+  Pn as useStorage,
   lr as useTheme,
-  Sn as useThemeSelector,
-  Hn as useThemeSwitchContext,
-  In as withContrast,
+  Rn as useThemeSelector,
+  Dn as useThemeSwitchContext,
+  _n as withContrast,
   F as withOpacity
 };