@chekinapp/ui 0.0.37 → 0.0.38

package/dist/index.js

@@ -802,8 +802,10 @@ function Spinner() {
           "path",
           {
             className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            d: "M12 2a10 10 0 0 1 10 10"
           }
         )
       ]
@@ -1191,8 +1193,8 @@ function TooltipContent({
         "origin-[var(--radix-tooltip-content-transform-origin)] z-50 w-fit text-balance",
         "rounded-md px-4 py-2 text-sm font-medium",
         {
-          "bg-white text-chekin-navy shadow-[0_0_10px_0_rgba(143,143,143,0.30)]": variant === "light",
-          "bg-chekin-navy text-white": variant === "dark"
+          "bg-[var(--chekin-color-white)] text-[var(--chekin-color-brand-navy)] shadow-[0_0_10px_0_rgba(143,143,143,0.30)]": variant === "light",
+          "bg-[var(--chekin-color-brand-navy)] text-[var(--chekin-color-white)]": variant === "dark"
         },
         className
       ),
@@ -1205,8 +1207,8 @@ function TooltipContent({
             className: cn(
               "z-50 size-3 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
               {
-                "bg-white fill-white": variant === "light",
-                "bg-chekin-navy fill-chekin-navy": variant === "dark"
+                "bg-[var(--chekin-color-white)] fill-[var(--chekin-color-white)]": variant === "light",
+                "bg-[var(--chekin-color-brand-navy)] fill-[var(--chekin-color-brand-navy)]": variant === "dark"
               }
             )
           }
@@ -1588,42 +1590,66 @@ function StatusBadgeIcon({ variant, className }) {
   };
   switch (variant) {
     case "clock-blue":
-      return /* @__PURE__ */ jsx23(Clock, { ...iconProps, className: cn("text-chekin-blue", className) });
+      return /* @__PURE__ */ jsx23(
+        Clock,
+        {
+          ...iconProps,
+          className: cn("text-[var(--chekin-color-brand-blue)]", className)
+        }
+      );
     case "tick-blue":
-      return /* @__PURE__ */ jsx23(Check4, { ...iconProps, className: cn("text-chekin-blue", className) });
+      return /* @__PURE__ */ jsx23(
+        Check4,
+        {
+          ...iconProps,
+          className: cn("text-[var(--chekin-color-brand-blue)]", className)
+        }
+      );
     case "tick-green":
       return /* @__PURE__ */ jsx23(Check4, { ...iconProps, className: cn("text-emerald-600", className) });
     case "x-red":
-      return /* @__PURE__ */ jsx23(X, { ...iconProps, className: cn("text-chekin-red", className) });
+      return /* @__PURE__ */ jsx23(
+        X,
+        {
+          ...iconProps,
+          className: cn("text-[var(--chekin-color-brand-red)]", className)
+        }
+      );
     case "clock-grey":
     default:
-      return /* @__PURE__ */ jsx23(Clock, { ...iconProps, className: cn("text-chekin-gray-2", className) });
+      return /* @__PURE__ */ jsx23(
+        Clock,
+        {
+          ...iconProps,
+          className: cn("text-[var(--chekin-color-gray-2)]", className)
+        }
+      );
   }
 }
 var variantStyles = {
   neutral: {
-    container: "bg-chekin-surface-input-empty",
-    text: "text-chekin-gray-2",
+    container: "bg-[var(--chekin-color-surface-input-empty)]",
+    text: "text-[var(--chekin-color-gray-2)]",
     icon: "clock-grey"
   },
   "progress-blue": {
-    container: "bg-chekin-surface-autocomplete",
-    text: "text-chekin-blue",
+    container: "bg-[var(--chekin-color-surface-autocomplete)]",
+    text: "text-[var(--chekin-color-brand-blue)]",
     icon: "clock-blue"
   },
   "progress-blue-light": {
-    container: "bg-chekin-surface-pressed",
-    text: "text-chekin-blue",
+    container: "bg-[var(--chekin-color-surface-pressed)]",
+    text: "text-[var(--chekin-color-brand-blue)]",
     icon: "clock-blue"
   },
   "progress-grey": {
-    container: "bg-chekin-surface-input-empty",
-    text: "text-chekin-gray-2",
+    container: "bg-[var(--chekin-color-surface-input-empty)]",
+    text: "text-[var(--chekin-color-gray-2)]",
     icon: "clock-grey"
   },
   "success-blue": {
-    container: "bg-chekin-surface-autocomplete",
-    text: "text-chekin-blue",
+    container: "bg-[var(--chekin-color-surface-autocomplete)]",
+    text: "text-[var(--chekin-color-brand-blue)]",
     icon: "tick-blue"
   },
   "success-green": {
@@ -1633,7 +1659,7 @@ var variantStyles = {
   },
   error: {
     container: "bg-red-50",
-    text: "text-chekin-red",
+    text: "text-[var(--chekin-color-brand-red)]",
     icon: "x-red"
   }
 };
@@ -3632,9 +3658,9 @@ import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 var switchVariants = cva7(
   [
     "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-    "focus-visible:outline-none focus-visible:shadow-chekin-focus",
+    "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
     "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
-    "data-[state=checked]:bg-chekin-blue data-[state=unchecked]:bg-chekin-gray-2"
+    "data-[state=checked]:bg-[var(--chekin-color-brand-blue)] data-[state=unchecked]:bg-[var(--chekin-color-gray-2)]"
   ],
   {
     variants: {
@@ -3676,7 +3702,7 @@ var Switch = React16.forwardRef(
       {
         ref,
         className: cn(switchVariants({ size, readOnly }), className),
-        disabled: props.disabled,
+        disabled: props.disabled && !readOnly,
         ...props,
         id: fieldId,
         onCheckedChange: readOnly ? void 0 : onChange,
@@ -7233,8 +7259,8 @@ function SelectorButton({
     "label",
     {
       className: cn(
-        "selector-button box-border flex h-12 min-w-[117px] cursor-pointer select-none items-center rounded-[6px] border border-[#cecede] bg-[#f2f2fa] px-4 text-left text-[15px] font-semibold text-[#9696b9] outline-none transition-all duration-75 ease-in-out hover:border-[#385bf8] active:opacity-100 [&_input]:absolute [&_input]:h-0 [&_input]:w-0 [&_input]:cursor-pointer [&_input]:opacity-0",
-        active && "active border-[#385bf8] bg-white text-[#385bf8]",
+        "selector-button box-border flex h-12 min-w-[117px] cursor-pointer select-none items-center rounded-[6px] border border-[#cecede] bg-[#f2f2fa] px-4 text-left text-[15px] font-semibold text-[#9696b9] outline-none transition-all duration-75 ease-in-out hover:border-[var(--chekin-color-brand-blue)] active:opacity-100 [&_input]:absolute [&_input]:h-0 [&_input]:w-0 [&_input]:cursor-pointer [&_input]:opacity-0",
+        active && "active border-[var(--chekin-color-brand-blue)] bg-white text-[var(--chekin-color-brand-blue)]",
         disabled && "disabled cursor-not-allowed opacity-30 hover:border-[#cecede]",
         loading && "loading cursor-progress",
         readOnly && "readOnly cursor-default",
@@ -7379,7 +7405,7 @@ function Separator3({
       decorative,
       orientation,
       className: cn(
-        "shrink-0 bg-chekin-gray-separator data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-[var(--chekin-color-gray-separator)] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       ...props
@@ -7432,17 +7458,17 @@ function SheetContent({
       {
         "data-slot": "sheet-content",
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-white text-chekin-navy shadow-lg transition ease-in-out data-[state=open]:duration-500 data-[state=closed]:duration-300",
-          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-chekin-gray-3 data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right sm:max-w-sm",
-          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-chekin-gray-3 data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left sm:max-w-sm",
-          side === "top" && "inset-x-0 top-0 h-auto border-b border-chekin-gray-3 data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
-          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t border-chekin-gray-3 data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+          "fixed z-50 flex flex-col gap-4 bg-white text-[var(--chekin-color-brand-navy)] shadow-lg transition ease-in-out data-[state=open]:duration-500 data-[state=closed]:duration-300",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-[var(--chekin-color-gray-3)] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-[var(--chekin-color-gray-3)] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b border-[var(--chekin-color-gray-3)] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t border-[var(--chekin-color-gray-3)] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
           className
         ),
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs65(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-chekin-small opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:shadow-chekin-focus disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs65(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-[var(--chekin-radius-small)] opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:shadow-[var(--chekin-shadow-focus)] disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx99(XIcon2, { className: "size-4" }),
             /* @__PURE__ */ jsx99("span", { className: "sr-only", children: "Close" })
           ] })
@@ -7479,7 +7505,7 @@ function SheetTitle({
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
-      className: cn("font-semibold text-chekin-navy", className),
+      className: cn("font-semibold text-[var(--chekin-color-brand-navy)]", className),
       ...props
     }
   );
@@ -7492,7 +7518,7 @@ function SheetDescription({
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
-      className: cn("text-sm text-chekin-gray-1", className),
+      className: cn("text-sm text-[var(--chekin-color-gray-1)]", className),
       ...props
     }
   );
@@ -7550,9 +7576,9 @@ var SidebarIcon = ({
   const highlighted = context?.highlighted ?? highlightedProp ?? false;
   const backgroundClassName = (() => {
     if (isActive) {
-      return highlighted ? "bg-chekin-surface-autocomplete" : "bg-chekin-gray-3";
+      return highlighted ? "bg-[var(--chekin-color-surface-autocomplete)]" : "bg-[var(--chekin-color-gray-3)]";
     }
-    return highlighted ? "bg-chekin-surface-pressed" : "bg-chekin-surface-input-empty";
+    return highlighted ? "bg-[var(--chekin-color-surface-pressed)]" : "bg-[var(--chekin-color-surface-input-empty)]";
   })();
   return /* @__PURE__ */ jsx101(
     "div",
@@ -7560,8 +7586,8 @@ var SidebarIcon = ({
       className: cn(
         "sidebar-icon flex items-center justify-center rounded-[50%] transition-colors ease-in-out",
         backgroundClassName,
-        highlighted ? "text-chekin-blue" : "text-chekin-gray-1",
-        !isActive && (highlighted ? "group-hover/menu-button:bg-chekin-surface-autocomplete" : "group-hover/menu-button:bg-chekin-gray-3"),
+        highlighted ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-1)]",
+        !isActive && (highlighted ? "group-hover/menu-button:bg-[var(--chekin-color-surface-autocomplete)]" : "group-hover/menu-button:bg-[var(--chekin-color-gray-3)]"),
         {
           "h-6 w-6 [&>svg]:h-4 [&>svg]:w-4": size === "M",
           "h-8 w-8 [&>svg]:h-5 [&>svg]:w-5": size === "L"
@@ -7673,7 +7699,7 @@ var Sidebar = React25.forwardRef(
         "div",
         {
           className: cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-chekin-surface-input-empty text-chekin-navy",
+            "flex h-full w-[--sidebar-width] flex-col bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-brand-navy)]",
             className
           ),
           ref,
@@ -7689,7 +7715,7 @@ var Sidebar = React25.forwardRef(
           "data-sidebar": "sidebar",
           "data-mobile": "true",
           className: cn(
-            "w-[--sidebar-width] bg-chekin-surface-input-empty p-0 text-chekin-navy [&>button]:hidden",
+            "w-[--sidebar-width] bg-[var(--chekin-color-surface-input-empty)] p-0 text-[var(--chekin-color-brand-navy)] [&>button]:hidden",
             className
           ),
           style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
@@ -7709,7 +7735,7 @@ var Sidebar = React25.forwardRef(
       {
         ref,
         "data-testid": "sidebar",
-        className: "group peer text-chekin-navy",
+        className: "group peer text-[var(--chekin-color-brand-navy)]",
         "data-state": state,
         "data-collapsible": state === "collapsed" ? collapsible : "",
         "data-variant": variant,
@@ -7740,7 +7766,7 @@ var Sidebar = React25.forwardRef(
                 "div",
                 {
                   "data-sidebar": "sidebar",
-                  className: "flex h-full w-full flex-col bg-chekin-surface-input-empty group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow",
+                  className: "flex h-full w-full flex-col bg-[var(--chekin-color-surface-input-empty)] group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow",
                   children
                 }
               )
@@ -7792,10 +7818,10 @@ var SidebarRail = React25.forwardRef(
         onClick: toggleSidebar,
         title: "Toggle Sidebar",
         className: cn(
-          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-chekin-gray-3 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-[var(--chekin-color-gray-3)] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
           "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
           "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-chekin-surface-input-empty",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-[var(--chekin-color-surface-input-empty)]",
           "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
           className
         ),
@@ -7899,7 +7925,7 @@ var SidebarGroupLabel = React25.forwardRef(({ className, asChild = false, ...pro
       ref,
       "data-sidebar": "group-label",
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-chekin-gray-1 outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-[var(--chekin-color-gray-1)] outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       ),
@@ -7916,7 +7942,7 @@ var SidebarGroupAction = React25.forwardRef(({ className, asChild = false, ...pr
       ref,
       "data-sidebar": "group-action",
       className: cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-chekin-navy outline-none transition-transform hover:bg-chekin-gray-3 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:sm:hidden group-data-[collapsible=icon]:hidden",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-[var(--chekin-color-brand-navy)] outline-none transition-transform hover:bg-[var(--chekin-color-gray-3)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:sm:hidden group-data-[collapsible=icon]:hidden",
         className
       ),
       ...props
@@ -7961,12 +7987,12 @@ var SidebarMenuItem = React25.forwardRef(
 );
 SidebarMenuItem.displayName = "SidebarMenuItem";
 var sidebarMenuButtonVariants = cva11(
-  "peer/menu-button group/menu-button relative flex min-h-[40px] w-full items-center gap-2 rounded-lg px-2 text-left text-md font-medium capitalize outline-none transition-[width,height,padding,color,background-color] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 group-data-[collapsible=icon]:!size-10 group-data-[collapsible=icon]:!p-2 [&>*:not(:first-child)]:truncate [&>*:nth-child(2)]:grow [&>svg]:size-4 [&>svg]:shrink-0 data-[active=false]:data-[highlighted=false]:bg-transparent data-[active=false]:data-[highlighted=false]:text-chekin-gray-1 data-[active=false]:data-[highlighted=false]:hover:bg-chekin-surface-input-empty data-[active=false]:data-[highlighted=true]:bg-transparent data-[active=false]:data-[highlighted=true]:hover:bg-chekin-surface-input-empty data-[active=true]:data-[highlighted=false]:bg-chekin-surface-pressed data-[active=true]:data-[highlighted=false]:font-semibold data-[active=true]:data-[highlighted=false]:text-chekin-gray-1 data-[active=true]:data-[highlighted=true]:bg-chekin-surface-pressed data-[active=true]:data-[highlighted=true]:font-semibold data-[active=true]:data-[highlighted=true]:text-chekin-blue",
+  "peer/menu-button group/menu-button relative flex min-h-[40px] w-full items-center gap-2 rounded-lg px-2 text-left text-md font-medium capitalize outline-none transition-[width,height,padding,color,background-color] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 group-data-[collapsible=icon]:!size-10 group-data-[collapsible=icon]:!p-2 [&>*:not(:first-child)]:truncate [&>*:nth-child(2)]:grow [&>svg]:size-4 [&>svg]:shrink-0 data-[active=false]:data-[highlighted=false]:bg-transparent data-[active=false]:data-[highlighted=false]:text-[var(--chekin-color-gray-1)] data-[active=false]:data-[highlighted=false]:hover:bg-[var(--chekin-color-surface-input-empty)] data-[active=false]:data-[highlighted=true]:bg-transparent data-[active=false]:data-[highlighted=true]:hover:bg-[var(--chekin-color-surface-input-empty)] data-[active=true]:data-[highlighted=false]:bg-[var(--chekin-color-surface-pressed)] data-[active=true]:data-[highlighted=false]:font-semibold data-[active=true]:data-[highlighted=false]:text-[var(--chekin-color-gray-1)] data-[active=true]:data-[highlighted=true]:bg-[var(--chekin-color-surface-pressed)] data-[active=true]:data-[highlighted=true]:font-semibold data-[active=true]:data-[highlighted=true]:text-[var(--chekin-color-brand-blue)]",
   {
     variants: {
       variant: {
         default: "",
-        outline: "bg-white shadow-[0_0_0_1px_rgba(22,22,67,0.12)] hover:bg-chekin-surface-input-empty"
+        outline: "bg-white shadow-[0_0_0_1px_rgba(22,22,67,0.12)] hover:bg-[var(--chekin-color-surface-input-empty)]"
       },
       size: {
         default: "h-8 text-md",
@@ -8034,7 +8060,7 @@ var SidebarMenuAction = React25.forwardRef(({ className, asChild = false, showOn
       ref,
       "data-sidebar": "menu-action",
       className: cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-chekin-navy outline-none transition-transform hover:bg-chekin-gray-3 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:sm:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-[var(--chekin-color-brand-navy)] outline-none transition-transform hover:bg-[var(--chekin-color-gray-3)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:sm:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden",
         showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 sm:opacity-0",
         className
       ),
@@ -8054,7 +8080,7 @@ var SidebarMenuBadge = React25.forwardRef(
         "data-sidebar": "menu-badge",
         className: cn(
           isOpen ? "left-auto right-1 h-5 min-w-5" : "absolute bottom-1/2 left-1/2 top-auto h-4 min-w-4",
-          "pointer-events-none flex select-none items-center justify-center rounded-md px-1 text-xs font-medium leading-tight text-chekin-gray-1 tabular-nums peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5",
+          "pointer-events-none flex select-none items-center justify-center rounded-md px-1 text-xs font-medium leading-tight text-[var(--chekin-color-gray-1)] tabular-nums peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5",
           className
         ),
         ...props
@@ -8094,7 +8120,7 @@ var SidebarMenuSub = React25.forwardRef(
       ref,
       "data-sidebar": "menu-sub",
       className: cn(
-        "ml-6 mr-2 flex min-w-0 flex-col gap-0.5 border-l border-chekin-gray-3 py-1 pl-4 group-data-[collapsible=icon]:hidden",
+        "ml-6 mr-2 flex min-w-0 flex-col gap-0.5 border-l border-[var(--chekin-color-gray-3)] py-1 pl-4 group-data-[collapsible=icon]:hidden",
         className
       ),
       ...props
@@ -8107,12 +8133,12 @@ var SidebarMenuSubItem = React25.forwardRef(
 );
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 var sidebarMenuSubButtonVariants = cva11(
-  "flex min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-left text-chekin-gray-1 outline-none transition-colors duration-200 hover:bg-chekin-surface-input-empty hover:text-chekin-navy focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-chekin-surface-pressed data-[active=true]:font-medium data-[active=true]:text-chekin-navy group-data-[collapsible=icon]:hidden [&>span:nth-child(2)]:truncate [&>svg]:shrink-0",
+  "flex min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-left text-[var(--chekin-color-gray-1)] outline-none transition-colors duration-200 hover:bg-[var(--chekin-color-surface-input-empty)] hover:text-[var(--chekin-color-brand-navy)] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--chekin-color-surface-pressed)] data-[active=true]:font-medium data-[active=true]:text-[var(--chekin-color-brand-navy)] group-data-[collapsible=icon]:hidden [&>span:nth-child(2)]:truncate [&>svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "",
-        outline: "bg-white shadow-[0_0_0_1px_rgba(22,22,67,0.12)] hover:bg-chekin-surface-input-empty"
+        outline: "bg-white shadow-[0_0_0_1px_rgba(22,22,67,0.12)] hover:bg-[var(--chekin-color-surface-input-empty)]"
       },
       size: {
         sm: "h-6 px-1.5 py-0.5 text-xs [&>svg]:size-3",
@@ -8276,7 +8302,7 @@ var SmallGridSingleItem = memo5(
         onClick: handleClick,
         className: cn(
           "relative flex h-full w-full shrink-0 items-center justify-between gap-4",
-          "box-border rounded-md px-5 py-4 text-left text-base font-semibold text-chekin-navy",
+          "box-border rounded-md px-5 py-4 text-left text-base font-semibold text-[var(--chekin-color-brand-navy)]",
           "shadow-[0_0_10px_rgba(111,194,255,0.2)]",
           disabled && "cursor-not-allowed",
           !disabled && onClick && "cursor-pointer",
@@ -8286,7 +8312,7 @@ var SmallGridSingleItem = memo5(
         children: [
           /* @__PURE__ */ jsxs68("div", { children: [
             /* @__PURE__ */ jsx104("div", { className: "line-clamp-2 overflow-hidden text-ellipsis break-all", children: title }),
-            subtitle && /* @__PURE__ */ jsx104("div", { className: "line-clamp-2 overflow-hidden text-ellipsis text-[15px] font-medium leading-6 text-chekin-gray-2", children: subtitle })
+            subtitle && /* @__PURE__ */ jsx104("div", { className: "line-clamp-2 overflow-hidden text-ellipsis text-[15px] font-medium leading-6 text-[var(--chekin-color-gray-2)]", children: subtitle })
           ] }),
           !readOnly && /* @__PURE__ */ jsxs68("div", { className: "flex h-full items-center justify-end gap-2", children: [
             onDelete && /* @__PURE__ */ jsx104(
@@ -8296,12 +8322,12 @@ var SmallGridSingleItem = memo5(
                 onClick: onDelete,
                 size: "icon",
                 variant: "outline",
-                children: /* @__PURE__ */ jsx104(Trash2, { className: "h-5 w-5 text-chekin-red" })
+                children: /* @__PURE__ */ jsx104(Trash2, { className: "h-5 w-5 text-[var(--chekin-color-brand-red)]" })
               }
             ),
-            onEdit && /* @__PURE__ */ jsx104(Button, { disabled, onClick: onEdit, size: "icon", variant: "outline", children: /* @__PURE__ */ jsx104(Pencil, { className: "h-5 w-5 text-chekin-blue" }) })
+            onEdit && /* @__PURE__ */ jsx104(Button, { disabled, onClick: onEdit, size: "icon", variant: "outline", children: /* @__PURE__ */ jsx104(Pencil, { className: "h-5 w-5 text-[var(--chekin-color-brand-blue)]" }) })
           ] }),
-          error && /* @__PURE__ */ jsx104("div", { className: "absolute bottom-1 right-2 text-xs text-chekin-red", children: error })
+          error && /* @__PURE__ */ jsx104("div", { className: "absolute bottom-1 right-2 text-xs text-[var(--chekin-color-brand-red)]", children: error })
         ]
       }
     );
@@ -8328,18 +8354,19 @@ function SortingAction({
       {
         type: "button",
         className: cn(
-          "group/trigger cursor-pointer rounded-sm p-0.5 hover:bg-chekin-surface-input-empty",
+          "group/trigger cursor-pointer rounded-sm p-0.5 hover:bg-[var(--chekin-color-surface-input-empty)]",
           className
         ),
         "aria-label": "Open sorting menu",
-        children: /* @__PURE__ */ jsx105(ArrowDownUpIcon, { className: "h-4 w-4 text-chekin-gray-1 group-hover/trigger:text-chekin-navy" })
+        children: /* @__PURE__ */ jsx105(ArrowDownUpIcon, { className: "h-4 w-4 text-[var(--chekin-color-gray-1)] group-hover/trigger:text-[var(--chekin-color-brand-navy)]" })
       }
     ) }),
     /* @__PURE__ */ jsxs69(DropdownMenuContent, { className: "w-full max-w-[256px]", align: "start", children: [
       /* @__PURE__ */ jsxs69(
         DropdownMenuItem,
         {
-          className: cn(value === "asc" && "bg-chekin-surface-pressed text-chekin-blue"),
+          active: value === "asc",
+          className: cn(value === "asc" && "text-[var(--chekin-color-brand-blue)]"),
           onClick: () => onSortChange?.("asc"),
           children: [
             /* @__PURE__ */ jsx105(ArrowUp, { className: "h-4 w-4" }),
@@ -8350,7 +8377,8 @@ function SortingAction({
       /* @__PURE__ */ jsxs69(
         DropdownMenuItem,
         {
-          className: cn(value === "desc" && "bg-chekin-surface-pressed text-chekin-blue"),
+          active: value === "desc",
+          className: cn(value === "desc" && "text-[var(--chekin-color-brand-blue)]"),
           onClick: () => onSortChange?.("desc"),
           children: [
             /* @__PURE__ */ jsx105(ArrowDown, { className: "h-4 w-4" }),
@@ -8498,8 +8526,8 @@ function Stepper({
           "span",
           {
             className: cn(
-              "h-1.5 min-h-px min-w-px flex-1 rounded-[1000px] bg-chekin-gray-3",
-              isActive && "bg-chekin-blue"
+              "h-1.5 min-h-px min-w-px flex-1 rounded-[1000px] bg-[var(--chekin-color-gray-3)]",
+              isActive && "bg-[var(--chekin-color-brand-blue)]"
             )
           },
           stepNumber
@@ -8557,7 +8585,7 @@ var SwitchGroup = React27.forwardRef(
           Label,
           {
             className: cn(
-              "text-md cursor-pointer font-medium text-chekin-navy",
+              "text-md cursor-pointer font-medium text-[var(--chekin-color-brand-navy)]",
               (disabled || option.disabled) && "opacity-50"
             ),
             children: [
@@ -8566,7 +8594,7 @@ var SwitchGroup = React27.forwardRef(
                 "span",
                 {
                   className: cn(
-                    "mt-1 block text-sm font-normal text-chekin-gray-1",
+                    "mt-1 block text-sm font-normal text-[var(--chekin-color-gray-1)]",
                     (disabled || option.disabled) && "opacity-50"
                   ),
                   children: [
@@ -8604,8 +8632,8 @@ var Tabs = TabsPrimitive2.Root;
 var tabsListVariants = cva12("inline-flex items-center", {
   variants: {
     variant: {
-      default: "h-10 justify-center rounded-md bg-chekin-surface-input-empty p-1 text-chekin-gray-1",
-      underlined: "gap-6 border-b border-chekin-gray-3"
+      default: "h-10 justify-center rounded-md bg-[var(--chekin-color-surface-input-empty)] p-1 text-[var(--chekin-color-gray-1)]",
+      underlined: "gap-6 border-b border-[var(--chekin-color-gray-3)]"
     }
   },
   defaultVariants: {
@@ -8628,8 +8656,8 @@ var tabsTriggerVariants = cva12(
   {
     variants: {
       variant: {
-        default: "rounded-sm px-3 py-1.5 text-sm font-medium focus-visible:shadow-chekin-focus data-[state=active]:bg-white data-[state=active]:text-chekin-navy data-[state=active]:shadow-sm",
-        underlined: "-mb-px border-b-[3px] border-transparent py-2 text-base font-medium text-chekin-gray-1 data-[state=active]:border-chekin-blue data-[state=active]:font-semibold data-[state=active]:text-chekin-blue"
+        default: "rounded-sm px-3 py-1.5 text-sm font-medium focus-visible:shadow-[var(--chekin-shadow-focus)] data-[state=active]:bg-[var(--chekin-color-white)] data-[state=active]:text-[var(--chekin-color-brand-navy)] data-[state=active]:shadow-sm",
+        underlined: "-mb-px border-b-[3px] border-transparent py-2 text-base font-medium text-[var(--chekin-color-gray-1)] data-[state=active]:border-[var(--chekin-color-brand-blue)] data-[state=active]:font-semibold data-[state=active]:text-[var(--chekin-color-brand-blue)]"
       }
     },
     defaultVariants: {
@@ -8664,12 +8692,12 @@ function TabbedSection({
   const contentContainerClassName = variant === "material" ? cn(
     "border-0 bg-transparent p-0 pt-6 shadow-none",
     "[&>div:first-child]:flex [&>div:first-child]:flex-col",
-    "[&>div:first-child]:gap-chekin-3",
+    "[&>div:first-child]:gap-3",
     className
   ) : cn(
-    "rounded-b-md border border-t-0 border-chekin-gray-3 bg-white p-6 shadow-none",
+    "rounded-b-md border border-t-0 border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-white)] p-6 shadow-none",
     "[&>div:first-child]:flex [&>div:first-child]:flex-col",
-    "[&>div:first-child]:gap-chekin-3",
+    "[&>div:first-child]:gap-3",
     className
   );
   return /* @__PURE__ */ jsxs73(Tabs, { value: activeTab, onValueChange: onTabChange, className: "w-full", children: [
@@ -8745,14 +8773,14 @@ function TaskCard({
           {
             className: cn(
               "relative w-1 shrink-0 self-stretch rounded-sm",
-              eventType === "error" && "bg-chekin-red",
+              eventType === "error" && "bg-[var(--chekin-color-brand-red)]",
               eventType === "warning" && "bg-amber-500"
             )
           }
         ),
         /* @__PURE__ */ jsxs75("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: [
-          /* @__PURE__ */ jsx114("h4", { className: "m-0 w-full break-words text-base font-semibold leading-6 text-chekin-navy", children: title }),
-          /* @__PURE__ */ jsx114("p", { className: "m-0 w-full text-sm font-medium leading-6 text-chekin-gray-1", children: description })
+          /* @__PURE__ */ jsx114("h4", { className: "m-0 w-full break-words text-base font-semibold leading-6 text-[var(--chekin-color-brand-navy)]", children: title }),
+          /* @__PURE__ */ jsx114("p", { className: "m-0 w-full text-sm font-medium leading-6 text-[var(--chekin-color-gray-1)]", children: description })
         ] }),
         shouldShowActions && /* @__PURE__ */ jsxs75("div", { className: "flex shrink-0 items-center gap-1", children: [
           shouldShowCount && /* @__PURE__ */ jsx114(
@@ -8760,7 +8788,7 @@ function TaskCard({
             {
               className: cn(
                 'relative flex h-6 w-6 items-center justify-center rounded-full text-center text-sm font-semibold leading-6 before:absolute before:inset-0 before:rounded-full before:mix-blend-multiply before:content-[""]',
-                eventType === "error" && "text-chekin-red before:bg-red-100",
+                eventType === "error" && "text-[var(--chekin-color-brand-red)] before:bg-red-100",
                 eventType === "warning" && "text-amber-700 before:bg-amber-100"
               ),
               children: count
@@ -8769,7 +8797,7 @@ function TaskCard({
           onClick && /* @__PURE__ */ jsx114(
             "button",
             {
-              className: "flex h-8 w-0 min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border-0 bg-transparent p-0 text-chekin-gray-1 opacity-0 transition-[width,opacity,min-width] duration-300 ease-in-out hover:bg-black/5 focus-visible:w-8 focus-visible:min-w-8 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-chekin-blue group-hover:w-8 group-hover:min-w-8 group-hover:opacity-100",
+              className: "flex h-8 w-0 min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border-0 bg-transparent p-0 text-[var(--chekin-color-gray-1)] opacity-0 transition-[width,opacity,min-width] duration-300 ease-in-out hover:bg-black/5 focus-visible:w-8 focus-visible:min-w-8 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--chekin-color-brand-blue)] group-hover:w-8 group-hover:min-w-8 group-hover:opacity-100",
               onClick: (event) => {
                 event.stopPropagation();
                 onClick?.();
@@ -8837,12 +8865,12 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 // src/toggle-group/style.ts
 import { cva as cva13 } from "class-variance-authority";
 var toggleVariants = cva13(
-  "inline-flex select-none items-center justify-center rounded-md text-sm font-medium transition-all duration-75 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-chekin-blue focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex select-none items-center justify-center rounded-md text-sm font-medium transition-all duration-75 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chekin-color-brand-blue)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "border border-chekin-gray-3 bg-chekin-surface-input-empty font-semibold text-chekin-gray-1 hover:border-chekin-blue data-[state=on]:border-chekin-blue data-[state=on]:bg-white data-[state=on]:text-chekin-blue",
-        tab: "border border-transparent bg-transparent font-medium text-chekin-gray-1 hover:bg-chekin-blue hover:text-white hover:opacity-35 data-[state=on]:cursor-default data-[state=on]:border-chekin-blue data-[state=on]:bg-chekin-blue data-[state=on]:font-semibold data-[state=on]:text-white data-[state=on]:shadow-[0px_3px_4px_0px_rgba(1,2,3,0.10)] data-[state=on]:hover:opacity-100"
+        default: "border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] font-semibold text-[var(--chekin-color-gray-1)] hover:border-[var(--chekin-color-brand-blue)] data-[state=on]:border-[var(--chekin-color-brand-blue)] data-[state=on]:bg-[var(--chekin-color-white)] data-[state=on]:text-[var(--chekin-color-brand-blue)]",
+        tab: "border border-transparent bg-transparent font-medium text-[var(--chekin-color-gray-1)] hover:bg-[var(--chekin-color-brand-blue)] hover:text-[var(--chekin-color-white)] hover:opacity-35 data-[state=on]:cursor-default data-[state=on]:border-[var(--chekin-color-brand-blue)] data-[state=on]:bg-[var(--chekin-color-brand-blue)] data-[state=on]:font-semibold data-[state=on]:text-[var(--chekin-color-white)] data-[state=on]:shadow-[0px_3px_4px_0px_rgba(1,2,3,0.10)] data-[state=on]:hover:opacity-100"
       },
       size: {
         default: "h-12 min-w-[117px] px-4 text-[15px]",
@@ -8852,7 +8880,7 @@ var toggleVariants = cva13(
       },
       theme: {
         default: "",
-        "sky-blue": "data-[state=on]:bg-chekin-surface-autocomplete data-[state=off]:hover:border-transparent data-[state=off]:hover:bg-chekin-surface-input-empty"
+        "sky-blue": "data-[state=on]:bg-[var(--chekin-color-surface-autocomplete)] data-[state=off]:hover:border-transparent data-[state=off]:hover:bg-[var(--chekin-color-surface-input-empty)]"
       }
     },
     defaultVariants: {
@@ -8878,7 +8906,7 @@ var ToggleGroup = React28.forwardRef(({ className, variant, size, theme, childre
       ref,
       className: cn(
         "flex items-center justify-center",
-        isTabVariant ? "h-auto max-h-none w-fit flex-wrap gap-[2px] rounded-md border border-chekin-gray-3 bg-chekin-surface-input-empty p-[2px]" : "w-full flex-wrap gap-[10px]",
+        isTabVariant ? "h-auto max-h-none w-fit flex-wrap gap-[2px] rounded-md border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] p-[2px]" : "w-full flex-wrap gap-[10px]",
         className
       ),
       ...props,
@@ -9001,7 +9029,7 @@ function TogglesInternal({
     ...multiple ? { type: "multiple", value: currentValue } : { type: "single", value: currentValue[0] ?? "" }
   };
   return /* @__PURE__ */ jsxs77("div", { ref, className, children: [
-    label && /* @__PURE__ */ jsx116("div", { className: "mb-2", children: /* @__PURE__ */ jsx116("div", { className: "select-none text-base font-normal text-chekin-navy", children: label }) }),
+    label && /* @__PURE__ */ jsx116("div", { className: "mb-2", children: /* @__PURE__ */ jsx116("div", { className: "select-none text-base font-normal text-[var(--chekin-color-brand-navy)]", children: label }) }),
     /* @__PURE__ */ jsx116(ToggleGroup, { className: groupClassName, ...toggleGroupProps, children: options.map((option, index) => {
       const isSelected = getValueArray2(value).includes(option.value);
       const isDisabled = disabled || disabledItems?.includes(option.value) || option.disabled;
@@ -9034,11 +9062,19 @@ var EndIcon = ({ children }) => /* @__PURE__ */ jsx117("div", { className: "poin
 
 // src/text-field/FieldError.tsx
 import { jsx as jsx118 } from "react/jsx-runtime";
-var FieldError = ({ id, children }) => /* @__PURE__ */ jsx118("p", { id, className: "mt-1 text-right text-xs font-medium text-chekin-red", role: "alert", children });
+var FieldError = ({ id, children }) => /* @__PURE__ */ jsx118(
+  "p",
+  {
+    id,
+    className: "mt-1 text-right text-xs font-medium text-[var(--chekin-color-brand-red)]",
+    role: "alert",
+    children
+  }
+);
 
 // src/text-field/SupportingText.tsx
 import { jsx as jsx119 } from "react/jsx-runtime";
-var SupportingText = ({ id, children }) => /* @__PURE__ */ jsx119("p", { id, className: "mt-1 text-xs italic text-chekin-gray-2", children });
+var SupportingText = ({ id, children }) => /* @__PURE__ */ jsx119("p", { id, className: "mt-1 text-xs italic text-[var(--chekin-color-gray-2)]", children });
 
 // src/text-field/TextField.tsx
 import { jsx as jsx120, jsxs as jsxs78 } from "react/jsx-runtime";
@@ -9219,8 +9255,8 @@ var TextField = React29.forwardRef(
           }
         ),
         optional && /* @__PURE__ */ jsxs78("span", { className: "text-base leading-4", children: [
-          /* @__PURE__ */ jsx120("span", { className: "text-chekin-navy", children: "- " }),
-          /* @__PURE__ */ jsx120("span", { className: "italic text-chekin-gray-2", children: optionalLabel || t("optional") })
+          /* @__PURE__ */ jsx120("span", { className: "text-[var(--chekin-color-brand-navy)]", children: "- " }),
+          /* @__PURE__ */ jsx120("span", { className: "italic text-[var(--chekin-color-gray-2)]", children: optionalLabel || t("optional") })
         ] }),
         tooltip
       ] }),
@@ -9378,15 +9414,15 @@ function UploadedFilesList({
   return /* @__PURE__ */ jsx123("div", { className: cn("flex flex-wrap gap-2.5", className), children: files.map((file, index) => /* @__PURE__ */ jsxs81(
     "div",
     {
-      className: "flex cursor-default items-center gap-2 rounded border border-chekin-gray-2 bg-chekin-surface-pressed py-1.5 pl-3 pr-1.5",
+      className: "flex cursor-default items-center gap-2 rounded border border-[var(--chekin-color-gray-2)] bg-[var(--chekin-color-surface-pressed)] py-1.5 pl-3 pr-1.5",
       children: [
-        /* @__PURE__ */ jsx123("span", { className: "text-nowrap text-sm font-medium leading-5 text-chekin-navy", children: file.name }),
+        /* @__PURE__ */ jsx123("span", { className: "text-nowrap text-sm font-medium leading-5 text-[var(--chekin-color-brand-navy)]", children: file.name }),
         /* @__PURE__ */ jsx123(
           "button",
           {
             type: "button",
             onClick: () => onRemoveFile(file.name),
-            className: "flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded bg-chekin-gray-1 transition-all hover:shadow-md active:opacity-95",
+            className: "flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded bg-[var(--chekin-color-gray-1)] transition-all hover:shadow-md active:opacity-95",
             "aria-label": `Remove ${file.name}`,
             children: /* @__PURE__ */ jsx123(X7, { className: "h-3.5 w-3.5 text-white", strokeWidth: 3 })
           }
@@ -9405,7 +9441,7 @@ function WideButton({ className, disabled, ...props }) {
     {
       variant: "ghost",
       className: cn(
-        "min-h-[84px] w-full max-w-[712px] flex-row justify-center bg-chekin-surface-pressed shadow-none",
+        "min-h-[84px] w-full max-w-[712px] flex-row justify-center bg-[var(--chekin-color-surface-pressed)] shadow-none",
         "transition-all duration-[70ms] ease-in-out hover:opacity-70",
         disabled && "opacity-10",
         className