@chekinapp/ui 0.0.145 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +236 -212
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +3 -3
  4. package/dist/index.d.ts +3 -3
  5. package/dist/index.js +236 -212
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/global.css +53 -54
package/dist/index.cjs CHANGED
@@ -872,11 +872,11 @@ var bookmarkTabsListVariants = (0, import_class_variance_authority3.cva)(
872
872
  variant: {
873
873
  default: [
874
874
  "relative h-auto w-full gap-1 bg-transparent p-0",
875
- "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[#e5e6ee]"
875
+ "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[var(--chekin-border-default)]"
876
876
  ],
877
877
  material: [
878
878
  "relative h-auto w-full gap-1 bg-transparent p-0",
879
- "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[#e5e6ee]"
879
+ "before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[var(--chekin-border-default)]"
880
880
  ]
881
881
  }
882
882
  },
@@ -895,7 +895,7 @@ var bookmarkTabsTriggerVariants = (0, import_class_variance_authority3.cva)(
895
895
  variants: {
896
896
  variant: {
897
897
  default: [
898
- "overflow-hidden rounded-lg rounded-b-none border-x border-t border-[#e5e6ee]",
898
+ "overflow-hidden rounded-lg rounded-b-none border-x border-t border-[var(--chekin-border-default)]",
899
899
  "bg-[var(--chekin-color-surface-input-empty)] px-4 py-2 text-base font-semibold text-[var(--chekin-color-gray-1)]",
900
900
  "data-[state=active]:z-10 data-[state=active]:cursor-default data-[state=active]:bg-[var(--chekin-color-white)]",
901
901
  "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)(
2434
2434
  primary: "bg-[var(--chekin-color-brand-blue)] text-[var(--chekin-color-white)] hover:brightness-95",
2435
2435
  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)]",
2436
2436
  ghost: "bg-transparent text-[var(--chekin-color-gray-1)] hover:bg-[var(--chekin-color-surface-input-empty)]",
2437
- destructive: "border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-white)] text-[var(--error-message-color)] hover:bg-[#FFE8EF]"
2437
+ destructive: "border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-white)] text-[var(--error-message-color)] hover:bg-[var(--chekin-red-150)]"
2438
2438
  }
2439
2439
  },
2440
2440
  defaultVariants: { size: "m", shape: "rounded", variant: "secondary" }
