@chekinapp/ui 0.0.36 → 0.0.38

package/dist/index.cjs

@@ -357,7 +357,6 @@ function cn(...inputs) {
 }
 
 // src/accordion/Accordion.tsx
-var import_Accordion = __toESM(require("./Accordion.module-5SXQLE6L.module.css"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 var Accordion = AccordionPrimitive.Root;
 var AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -366,8 +365,7 @@ var AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     className: cn(
       "accordion__item",
-      "transition-colors duration-200 ease-in-out",
-      import_Accordion.default.accordion__item,
+      "rounded-[var(--accordion-item-radius)] border border-solid border-[var(--accordion-item-border)] bg-[var(--accordion-item-bg)] shadow-[0_0_10px_0_rgba(143,143,143,0.2)] transition-colors duration-200 ease-in-out [border-top-color:var(--accordion-item-divider)] data-[state=open]:bg-[var(--accordion-item-open-bg)] data-[state=closed]:bg-[var(--accordion-item-bg)] data-[state=closed]:hover:bg-[var(--accordion-item-hover-bg)]",
       className
     ),
     ...props
@@ -385,7 +383,7 @@ var AccordionTrigger = React.forwardRef(({ className, children, openIcon, closed
         "accordion__trigger",
         "flex h-auto w-full flex-1 items-center justify-between text-left outline-none transition-colors duration-200",
         "hover:no-underline disabled:pointer-events-none",
-        import_Accordion.default.accordion__trigger,
+        "gap-[var(--accordion-trigger-gap)] p-6 text-lg leading-7 text-[var(--accordion-trigger-color)] [font-family:var(--accordion-trigger-font-family)] [font-weight:var(--accordion-trigger-font-weight)] focus-visible:shadow-[var(--accordion-trigger-focus-shadow)] disabled:opacity-[var(--accordion-trigger-disabled-opacity)]",
         "group",
         className
       ),
@@ -397,8 +395,7 @@ var AccordionTrigger = React.forwardRef(({ className, children, openIcon, closed
           {
             className: cn(
               "accordion__icon",
-              import_Accordion.default.accordion__icon,
-              "shrink-0 rounded-full p-0.5",
+              "ml-auto h-[var(--accordion-icon-size)] w-4 min-w-0 shrink-0 rounded-full p-0.5 text-[var(--accordion-icon-color-closed)] group-data-[state=open]:text-[var(--accordion-icon-color-open)] [&_svg]:h-[var(--accordion-icon-size)] [&_svg]:w-[var(--accordion-icon-size)] [&_svg]:transition-transform [&_svg]:duration-200",
               "transition-colors duration-200",
               "relative"
             ),
@@ -442,30 +439,19 @@ var AccordionContent = React.forwardRef(({ className, contentClassName, children
       "transition-all",
       "data-[state=closed]:animate-accordion-up",
       "data-[state=open]:animate-accordion-down",
-      import_Accordion.default.accordion__content,
+      "text-[length:var(--accordion-content-font-size)] leading-[var(--accordion-content-line-height)] text-[var(--accordion-content-color)] data-[state=closed]:block",
       // TODO Uncomment the next line when dropdown position is fixed
       // 'overflow-hidden',
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: cn(
-          "accordion__contentItem",
-          import_Accordion.default.accordion__contentItem,
-          contentClassName
-        ),
-        children
-      }
-    )
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("accordion__contentItem px-6 pb-6 pt-2", contentClassName), children })
   }
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 // src/alert-box/AlertBox.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_AlertBox = __toESM(require("./AlertBox.module-PL4N3ELX.module.css"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AlertType = /* @__PURE__ */ ((AlertType2) => {
   AlertType2["INFO"] = "INFO";
@@ -494,10 +480,10 @@ var sizeClasses = {
   ["L" /* L */]: "px-6 py-5 items-start"
 };
 var typeStyles = {
-  ["INFO" /* INFO */]: import_AlertBox.default["alertBox--info"],
-  ["WARNING" /* WARNING */]: import_AlertBox.default["alertBox--warning"],
-  ["ERROR" /* ERROR */]: import_AlertBox.default["alertBox--error"],
-  ["SUCCESS" /* SUCCESS */]: import_AlertBox.default["alertBox--success"],
+  ["INFO" /* INFO */]: "bg-[var(--alert-box-info-bg)] [&_svg]:text-[var(--alert-box-info-icon)]",
+  ["WARNING" /* WARNING */]: "bg-[var(--alert-box-warning-bg)] [&_svg]:text-[var(--alert-box-warning-icon)]",
+  ["ERROR" /* ERROR */]: "bg-[var(--alert-box-error-bg)] [&_svg]:text-[var(--alert-box-error-icon)]",
+  ["SUCCESS" /* SUCCESS */]: "bg-[var(--alert-box-success-bg)] text-[var(--alert-box-success-text)] [&_svg]:text-[var(--alert-box-success-icon)]",
   ["LIGHT" /* LIGHT */]: ""
 };
 function AlertBox({
@@ -514,8 +500,7 @@ function AlertBox({
     {
       "data-slot": "alert-box",
       className: cn(
-        import_AlertBox.default.alertBox,
-        "flex gap-3 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:shrink-0",
+        "flex gap-3 rounded-[var(--alert-box-radius)] [&_svg]:h-5 [&_svg]:w-5 [&_svg]:shrink-0",
         sizeClasses[size],
         typeStyles[type],
         className
@@ -534,7 +519,6 @@ var AlertSizes = AlertSize;
 // src/audio-player/AudioPlayer.tsx
 var import_react = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_AudioPlayer = __toESM(require("./AudioPlayer.module-RDUQ533M.module.css"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function formatTime(seconds) {
   const mins = Math.floor(seconds / 60);
@@ -598,8 +582,7 @@ function AudioPlayer({ src, compact, className }) {
       {
         type: "button",
         className: cn(
-          import_AudioPlayer.default.playButton,
-          "inline-flex items-center justify-center",
+          "inline-flex items-center justify-center rounded-[var(--audio-player-button-radius)] bg-[var(--audio-player-button-bg)] hover:bg-[var(--audio-player-button-hover-bg)] [&_svg]:text-[var(--audio-player-icon-color)]",
           compact ? "h-6 min-w-6 p-1" : "h-8 min-w-8 p-1.5"
         ),
         onClick: togglePlayPause,
@@ -611,24 +594,18 @@ function AudioPlayer({ src, compact, className }) {
         "div",
         {
           ref: progressRef,
-          className: cn(
-            import_AudioPlayer.default.track,
-            "h-1 flex-1 cursor-pointer overflow-hidden rounded-full"
-          ),
+          className: "h-1 flex-1 cursor-pointer overflow-hidden rounded-full bg-[var(--audio-player-track-bg)]",
           onClick: handleSeek,
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "div",
             {
-              className: cn(
-                import_AudioPlayer.default.progress,
-                "h-full transition-all duration-100 ease-linear"
-              ),
+              className: "h-full bg-[var(--audio-player-progress-bg)] transition-all duration-100 ease-linear",
               style: { width: `${progress}%` }
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(import_AudioPlayer.default.time, "min-w-10 text-xs font-medium"), children: isPlaying || currentTime > 0 ? formatTime(currentTime) : formatTime(duration) })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-10 text-xs font-medium text-[var(--audio-player-time-color)]", children: isPlaying || currentTime > 0 ? formatTime(currentTime) : formatTime(duration) })
     ] })
   ] });
 }
@@ -637,7 +614,6 @@ AudioPlayer.displayName = "AudioPlayer";
 // src/avatar/Avatar.tsx
 var React2 = __toESM(require("react"), 1);
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var import_Avatar = __toESM(require("./Avatar.module-VPJKIZT3.module.css"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var sizeClasses2 = {
   sm: "h-8 w-8",
@@ -669,7 +645,7 @@ var Avatar = React2.forwardRef(({ className, src, alt, fallback, size = "md", fa
         {
           className: cn(
             "flex h-full w-full items-center justify-center rounded-full font-medium",
-            !fallbackClassName && import_Avatar.default.fallback,
+            !fallbackClassName && "bg-[var(--avatar-fallback-bg)] text-[var(--avatar-fallback-text)]",
             fallbackClassName
           ),
           children: fallback
@@ -722,7 +698,6 @@ Badge.displayName = "Badge";
 
 // src/beta-badge/BetaBadge.tsx
 var import_react_i18next = require("react-i18next");
-var import_BetaBadge = __toESM(require("./BetaBadge.module-W2AGK53A.module.css"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function BetaBadge({
   className,
@@ -737,9 +712,8 @@ function BetaBadge({
     {
       "data-slot": "beta-badge",
       className: cn(
-        import_BetaBadge.default.betaBadge,
-        "rounded-sm px-2 py-1 text-sm/4 font-semibold uppercase",
-        readOnly && import_BetaBadge.default["betaBadge--readonly"],
+        "rounded-sm bg-[var(--beta-badge-bg)] px-2 py-1 text-sm/4 font-semibold uppercase text-[var(--beta-badge-text)]",
+        readOnly && "bg-[var(--beta-badge-readonly-bg)] text-[var(--beta-badge-readonly-text)]",
         className
       ),
       ...props,
@@ -830,7 +804,6 @@ BookmarkTabsTrigger.displayName = "BookmarkTabsTrigger";
 // src/box-option-selector/BoxOptionSelector.tsx
 var import_react2 = require("react");
 var import_react_i18next2 = require("react-i18next");
-var import_BoxOptionSelector = __toESM(require("./BoxOptionSelector.module-24AKP2OJ.module.css"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var BoxOptionSelector = (0, import_react2.forwardRef)(
   ({
@@ -866,9 +839,8 @@ var BoxOptionSelector = (0, import_react2.forwardRef)(
         ref,
         "data-slot": "box-option-selector",
         className: cn(
-          import_BoxOptionSelector.default.boxOption,
-          "flex min-h-[116px] w-full max-w-[400px] cursor-pointer flex-col gap-4 rounded-lg border p-4 transition-all duration-200",
-          isSelected && import_BoxOptionSelector.default["boxOption--selected"],
+          "flex min-h-[116px] w-full max-w-[400px] cursor-pointer flex-col gap-4 rounded-lg border border-[var(--box-option-border)] bg-[var(--box-option-bg)] p-4 transition-all duration-200 hover:bg-[var(--box-option-hover-bg)]",
+          isSelected && "border-[var(--box-option-selected-border)] bg-[var(--box-option-selected-bg)] hover:bg-[var(--box-option-selected-bg)]",
           disabled && "cursor-not-allowed opacity-50"
         ),
         onClick: handleClick,
@@ -1171,8 +1143,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"
           }
         )
       ]
@@ -1560,8 +1534,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
       ),
@@ -1574,8 +1548,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"
               }
             )
           }
@@ -1834,15 +1808,14 @@ function ScrollBar({
 }
 
 // src/error-message/ErrorMessage.tsx
-var import_styles = __toESM(require("./styles.module-VIYXJAAX.module.css"), 1);
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function ErrorMessage({ className, children, disabled }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: cn(
-        import_styles.default.ErrorMessage,
-        disabled && import_styles.default.ErrorMessage__disabled,
+        "mt-0.5 text-left text-sm font-medium text-[var(--error-message-color)]",
+        disabled && "opacity-30",
         className
       ),
       children
@@ -1958,42 +1931,66 @@ function StatusBadgeIcon({ variant, className }) {
   };
   switch (variant) {
     case "clock-blue":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react8.Clock, { ...iconProps, className: cn("text-chekin-blue", className) });
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_lucide_react8.Clock,
+        {
+          ...iconProps,
+          className: cn("text-[var(--chekin-color-brand-blue)]", className)
+        }
+      );
     case "tick-blue":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react8.Check, { ...iconProps, className: cn("text-chekin-blue", className) });
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_lucide_react8.Check,
+        {
+          ...iconProps,
+          className: cn("text-[var(--chekin-color-brand-blue)]", className)
+        }
+      );
     case "tick-green":
       return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react8.Check, { ...iconProps, className: cn("text-emerald-600", className) });
     case "x-red":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react8.X, { ...iconProps, className: cn("text-chekin-red", className) });
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_lucide_react8.X,
+        {
+          ...iconProps,
+          className: cn("text-[var(--chekin-color-brand-red)]", className)
+        }
+      );
     case "clock-grey":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react8.Clock, { ...iconProps, className: cn("text-chekin-gray-2", className) });
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_lucide_react8.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": {
@@ -2003,7 +2000,7 @@ var variantStyles = {
   },
   error: {
     container: "bg-red-50",
-    text: "text-chekin-red",
+    text: "text-[var(--chekin-color-brand-red)]",
     icon: "x-red"
   }
 };
@@ -2018,7 +2015,7 @@ var StatusBadgeInternal = (0, import_react4.forwardRef)(
     disabled = false,
     ...props
   }, ref) => {
-    const styles25 = variantStyles[variant];
+    const styles = variantStyles[variant];
     const hasText = !iconOnly && (children || !textOnly);
     const hasIcon = !textOnly && showIcon;
     const padding = (() => {
@@ -2033,15 +2030,15 @@ var StatusBadgeInternal = (0, import_react4.forwardRef)(
         ref,
         className: cn(
           "inline-flex cursor-default items-center justify-center gap-1 rounded-3xl text-[14px] font-medium leading-4",
-          styles25.container,
-          styles25.text,
+          styles.container,
+          styles.text,
           padding,
           disabled && "opacity-50",
           className
         ),
         ...props,
         children: [
-          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StatusBadgeIcon, { variant: styles25.icon, className: "size-4 flex-shrink-0" }),
+          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StatusBadgeIcon, { variant: styles.icon, className: "size-4 flex-shrink-0" }),
           hasText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "whitespace-nowrap", children })
         ]
       }
@@ -2248,18 +2245,9 @@ var import_react_table = require("@tanstack/react-table");
 var import_react7 = require("react");
 
 // src/loading-bar/LoadingBar.tsx
-var import_styles2 = __toESM(require("./styles.module-I3PJNRXG.module.css"), 1);
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function LoadingBar({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("w-full p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative h-1 w-full overflow-hidden rounded-full bg-[var(--chekin-color-white)]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "div",
-    {
-      className: cn(
-        "absolute top-0 h-full rounded-full bg-[var(--primary)]",
-        import_styles2.default.bar
-      )
-    }
-  ) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("w-full p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative h-1 w-full overflow-hidden rounded-full bg-[var(--chekin-color-white)]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 h-full animate-chekin-loading-bar rounded-full bg-[var(--primary)]" }) }) });
 }
 
 // src/table/Table.tsx
@@ -3902,19 +3890,19 @@ var HaloIcon = (0, import_react34.forwardRef)(
     size = "M",
     className
   }, ref) => {
-    const styles25 = statusStyles[status];
+    const styles = statusStyles[status];
     return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
       {
         ref,
         className: cn(
           "halo-icon flex items-center justify-center rounded-[50%]",
-          styles25.color,
+          styles.color,
           {
             "h-6 w-6 [&>svg]:h-4 [&>svg]:w-4": size === "M",
             "h-8 w-8 [&>svg]:h-5 [&>svg]:w-5": size === "L",
             "h-11 w-11 [&>svg]:h-5 [&>svg]:w-5": size === "XL",
-            [styles25.background]: variant === "default"
+            [styles.background]: variant === "default"
           },
           className
         ),
@@ -4005,9 +3993,9 @@ var import_jsx_runtime50 = require("react/jsx-runtime");
 var switchVariants = (0, import_class_variance_authority7.cva)(
   [
     "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: {
@@ -4049,7 +4037,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,
@@ -4488,27 +4476,48 @@ var FileInputButton = (0, import_react36.forwardRef)(
 FileInputButton.displayName = "FileInputButton";
 
 // src/form-box/Content.tsx
-var import_FormBox = __toESM(require("./FormBox.module-WG4SQBRR.module.css"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function Content5({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cn(import_FormBox.default.content, className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap content-start items-start gap-4 self-stretch",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
 }
 
 // src/form-box/Header.tsx
-var import_FormBox2 = __toESM(require("./FormBox.module-WG4SQBRR.module.css"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function Header2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: cn(import_FormBox2.default.header, className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    "h2",
+    {
+      className: cn(
+        "m-0 flex items-center gap-2 self-stretch p-0 text-2xl font-semibold leading-normal text-[var(--chekin-color-brand-navy)]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
 }
 
 // src/form-box/Root.tsx
-var import_FormBox3 = __toESM(require("./FormBox.module-WG4SQBRR.module.css"), 1);
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function Root10({ children, nested, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
-      className: cn(import_FormBox3.default.wrapper, nested && import_FormBox3.default.wrapperNested, className),
+      className: cn(
+        "flex max-w-[1400px] flex-col items-start gap-6 self-stretch rounded-[10px] border border-[var(--chekin-color-gray-separator)] p-6 [container-type:inline-size]",
+        nested && "border-0 p-0",
+        className
+      ),
       ...props,
       children
     }
@@ -4516,10 +4525,19 @@ function Root10({ children, nested, className, ...props }) {
 }
 
 // src/form-box/SubHeader.tsx
-var import_FormBox4 = __toESM(require("./FormBox.module-WG4SQBRR.module.css"), 1);
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function SubHeader({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h4", { className: cn(import_FormBox4.default.subHeader, className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    "h4",
+    {
+      className: cn(
+        "m-0 flex items-center gap-2 self-stretch border-b border-[var(--chekin-color-gray-separator)] px-0 py-2 text-base font-semibold leading-normal text-[var(--chekin-color-brand-navy)]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
 }
 
 // src/form-box/index.ts
@@ -4533,7 +4551,6 @@ var FormBox = {
 // src/free-text-field/FreeTextField.tsx
 var import_react37 = require("react");
 var import_react_i18next10 = require("react-i18next");
-var import_styles3 = __toESM(require("./styles.module-SHDCFZJR.module.css"), 1);
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var FreeTextField = (0, import_react37.forwardRef)(
   ({
@@ -4579,65 +4596,81 @@ var FreeTextField = (0, import_react37.forwardRef)(
       onBlur?.(event);
     };
     const fieldBoxClassName = cn(
-      import_styles3.default.fieldBox,
-      autocompleted && import_styles3.default.fieldBoxAutocompleted,
-      isErrorWrong && !autocompleted && import_styles3.default.fieldBoxErrorWrong,
-      !autocompleted && !isErrorWrong && !isEmpty && import_styles3.default.fieldBoxFilled,
-      !autocompleted && !isErrorWrong && isEmpty && import_styles3.default.fieldBoxEmpty,
-      isFocused && !hasError && import_styles3.default.fieldBoxFocused
+      "relative flex h-11 items-center gap-2.5 rounded-lg border px-3.5 py-2.5 transition-colors duration-150 ease-in-out",
+      autocompleted && "border-[var(--chekin-color-brand-navy)] bg-[var(--chekin-color-surface-autocomplete)]",
+      isErrorWrong && !autocompleted && "border-[var(--error-message-color)] bg-white",
+      !autocompleted && !isErrorWrong && !isEmpty && "border-[var(--chekin-color-brand-navy)] bg-white",
+      !autocompleted && !isErrorWrong && isEmpty && "border-[rgba(22,22,67,0.2)] bg-[var(--chekin-color-surface-input-empty)]",
+      isFocused && !hasError && "border-[var(--chekin-color-brand-blue)]"
     );
     const inputPlaceholder = fieldStyle === "new" ? label : placeholder;
     const showFloatingLabel = fieldStyle === "new" && !isEmpty && Boolean(label);
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn(import_styles3.default.container, className), children: [
-      fieldStyle === "current" && label && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: import_styles3.default.labelRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("label", { htmlFor: inputId, className: import_styles3.default.labelText, children: label }),
-        optional && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: import_styles3.default.optionalText, children: [
-          "- ",
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("em", { children: optionalLabel || t("optional") })
-        ] }),
-        tooltip && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: import_styles3.default.tooltip, children: tooltip })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: fieldBoxClassName, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          "input",
-          {
-            ref,
-            id: inputId,
-            className: import_styles3.default.input,
-            placeholder: inputPlaceholder,
-            value,
-            defaultValue: value === void 0 ? defaultValue : void 0,
-            onChange: handleChange,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            disabled,
-            ...inputProps
-          }
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      "div",
+      {
+        className: cn(
+          "relative flex w-[300px] flex-col gap-1 [font-family:var(--chekin-font-family-primary)]",
+          className
         ),
-        icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: import_styles3.default.icon, children: icon }),
-        showFloatingLabel && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          "div",
-          {
-            className: cn(
-              import_styles3.default.floatingLabel,
-              autocompleted && import_styles3.default.floatingLabelAutocompleted
+        children: [
+          fieldStyle === "current" && label && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "label",
+              {
+                htmlFor: inputId,
+                className: "text-base font-medium leading-4 text-[var(--chekin-color-brand-navy)]",
+                children: label
+              }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-              "span",
+            optional && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "text-base leading-4 text-[var(--chekin-color-brand-navy)] [&_em]:text-[var(--chekin-color-gray-2)]", children: [
+              "- ",
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("em", { children: optionalLabel || t("optional") })
+            ] }),
+            tooltip && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "h-4 w-4 shrink-0", children: tooltip })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: fieldBoxClassName, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "input",
+              {
+                ref,
+                id: inputId,
+                className: "min-h-px min-w-0 flex-1 basis-0 border-0 bg-transparent p-0 text-base font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
+                placeholder: inputPlaceholder,
+                value,
+                defaultValue: value === void 0 ? defaultValue : void 0,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                disabled,
+                ...inputProps
+              }
+            ),
+            icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center", children: icon }),
+            showFloatingLabel && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "div",
               {
                 className: cn(
-                  import_styles3.default.floatingLabelText,
-                  isErrorWrong && import_styles3.default.floatingLabelTextError
+                  "pointer-events-none absolute left-[13px] top-[-8px] flex h-4 items-center bg-gradient-to-b from-transparent from-50% to-white to-50% px-[3px]",
+                  autocompleted && "to-[var(--chekin-color-surface-autocomplete)]"
                 ),
-                children: label
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "whitespace-nowrap text-sm font-medium leading-6 text-[var(--chekin-color-gray-1)]",
+                      isErrorWrong && "text-[var(--error-message-color)]"
+                    ),
+                    children: label
+                  }
+                )
               }
             )
-          }
-        )
-      ] }),
-      supportingText && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: import_styles3.default.supportingText, children: supportingText }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: import_styles3.default.errorText, children: error })
-    ] });
+          ] }),
+          supportingText && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "m-0 text-xs italic leading-normal text-[var(--chekin-color-gray-2)]", children: supportingText }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "m-0 text-right text-xs font-medium leading-4 text-[var(--error-message-color)]", children: error })
+        ]
+      }
+    );
   }
 );
 FreeTextField.displayName = "FreeTextField";
