@devalok/shilp-sutra-karm 0.20.2 → 0.21.0

package/dist/_chunks/render-adjustment-type.js

@@ -2,16 +2,16 @@
 import { jsx as e, jsxs as a, Fragment as Q } from "react/jsx-runtime";
 import * as _ from "react";
 import Ee, { useState as B, useEffect as se, useRef as Pe, useCallback as $, Fragment as bs, useReducer as qs, useMemo as Be, createContext as gs, useContext as ws } from "react";
-import { j as Us, k as et, l as He, m as st, n as Z, o as O, p as tt, q as Re, r as at, t as Ns, w as Je, x as ys, c as rt, y as ee, z as dt, A as Ds, B as lt, E as ls, F as nt } from "./vendor.js";
-import { cn as D } from "@devalok/shilp-sutra/ui/lib/utils";
+import { x as Us, y as et, z as He, A as st, B as Z, C as O, D as tt, E as Re, F as at, G as Ns, H as Je, I as ys, w as rt, J as ee, K as dt, L as vs, M as lt, N as ls, O as nt } from "./vendor-utils.js";
+import { cn as v } from "@devalok/shilp-sutra/ui/lib/utils";
 import { Skeleton as R } from "@devalok/shilp-sutra/ui/skeleton";
 import { DropdownMenu as ge, DropdownMenuTrigger as we, DropdownMenuContent as Te, DropdownMenuItem as be } from "@devalok/shilp-sutra/ui/dropdown-menu";
 import { IconButton as X } from "@devalok/shilp-sutra/ui/icon-button";
-import { IconChevronDown as oe, IconChevronLeft as Ne, IconChevronRight as ye, IconX as me, IconUser as vs, IconPencil as Ge, IconSend as Es, IconGripVertical as ns, IconSquareCheck as it, IconSquare as ct, IconPlus as ot, IconCheck as Ze, IconTrash as mt, IconArrowRight as ut, IconDotsVertical as ft, IconCalendar as xt, IconCalendarEvent as ht } from "@tabler/icons-react";
+import { IconChevronDown as oe, IconChevronLeft as Ne, IconChevronRight as ye, IconX as me, IconUser as Ds, IconPencil as Ge, IconSend as Es, IconGripVertical as ns, IconSquareCheck as it, IconSquare as ct, IconPlus as ot, IconCheck as Ze, IconTrash as mt, IconArrowRight as ut, IconDotsVertical as ft, IconCalendar as xt, IconCalendarEvent as ht } from "@tabler/icons-react";
 import { Button as J } from "@devalok/shilp-sutra/ui/button";
 import { SegmentedControl as ks } from "@devalok/shilp-sutra/ui/segmented-control";
 import { AvatarGroup as is } from "@devalok/shilp-sutra/composed/avatar-group";
-import { Dialog as ue, DialogTrigger as De, DialogContent as fe, DialogHeader as ve, DialogFooter as $e, DialogClose as Ke, DialogTitle as pt, DialogDescription as Xe } from "@devalok/shilp-sutra/ui/dialog";
+import { Dialog as ue, DialogTrigger as ve, DialogContent as fe, DialogHeader as De, DialogFooter as $e, DialogClose as Ke, DialogTitle as pt, DialogDescription as Xe } from "@devalok/shilp-sutra/ui/dialog";
 import { Checkbox as cs } from "@devalok/shilp-sutra/ui/checkbox";
 import { Avatar as Qe, AvatarImage as Le, AvatarFallback as qe } from "@devalok/shilp-sutra/ui/avatar";
 import { Tooltip as de, TooltipTrigger as le, TooltipContent as ne } from "@devalok/shilp-sutra/ui/tooltip";
@@ -19,24 +19,24 @@ import { useIsMobile as bt } from "@devalok/shilp-sutra/hooks/use-mobile";
 import { toast as V } from "@devalok/shilp-sutra/ui/toast";
 import { Textarea as gt } from "@devalok/shilp-sutra/ui/textarea";
 import { Popover as wt, PopoverTrigger as Nt, PopoverContent as yt } from "@devalok/shilp-sutra/ui/popover";