@@ -2462,7 +2462,7 @@ var IconButton = React12.forwardRef(
2462
2462
  "aria-label": props["aria-label"] ?? label,
2463
2463
  className: cn(
2464
2464
  iconButtonVariants({ size, shape, variant }),
2465
- outlined && "h-[30px] w-[30px] rounded-sm border border-[#e5e6ee] bg-[var(--chekin-color-white)]",
2465
+ outlined && "h-[30px] w-[30px] rounded-sm border border-[var(--chekin-border-default)] bg-[var(--chekin-color-white)]",
2466
2466
  className
2467
2467
  ),
2468
2468
  ...props,
@@ -4371,7 +4371,7 @@ function DropdownMenuItemContent({
4371
4371
  label,
4372
4372
  description
4373
4373
  }) {
4374
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-3 text-[var(--chekin-color-brand-navy)] [&_svg]:text-[#acacd5]", children: [
4374
+ 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: [
4375
4375
  icon,
4376
4376
  /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
4377
4377
  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: label }),
@@ -4876,11 +4876,11 @@ var statusStyles = {
4876
4876
  color: "text-[var(--chekin-color-brand-blue)]"
4877
4877
  },
4878
4878
  [HALO_ICON_STATUS.success]: {
4879
- background: "bg-[#e8fcf7]",
4880
- color: "text-[#2bc29f]"
4879
+ background: "bg-[var(--chekin-green-50)]",
4880
+ color: "text-[var(--chekin-green-600)]"
4881
4881
  },
4882
4882
  [HALO_ICON_STATUS.danger]: {
4883
- background: "bg-[#ffe2ed]",
4883
+ background: "bg-[var(--chekin-red-100)]",
4884
4884
  color: "text-[var(--error-message-color)]"
4885
4885
  }
4886
4886
  };
@@ -5217,9 +5217,9 @@ var framedIconVariants = (0, import_class_variance_authority11.cva)("inline-flex
5217
5217
  tone: {
5218
5218
  neutral: "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
5219
5219
  info: "bg-[var(--chekin-color-surface-pressed)] text-[var(--chekin-color-brand-blue)]",
5220
- success: "bg-[#E8FCF7] text-[#0F9F80]",
5221
- warn: "bg-[#FFF4E5] text-[#B86A00]",
5222
- error: "bg-[#FFE8EF] text-[var(--error-message-color)]"
5220
+ success: "bg-[var(--chekin-green-50)] text-[var(--chekin-green-700)]",
5221
+ warn: "bg-[var(--chekin-amber-200)] text-[var(--chekin-amber-700)]",
5222
+ error: "bg-[var(--chekin-red-150)] text-[var(--error-message-color)]"
5223
5223
  }
5224
5224
  },
5225
5225
  defaultVariants: { size: "m", shape: "rounded", tone: "info" }
@@ -6302,7 +6302,7 @@ function LargeModal({
6302
6302
  }
6303
6303
  },
6304
6304
  children: [
6305
- /* @__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: [
6305
+ /* @__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: [
6306
6306
  /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
6307
6307
  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DialogTitle, { className: "text-lg font-semibold text-[var(--chekin-color-brand-navy)]", children: header }),
6308
6308
  subHeader && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { children: subHeader })
@@ -6358,7 +6358,7 @@ var LinkInternal = (0, import_react53.forwardRef)(
6358
6358
  className: cn(
6359
6359
  "inline cursor-pointer text-[var(--button-link-text)] no-underline transition-all duration-75 ease-in-out",
6360
6360
  !disabled && "hover:opacity-80 active:opacity-100",
6361
- disabled && "cursor-not-allowed text-[#ACACD5]",
6361
+ disabled && "cursor-not-allowed text-[var(--chekin-neutral-400)]",
6362
6362
  "[&_img]:inline [&_img]:align-middle [&_svg]:relative [&_svg]:bottom-[1px] [&_svg]:ml-1 [&_svg]:inline [&_svg]:align-middle",
6363
6363
  className
6364
6364
  ),
@@ -6529,7 +6529,7 @@ function Modal({
6529
6529
  onClick: handleClose,
6530
6530
  className: cn(
6531
6531
  "modal__close",
6532
- "absolute right-4 top-4 z-10 rounded-full p-1 text-[var(--chekin-color-brand-blue)] hover:bg-[#f4f6f8]"
6532
+ "absolute right-4 top-4 z-10 rounded-full p-1 text-[var(--chekin-color-brand-blue)] hover:bg-[var(--chekin-neutral-50)]"
6533
6533
  ),
6534
6534
  "aria-label": "Close",
6535
6535
  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"
6807
6807
  {
6808
6808
  ref,
6809
6809
  className: cn(
6810
- "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",
6810
+ "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",
6811
6811
  "focus:border-[var(--chekin-color-brand-blue)] focus:shadow-[var(--chekin-shadow-focus)]",
6812
6812
  "data-[placeholder]:text-[var(--chekin-color-gray-1)]",
6813
6813
  "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0",
@@ -6854,7 +6854,7 @@ var LegacySelectContent = React23.forwardRef(({ className, children, position =
6854
6854
  {
6855
6855
  ref,
6856
6856
  className: cn(
6857
- "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",
6857
+ "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",
6858
6858
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
6859
6859
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
6860
6860
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -6901,8 +6901,8 @@ var LegacySelectItem = React23.forwardRef(({ className, children, size = "sm", .
6901
6901
  ref,
6902
6902
  className: cn(
6903
6903
  "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pe-2 ps-8 outline-none",
6904
- "focus:bg-[#f9fafb] focus:text-[var(--chekin-color-brand-navy)]",
6905
- "data-[highlighted]:bg-[#f9fafb] data-[highlighted]:text-[var(--chekin-color-brand-navy)]",
6904
+ "focus:bg-[var(--chekin-gray-50)] focus:text-[var(--chekin-color-brand-navy)]",
6905
+ "data-[highlighted]:bg-[var(--chekin-gray-50)] data-[highlighted]:text-[var(--chekin-color-brand-navy)]",
6906
6906
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
6907
6907
  selectSizeClassNames[size],
6908
6908
  className
@@ -6919,7 +6919,7 @@ var LegacySelectSeparator = React23.forwardRef(({ className, ...props }, ref) =>
6919
6919
  SelectPrimitive.Separator,
6920
6920
  {
6921
6921
  ref,
6922
- className: cn("-mx-1 my-1 h-px bg-[#f3f4f6]", className),
6922
+ className: cn("-mx-1 my-1 h-px bg-[var(--chekin-gray-100)]", className),
6923
6923
  ...props
6924
6924
  }
6925
6925
  ));
@@ -7058,8 +7058,8 @@ var LegacyMultiSelectInner = ({
7058
7058
  handleSelect(stringValue);
7059
7059
  },
7060
7060
  className: cn(
7061
- "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",
7062
- selected && "bg-[#f9fafb]"
7061
+ "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",
7062
+ selected && "bg-[var(--chekin-gray-50)]"
7063
7063
  ),
7064
7064
  children: [
7065
7065
  /* @__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
7340
7340
  sideOffset,
7341
7341
  align,
7342
7342
  className: cn(
7343
- "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",
7343
+ "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",
7344
7344
  "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",
7345
7345
  "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",
7346
7346
  className
@@ -7372,7 +7372,7 @@ function PopoverWithTooltip({
7372
7372
  align: "center",
7373
7373
  sideOffset: 4,
7374
7374
  className: cn(
7375
- "z-50 w-72 rounded-lg border border-[#e5e7eb] bg-white p-4 shadow-lg outline-none",
7375
+ "z-50 w-72 rounded-lg border border-[var(--chekin-gray-200)] bg-white p-4 shadow-lg outline-none",
7376
7376
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
7377
7377
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
7378
7378
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -7659,13 +7659,13 @@ var RadioCardsGroup = (0, import_react64.forwardRef)(
7659
7659
  {
7660
7660
  className: cn(
7661
7661
  "radio-card",
7662
- "relative box-border flex min-h-[168px] w-[352px] items-start gap-4 rounded-lg border border-[#e5e6ee] bg-white p-4 pl-14",
7662
+ "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",
7663
7663
  !disabled && !loading && !readOnly && "cursor-pointer hover:border-[var(--brand-color,var(--chekin-color-brand-blue))]",
7664
7664
  isSelected && "border-2 border-[var(--brand-color,var(--chekin-color-brand-blue))] bg-[var(--chekin-color-surface-autocomplete)]",
7665
7665
  disabled && "cursor-not-allowed opacity-50",
7666
7666
  loading && "cursor-progress opacity-50",
7667
7667
  readOnly && "cursor-default",
7668
- error && "border-[#ff2467]",
7668
+ error && "border-[var(--chekin-red-500)]",
7669
7669
  cardClassName
7670
7670
  ),
7671
7671
  children: [
@@ -7697,7 +7697,7 @@ var RadioCardsGroup = (0, import_react64.forwardRef)(
7697
7697
  }
7698
7698
  }
7699
7699
  ),
7700
- error && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "mt-2 text-left text-sm text-[#ff2467]", children: error })
7700
+ error && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "mt-2 text-left text-sm text-[var(--chekin-red-500)]", children: error })
7701
7701
  ] });
7702
7702
  }
7703
7703
  );
@@ -7707,13 +7707,13 @@ var MemoizedRadioCardsGroup = (0, import_react64.memo)(RadioCardsGroup);
7707
7707
  var import_jsx_runtime88 = require("react/jsx-runtime");
7708
7708
  var getRatingColor = (score, maxScore) => {
7709
7709
  const percentage = score / maxScore * 100;
7710
- if (percentage === 0) return "#ff2765";
7711
- if (percentage <= 20) return "#ff673c";
7712
- if (percentage <= 40) return "#ffa514";
7713
- if (percentage <= 50) return "#ffc400";
7714
- if (percentage <= 60) return "#cdc326";
7715
- if (percentage <= 80) return "#78c366";
7716
- return "#2cc29e";
7710
+ if (percentage === 0) return "var(--chekin-rating-0)";
7711
+ if (percentage <= 20) return "var(--chekin-rating-1)";
7712
+ if (percentage <= 40) return "var(--chekin-rating-2)";
7713
+ if (percentage <= 50) return "var(--chekin-rating-3)";
7714
+ if (percentage <= 60) return "var(--chekin-rating-4)";
7715
+ if (percentage <= 80) return "var(--chekin-rating-5)";
7716
+ return "var(--chekin-rating-6)";
7717
7717
  };
7718
7718
  function RatingProgress({
7719
7719
  label,
@@ -7934,7 +7934,7 @@ function RatingStars({
7934
7934
  description,
7935
7935
  className,
7936
7936
  starClassName,
7937
- filledColor = "#ffb700",
7937
+ filledColor = "var(--chekin-amber-500)",
7938
7938
  emptyColor = "var(--chekin-color-gray-3)"
7939
7939
  }) {
7940
7940
  const { t } = (0, import_react_i18next13.useTranslation)();
@@ -8014,7 +8014,7 @@ function SearchButton({ onClick, className, icon, ariaLabel }) {
8014
8014
  {
8015
8015
  onClick,
8016
8016
  className: cn(
8017
- "p-1.5 text-[#9696b9] hover:text-[var(--chekin-color-brand-blue)]",
8017
+ "p-1.5 text-[var(--chekin-neutral-500)] hover:text-[var(--chekin-color-brand-blue)]",
8018
8018
  className
8019
8019
  ),
8020
8020
  "data-testid": "search-button",
@@ -8161,7 +8161,7 @@ var sectionTagVariants = (0, import_class_variance_authority12.cva)(
8161
8161
  {
8162
8162
  variants: {
8163
8163
  color: {
8164
- green: "bg-[#059669]",
8164
+ green: "bg-[var(--chekin-green-800)]",
8165
8165
  blue: "bg-[var(--chekin-color-brand-blue)]"
8166
8166
  }
8167
8167
  },
@@ -9148,7 +9148,7 @@ var import_react_i18next16 = require("react-i18next");
9148
9148
  var import_react_signature_canvas = __toESM(require("react-signature-canvas"), 1);
9149
9149
  var import_jsx_runtime107 = require("react/jsx-runtime");
9150
9150
  var SIGNATURE_PROPS = {
9151
- penColor: "#161643",
9151
+ penColor: "var(--chekin-blue-900)",
9152
9152
  minWidth: 1.5,
9153
9153
  maxWidth: 2,
9154
9154
  dotSize: 2,
@@ -10672,7 +10672,7 @@ function ThreeDotsLoader({
10672
10672
  "div",
10673
10673
  {
10674
10674
  className: cn(
10675
- "flex items-center justify-center gap-x-[13px] [&>div]:text-sm [&>div]:font-bold [&>div]:uppercase [&>div]:text-[#9696b9] [&>div]:opacity-50",
10675
+ "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",
10676
10676
  className
10677
10677
  ),
10678
10678
  role: "progressbar",
@@ -10703,15 +10703,15 @@ function UploadedFilesList({
10703
10703
  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)(
10704
10704
  "div",
10705
10705
  {
10706
- className: "flex cursor-default items-center gap-2 rounded border border-[#acacd5] bg-[#f0f0f8] py-1.5 pl-3 pr-1.5",
10706
+ 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",
10707
10707
  children: [
10708
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-[#161643]", children: file.name }),
10708
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-[var(--chekin-blue-900)]", children: file.name }),
10709
10709
  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
10710
10710
  "button",
10711
10711
  {
10712
10712
  type: "button",
10713
10713
  onClick: () => onRemoveFile(file.name),
10714
- 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",
10714
+ 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",
10715
10715
  "aria-label": `Remove ${file.name}`,
10716
10716
  children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_lucide_react37.X, { className: "h-3.5 w-3.5 text-white", strokeWidth: 3 })
10717
10717
  }
@@ -12221,12 +12221,12 @@ function ResponsiveDropdown({
12221
12221
  ] });
12222
12222
  }
12223
12223
 
12224
- // src/dashboard/input/Input.tsx
12224
+ // src/fields/input/Input.tsx
12225
12225
  var React44 = __toESM(require("react"), 1);
12226
12226
  var import_lucide_react41 = require("lucide-react");
12227
12227
  var import_react_i18next25 = require("react-i18next");
12228
12228
 
12229
- // src/dashboard/input/useInputValueState.ts
12229
+ // src/fields/input/useInputValueState.ts
12230
12230
  var React43 = __toESM(require("react"), 1);
12231
12231
  var isEmptyValue = (value) => {
12232
12232
  if (value === void 0 || value === null) return true;
@@ -12291,7 +12291,7 @@ function useInputValueState({
12291
12291
  };
12292
12292
  }
12293
12293
 
12294
- // src/dashboard/_fieldset/Fieldset.tsx
12294
+ // src/fields/_fieldset/Fieldset.tsx
12295
12295
  var import_jsx_runtime143 = require("react/jsx-runtime");
12296
12296
  function Fieldset({
12297
12297
  isActivated,
@@ -12320,7 +12320,7 @@ function Fieldset({
12320
12320
  className: cn(
12321
12321
  "absolute box-border inline-flex max-w-full cursor-text items-center pl-[3px] pr-5 transition-all duration-100 ease-in",
12322
12322
  "left-[13px] text-[var(--chekin-color-gray-1)]",
12323
- isEmpty && !isFocused ? "top-[12px]" : "top-[-10px] !px-1",
12323
+ isEmpty && !isFocused ? "top-[var(--field-label-top)]" : "top-[var(--field-label-raised-top)] !px-1",
12324
12324
  isFocused && "text-[var(--chekin-color-brand-blue)]",
12325
12325
  raised && invalid && "text-[var(--error-message-color)]",
12326
12326
  readOnly && "cursor-default",
@@ -12393,7 +12393,7 @@ function Fieldset({
12393
12393
  ] });
12394
12394
  }
12395
12395
 
12396
- // src/dashboard/input/Input.tsx
12396
+ // src/fields/input/Input.tsx
12397
12397
  var import_jsx_runtime144 = require("react/jsx-runtime");
12398
12398
  var Input = React44.forwardRef(
12399
12399
  ({
@@ -12571,7 +12571,7 @@ var Input = React44.forwardRef(
12571
12571
  className: cn(
12572
12572
  "input__control",
12573
12573
  "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",
12574
- "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
12574
+ "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",
12575
12575
  isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
12576
12576
  isEmpty && "text-[var(--chekin-color-gray-1)]",
12577
12577
  inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
@@ -12593,7 +12593,7 @@ var Input = React44.forwardRef(
12593
12593
  type: "button",
12594
12594
  onClick: onReset,
12595
12595
  disabled,
12596
- 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",
12596
+ 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",
12597
12597
  "aria-label": t("reset"),
12598
12598
  children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react41.X, { size: 14 })
12599
12599
  }
@@ -12611,7 +12611,7 @@ var Input = React44.forwardRef(
12611
12611
  size: 20,
12612
12612
  className: cn(
12613
12613
  "input__password-icon",
12614
- isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
12614
+ isPasswordRevealed ? "text-[var(--chekin-airbnb-pink)]" : "text-[var(--chekin-color-gray-2)]"
12615
12615
  )
12616
12616
  }
12617
12617
  )
@@ -12669,7 +12669,7 @@ var Input = React44.forwardRef(
12669
12669
  );
12670
12670
  Input.displayName = "Input";
12671
12671
 
12672
- // src/dashboard/copy-input/CopyInput.tsx
12672
+ // src/fields/copy-input/CopyInput.tsx
12673
12673
  var React45 = __toESM(require("react"), 1);
12674
12674
  var import_jsx_runtime145 = require("react/jsx-runtime");
12675
12675
  var CopyInput = React45.forwardRef(
@@ -12698,11 +12698,11 @@ var CopyInput = React45.forwardRef(
12698
12698
  );
12699
12699
  CopyInput.displayName = "CopyInput";
12700
12700
 
12701
- // src/dashboard/phone-input/PhoneInput.tsx
12701
+ // src/fields/phone-input/PhoneInput.tsx
12702
12702
  var React51 = __toESM(require("react"), 1);
12703
12703
  var import_react_i18next33 = require("react-i18next");
12704
12704
 
12705
- // src/dashboard/_select-internals/SelectFieldShell.tsx
12705
+ // src/fields/_select-internals/SelectFieldShell.tsx
12706
12706
  var import_react_i18next26 = require("react-i18next");
12707
12707
  var import_jsx_runtime146 = require("react/jsx-runtime");
12708
12708
  var FOCUSABLE_TRIGGER_SELECTOR = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
@@ -12776,11 +12776,11 @@ function SelectFieldShell({
12776
12776
  );
12777
12777
  }
12778
12778
 
12779
- // src/dashboard/_select-internals/SelectMenu.tsx
12779
+ // src/fields/_select-internals/SelectMenu.tsx
12780
12780
  var React46 = __toESM(require("react"), 1);
12781
12781
  var import_react_i18next27 = require("react-i18next");
12782
12782
 
12783
- // src/dashboard/_select-internals/utils.ts
12783
+ // src/fields/_select-internals/utils.ts
12784
12784
  function isOptionGroup(item) {
12785
12785
  if (!item || typeof item !== "object") return false;
12786
12786
  if ("value" in item) return false;
@@ -12870,7 +12870,7 @@ function countriesFilter(option, inputValue) {
12870
12870
  return false;
12871
12871
  }
12872
12872
 
12873
- // src/dashboard/_select-internals/slots/DefaultOption.tsx
12873
+ // src/fields/_select-internals/slots/DefaultOption.tsx
12874
12874
  var import_lucide_react42 = require("lucide-react");
12875
12875
  var import_jsx_runtime147 = require("react/jsx-runtime");
12876
12876
  function DefaultOption(props) {
@@ -12933,7 +12933,7 @@ function DefaultOption(props) {
12933
12933
  );
12934
12934
  }
12935
12935
 
12936
- // src/dashboard/_select-internals/SelectMenu.tsx
12936
+ // src/fields/_select-internals/SelectMenu.tsx
12937
12937
  var import_jsx_runtime148 = require("react/jsx-runtime");
12938
12938
  function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
12939
12939
  if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
@@ -13106,7 +13106,7 @@ function SelectMenu({
13106
13106
  );
13107
13107
  }
13108
13108
 
13109
- // src/dashboard/_select-internals/SelectMenuPanel.tsx
13109
+ // src/fields/_select-internals/SelectMenuPanel.tsx
13110
13110
  var import_react_i18next28 = require("react-i18next");
13111
13111
  var import_jsx_runtime149 = require("react/jsx-runtime");
13112
13112
  function SelectMenuPanel({
@@ -13170,7 +13170,7 @@ function SelectMenuPanel({
13170
13170
  );
13171
13171
  }
13172
13172
 
13173
- // src/dashboard/_select-internals/SelectSearchInput.tsx
13173
+ // src/fields/_select-internals/SelectSearchInput.tsx
13174
13174
  var import_lucide_react43 = require("lucide-react");
13175
13175
  var import_jsx_runtime150 = require("react/jsx-runtime");
13176
13176
  function SelectSearchInput({
@@ -13208,7 +13208,7 @@ function SelectSearchInput({
13208
13208
  ] }) });
13209
13209
  }
13210
13210
 
13211
- // src/dashboard/_select-internals/SelectTrigger.tsx
13211
+ // src/fields/_select-internals/SelectTrigger.tsx
13212
13212
  var import_lucide_react44 = require("lucide-react");
13213
13213
  var import_jsx_runtime151 = require("react/jsx-runtime");
13214
13214
  function SelectTrigger({
@@ -13282,7 +13282,7 @@ function SelectTrigger({
13282
13282
  );
13283
13283
  }
13284
13284
 
13285
- // src/dashboard/_select-internals/ComboboxTrigger.tsx
13285
+ // src/fields/_select-internals/ComboboxTrigger.tsx
13286
13286
  var import_lucide_react45 = require("lucide-react");
13287
13287
  var import_react_i18next29 = require("react-i18next");
13288
13288
  var import_jsx_runtime152 = require("react/jsx-runtime");
@@ -13354,13 +13354,13 @@ function ComboboxTrigger({
13354
13354
  ),
13355
13355
  children: [
13356
13356
  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 }) }),
13357
- !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" }) }) }),
13357
+ !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" }) }) }),
13358
13358
  /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
13359
13359
  "div",
13360
13360
  {
13361
13361
  className: cn(
13362
13362
  "flex min-w-0 flex-1 items-center gap-2 py-[10px]",
13363
- leftIcon || searchable && (isFocused || isOpen) ? "pl-10" : "pl-4",
13363
+ leftIcon || searchable && !isMulti && (isFocused || isOpen) ? "pl-10" : "pl-4",
13364
13364
  isMulti && "flex-wrap"
13365
13365
  ),
13366
13366
  children: [
@@ -13401,7 +13401,7 @@ function ComboboxTrigger({
13401
13401
  "aria-controls": listboxId,
13402
13402
  "aria-activedescendant": activeOptionId,
13403
13403
  className: cn(
13404
- "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)]",
13404
+ "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)]",
13405
13405
  isMulti ? "min-w-[40px]" : "text-ellipsis",
13406
13406
  readOnly && !disabled && !loading && "cursor-default",
13407
13407
  disabled && !loading && "cursor-not-allowed",
@@ -13422,9 +13422,17 @@ function ComboboxTrigger({
13422
13422
  {
13423
13423
  type: "button",
13424
13424
  onClick: onClear,
13425
- 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]",
13425
+ 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]",
13426
13426
  "aria-label": clearLabel,
13427
- children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react45.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
13427
+ children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
13428
+ import_lucide_react45.SquareX,
13429
+ {
13430
+ size: 15,
13431
+ fill: "var(--chekin-neutral-500)",
13432
+ color: "#f8f8f8",
13433
+ strokeWidth: 1.8
13434
+ }
13435
+ )
13428
13436
  }
13429
13437
  ),
13430
13438
  !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
@@ -13442,7 +13450,7 @@ function ComboboxTrigger({
13442
13450
  );
13443
13451
  }
13444
13452
 
13445
- // src/dashboard/_select-internals/useSelectIds.ts
13453
+ // src/fields/_select-internals/useSelectIds.ts
13446
13454
  var React47 = __toESM(require("react"), 1);
13447
13455
  function useSelectIds({
13448
13456
  name,
@@ -13477,7 +13485,7 @@ function useSelectIds({
13477
13485
  };
13478
13486
  }
13479
13487
 
13480
- // src/dashboard/_select-internals/useSelectMenuState.ts
13488
+ // src/fields/_select-internals/useSelectMenuState.ts
13481
13489
  var React48 = __toESM(require("react"), 1);
13482
13490
  function useSelectMenuState({
13483
13491
  isBlocked,
@@ -13526,7 +13534,7 @@ function useSelectMenuState({
13526
13534
  return { containerRef, isOpen, openMenu, closeMenu, toggleMenu, setIsOpen };
13527
13535
  }
13528
13536
 
13529
- // src/dashboard/_select-internals/useSelectState.ts
13537
+ // src/fields/_select-internals/useSelectState.ts
13530
13538
  var React49 = __toESM(require("react"), 1);
13531
13539
  function resolveValueLabel(option, getValueLabel) {
13532
13540
  if (!option) return "";
@@ -13576,11 +13584,11 @@ function useSelectState(params) {
13576
13584
  [singleSelected, getValueLabel]
13577
13585
  );
13578
13586
  const isSearchOnlyInput = searchable && (isMulti || Boolean(isSearchInDropdown));
13579
- const isInputControlled = controlledInputValue !== void 0;
13587
+ const isInputControlled = Boolean(controlledInputValue);
13580
13588
  const [internalInputValue, setInternalInputValue] = React49.useState(
13581
13589
  searchable && !isSearchOnlyInput ? valueLabel : ""
13582
13590
  );
13583
- const inputValue = isInputControlled ? controlledInputValue : internalInputValue;
13591
+ const inputValue = isInputControlled ? controlledInputValue ?? "" : internalInputValue;
13584
13592
  const setInputValue = React49.useCallback(
13585
13593
  (next) => {
13586
13594
  if (!isInputControlled) setInternalInputValue(next);
@@ -13591,7 +13599,7 @@ function useSelectState(params) {
13591
13599
  const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
13592
13600
  const hasInvalidState = Boolean(error);
13593
13601
  const errorMessage = typeof error === "string" ? error : void 0;
13594
- const { containerRef, isOpen, openMenu, closeMenu, setIsOpen } = useSelectMenuState({
13602
+ const { containerRef, isOpen, closeMenu, setIsOpen } = useSelectMenuState({
13595
13603
  isBlocked,
13596
13604
  isMobile: isMobile3,
13597
13605
  onOutsideClick: () => setIsFocused(false),
@@ -13599,19 +13607,18 @@ function useSelectState(params) {
13599
13607
  onMenuOpenChange
13600
13608
  });
13601
13609
  const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
13602
- const { listboxId, getOptionId: getOptionId2 } = ids;
13603
13610
  React49.useEffect(() => {
13604
13611
  if (!searchable) return;
13605
13612
  if (isSearchOnlyInput) return;
13606
13613
  if (!isFocused) setInputValue(valueLabel);
13607
- }, [valueLabel, isFocused, isSearchOnlyInput, searchable]);
13614
+ }, [valueLabel, isFocused, isSearchOnlyInput, searchable, setInputValue]);
13608
13615
  React49.useEffect(() => {
13609
13616
  if (!isSearchOnlyInput) return;
13610
13617
  if (!isOpen) {
13611
13618
  setInputValue("");
13612
13619
  setHighlightedIndex(-1);
13613
13620
  }
13614
- }, [isOpen, isSearchOnlyInput]);
13621
+ }, [isOpen, isSearchOnlyInput, setInputValue]);
13615
13622
  const trimmedInput = inputValue.trim();
13616
13623
  const isFiltering = searchable && (isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase());
13617
13624
  const filteredOptions = React49.useMemo(() => {
@@ -13682,16 +13689,17 @@ function useSelectState(params) {
13682
13689
  inputRef.current?.blur();
13683
13690
  },
13684
13691
  [
13685
- isMulti,
13686
13692
  isOptionDisabled,
13687
- isValueSelected,
13688
- selectedOptions,
13693
+ isMulti,
13689
13694
  onSelectionChange,
13690
- closeMenuOnSelect,
13691
- setIsOpen,
13692
- getValueLabel,
13695
+ setInputValue,
13696
+ searchable,
13693
13697
  isSearchInDropdown,
13694
- searchable
13698
+ getValueLabel,
13699
+ setIsOpen,
13700
+ isValueSelected,
13701
+ selectedOptions,
13702
+ closeMenuOnSelect
13695
13703
  ]
13696
13704
  );
13697
13705
  const removeOption = React49.useCallback(
@@ -13713,7 +13721,7 @@ function useSelectState(params) {
13713
13721
  setInputValue("");
13714
13722
  inputRef.current?.focus();
13715
13723
  },
13716
- [isBlocked, onSelectionChange]
13724
+ [isBlocked, onSelectionChange, setInputValue]
13717
13725
  );
13718
13726
  const createOption = React49.useCallback(() => {
13719
13727
  if (!canCreateNewOption) return;
@@ -13743,7 +13751,8 @@ function useSelectState(params) {
13743
13751
  setIsOpen,
13744
13752
  getValueLabel,
13745
13753
  isSearchInDropdown,
13746
- searchable
13754
+ searchable,
13755
+ setInputValue
13747
13756
  ]);
13748
13757
  const handleInputChange = React49.useCallback(
13749
13758
  (event) => {
@@ -13784,7 +13793,7 @@ function useSelectState(params) {
13784
13793
  if (searchable && !isSearchOnlyInput) setInputValue(valueLabel);
13785
13794
  onBlur?.(event);
13786
13795
  },
13787
- [containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur]
13796
+ [containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur, setInputValue]
13788
13797
  );
13789
13798
  const handleInputKeyDown = React49.useCallback(
13790
13799
  (event) => {
@@ -13859,17 +13868,14 @@ function useSelectState(params) {
13859
13868
  canCreateNewOption,
13860
13869
  createOption,
13861
13870
  valueLabel,
13862
- searchable
13871
+ searchable,
13872
+ setInputValue
13863
13873
  ]
13864
13874
  );
13865
13875
  const isEmpty = !hasValue && !inputValue;
13866
13876
  React49.useDebugValue({ isOpen, isMulti, highlightedIndex, selectedOptions });
13867
13877
  return {
13868
- // ids
13869
13878
  ids,
13870
- listboxId,
13871
- getOptionId: getOptionId2,
13872
- // refs
13873
13879
  containerRef,
13874
13880
  inputRef,
13875
13881
  mobileSearchInputRef,
@@ -13877,26 +13883,16 @@ function useSelectState(params) {
13877
13883
  registerOptionRef: (index, node) => {
13878
13884
  optionRefs.current[index] = node;
13879
13885
  },
13880
- // menu
13881
13886
  isOpen,
13882
- openMenu,
13883
13887
  closeMenu,
13884
- setIsOpen,
13885
- // input
13886
13888
  inputValue,
13887
- setInputValue,
13888
13889
  trimmedInput,
13889
13890
  valueLabel,
13890
- // options
13891
13891
  filteredOptions,
13892
- isFiltering,
13893
- // highlight
13894
13892
  highlightedIndex,
13895
13893
  setHighlightedIndex,
13896
- // focus
13897
13894
  isFocused,
13898
13895
  setIsFocused,
13899
- // flags
13900
13896
  isBlocked,
13901
13897
  hasValue,
13902
13898
  isEmpty,
@@ -13905,14 +13901,10 @@ function useSelectState(params) {
13905
13901
  isMobile: isMobile3,
13906
13902
  inMenuSearchVisible,
13907
13903
  canCreateNewOption,
13908
- // selection helpers
13909
- isValueSelected,
13910
- // actions
13911
13904
  selectOption,
13912
13905
  removeOption,
13913
13906
  clearSelection,
13914
13907
  createOption,
13915
- // handlers
13916
13908
  handleInputChange,
13917
13909
  handleInputFocus,
13918
13910
  handleTriggerFocus,
@@ -13922,7 +13914,7 @@ function useSelectState(params) {
13922
13914
  };
13923
13915
  }
13924
13916
 
13925
- // src/dashboard/_select-internals/slots/DefaultMultiValueChip.tsx
13917
+ // src/fields/_select-internals/slots/DefaultMultiValueChip.tsx
13926
13918
  var import_lucide_react46 = require("lucide-react");
13927
13919
  var import_react_i18next30 = require("react-i18next");
13928
13920
  var import_jsx_runtime153 = require("react/jsx-runtime");
@@ -13951,7 +13943,7 @@ function DefaultMultiValueChip({
13951
13943
  ] });
13952
13944
  }
13953
13945
 
13954
- // src/dashboard/_select-internals/slots/DefaultControl.tsx
13946
+ // src/fields/_select-internals/slots/DefaultControl.tsx
13955
13947
  var import_jsx_runtime154 = require("react/jsx-runtime");
13956
13948
  function DefaultControl(props) {
13957
13949
  const {
@@ -14044,7 +14036,7 @@ function DefaultControl(props) {
14044
14036
  );
14045
14037
  }
14046
14038
 
14047
- // src/dashboard/_select-internals/slots/StaticControl.tsx
14039
+ // src/fields/_select-internals/slots/StaticControl.tsx
14048
14040
  var import_lucide_react47 = require("lucide-react");
14049
14041
  var import_jsx_runtime155 = require("react/jsx-runtime");
14050
14042
  function StaticControl(props) {
@@ -14106,15 +14098,23 @@ function StaticControl(props) {
14106
14098
  {
14107
14099
  type: "button",
14108
14100
  onClick: onClear,
14109
- 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]",
14101
+ 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]",
14110
14102
  "aria-label": clearLabel,
14111
- children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_lucide_react47.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
14103
+ children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
14104
+ import_lucide_react47.SquareX,
14105
+ {
14106
+ size: 15,
14107
+ fill: "var(--chekin-neutral-500)",
14108
+ color: "#f8f8f8",
14109
+ strokeWidth: 1.8
14110
+ }
14111
+ )
14112
14112
  }
14113
14113
  )
14114
14114
  ] });
14115
14115
  }
14116
14116
 
14117
- // src/dashboard/_select-internals/slots/DefaultMenuList.tsx
14117
+ // src/fields/_select-internals/slots/DefaultMenuList.tsx
14118
14118
  var import_jsx_runtime156 = require("react/jsx-runtime");
14119
14119
  function DefaultMenuList(props) {
14120
14120
  const {
@@ -14177,7 +14177,7 @@ function DefaultMenuList(props) {
14177
14177
  );
14178
14178
  }
14179
14179
 
14180
- // src/dashboard/_select-internals/slots/DefaultCreateOption.tsx
14180
+ // src/fields/_select-internals/slots/DefaultCreateOption.tsx
14181
14181
  var import_react_i18next31 = require("react-i18next");
14182
14182
  var import_jsx_runtime157 = require("react/jsx-runtime");
14183
14183
  function DefaultCreateOption({
@@ -14197,7 +14197,7 @@ function DefaultCreateOption({
14197
14197
  );
14198
14198
  }
14199
14199
 
14200
- // src/dashboard/_select-internals/slots/mergeComponents.ts
14200
+ // src/fields/_select-internals/slots/mergeComponents.ts
14201
14201
  function defaultComponents() {
14202
14202
  return {
14203
14203
  Control: DefaultControl,
@@ -14219,11 +14219,11 @@ function mergeComponents(overrides) {
14219
14219
  };
14220
14220
  }
14221
14221
 
14222
- // src/dashboard/select/Select.tsx
14222
+ // src/fields/select/Select.tsx
14223
14223
  var React50 = __toESM(require("react"), 1);
14224
14224
  var import_react_i18next32 = require("react-i18next");
14225
14225
 
14226
- // src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
14226
+ // src/fields/select/useSetCorrectOptionIfThereIsOnlyValue.ts
14227
14227
  var import_react88 = require("react");
14228
14228
  function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabled = true }) {
14229
14229
  (0, import_react88.useEffect)(() => {
@@ -14238,7 +14238,7 @@ function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabl
14238
14238
  }, [enabled, onChange, options, value]);
14239
14239
  }
14240
14240
 
14241
- // src/dashboard/select/Select.tsx
14241
+ // src/fields/select/Select.tsx
14242
14242
  var import_jsx_runtime158 = require("react/jsx-runtime");
14243
14243
  function SelectInternal(props, ref) {
14244
14244
  const {
@@ -14445,8 +14445,8 @@ function SelectInternal(props, ref) {
14445
14445
  {
14446
14446
  isFocused: state.isFocused || state.isOpen,
14447
14447
  invalid: hasInvalidState,
14448
- isEmpty: state.isEmpty && !state.inputValue,
14449
- isActivated: !state.isEmpty || state.isFocused || state.isOpen || Boolean(state.inputValue),
14448
+ isEmpty: state.isEmpty,
14449
+ isActivated: !state.isEmpty || state.isFocused || state.isOpen,
14450
14450
  disabled,
14451
14451
  loading,
14452
14452
  readOnly,
@@ -14481,7 +14481,7 @@ function SelectInternal(props, ref) {
14481
14481
  placeholder: t("search_placeholder"),
14482
14482
  listboxId: state.ids.listboxId,
14483
14483
  activeOptionId: state.highlightedIndex >= 0 ? state.ids.getOptionId(state.highlightedIndex) : void 0,
14484
- onChange: (event) => state.setInputValue(event.target.value),
14484
+ onChange: state.handleInputChange,
14485
14485
  onKeyDown: state.handleInputKeyDown
14486
14486
  }
14487
14487
  ),
@@ -14531,7 +14531,7 @@ function SelectInternal(props, ref) {
14531
14531
  }
14532
14532
  var Select = React50.forwardRef(SelectInternal);
14533
14533
 
14534
- // src/dashboard/phone-input/utils.ts
14534
+ // src/fields/phone-input/utils.ts
14535
14535
  var PREFIX_REGEX = /^\+/;
14536
14536
  function isPhoneInputValue(value) {
14537
14537
  if (typeof value === "string" || typeof value === "number") {
@@ -14598,7 +14598,7 @@ function formatPhoneCodeOptionLabel(option) {
14598
14598
  return label.includes(value) ? label : `${label} ${value}`;
14599
14599
  }
14600
14600
 
14601
- // src/dashboard/phone-input/PhoneInput.tsx
14601
+ // src/fields/phone-input/PhoneInput.tsx
14602
14602
  var import_jsx_runtime159 = require("react/jsx-runtime");
14603
14603
  var PhoneInput = React51.forwardRef(
14604
14604
  function PhoneInput2({
@@ -14837,36 +14837,36 @@ var PhoneInput = React51.forwardRef(
14837
14837
  );
14838
14838
  PhoneInput.displayName = "PhoneInput";
14839
14839
 
14840
- // src/dashboard/creatable-select/CreatableSelect.tsx
14840
+ // src/fields/creatable-select/CreatableSelect.tsx
14841
14841
  var React52 = __toESM(require("react"), 1);
14842
14842
  var import_jsx_runtime160 = require("react/jsx-runtime");
14843
14843
  var CreatableSelect = React52.forwardRef(function CreatableSelect2(props, ref) {
14844
14844
  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Select, { ref, ...props, isCreatable: true });
14845
14845
  });
14846
14846
 
14847
- // src/dashboard/multi-select/MultiSelect.tsx
14847
+ // src/fields/multi-select/MultiSelect.tsx
14848
14848
  var React53 = __toESM(require("react"), 1);
14849
14849
  var import_jsx_runtime161 = require("react/jsx-runtime");
14850
14850
  var MultiSelect = React53.forwardRef(function MultiSelect2(props, ref) {
14851
14851
  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Select, { ref, ...props, isMulti: true });
14852
14852
  });
14853
14853
 
14854
- // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
14854
+ // src/fields/creatable-multi-select/CreatableMultiSelect.tsx
14855
14855
  var React54 = __toESM(require("react"), 1);
14856
14856
  var import_jsx_runtime162 = require("react/jsx-runtime");
14857
14857
  var CreatableMultiSelect = React54.forwardRef(function CreatableMultiSelect2(props, ref) {
14858
14858
  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Select, { ref, ...props, isMulti: true, isCreatable: true });
14859
14859
  });
14860
14860
 
14861
- // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
14861
+ // src/fields/infinite-scroll-select/InfiniteScrollSelect.tsx
14862
14862
  var React57 = __toESM(require("react"), 1);
14863
14863
 
14864
- // src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
14864
+ // src/fields/infinite-scroll-select/VirtualMenuList.tsx
14865
14865
  var React56 = __toESM(require("react"), 1);
14866
14866
  var import_react_i18next34 = require("react-i18next");
14867
14867
  var import_react_virtual2 = require("@tanstack/react-virtual");
14868
14868
 
14869
- // src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
14869
+ // src/fields/infinite-scroll-select/InfiniteScrollContext.tsx
14870
14870
  var React55 = __toESM(require("react"), 1);
14871
14871
  var InfiniteScrollContext = React55.createContext(
14872
14872
  null
@@ -14881,7 +14881,7 @@ function useInfiniteScrollContext() {
14881
14881
  return ctx;
14882
14882
  }
14883
14883
 
14884
- // src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
14884
+ // src/fields/infinite-scroll-select/VirtualMenuList.tsx
14885
14885
  var import_jsx_runtime163 = require("react/jsx-runtime");
14886
14886
  function VirtualMenuList(props) {
14887
14887
  const {
@@ -15077,7 +15077,7 @@ function VirtualMenuList(props) {
15077
15077
  ) });
15078
15078
  }
15079
15079
 
15080
- // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
15080
+ // src/fields/infinite-scroll-select/InfiniteScrollSelect.tsx
15081
15081
  var import_jsx_runtime164 = require("react/jsx-runtime");
15082
15082
  var DEFAULT_ITEM_HEIGHT = 60;
15083
15083
  var DEFAULT_LIST_HEIGHT = 322;
@@ -15188,7 +15188,7 @@ var InfiniteScrollSelect = React57.forwardRef(
15188
15188
  InfiniteScrollSelectInternal
15189
15189
  );
15190
15190
 
15191
- // src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
15191
+ // src/fields/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
15192
15192
  var React58 = __toESM(require("react"), 1);
15193
15193
  var import_jsx_runtime165 = require("react/jsx-runtime");
15194
15194
  var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
@@ -15196,11 +15196,11 @@ var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiS
15196
15196
  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Forwarded, { ...props, ref, isMulti: true });
15197
15197
  });
15198
15198
 
15199
- // src/dashboard/select-checkboxes/SelectCheckboxes.tsx
15199
+ // src/fields/select-checkboxes/SelectCheckboxes.tsx
15200
15200
  var React59 = __toESM(require("react"), 1);
15201
15201
  var import_react_i18next36 = require("react-i18next");
15202
15202
 
15203
- // src/dashboard/select-checkboxes/VisualCheckbox.tsx
15203
+ // src/fields/select-checkboxes/VisualCheckbox.tsx
15204
15204
  var import_lucide_react48 = require("lucide-react");
15205
15205
  var import_jsx_runtime166 = require("react/jsx-runtime");
15206
15206
  function VisualCheckbox({ checked, disabled, className }) {
@@ -15220,7 +15220,7 @@ function VisualCheckbox({ checked, disabled, className }) {
15220
15220
  );
15221
15221
  }
15222
15222
 
15223
- // src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
15223
+ // src/fields/select-checkboxes/SelectCheckboxOption.tsx
15224
15224
  var import_jsx_runtime167 = require("react/jsx-runtime");
15225
15225
  function SelectCheckboxOption(props) {
15226
15226
  const {
@@ -15265,7 +15265,7 @@ function SelectCheckboxOption(props) {
15265
15265
  );
15266
15266
  }
15267
15267
 
15268
- // src/dashboard/select-checkboxes/CountTrigger.tsx
15268
+ // src/fields/select-checkboxes/CountTrigger.tsx
15269
15269
  var import_lucide_react49 = require("lucide-react");
15270
15270
  var import_react_i18next35 = require("react-i18next");
15271
15271
  var import_jsx_runtime168 = require("react/jsx-runtime");
@@ -15340,7 +15340,7 @@ function createCountTrigger(opts) {
15340
15340
  return CountTrigger;
15341
15341
  }
15342
15342
 
15343
- // src/dashboard/select-checkboxes/SelectAllRow.tsx
15343
+ // src/fields/select-checkboxes/SelectAllRow.tsx
15344
15344
  var import_jsx_runtime169 = require("react/jsx-runtime");
15345
15345
  function SelectAllRow({ label, checked, disabled, onToggle }) {
15346
15346
  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
@@ -15361,7 +15361,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
15361
15361
  );
15362
15362
  }
15363
15363
 
15364
- // src/dashboard/select-checkboxes/SelectCheckboxes.tsx
15364
+ // src/fields/select-checkboxes/SelectCheckboxes.tsx
15365
15365
  var import_jsx_runtime170 = require("react/jsx-runtime");
15366
15366
  function hasPaginationProps(props) {
15367
15367
  return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
@@ -15520,11 +15520,11 @@ var SelectCheckboxes = React59.forwardRef(
15520
15520
  SelectCheckboxesInternal
15521
15521
  );
15522
15522
 
15523
- // src/dashboard/textarea/Textarea.tsx
15523
+ // src/fields/textarea/Textarea.tsx
15524
15524
  var React61 = __toESM(require("react"), 1);
15525
15525
  var import_react_i18next37 = require("react-i18next");
15526
15526
 
15527
- // src/dashboard/textarea/useTextareaValueState.ts
15527
+ // src/fields/textarea/useTextareaValueState.ts
15528
15528
  var React60 = __toESM(require("react"), 1);
15529
15529
  var isEmptyValue2 = (value) => {
15530
15530
  if (value === void 0 || value === null) return true;
@@ -15589,7 +15589,7 @@ function useTextareaValueState({
15589
15589
  };
15590
15590
  }
15591
15591
 
15592
- // src/dashboard/textarea/Textarea.tsx
15592
+ // src/fields/textarea/Textarea.tsx
15593
15593
  var import_jsx_runtime171 = require("react/jsx-runtime");
15594
15594
  var LINE_HEIGHT = 20;
15595
15595
  var VERTICAL_PADDING = 32;
@@ -15699,7 +15699,7 @@ var Textarea = React61.forwardRef(function Textarea2({
15699
15699
  onBlur: handleBlur,
15700
15700
  className: cn(
15701
15701
  "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",
15702
- "border-[var(--field-border)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
15702
+ "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)]",
15703
15703
  !isBlocked && "focus:border-[var(--field-border-focused)]",
15704
15704
  isEmpty && "border-[var(--field-border)] bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]",
15705
15705
  isInvalid && "border-[var(--field-border-invalid)] focus:border-[var(--field-border-invalid)]",
@@ -15727,7 +15727,7 @@ var Textarea = React61.forwardRef(function Textarea2({
15727
15727
  );
15728
15728
  });
15729
15729
 
15730
- // src/dashboard/datepicker/Datepicker.tsx
15730
+ // src/fields/datepicker/Datepicker.tsx
15731
15731
  var React63 = __toESM(require("react"), 1);
15732
15732
  var import_lucide_react50 = require("lucide-react");
15733
15733
  var import_react_i18next38 = require("react-i18next");
@@ -16376,7 +16376,7 @@ function AirbnbDatePickerContent({
16376
16376
  ) });
16377
16377
  }
16378
16378
 
16379
- // src/dashboard/datepicker/Datepicker.tsx
16379
+ // src/fields/datepicker/Datepicker.tsx
16380
16380
  var import_jsx_runtime174 = require("react/jsx-runtime");
16381
16381
  var MONTHS_IN_YEAR2 = 12;
16382
16382
  function getMonthLabels2(locale) {
@@ -16724,7 +16724,7 @@ var Datepicker = React63.forwardRef(
16724
16724
  }
16725
16725
  );
16726
16726
  const subInputClass = cn(
16727
- "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)]",
16727
+ "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)]",
16728
16728
  isBlocked && "cursor-not-allowed",
16729
16729
  loading && "cursor-progress"
16730
16730
  );
@@ -16781,7 +16781,7 @@ var Datepicker = React63.forwardRef(
16781
16781
  "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)]"
16782
16782
  ),
16783
16783
  children: [
16784
- /* @__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)(
16784
+ /* @__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)(
16785
16785
  "input",
16786
16786
  {
16787
16787
  ref: dayInputRef,
@@ -16851,7 +16851,7 @@ var Datepicker = React63.forwardRef(
16851
16851
  },
16852
16852
  onKeyDown: handleMonthInputKeyDown,
16853
16853
  className: cn(
16854
- "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)]",
16854
+ "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)]",
16855
16855
  monthIndex !== null ? "text-[var(--chekin-color-brand-navy)]" : "text-[var(--chekin-color-gray-1)]",
16856
16856
  (isBlocked || readOnly) && "cursor-not-allowed"
16857
16857
  )
@@ -16874,7 +16874,7 @@ var Datepicker = React63.forwardRef(
16874
16874
  }
16875
16875
  )
16876
16876
  ] }),
16877
- /* @__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)(
16877
+ /* @__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)(
16878
16878
  "input",
16879
16879
  {
16880
16880
  ref: yearInputRef,
@@ -16978,14 +16978,14 @@ var Datepicker = React63.forwardRef(
16978
16978
  }
16979
16979
  );
16980
16980
 
16981
- // src/dashboard/date-range-picker/DateRangePicker.tsx
16981
+ // src/fields/date-range-picker/DateRangePicker.tsx
16982
16982
  var React67 = __toESM(require("react"), 1);
16983
16983
  var import_react_i18next39 = require("react-i18next");
16984
16984
 
16985
- // src/dashboard/date-range-picker/isDayBlocked.ts
16985
+ // src/fields/date-range-picker/isDayBlocked.ts
16986
16986
  var import_date_fns2 = require("date-fns");
16987
16987
 
16988
- // src/dashboard/date-range-picker/dateUtils.ts
16988
+ // src/fields/date-range-picker/dateUtils.ts
16989
16989
  var import_date_fns = require("date-fns");
16990
16990
  var DEFAULT_DISPLAY_FORMAT = "dd-MM-yyyy";
16991
16991
  var SUPPORTED_FORMATS = ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"];
@@ -17013,7 +17013,7 @@ function resetTime(date) {
17013
17013
  return next;
17014
17014
  }
17015
17015
 
17016
- // src/dashboard/date-range-picker/isDayBlocked.ts
17016
+ // src/fields/date-range-picker/isDayBlocked.ts
17017
17017
  var isDayBlocked = ({ minDate, maxDate, maxDays, minDays, datesRange }) => (date) => {
17018
17018
  const startDate = datesRange?.from ? resetTime(datesRange.from) : null;
17019
17019
  const endDate = datesRange?.to ? resetTime(datesRange.to) : null;
@@ -17040,7 +17040,7 @@ var isDayBlocked = ({ minDate, maxDate, maxDays, minDays, datesRange }) => (date
17040
17040
  return false;
17041
17041
  };
17042
17042
 
17043
- // src/dashboard/date-range-picker/createDisabledMatchers.ts
17043
+ // src/fields/date-range-picker/createDisabledMatchers.ts
17044
17044
  var createDisabledMatchers = ({
17045
17045
  disabledDays,
17046
17046
  minDate,
@@ -17057,7 +17057,7 @@ var createDisabledMatchers = ({
17057
17057
  return result;
17058
17058
  };
17059
17059
 
17060
- // src/dashboard/date-range-picker/hooks/useRangeValue.ts
17060
+ // src/fields/date-range-picker/hooks/useRangeValue.ts
17061
17061
  var React64 = __toESM(require("react"), 1);
17062
17062
  var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
17063
17063
  function useRangeValue({
@@ -17092,10 +17092,10 @@ function useRangeValue({
17092
17092
  return { value: draft, commit };
17093
17093
  }
17094
17094
 
17095
- // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
17095
+ // src/fields/date-range-picker/hooks/useRangeTextInputs.ts
17096
17096
  var React65 = __toESM(require("react"), 1);
17097
17097
 
17098
- // src/dashboard/date-range-picker/utils/inputFormat.ts
17098
+ // src/fields/date-range-picker/utils/inputFormat.ts
17099
17099
  function parseDateInputFormat(format2) {
17100
17100
  const tokens = [];
17101
17101
  let i = 0;
@@ -17171,7 +17171,7 @@ function autoFormatDateInput(raw, tokens) {
17171
17171
  return result;
17172
17172
  }
17173
17173
 
17174
- // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
17174
+ // src/fields/date-range-picker/hooks/useRangeTextInputs.ts
17175
17175
  var countDigits = (text) => text.replace(/\D/g, "").length;
17176
17176
  function useRangeTextInputs({
17177
17177
  value,
@@ -17263,7 +17263,7 @@ function useRangeTextInputs({
17263
17263
  };
17264
17264
  }
17265
17265
 
17266
- // src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
17266
+ // src/fields/date-range-picker/hooks/useRangeMonthSync.ts
17267
17267
  var React66 = __toESM(require("react"), 1);
17268
17268
  function useRangeMonthSync(value) {
17269
17269
  const isPreloadedRef = React66.useRef(false);
@@ -17284,7 +17284,7 @@ function useRangeMonthSync(value) {
17284
17284
  return { month, setMonth, syncMonthToValue, resetPreload };
17285
17285
  }
17286
17286
 
17287
- // src/dashboard/date-range-picker/utils/rangeSelection.ts
17287
+ // src/fields/date-range-picker/utils/rangeSelection.ts
17288
17288
  var import_date_fns3 = require("date-fns");
17289
17289
  function resolveRangeSelection({
17290
17290
  previous,
@@ -17302,12 +17302,12 @@ function resolveRangeSelection({
17302
17302
  return { next, shouldClose };
17303
17303
  }
17304
17304
 
17305
- // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
17305
+ // src/fields/date-range-picker/components/DateRangeInputs.tsx
17306
17306
  var import_lucide_react51 = require("lucide-react");
17307
17307
  var import_jsx_runtime175 = require("react/jsx-runtime");
17308
17308
  var DEFAULT_PLACEHOLDER = "00-00-0000";
17309
- 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)]";
17310
- 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";
17309
+ 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)]";
17310
+ 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";
17311
17311
  function DateRangeInputs({
17312
17312
  fromId,
17313
17313
  toId,
@@ -17425,7 +17425,15 @@ function DateRangeInputs({
17425
17425
  onClick: onReset,
17426
17426
  className: iconButtonClass,
17427
17427
  "aria-label": clearLabel,
17428
- children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
17428
+ children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
17429
+ import_lucide_react51.SquareX,
17430
+ {
17431
+ size: 16,
17432
+ fill: "var(--chekin-neutral-500)",
17433
+ color: "#f8f8f8",
17434
+ strokeWidth: 1.8
17435
+ }
17436
+ )
17429
17437
  }
17430
17438
  ),
17431
17439
  !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
@@ -17449,7 +17457,7 @@ function DateRangeInputs({
17449
17457
  );
17450
17458
  }
17451
17459
 
17452
- // src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
17460
+ // src/fields/date-range-picker/components/DateRangeCalendar.tsx
17453
17461
  var import_jsx_runtime176 = require("react/jsx-runtime");
17454
17462
  function DateRangeCalendar({
17455
17463
  value,
@@ -17488,7 +17496,7 @@ function DateRangeCalendar({
17488
17496
  );
17489
17497
  }
17490
17498
 
17491
- // src/dashboard/date-range-picker/components/DateRangePopover.tsx
17499
+ // src/fields/date-range-picker/components/DateRangePopover.tsx
17492
17500
  var import_jsx_runtime177 = require("react/jsx-runtime");
17493
17501
  function DateRangePopover({
17494
17502
  isOpen,
@@ -17536,7 +17544,7 @@ function DateRangePopover({
17536
17544
  );
17537
17545
  }
17538
17546
 
17539
- // src/dashboard/date-range-picker/DateRangePicker.tsx
17547
+ // src/fields/date-range-picker/DateRangePicker.tsx
17540
17548
  var import_jsx_runtime178 = require("react/jsx-runtime");
17541
17549
  var DateRangePicker = React67.forwardRef(function DateRangePicker2({
17542
17550
  label,
@@ -17878,7 +17886,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
17878
17886
  );
17879
17887
  });
17880
17888
 
17881
- // src/dashboard/date-range-picker/useValidateDates.ts
17889
+ // src/fields/date-range-picker/useValidateDates.ts
17882
17890
  var React68 = __toESM(require("react"), 1);
17883
17891
  var import_react_i18next40 = require("react-i18next");
17884
17892
  var import_date_fns4 = require("date-fns");
@@ -17955,7 +17963,7 @@ function useValidateDates({
17955
17963
  return { validateDates };
17956
17964
  }
17957
17965
 
17958
- // src/dashboard/time-picker/TimePicker.tsx
17966
+ // src/fields/time-picker/TimePicker.tsx
17959
17967
  var React69 = __toESM(require("react"), 1);
17960
17968
  var import_date_fns5 = require("date-fns");
17961
17969
  var import_jsx_runtime179 = require("react/jsx-runtime");
@@ -18009,7 +18017,7 @@ var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName =
18009
18017
  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Select, { ref, ...selectProps, options: resolvedOptions });
18010
18018
  });
18011
18019
 
18012
- // src/dashboard/file-input/FileInput.tsx
18020
+ // src/fields/file-input/FileInput.tsx
18013
18021
  var React70 = __toESM(require("react"), 1);
18014
18022
  var import_lucide_react52 = require("lucide-react");
18015
18023
  var import_react_i18next41 = require("react-i18next");
@@ -18114,7 +18122,7 @@ var FileInput = React70.forwardRef(function FileInput2({
18114
18122
  hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
18115
18123
  "div",
18116
18124
  {
18117
- className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
18125
+ 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",
18118
18126
  onClick: (event) => event.preventDefault(),
18119
18127
  children: [
18120
18128
  isUrl ? /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
@@ -18135,9 +18143,17 @@ var FileInput = React70.forwardRef(function FileInput2({
18135
18143
  type: "button",
18136
18144
  disabled: isBlocked || readOnly,
18137
18145
  onClick: handleClear,
18138
- 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]",
18146
+ 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]",
18139
18147
  "aria-label": t("remove_file"),
18140
- children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react52.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
18148
+ children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
18149
+ import_lucide_react52.SquareX,
18150
+ {
18151
+ size: 15,
18152
+ fill: "var(--chekin-neutral-500)",
18153
+ color: "#f8f8f8",
18154
+ strokeWidth: 1.8
18155
+ }
18156
+ )
18141
18157
  }
18142
18158
  )
18143
18159
  ]
@@ -18181,7 +18197,7 @@ var FileInput = React70.forwardRef(function FileInput2({
18181
18197
  );
18182
18198
  });
18183
18199
 
18184
- // src/dashboard/select-icons-box/SelectIconsBox.tsx
18200
+ // src/fields/select-icons-box/SelectIconsBox.tsx
18185
18201
  var React71 = __toESM(require("react"), 1);
18186
18202
  var import_jsx_runtime181 = require("react/jsx-runtime");
18187
18203
  var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
@@ -18192,7 +18208,7 @@ var SelectIconsBox = React71.forwardRef(
18192
18208
  renderIcon,
18193
18209
  onSelect,
18194
18210
  columns = 4,
18195
- iconsColor = "#6B6B95",
18211
+ iconsColor = "var(--chekin-neutral-600)",
18196
18212
  isOpen: controlledOpen,
18197
18213
  defaultOpen = false,
18198
18214
  onOpenChange,
@@ -18258,7 +18274,7 @@ var SelectIconsBox = React71.forwardRef(
18258
18274
  type: "button",
18259
18275
  "data-icon-box-item": true,
18260
18276
  onClick: () => handlePick(iconName),
18261
- 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]",
18277
+ 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)]",
18262
18278
  "aria-label": iconName,
18263
18279
  children: renderIcon(iconName, iconsColor)
18264
18280
  },
@@ -18371,9 +18387,9 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
18371
18387
  name,
18372
18388
  disabled,
18373
18389
  className: cn(
18374
- "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",
18375
- invalid && "border-[#ff2467] focus:border-[#ff2467]",
18376
- disabled && "cursor-not-allowed resize-none border-[#9696b9] bg-[#f4f6f8] text-[#9696b9] placeholder:text-[#9696b9]",
18390
+ "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",
18391
+ invalid && "border-[var(--chekin-red-500)] focus:border-[var(--chekin-red-500)]",
18392
+ 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)]",
18377
18393
  textareaClassName
18378
18394
  ),
18379
18395
  ...textareaProps
@@ -18384,9 +18400,9 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
18384
18400
  {
18385
18401
  htmlFor: inputId,
18386
18402
  className: cn(
18387
- "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",
18388
- invalid && "text-[#ff2467] peer-focus:text-[#ff2467]",
18389
- disabled && "text-[#9696b9]"
18403
+ "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",
18404
+ invalid && "text-[var(--chekin-red-500)] peer-focus:text-[var(--chekin-red-500)]",
18405
+ disabled && "text-[var(--chekin-neutral-500)]"
18390
18406
  ),
18391
18407
  children: label
18392
18408
  }
@@ -18475,9 +18491,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
18475
18491
  ] }) : void 0;
18476
18492
  const sharedClasses = cn(
18477
18493
  "relative flex w-full items-center border bg-transparent text-left transition-colors focus-visible:outline-none",
18478
- "rounded-[12px] border-[#8c8c8c] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[#222222] focus-visible:ring-offset-2",
18494
+ "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",
18479
18495
  isRaised ? "min-h-[60px]" : "h-[60px]",
18480
- hasInvalidState ? "border-[var(--error-message-color)] bg-[#FFF5F3]" : "border-[#8c8c8c]",
18496
+ hasInvalidState ? "border-[var(--error-message-color)] bg-[var(--chekin-airbnb-pink-surface-soft)]" : "border-[var(--chekin-airbnb-gray-muted)]",
18481
18497
  disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
18482
18498
  className
18483
18499
  );
@@ -18499,7 +18515,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
18499
18515
  "absolute left-0 origin-left transition-all duration-200 ease-out",
18500
18516
  hasLabelMeta ? "max-w-full" : "pointer-events-none truncate",
18501
18517
  isRaised ? "top-[-1px] translate-y-0 text-xs leading-5" : "top-1/2 -translate-y-1/2 text-[16px] leading-7",
18502
- hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#6c6c6c]"
18518
+ hasInvalidState ? "text-[var(--error-message-color)]" : "text-[var(--chekin-airbnb-gray-text)]"
18503
18519
  ),
18504
18520
  children: animatedLabel
18505
18521
  }
@@ -18511,7 +18527,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
18511
18527
  className: cn(
18512
18528
  "absolute left-0 block truncate transition-all duration-200 ease-out",
18513
18529
  "bottom-0 translate-y-0 text-[16px] leading-6 opacity-100",
18514
- hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#222222]"
18530
+ hasInvalidState ? "text-[var(--error-message-color)]" : "text-[var(--chekin-airbnb-ink-strong)]"
18515
18531
  ),
18516
18532
  children: valueText
18517
18533
  }
@@ -18529,7 +18545,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
18529
18545
  )
18530
18546
  ] });
18531
18547
  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "w-full", children: [
18532
- topLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
18548
+ 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 }),
18533
18549
  as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
18534
18550
  "button",
18535
18551
  {
@@ -18722,7 +18738,13 @@ var AirbnbDatePicker = React73.forwardRef(
18722
18738
  onClick: handleTriggerClick,
18723
18739
  onKeyDown: handleTriggerKeyDown,
18724
18740
  onBlur,
18725
- trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_lucide_react54.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
18741
+ trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
18742
+ import_lucide_react54.Calendar,
18743
+ {
18744
+ className: "h-5 w-5 text-[var(--chekin-airbnb-ink)]",
18745
+ strokeWidth: 2
18746
+ }
18747
+ )
18726
18748
  }
18727
18749
  ),
18728
18750
  /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
@@ -18876,7 +18898,7 @@ var AirbnbInput = React74.forwardRef(
18876
18898
  tooltip,
18877
18899
  describedBy: error && renderErrorMessage ? errorId : void 0,
18878
18900
  className: cn(
18879
- "px-4 focus-within:ring-2 focus-within:ring-[#1F1F1B] focus-within:ring-offset-2",
18901
+ "px-4 focus-within:ring-2 focus-within:ring-[var(--chekin-airbnb-ink)] focus-within:ring-offset-2",
18880
18902
  disabled ? "cursor-not-allowed" : "cursor-text",
18881
18903
  fieldClassName
18882
18904
  ),
@@ -18906,7 +18928,7 @@ var AirbnbInput = React74.forwardRef(
18906
18928
  "aria-label": accessibleLabel && hasLabelMeta ? accessibleLabel : void 0,
18907
18929
  "aria-labelledby": accessibleLabel && !hasLabelMeta ? labelId : void 0,
18908
18930
  className: cn(
18909
- "absolute left-0 h-6 w-full border-0 bg-transparent p-0 text-[16px] leading-6 text-[#1F1F1B] outline-none placeholder:text-[#7A8399]",
18931
+ "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)]",
18910
18932
  "bottom-0",
18911
18933
  hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
18912
18934
  disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
@@ -18922,14 +18944,16 @@ var AirbnbInput = React74.forwardRef(
18922
18944
  type: "button",
18923
18945
  onClick: togglePasswordReveal,
18924
18946
  disabled: isBlocked,
18925
- 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",
18947
+ 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",
18926
18948
  "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
18927
18949
  children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
18928
18950
  import_lucide_react55.Eye,
18929
18951
  {
18930
18952
  size: 18,
18931
18953
  "aria-hidden": "true",
18932
- className: cn(isPasswordRevealed ? "text-[#fc98dd]" : "")
18954
+ className: cn(
18955
+ isPasswordRevealed ? "text-[var(--chekin-airbnb-pink)]" : ""
18956
+ )
18933
18957
  }
18934
18958
  )
18935
18959
  }
@@ -18981,7 +19005,7 @@ function AirbnbSelectDesktopMenu({
18981
19005
  onKeyDown,
18982
19006
  className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
18983
19007
  children: [
18984
- 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,
19008
+ 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,
18985
19009
  options.map((option, index) => {
18986
19010
  const isSelected = selectedValue?.value === option.value;
18987
19011
  const isHighlighted = index === highlightedIndex;
@@ -19002,9 +19026,9 @@ function AirbnbSelectDesktopMenu({
19002
19026
  onClick: () => onOptionClick(option),
19003
19027
  onMouseMove: () => onOptionHover?.(index),
19004
19028
  className: cn(
19005
- "w-full rounded-2xl px-4 py-3 text-left text-base leading-6 text-[#3F3F46] transition-colors",
19006
- isHighlighted && "bg-[#F7F6F4]",
19007
- isSelected && "bg-[#F7F6F4] font-medium text-[#171717]",
19029
+ "w-full rounded-2xl px-4 py-3 text-left text-base leading-6 text-[var(--chekin-airbnb-zinc)] transition-colors",
19030
+ isHighlighted && "bg-[var(--chekin-airbnb-surface)]",
19031
+ isSelected && "bg-[var(--chekin-airbnb-surface)] font-medium text-[var(--chekin-airbnb-ink-black)]",
19008
19032
  (disabled || option.isDisabled) && "cursor-not-allowed opacity-40"
19009
19033
  ),
19010
19034
  children: String(option.label)
@@ -19043,7 +19067,7 @@ function AirbnbSelectDesktopContent({
19043
19067
  "div",
19044
19068
  {
19045
19069
  className: cn(
19046
- "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)]",
19070
+ "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)]",
19047
19071
  dropdownClassName
19048
19072
  ),
19049
19073
  children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
@@ -19175,7 +19199,7 @@ function AirbnbSelectMobileWheel({
19175
19199
  onKeyDown,
19176
19200
  className: cn("relative overflow-hidden outline-none", menuClassName),
19177
19201
  children: [
19178
- 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,
19202
+ 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,
19179
19203
  /* @__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" }),
19180
19204
  /* @__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" }),
19181
19205
  /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
@@ -19349,7 +19373,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
19349
19373
  trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
19350
19374
  import_lucide_react56.ChevronDown,
19351
19375
  {
19352
- className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
19376
+ 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"
19353
19377
  }
19354
19378
  )
19355
19379
  }
@@ -20074,7 +20098,7 @@ var AirbnbPhoneField = React80.forwardRef(
20074
20098
  "label",
20075
20099
  {
20076
20100
  htmlFor: inputId,
20077
- className: "mb-3 block text-[16px] font-medium leading-5 text-[#1F1F1B]",
20101
+ className: "mb-3 block text-[16px] font-medium leading-5 text-[var(--chekin-airbnb-ink)]",
20078
20102
  children: topLabel
20079
20103
  }
20080
20104
  ),
@@ -20124,8 +20148,8 @@ var AirbnbPhoneField = React80.forwardRef(
20124
20148
  onClick,
20125
20149
  onKeyDown,
20126
20150
  className: cn(
20127
- "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",
20128
- hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]",
20151
+ "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",
20152
+ 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)]",
20129
20153
  triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
20130
20154
  ),
20131
20155
  children: [
@@ -20418,7 +20442,7 @@ var AirbnbSearchableSelectInternal = ({
20418
20442
  import_lucide_react58.ChevronDown,
20419
20443
  {
20420
20444
  className: cn(
20421
- "h-6 w-6 text-[#1F1F1B] transition-transform",
20445
+ "h-6 w-6 text-[var(--chekin-airbnb-ink)] transition-transform",
20422
20446
  open && "rotate-180"
20423
20447
  )
20424
20448
  }
@@ -20447,7 +20471,7 @@ var AirbnbSearchableSelectInternal = ({
20447
20471
  "div",
20448
20472
  {
20449
20473
  className: cn(
20450
- "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)]",
20474
+ "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)]",
20451
20475
  dropdownClassName
20452
20476
  ),
20453
20477
  children: content
@@ -20516,7 +20540,7 @@ function AirbnbSearchableSelectContent({
20516
20540
  import_lucide_react58.Search,
20517
20541
  {
20518
20542
  "aria-hidden": "true",
20519
- className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
20543
+ className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--chekin-neutral-500)]"
20520
20544
  }
20521
20545
  ),
20522
20546
  /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
@@ -20534,11 +20558,11 @@ function AirbnbSearchableSelectContent({
20534
20558
  placeholder: searchPlaceholder,
20535
20559
  onChange: (event) => onSearchChange(event.target.value),
20536
20560
  onKeyDown: onSearchKeyDown,
20537
- 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]"
20561
+ 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)]"
20538
20562
  }
20539
20563
  )
20540
20564
  ] }),
20541
- 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)(
20565
+ 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)(
20542
20566
  "div",
20543
20567
  {
20544
20568
  id: listboxId,
@@ -20558,7 +20582,7 @@ function AirbnbSearchableSelectContent({
20558
20582
  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
20559
20583
  "div",
20560
20584
  {
20561
- className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
20585
+ className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]",
20562
20586
  style: {
20563
20587
  height: `${virtualItem.size}px`,
20564
20588
  transform: `translateY(${virtualItem.start}px)`
@@ -20583,9 +20607,9 @@ function AirbnbSearchableSelectContent({
20583
20607
  onClick: () => onOptionClick(option),
20584
20608
  onMouseMove: () => onOptionHover(virtualItem.index),
20585
20609
  className: cn(
20586
- "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",
20587
- isHighlighted && "bg-[#F7F6F4]",
20588
- isSelected && "bg-[#F7F6F4] font-medium text-[#171717]",
20610
+ "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",
20611
+ isHighlighted && "bg-[var(--chekin-airbnb-surface)]",
20612
+ isSelected && "bg-[var(--chekin-airbnb-surface)] font-medium text-[var(--chekin-airbnb-ink-black)]",
20589
20613
  option.isDisabled && "cursor-not-allowed opacity-40"
20590
20614
  ),
20591
20615
  style: {
@@ -20629,7 +20653,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
20629
20653
  const { t } = (0, import_react_i18next44.useTranslation)();
20630
20654
  const placeholderText = placeholder || t("search_property") + "...";
20631
20655
  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
20632
- /* @__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]" }),
20656
+ /* @__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)]" }),
20633
20657
  /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
20634
20658
  "input",
20635
20659
  {
@@ -20644,7 +20668,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
20644
20668
  onBlur: props.onBlur,
20645
20669
  placeholder: placeholderText,
20646
20670
  className: cn(
20647
- "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",
20671
+ "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",
20648
20672
  props.className
20649
20673
  )
20650
20674
  }
@@ -20654,7 +20678,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
20654
20678
  {
20655
20679
  variant: "ghost",
20656
20680
  onClick: onReset,
20657
- className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
20681
+ className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]",
20658
20682
  children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
20659
20683
  }
20660
20684
  )
@@ -20692,7 +20716,7 @@ var AirbnbSwitch = React83.forwardRef(
20692
20716
  "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
20693
20717
  "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
20694
20718
  "aria-readonly:cursor-default aria-readonly:opacity-100",
20695
- "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
20719
+ "data-[state=checked]:bg-[var(--chekin-airbnb-ink-strong)] data-[state=unchecked]:bg-[var(--chekin-airbnb-border-soft)]",
20696
20720
  className
20697
20721
  ),
20698
20722
  id: fieldId,
@@ -20714,7 +20738,7 @@ var AirbnbSwitch = React83.forwardRef(
20714
20738
  import_lucide_react60.Check,
20715
20739
  {
20716
20740
  "aria-hidden": "true",
20717
- className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
20741
+ className: "h-3 w-3 text-[var(--chekin-airbnb-ink-strong)] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
20718
20742
  strokeWidth: 3
20719
20743
  }
20720
20744
  )