@@ -6074,8 +6107,14 @@ function Loader({
 
 // src/metric-card/MetricCard.tsx
 var import_lucide_react23 = require("lucide-react");
-var import_MetricCard = __toESM(require("./MetricCard.module-LEV46BXD.module.css"), 1);
 var import_jsx_runtime75 = require("react/jsx-runtime");
+var metricCardVariantClasses = {
+  blue: "bg-[linear-gradient(122deg,#e6f0ff_36.37%,#f6f9ff_86.4%)] text-[#385cf8] [&_[data-slot=metric-card-icon]]:bg-[#dbeafe]",
+  green: "bg-[linear-gradient(122deg,#ddfbf4_36.37%,#f5fefc_86.4%)] text-[#2bc29f] [&_[data-slot=metric-card-icon]]:bg-[#cff9ef]",
+  orange: "bg-[linear-gradient(122deg,#ffeddc_36.37%,#fffaf5_86.4%)] text-[#f5721a] [&_[data-slot=metric-card-icon]]:bg-[#ffe5cd]",
+  purple: "bg-[linear-gradient(122deg,#f5edff_36.37%,#fcfaff_86.4%)] text-[#9a51ff] [&_[data-slot=metric-card-icon]]:bg-[#f0e5ff]",
+  yellow: "bg-[linear-gradient(122deg,#fff8e5_36.37%,#fffbef_86.4%)] text-[#ce8b0b] [&_[data-slot=metric-card-icon]]:bg-[#ffeeb2]"
+};
 function MetricCard({
   title,
   value,
@@ -6090,37 +6129,41 @@ function MetricCard({
     "div",
     {
       className: cn(
-        import_MetricCard.default.MetricCard,
-        import_MetricCard.default[`MetricCard--${variant}`],
-        loading && import_MetricCard.default["MetricCard--loading"],
+        "flex w-full min-w-52 gap-2 rounded-lg border border-[var(--chekin-color-gray-3)] p-4",
+        metricCardVariantClasses[variant],
+        loading && "cursor-progress opacity-60",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: import_MetricCard.default.MetricCard__iconContainer, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: import_MetricCard.default.MetricCard__content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: import_MetricCard.default.MetricCard__header, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("h4", { className: import_MetricCard.default.MetricCard__title, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          "div",
+          {
+            "data-slot": "metric-card-icon",
+            className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full mix-blend-multiply",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex flex-1 flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("h4", { className: "whitespace-nowrap text-base font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: title }),
             tooltip && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Tooltip, { side: "right", content: tooltip, contentClassName: "max-w-64", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "button",
               {
                 type: "button",
-                className: cn(
-                  "inline-flex text-[var(--chekin-color-gray-1)]",
-                  import_MetricCard.default.MetricCard__tooltip
-                ),
+                className: "inline-flex text-[var(--chekin-color-gray-1)]",
                 "aria-label": tooltip,
                 children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react23.CircleQuestionMark, { className: "h-4 w-4" })
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: import_MetricCard.default.MetricCard__footer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: import_MetricCard.default.MetricCard__value, children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "text-2xl font-bold leading-6", children: value }),
             !!percentage && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
               "div",
               {
                 className: cn(
-                  import_MetricCard.default.MetricCard__percentage,
-                  percentage < 0 ? import_MetricCard.default["--negative"] : ""
+                  "inline-flex items-center gap-x-1 text-base font-semibold leading-6 text-[#059669]",
+                  percentage < 0 && "text-[var(--chekin-color-brand-red)]"
                 ),
                 children: [
                   percentage < 0 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react23.TrendingDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react23.TrendingUp, {}),
@@ -6148,7 +6191,6 @@ var METRIC_CARD_VARIANTS = {
 // src/modal/Modal.tsx
 var import_react47 = require("react");
 var import_lucide_react24 = require("lucide-react");
-var import_styles4 = __toESM(require("./styles.module-74HHIGIE.module.css"), 1);
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var preventDefault = (event) => {
   event.preventDefault();
@@ -6192,9 +6234,9 @@ function Modal({
       overlayClassName,
       className: cn(
         "modal__content",
-        import_styles4.default.modal__content,
+        "flex h-auto min-w-[340px] w-auto flex-col items-center gap-y-6 rounded-md bg-[var(--chekin-color-white)] text-center text-[var(--chekin-color-brand-navy)]",
         scrollableOverlay && "min-h-0",
-        size === "compact" && import_styles4.default.modal__contentCompact,
+        size === "compact" && "w-[360px] min-w-0",
         className
       ),
       lockScroll,
@@ -6205,16 +6247,28 @@ function Modal({
           {
             type: "button",
             onClick: handleClose,
-            className: cn("modal__close", import_styles4.default.modal__close),
+            className: cn(
+              "modal__close",
+              "absolute right-4 top-4 z-10 rounded-full p-1 text-[var(--chekin-color-brand-blue)] hover:bg-[#f4f6f8]"
+            ),
             "aria-label": "Close",
             children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react24.X, { className: "h-5 w-5" })
           }
         ),
-        (iconSrc || iconProps?.src) && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: cn("modal__icon", import_styles4.default.modal__icon), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("img", { src: iconSrc, alt: iconAlt ?? "", ...iconProps }) }),
-        title ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogTitle, { className: cn("modal__title", import_styles4.default.modal__title), children: title }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogVisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogTitle, { children: "Dialog" }) }),
-        text && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogDescription, { className: cn("modal__text", import_styles4.default.modal__text), children: text }),
+        (iconSrc || iconProps?.src) && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "modal__icon mx-auto mt-4 select-none", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("img", { src: iconSrc, alt: iconAlt ?? "", ...iconProps }) }),
+        title ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogTitle, { className: cn("modal__title", "px-6 text-lg font-bold"), children: title }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogVisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogTitle, { children: "Dialog" }) }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DialogDescription, { className: cn("modal__text", "text-base"), children: text }),
         children,
-        buttons && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: cn("modal__buttons-wrapper", import_styles4.default.modal__buttonsWrapper), children: buttons })
+        buttons && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          "div",
+          {
+            className: cn(
+              "modal__buttons-wrapper",
+              "mb-2 mt-6 flex flex-col items-center justify-center gap-y-4"
+            ),
+            children: buttons
+          }
+        )
       ]
     }
   ) });