-import { Badge as Dt, Tooltip as vt, TooltipTrigger as Et, TooltipContent as kt } from "@devalok/shilp-sutra/ui";
+import { Badge as vt, Tooltip as Dt, TooltipTrigger as Et, TooltipContent as kt } from "@devalok/shilp-sutra/ui";
 import { NumberInput as Ct } from "@devalok/shilp-sutra/ui/number-input";
 const Cs = _.forwardRef(
   function({ className: s, ...l }, t) {
-    return /* @__PURE__ */ e("div", { ref: t, className: D("flex w-full max-w-layout flex-col items-center justify-center max-md:h-[100%] max-md:justify-start", s), ...l, children: /* @__PURE__ */ a("div", { className: "z-raised flex w-full flex-col items-start justify-start rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-05 shadow-05 max-md:flex-1 max-md:min-h-0 max-md:overflow-y-auto max-md:border-0 max-md:px-ds-05 max-md:pb-0 max-md:pt-ds-06", children: [
+    return /* @__PURE__ */ e("div", { ref: t, className: v("flex w-full max-w-layout flex-col items-center justify-center max-md:h-[100%] max-md:justify-start", s), ...l, children: /* @__PURE__ */ a("div", { className: "z-raised flex w-full flex-col items-start justify-start rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05 shadow-overlay max-md:flex-1 max-md:min-h-0 max-md:overflow-y-auto max-md:border-0 max-md:px-ds-05 max-md:pb-0 max-md:pt-ds-06", children: [
       /* @__PURE__ */ a("div", { className: "mb-ds-06 flex w-full flex-col items-start justify-between md:flex-row md:items-center", children: [
         /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ a(we, { className: "text-ds-xl flex items-center gap-ds-03 text-surface-fg-muted", "aria-label": "Select period", children: [
           /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-            /* @__PURE__ */ e(R, { className: "h-[25px] w-[50px] rounded-ds-md bg-surface-3" }),
-            /* @__PURE__ */ e(R, { className: "h-[25px] w-[50px] rounded-ds-md bg-surface-3" })
+            /* @__PURE__ */ e(R, { className: "h-[25px] w-[50px] rounded-ds-md bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(R, { className: "h-[25px] w-[50px] rounded-ds-md bg-surface-raised-hover" })
           ] }),
           /* @__PURE__ */ e(oe, {})
         ] }) }),
         /* @__PURE__ */ a("div", { className: "flex w-full items-center justify-between gap-ds-05 md:mt-0 md:w-auto md:justify-start max-md:mt-[17px] max-lg:gap-[0.5rem]", children: [
           /* @__PURE__ */ e("div", { className: "hidden md:flex", children: /* @__PURE__ */ e(R, { className: "h-ds-sm w-[180px] rounded-ds-md" }) }),
           /* @__PURE__ */ a("div", { className: "flex w-[200px] items-center justify-between overflow-clip rounded-ds-full border border-surface-border", children: [
-            /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-[100px] items-center justify-center rounded-r-none bg-surface-3", children: /* @__PURE__ */ e(R, { className: "h-[20px] w-[40px] rounded-r-none bg-surface-3" }) }),
-            /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-[100px] items-center justify-center", children: /* @__PURE__ */ e(R, { className: "h-[20px] w-[40px] bg-surface-3" }) })
+            /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-[100px] items-center justify-center rounded-r-none bg-surface-raised-hover", children: /* @__PURE__ */ e(R, { className: "h-[20px] w-[40px] rounded-r-none bg-surface-raised-hover" }) }),
+            /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-[100px] items-center justify-center", children: /* @__PURE__ */ e(R, { className: "h-[20px] w-[40px] bg-surface-raised-hover" }) })
           ] }),
           /* @__PURE__ */ a("div", { className: "flex gap-0", children: [
             /* @__PURE__ */ e(X, { icon: /* @__PURE__ */ e(Ne, {}), size: "sm", "aria-label": "Previous" }),
@@ -58,13 +58,13 @@ const Cs = _.forwardRef(
         {
           className: "flex w-full flex-col items-center rounded-t-ds-lg pb-ds-04 pt-ds-05 max-md:rounded-ds-lg",
           children: [
-            /* @__PURE__ */ e(R, { className: "mb-ds-03 h-[10px] w-[10px] rounded-ds-lg bg-surface-3" }),
-            /* @__PURE__ */ e("div", { className: "mx-ds-02 my-ds-02 flex items-center justify-center", children: /* @__PURE__ */ e(R, { className: "h-ds-md w-ds-md rounded-ds-full bg-surface-3" }) })
+            /* @__PURE__ */ e(R, { className: "mb-ds-03 h-[10px] w-[10px] rounded-ds-lg bg-surface-raised-hover" }),
+            /* @__PURE__ */ e("div", { className: "mx-ds-02 my-ds-02 flex items-center justify-center", children: /* @__PURE__ */ e(R, { className: "h-ds-md w-ds-md rounded-ds-full bg-surface-raised-hover" }) })
           ]
         },
         o
       )) }),
-      /* @__PURE__ */ a("div", { className: "flex w-full flex-col rounded-ds-lg bg-surface-2 md:p-ds-06 max-md:bg-transparent", children: [
+      /* @__PURE__ */ a("div", { className: "flex w-full flex-col rounded-ds-lg bg-surface-raised md:p-ds-06 max-md:bg-transparent", children: [
         /* @__PURE__ */ e("div", { className: "no-scrollbar w-full cursor-grab overflow-x-auto active:cursor-grabbing max-md:pb-ds-05", children: /* @__PURE__ */ e(
           "div",
           {
@@ -72,13 +72,13 @@ const Cs = _.forwardRef(
             children: Array.from({ length: 3 }).map((i, o) => /* @__PURE__ */ a(
               "div",
               {
-                className: D("flex w-full flex-col gap-ds-04 rounded-ds-md bg-surface-2 p-ds-06 md:rounded-ds-lg md:p-ds-05", o !== 2 ? "border-r border-surface-border-strong" : "", "max-md:border-0 max-md:p-ds-05", "min-w-[200px]"),
+                className: v("flex w-full flex-col gap-ds-04 rounded-ds-md bg-surface-raised p-ds-06 md:rounded-ds-lg md:p-ds-05", o !== 2 ? "border-r border-surface-border-strong" : "", "max-md:border-0 max-md:p-ds-05", "min-w-[200px]"),
                 children: [
-                  /* @__PURE__ */ e(R, { className: "h-[20px] w-[120px] rounded-ds-md bg-surface-3" }),
+                  /* @__PURE__ */ e(R, { className: "h-[20px] w-[120px] rounded-ds-md bg-surface-raised-hover" }),
                   /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-ds-03", children: Array.from({ length: 4 }).map((c, h) => /* @__PURE__ */ e(
                     R,
                     {
-                      className: D("h-ds-md w-ds-md rounded-ds-full bg-surface-3", h > 0 ? "ml-[-5px]" : "")
+                      className: v("h-ds-md w-ds-md rounded-ds-full bg-surface-raised-hover", h > 0 ? "ml-[-5px]" : "")
                     },
                     h
                   )) })
@@ -88,26 +88,26 @@ const Cs = _.forwardRef(
             ))
           }
         ) }),
-        /* @__PURE__ */ e("div", { className: "w-full p-0 md:p-ds-06", children: /* @__PURE__ */ a("div", { className: "max-md:pt-[16px] flex flex-col items-start overflow-hidden rounded-ds-lg border-0 border-surface-border bg-surface-2 shadow-01 pt-ds-03 md:border max-md:pb-0", children: [
+        /* @__PURE__ */ e("div", { className: "w-full p-0 md:p-ds-06", children: /* @__PURE__ */ a("div", { className: "max-md:pt-[16px] flex flex-col items-start overflow-hidden rounded-ds-lg border-0 border-surface-border bg-surface-raised shadow-raised pt-ds-03 md:border max-md:pb-0", children: [
           /* @__PURE__ */ a("div", { className: "flex w-full items-start border-b-[1px] border-b-surface-border px-ds-06 md:border-b max-md:border-0 max-md:px-0", children: [
             /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider cursor-pointer border-b-[1.5px] border-b-accent-9 px-ds-03 py-ds-04 font-semibold  text-surface-fg", children: "REQUESTS(1)" }),
             /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider cursor-pointer px-ds-03 py-ds-04  text-surface-fg-subtle", children: "ATTENDANCE CORRECTION(1)" })
           ] }),
-          /* @__PURE__ */ e("div", { className: "flex max-h-[200px] w-full flex-col overflow-y-auto bg-surface-2 px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[372px] max-md:p-0", children: Array.from({ length: 2 }).map((i, o) => /* @__PURE__ */ a(
+          /* @__PURE__ */ e("div", { className: "flex max-h-[200px] w-full flex-col overflow-y-auto bg-surface-raised px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[372px] max-md:p-0", children: Array.from({ length: 2 }).map((i, o) => /* @__PURE__ */ a(
             "div",
             {
               className: "flex items-center justify-between px-ds-03 py-ds-04",
               children: [
                 /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-04", children: [
-                  /* @__PURE__ */ e(R, { className: "h-ds-md w-ds-md rounded-ds-full bg-surface-3" }),
+                  /* @__PURE__ */ e(R, { className: "h-ds-md w-ds-md rounded-ds-full bg-surface-raised-hover" }),
                   /* @__PURE__ */ a("div", { className: "flex flex-col gap-ds-02", children: [
-                    /* @__PURE__ */ e(R, { className: "h-[20px] w-[120px] rounded-ds-md bg-surface-3" }),
-                    /* @__PURE__ */ e(R, { className: "h-[20px] w-[200px] rounded-ds-md bg-surface-3" })
+                    /* @__PURE__ */ e(R, { className: "h-[20px] w-[120px] rounded-ds-md bg-surface-raised-hover" }),
+                    /* @__PURE__ */ e(R, { className: "h-[20px] w-[200px] rounded-ds-md bg-surface-raised-hover" })
                   ] })
                 ] }),
                 /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-04", children: [
-                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-3" }),
-                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-3" })
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-raised-hover" }),
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-raised-hover" })
                 ] })
               ]
             },
@@ -136,7 +136,7 @@ const Ts = _.forwardRef(
     className: m,
     ...N
   }, n) {
-    return /* @__PURE__ */ a("div", { ref: n, className: D("mb-ds-06 flex w-full flex-col items-start justify-between md:flex-row md:items-center", m), ...N, children: [
+    return /* @__PURE__ */ a("div", { ref: n, className: v("mb-ds-06 flex w-full flex-col items-start justify-between md:flex-row md:items-center", m), ...N, children: [
       /* @__PURE__ */ a("div", { className: "flex w-full items-center justify-between gap-ds-05 md:w-auto md:justify-start", children: [
         /* @__PURE__ */ a(ge, { children: [
           /* @__PURE__ */ a(we, { className: "text-ds-xl flex items-center gap-ds-03 text-surface-fg-muted", children: [
@@ -149,11 +149,11 @@ const Ts = _.forwardRef(
               onSelect: () => {
                 b(w);
               },
-              className: D("p-0", p !== l.length - 1 ? "border-b border-b-surface-border" : ""),
+              className: v("p-0", p !== l.length - 1 ? "border-b border-b-surface-border" : ""),
               children: /* @__PURE__ */ e(
                 "span",
                 {
-                  className: D("w-full py-ds-04 pl-ds-05 pr-ds-06", s === w ? "text-ds-md font-semibold bg-accent-9 text-accent-fg" : "text-ds-md text-surface-fg-muted hover:bg-surface-2", p === 0 ? "rounded-t-[7px]" : p === l.length - 1 ? "rounded-b-[7px]" : ""),
+                  className: v("w-full py-ds-04 pl-ds-05 pr-ds-06", s === w ? "text-ds-md font-semibold bg-accent-9 text-accent-fg" : "text-ds-md text-surface-fg-muted hover:bg-surface-raised", p === 0 ? "rounded-t-[7px]" : p === l.length - 1 ? "rounded-b-[7px]" : ""),
                   children: w.split(" ")[1]
                 }
               )
@@ -180,7 +180,7 @@ const Ts = _.forwardRef(
                 alt: `${i.name}'s avatar`,
                 className: "h-ico-md w-ico-md rounded-ds-full"
               }
-            ) : /* @__PURE__ */ e("div", { className: "flex h-ico-md w-ico-md flex-shrink-0 items-center justify-center rounded-ds-full bg-surface-3", children: /* @__PURE__ */ e("span", { className: "text-accent-11", children: i.name.charAt(0) }) }),
+            ) : /* @__PURE__ */ e("div", { className: "flex h-ico-md w-ico-md flex-shrink-0 items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e("span", { className: "text-accent-11", children: i.name.charAt(0) }) }),
             /* @__PURE__ */ e("span", { className: "text-ds-md ml-ds-01 mr-ds-02 text-accent-fg", children: i.name })
           ] }),
           /* @__PURE__ */ e(
@@ -193,9 +193,9 @@ const Ts = _.forwardRef(
             }
           )
         ] }) : /* @__PURE__ */ a(ge, { children: [
-          /* @__PURE__ */ a(we, { className: "text-ds-md hidden items-center justify-between rounded-ds-md border border-surface-border bg-surface-1 px-ds-03 py-ds-02b md:flex", children: [
+          /* @__PURE__ */ a(we, { className: "text-ds-md hidden items-center justify-between rounded-ds-md border border-surface-border bg-surface-base px-ds-03 py-ds-02b md:flex", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center", children: [
-              /* @__PURE__ */ e(vs, { className: "h-ico-md w-ico-md" }),
+              /* @__PURE__ */ e(Ds, { className: "h-ico-md w-ico-md" }),
               /* @__PURE__ */ e("span", { className: "text-ds-md ml-ds-01 mr-ds-02 text-surface-fg-muted max-lg:mx-0 max-lg:text-ds-sm", children: "Associate" })
             ] }),
             /* @__PURE__ */ e(oe, { className: "h-ico-sm w-ico-sm" })
@@ -219,7 +219,7 @@ const Ts = _.forwardRef(
                     alt: `${w.name}'s avatar`,
                     className: "h-ds-xs w-ds-xs rounded-ds-full"
                   }
-                ) : /* @__PURE__ */ e("div", { className: "flex h-ds-xs w-ds-xs items-center justify-center rounded-ds-full bg-surface-3", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-accent-11", children: w.name.charAt(0) }) }),
+                ) : /* @__PURE__ */ e("div", { className: "flex h-ds-xs w-ds-xs items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-accent-11", children: w.name.charAt(0) }) }),
                 /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: w.name })
               ]
             },
@@ -432,12 +432,12 @@ const Ss = _.forwardRef(
         selected: P
       }));
     }, [s, t, i, l]);
-    const n = r.isBreak && o !== "weekly", w = n && r.breakStart && !r.breakEnd, p = n && r.breakEnd && !r.breakStart, S = n && r.breakMid, v = D(
+    const n = r.isBreak && o !== "weekly", w = n && r.breakStart && !r.breakEnd, p = n && r.breakEnd && !r.breakStart, S = n && r.breakMid, D = v(
       "flex w-full items-center justify-center p-ds-02",
       w && "rounded-l-ds-2xl",
       p && "rounded-r-ds-2xl",
       S && "bg-accent-2"
-    ), A = D(
+    ), A = v(
       // Base layout & transitions
       "flex h-ds-md w-ds-md items-center justify-center rounded-ds-full text-ds-base relative overflow-hidden",
       "transition-[background-color,color,border] duration-200",
@@ -466,14 +466,14 @@ const Ss = _.forwardRef(
       // Hover on today (not break)
       r.hover && !r.disabled && r.today && !r.isBreak && "bg-accent-9 text-accent-fg ring-2 ring-inset ring-accent-9",
       // Hover on present (not today, not break)
-      r.hover && !r.disabled && !r.today && !r.isBreak && r.isPresent && "bg-surface-3 text-surface-fg",
+      r.hover && !r.disabled && !r.today && !r.isBreak && r.isPresent && "bg-surface-raised-hover text-surface-fg",
       // Hover on default (not today, not break, not present)
-      r.hover && !r.disabled && !r.today && !r.isBreak && !r.isPresent && r.isDefault && "bg-surface-3 text-surface-fg-muted",
+      r.hover && !r.disabled && !r.today && !r.isBreak && !r.isPresent && r.isDefault && "bg-surface-raised-hover text-surface-fg-muted",
       // Hover on break (same visual as base break, but re-assert to match original)
       r.hover && !r.disabled && r.isBreak && !S && "bg-accent-3 text-surface-fg-muted ring-2 ring-inset ring-accent-9",
       r.hover && !r.disabled && r.isBreak && S && "rounded-ds-none bg-accent-2 text-surface-fg-muted shadow-none",
       // Hover on absent (not today, not break)
-      r.hover && !r.disabled && !r.today && !r.isBreak && r.isAbsent && "bg-surface-3 text-error-11",
+      r.hover && !r.disabled && !r.today && !r.isBreak && r.isAbsent && "bg-surface-raised-hover text-error-11",
       // ── Focus ──
       r.focus && !r.pressed && "outline-2",
       // ── Pressed ──
@@ -483,9 +483,9 @@ const Ss = _.forwardRef(
       r.selected && o === "monthly" && "text-surface-fg",
       // ── DisabledState (visual-only disabled, different from functional disabled) ──
       r.disabledState && "text-disabled",
-      r.disabledState && r.today && "bg-disabled text-accent-fg"
+      r.disabledState && r.today && "bg-disabled text-surface-fg-muted"
     );
-    return /* @__PURE__ */ e("div", { ref: b, className: D(v, c), ...h, children: /* @__PURE__ */ a(
+    return /* @__PURE__ */ e("div", { ref: b, className: v(D, c), ...h, children: /* @__PURE__ */ a(
       "div",
       {
         className: A,
@@ -541,7 +541,7 @@ const As = _.forwardRef(
       k.preventDefault();
       const T = (k.pageX - (((K = r.current) == null ? void 0 : K.offsetLeft) || 0) - m) * 2;
       r.current && (r.current.scrollLeft = n - T);
-    }, v = () => {
+    }, D = () => {
       u(!1);
     }, A = () => {
       u(!1);
@@ -552,11 +552,11 @@ const As = _.forwardRef(
         "div",
         {
           ref: f,
-          className: D("hide-scrollbar w-full cursor-grab overflow-x-auto active:cursor-grabbing max-md:pb-ds-05", c),
+          className: v("hide-scrollbar w-full cursor-grab overflow-x-auto active:cursor-grabbing max-md:pb-ds-05", c),
           ...h,
           onMouseDown: p,
           onMouseMove: S,
-          onMouseUp: v,
+          onMouseUp: D,
           onMouseLeave: A,
           style: {
             scrollbarWidth: "none",
@@ -577,7 +577,7 @@ const As = _.forwardRef(
                 return /* @__PURE__ */ a(
                   "div",
                   {
-                    className: "flex w-full flex-col gap-ds-04 rounded-ds-md bg-surface-2 p-ds-06 md:rounded-ds-lg",
+                    className: "flex w-full flex-col gap-ds-04 rounded-ds-md bg-surface-raised p-ds-06 md:rounded-ds-lg",
                     children: [
                       (T == null ? void 0 : T.length) > 0 && /* @__PURE__ */ e("h2", { className: "text-ds-sm font-semibold uppercase tracking-wider capitalize text-surface-fg-subtle", children: `On Break (${(T == null ? void 0 : T.length) || 0})` }),
                       /* @__PURE__ */ e("div", { className: "flex w-full flex-wrap items-center", children: (T == null ? void 0 : T.length) > 0 && /* @__PURE__ */ e(
@@ -599,7 +599,7 @@ const As = _.forwardRef(
                 ([k, C]) => /* @__PURE__ */ a(
                   "div",
                   {
-                    className: D("flex w-full flex-col gap-ds-04 rounded-ds-md bg-surface-2 p-ds-06 md:rounded-ds-lg md:p-ds-05", k !== "yetToMark" ? "border-r border-surface-border-strong" : "", "max-md:border-0 max-md:p-ds-05", "min-w-[200px]"),
+                    className: v("flex w-full flex-col gap-ds-04 rounded-ds-md bg-surface-raised p-ds-06 md:rounded-ds-lg md:p-ds-05", k !== "yetToMark" ? "border-r border-surface-border-strong" : "", "max-md:border-0 max-md:p-ds-05", "min-w-[200px]"),
                     children: [
                       /* @__PURE__ */ a("h2", { className: "text-ds-sm font-semibold uppercase tracking-wider capitalize text-surface-fg-subtle", children: [
                         k === "yetToMark" ? "Yet to Mark" : k.replace(/([A-Z])/g, " $1").toLowerCase(),
@@ -660,7 +660,7 @@ const ms = {
 };
 function Bs(d, s) {
   const l = s ? ms : us, t = s ? ms.REJECTED : us.REJECTED, { text: i, color: o } = l[d] || t;
-  return /* @__PURE__ */ e(Dt, { color: o, size: "sm", children: i });
+  return /* @__PURE__ */ e(vt, { color: o, size: "sm", children: i });
 }
 const ze = _.forwardRef(
   function({
@@ -680,8 +680,8 @@ const ze = _.forwardRef(
     }, [s]);
     const n = t && t.numberOfDays === 1, w = () => {
       if (!t) return !1;
-      const v = Re(/* @__PURE__ */ new Date()), A = Re(new Date(t.endDate));
-      return Z(A, v) || Je(A, v);
+      const D = Re(/* @__PURE__ */ new Date()), A = Re(new Date(t.endDate));
+      return Z(A, D) || Je(A, D);
     }, p = async () => {
       !t || !o || (await o({
         requestId: t.id,
@@ -689,8 +689,8 @@ const ze = _.forwardRef(
         dateToCancel: s,
         userId: l
       }), N(!1), c == null || c(), h == null || h());
-    }, S = (v) => O(new Date(v), "dd/MM/yyyy");
-    return !t || t.status === "CANCELLED" ? null : /* @__PURE__ */ a("div", { ref: f, className: D("relative flex w-full flex-col gap-ds-06 rounded-ds-lg bg-accent-2", b), ...r, children: [
+    }, S = (D) => O(new Date(D), "dd/MM/yyyy");
+    return !t || t.status === "CANCELLED" ? null : /* @__PURE__ */ a("div", { ref: f, className: v("relative flex w-full flex-col gap-ds-06 rounded-ds-lg bg-accent-2", b), ...r, children: [
       i && /* @__PURE__ */ e(
         "img",
         {
@@ -700,7 +700,7 @@ const ze = _.forwardRef(
         }
       ),
       /* @__PURE__ */ a("div", { className: "relative flex min-h-[236px] flex-col items-center justify-between rounded-ds-lg md:flex-row", children: [
-        m && n ? /* @__PURE__ */ e("div", { className: "flex h-full w-full flex-col items-center justify-center px-ds-04 pt-[17px]", children: /* @__PURE__ */ a("div", { className: "w-full gap-ds-05 rounded-ds-md bg-surface-2 shadow-01 px-ds-06 py-ds-07 md:hidden", children: [
+        m && n ? /* @__PURE__ */ e("div", { className: "flex h-full w-full flex-col items-center justify-center px-ds-04 pt-[17px]", children: /* @__PURE__ */ a("div", { className: "w-full gap-ds-05 rounded-ds-md bg-surface-raised shadow-raised px-ds-06 py-ds-07 md:hidden", children: [
           /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-ds-04", children: [
             /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold text-center text-surface-fg", children: "Cancel this break?" }),
             /* @__PURE__ */ a("div", { className: "text-ds-base max-w-[240px] text-center text-surface-fg-subtle max-md:leading-[100%]", children: [
@@ -714,7 +714,7 @@ const ze = _.forwardRef(
             "button",
             {
               "aria-label": "Close cancel form",
-              className: "absolute right-ds-05 top-ds-05 rounded-ds-sm p-ds-04 text-surface-fg-subtle transition-colors hover:text-surface-fg-muted hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
+              className: "absolute right-ds-05 top-ds-05 rounded-ds-sm p-ds-04 text-surface-fg-subtle transition-colors hover:text-surface-fg-muted hover:bg-surface-raised-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
               onClick: () => N(!1),
               children: /* @__PURE__ */ e(me, { className: "h-ico-lg w-ico-lg" })
             }
@@ -745,10 +745,10 @@ const ze = _.forwardRef(
         /* @__PURE__ */ a(
           "div",
           {
-            className: D("flex w-full flex-col items-center justify-center px-ds-05", m || t.status === "APPROVED" || t.status === "REJECTED" ? "pb-ds-06 pt-[9px]" : "py-ds-06", "md:w-1/2 md:px-ds-06 md:py-ds-05 max-md:pt-[34px]"),
+            className: v("flex w-full flex-col items-center justify-center px-ds-05", m || t.status === "APPROVED" || t.status === "REJECTED" ? "pb-ds-06 pt-[9px]" : "py-ds-06", "md:w-1/2 md:px-ds-06 md:py-ds-05 max-md:pt-[34px]"),
             children: [
               /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-06  text-surface-fg-subtle max-md:mb-ds-05", children: "Break Status" }),
-              /* @__PURE__ */ a("div", { className: "mb-ds-04 flex w-full flex-col items-center justify-start gap-ds-04 rounded-ds-2xl border border-surface-border bg-surface-2 shadow-01 px-ds-05 py-ds-04 text-center font-semibold text-surface-fg", children: [
+              /* @__PURE__ */ a("div", { className: "mb-ds-04 flex w-full flex-col items-center justify-start gap-ds-04 rounded-ds-2xl border border-surface-border bg-surface-raised shadow-raised px-ds-05 py-ds-04 text-center font-semibold text-surface-fg", children: [
                 Bs(t.status, !1),
                 t.status === "APPROVED" && t.adminComment,
                 t.status === "REJECTED" && t.adminComment
@@ -763,9 +763,9 @@ const ze = _.forwardRef(
                   }
                 ),
                 /* @__PURE__ */ a(ue, { children: [
-                  w() && o && /* @__PURE__ */ e(De, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "text-ds-sm hidden cursor-pointer border-none bg-transparent text-accent-12 underline md:block", children: "Want to cancel this break?" }) }),
+                  w() && o && /* @__PURE__ */ e(ve, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "text-ds-sm hidden cursor-pointer border-none bg-transparent text-accent-12 underline md:block", children: "Want to cancel this break?" }) }),
                   /* @__PURE__ */ a(fe, { className: "max-w-[329px] gap-ds-04 rounded-ds-xl", children: [
-                    /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold text-center text-surface-fg", children: "Cancel this break?" }) }),
+                    /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold text-center text-surface-fg", children: "Cancel this break?" }) }),
                     /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-start", children: /* @__PURE__ */ a("div", { className: "text-ds-base max-w-[241px] text-center text-surface-fg-subtle", children: [
                       "You're about to cancel the break scheduled for",
                       " ",
@@ -775,16 +775,16 @@ const ze = _.forwardRef(
                   ] })
                 ] })
               ] }) : /* @__PURE__ */ a(ue, { children: [
-                w() && o && /* @__PURE__ */ e(De, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "text-ds-sm cursor-pointer border-none bg-transparent text-accent-12 underline", children: "Want to cancel this break?" }) }),
+                w() && o && /* @__PURE__ */ e(ve, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "text-ds-sm cursor-pointer border-none bg-transparent text-accent-12 underline", children: "Want to cancel this break?" }) }),
                 /* @__PURE__ */ a(fe, { className: "max-w-[329px] gap-ds-04 rounded-ds-xl", children: [
-                  /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold flex text-center text-surface-fg", children: "Cancel your break" }) }),
+                  /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold flex text-center text-surface-fg", children: "Cancel your break" }) }),
                   /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-start", children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start", children: [
                     /* @__PURE__ */ a("label", { className: "breakRequest-checkbox flex items-center space-x-ds-03", children: [
                       /* @__PURE__ */ e(
                         cs,
                         {
                           checked: x,
-                          onCheckedChange: (v) => u(v === !0)
+                          onCheckedChange: (D) => u(D === !0)
                         }
                       ),
                       /* @__PURE__ */ a("span", { className: "text-surface-fg-muted", children: [
@@ -797,7 +797,7 @@ const ze = _.forwardRef(
                         cs,
                         {
                           checked: !x,
-                          onCheckedChange: (v) => u(v !== !0)
+                          onCheckedChange: (D) => u(D !== !0)
                         }
                       ),
                       /* @__PURE__ */ a("span", { className: "text-surface-fg-muted", children: [
@@ -849,7 +849,7 @@ function At({
   onUpdateAttendanceStatus: t
 }) {
   return /* @__PURE__ */ a(fe, { className: "sm:max-w-md", children: [
-    /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ a("div", { className: "text-ds-md text-surface-fg-subtle", children: [
+    /* @__PURE__ */ e(De, { children: /* @__PURE__ */ a("div", { className: "text-ds-md text-surface-fg-subtle", children: [
       "Edit attendance of",
       " ",
       /* @__PURE__ */ e("span", { className: "text-ds-md font-semibold text-accent-11", children: d.name })
@@ -895,8 +895,8 @@ const Rs = _.forwardRef(
     className: n,
     ...w
   }, p) {
-    const [S, v] = B(""), [A, M] = B(null), [k, C] = B(null), T = async (E) => {
-      E.preventDefault(), !(!S.trim() || !s) && (await (f == null ? void 0 : f(S, s.id)), v(""));
+    const [S, D] = B(""), [A, M] = B(null), [k, C] = B(null), T = async (E) => {
+      E.preventDefault(), !(!S.trim() || !s) && (await (f == null ? void 0 : f(S, s.id)), D(""));
     }, K = (E, j) => {
       M(j), E.target.classList.add("dragging");
     }, z = async (E, j) => {
@@ -906,9 +906,9 @@ const Rs = _.forwardRef(
       }
       M(null), C(null);
     };
-    return /* @__PURE__ */ a("div", { ref: p, className: D("relative flex items-center justify-between md:items-stretch", n), ...w, children: [
+    return /* @__PURE__ */ a("div", { ref: p, className: v("relative flex items-center justify-between md:items-stretch", n), ...w, children: [
       !c && (t == null ? void 0 : t.status) !== "BREAK" && /* @__PURE__ */ a(ue, { children: [
-        /* @__PURE__ */ e(De, { asChild: !0, children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(ve, { asChild: !0, children: /* @__PURE__ */ e(
           X,
           {
             icon: /* @__PURE__ */ e(Ge, {}),
@@ -954,7 +954,7 @@ const Rs = _.forwardRef(
         Re(/* @__PURE__ */ new Date())
       ) ? /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-center justify-center p-ds-06", children: [
         /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-05  text-surface-fg-subtle", children: "COMMENT" }),
-        /* @__PURE__ */ a("div", { className: "flex w-full items-center justify-between rounded-ds-lg border border-surface-border-strong bg-surface-2 px-ds-05 max-md:h-ds-lg", children: [
+        /* @__PURE__ */ a("div", { className: "flex w-full items-center justify-between rounded-ds-lg border border-surface-border-strong bg-surface-raised px-ds-05 max-md:h-ds-lg", children: [
           /* @__PURE__ */ e(
             "input",
             {
@@ -990,7 +990,7 @@ const Rs = _.forwardRef(
                 role: "listitem",
                 "aria-label": `Task ${j + 1} of ${i.length}: ${E.title}. Use Alt+Arrow keys to reorder.`,
                 tabIndex: 0,
-                className: D("task-item mb-ds-03 flex items-center gap-ds-02", A === j ? "dragging" : ""),
+                className: v("task-item mb-ds-03 flex items-center gap-ds-02", A === j ? "dragging" : ""),
                 draggable: !0,
                 onDragStart: (P) => K(P, j),
                 onDragOver: (P) => P.preventDefault(),
@@ -1024,7 +1024,7 @@ const Rs = _.forwardRef(
                   /* @__PURE__ */ e(
                     "p",
                     {
-                      className: D("text-ds-md flex-1 overflow-hidden hyphens-auto break-all pr-ds-05 break-words min-w-0", E.status === "COMPLETED" ? "text-disabled line-through" : "text-surface-fg-muted"),
+                      className: v("text-ds-md flex-1 overflow-hidden hyphens-auto break-all pr-ds-05 break-words min-w-0", E.status === "COMPLETED" ? "text-disabled line-through" : "text-surface-fg-muted"),
                       children: E.title
                     }
                   )
@@ -1047,7 +1047,7 @@ const Rs = _.forwardRef(
                     className: "text-ds-md flex w-full resize-none items-center border-none bg-transparent !leading-6 text-surface-fg-muted outline-none placeholder:leading-6",
                     placeholder: "Add a task",
                     value: S,
-                    onChange: (E) => v(E.target.value),
+                    onChange: (E) => D(E.target.value),
                     onKeyDown: (E) => {
                       E.key === "Enter" && !E.shiftKey && (E.preventDefault(), T(E));
                     },
@@ -1091,14 +1091,14 @@ const js = _.forwardRef(
     const x = async (u, m) => {
       m === "APPROVED" ? await (c == null ? void 0 : c(u.id)) : await (h == null ? void 0 : h(u.id));
     };
-    return s.length === 0 ? /* @__PURE__ */ e("div", { ref: f, className: D("p-ds-05 text-center", b), ...r, children: "No pending corrections" }) : /* @__PURE__ */ e(
+    return s.length === 0 ? /* @__PURE__ */ e("div", { ref: f, className: v("p-ds-05 text-center", b), ...r, children: "No pending corrections" }) : /* @__PURE__ */ e(
       "div",
       {
         ref: f,
-        className: D("flex max-h-[200px] w-full flex-col overflow-y-auto bg-surface-1 px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[372px] max-md:p-0", b),
+        className: v("flex max-h-[200px] w-full flex-col overflow-y-auto bg-surface-base px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[372px] max-md:p-0", b),
         ...r,
         children: s.map((u) => {
-          var m, N, n, w, p, S, v, A, M, k, C;
+          var m, N, n, w, p, S, D, A, M, k, C;
           return /* @__PURE__ */ e(bs, { children: /* @__PURE__ */ a("div", { className: "max-md:border flex items-center justify-between px-ds-03 py-ds-04 max-md:rounded-ds-lg max-md:border-surface-border-strong", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-04", children: [
               /* @__PURE__ */ a(Qe, { className: "h-ds-md w-ds-md border-2 max-md:mb-[auto]", children: [
@@ -1128,7 +1128,7 @@ const js = _.forwardRef(
                   "button",
                   {
                     "aria-label": "Reject correction",
-                    className: D("rounded-ds-full p-ds-03 text-surface-fg-subtle hover:text-surface-fg-muted", ((S = u == null ? void 0 : u.user) == null ? void 0 : S.id) === l ? "cursor-not-allowed opacity-action-disabled" : ""),
+                    className: v("rounded-ds-full p-ds-03 text-surface-fg-subtle hover:text-surface-fg-muted", ((S = u == null ? void 0 : u.user) == null ? void 0 : S.id) === l ? "cursor-not-allowed opacity-action-disabled" : ""),
                     onClick: () => {
                       var T;
                       return ((T = u == null ? void 0 : u.user) == null ? void 0 : T.id) !== l && x(
@@ -1136,7 +1136,7 @@ const js = _.forwardRef(
                         "REJECTED"
                       );
                     },
-                    disabled: ((v = u == null ? void 0 : u.user) == null ? void 0 : v.id) === l,
+                    disabled: ((D = u == null ? void 0 : u.user) == null ? void 0 : D.id) === l,
                     children: /* @__PURE__ */ e(me, { className: "h-ico-lg w-ico-lg" })
                   }
                 ) }),
@@ -1147,7 +1147,7 @@ const js = _.forwardRef(
                   "button",
                   {
                     "aria-label": "Approve correction",
-                    className: D("rounded-ds-full p-ds-03", ((M = u == null ? void 0 : u.user) == null ? void 0 : M.id) === l ? "cursor-not-allowed opacity-action-disabled" : ""),
+                    className: v("rounded-ds-full p-ds-03", ((M = u == null ? void 0 : u.user) == null ? void 0 : M.id) === l ? "cursor-not-allowed opacity-action-disabled" : ""),
                     onClick: () => {
                       var T;
                       return ((T = u == null ? void 0 : u.user) == null ? void 0 : T.id) !== l && x(
@@ -1243,10 +1243,10 @@ const Os = _.forwardRef(
       "div",
       {
         ref: r,
-        className: D("no-scrollbar max-h-[230px] w-full overflow-y-auto px-0 md:px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[407.2px]", h),
+        className: v("no-scrollbar max-h-[230px] w-full overflow-y-auto px-0 md:px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[407.2px]", h),
         ...b,
         children: /* @__PURE__ */ e("div", { className: "flex h-full flex-col gap-ds-03 py-ds-03 max-md:h-[max-content] max-md:gap-ds-05 max-md:py-0 max-md:pb-ds-05", children: s == null ? void 0 : s.map((n) => {
-          var w, p, S, v, A, M, k, C, T, K, z, E, j, P;
+          var w, p, S, D, A, M, k, C, T, K, z, E, j, P;
           return /* @__PURE__ */ a(
             "div",
             {
@@ -1263,7 +1263,7 @@ const Os = _.forwardRef(
                       }
                     ),
                     /* @__PURE__ */ a("div", { className: "flex max-w-[277px] flex-col items-start gap-ds-02 sm:max-w-none", children: [
-                      /* @__PURE__ */ e("div", { className: "flex flex-row gap-ds-02b", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-03", children: /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-muted", children: (v = n.user) == null ? void 0 : v.name }) }) }),
+                      /* @__PURE__ */ e("div", { className: "flex flex-row gap-ds-02b", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-03", children: /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-muted", children: (D = n.user) == null ? void 0 : D.name }) }) }),
                       N(n) ? /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-center gap-ds-03 md:flex-row md:flex-wrap max-md:items-start", children: [
                         /* @__PURE__ */ e("p", { className: "text-ds-base font-semibold text-surface-fg", children: je(n.reason) }),
                         /* @__PURE__ */ e("p", { className: "text-ds-base hidden font-semibold text-surface-fg-subtle md:block", children: "•" }),
@@ -1301,7 +1301,7 @@ const Os = _.forwardRef(
                             ((g = n == null ? void 0 : n.user) == null ? void 0 : g.id) !== l && (f.setActiveRequest(n), f.setActiveAction("rejectBreak"), ((y = f.activeRequest) == null ? void 0 : y.id) !== n.id && f.setMessage(""), m(n, "rejectBreak"));
                           },
                           disabled: f.isProcessing || ((A = n == null ? void 0 : n.user) == null ? void 0 : A.id) === l,
-                          className: D(
+                          className: v(
                             "rounded-ds-full p-ds-03",
                             ((M = f.activeRequest) == null ? void 0 : M.id) === n.id && f.activeAction === "rejectBreak" && "bg-error-3",
                             ((k = n == null ? void 0 : n.user) == null ? void 0 : k.id) === l && "cursor-not-allowed opacity-action-disabled",
@@ -1310,7 +1310,7 @@ const Os = _.forwardRef(
                           children: /* @__PURE__ */ e(
                             me,
                             {
-                              className: D(
+                              className: v(
                                 "h-ico-lg w-ico-lg",
                                 ((C = f.activeRequest) == null ? void 0 : C.id) === n.id && f.activeAction === "rejectBreak" && "text-error-11"
                               )
@@ -1336,7 +1336,7 @@ const Os = _.forwardRef(
                             ((g = n == null ? void 0 : n.user) == null ? void 0 : g.id) !== l && (f.setActiveRequest(n), f.setActiveAction("approveBreak"), ((y = f.activeRequest) == null ? void 0 : y.id) !== n.id && f.setMessage(""), m(n, "approveBreak"));
                           },
                           disabled: f.isProcessing || ((K = n == null ? void 0 : n.user) == null ? void 0 : K.id) === l,
-                          className: D(
+                          className: v(
                             "rounded-ds-full p-ds-03",
                             ((z = f.activeRequest) == null ? void 0 : z.id) === n.id && f.activeAction === "approveBreak" && "bg-success-3",
                             ((E = n == null ? void 0 : n.user) == null ? void 0 : E.id) === l && "cursor-not-allowed opacity-action-disabled",
@@ -1589,8 +1589,8 @@ const We = Ee.forwardRef(function({
   const u = Ps(), [m, N] = B("leaveRequest"), [n, w] = B(
     null
   ), p = $(
-    (v) => {
-      w(v), h == null || h(v);
+    (D) => {
+      w(D), h == null || h(D);
     },
     [h]
   ), S = Be(
@@ -1622,9 +1622,9 @@ const We = Ee.forwardRef(function({
     "div",
     {
       ref: x,
-      className: D("flex w-full max-w-layout flex-col items-center justify-center max-md:h-[100%] max-md:justify-start", r),
+      className: v("flex w-full max-w-layout flex-col items-center justify-center max-md:h-[100%] max-md:justify-start", r),
       ...f,
-      children: /* @__PURE__ */ e("div", { className: "z-raised flex w-full flex-col items-start justify-start rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-05 shadow-05 max-md:flex-1 max-md:min-h-0 max-md:overflow-y-auto max-md:border-0 max-md:px-ds-05 max-md:pb-0 max-md:pt-ds-06", children: b })
+      children: /* @__PURE__ */ e("div", { className: "z-raised flex w-full flex-col items-start justify-start rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05 shadow-overlay max-md:flex-1 max-md:min-h-0 max-md:overflow-y-auto max-md:border-0 max-md:px-ds-05 max-md:pb-0 max-md:pt-ds-06", children: b })
     }
   ) });
 });
@@ -1640,15 +1640,15 @@ const _s = Ee.forwardRef(function({
 }, b) {
   const { cal: r, selectedAssociate: f, setSelectedAssociate: x, userImages: u, setActiveTab: m } = Me(), N = () => {
     r.goToday(), m("leaveRequest");
-  }, n = (v) => {
-    r.navigateDate(v), m("leaveRequest");
-  }, w = (v) => {
-    r.selectMonth(v), m("leaveRequest");
-  }, p = (v) => {
-    const A = r.days[v].fullDate;
-    r.selectDate(v, A), l == null || l(O(A, "yyyy-MM-dd'T'HH:mm:ssxxx"));
-  }, S = (v, A) => {
-    r.activeTimeFrame === "weekly" ? (p(v), m("leaveRequest")) : (r.selectDayMonthly(A), m("leaveRequest"), l == null || l(O(A, "yyyy-MM-dd'T'HH:mm:ssxxx")));
+  }, n = (D) => {
+    r.navigateDate(D), m("leaveRequest");
+  }, w = (D) => {
+    r.selectMonth(D), m("leaveRequest");
+  }, p = (D) => {
+    const A = r.days[D].fullDate;
+    r.selectDate(D, A), l == null || l(O(A, "yyyy-MM-dd'T'HH:mm:ssxxx"));
+  }, S = (D, A) => {
+    r.activeTimeFrame === "weekly" ? (p(D), m("leaveRequest")) : (r.selectDayMonthly(A), m("leaveRequest"), l == null || l(O(A, "yyyy-MM-dd'T'HH:mm:ssxxx")));
   };
   return se(() => {
     t == null || t(r.activeTimeFrame);
@@ -1668,39 +1668,39 @@ const _s = Ee.forwardRef(function({
         onMonthSelection: w,
         onTodayClick: N,
         onSelectAssociate: x,
-        onTimeFrameChange: (v) => r.setActiveTimeFrame(v),
+        onTimeFrameChange: (D) => r.setActiveTimeFrame(D),
         onDateChange: n
       }
     ),
     /* @__PURE__ */ a(
       "div",
       {
-        className: D(
+        className: v(
           "calendar",
           r.activeTimeFrame === "weekly" ? "flex" : "grid grid-cols-7 gap-0",
           "w-full items-center"
         ),
         children: [
-          r.activeTimeFrame === "monthly" && ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map((v) => /* @__PURE__ */ e("div", { className: "pb-ds-03 pt-ds-05 text-center", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider  text-surface-fg-subtle", children: v }) }, v)),
-          r.days.map((v, A) => /* @__PURE__ */ a(
+          r.activeTimeFrame === "monthly" && ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map((D) => /* @__PURE__ */ e("div", { className: "pb-ds-03 pt-ds-05 text-center", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider  text-surface-fg-subtle", children: D }) }, D)),
+          r.days.map((D, A) => /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              tabIndex: v.isPadding ? -1 : 0,
-              "aria-label": v.isPadding ? void 0 : O(v.fullDate, "MMMM d, yyyy"),
-              className: D(
+              tabIndex: D.isPadding ? -1 : 0,
+              "aria-label": D.isPadding ? void 0 : O(D.fullDate, "MMMM d, yyyy"),
+              className: v(
                 r.activeTimeFrame === "weekly" ? "w-full rounded-t-ds-lg pb-ds-04 pt-ds-05 max-md:rounded-ds-lg" : "pb-0 pt-0",
                 "flex cursor-pointer flex-col items-center text-center",
-                r.activeTimeFrame === "weekly" && r.activeIndex === A ? (o == null ? void 0 : o.status) === "BREAK" ? "bg-accent-2" : "bg-surface-2" : "",
-                v.isPadding && "opacity-50"
+                r.activeTimeFrame === "weekly" && r.activeIndex === A ? (o == null ? void 0 : o.status) === "BREAK" ? "bg-accent-2" : "bg-surface-raised" : "",
+                D.isPadding && "opacity-50"
               ),
-              onClick: () => S(A, v.fullDate),
+              onClick: () => S(A, D.fullDate),
               children: [
-                r.activeTimeFrame === "weekly" && /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-03  text-surface-fg-subtle", children: v.day }),
+                r.activeTimeFrame === "weekly" && /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-03  text-surface-fg-subtle", children: D.day }),
                 /* @__PURE__ */ e(
                   Ss,
                   {
-                    day: v,
+                    day: D,
                     isAdmin: !0,
                     selectedDate: r.selectedDate,
                     dateAttendanceMap: f ? s : null,
@@ -1799,7 +1799,7 @@ const fs = rt(
   const p = (S) => {
     N(S);
   };
-  return w.length === 0 && s.length === 0 ? null : /* @__PURE__ */ e("div", { ref: r, className: D("w-full p-0 md:p-ds-06", h), ...b, children: /* @__PURE__ */ a("div", { className: "max-md:pt-[16px] flex flex-col items-start overflow-hidden rounded-ds-lg border-0 border-surface-border bg-surface-2 shadow-01 pt-ds-03 md:border max-md:pb-0", children: [
+  return w.length === 0 && s.length === 0 ? null : /* @__PURE__ */ e("div", { ref: r, className: v("w-full p-0 md:p-ds-06", h), ...b, children: /* @__PURE__ */ a("div", { className: "max-md:pt-[16px] flex flex-col items-start overflow-hidden rounded-ds-lg border-0 border-surface-border bg-surface-raised shadow-raised pt-ds-03 md:border max-md:pb-0", children: [
     /* @__PURE__ */ a("div", { className: "flex w-full items-start border-b-[1px] border-b-surface-border px-ds-06 md:border-b max-md:border-0 max-md:px-0", children: [
       s.length > 0 && /* @__PURE__ */ a(
         "button",
@@ -1870,8 +1870,8 @@ const $s = Ee.forwardRef(function({ children: s, className: l, ...t }, i) {
     "div",
     {
       ref: i,
-      className: D(
-        "flex w-full flex-col rounded-ds-lg bg-surface-2 md:p-ds-06 max-md:bg-transparent",
+      className: v(
+        "flex w-full flex-col rounded-ds-lg bg-surface-raised md:p-ds-06 max-md:bg-transparent",
         {
           "rounded-ds-lg": !c && !h,
           "rounded-ds-lg rounded-tl-none": c && !h,
@@ -1909,7 +1909,7 @@ const ua = Object.assign(We, {
     }, f = (x, u) => {
       c.activeTimeFrame === "weekly" ? c.selectDate(x, u) : c.selectDayMonthly(u), s(u);
     };
-    return /* @__PURE__ */ a("div", { ref: o, className: D("w-full", t), ...i, children: [
+    return /* @__PURE__ */ a("div", { ref: o, className: v("w-full", t), ...i, children: [
       /* @__PURE__ */ a("div", { className: "mb-ds-06 flex w-full items-center justify-start", children: [
         /* @__PURE__ */ a(ge, { children: [
           /* @__PURE__ */ a(we, { className: "text-ds-xl flex items-center gap-ds-03 text-surface-fg-muted", children: [
@@ -1945,7 +1945,7 @@ const ua = Object.assign(We, {
               {
                 "aria-label": "Previous",
                 onClick: () => h("prev"),
-                className: "rounded-ds-full p-ds-02 hover:bg-surface-3",
+                className: "rounded-ds-full p-ds-02 hover:bg-surface-raised-hover",
                 children: /* @__PURE__ */ e(Ne, { className: "h-ico-md w-ico-md text-surface-fg-muted" })
               }
             ),
@@ -1954,7 +1954,7 @@ const ua = Object.assign(We, {
               {
                 "aria-label": "Next",
                 onClick: () => h("next"),
-                className: "rounded-ds-full p-ds-02 hover:bg-surface-3",
+                className: "rounded-ds-full p-ds-02 hover:bg-surface-raised-hover",
                 children: /* @__PURE__ */ e(ye, { className: "h-ico-md w-ico-md text-surface-fg-muted" })
               }
             )
@@ -1964,7 +1964,7 @@ const ua = Object.assign(We, {
       /* @__PURE__ */ a(
         "div",
         {
-          className: D(
+          className: v(
             "calendar",
             c.activeTimeFrame === "weekly" ? "flex" : "grid grid-cols-7 gap-0",
             "w-full items-center overflow-hidden"
@@ -1977,10 +1977,10 @@ const ua = Object.assign(We, {
                 type: "button",
                 tabIndex: x.isPadding ? -1 : 0,
                 "aria-label": x.isPadding ? void 0 : O(x.fullDate, "MMMM d, yyyy"),
-                className: D(
+                className: v(
                   c.activeTimeFrame === "weekly" ? "w-full rounded-t-ds-lg pb-ds-04 pt-ds-05" : "pb-0 pt-0",
                   "flex cursor-pointer flex-col items-center text-center",
-                  c.activeTimeFrame === "weekly" && c.activeIndex === u && "bg-surface-2",
+                  c.activeTimeFrame === "weekly" && c.activeIndex === u && "bg-surface-raised",
                   x.isPadding && "opacity-50"
                 ),
                 onClick: () => f(u, x.fullDate),
@@ -1989,7 +1989,7 @@ const ua = Object.assign(We, {
                   /* @__PURE__ */ a(
                     "div",
                     {
-                      className: D(
+                      className: v(
                         "mx-ds-02 my-ds-02 flex-col",
                         "flex h-ds-md w-ds-md items-center justify-center",
                         c.activeTimeFrame === "monthly" && q(x.fullDate, new Date(c.selectedDate)) && "rounded-ds-full bg-accent-2 ring-2 ring-inset ring-accent-9"
@@ -1998,10 +1998,10 @@ const ua = Object.assign(We, {
                         /* @__PURE__ */ e(
                           "span",
                           {
-                            className: D(
+                            className: v(
                               "text-ds-base flex h-ds-md w-ds-md items-center justify-center rounded-ds-full",
                               x.isToday ? "bg-accent-10 p-ds-03 text-accent-fg" : "text-surface-fg-muted",
-                              x.isActive && !x.isToday && "bg-surface-3"
+                              x.isActive && !x.isToday && "bg-surface-raised-hover"
                             ),
                             children: x.date
                           }
@@ -2029,7 +2029,7 @@ const Ks = _.forwardRef(
     className: i,
     ...o
   }, c) {
-    return /* @__PURE__ */ a("div", { ref: c, className: D("m-0 flex h-[400px] flex-col items-start justify-start p-0 max-md:h-auto", i), ...o, children: [
+    return /* @__PURE__ */ a("div", { ref: c, className: v("m-0 flex h-[400px] flex-col items-start justify-start p-0 max-md:h-auto", i), ...o, children: [
       /* @__PURE__ */ a("div", { className: "m-0 mx-[4%] mb-ds-05 mt-ds-04 flex w-[92%] items-start justify-start gap-ds-03 p-0 text-surface-fg-subtle", children: [
         /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider w-[16.4%] min-w-[120px] px-ds-04 py-ds-03 text-surface-fg-subtle", children: "NAME" }),
         /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider w-[16.4%] px-ds-04 py-ds-03 text-surface-fg-subtle", children: "Total Balance" })
@@ -2039,7 +2039,7 @@ const Ks = _.forwardRef(
         return /* @__PURE__ */ a(
           "div",
           {
-            className: "flex w-full flex-row items-center justify-start gap-ds-03 !border-0 text-left hover:bg-surface-3",
+            className: "flex w-full flex-row items-center justify-start gap-ds-03 !border-0 text-left transition-colors duration-fast-01 hover:bg-surface-raised-hover",
             children: [
               /* @__PURE__ */ a("div", { className: "flex w-1/6 min-w-[120px] items-center gap-ds-03 p-ds-04", children: [
                 /* @__PURE__ */ a(Qe, { className: "h-ds-xs-plus w-ds-xs-plus", children: [
@@ -2070,20 +2070,20 @@ const zs = _.forwardRef(function({
   className: r,
   ...f
 }, x) {
-  var p, S, v, A, M, k, C, T, K;
+  var p, S, D, A, M, k, C, T, K;
   const [u, m] = B(""), N = new Date(s.startDate), n = new Date(s.endDate), w = Z(N, n);
   return /* @__PURE__ */ a(Q, { children: [
     /* @__PURE__ */ a(
       "div",
       {
         ref: x,
-        className: D("flex justify-between border-b border-surface-border-strong px-ds-03 py-ds-04 last:border-b-0", r),
+        className: v("flex justify-between border-b border-surface-border-strong px-ds-03 py-ds-04 last:border-b-0", r),
         ...f,
         children: [
           /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-ds-04", children: [
             /* @__PURE__ */ a(Qe, { className: "h-ds-md w-ds-md", children: [
               /* @__PURE__ */ e(Le, { src: l[((p = s.user) == null ? void 0 : p.id) || ""], alt: ((S = s.user) == null ? void 0 : S.name) || "" }),
-              /* @__PURE__ */ e(qe, { children: (((v = s.user) == null ? void 0 : v.name) || "?")[0] })
+              /* @__PURE__ */ e(qe, { children: (((D = s.user) == null ? void 0 : D.name) || "?")[0] })
             ] }),
             /* @__PURE__ */ a("div", { className: "flex w-auto max-w-[75%] flex-col items-start gap-ds-02b", children: [
               /* @__PURE__ */ e("div", { className: "flex flex-row gap-ds-02b", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
@@ -2172,12 +2172,12 @@ const zs = _.forwardRef(function({
           c(), m("");
         },
         children: /* @__PURE__ */ a(fe, { children: [
-          /* @__PURE__ */ a(ve, { children: [
+          /* @__PURE__ */ a(De, { children: [
             /* @__PURE__ */ e(pt, { className: "text-ds-xl", children: (K = s.user) == null ? void 0 : K.name }),
             /* @__PURE__ */ e(Xe, { className: "text-ds-lg", children: s.reason })
           ] }),
           /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ a("div", { className: "text-ds-md flex flex-col items-start justify-center gap-ds-03 rounded-ds-lg border border-surface-border bg-surface-1 shadow-01 px-ds-05 pb-ds-01 pt-ds-03 text-surface-fg", children: [
+            /* @__PURE__ */ a("div", { className: "text-ds-md flex flex-col items-start justify-center gap-ds-03 rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised px-ds-05 pb-ds-01 pt-ds-03 text-surface-fg", children: [
               /* @__PURE__ */ e("label", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", htmlFor: "comment", children: "Comment" }),
               /* @__PURE__ */ e(
                 gt,
@@ -2221,8 +2221,8 @@ const Ws = _.forwardRef(function({ id: s, userId: l, onDelete: t, className: i,
     }
   };
   return /* @__PURE__ */ a(ue, { open: r, onOpenChange: f, children: [
-    /* @__PURE__ */ e(De, { asChild: !0, children: /* @__PURE__ */ e(X, { icon: /* @__PURE__ */ e(mt, {}), size: "md", "aria-label": "Delete break" }) }),
-    /* @__PURE__ */ a(fe, { className: D("flex w-[335px] flex-col items-center gap-ds-06 p-ds-06 max-md:w-[90%] max-md:rounded-ds-lg", i), ...o, children: [
+    /* @__PURE__ */ e(ve, { asChild: !0, children: /* @__PURE__ */ e(X, { icon: /* @__PURE__ */ e(mt, {}), size: "md", "aria-label": "Delete break" }) }),
+    /* @__PURE__ */ a(fe, { className: v("flex w-[335px] flex-col items-center gap-ds-06 p-ds-06 max-md:w-[90%] max-md:rounded-ds-lg", i), ...o, children: [
       /* @__PURE__ */ a("div", { className: "flex w-full max-w-[240px] flex-col items-center gap-ds-04 text-center", children: [
         /* @__PURE__ */ e("p", { className: "text-ds-lg font-semibold text-center text-surface-fg", children: "Delete this break?" }),
         /* @__PURE__ */ e("p", { className: "text-ds-base text-surface-fg-subtle", children: "This will be permanently deleted and can not undo" })
@@ -2250,11 +2250,11 @@ function Oe(d, s, l) {
 }
 function Pt(d, s) {
   const l = ee(d), t = ee(s);
-  return ys(l, t) || Ds(l, t);
+  return ys(l, t) || vs(l, t);
 }
 function Vs(d, s) {
   const l = ee(d), t = ee(s);
-  return Je(l, t) || Ds(l, t);
+  return Je(l, t) || vs(l, t);
 }
 function Ft(d, s) {
   return Je(ee(d), ee(s));
@@ -2354,7 +2354,7 @@ const Js = _.forwardRef(function({
       console.error("Error fetching breaks:", g);
     });
   }, [p.currentMonth, p.currentYear, l, t]);
-  const v = (g) => {
+  const D = (g) => {
     const { name: y, value: Y } = g.target;
     w((F) => ({
       ...F,
@@ -2417,7 +2417,7 @@ const Js = _.forwardRef(function({
     return /* @__PURE__ */ e(
       "div",
       {
-        className: D("text-ds-sm w-fit rounded-ds-2xl px-ds-02b py-ds-02 capitalize", F),
+        className: v("text-ds-sm w-fit rounded-ds-2xl px-ds-02b py-ds-02 capitalize", F),
         children: Y
       }
     );
@@ -2493,18 +2493,18 @@ const Js = _.forwardRef(function({
     }
   }, E = (g) => !p.selectedStartDate || !p.selectedEndDate ? !!(p.showCalendar && (p.activeDate === "start" && n.startDate === g || p.activeDate === "end" && n.endDate === g)) : Oe(g, p.selectedStartDate, p.selectedEndDate), j = K(p.currentMonth, p.currentYear);
   return /* @__PURE__ */ a(ue, { children: [
-    /* @__PURE__ */ e(De, { asChild: !0, children: /* @__PURE__ */ a(
+    /* @__PURE__ */ e(ve, { asChild: !0, children: /* @__PURE__ */ a(
       J,
       {
         variant: "outline",
-        className: "text-ds-base border-surface-border-strong bg-surface-1 px-ds-05 py-ds-04 pr-ds-06 text-surface-fg-muted shadow-02",
+        className: "text-ds-base border-surface-border-strong bg-surface-overlay px-ds-05 py-ds-04 pr-ds-06 text-surface-fg-muted shadow-raised-hover",
         children: [
           /* @__PURE__ */ e(Ge, {}),
           /* @__PURE__ */ e("span", { children: "Edit" })
         ]
       }
     ) }),
-    /* @__PURE__ */ e(fe, { className: D("w-[440px] p-ds-06 max-md:w-[90%] max-md:rounded-ds-lg", c), ...h, children: /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-center gap-ds-05", children: [
+    /* @__PURE__ */ e(fe, { className: v("w-[440px] p-ds-06 max-md:w-[90%] max-md:rounded-ds-lg", c), ...h, children: /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-center gap-ds-05", children: [
       /* @__PURE__ */ a("p", { className: "text-ds-md w-full text-left text-surface-fg-subtle", children: [
         "Edit break details of",
         " ",
@@ -2528,8 +2528,8 @@ const Js = _.forwardRef(function({
                 {
                   type: "button",
                   onClick: () => M("start"),
-                  className: D(
-                    "text-ds-md flex w-full items-center justify-center gap-ds-03 rounded-ds-full border bg-surface-2 px-ds-03 py-ds-03 text-surface-fg-muted max-md:text-ds-sm",
+                  className: v(
+                    "text-ds-md flex w-full items-center justify-center gap-ds-03 rounded-ds-full border bg-surface-raised px-ds-03 py-ds-03 text-surface-fg-muted max-md:text-ds-sm",
                     (p.showCalendar && p.activeDate === "start", "border-surface-border-strong")
                   ),
                   children: T(n.startDate)
@@ -2541,8 +2541,8 @@ const Js = _.forwardRef(function({
                 {
                   type: "button",
                   onClick: () => M("end"),
-                  className: D(
-                    "text-ds-md flex w-full items-center justify-center gap-ds-03 rounded-ds-full border bg-surface-2 px-ds-03 py-ds-03 text-surface-fg-muted max-md:text-ds-sm",
+                  className: v(
+                    "text-ds-md flex w-full items-center justify-center gap-ds-03 rounded-ds-full border bg-surface-raised px-ds-03 py-ds-03 text-surface-fg-muted max-md:text-ds-sm",
                     (p.showCalendar && p.activeDate === "end", "border-surface-border-strong")
                   ),
                   children: T(n.endDate)
@@ -2555,7 +2555,7 @@ const Js = _.forwardRef(function({
                   "button",
                   {
                     type: "button",
-                    className: "rounded-ds-full p-ds-03 hover:bg-surface-4",
+                    className: "rounded-ds-full p-ds-03 hover:bg-surface-raised-active",
                     onClick: () => p.navigateMonth("prev"),
                     children: /* @__PURE__ */ e(Ne, { className: "h-ico-md w-ico-md" })
                   }
@@ -2574,7 +2574,7 @@ const Js = _.forwardRef(function({
                   "button",
                   {
                     type: "button",
-                    className: "rounded-ds-full p-ds-03 hover:bg-surface-4",
+                    className: "rounded-ds-full p-ds-03 hover:bg-surface-raised-active",
                     onClick: () => p.navigateMonth("next"),
                     children: /* @__PURE__ */ e(ye, { className: "h-ico-md w-ico-md" })
                   }
@@ -2590,7 +2590,7 @@ const Js = _.forwardRef(function({
                     type: "button",
                     tabIndex: g.isPadding ? -1 : 0,
                     "aria-label": g.isPadding ? void 0 : O(new Date(g.fullDate), "MMMM d, yyyy"),
-                    className: D(
+                    className: v(
                       "flex cursor-pointer flex-col items-center pb-0 pt-0 text-center",
                       E(g.fullDate) && g.fullDate !== p.selectedStartDate && g.fullDate !== p.selectedEndDate && "bg-accent-2",
                       g.isPadding && "opacity-50",
@@ -2603,14 +2603,14 @@ const Js = _.forwardRef(function({
                     children: /* @__PURE__ */ e(
                       "div",
                       {
-                        className: D(
+                        className: v(
                           "mx-ds-02 my-ds-02",
                           g.isPadding && "opacity-50"
                         ),
                         children: /* @__PURE__ */ e(
                           "span",
                           {
-                            className: D(
+                            className: v(
                               "text-ds-base flex h-ds-md w-ds-md items-center justify-center rounded-ds-full",
                               (g.fullDate === p.selectedStartDate || g.fullDate === p.selectedEndDate || hs(g.fullDate, x, s.id)) && "bg-accent-9 ring-2 ring-inset ring-accent-7",
                               g.isToday ? "bg-accent-10 p-ds-03 text-accent-fg" : "text-surface-fg-muted"
@@ -2647,11 +2647,11 @@ const Js = _.forwardRef(function({
                     ]
                   }
                 ),
-                r && /* @__PURE__ */ a("div", { className: "text-ds-base absolute left-[10px] top-[25px] z-raised flex flex-col overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-1 shadow-02", role: "listbox", children: [
+                r && /* @__PURE__ */ a("div", { className: "text-ds-base absolute left-[10px] top-[25px] z-raised flex flex-col overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", role: "listbox", children: [
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: "cursor-pointer border-b border-b-surface-border bg-surface-1 px-ds-04 py-ds-03 text-left",
+                      className: "cursor-pointer border-b border-b-surface-border bg-surface-overlay px-ds-04 py-ds-03 text-left",
                       role: "option",
                       tabIndex: 0,
                       "aria-selected": n.status === "APPROVED",
@@ -2665,7 +2665,7 @@ const Js = _.forwardRef(function({
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: "cursor-pointer bg-surface-1 px-ds-04 py-ds-03 text-left",
+                      className: "cursor-pointer bg-surface-overlay px-ds-04 py-ds-03 text-left",
                       role: "option",
                       tabIndex: 0,
                       "aria-selected": n.status === "REJECTED",
@@ -2689,7 +2689,7 @@ const Js = _.forwardRef(function({
                   className: "text-ds-md text-surface-fg outline-none",
                   placeholder: "Enjoy your break, TC",
                   value: n.comment,
-                  onChange: v
+                  onChange: D
                 }
               )
             ] }),
@@ -2735,7 +2735,7 @@ const Gs = _.forwardRef(
     className: b,
     ...r
   }, f) {
-    return /* @__PURE__ */ a("div", { ref: f, className: D("m-0 flex h-[400px] w-full flex-col items-start justify-start p-0 max-md:h-auto", b), ...r, children: [
+    return /* @__PURE__ */ a("div", { ref: f, className: v("m-0 flex h-[400px] w-full flex-col items-start justify-start p-0 max-md:h-auto", b), ...r, children: [
       /* @__PURE__ */ a("div", { className: "mx-auto mb-ds-05 mt-ds-04 flex w-[92%] items-center", children: [
         /* @__PURE__ */ e("div", { className: "w-[16%] min-w-[120px] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "NAME" }) }),
         /* @__PURE__ */ e("div", { className: "w-[19%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "DATE" }) }),
@@ -2746,12 +2746,12 @@ const Gs = _.forwardRef(
         /* @__PURE__ */ e("div", { className: "w-ds-lg overflow-hidden px-ds-04 py-ds-03" })
       ] }),
       /* @__PURE__ */ e("div", { className: "no-scrollbar mx-auto flex w-[92%] flex-col gap-ds-05 overflow-y-auto max-md:h-[calc(100dvh-373px)]", children: s.map((x) => {
-        var n, w, p, S, v, A;
+        var n, w, p, S, D, A;
         const u = new Date(x.startDate), m = new Date(x.endDate), N = Z(u, m);
         return /* @__PURE__ */ a(
           "div",
           {
-            className: "flex w-full items-center hover:bg-surface-3",
+            className: "flex w-full items-center transition-colors duration-fast-01 hover:bg-surface-raised-hover",
             children: [
               /* @__PURE__ */ a("div", { className: "flex w-[16%] min-w-[120px] items-center gap-ds-03 overflow-hidden px-ds-04 py-ds-03", children: [
                 l[x.userId] ? /* @__PURE__ */ e(
@@ -2761,9 +2761,9 @@ const Gs = _.forwardRef(
                     alt: "",
                     className: "h-ds-xs-plus w-full max-w-7 flex-shrink-0 rounded-ds-full object-cover"
                   }
-                ) : /* @__PURE__ */ e("span", { className: "flex h-ds-xs-plus w-full max-w-7 items-center justify-center rounded-ds-full bg-surface-2 text-ds-sm font-medium uppercase text-surface-fg", children: ((w = (n = x.user) == null ? void 0 : n.name) == null ? void 0 : w[0]) || "U" }),
-                /* @__PURE__ */ a(vt, { children: [
-                  /* @__PURE__ */ e(Et, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-ds-md truncate text-surface-fg", children: ((p = x.user) == null ? void 0 : p.name) || ((v = (S = x.user) == null ? void 0 : S.name) == null ? void 0 : v.split(" ")[0]) }) }),
+                ) : /* @__PURE__ */ e("span", { className: "flex h-ds-xs-plus w-full max-w-7 items-center justify-center rounded-ds-full bg-surface-raised text-ds-sm font-medium uppercase text-surface-fg", children: ((w = (n = x.user) == null ? void 0 : n.name) == null ? void 0 : w[0]) || "U" }),
+                /* @__PURE__ */ a(Dt, { children: [
+                  /* @__PURE__ */ e(Et, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-ds-md truncate text-surface-fg", children: ((p = x.user) == null ? void 0 : p.name) || ((D = (S = x.user) == null ? void 0 : S.name) == null ? void 0 : D.split(" ")[0]) }) }),
                   /* @__PURE__ */ e(kt, { children: (A = x.user) == null ? void 0 : A.name })
                 ] })
               ] }),
@@ -2845,7 +2845,7 @@ const ps = [
         isOpen: !1
       }));
     };
-    return /* @__PURE__ */ a("div", { ref: b, className: D("flex min-w-[800px] items-center justify-between bg-surface-3 px-ds-06 py-ds-05b max-md:justify-start max-md:gap-ds-05b max-lg:min-w-[100%]", c), ...h, children: [
+    return /* @__PURE__ */ a("div", { ref: b, className: v("flex min-w-[800px] items-center justify-between bg-surface-raised-hover px-ds-06 py-ds-05b max-md:justify-start max-md:gap-ds-05b max-lg:min-w-[100%]", c), ...h, children: [
       /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-05", children: s.selectedAssociate && /* @__PURE__ */ a(Q, { children: [
         /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "Break Balance" }),
         /* @__PURE__ */ a("div", { className: "flex items-end", children: [
@@ -2866,7 +2866,7 @@ const ps = [
                 alt: `${s.selectedAssociate.name}'s avatar`,
                 className: "h-ico-md w-ico-md rounded-ds-full"
               }
-            ) : /* @__PURE__ */ e("div", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-surface-2", children: /* @__PURE__ */ e("span", { className: "text-accent-11", children: s.selectedAssociate.name.charAt(0) }) }),
+            ) : /* @__PURE__ */ e("div", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-surface-raised", children: /* @__PURE__ */ e("span", { className: "text-accent-11", children: s.selectedAssociate.name.charAt(0) }) }),
             /* @__PURE__ */ e("span", { className: "text-ds-md mx-ds-01 text-accent-fg", children: s.selectedAssociate.name })
           ] }),
           /* @__PURE__ */ e(
@@ -2882,9 +2882,9 @@ const ps = [
             }
           )
         ] }) : /* @__PURE__ */ a(ge, { children: [
-          /* @__PURE__ */ a(we, { className: "text-ds-md flex flex-row items-center justify-between rounded-ds-md border border-surface-border bg-surface-1 px-ds-03 py-ds-02b", children: [
+          /* @__PURE__ */ a(we, { className: "text-ds-md flex flex-row items-center justify-between rounded-ds-md border border-surface-border bg-surface-base px-ds-03 py-ds-02b", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center", children: [
-              /* @__PURE__ */ e(vs, { className: "h-ico-sm w-ico-sm" }),
+              /* @__PURE__ */ e(Ds, { className: "h-ico-sm w-ico-sm" }),
               /* @__PURE__ */ e("span", { className: "text-ds-md mx-ds-03 text-surface-fg-muted max-lg:mx-0 max-lg:text-ds-sm", children: "Associate" })
             ] }),
             /* @__PURE__ */ e(oe, { className: "h-ico-sm w-ico-sm" })
@@ -2905,7 +2905,7 @@ const ps = [
                     alt: `${m.name}'s avatar`,
                     className: "h-ds-xs w-ds-xs rounded-ds-full"
                   }
-                ) : /* @__PURE__ */ e("div", { className: "flex h-ds-xs w-ds-xs items-center justify-center rounded-ds-full bg-surface-3", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-accent-11", children: m.name.charAt(0) }) }),
+                ) : /* @__PURE__ */ e("div", { className: "flex h-ds-xs w-ds-xs items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-accent-11", children: m.name.charAt(0) }) }),
                 /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: m.name })
               ]
             },
@@ -2945,7 +2945,7 @@ const ps = [
               r((N) => ({ ...N, isOpen: m }));
             },
             children: [
-              /* @__PURE__ */ a(we, { className: "text-ds-md flex items-center justify-between rounded-ds-md border border-surface-border bg-surface-1 p-ds-02b", children: [
+              /* @__PURE__ */ a(we, { className: "text-ds-md flex items-center justify-between rounded-ds-md border border-surface-border bg-surface-base p-ds-02b", children: [
                 /* @__PURE__ */ a("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ e(ht, {}),
                   /* @__PURE__ */ e("span", { className: "mx-ds-03 text-surface-fg-muted", children: "Date" })
@@ -3026,12 +3026,12 @@ const ps = [
 Zs.displayName = "BreakAdminHeader";
 const Xs = _.forwardRef(
   function({ className: s, ...l }, t) {
-    return /* @__PURE__ */ a("div", { ref: t, className: D("z-base h-fit w-full max-w-layout-body overflow-hidden border-[1px] border-surface-border bg-surface-3 sm:rounded-ds-lg", s), ...l, children: [
-      /* @__PURE__ */ e("div", { className: "flex items-center justify-end bg-surface-3 px-ds-06 py-ds-05b", children: /* @__PURE__ */ e("header", { className: "flex items-center", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-04", children: [
+    return /* @__PURE__ */ a("div", { ref: t, className: v("z-base h-fit w-full max-w-layout-body overflow-hidden border-[1px] border-surface-border bg-surface-raised-hover sm:rounded-ds-lg", s), ...l, children: [
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-end bg-surface-raised-hover px-ds-06 py-ds-05b", children: /* @__PURE__ */ e("header", { className: "flex items-center", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-04", children: [
         /* @__PURE__ */ e(R, { className: "h-ds-sm-plus w-32 rounded-ds-md" }),
         /* @__PURE__ */ e(R, { className: "h-ds-sm-plus w-32 rounded-ds-md" })
       ] }) }) }),
-      /* @__PURE__ */ a("div", { className: "flex h-fit flex-col border-t-[1px] border-surface-border bg-surface-2 shadow-transparent", children: [
+      /* @__PURE__ */ a("div", { className: "flex h-fit flex-col border-t-[1px] border-surface-border bg-surface-raised shadow-transparent", children: [
         /* @__PURE__ */ a("div", { className: "flex w-full gap-ds-03 border-b-[1px] border-surface-border-strong px-ds-06 pt-ds-03", children: [
           /* @__PURE__ */ e(R, { className: "h-ds-md w-20" }),
           /* @__PURE__ */ e(R, { className: "h-ds-md w-24" }),
@@ -3039,12 +3039,12 @@ const Xs = _.forwardRef(
         ] }),
         /* @__PURE__ */ a("div", { className: "h-[400px] border-0 px-ds-06 py-ds-05", children: [
           /* @__PURE__ */ a("div", { className: "mb-ds-05 ml-ds-06 grid grid-cols-6 items-center gap-ds-05 py-ds-03", children: [
-            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" }),
-            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" }),
-            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" }),
-            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" }),
-            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" }),
-            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" })
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-05", children: Array.from({ length: 5 }).map((i, o) => /* @__PURE__ */ a(
             "div",
@@ -3052,19 +3052,19 @@ const Xs = _.forwardRef(
               className: "ml-ds-06 grid grid-cols-6 items-center gap-ds-05 rounded-ds-lg py-ds-03",
               children: [
                 /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-3" }),
-                  /* @__PURE__ */ e(R, { className: "h-5 w-24 bg-surface-3" })
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-raised-hover" }),
+                  /* @__PURE__ */ e(R, { className: "h-5 w-24 bg-surface-raised-hover" })
                 ] }),
-                /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" }),
-                /* @__PURE__ */ e(R, { className: "h-5 w-16 bg-surface-3" }),
-                /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-3" }),
+                /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" }),
+                /* @__PURE__ */ e(R, { className: "h-5 w-16 bg-surface-raised-hover" }),
+                /* @__PURE__ */ e(R, { className: "h-5 w-full bg-surface-raised-hover" }),
                 /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-                  /* @__PURE__ */ e(R, { className: "h-ds-xs w-ds-xs rounded-ds-full bg-surface-3" }),
-                  /* @__PURE__ */ e(R, { className: "h-5 w-16 bg-surface-3" })
+                  /* @__PURE__ */ e(R, { className: "h-ds-xs w-ds-xs rounded-ds-full bg-surface-raised-hover" }),
+                  /* @__PURE__ */ e(R, { className: "h-5 w-16 bg-surface-raised-hover" })
                 ] }),
                 /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-ds-03", children: [
-                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-3" }),
-                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-3" })
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-raised-hover" }),
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-surface-raised-hover" })
                 ] })
               ]
             },
@@ -3105,7 +3105,7 @@ const Ve = _.forwardRef(
     onApproveRequest: w,
     onRejectRequest: p,
     onApproveCashout: S,
-    onRejectCashout: v,
+    onRejectCashout: D,
     onRefresh: A,
     onSaveBreak: M,
     onDeleteBreak: k,
@@ -3243,11 +3243,11 @@ const Ve = _.forwardRef(
       "div",
       {
         ref: P,
-        className: D("z-base flex w-full max-w-layout flex-col items-center justify-center md:pt-0", E),
+        className: v("z-base flex w-full max-w-layout flex-col items-center justify-center md:pt-0", E),
         ...j,
         children: /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-auto border border-surface-border sm:rounded-ds-lg max-md:rounded-ds-none max-md:border-0", children: z ?? /* @__PURE__ */ a(Q, { children: [
           /* @__PURE__ */ e(Ue, {}),
-          /* @__PURE__ */ a("div", { className: "no-scrollbar flex h-fit min-w-[800px] flex-col border-t-[1px] border-surface-border bg-surface-2 shadow-transparent max-lg:min-w-[100%] max-lg:overflow-x-auto", children: [
+          /* @__PURE__ */ a("div", { className: "no-scrollbar flex h-fit min-w-[800px] flex-col border-t-[1px] border-surface-border bg-surface-raised shadow-transparent max-lg:min-w-[100%] max-lg:overflow-x-auto", children: [
             /* @__PURE__ */ e(es, {}),
             /* @__PURE__ */ a("div", { className: "w-full border-0 max-lg:min-w-[800px]", children: [
               /* @__PURE__ */ e(ss, {}),
@@ -3269,7 +3269,7 @@ const Ue = _.forwardRef(function({ className: s, ...l }, t) {
     userImages: h,
     users: b
   } = Se();
-  return /* @__PURE__ */ e("div", { ref: t, className: D(s), ...l, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { ref: t, className: v(s), ...l, children: /* @__PURE__ */ e(
     Zs,
     {
       filters: i,
@@ -3287,7 +3287,7 @@ const es = _.forwardRef(function({ className: s, ...l }, t) {
     "div",
     {
       ref: t,
-      className: D(
+      className: v(
         "flex w-full gap-ds-03 border-b-[1px] border-surface-border-strong px-ds-06 pt-ds-03 max-lg:min-w-[800px]",
         s
       ),
@@ -3296,7 +3296,7 @@ const es = _.forwardRef(function({ className: s, ...l }, t) {
         /* @__PURE__ */ e(
           "button",
           {
-            className: D("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] px-ds-03 py-ds-04", i === "breaks" ? "text-surface-fg border-b-[1px] border-accent-7" : "text-surface-fg-subtle"),
+            className: v("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] px-ds-03 py-ds-04", i === "breaks" ? "text-surface-fg border-b-[1px] border-accent-7" : "text-surface-fg-subtle"),
             onClick: () => o("breaks"),
             children: "BREAKS"
           }
@@ -3304,7 +3304,7 @@ const es = _.forwardRef(function({ className: s, ...l }, t) {
         /* @__PURE__ */ a(
           "button",
           {
-            className: D("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] flex items-center gap-ds-02 px-ds-03 py-ds-04", i === "requests" ? "border-b-[1px] border-accent-7 text-surface-fg" : "text-surface-fg-subtle"),
+            className: v("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] flex items-center gap-ds-02 px-ds-03 py-ds-04", i === "requests" ? "border-b-[1px] border-accent-7 text-surface-fg" : "text-surface-fg-subtle"),
             onClick: () => o("requests"),
             children: [
               "REQUESTS",
@@ -3316,7 +3316,7 @@ const es = _.forwardRef(function({ className: s, ...l }, t) {
         /* @__PURE__ */ a(
           "button",
           {
-            className: D("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] flex items-center gap-ds-02 px-ds-03 py-ds-04", i === "balance" ? "border-b-[1px] border-accent-7 text-surface-fg" : "text-surface-fg-subtle"),
+            className: v("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] flex items-center gap-ds-02 px-ds-03 py-ds-04", i === "balance" ? "border-b-[1px] border-accent-7 text-surface-fg" : "text-surface-fg-subtle"),
             onClick: () => o("balance"),
             children: [
               "BALANCE",
@@ -3341,7 +3341,7 @@ const ss = _.forwardRef(function({ className: s, ...l }, t) {
     onDeleteBreak: f,
     onRefresh: x
   } = Se();
-  return i !== "breaks" ? null : /* @__PURE__ */ e("div", { ref: t, className: D(s), ...l, children: /* @__PURE__ */ e(
+  return i !== "breaks" ? null : /* @__PURE__ */ e("div", { ref: t, className: v(s), ...l, children: /* @__PURE__ */ e(
     Gs,
     {
       breaks: o,
@@ -3372,7 +3372,7 @@ const ts = _.forwardRef(function({ className: s, ...l }, t) {
     "div",
     {
       ref: t,
-      className: D(
+      className: v(
         /* intentional: h-[400px] is the fixed panel height for break tab content areas; mobile uses dvh for browser chrome */
         "no-scrollbar flex h-[400px] flex-col gap-ds-02 overflow-y-auto border-t border-t-surface-border px-ds-06 pb-ds-02 pt-ds-02 max-md:h-[calc(100dvh-317px)] max-md:border-0",
         s
@@ -3400,7 +3400,7 @@ const ts = _.forwardRef(function({ className: s, ...l }, t) {
 ts.displayName = "BreakAdmin.RequestsPanel";
 const as = _.forwardRef(function({ className: s, ...l }, t) {
   const { activeTab: i, breakBalanceData: o, userImages: c, onSaveBalance: h } = Se();
-  return i !== "balance" ? null : /* @__PURE__ */ e("div", { ref: t, className: D(s), ...l, children: /* @__PURE__ */ e(
+  return i !== "balance" ? null : /* @__PURE__ */ e("div", { ref: t, className: v(s), ...l, children: /* @__PURE__ */ e(
     Ks,
     {
       breakBalanceData: o,
@@ -3450,18 +3450,18 @@ const fa = Object.assign(Ve, {
     }
   };
   return /* @__PURE__ */ a(ue, { children: [
-    /* @__PURE__ */ e(De, { asChild: !0, children: /* @__PURE__ */ a(
+    /* @__PURE__ */ e(ve, { asChild: !0, children: /* @__PURE__ */ a(
       J,
       {
         variant: "outline",
-        className: "text-ds-base border-surface-border-strong bg-surface-1 px-ds-05 py-ds-04 pr-ds-06 text-surface-fg-muted shadow-02",
+        className: "text-ds-base border-surface-border-strong bg-surface-overlay px-ds-05 py-ds-04 pr-ds-06 text-surface-fg-muted shadow-raised-hover",
         children: [
           /* @__PURE__ */ e(Ge, {}),
           /* @__PURE__ */ e("span", { children: "Edit" })
         ]
       }
     ) }),
-    /* @__PURE__ */ e(fe, { className: D("w-[308px] p-ds-06", t), ...i, children: /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-start gap-ds-05", children: [
+    /* @__PURE__ */ e(fe, { className: v("w-[308px] p-ds-06", t), ...i, children: /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-start gap-ds-05", children: [
       /* @__PURE__ */ a("p", { className: "text-ds-md w-full text-left text-surface-fg-subtle", children: [
         "Edit break balance conversion of ",
         /* @__PURE__ */ e("br", { className: "mb-ds-02" }),
@@ -3520,7 +3520,7 @@ const It = _.forwardRef(
     className: t,
     ...i
   }, o) {
-    return /* @__PURE__ */ e("div", { ref: o, className: D("no-scrollbar w-full overflow-auto border border-surface-border sm:rounded-ds-lg max-md:rounded-ds-none max-md:border-0", t), ...i, children: /* @__PURE__ */ e("div", { className: "bg-surface-2 pb-ds-06 pl-ds-05 pt-ds-03 md:p-ds-05", children: /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-x-auto overflow-y-auto", children: /* @__PURE__ */ a("div", { className: "min-w-[800px] max-md:w-[max-content]", children: [
+    return /* @__PURE__ */ e("div", { ref: o, className: v("no-scrollbar w-full overflow-auto border border-surface-border sm:rounded-ds-lg max-md:rounded-ds-none max-md:border-0", t), ...i, children: /* @__PURE__ */ e("div", { className: "bg-surface-raised pb-ds-06 pl-ds-05 pt-ds-03 md:p-ds-05", children: /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-x-auto overflow-y-auto", children: /* @__PURE__ */ a("div", { className: "min-w-[800px] max-md:w-[max-content]", children: [
       /* @__PURE__ */ a("div", { className: "text-ds-sm font-semibold uppercase tracking-wider sticky top-0 grid grid-cols-[200px_160px_80px_1fr_1fr_1fr] gap-ds-05 py-ds-03  text-surface-fg-subtle sm:px-ds-06", children: [
         /* @__PURE__ */ e("div", { className: "p-ds-03 pl-ds-04", children: "User" }),
         /* @__PURE__ */ e("div", { className: "p-ds-03 pl-ds-04", children: "Date" }),
@@ -3534,7 +3534,7 @@ const It = _.forwardRef(
         return /* @__PURE__ */ a(
           "div",
           {
-            className: "grid grid-cols-[200px_160px_80px_1fr_1fr_1fr] gap-ds-05 bg-surface-2 py-ds-03 sm:px-ds-06",
+            className: "grid grid-cols-[200px_160px_80px_1fr_1fr_1fr] gap-ds-05 bg-surface-raised py-ds-03 sm:px-ds-06 transition-colors duration-fast-01 hover:bg-surface-raised-hover",
             children: [
               /* @__PURE__ */ e("div", { className: "p-ds-03 pl-ds-04 text-surface-fg-muted", children: ((h = c.user) == null ? void 0 : h.name) || "Unknown User" }),
               /* @__PURE__ */ e("div", { className: "w-[160px] p-ds-03 text-surface-fg-muted", children: ie(new Date(c.createdAt)) }),