@chekinapp/ui 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -872,11 +872,11 @@ var bookmarkTabsListVariants = (0, import_class_variance_authority3.cva)(
       variant: {
         default: [
           "relative h-auto w-full gap-1 bg-transparent p-0",
-          "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[#e5e6ee]"
+          "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[var(--chekin-border-default)]"
         ],
         material: [
           "relative h-auto w-full gap-1 bg-transparent p-0",
-          "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[#e5e6ee]"
+          "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[var(--chekin-border-default)]"
         ]
       }
     },
@@ -895,7 +895,7 @@ var bookmarkTabsTriggerVariants = (0, import_class_variance_authority3.cva)(
     variants: {
       variant: {
         default: [
-          "overflow-hidden rounded-lg rounded-b-none border-x border-t border-[#e5e6ee]",
+          "overflow-hidden rounded-lg rounded-b-none border-x border-t border-[var(--chekin-border-default)]",
           "bg-[var(--chekin-color-surface-input-empty)] px-4 py-2 text-base font-semibold text-[var(--chekin-color-gray-1)]",
           "data-[state=active]:z-10 data-[state=active]:cursor-default data-[state=active]:bg-[var(--chekin-color-white)]",
           "data-[state=active]:text-[var(--chekin-color-brand-navy)] data-[state=active]:shadow-none",
@@ -2434,7 +2434,7 @@ var iconButtonVariants = (0, import_class_variance_authority9.cva)(
         primary: "bg-[var(--chekin-color-brand-blue)] text-[var(--chekin-color-white)] hover:brightness-95",
         secondary: "border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-white)] text-[var(--chekin-color-brand-navy)] hover:bg-[var(--chekin-color-surface-input-empty)]",
         ghost: "bg-transparent text-[var(--chekin-color-gray-1)] hover:bg-[var(--chekin-color-surface-input-empty)]",
-        destructive: "border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-white)] text-[var(--error-message-color)] hover:bg-[#FFE8EF]"
+        destructive: "border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-white)] text-[var(--error-message-color)] hover:bg-[var(--chekin-red-150)]"
       }
     },
     defaultVariants: { size: "m", shape: "rounded", variant: "secondary" }
@@ -2462,7 +2462,7 @@ var IconButton = React12.forwardRef(
         "aria-label": props["aria-label"] ?? label,
         className: cn(
           iconButtonVariants({ size, shape, variant }),
-          outlined && "h-[30px] w-[30px] rounded-sm border border-[#e5e6ee] bg-[var(--chekin-color-white)]",
+          outlined && "h-[30px] w-[30px] rounded-sm border border-[var(--chekin-border-default)] bg-[var(--chekin-color-white)]",
           className
         ),
         ...props,
@@ -4371,7 +4371,7 @@ function DropdownMenuItemContent({
   label,
   description
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-3 text-[var(--chekin-color-brand-navy)] [&_svg]:text-[#acacd5]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-3 text-[var(--chekin-color-brand-navy)] [&_svg]:text-[var(--chekin-neutral-400)]", children: [
     icon,
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: label }),
@@ -4876,11 +4876,11 @@ var statusStyles = {
     color: "text-[var(--chekin-color-brand-blue)]"
   },
   [HALO_ICON_STATUS.success]: {
-    background: "bg-[#e8fcf7]",
-    color: "text-[#2bc29f]"
+    background: "bg-[var(--chekin-green-50)]",
+    color: "text-[var(--chekin-green-600)]"
   },
   [HALO_ICON_STATUS.danger]: {
-    background: "bg-[#ffe2ed]",
+    background: "bg-[var(--chekin-red-100)]",
     color: "text-[var(--error-message-color)]"
   }
 };
@@ -5217,9 +5217,9 @@ var framedIconVariants = (0, import_class_variance_authority11.cva)("inline-flex
     tone: {
       neutral: "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
       info: "bg-[var(--chekin-color-surface-pressed)] text-[var(--chekin-color-brand-blue)]",
-      success: "bg-[#E8FCF7] text-[#0F9F80]",
-      warn: "bg-[#FFF4E5] text-[#B86A00]",
-      error: "bg-[#FFE8EF] text-[var(--error-message-color)]"
+      success: "bg-[var(--chekin-green-50)] text-[var(--chekin-green-700)]",
+      warn: "bg-[var(--chekin-amber-200)] text-[var(--chekin-amber-700)]",
+      error: "bg-[var(--chekin-red-150)] text-[var(--error-message-color)]"
     }
   },
   defaultVariants: { size: "m", shape: "rounded", tone: "info" }
@@ -6302,7 +6302,7 @@ function LargeModal({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(DialogHeader, { className: "flex-shrink-0 flex-row items-center justify-between rounded-t-2xl border-b border-[#e5e6ee] bg-[var(--chekin-color-white)] p-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(DialogHeader, { className: "flex-shrink-0 flex-row items-center justify-between rounded-t-2xl border-b border-[var(--chekin-border-default)] bg-[var(--chekin-color-white)] p-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DialogTitle, { className: "text-lg font-semibold text-[var(--chekin-color-brand-navy)]", children: header }),
             subHeader && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { children: subHeader })
@@ -6358,7 +6358,7 @@ var LinkInternal = (0, import_react53.forwardRef)(
       className: cn(
         "inline cursor-pointer text-[var(--button-link-text)] no-underline transition-all duration-75 ease-in-out",
         !disabled && "hover:opacity-80 active:opacity-100",
-        disabled && "cursor-not-allowed text-[#ACACD5]",
+        disabled && "cursor-not-allowed text-[var(--chekin-neutral-400)]",
         "[&_img]:inline [&_img]:align-middle [&_svg]:relative [&_svg]:bottom-[1px] [&_svg]:ml-1 [&_svg]:inline [&_svg]:align-middle",
         className
       ),
@@ -6529,7 +6529,7 @@ function Modal({
             onClick: handleClose,
             className: cn(
               "modal__close",
-              "absolute right-4 top-4 z-10 rounded-full p-1 text-[var(--chekin-color-brand-blue)] hover:bg-[#f4f6f8]"
+              "absolute right-4 top-4 z-10 rounded-full p-1 text-[var(--chekin-color-brand-blue)] hover:bg-[var(--chekin-neutral-50)]"
             ),
             "aria-label": "Close",
             children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react20.X, { className: "h-5 w-5" })
@@ -6807,7 +6807,7 @@ var LegacySelectTrigger = React23.forwardRef(({ className, children, size = "sm"
   {
     ref,
     className: cn(
-      "flex h-full w-full items-center justify-between gap-2 rounded-lg border border-[#e5e7eb] bg-white px-3 py-2 text-start text-[var(--chekin-color-brand-navy)] shadow-[0_1px_2px_rgb(0_0_0_/_0.05)] shadow-black/5 outline-none",
+      "flex h-full w-full items-center justify-between gap-2 rounded-lg border border-[var(--chekin-gray-200)] bg-white px-3 py-2 text-start text-[var(--chekin-color-brand-navy)] shadow-[0_1px_2px_rgb(0_0_0_/_0.05)] shadow-black/5 outline-none",
       "focus:border-[var(--chekin-color-brand-blue)] focus:shadow-[var(--chekin-shadow-focus)]",
       "data-[placeholder]:text-[var(--chekin-color-gray-1)]",
       "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0",
@@ -6854,7 +6854,7 @@ var LegacySelectContent = React23.forwardRef(({ className, children, position =
   {
     ref,
     className: cn(
-      "relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] overflow-hidden rounded-lg border border-[#e5e7eb] bg-white text-[var(--chekin-color-brand-navy)] shadow-lg shadow-black/5",
+      "relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] overflow-hidden rounded-lg border border-[var(--chekin-gray-200)] bg-white text-[var(--chekin-color-brand-navy)] shadow-lg shadow-black/5",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -6901,8 +6901,8 @@ var LegacySelectItem = React23.forwardRef(({ className, children, size = "sm", .
     ref,
     className: cn(
       "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pe-2 ps-8 outline-none",
-      "focus:bg-[#f9fafb] focus:text-[var(--chekin-color-brand-navy)]",
-      "data-[highlighted]:bg-[#f9fafb] data-[highlighted]:text-[var(--chekin-color-brand-navy)]",
+      "focus:bg-[var(--chekin-gray-50)] focus:text-[var(--chekin-color-brand-navy)]",
+      "data-[highlighted]:bg-[var(--chekin-gray-50)] data-[highlighted]:text-[var(--chekin-color-brand-navy)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       selectSizeClassNames[size],
       className
@@ -6919,7 +6919,7 @@ var LegacySelectSeparator = React23.forwardRef(({ className, ...props }, ref) =>
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[#f3f4f6]", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--chekin-gray-100)]", className),
     ...props
   }
 ));
@@ -7058,8 +7058,8 @@ var LegacyMultiSelectInner = ({
                   handleSelect(stringValue);
                 },
                 className: cn(
-                  "relative flex w-full cursor-pointer select-none items-center rounded-md py-1.5 pe-2 ps-8 text-sm outline-none hover:bg-[#f9fafb] hover:text-[var(--chekin-color-brand-navy)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-                  selected && "bg-[#f9fafb]"
+                  "relative flex w-full cursor-pointer select-none items-center rounded-md py-1.5 pe-2 ps-8 text-sm outline-none hover:bg-[var(--chekin-gray-50)] hover:text-[var(--chekin-color-brand-navy)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                  selected && "bg-[var(--chekin-gray-50)]"
                 ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "absolute start-2 flex size-3.5 items-center justify-center", children: selected && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react22.CheckIcon, { size: 16, strokeWidth: 2 }) }),
@@ -7340,7 +7340,7 @@ var PopoverContent = React24.forwardRef(({ className, sideOffset = 4, align = "c
     sideOffset,
     align,
     className: cn(
-      "z-50 w-72 rounded-lg border border-[#e5e7eb] bg-[var(--chekin-color-white)] p-4 shadow-[0_10px_15px_-3px_rgb(0_0_0_/_0.1),0_4px_6px_-4px_rgb(0_0_0_/_0.1)] outline-none",
+      "z-50 w-72 rounded-lg border border-[var(--chekin-gray-200)] bg-[var(--chekin-color-white)] p-4 shadow-[0_10px_15px_-3px_rgb(0_0_0_/_0.1),0_4px_6px_-4px_rgb(0_0_0_/_0.1)] outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
@@ -7372,7 +7372,7 @@ function PopoverWithTooltip({
           align: "center",
           sideOffset: 4,
           className: cn(
-            "z-50 w-72 rounded-lg border border-[#e5e7eb] bg-white p-4 shadow-lg outline-none",
+            "z-50 w-72 rounded-lg border border-[var(--chekin-gray-200)] bg-white p-4 shadow-lg outline-none",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -7659,13 +7659,13 @@ var RadioCardsGroup = (0, import_react64.forwardRef)(
               {
                 className: cn(
                   "radio-card",
-                  "relative box-border flex min-h-[168px] w-[352px] items-start gap-4 rounded-lg border border-[#e5e6ee] bg-white p-4 pl-14",
+                  "relative box-border flex min-h-[168px] w-[352px] items-start gap-4 rounded-lg border border-[var(--chekin-border-default)] bg-white p-4 pl-14",
                   !disabled && !loading && !readOnly && "cursor-pointer hover:border-[var(--brand-color,var(--chekin-color-brand-blue))]",
                   isSelected && "border-2 border-[var(--brand-color,var(--chekin-color-brand-blue))] bg-[var(--chekin-color-surface-autocomplete)]",
                   disabled && "cursor-not-allowed opacity-50",
                   loading && "cursor-progress opacity-50",
                   readOnly && "cursor-default",
-                  error && "border-[#ff2467]",
+                  error && "border-[var(--chekin-red-500)]",
                   cardClassName
                 ),
                 children: [
@@ -7697,7 +7697,7 @@ var RadioCardsGroup = (0, import_react64.forwardRef)(
           }
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "mt-2 text-left text-sm text-[#ff2467]", children: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "mt-2 text-left text-sm text-[var(--chekin-red-500)]", children: error })
     ] });
   }
 );
@@ -7707,13 +7707,13 @@ var MemoizedRadioCardsGroup = (0, import_react64.memo)(RadioCardsGroup);
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var getRatingColor = (score, maxScore) => {
   const percentage = score / maxScore * 100;
-  if (percentage === 0) return "#ff2765";
-  if (percentage <= 20) return "#ff673c";
-  if (percentage <= 40) return "#ffa514";
-  if (percentage <= 50) return "#ffc400";
-  if (percentage <= 60) return "#cdc326";
-  if (percentage <= 80) return "#78c366";
-  return "#2cc29e";
+  if (percentage === 0) return "var(--chekin-rating-0)";
+  if (percentage <= 20) return "var(--chekin-rating-1)";
+  if (percentage <= 40) return "var(--chekin-rating-2)";
+  if (percentage <= 50) return "var(--chekin-rating-3)";
+  if (percentage <= 60) return "var(--chekin-rating-4)";
+  if (percentage <= 80) return "var(--chekin-rating-5)";
+  return "var(--chekin-rating-6)";
 };
 function RatingProgress({
   label,
@@ -7934,7 +7934,7 @@ function RatingStars({
   description,
   className,
   starClassName,
-  filledColor = "#ffb700",
+  filledColor = "var(--chekin-amber-500)",
   emptyColor = "var(--chekin-color-gray-3)"
 }) {
   const { t } = (0, import_react_i18next13.useTranslation)();
@@ -8014,7 +8014,7 @@ function SearchButton({ onClick, className, icon, ariaLabel }) {
     {
       onClick,
       className: cn(
-        "p-1.5 text-[#9696b9] hover:text-[var(--chekin-color-brand-blue)]",
+        "p-1.5 text-[var(--chekin-neutral-500)] hover:text-[var(--chekin-color-brand-blue)]",
         className
       ),
       "data-testid": "search-button",
@@ -8161,7 +8161,7 @@ var sectionTagVariants = (0, import_class_variance_authority12.cva)(
   {
     variants: {
       color: {
-        green: "bg-[#059669]",
+        green: "bg-[var(--chekin-green-800)]",
         blue: "bg-[var(--chekin-color-brand-blue)]"
       }
     },
@@ -9148,7 +9148,7 @@ var import_react_i18next16 = require("react-i18next");
 var import_react_signature_canvas = __toESM(require("react-signature-canvas"), 1);
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var SIGNATURE_PROPS = {
-  penColor: "#161643",
+  penColor: "var(--chekin-blue-900)",
   minWidth: 1.5,
   maxWidth: 2,
   dotSize: 2,
@@ -10672,7 +10672,7 @@ function ThreeDotsLoader({
       "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",
+          "flex items-center justify-center gap-x-[13px] [&>div]:text-sm [&>div]:font-bold [&>div]:uppercase [&>div]:text-[var(--chekin-neutral-500)] [&>div]:opacity-50",
           className
         ),
         role: "progressbar",
@@ -10703,15 +10703,15 @@ function UploadedFilesList({
   return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: cn("flex flex-wrap gap-2.5", className), children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     "div",
     {
-      className: "flex cursor-default items-center gap-2 rounded border border-[#acacd5] bg-[#f0f0f8] py-1.5 pl-3 pr-1.5",
+      className: "flex cursor-default items-center gap-2 rounded border border-[var(--chekin-neutral-400)] bg-[var(--chekin-neutral-75)] py-1.5 pl-3 pr-1.5",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-[#161643]", children: file.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-[var(--chekin-blue-900)]", children: file.name }),
         /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
           "button",
           {
             type: "button",
             onClick: () => onRemoveFile(file.name),
-            className: "flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded bg-[#6b6b95] 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-neutral-600)] transition-all hover:shadow-md active:opacity-95",
             "aria-label": `Remove ${file.name}`,
             children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_lucide_react37.X, { className: "h-3.5 w-3.5 text-white", strokeWidth: 3 })
           }
@@ -12571,7 +12571,7 @@ var Input = React44.forwardRef(
                       className: cn(
                         "input__control",
                         "m-0 box-border h-12 w-full rounded-[6px] border-0 px-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-200 [text-overflow:ellipsis] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-                        "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
+                        "placeholder:text-[length:var(--field-placeholder-font-size)] placeholder:font-[var(--field-placeholder-font-weight)] placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
                         isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
                         isEmpty && "text-[var(--chekin-color-gray-1)]",
                         inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
@@ -12593,7 +12593,7 @@ var Input = React44.forwardRef(
                       type: "button",
                       onClick: onReset,
                       disabled,
-                      className: "input__reset-button absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
+                      className: "input__reset-button absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[var(--chekin-neutral-500)] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
                       "aria-label": t("reset"),
                       children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react41.X, { size: 14 })
                     }
@@ -12611,7 +12611,7 @@ var Input = React44.forwardRef(
                           size: 20,
                           className: cn(
                             "input__password-icon",
-                            isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
+                            isPasswordRevealed ? "text-[var(--chekin-airbnb-pink)]" : "text-[var(--chekin-color-gray-2)]"
                           )
                         }
                       )
@@ -13354,13 +13354,13 @@ function ComboboxTrigger({
       ),
       children: [
         leftIcon && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
-        !leftIcon && searchable && (isFocused || isOpen) && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react45.Search, { size: 16, "aria-hidden": "true" }) }) }),
+        !leftIcon && !isMulti && searchable && (isFocused || isOpen) && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react45.Search, { size: 16, "aria-hidden": "true" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
           "div",
           {
             className: cn(
               "flex min-w-0 flex-1 items-center gap-2 py-[10px]",
-              leftIcon || searchable && (isFocused || isOpen) ? "pl-10" : "pl-4",
+              leftIcon || searchable && !isMulti && (isFocused || isOpen) ? "pl-10" : "pl-4",
               isMulti && "flex-wrap"
             ),
             children: [
@@ -13401,7 +13401,7 @@ function ComboboxTrigger({
                         "aria-controls": listboxId,
                         "aria-activedescendant": activeOptionId,
                         className: cn(
-                          "col-start-1 row-start-1 m-0 box-border w-full min-w-0 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
+                          "col-start-1 row-start-1 m-0 box-border w-full min-w-0 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[length:var(--field-placeholder-font-size)] placeholder:font-[var(--field-placeholder-font-weight)] placeholder:text-[var(--chekin-color-gray-1)]",
                           isMulti ? "min-w-[40px]" : "text-ellipsis",
                           readOnly && !disabled && !loading && "cursor-default",
                           disabled && !loading && "cursor-not-allowed",
@@ -13422,9 +13422,17 @@ function ComboboxTrigger({
             {
               type: "button",
               onClick: onClear,
-              className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
+              className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[var(--chekin-neutral-500)] hover:shadow-[0_3px_3px_#0f477734]",
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react45.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                import_lucide_react45.SquareX,
+                {
+                  size: 15,
+                  fill: "var(--chekin-neutral-500)",
+                  color: "#f8f8f8",
+                  strokeWidth: 1.8
+                }
+              )
             }
           ),
           !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
@@ -13576,11 +13584,11 @@ function useSelectState(params) {
     [singleSelected, getValueLabel]
   );
   const isSearchOnlyInput = searchable && (isMulti || Boolean(isSearchInDropdown));
-  const isInputControlled = controlledInputValue !== void 0;
+  const isInputControlled = Boolean(controlledInputValue);
   const [internalInputValue, setInternalInputValue] = React49.useState(
     searchable && !isSearchOnlyInput ? valueLabel : ""
   );
-  const inputValue = isInputControlled ? controlledInputValue : internalInputValue;
+  const inputValue = isInputControlled ? controlledInputValue ?? "" : internalInputValue;
   const setInputValue = React49.useCallback(
     (next) => {
       if (!isInputControlled) setInternalInputValue(next);
@@ -13591,7 +13599,7 @@ function useSelectState(params) {
   const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
   const hasInvalidState = Boolean(error);
   const errorMessage = typeof error === "string" ? error : void 0;
-  const { containerRef, isOpen, openMenu, closeMenu, setIsOpen } = useSelectMenuState({
+  const { containerRef, isOpen, closeMenu, setIsOpen } = useSelectMenuState({
     isBlocked,
     isMobile: isMobile3,
     onOutsideClick: () => setIsFocused(false),
@@ -13599,19 +13607,18 @@ function useSelectState(params) {
     onMenuOpenChange
   });
   const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
-  const { listboxId, getOptionId: getOptionId2 } = ids;
   React49.useEffect(() => {
     if (!searchable) return;
     if (isSearchOnlyInput) return;
     if (!isFocused) setInputValue(valueLabel);
-  }, [valueLabel, isFocused, isSearchOnlyInput, searchable]);
+  }, [valueLabel, isFocused, isSearchOnlyInput, searchable, setInputValue]);
   React49.useEffect(() => {
     if (!isSearchOnlyInput) return;
     if (!isOpen) {
       setInputValue("");
       setHighlightedIndex(-1);
     }
-  }, [isOpen, isSearchOnlyInput]);
+  }, [isOpen, isSearchOnlyInput, setInputValue]);
   const trimmedInput = inputValue.trim();
   const isFiltering = searchable && (isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase());
   const filteredOptions = React49.useMemo(() => {
@@ -13682,16 +13689,17 @@ function useSelectState(params) {
       inputRef.current?.blur();
     },
     [
-      isMulti,
       isOptionDisabled,
-      isValueSelected,
-      selectedOptions,
+      isMulti,
       onSelectionChange,
-      closeMenuOnSelect,
-      setIsOpen,
-      getValueLabel,
+      setInputValue,
+      searchable,
       isSearchInDropdown,
-      searchable
+      getValueLabel,
+      setIsOpen,
+      isValueSelected,
+      selectedOptions,
+      closeMenuOnSelect
     ]
   );
   const removeOption = React49.useCallback(
@@ -13713,7 +13721,7 @@ function useSelectState(params) {
       setInputValue("");
       inputRef.current?.focus();
     },
-    [isBlocked, onSelectionChange]
+    [isBlocked, onSelectionChange, setInputValue]
   );
   const createOption = React49.useCallback(() => {
     if (!canCreateNewOption) return;
@@ -13743,7 +13751,8 @@ function useSelectState(params) {
     setIsOpen,
     getValueLabel,
     isSearchInDropdown,
-    searchable
+    searchable,
+    setInputValue
   ]);
   const handleInputChange = React49.useCallback(
     (event) => {
@@ -13784,7 +13793,7 @@ function useSelectState(params) {
       if (searchable && !isSearchOnlyInput) setInputValue(valueLabel);
       onBlur?.(event);
     },
-    [containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur]
+    [containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur, setInputValue]
   );
   const handleInputKeyDown = React49.useCallback(
     (event) => {
@@ -13859,17 +13868,14 @@ function useSelectState(params) {
       canCreateNewOption,
       createOption,
       valueLabel,
-      searchable
+      searchable,
+      setInputValue
     ]
   );
   const isEmpty = !hasValue && !inputValue;
   React49.useDebugValue({ isOpen, isMulti, highlightedIndex, selectedOptions });
   return {
-    // ids
     ids,
-    listboxId,
-    getOptionId: getOptionId2,
-    // refs
     containerRef,
     inputRef,
     mobileSearchInputRef,
@@ -13877,26 +13883,16 @@ function useSelectState(params) {
     registerOptionRef: (index, node) => {
       optionRefs.current[index] = node;
     },
-    // menu
     isOpen,
-    openMenu,
     closeMenu,
-    setIsOpen,
-    // input
     inputValue,
-    setInputValue,
     trimmedInput,
     valueLabel,
-    // options
     filteredOptions,
-    isFiltering,
-    // highlight
     highlightedIndex,
     setHighlightedIndex,
-    // focus
     isFocused,
     setIsFocused,
-    // flags
     isBlocked,
     hasValue,
     isEmpty,
@@ -13905,14 +13901,10 @@ function useSelectState(params) {
     isMobile: isMobile3,
     inMenuSearchVisible,
     canCreateNewOption,
-    // selection helpers
-    isValueSelected,
-    // actions
     selectOption,
     removeOption,
     clearSelection,
     createOption,
-    // handlers
     handleInputChange,
     handleInputFocus,
     handleTriggerFocus,
@@ -14106,9 +14098,17 @@ function StaticControl(props) {
       {
         type: "button",
         onClick: onClear,
-        className: "absolute right-9 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
+        className: "absolute right-9 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[var(--chekin-neutral-500)] hover:shadow-[0_3px_3px_#0f477734]",
         "aria-label": clearLabel,
-        children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_lucide_react47.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+          import_lucide_react47.SquareX,
+          {
+            size: 15,
+            fill: "var(--chekin-neutral-500)",
+            color: "#f8f8f8",
+            strokeWidth: 1.8
+          }
+        )
       }
     )
   ] });
@@ -14445,8 +14445,8 @@ function SelectInternal(props, ref) {
           {
             isFocused: state.isFocused || state.isOpen,
             invalid: hasInvalidState,
-            isEmpty: state.isEmpty && !state.inputValue,
-            isActivated: !state.isEmpty || state.isFocused || state.isOpen || Boolean(state.inputValue),
+            isEmpty: state.isEmpty,
+            isActivated: !state.isEmpty || state.isFocused || state.isOpen,
             disabled,
             loading,
             readOnly,
@@ -14481,7 +14481,7 @@ function SelectInternal(props, ref) {
                   placeholder: t("search_placeholder"),
                   listboxId: state.ids.listboxId,
                   activeOptionId: state.highlightedIndex >= 0 ? state.ids.getOptionId(state.highlightedIndex) : void 0,
-                  onChange: (event) => state.setInputValue(event.target.value),
+                  onChange: state.handleInputChange,
                   onKeyDown: state.handleInputKeyDown
                 }
               ),
@@ -15699,7 +15699,7 @@ var Textarea = React61.forwardRef(function Textarea2({
             onBlur: handleBlur,
             className: cn(
               "m-0 box-border block w-full resize-none rounded-[6px] border bg-white px-4 py-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100 ease-in-out",
-              "border-[var(--field-border)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
+              "border-[var(--field-border)] placeholder:text-[length:var(--field-placeholder-font-size)] placeholder:font-[var(--field-placeholder-font-weight)] placeholder:text-[var(--chekin-color-gray-1)]",
               !isBlocked && "focus:border-[var(--field-border-focused)]",
               isEmpty && "border-[var(--field-border)] bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]",
               isInvalid && "border-[var(--field-border-invalid)] focus:border-[var(--field-border-invalid)]",
@@ -16724,7 +16724,7 @@ var Datepicker = React63.forwardRef(
       }
     );
     const subInputClass = cn(
-      "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
+      "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[length:var(--field-placeholder-font-size)] placeholder:font-[var(--field-placeholder-font-weight)] placeholder:text-[var(--chekin-color-gray-1)]",
       isBlocked && "cursor-not-allowed",
       loading && "cursor-progress"
     );
@@ -16781,7 +16781,7 @@ var Datepicker = React63.forwardRef(
                   "relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "flex h-full min-w-0 items-center px-2", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
                     "input",
                     {
                       ref: dayInputRef,
@@ -16851,7 +16851,7 @@ var Datepicker = React63.forwardRef(
                         },
                         onKeyDown: handleMonthInputKeyDown,
                         className: cn(
-                          "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 outline-none placeholder:text-[var(--chekin-color-gray-1)]",
+                          "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 outline-none placeholder:text-[length:var(--field-placeholder-font-size)] placeholder:font-[var(--field-placeholder-font-weight)] placeholder:text-[var(--chekin-color-gray-1)]",
                           monthIndex !== null ? "text-[var(--chekin-color-brand-navy)]" : "text-[var(--chekin-color-gray-1)]",
                           (isBlocked || readOnly) && "cursor-not-allowed"
                         )
@@ -16874,7 +16874,7 @@ var Datepicker = React63.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "flex h-full min-w-0 items-center px-2", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
                     "input",
                     {
                       ref: yearInputRef,
@@ -17306,8 +17306,8 @@ function resolveRangeSelection({
 var import_lucide_react51 = require("lucide-react");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 var DEFAULT_PLACEHOLDER = "00-00-0000";
-var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
-var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
+var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[length:var(--field-placeholder-font-size)] placeholder:font-[var(--field-placeholder-font-weight)] placeholder:text-[var(--chekin-color-gray-1)]";
+var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[var(--chekin-neutral-500)] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
 function DateRangeInputs({
   fromId,
   toId,
@@ -17425,7 +17425,15 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
+                import_lucide_react51.SquareX,
+                {
+                  size: 16,
+                  fill: "var(--chekin-neutral-500)",
+                  color: "#f8f8f8",
+                  strokeWidth: 1.8
+                }
+              )
             }
           ),
           !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
@@ -18114,7 +18122,7 @@ var FileInput = React70.forwardRef(function FileInput2({
                   hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
                     "div",
                     {
-                      className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
+                      className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[var(--chekin-neutral-400)] bg-[var(--chekin-neutral-75)] pl-[10px] pr-1",
                       onClick: (event) => event.preventDefault(),
                       children: [
                         isUrl ? /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
@@ -18135,9 +18143,17 @@ var FileInput = React70.forwardRef(function FileInput2({
                             type: "button",
                             disabled: isBlocked || readOnly,
                             onClick: handleClear,
-                            className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
+                            className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[var(--chekin-neutral-500)] outline-none hover:shadow-[0_3px_3px_#0f477734]",
                             "aria-label": t("remove_file"),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react52.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+                              import_lucide_react52.SquareX,
+                              {
+                                size: 15,
+                                fill: "var(--chekin-neutral-500)",
+                                color: "#f8f8f8",
+                                strokeWidth: 1.8
+                              }
+                            )
                           }
                         )
                       ]
@@ -18192,7 +18208,7 @@ var SelectIconsBox = React71.forwardRef(
     renderIcon,
     onSelect,
     columns = 4,
-    iconsColor = "#6B6B95",
+    iconsColor = "var(--chekin-neutral-600)",
     isOpen: controlledOpen,
     defaultOpen = false,
     onOpenChange,
@@ -18258,7 +18274,7 @@ var SelectIconsBox = React71.forwardRef(
                   type: "button",
                   "data-icon-box-item": true,
                   onClick: () => handlePick(iconName),
-                  className: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 outline-none hover:bg-[#f4f6f8]",
+                  className: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 outline-none hover:bg-[var(--chekin-neutral-50)]",
                   "aria-label": iconName,
                   children: renderIcon(iconName, iconsColor)
                 },
@@ -18371,9 +18387,9 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
           name,
           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]",
+            "peer box-border min-h-[120px] w-full resize-none rounded-lg border border-[var(--chekin-neutral-300)] bg-[var(--chekin-neutral-50)] px-4 py-3 text-[var(--chekin-blue-900)] outline-none [scrollbar-color:#777e91_transparent] [scrollbar-gutter:stable] placeholder:text-[var(--chekin-neutral-600)] placeholder:opacity-100 focus:border-[var(--chekin-blue-500)] focus:bg-white focus:transition-colors focus:duration-100 focus:ease-in-out [&:not(:placeholder-shown)]:bg-white",
+            invalid && "border-[var(--chekin-red-500)] focus:border-[var(--chekin-red-500)]",
+            disabled && "cursor-not-allowed resize-none border-[var(--chekin-neutral-500)] bg-[var(--chekin-neutral-50)] text-[var(--chekin-neutral-500)] placeholder:text-[var(--chekin-neutral-500)]",
             textareaClassName
           ),
           ...textareaProps
@@ -18384,9 +18400,9 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
         {
           htmlFor: inputId,
           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]"
+            "pointer-events-none absolute left-3 top-4 px-1 text-[var(--chekin-neutral-600)] 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-[var(--chekin-blue-500)] 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-[var(--chekin-red-500)] peer-focus:text-[var(--chekin-red-500)]",
+            disabled && "text-[var(--chekin-neutral-500)]"
           ),
           children: label
         }
@@ -18475,9 +18491,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
     ] }) : void 0;
     const sharedClasses = cn(
       "relative flex w-full items-center border bg-transparent text-left transition-colors focus-visible:outline-none",
-      "rounded-[12px] border-[#8c8c8c] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[#222222] focus-visible:ring-offset-2",
+      "rounded-[12px] border-[var(--chekin-airbnb-gray-muted)] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[var(--chekin-airbnb-ink-strong)] focus-visible:ring-offset-2",
       isRaised ? "min-h-[60px]" : "h-[60px]",
-      hasInvalidState ? "border-[var(--error-message-color)] bg-[#FFF5F3]" : "border-[#8c8c8c]",
+      hasInvalidState ? "border-[var(--error-message-color)] bg-[var(--chekin-airbnb-pink-surface-soft)]" : "border-[var(--chekin-airbnb-gray-muted)]",
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
       className
     );
@@ -18499,7 +18515,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
                   "absolute left-0 origin-left transition-all duration-200 ease-out",
                   hasLabelMeta ? "max-w-full" : "pointer-events-none truncate",
                   isRaised ? "top-[-1px] translate-y-0 text-xs leading-5" : "top-1/2 -translate-y-1/2 text-[16px] leading-7",
-                  hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#6c6c6c]"
+                  hasInvalidState ? "text-[var(--error-message-color)]" : "text-[var(--chekin-airbnb-gray-text)]"
                 ),
                 children: animatedLabel
               }
@@ -18511,7 +18527,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
                 className: cn(
                   "absolute left-0 block truncate transition-all duration-200 ease-out",
                   "bottom-0 translate-y-0 text-[16px] leading-6 opacity-100",
-                  hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#222222]"
+                  hasInvalidState ? "text-[var(--error-message-color)]" : "text-[var(--chekin-airbnb-ink-strong)]"
                 ),
                 children: valueText
               }
@@ -18529,7 +18545,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
       )
     ] });
     return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "w-full", children: [
-      topLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
+      topLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[var(--chekin-airbnb-ink-strong)]", children: topLabel }),
       as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
         "button",
         {
@@ -18722,7 +18738,13 @@ var AirbnbDatePicker = React73.forwardRef(
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_lucide_react54.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+            import_lucide_react54.Calendar,
+            {
+              className: "h-5 w-5 text-[var(--chekin-airbnb-ink)]",
+              strokeWidth: 2
+            }
+          )
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
@@ -18876,7 +18898,7 @@ var AirbnbInput = React74.forwardRef(
         tooltip,
         describedBy: error && renderErrorMessage ? errorId : void 0,
         className: cn(
-          "px-4 focus-within:ring-2 focus-within:ring-[#1F1F1B] focus-within:ring-offset-2",
+          "px-4 focus-within:ring-2 focus-within:ring-[var(--chekin-airbnb-ink)] focus-within:ring-offset-2",
           disabled ? "cursor-not-allowed" : "cursor-text",
           fieldClassName
         ),
@@ -18906,7 +18928,7 @@ var AirbnbInput = React74.forwardRef(
               "aria-label": accessibleLabel && hasLabelMeta ? accessibleLabel : void 0,
               "aria-labelledby": accessibleLabel && !hasLabelMeta ? labelId : void 0,
               className: cn(
-                "absolute left-0 h-6 w-full border-0 bg-transparent p-0 text-[16px] leading-6 text-[#1F1F1B] outline-none placeholder:text-[#7A8399]",
+                "absolute left-0 h-6 w-full border-0 bg-transparent p-0 text-[16px] leading-6 text-[var(--chekin-airbnb-ink)] outline-none placeholder:text-[var(--chekin-airbnb-gray-cool)]",
                 "bottom-0",
                 hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
                 disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
@@ -18922,14 +18944,16 @@ var AirbnbInput = React74.forwardRef(
               type: "button",
               onClick: togglePasswordReveal,
               disabled: isBlocked,
-              className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
+              className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[var(--chekin-airbnb-gray-cool)] hover:text-[var(--chekin-airbnb-ink)] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
               "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
               children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
                 import_lucide_react55.Eye,
                 {
                   size: 18,
                   "aria-hidden": "true",
-                  className: cn(isPasswordRevealed ? "text-[#fc98dd]" : "")
+                  className: cn(
+                    isPasswordRevealed ? "text-[var(--chekin-airbnb-pink)]" : ""
+                  )
                 }
               )
             }
@@ -18981,7 +19005,7 @@ function AirbnbSelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : null,
         options.map((option, index) => {
           const isSelected = selectedValue?.value === option.value;
           const isHighlighted = index === highlightedIndex;
@@ -19002,9 +19026,9 @@ function AirbnbSelectDesktopMenu({
               onClick: () => onOptionClick(option),
               onMouseMove: () => onOptionHover?.(index),
               className: cn(
-                "w-full rounded-2xl px-4 py-3 text-left text-base leading-6 text-[#3F3F46] transition-colors",
-                isHighlighted && "bg-[#F7F6F4]",
-                isSelected && "bg-[#F7F6F4] font-medium text-[#171717]",
+                "w-full rounded-2xl px-4 py-3 text-left text-base leading-6 text-[var(--chekin-airbnb-zinc)] transition-colors",
+                isHighlighted && "bg-[var(--chekin-airbnb-surface)]",
+                isSelected && "bg-[var(--chekin-airbnb-surface)] font-medium text-[var(--chekin-airbnb-ink-black)]",
                 (disabled || option.isDisabled) && "cursor-not-allowed opacity-40"
               ),
               children: String(option.label)
@@ -19043,7 +19067,7 @@ function AirbnbSelectDesktopContent({
     "div",
     {
       className: cn(
-        "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
+        "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[var(--chekin-airbnb-border)] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
         dropdownClassName
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
@@ -19175,7 +19199,7 @@ function AirbnbSelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
         /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
         /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
@@ -19349,7 +19373,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
           import_lucide_react56.ChevronDown,
           {
-            className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
+            className: open ? "h-6 w-6 rotate-180 text-[var(--chekin-airbnb-ink)] transition-transform" : "h-6 w-6 text-[var(--chekin-airbnb-ink)] transition-transform"
           }
         )
       }
@@ -20074,7 +20098,7 @@ var AirbnbPhoneField = React80.forwardRef(
         "label",
         {
           htmlFor: inputId,
-          className: "mb-3 block text-[16px] font-medium leading-5 text-[#1F1F1B]",
+          className: "mb-3 block text-[16px] font-medium leading-5 text-[var(--chekin-airbnb-ink)]",
           children: topLabel
         }
       ),
@@ -20124,8 +20148,8 @@ var AirbnbPhoneField = React80.forwardRef(
                 onClick,
                 onKeyDown,
                 className: cn(
-                  "flex h-full min-h-[60px] w-full items-center justify-center gap-2 rounded-l-[16px] rounded-r-none border border-r-0 px-4 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2",
-                  hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]",
+                  "flex h-full min-h-[60px] w-full items-center justify-center gap-2 rounded-l-[16px] rounded-r-none border border-r-0 px-4 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chekin-airbnb-ink)] focus-visible:ring-offset-2",
+                  hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : "border-[var(--chekin-airbnb-gray-muted)] bg-[var(--chekin-airbnb-surface-alt)] text-[var(--chekin-airbnb-ink)]",
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
@@ -20418,7 +20442,7 @@ var AirbnbSearchableSelectInternal = ({
           import_lucide_react58.ChevronDown,
           {
             className: cn(
-              "h-6 w-6 text-[#1F1F1B] transition-transform",
+              "h-6 w-6 text-[var(--chekin-airbnb-ink)] transition-transform",
               open && "rotate-180"
             )
           }
@@ -20447,7 +20471,7 @@ var AirbnbSearchableSelectInternal = ({
       "div",
       {
         className: cn(
-          "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
+          "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[var(--chekin-airbnb-border)] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
           dropdownClassName
         ),
         children: content
@@ -20516,7 +20540,7 @@ function AirbnbSearchableSelectContent({
         import_lucide_react58.Search,
         {
           "aria-hidden": "true",
-          className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
+          className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--chekin-neutral-500)]"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
@@ -20534,11 +20558,11 @@ function AirbnbSearchableSelectContent({
           placeholder: searchPlaceholder,
           onChange: (event) => onSearchChange(event.target.value),
           onKeyDown: onSearchKeyDown,
-          className: "h-11 w-full rounded-xl border border-[#DEDAD2] bg-white pl-12 pr-4 text-base text-[#1F1F1B] outline-none placeholder:text-[#9696B9] focus:border-[#1F1F1B]"
+          className: "h-11 w-full rounded-xl border border-[var(--chekin-airbnb-border)] bg-white pl-12 pr-4 text-base text-[var(--chekin-airbnb-ink)] outline-none placeholder:text-[var(--chekin-neutral-500)] focus:border-[var(--chekin-airbnb-ink)]"
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
       "div",
       {
         id: listboxId,
@@ -20558,7 +20582,7 @@ function AirbnbSearchableSelectContent({
                 return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
                   "div",
                   {
-                    className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
+                    className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]",
                     style: {
                       height: `${virtualItem.size}px`,
                       transform: `translateY(${virtualItem.start}px)`
@@ -20583,9 +20607,9 @@ function AirbnbSearchableSelectContent({
                   onClick: () => onOptionClick(option),
                   onMouseMove: () => onOptionHover(virtualItem.index),
                   className: cn(
-                    "absolute left-0 top-0 flex w-full items-center justify-center rounded-2xl px-4 text-center text-base leading-6 text-[#3F3F46] transition-colors",
-                    isHighlighted && "bg-[#F7F6F4]",
-                    isSelected && "bg-[#F7F6F4] font-medium text-[#171717]",
+                    "absolute left-0 top-0 flex w-full items-center justify-center rounded-2xl px-4 text-center text-base leading-6 text-[var(--chekin-airbnb-zinc)] transition-colors",
+                    isHighlighted && "bg-[var(--chekin-airbnb-surface)]",
+                    isSelected && "bg-[var(--chekin-airbnb-surface)] font-medium text-[var(--chekin-airbnb-ink-black)]",
                     option.isDisabled && "cursor-not-allowed opacity-40"
                   ),
                   style: {
@@ -20629,7 +20653,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
   const { t } = (0, import_react_i18next44.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]" }),
     /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
       "input",
       {
@@ -20644,7 +20668,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
         onBlur: props.onBlur,
         placeholder: placeholderText,
         className: cn(
-          "placeholder-shown:bg-accent flex h-10 w-full rounded-md border border-input bg-background py-3 pl-12 pr-4 text-base text-[#2d3748] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-base placeholder:font-medium placeholder:text-[#9696B9] focus:border-gray-300 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "placeholder-shown:bg-accent flex h-10 w-full rounded-md border border-input bg-background py-3 pl-12 pr-4 text-base text-[#2d3748] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-base placeholder:font-medium placeholder:text-[var(--chekin-neutral-500)] focus:border-gray-300 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           props.className
         )
       }
@@ -20654,7 +20678,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
       {
         variant: "ghost",
         onClick: onReset,
-        className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
+        className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]",
         children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
       }
     )
@@ -20692,7 +20716,7 @@ var AirbnbSwitch = React83.forwardRef(
           "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",
           "aria-readonly:cursor-default aria-readonly:opacity-100",
-          "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
+          "data-[state=checked]:bg-[var(--chekin-airbnb-ink-strong)] data-[state=unchecked]:bg-[var(--chekin-airbnb-border-soft)]",
           className
         ),
         id: fieldId,
@@ -20714,7 +20738,7 @@ var AirbnbSwitch = React83.forwardRef(
               import_lucide_react60.Check,
               {
                 "aria-hidden": "true",
-                className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
+                className: "h-3 w-3 text-[var(--chekin-airbnb-ink-strong)] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
                 strokeWidth: 3
               }
             )