@@ -6224,7 +6278,7 @@ var ModalButton = (0, import_react47.forwardRef)(
     Button,
     {
       ref,
-      className: cn("modal__button", import_styles4.default.modal__button, className),
+      className: cn("modal__button", "min-w-[210px]", className),
       size: size && "lg",
       ...props,
       children
@@ -6994,7 +7048,6 @@ function useRadioOptions({ options, defaultValue, onChange }) {
 }
 
 // src/radio/Radio.tsx
-var import_styles5 = __toESM(require("./styles.module-REEJNJNW.module.css"), 1);
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var Radio = (0, import_react53.forwardRef)(
   ({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
@@ -7023,8 +7076,8 @@ var Radio = (0, import_react53.forwardRef)(
             {
               className: cn(
                 "radio__wrapper",
-                import_styles5.default.radio__wrapper,
-                (disabled || option.disabled) && import_styles5.default.radio__wrapper_disabled
+                "flex cursor-pointer items-center gap-2",
+                (disabled || option.disabled) && "cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
               ),
               children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
@@ -7036,7 +7089,7 @@ var Radio = (0, import_react53.forwardRef)(
                     className: "radio__indicator"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: cn(import_styles5.default.radio__label, "radio_label"), children: option.label })
+                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "radio_label", children: option.label })
               ] })
             },
             option.value
