@chekinapp/ui 0.0.71 → 0.0.72

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.
package/dist/index.js CHANGED
@@ -9400,7 +9400,7 @@ import {
9400
9400
  } from "react";
9401
9401
  import { jsx as jsx125, jsxs as jsxs74 } from "react/jsx-runtime";
9402
9402
  var getValueArray = (value) => {
9403
- if (value) {
9403
+ if (value !== void 0 && value !== null) {
9404
9404
  return Array.isArray(value) ? value : [value];
9405
9405
  }
9406
9406
  return [];
@@ -13785,6 +13785,52 @@ function SelectMenu({
13785
13785
  );
13786
13786
  }
13787
13787
 
13788
+ // src/dashboard/_select-internals/SelectMenuPanel.tsx
13789
+ import { jsx as jsx155, jsxs as jsxs99 } from "react/jsx-runtime";
13790
+ function SelectMenuPanel({
13791
+ isOpen,
13792
+ isMobile: isMobile2,
13793
+ onClose,
13794
+ title,
13795
+ className,
13796
+ drawerClassName,
13797
+ children
13798
+ }) {
13799
+ if (!isOpen) return null;
13800
+ if (isMobile2) {
13801
+ return /* @__PURE__ */ jsx155(
13802
+ Drawer,
13803
+ {
13804
+ open: isOpen,
13805
+ onOpenChange: (next) => {
13806
+ if (!next) onClose();
13807
+ },
13808
+ children: /* @__PURE__ */ jsxs99(
13809
+ DrawerContent,
13810
+ {
13811
+ onClose,
13812
+ className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
13813
+ children: [
13814
+ title ? /* @__PURE__ */ jsx155(DrawerTitle, { className: "px-5 pb-3 pt-1 text-left text-[16px] font-semibold leading-6 text-[var(--chekin-color-brand-navy)]", children: title }) : /* @__PURE__ */ jsx155(DrawerTitle, { className: "sr-only", children: "Select option" }),
13815
+ /* @__PURE__ */ jsx155("div", { className: "flex min-h-0 flex-1 flex-col", children })
13816
+ ]
13817
+ }
13818
+ )
13819
+ }
13820
+ );
13821
+ }
13822
+ return /* @__PURE__ */ jsx155(
13823
+ "div",
13824
+ {
13825
+ className: cn(
13826
+ "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
13827
+ className
13828
+ ),
13829
+ children
13830
+ }
13831
+ );
13832
+ }
13833
+
13788
13834
  // src/dashboard/_select-internals/useSelectIds.ts
13789
13835
  import * as React54 from "react";
13790
13836
  function useSelectIds2({
@@ -13821,7 +13867,7 @@ function useSelectIds2({
13821
13867
  }
13822
13868
 
13823
13869
  // src/dashboard/select/Select.tsx
13824
- import { jsx as jsx155, jsxs as jsxs99 } from "react/jsx-runtime";
13870
+ import { jsx as jsx156, jsxs as jsxs100 } from "react/jsx-runtime";
13825
13871
  function DashboardSelectInternal({
13826
13872
  options = [],
13827
13873
  value,
@@ -13841,6 +13887,7 @@ function DashboardSelectInternal({
13841
13887
  className,
13842
13888
  menuClassName,
13843
13889
  dropdownClassName,
13890
+ drawerClassName,
13844
13891
  name,
13845
13892
  width,
13846
13893
  noOptionsMessage,
@@ -13857,6 +13904,7 @@ function DashboardSelectInternal({
13857
13904
  const [isOpen, setIsOpen] = React55.useState(false);
13858
13905
  const [searchValue, setSearchValue] = React55.useState("");
13859
13906
  const [highlightedIndex, setHighlightedIndex] = React55.useState(-1);
13907
+ const isMobile2 = useIsMobile();
13860
13908
  const hasValue = Boolean(value);
13861
13909
  const isEmpty = !hasValue;
13862
13910
  const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -13874,7 +13922,7 @@ function DashboardSelectInternal({
13874
13922
  useOutsideClick({
13875
13923
  elementRef: containerRef,
13876
13924
  onOutsideClick: () => setIsOpen(false),
13877
- isDisabled: !isOpen
13925
+ isDisabled: !isOpen || isMobile2
13878
13926
  });
13879
13927
  React55.useEffect(() => {
13880
13928
  if (isBlocked) setIsOpen(false);
@@ -13953,7 +14001,7 @@ function DashboardSelectInternal({
13953
14001
  setIsOpen(false);
13954
14002
  }
13955
14003
  };
13956
- return /* @__PURE__ */ jsxs99(
14004
+ return /* @__PURE__ */ jsxs100(
13957
14005
  "div",
13958
14006
  {
13959
14007
  ref: containerRef,
@@ -13965,9 +14013,9 @@ function DashboardSelectInternal({
13965
14013
  ),
13966
14014
  style: wrapperWidth ? { width: wrapperWidth } : void 0,
13967
14015
  children: [
13968
- name && /* @__PURE__ */ jsx155("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
13969
- /* @__PURE__ */ jsxs99("div", { className: "relative w-full min-h-[68px]", children: [
13970
- topLabel && /* @__PURE__ */ jsx155(
14016
+ name && /* @__PURE__ */ jsx156("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
14017
+ /* @__PURE__ */ jsxs100("div", { className: "relative w-full min-h-[68px]", children: [
14018
+ topLabel && /* @__PURE__ */ jsx156(
13971
14019
  "label",
13972
14020
  {
13973
14021
  htmlFor: triggerId,
@@ -13975,8 +14023,8 @@ function DashboardSelectInternal({
13975
14023
  children: topLabel
13976
14024
  }
13977
14025
  ),
13978
- /* @__PURE__ */ jsxs99("div", { className: "relative w-full", children: [
13979
- /* @__PURE__ */ jsxs99(
14026
+ /* @__PURE__ */ jsxs100("div", { className: "relative w-full", children: [
14027
+ /* @__PURE__ */ jsxs100(
13980
14028
  "button",
13981
14029
  {
13982
14030
  id: triggerId,
@@ -14000,10 +14048,10 @@ function DashboardSelectInternal({
14000
14048
  loading && "cursor-progress"
14001
14049
  ),
14002
14050
  children: [
14003
- /* @__PURE__ */ jsx155("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
14004
- /* @__PURE__ */ jsxs99("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
14005
- loading && /* @__PURE__ */ jsx155(ThreeDotsLoader, { height: 18, width: 18 }),
14006
- /* @__PURE__ */ jsx155(
14051
+ /* @__PURE__ */ jsx156("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
14052
+ /* @__PURE__ */ jsxs100("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
14053
+ loading && /* @__PURE__ */ jsx156(ThreeDotsLoader, { height: 18, width: 18 }),
14054
+ /* @__PURE__ */ jsx156(
14007
14055
  ChevronDown4,
14008
14056
  {
14009
14057
  size: 16,
@@ -14017,7 +14065,7 @@ function DashboardSelectInternal({
14017
14065
  ]
14018
14066
  }
14019
14067
  ),
14020
- /* @__PURE__ */ jsx155(
14068
+ /* @__PURE__ */ jsx156(
14021
14069
  Fieldset,
14022
14070
  {
14023
14071
  isFocused: isOpen,
@@ -14034,15 +14082,17 @@ function DashboardSelectInternal({
14034
14082
  onClick: !isBlocked ? toggleMenu : void 0
14035
14083
  }
14036
14084
  ),
14037
- isOpen && /* @__PURE__ */ jsxs99(
14038
- "div",
14085
+ /* @__PURE__ */ jsxs100(
14086
+ SelectMenuPanel,
14039
14087
  {
14040
- className: cn(
14041
- "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
14042
- dropdownClassName
14043
- ),
14088
+ isOpen,
14089
+ isMobile: isMobile2,
14090
+ onClose: () => setIsOpen(false),
14091
+ title: typeof label === "string" ? label : void 0,
14092
+ className: dropdownClassName,
14093
+ drawerClassName,
14044
14094
  children: [
14045
- searchable && /* @__PURE__ */ jsx155("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx155(
14095
+ searchable && /* @__PURE__ */ jsx156("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx156(
14046
14096
  "input",
14047
14097
  {
14048
14098
  ref: searchInputRef,
@@ -14057,7 +14107,7 @@ function DashboardSelectInternal({
14057
14107
  className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
14058
14108
  }
14059
14109
  ) }),
14060
- /* @__PURE__ */ jsx155(
14110
+ /* @__PURE__ */ jsx156(
14061
14111
  SelectMenu,
14062
14112
  {
14063
14113
  id: listboxId,
@@ -14082,9 +14132,9 @@ function DashboardSelectInternal({
14082
14132
  }
14083
14133
  )
14084
14134
  ] }),
14085
- !errorMessage && optional && /* @__PURE__ */ jsx155("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14086
- !errorMessage && helperText && /* @__PURE__ */ jsx155("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14087
- errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx155(
14135
+ !errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14136
+ !errorMessage && helperText && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14137
+ errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx156(
14088
14138
  FieldErrorMessage,
14089
14139
  {
14090
14140
  id: errorId,
@@ -14104,7 +14154,7 @@ var DashboardSelect = React55.forwardRef(
14104
14154
  // src/dashboard/multi-select/MultiSelect.tsx
14105
14155
  import * as React56 from "react";
14106
14156
  import { SquareX as SquareX2 } from "lucide-react";
14107
- import { jsx as jsx156, jsxs as jsxs100 } from "react/jsx-runtime";
14157
+ import { jsx as jsx157, jsxs as jsxs101 } from "react/jsx-runtime";
14108
14158
  var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
14109
14159
  function DashboardMultiSelectInternal({
14110
14160
  options = [],
@@ -14125,6 +14175,7 @@ function DashboardMultiSelectInternal({
14125
14175
  className,
14126
14176
  menuClassName,
14127
14177
  dropdownClassName,
14178
+ drawerClassName,
14128
14179
  name,
14129
14180
  width,
14130
14181
  noOptionsMessage,
@@ -14139,12 +14190,14 @@ function DashboardMultiSelectInternal({
14139
14190
  }, ref) {
14140
14191
  const containerRef = React56.useRef(null);
14141
14192
  const inputRef = React56.useRef(null);
14193
+ const mobileSearchInputRef = React56.useRef(null);
14142
14194
  const listRef = React56.useRef(null);
14143
14195
  const optionRefs = React56.useRef([]);
14144
14196
  const [isOpen, setIsOpen] = React56.useState(false);
14145
14197
  const [searchValue, setSearchValue] = React56.useState("");
14146
14198
  const [isFocused, setIsFocused] = React56.useState(false);
14147
14199
  const [highlightedIndex, setHighlightedIndex] = React56.useState(-1);
14200
+ const isMobile2 = useIsMobile();
14148
14201
  const selectedValues = React56.useMemo(() => value ?? [], [value]);
14149
14202
  const hasValue = selectedValues.length > 0;
14150
14203
  const isEmpty = !hasValue;
@@ -14181,7 +14234,7 @@ function DashboardMultiSelectInternal({
14181
14234
  setIsOpen(false);
14182
14235
  setIsFocused(false);
14183
14236
  },
14184
- isDisabled: !isOpen
14237
+ isDisabled: !isOpen || isMobile2
14185
14238
  });
14186
14239
  React56.useEffect(() => {
14187
14240
  if (isBlocked) setIsOpen(false);
@@ -14202,6 +14255,11 @@ function DashboardMultiSelectInternal({
14202
14255
  return getFirstEnabledOptionIndex2(filteredOptions);
14203
14256
  });
14204
14257
  }, [isOpen, filteredOptions]);
14258
+ React56.useEffect(() => {
14259
+ if (!isOpen || !isMobile2) return;
14260
+ const frame = window.requestAnimationFrame(() => mobileSearchInputRef.current?.focus());
14261
+ return () => window.cancelAnimationFrame(frame);
14262
+ }, [isOpen, isMobile2]);
14205
14263
  const openMenu = () => {
14206
14264
  if (isBlocked) return;
14207
14265
  setIsOpen(true);
@@ -14296,7 +14354,7 @@ function DashboardMultiSelectInternal({
14296
14354
  setIsFocused(false);
14297
14355
  onBlur?.(event);
14298
14356
  };
14299
- return /* @__PURE__ */ jsxs100(
14357
+ return /* @__PURE__ */ jsxs101(
14300
14358
  "div",
14301
14359
  {
14302
14360
  ref: containerRef,
@@ -14309,7 +14367,7 @@ function DashboardMultiSelectInternal({
14309
14367
  ),
14310
14368
  style: wrapperWidth ? { width: wrapperWidth } : void 0,
14311
14369
  children: [
14312
- topLabel && /* @__PURE__ */ jsx156(
14370
+ topLabel && /* @__PURE__ */ jsx157(
14313
14371
  "label",
14314
14372
  {
14315
14373
  htmlFor: triggerId,
@@ -14317,7 +14375,7 @@ function DashboardMultiSelectInternal({
14317
14375
  children: topLabel
14318
14376
  }
14319
14377
  ),
14320
- name && /* @__PURE__ */ jsx156(
14378
+ name && /* @__PURE__ */ jsx157(
14321
14379
  "input",
14322
14380
  {
14323
14381
  type: "hidden",
@@ -14325,8 +14383,8 @@ function DashboardMultiSelectInternal({
14325
14383
  value: selectedValues.map((item) => String(item.value)).join(",")
14326
14384
  }
14327
14385
  ),
14328
- /* @__PURE__ */ jsxs100("div", { className: "relative w-full", children: [
14329
- /* @__PURE__ */ jsxs100(
14386
+ /* @__PURE__ */ jsxs101("div", { className: "relative w-full", children: [
14387
+ /* @__PURE__ */ jsxs101(
14330
14388
  "div",
14331
14389
  {
14332
14390
  id: triggerId,
@@ -14349,13 +14407,13 @@ function DashboardMultiSelectInternal({
14349
14407
  ),
14350
14408
  children: [
14351
14409
  selectedValues.map(
14352
- (option) => renderChip ? /* @__PURE__ */ jsx156(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsxs100(
14410
+ (option) => renderChip ? /* @__PURE__ */ jsx157(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsxs101(
14353
14411
  "span",
14354
14412
  {
14355
14413
  className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]",
14356
14414
  children: [
14357
- /* @__PURE__ */ jsx156("span", { className: "whitespace-nowrap", children: option.label }),
14358
- !readOnly && /* @__PURE__ */ jsx156(
14415
+ /* @__PURE__ */ jsx157("span", { className: "whitespace-nowrap", children: option.label }),
14416
+ !readOnly && /* @__PURE__ */ jsx157(
14359
14417
  "button",
14360
14418
  {
14361
14419
  type: "button",
@@ -14365,7 +14423,7 @@ function DashboardMultiSelectInternal({
14365
14423
  },
14366
14424
  className: "flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
14367
14425
  "aria-label": `Remove ${typeof option.label === "string" ? option.label : String(option.value)}`,
14368
- children: /* @__PURE__ */ jsx156(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
14426
+ children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
14369
14427
  }
14370
14428
  )
14371
14429
  ]
@@ -14373,7 +14431,7 @@ function DashboardMultiSelectInternal({
14373
14431
  String(option.value)
14374
14432
  )
14375
14433
  ),
14376
- /* @__PURE__ */ jsx156(
14434
+ /* @__PURE__ */ jsx157(
14377
14435
  "input",
14378
14436
  {
14379
14437
  ref: inputRef,
@@ -14402,9 +14460,9 @@ function DashboardMultiSelectInternal({
14402
14460
  "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
14403
14461
  }
14404
14462
  ),
14405
- /* @__PURE__ */ jsxs100("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
14406
- loading && /* @__PURE__ */ jsx156(ThreeDotsLoader, { height: 18, width: 18 }),
14407
- hasValue && !readOnly && /* @__PURE__ */ jsx156(
14463
+ /* @__PURE__ */ jsxs101("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
14464
+ loading && /* @__PURE__ */ jsx157(ThreeDotsLoader, { height: 18, width: 18 }),
14465
+ hasValue && !readOnly && /* @__PURE__ */ jsx157(
14408
14466
  "button",
14409
14467
  {
14410
14468
  type: "button",
@@ -14414,10 +14472,10 @@ function DashboardMultiSelectInternal({
14414
14472
  },
14415
14473
  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]",
14416
14474
  "aria-label": "Clear all",
14417
- children: /* @__PURE__ */ jsx156(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
14475
+ children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
14418
14476
  }
14419
14477
  ),
14420
- /* @__PURE__ */ jsx156(
14478
+ /* @__PURE__ */ jsx157(
14421
14479
  RotateArrow,
14422
14480
  {
14423
14481
  shouldRotate: isOpen,
@@ -14430,7 +14488,7 @@ function DashboardMultiSelectInternal({
14430
14488
  ]
14431
14489
  }
14432
14490
  ),
14433
- /* @__PURE__ */ jsx156(
14491
+ /* @__PURE__ */ jsx157(
14434
14492
  Fieldset,
14435
14493
  {
14436
14494
  isFocused: isFocused || isOpen,
@@ -14448,15 +14506,35 @@ function DashboardMultiSelectInternal({
14448
14506
  onClick: handleContainerClick
14449
14507
  }
14450
14508
  ),
14451
- isOpen && /* @__PURE__ */ jsxs100(
14452
- "div",
14509
+ /* @__PURE__ */ jsxs101(
14510
+ SelectMenuPanel,
14453
14511
  {
14454
- className: cn(
14455
- "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
14456
- dropdownClassName
14457
- ),
14512
+ isOpen,
14513
+ isMobile: isMobile2,
14514
+ onClose: () => {
14515
+ setIsOpen(false);
14516
+ setIsFocused(false);
14517
+ },
14518
+ title: typeof label === "string" ? label : void 0,
14519
+ className: dropdownClassName,
14520
+ drawerClassName,
14458
14521
  children: [
14459
- /* @__PURE__ */ jsx156(
14522
+ isMobile2 && /* @__PURE__ */ jsx157("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx157(
14523
+ "input",
14524
+ {
14525
+ ref: mobileSearchInputRef,
14526
+ type: "text",
14527
+ value: searchValue,
14528
+ placeholder: placeholder ?? "",
14529
+ onChange: (event) => setSearchValue(event.target.value),
14530
+ onKeyDown: handleInputKeyDown,
14531
+ autoComplete: "off",
14532
+ "aria-controls": listboxId,
14533
+ "aria-activedescendant": highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
14534
+ className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
14535
+ }
14536
+ ) }),
14537
+ /* @__PURE__ */ jsx157(
14460
14538
  SelectMenu,
14461
14539
  {
14462
14540
  id: listboxId,
@@ -14478,7 +14556,7 @@ function DashboardMultiSelectInternal({
14478
14556
  isMulti: true
14479
14557
  }
14480
14558
  ),
14481
- canCreateNewOption && /* @__PURE__ */ jsx156(
14559
+ canCreateNewOption && /* @__PURE__ */ jsx157(
14482
14560
  "button",
14483
14561
  {
14484
14562
  type: "button",
@@ -14491,9 +14569,9 @@ function DashboardMultiSelectInternal({
14491
14569
  }
14492
14570
  )
14493
14571
  ] }),
14494
- !errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14495
- !errorMessage && helperText && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14496
- errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx156(
14572
+ !errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14573
+ !errorMessage && helperText && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14574
+ errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx157(
14497
14575
  FieldErrorMessage,
14498
14576
  {
14499
14577
  id: errorId,
@@ -14511,10 +14589,10 @@ var DashboardMultiSelect = React56.forwardRef(
14511
14589
 
14512
14590
  // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
14513
14591
  import * as React57 from "react";
14514
- import { jsx as jsx157 } from "react/jsx-runtime";
14592
+ import { jsx as jsx158 } from "react/jsx-runtime";
14515
14593
  var DashboardCreatableMultiSelect = React57.forwardRef(
14516
14594
  function DashboardCreatableMultiSelect2(props, ref) {
14517
- return /* @__PURE__ */ jsx157(DashboardMultiSelect, { ref, ...props, isCreatable: true });
14595
+ return /* @__PURE__ */ jsx158(DashboardMultiSelect, { ref, ...props, isCreatable: true });
14518
14596
  }
14519
14597
  );
14520
14598
 
@@ -14522,7 +14600,7 @@ var DashboardCreatableMultiSelect = React57.forwardRef(
14522
14600
  import * as React58 from "react";
14523
14601
  import { ChevronDown as ChevronDown5 } from "lucide-react";
14524
14602
  import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
14525
- import { jsx as jsx158, jsxs as jsxs101 } from "react/jsx-runtime";
14603
+ import { jsx as jsx159, jsxs as jsxs102 } from "react/jsx-runtime";
14526
14604
  var DEFAULT_ITEM_HEIGHT = 60;
14527
14605
  var DEFAULT_LIST_HEIGHT = 322;
14528
14606
  var DEFAULT_OVERSCAN = 5;
@@ -14546,6 +14624,7 @@ function DashboardInfiniteScrollSelectInternal({
14546
14624
  className,
14547
14625
  menuClassName,
14548
14626
  dropdownClassName,
14627
+ drawerClassName,
14549
14628
  name,
14550
14629
  width,
14551
14630
  noOptionsMessage,
@@ -14570,6 +14649,7 @@ function DashboardInfiniteScrollSelectInternal({
14570
14649
  const [isOpen, setIsOpen] = React58.useState(false);
14571
14650
  const [searchValue, setSearchValue] = React58.useState("");
14572
14651
  const [highlightedIndex, setHighlightedIndex] = React58.useState(-1);
14652
+ const isMobile2 = useIsMobile();
14573
14653
  const hasValue = Boolean(value);
14574
14654
  const isEmpty = !hasValue;
14575
14655
  const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -14594,7 +14674,7 @@ function DashboardInfiniteScrollSelectInternal({
14594
14674
  useOutsideClick({
14595
14675
  elementRef: containerRef,
14596
14676
  onOutsideClick: () => setIsOpen(false),
14597
- isDisabled: !isOpen
14677
+ isDisabled: !isOpen || isMobile2
14598
14678
  });
14599
14679
  React58.useEffect(() => {
14600
14680
  if (isBlocked) setIsOpen(false);
@@ -14689,7 +14769,7 @@ function DashboardInfiniteScrollSelectInternal({
14689
14769
  const emptyMessage = noOptionsMessage?.();
14690
14770
  const totalSize = virtualizer.getTotalSize();
14691
14771
  const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
14692
- return /* @__PURE__ */ jsxs101(
14772
+ return /* @__PURE__ */ jsxs102(
14693
14773
  "div",
14694
14774
  {
14695
14775
  ref: containerRef,
@@ -14701,9 +14781,9 @@ function DashboardInfiniteScrollSelectInternal({
14701
14781
  ),
14702
14782
  style: wrapperWidth ? { width: wrapperWidth } : void 0,
14703
14783
  children: [
14704
- name && /* @__PURE__ */ jsx158("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
14705
- /* @__PURE__ */ jsxs101("div", { className: "relative min-h-[68px] w-full", children: [
14706
- topLabel && /* @__PURE__ */ jsx158(
14784
+ name && /* @__PURE__ */ jsx159("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
14785
+ /* @__PURE__ */ jsxs102("div", { className: "relative min-h-[68px] w-full", children: [
14786
+ topLabel && /* @__PURE__ */ jsx159(
14707
14787
  "label",
14708
14788
  {
14709
14789
  htmlFor: triggerId,
@@ -14711,8 +14791,8 @@ function DashboardInfiniteScrollSelectInternal({
14711
14791
  children: topLabel
14712
14792
  }
14713
14793
  ),
14714
- /* @__PURE__ */ jsxs101("div", { className: "relative w-full", children: [
14715
- /* @__PURE__ */ jsxs101(
14794
+ /* @__PURE__ */ jsxs102("div", { className: "relative w-full", children: [
14795
+ /* @__PURE__ */ jsxs102(
14716
14796
  "button",
14717
14797
  {
14718
14798
  id: triggerId,
@@ -14736,10 +14816,10 @@ function DashboardInfiniteScrollSelectInternal({
14736
14816
  loading && "cursor-progress"
14737
14817
  ),
14738
14818
  children: [
14739
- /* @__PURE__ */ jsx158("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
14740
- /* @__PURE__ */ jsxs101("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
14741
- loading && /* @__PURE__ */ jsx158(ThreeDotsLoader, { height: 18, width: 18 }),
14742
- /* @__PURE__ */ jsx158(
14819
+ /* @__PURE__ */ jsx159("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
14820
+ /* @__PURE__ */ jsxs102("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
14821
+ loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
14822
+ /* @__PURE__ */ jsx159(
14743
14823
  ChevronDown5,
14744
14824
  {
14745
14825
  size: 16,
@@ -14753,7 +14833,7 @@ function DashboardInfiniteScrollSelectInternal({
14753
14833
  ]
14754
14834
  }
14755
14835
  ),
14756
- /* @__PURE__ */ jsx158(
14836
+ /* @__PURE__ */ jsx159(
14757
14837
  Fieldset,
14758
14838
  {
14759
14839
  isFocused: isOpen,
@@ -14770,15 +14850,17 @@ function DashboardInfiniteScrollSelectInternal({
14770
14850
  onClick: !isBlocked ? toggleMenu : void 0
14771
14851
  }
14772
14852
  ),
14773
- isOpen && /* @__PURE__ */ jsxs101(
14774
- "div",
14853
+ /* @__PURE__ */ jsxs102(
14854
+ SelectMenuPanel,
14775
14855
  {
14776
- className: cn(
14777
- "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
14778
- dropdownClassName
14779
- ),
14856
+ isOpen,
14857
+ isMobile: isMobile2,
14858
+ onClose: () => setIsOpen(false),
14859
+ title: typeof label === "string" ? label : void 0,
14860
+ className: dropdownClassName,
14861
+ drawerClassName,
14780
14862
  children: [
14781
- searchable && /* @__PURE__ */ jsx158("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx158(
14863
+ searchable && /* @__PURE__ */ jsx159("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx159(
14782
14864
  "input",
14783
14865
  {
14784
14866
  ref: searchInputRef,
@@ -14793,13 +14875,13 @@ function DashboardInfiniteScrollSelectInternal({
14793
14875
  className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
14794
14876
  }
14795
14877
  ) }),
14796
- itemCount === 0 ? /* @__PURE__ */ jsx158("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ jsx158(
14878
+ itemCount === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ jsx159(
14797
14879
  "div",
14798
14880
  {
14799
14881
  ref: scrollRef,
14800
14882
  className: cn("overflow-y-auto", menuClassName),
14801
14883
  style: { height: `${measuredListHeight}px` },
14802
- children: /* @__PURE__ */ jsx158(
14884
+ children: /* @__PURE__ */ jsx159(
14803
14885
  "div",
14804
14886
  {
14805
14887
  id: listboxId,
@@ -14816,7 +14898,7 @@ function DashboardInfiniteScrollSelectInternal({
14816
14898
  const isSelected = !isLoaderRow && option ? option.value === value?.value : false;
14817
14899
  const isHighlighted = virtualItem.index === highlightedIndex;
14818
14900
  const isOptionDisabled = Boolean(isBlocked || option?.isDisabled);
14819
- return /* @__PURE__ */ jsx158(
14901
+ return /* @__PURE__ */ jsx159(
14820
14902
  "div",
14821
14903
  {
14822
14904
  "data-index": virtualItem.index,
@@ -14825,10 +14907,10 @@ function DashboardInfiniteScrollSelectInternal({
14825
14907
  height: `${virtualItem.size}px`,
14826
14908
  transform: `translateY(${virtualItem.start}px)`
14827
14909
  },
14828
- children: isLoaderRow ? /* @__PURE__ */ jsxs101("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
14829
- /* @__PURE__ */ jsx158(ThreeDotsLoader, { height: 18, width: 18 }),
14830
- /* @__PURE__ */ jsx158("span", { children: loadingMoreText })
14831
- ] }) : /* @__PURE__ */ jsxs101(
14910
+ children: isLoaderRow ? /* @__PURE__ */ jsxs102("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
14911
+ /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
14912
+ /* @__PURE__ */ jsx159("span", { children: loadingMoreText })
14913
+ ] }) : /* @__PURE__ */ jsxs102(
14832
14914
  "button",
14833
14915
  {
14834
14916
  id: getOptionId2(virtualItem.index),
@@ -14847,8 +14929,8 @@ function DashboardInfiniteScrollSelectInternal({
14847
14929
  isOptionDisabled && "cursor-default opacity-30"
14848
14930
  ),
14849
14931
  children: [
14850
- /* @__PURE__ */ jsx158("span", { className: "block break-words", children: option?.label }),
14851
- option?.description && /* @__PURE__ */ jsx158("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
14932
+ /* @__PURE__ */ jsx159("span", { className: "block break-words", children: option?.label }),
14933
+ option?.description && /* @__PURE__ */ jsx159("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
14852
14934
  ]
14853
14935
  }
14854
14936
  )
@@ -14864,9 +14946,9 @@ function DashboardInfiniteScrollSelectInternal({
14864
14946
  }
14865
14947
  )
14866
14948
  ] }),
14867
- !errorMessage && optional && /* @__PURE__ */ jsx158("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14868
- !errorMessage && helperText && /* @__PURE__ */ jsx158("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14869
- errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx158(
14949
+ !errorMessage && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14950
+ !errorMessage && helperText && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14951
+ errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx159(
14870
14952
  FieldErrorMessage,
14871
14953
  {
14872
14954
  id: errorId,
@@ -14888,7 +14970,7 @@ import * as React59 from "react";
14888
14970
  import { ChevronDown as ChevronDown6, Search as Search4 } from "lucide-react";
14889
14971
  import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
14890
14972
  import { useCallback as useCallback35 } from "react";
14891
- import { jsx as jsx159, jsxs as jsxs102 } from "react/jsx-runtime";
14973
+ import { jsx as jsx160, jsxs as jsxs103 } from "react/jsx-runtime";
14892
14974
  var ROW_HEIGHT = 48;
14893
14975
  var DESKTOP_LIST_HEIGHT = 280;
14894
14976
  var MOBILE_LIST_HEIGHT = 420;
@@ -15057,7 +15139,7 @@ var SearchableSelectInternal = ({
15057
15139
  }
15058
15140
  }
15059
15141
  }
15060
- const content = /* @__PURE__ */ jsx159(
15142
+ const content = /* @__PURE__ */ jsx160(
15061
15143
  SearchableSelectContent,
15062
15144
  {
15063
15145
  inputId: searchInputId,
@@ -15085,9 +15167,9 @@ var SearchableSelectInternal = ({
15085
15167
  }
15086
15168
  );
15087
15169
  React59.useImperativeHandle(ref, () => triggerRef.current, []);
15088
- return /* @__PURE__ */ jsxs102("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
15089
- name && /* @__PURE__ */ jsx159("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
15090
- /* @__PURE__ */ jsx159(
15170
+ return /* @__PURE__ */ jsxs103("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
15171
+ name && /* @__PURE__ */ jsx160("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
15172
+ /* @__PURE__ */ jsx160(
15091
15173
  FieldTrigger,
15092
15174
  {
15093
15175
  id: `${reactId}-trigger`,
@@ -15122,7 +15204,7 @@ var SearchableSelectInternal = ({
15122
15204
  },
15123
15205
  onKeyDown: handleTriggerKeyDown,
15124
15206
  onBlur,
15125
- trailingAdornment: /* @__PURE__ */ jsx159(
15207
+ trailingAdornment: /* @__PURE__ */ jsx160(
15126
15208
  ChevronDown6,
15127
15209
  {
15128
15210
  className: cn(
@@ -15133,7 +15215,7 @@ var SearchableSelectInternal = ({
15133
15215
  )
15134
15216
  }
15135
15217
  ),
15136
- isMobile2 ? /* @__PURE__ */ jsx159(
15218
+ isMobile2 ? /* @__PURE__ */ jsx160(
15137
15219
  Drawer,
15138
15220
  {
15139
15221
  open,
@@ -15145,13 +15227,13 @@ var SearchableSelectInternal = ({
15145
15227
  }
15146
15228
  closeSelect();
15147
15229
  },
15148
- children: /* @__PURE__ */ jsxs102(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
15149
- /* @__PURE__ */ jsx159(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
15150
- /* @__PURE__ */ jsx159(DrawerDescription, { className: "sr-only", children: label }),
15151
- /* @__PURE__ */ jsx159("div", { className: "px-5 pb-5 pt-1", children: content })
15230
+ children: /* @__PURE__ */ jsxs103(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
15231
+ /* @__PURE__ */ jsx160(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
15232
+ /* @__PURE__ */ jsx160(DrawerDescription, { className: "sr-only", children: label }),
15233
+ /* @__PURE__ */ jsx160("div", { className: "px-5 pb-5 pt-1", children: content })
15152
15234
  ] })
15153
15235
  }
15154
- ) : open ? /* @__PURE__ */ jsx159(
15236
+ ) : open ? /* @__PURE__ */ jsx160(
15155
15237
  "div",
15156
15238
  {
15157
15239
  className: cn(
@@ -15218,16 +15300,16 @@ function SearchableSelectContent({
15218
15300
  virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
15219
15301
  }
15220
15302
  }, [highlightedIndex, virtualizer]);
15221
- return /* @__PURE__ */ jsxs102("div", { className: "p-2", children: [
15222
- /* @__PURE__ */ jsxs102("div", { className: "relative mb-2", children: [
15223
- /* @__PURE__ */ jsx159(
15303
+ return /* @__PURE__ */ jsxs103("div", { className: "p-2", children: [
15304
+ /* @__PURE__ */ jsxs103("div", { className: "relative mb-2", children: [
15305
+ /* @__PURE__ */ jsx160(
15224
15306
  Search4,
15225
15307
  {
15226
15308
  "aria-hidden": "true",
15227
15309
  className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
15228
15310
  }
15229
15311
  ),
15230
- /* @__PURE__ */ jsx159(
15312
+ /* @__PURE__ */ jsx160(
15231
15313
  "input",
15232
15314
  {
15233
15315
  id: inputId,
@@ -15246,7 +15328,7 @@ function SearchableSelectContent({
15246
15328
  }
15247
15329
  )
15248
15330
  ] }),
15249
- loading && options.length === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx159(
15331
+ loading && options.length === 0 ? /* @__PURE__ */ jsx160("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx160("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx160(
15250
15332
  "div",
15251
15333
  {
15252
15334
  id: listboxId,
@@ -15255,7 +15337,7 @@ function SearchableSelectContent({
15255
15337
  "aria-labelledby": labelId,
15256
15338
  className: cn("overflow-y-auto outline-none", menuClassName),
15257
15339
  style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
15258
- children: /* @__PURE__ */ jsx159(
15340
+ children: /* @__PURE__ */ jsx160(
15259
15341
  "div",
15260
15342
  {
15261
15343
  className: "relative w-full",
@@ -15263,7 +15345,7 @@ function SearchableSelectContent({
15263
15345
  children: virtualItems.map((virtualItem) => {
15264
15346
  const option = options[virtualItem.index];
15265
15347
  if (!option) {
15266
- return /* @__PURE__ */ jsx159(
15348
+ return /* @__PURE__ */ jsx160(
15267
15349
  "div",
15268
15350
  {
15269
15351
  className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -15278,7 +15360,7 @@ function SearchableSelectContent({
15278
15360
  }
15279
15361
  const isSelected = value?.value === option.value;
15280
15362
  const isHighlighted = virtualItem.index === highlightedIndex;
15281
- return /* @__PURE__ */ jsx159(
15363
+ return /* @__PURE__ */ jsx160(
15282
15364
  "button",
15283
15365
  {
15284
15366
  id: getOptionId(idPrefix, virtualItem.index),
@@ -15300,7 +15382,7 @@ function SearchableSelectContent({
15300
15382
  height: `${virtualItem.size}px`,
15301
15383
  transform: `translateY(${virtualItem.start}px)`
15302
15384
  },
15303
- children: /* @__PURE__ */ jsx159("span", { className: "truncate text-center", children: String(option.label) })
15385
+ children: /* @__PURE__ */ jsx160("span", { className: "truncate text-center", children: String(option.label) })
15304
15386
  },
15305
15387
  `${String(option.value)}-${virtualItem.index}`
15306
15388
  );
@@ -15386,14 +15468,14 @@ function getErrorMessage(error) {
15386
15468
 
15387
15469
  // src/lib/toastResponseError.tsx
15388
15470
  import i18next from "i18next";
15389
- import { jsx as jsx160, jsxs as jsxs103 } from "react/jsx-runtime";
15471
+ import { jsx as jsx161, jsxs as jsxs104 } from "react/jsx-runtime";
15390
15472
  function addSupportEmailToMessage(message, prefixText) {
15391
15473
  if (typeof message !== "string") {
15392
15474
  return message;
15393
15475
  }
15394
15476
  const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
15395
- return /* @__PURE__ */ jsxs103("div", { children: [
15396
- /* @__PURE__ */ jsx160("div", { children: builtMessage }),
15477
+ return /* @__PURE__ */ jsxs104("div", { children: [
15478
+ /* @__PURE__ */ jsx161("div", { children: builtMessage }),
15397
15479
  i18next.t("reach_us_at_email")
15398
15480
  ] });
15399
15481
  }