@@ -7136,7 +7189,6 @@ function RatingProgress({
 
 // src/rating-radio-group/RatingRadioGroup.tsx
 var import_lucide_react29 = require("lucide-react");
-var import_styles6 = __toESM(require("./styles.module-H7R2VV2Q.module.css"), 1);
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var getStarColor = (optionValue) => (value) => {
   if (value >= optionValue) return "#facc15";
@@ -7150,13 +7202,13 @@ function RatingRadioGroup({
   className,
   options
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("fieldset", { className: cn(className, import_styles6.default.RatingRadioGroup), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("legend", { className: import_styles6.default.RatingRadioGroup__legend, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: cn(import_styles6.default.RatingRadioGroup__list, "RatingRadioGroup__list"), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("label", { className: import_styles6.default.RatingRadioGroup__label, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("fieldset", { className: cn("relative [all:unset]", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("legend", { className: "mb-2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "RatingRadioGroup__list flex gap-2", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("label", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "input",
         {
-          className: import_styles6.default.RatingRadioGroup__input,
+          className: "peer absolute h-0 w-0 opacity-0",
           type: "radio",
           name,
           checked: value === option.value,
@@ -7167,7 +7219,7 @@ function RatingRadioGroup({
       /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         import_lucide_react29.Star,
         {
-          className: import_styles6.default.RatingRadioGroup__star,
+          className: "cursor-pointer rounded peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#385bf8]",
           size: 24,
           "aria-label": option.label,
           color: getStarColor(option.value)(value || 0),
@@ -7393,7 +7445,6 @@ var SubSectionSize = /* @__PURE__ */ ((SubSectionSize2) => {
 })(SubSectionSize || {});
 
 // src/section/Section.tsx
-var import_Section = __toESM(require("./Section.module-6UJGBE6B.module.css"), 1);
 var import_jsx_runtime97 = require("react/jsx-runtime");
 function TooltipInfo({ content, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Tooltip, { side: "right", content, contentClassName: "max-w-64", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -7426,45 +7477,62 @@ var Section = (0, import_react54.forwardRef)(
     {
       ref,
       className: cn(
-        import_Section.default.section,
-        loading && import_Section.default.section_loading,
-        disabled && import_Section.default.section_disabled,
+        "mb-6 box-border flex w-full cursor-default flex-col gap-6 rounded-lg border border-solid border-[var(--chekin-color-gray-3)] bg-white px-6 py-10",
+        loading && "cursor-progress",
+        disabled && "pointer-events-none opacity-50",
         { "!hidden": hidden },
         className
       ),
       children: [
-        (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: import_Section.default.section__header, children: [
+        (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex flex-col gap-2", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
             "div",
             {
               className: cn(
-                import_Section.default.section__title,
-                size === 0 /* L */ && import_Section.default.section__titleLarge
+                "flex max-w-[85%] items-center text-lg font-bold text-[var(--chekin-color-brand-navy)] md:max-w-full",
+                size !== 0 /* L */ && "subsection-title"
               ),
               children: [
                 title,
-                titleTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: import_Section.default.section__titleTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TooltipInfo, { content: titleTooltip }) }),
-                linkContent && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: import_Section.default.section__titleLink, children: linkContent })
+                titleTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "ml-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TooltipInfo, { content: titleTooltip }) }),
+                linkContent && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "ml-6 text-sm font-semibold text-[var(--chekin-color-brand-blue)] no-underline hover:opacity-70 active:opacity-100", children: linkContent })
               ]
             }
           ),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: import_Section.default.section__subtitleWrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: import_Section.default.section__subtitle, children: subtitle }),
-            subtitleTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: import_Section.default.section__subtitleTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TooltipInfo, { content: subtitleTooltip }) })
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "w-full max-w-[720px] md:max-w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "inline text-base font-normal text-[var(--chekin-color-gray-1)]", children: subtitle }),
+            subtitleTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "ml-1.5 inline-block align-text-top", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TooltipInfo, { content: subtitleTooltip }) })
           ] })
         ] }),
-        loading && showLoader ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Loader, { className: import_Section.default.section__loader }) : children
+        loading && showLoader ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Loader, { className: "mx-auto mb-3 mt-2.5" }) : children
       ]
     }
   )
 );
 Section.displayName = "Section";
 var SubSection = (0, import_react54.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Section, { ref, className: cn(import_Section.default.section_sub, className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    Section,
+    {
+      ref,
+      className: cn(
+        "m-0 box-border rounded-none border-none bg-transparent p-0 [&_.subsection-title]:text-base [&_.subsection-title]:font-semibold",
+        className
+      ),
+      ...props
+    }
+  )
 );
 SubSection.displayName = "SubSection";
 var DividingSubsection = (0, import_react54.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SubSection, { ref, className: cn(import_Section.default.section_dividing, className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    SubSection,
+    {
+      ref,
+      className: cn("border-0 border-t border-solid border-t-[#f1f1f1] pt-6", className),
+      ...props
+    }
+  )
 );
 DividingSubsection.displayName = "DividingSubsection";
 
@@ -7472,7 +7540,6 @@ DividingSubsection.displayName = "DividingSubsection";
 var import_react55 = require("react");
 
 // src/selector-button/SelectorButton.tsx
-var import_styles7 = __toESM(require("./styles.module-AAYSW4RF.module.css"), 1);
 var import_jsx_runtime98 = require("react/jsx-runtime");
 function SelectorButton({
   active,
@@ -7501,12 +7568,15 @@ function SelectorButton({
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     "label",
     {
-      className: cn(import_styles7.default.styledButton, "selector-button", className, {
-        [import_styles7.default.active]: active,
-        [import_styles7.default.disabled]: disabled,
-        [import_styles7.default.loading]: loading,
-        [import_styles7.default.readOnly]: readOnly
-      }),
+      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-[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",
+        readOnly && !active && "hover:border-transparent",
+        className
+      ),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
@@ -7520,7 +7590,7 @@ function SelectorButton({
             readOnly
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: import_styles7.default.content, children })
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "flex h-full items-center", children })
       ]
     }
   );
@@ -7528,7 +7598,6 @@ function SelectorButton({
 SelectorButton.displayName = "SelectorButton";
 
 // src/selectors/Selectors.tsx
-var import_styles8 = __toESM(require("./styles.module-4AVOK5SA.module.css"), 1);
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var getValueArray = (value) => {
   if (value) {
@@ -7587,15 +7656,15 @@ function SelectorsInternal({
     onAnySelectorActive?.(isAnyActive);
   }, [isAnyActive, onAnySelectorActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: import_styles8.default.labelWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: cn(import_styles8.default.name, "label"), children: label }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "flex [&_span]:ml-[5px]", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "label box-border mb-1.5 min-h-5 select-none overflow-x-hidden text-ellipsis whitespace-nowrap text-left text-base font-normal text-[var(--chekin-color-brand-navy)]", children: label }) }),
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       "div",
       {
         ref,
-        className: cn(className, {
-          [import_styles8.default.selectorsWrapperTab]: variant === "TAB",
-          [import_styles8.default.selectorsWrapperDefault]: variant !== "TAB"
-        }),
+        className: cn(
+          variant === "TAB" ? "box-border flex h-auto max-h-none w-fit flex-wrap items-center rounded-md border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] bg-no-repeat [background-position:0_0] [background-clip:padding-box]" : "mb-[-10px] flex w-full flex-wrap [&_.selector-button]:mb-[10px] [&_.selector-button]:mr-[10px]",
+          className
+        ),
         children: options.map((option, index) => {
           const isSelected = getValueArray(value).includes(option.value);
           const isDisabled = disabled || disabledItems?.includes(option.value) || option.disabled;
@@ -7612,11 +7681,13 @@ function SelectorsInternal({
               disabled: isDisabled,
               onClick: (event) => onClick?.(event, option),
               onChange: handleChange(option),
-              className: variant === "TAB" ? cn(import_styles8.default.selectorButton, {
-                [import_styles8.default.active]: isSelected,
-                [import_styles8.default.readOnly]: isReadOnly,
-                [import_styles8.default.sizeSm]: size === "sm"
-              }) : "selector-button",
+              className: variant === "TAB" ? cn(
+                "box-border min-h-9 min-w-0 flex-1 whitespace-nowrap border border-transparent bg-transparent px-[21px] py-2 text-[15px] font-medium text-[var(--chekin-color-gray-1)] shadow-none transition-none [margin:2px] hover:border-transparent hover:bg-[var(--chekin-color-brand-blue)] hover:text-white hover:opacity-35 [&>div]:mx-auto [&>div]:my-0",
+                isSelected && "active cursor-default border-[var(--chekin-color-brand-blue)] bg-[var(--chekin-color-brand-blue)] font-semibold text-white shadow-[0_3px_4px_#00020334] hover:opacity-100",
+                isReadOnly && !isSelected && "readOnly cursor-default hover:bg-transparent hover:text-[var(--chekin-color-gray-1)]",
+                size === "sm" && "py-[7px] text-sm font-medium leading-6",
+                size === "sm" && isSelected && "py-[7px] text-sm font-bold leading-6"
+              ) : "selector-button",
               children: getSelectorContent(option.label, isDisabled, isReadOnly, isSelected)
             },
             `${option.value}-${index}`
@@ -7644,7 +7715,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
@@ -7697,17 +7768,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__ */ (0, import_jsx_runtime101.jsxs)(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__ */ (0, import_jsx_runtime101.jsxs)(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__ */ (0, import_jsx_runtime101.jsx)(import_lucide_react35.XIcon, { className: "size-4" }),
             /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "sr-only", children: "Close" })
           ] })
@@ -7744,7 +7815,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
     }
   );
@@ -7757,7 +7828,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
     }
   );
@@ -7815,9 +7886,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__ */ (0, import_jsx_runtime103.jsx)(
     "div",
@@ -7825,8 +7896,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"
@@ -7938,7 +8009,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,
@@ -7954,7 +8025,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 },
@@ -7974,7 +8045,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,
@@ -8005,7 +8076,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
                 }
               )
@@ -8057,10 +8128,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
         ),
@@ -8164,7 +8235,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
       ),
@@ -8181,7 +8252,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
@@ -8226,12 +8297,12 @@ var SidebarMenuItem = React25.forwardRef(
 );
 SidebarMenuItem.displayName = "SidebarMenuItem";
 var sidebarMenuButtonVariants = (0, import_class_variance_authority11.cva)(
-  "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",
@@ -8299,7 +8370,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
       ),
@@ -8319,7 +8390,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
@@ -8359,7 +8430,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
@@ -8372,12 +8443,12 @@ var SidebarMenuSubItem = React25.forwardRef(
 );
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 var sidebarMenuSubButtonVariants = (0, import_class_variance_authority11.cva)(
-  "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",
@@ -8541,7 +8612,7 @@ var SmallGridSingleItem = (0, import_react61.memo)(
         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",
@@ -8551,7 +8622,7 @@ var SmallGridSingleItem = (0, import_react61.memo)(
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "line-clamp-2 overflow-hidden text-ellipsis break-all", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "line-clamp-2 overflow-hidden text-ellipsis text-[15px] font-medium leading-6 text-chekin-gray-2", children: subtitle })
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("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__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex h-full items-center justify-end gap-2", children: [
             onDelete && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
@@ -8561,12 +8632,12 @@ var SmallGridSingleItem = (0, import_react61.memo)(
                 onClick: onDelete,
                 size: "icon",
                 variant: "outline",
-                children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react37.Trash2, { className: "h-5 w-5 text-chekin-red" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react37.Trash2, { className: "h-5 w-5 text-[var(--chekin-color-brand-red)]" })
               }
             ),
-            onEdit && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { disabled, onClick: onEdit, size: "icon", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react37.Pencil, { className: "h-5 w-5 text-chekin-blue" }) })
+            onEdit && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { disabled, onClick: onEdit, size: "icon", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react37.Pencil, { className: "h-5 w-5 text-[var(--chekin-color-brand-blue)]" }) })
           ] }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute bottom-1 right-2 text-xs text-chekin-red", children: error })
+          error && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute bottom-1 right-2 text-xs text-[var(--chekin-color-brand-red)]", children: error })
         ]
       }
     );
@@ -8593,18 +8664,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__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react38.ArrowDownUpIcon, { className: "h-4 w-4 text-chekin-gray-1 group-hover/trigger:text-chekin-navy" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react38.ArrowDownUpIcon, { className: "h-4 w-4 text-[var(--chekin-color-gray-1)] group-hover/trigger:text-[var(--chekin-color-brand-navy)]" })
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(DropdownMenuContent, { className: "w-full max-w-[256px]", align: "start", children: [
       /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
         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__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react38.ArrowUp, { className: "h-4 w-4" }),
@@ -8615,7 +8687,8 @@ function SortingAction({
       /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
         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__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react38.ArrowDown, { className: "h-4 w-4" }),
@@ -8763,8 +8836,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
@@ -8822,7 +8895,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: [
@@ -8831,7 +8904,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: [
@@ -8869,8 +8942,8 @@ var Tabs = TabsPrimitive2.Root;
 var tabsListVariants = (0, import_class_variance_authority12.cva)("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: {
@@ -8893,8 +8966,8 @@ var tabsTriggerVariants = (0, import_class_variance_authority12.cva)(
   {
     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: {
@@ -8929,12 +9002,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__ */ (0, import_jsx_runtime114.jsxs)(Tabs, { value: activeTab, onValueChange: onTabChange, className: "w-full", children: [
@@ -8978,7 +9051,6 @@ function TablePlaceholder({
 
 // src/task-card/TaskCard.tsx
 var import_lucide_react41 = require("lucide-react");
-var import_TaskCard = __toESM(require("./TaskCard.module-AVGS4US3.module.css"), 1);
 var import_jsx_runtime116 = require("react/jsx-runtime");
 function TaskCard({
   title,
@@ -8994,27 +9066,40 @@ function TaskCard({
     "div",
     {
       className: cn(
-        import_TaskCard.default.TaskCard,
-        import_TaskCard.default[`TaskCard--${eventType}`],
-        onClick && import_TaskCard.default["TaskCard--clickable"],
+        "relative box-border flex min-h-[48px] min-w-[360px] items-center gap-4 overflow-hidden rounded-lg p-2 transition-colors duration-200",
+        eventType === "error" && "bg-red-50",
+        eventType === "warning" && "bg-amber-50",
+        onClick && 'group cursor-pointer before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:content-[""]',
+        onClick && eventType === "error" && "hover:before:bg-red-100 hover:before:mix-blend-multiply",
+        onClick && eventType === "warning" && "hover:before:bg-amber-100 hover:before:mix-blend-multiply",
         className
       ),
       onClick,
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { className: import_TaskCard.default.TaskCard__indicator }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: import_TaskCard.default.TaskCard__content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("h4", { className: import_TaskCard.default.TaskCard__title, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { className: import_TaskCard.default.TaskCard__date, children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+          "div",
+          {
+            className: cn(
+              "relative w-1 shrink-0 self-stretch rounded-sm",
+              eventType === "error" && "bg-[var(--chekin-color-brand-red)]",
+              eventType === "warning" && "bg-amber-500"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("h4", { className: "m-0 w-full break-words text-base font-semibold leading-6 text-[var(--chekin-color-brand-navy)]", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { className: "m-0 w-full text-sm font-medium leading-6 text-[var(--chekin-color-gray-1)]", children: description })
         ] }),
-        shouldShowActions && /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: import_TaskCard.default.TaskCard__actions, children: [
+        shouldShowActions && /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
           shouldShowCount && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
             "div",
             {
               className: cn(
-                import_TaskCard.default.TaskCard__count,
-                import_TaskCard.default[`TaskCard__count--${eventType}`]
+                '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-[var(--chekin-color-brand-red)] before:bg-red-100",
+                eventType === "warning" && "text-amber-700 before:bg-amber-100"
               ),
               children: count
             }
@@ -9022,7 +9107,7 @@ function TaskCard({
           onClick && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
             "button",
             {
-              className: import_TaskCard.default.TaskCard__arrowButton,
+              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?.();
@@ -9090,12 +9175,12 @@ var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
 // src/toggle-group/style.ts
 var import_class_variance_authority13 = require("class-variance-authority");
 var toggleVariants = (0, import_class_variance_authority13.cva)(
-  "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]",
@@ -9105,7 +9190,7 @@ var toggleVariants = (0, import_class_variance_authority13.cva)(
       },
       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: {
@@ -9131,7 +9216,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,
@@ -9254,7 +9339,7 @@ function TogglesInternal({
     ...multiple ? { type: "multiple", value: currentValue } : { type: "single", value: currentValue[0] ?? "" }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { ref, className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "select-none text-base font-normal text-chekin-navy", children: label }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "select-none text-base font-normal text-[var(--chekin-color-brand-navy)]", children: label }) }),
     /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(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;
@@ -9287,15 +9372,39 @@ var EndIcon = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("
 
 // src/text-field/FieldError.tsx
 var import_jsx_runtime120 = require("react/jsx-runtime");
-var FieldError = ({ id, children }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { id, className: "mt-1 text-right text-xs font-medium text-chekin-red", role: "alert", children });
+var FieldError = ({ id, children }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  "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
 var import_jsx_runtime121 = require("react/jsx-runtime");
-var SupportingText = ({ id, children }) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("p", { id, className: "mt-1 text-xs italic text-chekin-gray-2", children });
+var SupportingText = ({ id, children }) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("p", { id, className: "mt-1 text-xs italic text-[var(--chekin-color-gray-2)]", children });
 
 // src/text-field/TextField.tsx
-var import_textField = __toESM(require("./textField.module-5W2LJGIC.module.css"), 1);
 var import_jsx_runtime122 = require("react/jsx-runtime");
+var textFieldRootClasses = [
+  "[--text-field-height:2.75rem]",
+  "[--text-field-radius:8px]",
+  "[--text-field-padding-x:0.875rem]",
+  "[--text-field-padding-y:0.625rem]",
+  "[--text-field-bg-empty:#f4f6f8]",
+  "[--text-field-bg-filled:#ffffff]",
+  "[--text-field-border-empty:rgba(22,22,67,0.2)]",
+  "[--text-field-border-filled:#161643]",
+  "[--text-field-border-error:#ff2467]",
+  "[--text-field-text:#161643]",
+  "[--text-field-placeholder:#6b6b95]",
+  "[--text-field-label:#161643]",
+  "[--text-field-supporting:#9696b9]",
+  "[--text-field-error:#ff2467]",
+  "[--text-field-focus-ring:rgba(56,91,248,0.2)]"
+];
 var inputVariants = (0, import_class_variance_authority14.cva)(
   [
     "flex w-full border text-base font-medium leading-5 outline-none transition-colors",
@@ -9402,7 +9511,11 @@ var TextField = React29.forwardRef(
       return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
         "div",
         {
-          className: cn("relative flex w-full flex-col", import_textField.default.root, wrapperClassName),
+          className: cn(
+            "relative flex w-full flex-col",
+            textFieldRootClasses,
+            wrapperClassName
+          ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "relative", children: [
               /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
@@ -9441,7 +9554,7 @@ var TextField = React29.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: cn("flex w-full flex-col", import_textField.default.root, wrapperClassName), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: cn("flex w-full flex-col", textFieldRootClasses, wrapperClassName), children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "mb-1 flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
           LabelPrimitive2.Root,
@@ -9452,8 +9565,8 @@ var TextField = React29.forwardRef(
           }
         ),
         optional && /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("span", { className: "text-base leading-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-chekin-navy", children: "- " }),
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "italic text-chekin-gray-2", children: optionalLabel || t("optional") })
+          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[var(--chekin-color-brand-navy)]", children: "- " }),
+          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "italic text-[var(--chekin-color-gray-2)]", children: optionalLabel || t("optional") })
         ] }),
         tooltip
       ] }),
@@ -9483,12 +9596,11 @@ TextField.displayName = "TextField";
 
 // src/textarea/Textarea.tsx
 var import_react67 = require("react");
-var import_styles9 = __toESM(require("./styles.module-6FWQEZTQ.module.css"), 1);
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var Textarea = (0, import_react67.forwardRef)(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
     const inputId = (0, import_react67.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn(import_styles9.default.container, className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "textarea",
         {
@@ -9496,10 +9608,12 @@ var Textarea = (0, import_react67.forwardRef)(
           id: inputId,
           name,
           disabled,
-          className: cn(import_styles9.default.textarea, textareaClassName, {
-            [import_styles9.default.textareaError]: invalid,
-            [import_styles9.default.textareaDisabled]: disabled
-          }),
+          className: cn(
+            "peer box-border min-h-[120px] w-full resize-none rounded-lg border border-[#cecede] bg-[#f4f6f8] px-4 py-3 text-[#161643] outline-none [scrollbar-color:#777e91_transparent] [scrollbar-gutter:stable] placeholder:text-[#6b6b95] placeholder:opacity-100 focus:border-[#385bf8] focus:bg-white focus:transition-colors focus:duration-100 focus:ease-in-out [&:not(:placeholder-shown)]:bg-white",
+            invalid && "border-[#ff2467] focus:border-[#ff2467]",
+            disabled && "cursor-not-allowed resize-none border-[#9696b9] bg-[#f4f6f8] text-[#9696b9] placeholder:text-[#9696b9]",
+            textareaClassName
+          ),
           ...textareaProps
         }
       ),
@@ -9507,10 +9621,11 @@ var Textarea = (0, import_react67.forwardRef)(
         "label",
         {
           htmlFor: inputId,
-          className: cn(import_styles9.default.label, {
-            [import_styles9.default.labelError]: invalid,
-            [import_styles9.default.labelDisabled]: disabled
-          }),
+          className: cn(
+            "pointer-events-none absolute left-3 top-4 px-1 text-[#6b6b95] transition-all duration-100 ease-in-out peer-focus:left-2 peer-focus:top-[-0.6rem] peer-focus:bg-white peer-focus:text-sm peer-focus:font-medium peer-focus:text-[#385bf8] peer-[:not(:placeholder-shown)]:left-2 peer-[:not(:placeholder-shown)]:top-[-0.6rem] peer-[:not(:placeholder-shown)]:bg-white peer-[:not(:placeholder-shown)]:text-sm peer-[:not(:placeholder-shown)]:font-medium",
+            invalid && "text-[#ff2467] peer-focus:text-[#ff2467]",
+            disabled && "text-[#9696b9]"
+          ),
           children: label
         }
       )
@@ -9527,18 +9642,43 @@ var LABEL_PLACEMENT = /* @__PURE__ */ ((LABEL_PLACEMENT2) => {
 })(LABEL_PLACEMENT || {});
 
 // src/three-dots-loader/ThreeDotsLoader.tsx
-var import_styles10 = __toESM(require("./styles.module-Y6YCV6UA.module.css"), 1);
 var import_jsx_runtime124 = require("react/jsx-runtime");
 function Dots({
   height,
   width,
   color
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { className: import_styles10.default.dots, style: { height, width }, "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: import_styles10.default.dot, style: { backgroundColor: color } }),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: import_styles10.default.dot, style: { backgroundColor: color } }),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: import_styles10.default.dot, style: { backgroundColor: color } })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "span",
+    {
+      className: "inline-flex items-center justify-center gap-[15%]",
+      style: { height, width },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "span",
+          {
+            className: "h-[22%] w-[22%] animate-chekin-three-dots rounded-full [animation-delay:-0.32s]",
+            style: { backgroundColor: color }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "span",
+          {
+            className: "h-[22%] w-[22%] animate-chekin-three-dots rounded-full [animation-delay:-0.16s]",
+            style: { backgroundColor: color }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "span",
+          {
+            className: "h-[22%] w-[22%] animate-chekin-three-dots rounded-full",
+            style: { backgroundColor: color }
+          }
+        )
+      ]
+    }
+  );
 }
 function ThreeDotsLoader({
   height = 30,
@@ -9550,13 +9690,22 @@ function ThreeDotsLoader({
 }) {
   const dots = /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Dots, { color, height, width });
   if (label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: cn(import_styles10.default.Loader, className), children: labelPlacement === 0 /* right */ ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
-      dots,
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { children: label })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { children: label }),
-      dots
-    ] }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center gap-x-[13px] [&>div]:text-sm [&>div]:font-bold [&>div]:uppercase [&>div]:text-[#9696b9] [&>div]:opacity-50",
+          className
+        ),
+        children: labelPlacement === 0 /* right */ ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+          dots,
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { children: label })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { children: label }),
+          dots
+        ] })
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className, children: dots });
 }
@@ -9575,15 +9724,15 @@ function UploadedFilesList({
   return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: cn("flex flex-wrap gap-2.5", className), children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
     "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__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-chekin-navy", children: file.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-[var(--chekin-color-brand-navy)]", children: file.name }),
         /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           "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__ */ (0, import_jsx_runtime125.jsx)(import_lucide_react42.X, { className: "h-3.5 w-3.5 text-white", strokeWidth: 3 })
           }
@@ -9602,7 +9751,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