@trackunit/react-form-components 1.8.15 → 1.8.18

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 (3) hide show
  1. package/index.cjs.js +106 -108
  2. package/index.esm.js +106 -108
  3. package/package.json +8 -8
package/index.cjs.js CHANGED
@@ -103,9 +103,9 @@ const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
103
103
  "component-baseInput-shadow",
104
104
  "component-baseInput-border",
105
105
  "component-baseInput-background",
106
- "border-slate-300",
107
- "hover:border-slate-400",
108
- "hover:bg-slate-50",
106
+ "border-neutral-300",
107
+ "hover:border-neutral-400",
108
+ "hover:bg-neutral-50",
109
109
  "transition",
110
110
  ]);
111
111
  const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "hover:bg-neutral-100", "hover:border-neutral-300"]);
@@ -172,7 +172,16 @@ const cvaInputItemPlacementManager = cssClassVarianceUtilities.cvaMerge([], {
172
172
  },
173
173
  });
174
174
  const cvaAccessoriesContainer = cssClassVarianceUtilities.cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
175
- const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-slate-900", "placeholder-slate-400", "text-sm", "truncate"], {
175
+ const cvaInputField = cssClassVarianceUtilities.cvaMerge([
176
+ "w-full",
177
+ "px-3",
178
+ "border-0",
179
+ "bg-transparent",
180
+ "text-neutral-900",
181
+ "placeholder-neutral-400",
182
+ "text-sm",
183
+ "truncate",
184
+ ], {
176
185
  variants: {
177
186
  size: {
178
187
  small: ["py-0.5", "text-xs"],
@@ -180,11 +189,11 @@ const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "bor
180
189
  large: ["py-2"],
181
190
  },
182
191
  disabled: {
183
- true: ["text-slate-400"],
192
+ true: ["text-neutral-400"],
184
193
  false: [""],
185
194
  },
186
195
  readOnly: {
187
- true: ["text-slate-500"],
196
+ true: ["text-neutral-500"],
188
197
  false: [""],
189
198
  },
190
199
  },
@@ -192,7 +201,7 @@ const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "bor
192
201
  {
193
202
  disabled: true,
194
203
  readOnly: true,
195
- className: "text-slate-400",
204
+ className: "text-neutral-400",
196
205
  },
197
206
  ],
198
207
  defaultVariants: {
@@ -206,9 +215,9 @@ const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
206
215
  "justify-center",
207
216
  "items-center",
208
217
  "px-3",
209
- "border-slate-300",
210
- "text-slate-500",
211
- "bg-slate-50",
218
+ "border-neutral-300",
219
+ "text-neutral-500",
220
+ "bg-neutral-50",
212
221
  "text-nowrap",
213
222
  ], {
214
223
  variants: {
@@ -230,7 +239,7 @@ const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
230
239
  "flex",
231
240
  "justify-center",
232
241
  "items-center",
233
- "text-slate-400",
242
+ "text-neutral-400",
234
243
  "hover:component-search-prefix",
235
244
  "component-baseInput-prefix",
236
245
  "component-search-borderless",
@@ -238,7 +247,7 @@ const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
238
247
  ], {
239
248
  variants: {
240
249
  disabled: {
241
- true: ["text-slate-500"],
250
+ true: ["text-neutral-500"],
242
251
  false: [""],
243
252
  },
244
253
  },
@@ -246,10 +255,10 @@ const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
246
255
  disabled: false,
247
256
  },
248
257
  });
249
- const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pr-2"], {
258
+ const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "pr-2"], {
250
259
  variants: {
251
260
  disabled: {
252
- true: ["text-slate-500"],
261
+ true: ["text-neutral-500"],
253
262
  false: [""],
254
263
  },
255
264
  },
@@ -629,8 +638,8 @@ const cvaTextAreaBaseInput = cssClassVarianceUtilities.cvaMerge([
629
638
  "px-3",
630
639
  "py-2",
631
640
  "text-base",
632
- "text-slate-900",
633
- "placeholder-slate-400",
641
+ "text-neutral-900",
642
+ "placeholder-neutral-400",
634
643
  "w-full",
635
644
  "h-20",
636
645
  "transition",
@@ -684,7 +693,7 @@ const cvaBinaryControlDescriptionTooltip = cssClassVarianceUtilities.cvaMerge(["
684
693
  const cvaBinaryControlDescription = cssClassVarianceUtilities.cvaMerge([
685
694
  "text-sm",
686
695
  "font-normal",
687
- "text-slate-500",
696
+ "text-neutral-500",
688
697
  "text-left",
689
698
  "whitespace-nowrap",
690
699
  "select-none",
@@ -693,7 +702,7 @@ const cvaBinaryControlDescription = cssClassVarianceUtilities.cvaMerge([
693
702
  ], {
694
703
  variants: {
695
704
  disabled: {
696
- true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
705
+ true: ["text-neutral-400", "hover:text-neutral-400", "group-hover:text-neutral-400"],
697
706
  false: "",
698
707
  },
699
708
  },
@@ -702,11 +711,11 @@ const cvaBinaryControlSuffixContainer = cssClassVarianceUtilities.cvaMerge(["fle
702
711
 
703
712
  const cvaLabel = cssClassVarianceUtilities.cvaMerge([
704
713
  "text-sm",
705
- "text-slate-700",
706
- "hover:text-slate-800",
707
- "group-hover:text-slate-800",
708
- "active:text-slate-800",
709
- "group-active:text-slate-800",
714
+ "text-neutral-700",
715
+ "hover:text-neutral-800",
716
+ "group-hover:text-neutral-800",
717
+ "active:text-neutral-800",
718
+ "group-active:text-neutral-800",
710
719
  ], {
711
720
  variants: {
712
721
  invalid: {
@@ -714,7 +723,7 @@ const cvaLabel = cssClassVarianceUtilities.cvaMerge([
714
723
  false: "",
715
724
  },
716
725
  disabled: {
717
- true: "text-slate-400 hover:text-slate-400 active:text-slate-400 group-hover:text-slate-400 group-active:text-slate-400",
726
+ true: "text-neutral-400 hover:text-neutral-400 active:text-neutral-400 group-hover:text-neutral-400 group-active:text-neutral-400",
718
727
  false: "",
719
728
  },
720
729
  truncate: {
@@ -745,10 +754,10 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
745
754
  "border-solid",
746
755
  "border",
747
756
  "shrink-0",
748
- "border-slate-300",
757
+ "border-neutral-300",
749
758
  "flex",
750
759
  "rounded",
751
- "hover:bg-slate-100",
760
+ "hover:bg-neutral-100",
752
761
  "bg-white",
753
762
  "items-center",
754
763
  "shadow-sm",
@@ -756,7 +765,7 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
756
765
  "box-border",
757
766
  "transition",
758
767
  "outline-0",
759
- "active:bg-slate-200",
768
+ "active:bg-neutral-200",
760
769
  "active:ring-2",
761
770
  "active:ring-inset",
762
771
  "active:ring-primary-700",
@@ -780,7 +789,7 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
780
789
  "group-hover:bg-primary-700",
781
790
  "group-hover:border-primary-700",
782
791
  ],
783
- deselected: ["group-hover:bg-slate-100"],
792
+ deselected: ["group-hover:bg-neutral-100"],
784
793
  indeterminate: [
785
794
  "bg-primary-600",
786
795
  "border-primary-600",
@@ -794,18 +803,18 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
794
803
  },
795
804
  disabled: {
796
805
  true: [
797
- "bg-slate-300",
798
- "border-slate-300",
806
+ "bg-neutral-300",
807
+ "border-neutral-300",
799
808
  "cursor-not-allowed",
800
- "hover:bg-slate-300",
801
- "active:bg-slate-300",
809
+ "hover:bg-neutral-300",
810
+ "active:bg-neutral-300",
802
811
  "group-active:ring-0",
803
812
  "group-active:ring-inset",
804
- "hover:bg-slate-300",
805
- "hover:border-slate-300",
806
- "group-hover:bg-slate-300",
807
- "group-hover:border-slate-300",
808
- "active:bg-slate-300",
813
+ "hover:bg-neutral-300",
814
+ "hover:border-neutral-300",
815
+ "group-hover:bg-neutral-300",
816
+ "group-hover:border-neutral-300",
817
+ "active:bg-neutral-300",
809
818
  "group-active:ring-0",
810
819
  ],
811
820
  false: "",
@@ -906,7 +915,7 @@ const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInval
906
915
 
907
916
  const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap", "group", "form-group"]);
908
917
  const cvaFormGroupContainerBefore = cssClassVarianceUtilities.cvaMerge(["flex", "mb-1", "items-center"]);
909
- const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
918
+ const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"], {
910
919
  variants: {
911
920
  invalid: {
912
921
  true: "text-danger-500",
@@ -1084,12 +1093,12 @@ const cvaDropZone = cssClassVarianceUtilities.cvaMerge([
1084
1093
  "flex",
1085
1094
  "component-baseInput-background",
1086
1095
  "justify-center",
1087
- "text-slate-500",
1096
+ "text-neutral-500",
1088
1097
  "rounded-lg",
1089
1098
  "border-2",
1090
- "border-gray-200",
1099
+ "border-neutral-200",
1091
1100
  "border-dashed",
1092
- "hover:bg-slate-100",
1101
+ "hover:bg-neutral-100",
1093
1102
  "hover:border-solid",
1094
1103
  "hover:border-primary-500",
1095
1104
  ], {
@@ -1099,10 +1108,16 @@ const cvaDropZone = cssClassVarianceUtilities.cvaMerge([
1099
1108
  medium: ["p-4"],
1100
1109
  large: ["p-8"],
1101
1110
  },
1102
- disabled: { true: ["bg-slate-100", "hover:bg-slate-100"], false: "" },
1103
- dragActive: { true: ["border-gray-200", "bg-slate-100"], false: "" },
1111
+ disabled: { true: ["bg-neutral-100", "hover:bg-neutral-100"], false: "" },
1112
+ dragActive: { true: ["border-neutral-200", "bg-neutral-100"], false: "" },
1104
1113
  dropComplete: {
1105
- true: ["border-solid", "border-primary-500", "bg-slate-100", "hover:border-solid", "hover:border-gray-200"],
1114
+ true: [
1115
+ "border-solid",
1116
+ "border-primary-500",
1117
+ "bg-neutral-100",
1118
+ "hover:border-solid",
1119
+ "hover:border-neutral-200",
1120
+ ],
1106
1121
  false: "",
1107
1122
  },
1108
1123
  invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
@@ -1120,7 +1135,7 @@ const cvaDropZoneLabel = cssClassVarianceUtilities.cvaMerge([
1120
1135
  ]);
1121
1136
  const cvaDropZoneIconBackground = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
1122
1137
  variants: {
1123
- invalid: { true: ["bg-red-100"], false: ["bg-slate-200"] },
1138
+ invalid: { true: ["bg-red-100"], false: ["bg-neutral-200"] },
1124
1139
  },
1125
1140
  });
1126
1141
 
@@ -1186,7 +1201,7 @@ const DropZone = ({ className, dataTestId, filesSelected, label = jsxRuntime.jsx
1186
1201
  e.preventDefault();
1187
1202
  e.stopPropagation();
1188
1203
  }
1189
- }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
1204
+ }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
1190
1205
  };
1191
1206
 
1192
1207
  // Doing the same check as we do on the backend
@@ -1384,10 +1399,10 @@ const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
1384
1399
  "bg-white",
1385
1400
  "outline",
1386
1401
  "outline-1",
1387
- "outline-slate-300",
1388
- "hover:bg-slate-100",
1389
- "focus:bg-slate-200",
1390
- "active:bg-slate-200",
1402
+ "outline-neutral-300",
1403
+ "hover:bg-neutral-100",
1404
+ "focus:bg-neutral-200",
1405
+ "active:bg-neutral-200",
1391
1406
  "peer-checked:bg-primary-50",
1392
1407
  "peer-checked:outline-primary-600",
1393
1408
  "peer-checked:outline-2",
@@ -1397,68 +1412,51 @@ const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
1397
1412
  "items-center",
1398
1413
  "text-center",
1399
1414
  "rounded-md",
1400
- "relative"
1415
+ "relative",
1401
1416
  ], {
1402
1417
  variants: {
1403
1418
  disabled: {
1404
- true: ["cursor-not-allowed", "bg-slate-100"],
1419
+ true: ["cursor-not-allowed", "bg-neutral-100"],
1405
1420
  false: ["cursor-pointer"],
1406
1421
  },
1407
1422
  layout: {
1408
- default: [
1409
- "flex-col",
1410
- "p-responsive-space",
1411
- "w-full",
1412
- "aspect-square",
1413
- ],
1414
- compact: [
1415
- "px-3",
1416
- "py-1.5",
1417
- "h-8",
1418
- "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]",
1419
- "flex-row",
1420
- "w-fit",
1421
- ],
1423
+ default: ["flex-col", "p-responsive-space", "w-full", "aspect-square"],
1424
+ compact: ["px-3", "py-1.5", "h-8", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]", "flex-row", "w-fit"],
1422
1425
  },
1423
1426
  },
1424
1427
  });
1425
1428
  const cvaOptionCardContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
1426
1429
  const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
1427
- const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge([
1428
- "text-slate-600",
1429
- ], {
1430
+ const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge(["text-neutral-600"], {
1430
1431
  variants: {
1431
1432
  layout: {
1432
1433
  default: ["text-lg", "line-clamp-2"],
1433
- compact: ["text-sm", "line-clamp-1"]
1434
+ compact: ["text-sm", "line-clamp-1"],
1434
1435
  },
1435
1436
  disabled: {
1436
- true: ["text-slate-400"],
1437
- false: ["focus:text-slate-800", "active:text-slate-800"]
1437
+ true: ["text-neutral-400"],
1438
+ false: ["focus:text-neutral-800", "active:text-neutral-800"],
1438
1439
  },
1439
1440
  },
1440
1441
  });
1441
- const cvaOptionCardText = cssClassVarianceUtilities.cvaMerge([
1442
- "text-slate-600",
1443
- "text-sm"
1444
- ], {
1442
+ const cvaOptionCardText = cssClassVarianceUtilities.cvaMerge(["text-neutral-600", "text-sm"], {
1445
1443
  variants: {
1446
1444
  type: {
1447
1445
  subheading: ["font-medium"],
1448
- description: ["font-normal"]
1446
+ description: ["font-normal"],
1449
1447
  },
1450
1448
  disabled: {
1451
- true: ["text-slate-400"],
1452
- false: ["focus:text-slate-800", "active:text-slate-800"]
1453
- }
1454
- }
1449
+ true: ["text-neutral-400"],
1450
+ false: ["focus:text-neutral-800", "active:text-neutral-800"],
1451
+ },
1452
+ },
1455
1453
  });
1456
1454
  const cvaInput = cssClassVarianceUtilities.cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
1457
- const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-slate-400"], {
1455
+ const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"], {
1458
1456
  variants: {
1459
1457
  disabled: {
1460
- true: ["!text-slate-400"],
1461
- false: [""]
1458
+ true: ["!text-neutral-400"],
1459
+ false: [""],
1462
1460
  },
1463
1461
  },
1464
1462
  });
@@ -1638,13 +1636,13 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
1638
1636
  "bg-white",
1639
1637
  "border-solid",
1640
1638
  "border",
1641
- "border-slate-300",
1639
+ "border-neutral-300",
1642
1640
  "shadow-sm",
1643
1641
  "shrink-0",
1644
1642
  "transition",
1645
1643
  "box-border",
1646
1644
  "hover:cursor-pointer",
1647
- "hover:bg-slate-100",
1645
+ "hover:bg-neutral-100",
1648
1646
  "focus-visible:outline-primary-700",
1649
1647
  ], {
1650
1648
  variants: {
@@ -1654,10 +1652,10 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
1654
1652
  "border-4",
1655
1653
  "border-primary-600",
1656
1654
  "bg-white",
1657
- "hover:bg-slate-100",
1655
+ "hover:bg-neutral-100",
1658
1656
  "hover:cursor-pointer",
1659
1657
  "outline-0",
1660
- "active:bg-slate-200",
1658
+ "active:bg-neutral-200",
1661
1659
  "active:ring-2",
1662
1660
  "active:ring-inset",
1663
1661
  "active:ring-primary-700",
@@ -1673,11 +1671,11 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
1673
1671
  },
1674
1672
  disabled: {
1675
1673
  true: [
1676
- "bg-slate-400",
1677
- "border-slate-300",
1674
+ "bg-neutral-400",
1675
+ "border-neutral-300",
1678
1676
  "cursor-not-allowed",
1679
- "hover:bg-slate-400",
1680
- "active:bg-slate-400",
1677
+ "hover:bg-neutral-400",
1678
+ "active:bg-neutral-400",
1681
1679
  "group-active:ring-0",
1682
1680
  "group-active:ring-inset",
1683
1681
  ],
@@ -1825,7 +1823,7 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
1825
1823
  onChange(newSchedule);
1826
1824
  };
1827
1825
  return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
1828
- return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
1826
+ return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
1829
1827
  }) }));
1830
1828
  };
1831
1829
 
@@ -1997,8 +1995,8 @@ const cvaSelect = cssClassVarianceUtilities.cvaMerge([
1997
1995
  "flex",
1998
1996
  "shadow-sm",
1999
1997
  "rounded-lg",
2000
- "border-slate-300",
2001
- "hover:border-slate-400",
1998
+ "border-neutral-300",
1999
+ "hover:border-neutral-400",
2002
2000
  "hover:bg-neutral-50",
2003
2001
  "bg-white",
2004
2002
  "transition",
@@ -2016,7 +2014,7 @@ const cvaSelect = cssClassVarianceUtilities.cvaMerge([
2016
2014
  false: "",
2017
2015
  },
2018
2016
  disabled: {
2019
- true: "!bg-neutral-100 hover:border-slate-300",
2017
+ true: "!bg-neutral-100 hover:border-neutral-300",
2020
2018
  false: "",
2021
2019
  },
2022
2020
  },
@@ -2052,10 +2050,10 @@ const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge([
2052
2050
  "cursor-pointer",
2053
2051
  "items-center",
2054
2052
  "justify-center",
2055
- "text-slate-400",
2056
- "hover:text-slate-500",
2053
+ "text-neutral-400",
2054
+ "hover:text-neutral-500",
2057
2055
  ]);
2058
- const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "absolute", "inset-y-0"], {
2056
+ const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "absolute", "inset-y-0"], {
2059
2057
  variants: {
2060
2058
  kind: {
2061
2059
  prefix: ["pl-3", "left-0"],
@@ -2069,8 +2067,8 @@ const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
2069
2067
  "cursor-pointer",
2070
2068
  "items-center",
2071
2069
  "justify-center",
2072
- "text-slate-400",
2073
- "hover:text-slate-500",
2070
+ "text-neutral-400",
2071
+ "hover:text-neutral-500",
2074
2072
  "ml-1",
2075
2073
  ]);
2076
2074
  const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge([], {
@@ -2304,13 +2302,13 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2304
2302
  },
2305
2303
  SingleValue: props => {
2306
2304
  const optionPrefix = getOptionPrefix ? getOptionPrefix(props.data) : null;
2307
- return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
2305
+ return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-neutral-700" : "", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
2308
2306
  },
2309
2307
  Menu: props => {
2310
2308
  return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
2311
2309
  },
2312
2310
  Placeholder: props => {
2313
- return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...props, className: "!text-slate-400", children: props.children }));
2311
+ return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...props, className: "!text-neutral-400", children: props.children }));
2314
2312
  },
2315
2313
  MenuList: props => {
2316
2314
  return (jsxRuntime.jsx(ReactSelect.components.MenuList, { ...props, innerProps: {
@@ -2416,7 +2414,7 @@ const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabl
2416
2414
  backgroundColor: "#ffffff",
2417
2415
  borderRadius: "var(--border-radius-lg)",
2418
2416
  zIndex: "var(--z-overlay)",
2419
- borderColor: "rgb(var(--color-slate-300))",
2417
+ borderColor: "rgb(var(--color-neutral-300))",
2420
2418
  boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
2421
2419
  }),
2422
2420
  menuList: base => {
@@ -2819,8 +2817,8 @@ const cvaToggleSwitchTrack = cssClassVarianceUtilities.cvaMerge(["items-center",
2819
2817
  large: ["w-[38px]", "p-[3px]"],
2820
2818
  },
2821
2819
  disabled: {
2822
- true: ["cursor-not-allowed", "bg-slate-200"],
2823
- false: ["cursor-pointer", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"],
2820
+ true: ["cursor-not-allowed", "bg-neutral-200"],
2821
+ false: ["cursor-pointer", "bg-neutral-300", "hover:bg-neutral-400", "active:bg-neutral-500"],
2824
2822
  },
2825
2823
  toggled: {
2826
2824
  true: "", // classes moved to compoundVariants to avoid conflicts with the disabled variant
@@ -2836,7 +2834,7 @@ const cvaToggleSwitchTrack = cssClassVarianceUtilities.cvaMerge(["items-center",
2836
2834
  {
2837
2835
  disabled: true,
2838
2836
  toggled: true,
2839
- className: ["bg-slate-400"],
2837
+ className: ["bg-neutral-400"],
2840
2838
  },
2841
2839
  {
2842
2840
  disabled: false,
@@ -2953,7 +2951,7 @@ const cvaUploadInputField = cssClassVarianceUtilities.cvaMerge([
2953
2951
  "file:h-0",
2954
2952
  "file:invisible",
2955
2953
  "file:px-0",
2956
- "dark:text-gray-400",
2954
+ "dark:text-neutral-400",
2957
2955
  "self-center",
2958
2956
  ]);
2959
2957
 
package/index.esm.js CHANGED
@@ -102,9 +102,9 @@ const cvaInputBase = cvaMerge([
102
102
  "component-baseInput-shadow",
103
103
  "component-baseInput-border",
104
104
  "component-baseInput-background",
105
- "border-slate-300",
106
- "hover:border-slate-400",
107
- "hover:bg-slate-50",
105
+ "border-neutral-300",
106
+ "hover:border-neutral-400",
107
+ "hover:bg-neutral-50",
108
108
  "transition",
109
109
  ]);
110
110
  const cvaInputBaseDisabled = cvaMerge(["bg-neutral-100", "hover:bg-neutral-100", "hover:border-neutral-300"]);
@@ -171,7 +171,16 @@ const cvaInputItemPlacementManager = cvaMerge([], {
171
171
  },
172
172
  });
173
173
  const cvaAccessoriesContainer = cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
174
- const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-slate-900", "placeholder-slate-400", "text-sm", "truncate"], {
174
+ const cvaInputField = cvaMerge([
175
+ "w-full",
176
+ "px-3",
177
+ "border-0",
178
+ "bg-transparent",
179
+ "text-neutral-900",
180
+ "placeholder-neutral-400",
181
+ "text-sm",
182
+ "truncate",
183
+ ], {
175
184
  variants: {
176
185
  size: {
177
186
  small: ["py-0.5", "text-xs"],
@@ -179,11 +188,11 @@ const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent",
179
188
  large: ["py-2"],
180
189
  },
181
190
  disabled: {
182
- true: ["text-slate-400"],
191
+ true: ["text-neutral-400"],
183
192
  false: [""],
184
193
  },
185
194
  readOnly: {
186
- true: ["text-slate-500"],
195
+ true: ["text-neutral-500"],
187
196
  false: [""],
188
197
  },
189
198
  },
@@ -191,7 +200,7 @@ const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent",
191
200
  {
192
201
  disabled: true,
193
202
  readOnly: true,
194
- className: "text-slate-400",
203
+ className: "text-neutral-400",
195
204
  },
196
205
  ],
197
206
  defaultVariants: {
@@ -205,9 +214,9 @@ const cvaInputAddon = cvaMerge([
205
214
  "justify-center",
206
215
  "items-center",
207
216
  "px-3",
208
- "border-slate-300",
209
- "text-slate-500",
210
- "bg-slate-50",
217
+ "border-neutral-300",
218
+ "text-neutral-500",
219
+ "bg-neutral-50",
211
220
  "text-nowrap",
212
221
  ], {
213
222
  variants: {
@@ -229,7 +238,7 @@ const cvaInputPrefix = cvaMerge([
229
238
  "flex",
230
239
  "justify-center",
231
240
  "items-center",
232
- "text-slate-400",
241
+ "text-neutral-400",
233
242
  "hover:component-search-prefix",
234
243
  "component-baseInput-prefix",
235
244
  "component-search-borderless",
@@ -237,7 +246,7 @@ const cvaInputPrefix = cvaMerge([
237
246
  ], {
238
247
  variants: {
239
248
  disabled: {
240
- true: ["text-slate-500"],
249
+ true: ["text-neutral-500"],
241
250
  false: [""],
242
251
  },
243
252
  },
@@ -245,10 +254,10 @@ const cvaInputPrefix = cvaMerge([
245
254
  disabled: false,
246
255
  },
247
256
  });
248
- const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pr-2"], {
257
+ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "pr-2"], {
249
258
  variants: {
250
259
  disabled: {
251
- true: ["text-slate-500"],
260
+ true: ["text-neutral-500"],
252
261
  false: [""],
253
262
  },
254
263
  },
@@ -628,8 +637,8 @@ const cvaTextAreaBaseInput = cvaMerge([
628
637
  "px-3",
629
638
  "py-2",
630
639
  "text-base",
631
- "text-slate-900",
632
- "placeholder-slate-400",
640
+ "text-neutral-900",
641
+ "placeholder-neutral-400",
633
642
  "w-full",
634
643
  "h-20",
635
644
  "transition",
@@ -683,7 +692,7 @@ const cvaBinaryControlDescriptionTooltip = cvaMerge(["col-span-2", "col-start-2"
683
692
  const cvaBinaryControlDescription = cvaMerge([
684
693
  "text-sm",
685
694
  "font-normal",
686
- "text-slate-500",
695
+ "text-neutral-500",
687
696
  "text-left",
688
697
  "whitespace-nowrap",
689
698
  "select-none",
@@ -692,7 +701,7 @@ const cvaBinaryControlDescription = cvaMerge([
692
701
  ], {
693
702
  variants: {
694
703
  disabled: {
695
- true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
704
+ true: ["text-neutral-400", "hover:text-neutral-400", "group-hover:text-neutral-400"],
696
705
  false: "",
697
706
  },
698
707
  },
@@ -701,11 +710,11 @@ const cvaBinaryControlSuffixContainer = cvaMerge(["flex", "col-start-3", "items-
701
710
 
702
711
  const cvaLabel = cvaMerge([
703
712
  "text-sm",
704
- "text-slate-700",
705
- "hover:text-slate-800",
706
- "group-hover:text-slate-800",
707
- "active:text-slate-800",
708
- "group-active:text-slate-800",
713
+ "text-neutral-700",
714
+ "hover:text-neutral-800",
715
+ "group-hover:text-neutral-800",
716
+ "active:text-neutral-800",
717
+ "group-active:text-neutral-800",
709
718
  ], {
710
719
  variants: {
711
720
  invalid: {
@@ -713,7 +722,7 @@ const cvaLabel = cvaMerge([
713
722
  false: "",
714
723
  },
715
724
  disabled: {
716
- true: "text-slate-400 hover:text-slate-400 active:text-slate-400 group-hover:text-slate-400 group-active:text-slate-400",
725
+ true: "text-neutral-400 hover:text-neutral-400 active:text-neutral-400 group-hover:text-neutral-400 group-active:text-neutral-400",
717
726
  false: "",
718
727
  },
719
728
  truncate: {
@@ -744,10 +753,10 @@ const cvaCheckbox = cvaMerge([
744
753
  "border-solid",
745
754
  "border",
746
755
  "shrink-0",
747
- "border-slate-300",
756
+ "border-neutral-300",
748
757
  "flex",
749
758
  "rounded",
750
- "hover:bg-slate-100",
759
+ "hover:bg-neutral-100",
751
760
  "bg-white",
752
761
  "items-center",
753
762
  "shadow-sm",
@@ -755,7 +764,7 @@ const cvaCheckbox = cvaMerge([
755
764
  "box-border",
756
765
  "transition",
757
766
  "outline-0",
758
- "active:bg-slate-200",
767
+ "active:bg-neutral-200",
759
768
  "active:ring-2",
760
769
  "active:ring-inset",
761
770
  "active:ring-primary-700",
@@ -779,7 +788,7 @@ const cvaCheckbox = cvaMerge([
779
788
  "group-hover:bg-primary-700",
780
789
  "group-hover:border-primary-700",
781
790
  ],
782
- deselected: ["group-hover:bg-slate-100"],
791
+ deselected: ["group-hover:bg-neutral-100"],
783
792
  indeterminate: [
784
793
  "bg-primary-600",
785
794
  "border-primary-600",
@@ -793,18 +802,18 @@ const cvaCheckbox = cvaMerge([
793
802
  },
794
803
  disabled: {
795
804
  true: [
796
- "bg-slate-300",
797
- "border-slate-300",
805
+ "bg-neutral-300",
806
+ "border-neutral-300",
798
807
  "cursor-not-allowed",
799
- "hover:bg-slate-300",
800
- "active:bg-slate-300",
808
+ "hover:bg-neutral-300",
809
+ "active:bg-neutral-300",
801
810
  "group-active:ring-0",
802
811
  "group-active:ring-inset",
803
- "hover:bg-slate-300",
804
- "hover:border-slate-300",
805
- "group-hover:bg-slate-300",
806
- "group-hover:border-slate-300",
807
- "active:bg-slate-300",
812
+ "hover:bg-neutral-300",
813
+ "hover:border-neutral-300",
814
+ "group-hover:bg-neutral-300",
815
+ "group-hover:border-neutral-300",
816
+ "active:bg-neutral-300",
808
817
  "group-active:ring-0",
809
818
  ],
810
819
  false: "",
@@ -905,7 +914,7 @@ const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInval
905
914
 
906
915
  const cvaFormGroup = cvaMerge(["component-formGroup-gap", "group", "form-group"]);
907
916
  const cvaFormGroupContainerBefore = cvaMerge(["flex", "mb-1", "items-center"]);
908
- const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
917
+ const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"], {
909
918
  variants: {
910
919
  invalid: {
911
920
  true: "text-danger-500",
@@ -1083,12 +1092,12 @@ const cvaDropZone = cvaMerge([
1083
1092
  "flex",
1084
1093
  "component-baseInput-background",
1085
1094
  "justify-center",
1086
- "text-slate-500",
1095
+ "text-neutral-500",
1087
1096
  "rounded-lg",
1088
1097
  "border-2",
1089
- "border-gray-200",
1098
+ "border-neutral-200",
1090
1099
  "border-dashed",
1091
- "hover:bg-slate-100",
1100
+ "hover:bg-neutral-100",
1092
1101
  "hover:border-solid",
1093
1102
  "hover:border-primary-500",
1094
1103
  ], {
@@ -1098,10 +1107,16 @@ const cvaDropZone = cvaMerge([
1098
1107
  medium: ["p-4"],
1099
1108
  large: ["p-8"],
1100
1109
  },
1101
- disabled: { true: ["bg-slate-100", "hover:bg-slate-100"], false: "" },
1102
- dragActive: { true: ["border-gray-200", "bg-slate-100"], false: "" },
1110
+ disabled: { true: ["bg-neutral-100", "hover:bg-neutral-100"], false: "" },
1111
+ dragActive: { true: ["border-neutral-200", "bg-neutral-100"], false: "" },
1103
1112
  dropComplete: {
1104
- true: ["border-solid", "border-primary-500", "bg-slate-100", "hover:border-solid", "hover:border-gray-200"],
1113
+ true: [
1114
+ "border-solid",
1115
+ "border-primary-500",
1116
+ "bg-neutral-100",
1117
+ "hover:border-solid",
1118
+ "hover:border-neutral-200",
1119
+ ],
1105
1120
  false: "",
1106
1121
  },
1107
1122
  invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
@@ -1119,7 +1134,7 @@ const cvaDropZoneLabel = cvaMerge([
1119
1134
  ]);
1120
1135
  const cvaDropZoneIconBackground = cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
1121
1136
  variants: {
1122
- invalid: { true: ["bg-red-100"], false: ["bg-slate-200"] },
1137
+ invalid: { true: ["bg-red-100"], false: ["bg-neutral-200"] },
1123
1138
  },
1124
1139
  });
1125
1140
 
@@ -1185,7 +1200,7 @@ const DropZone = ({ className, dataTestId, filesSelected, label = jsx(DropZoneDe
1185
1200
  e.preventDefault();
1186
1201
  e.stopPropagation();
1187
1202
  }
1188
- }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
1203
+ }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
1189
1204
  };
1190
1205
 
1191
1206
  // Doing the same check as we do on the backend
@@ -1383,10 +1398,10 @@ const cvaOptionCardLabel = cvaMerge([
1383
1398
  "bg-white",
1384
1399
  "outline",
1385
1400
  "outline-1",
1386
- "outline-slate-300",
1387
- "hover:bg-slate-100",
1388
- "focus:bg-slate-200",
1389
- "active:bg-slate-200",
1401
+ "outline-neutral-300",
1402
+ "hover:bg-neutral-100",
1403
+ "focus:bg-neutral-200",
1404
+ "active:bg-neutral-200",
1390
1405
  "peer-checked:bg-primary-50",
1391
1406
  "peer-checked:outline-primary-600",
1392
1407
  "peer-checked:outline-2",
@@ -1396,68 +1411,51 @@ const cvaOptionCardLabel = cvaMerge([
1396
1411
  "items-center",
1397
1412
  "text-center",
1398
1413
  "rounded-md",
1399
- "relative"
1414
+ "relative",
1400
1415
  ], {
1401
1416
  variants: {
1402
1417
  disabled: {
1403
- true: ["cursor-not-allowed", "bg-slate-100"],
1418
+ true: ["cursor-not-allowed", "bg-neutral-100"],
1404
1419
  false: ["cursor-pointer"],
1405
1420
  },
1406
1421
  layout: {
1407
- default: [
1408
- "flex-col",
1409
- "p-responsive-space",
1410
- "w-full",
1411
- "aspect-square",
1412
- ],
1413
- compact: [
1414
- "px-3",
1415
- "py-1.5",
1416
- "h-8",
1417
- "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]",
1418
- "flex-row",
1419
- "w-fit",
1420
- ],
1422
+ default: ["flex-col", "p-responsive-space", "w-full", "aspect-square"],
1423
+ compact: ["px-3", "py-1.5", "h-8", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]", "flex-row", "w-fit"],
1421
1424
  },
1422
1425
  },
1423
1426
  });
1424
1427
  const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
1425
1428
  const cvaOptionCardContainer = cvaMerge(["contents"]);
1426
- const cvaOptionCardTitle = cvaMerge([
1427
- "text-slate-600",
1428
- ], {
1429
+ const cvaOptionCardTitle = cvaMerge(["text-neutral-600"], {
1429
1430
  variants: {
1430
1431
  layout: {
1431
1432
  default: ["text-lg", "line-clamp-2"],
1432
- compact: ["text-sm", "line-clamp-1"]
1433
+ compact: ["text-sm", "line-clamp-1"],
1433
1434
  },
1434
1435
  disabled: {
1435
- true: ["text-slate-400"],
1436
- false: ["focus:text-slate-800", "active:text-slate-800"]
1436
+ true: ["text-neutral-400"],
1437
+ false: ["focus:text-neutral-800", "active:text-neutral-800"],
1437
1438
  },
1438
1439
  },
1439
1440
  });
1440
- const cvaOptionCardText = cvaMerge([
1441
- "text-slate-600",
1442
- "text-sm"
1443
- ], {
1441
+ const cvaOptionCardText = cvaMerge(["text-neutral-600", "text-sm"], {
1444
1442
  variants: {
1445
1443
  type: {
1446
1444
  subheading: ["font-medium"],
1447
- description: ["font-normal"]
1445
+ description: ["font-normal"],
1448
1446
  },
1449
1447
  disabled: {
1450
- true: ["text-slate-400"],
1451
- false: ["focus:text-slate-800", "active:text-slate-800"]
1452
- }
1453
- }
1448
+ true: ["text-neutral-400"],
1449
+ false: ["focus:text-neutral-800", "active:text-neutral-800"],
1450
+ },
1451
+ },
1454
1452
  });
1455
1453
  const cvaInput = cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
1456
- const cvaCustomImage = cvaMerge(["text-slate-400"], {
1454
+ const cvaCustomImage = cvaMerge(["text-neutral-400"], {
1457
1455
  variants: {
1458
1456
  disabled: {
1459
- true: ["!text-slate-400"],
1460
- false: [""]
1457
+ true: ["!text-neutral-400"],
1458
+ false: [""],
1461
1459
  },
1462
1460
  },
1463
1461
  });
@@ -1637,13 +1635,13 @@ const cvaRadioItem = cvaMerge([
1637
1635
  "bg-white",
1638
1636
  "border-solid",
1639
1637
  "border",
1640
- "border-slate-300",
1638
+ "border-neutral-300",
1641
1639
  "shadow-sm",
1642
1640
  "shrink-0",
1643
1641
  "transition",
1644
1642
  "box-border",
1645
1643
  "hover:cursor-pointer",
1646
- "hover:bg-slate-100",
1644
+ "hover:bg-neutral-100",
1647
1645
  "focus-visible:outline-primary-700",
1648
1646
  ], {
1649
1647
  variants: {
@@ -1653,10 +1651,10 @@ const cvaRadioItem = cvaMerge([
1653
1651
  "border-4",
1654
1652
  "border-primary-600",
1655
1653
  "bg-white",
1656
- "hover:bg-slate-100",
1654
+ "hover:bg-neutral-100",
1657
1655
  "hover:cursor-pointer",
1658
1656
  "outline-0",
1659
- "active:bg-slate-200",
1657
+ "active:bg-neutral-200",
1660
1658
  "active:ring-2",
1661
1659
  "active:ring-inset",
1662
1660
  "active:ring-primary-700",
@@ -1672,11 +1670,11 @@ const cvaRadioItem = cvaMerge([
1672
1670
  },
1673
1671
  disabled: {
1674
1672
  true: [
1675
- "bg-slate-400",
1676
- "border-slate-300",
1673
+ "bg-neutral-400",
1674
+ "border-neutral-300",
1677
1675
  "cursor-not-allowed",
1678
- "hover:bg-slate-400",
1679
- "active:bg-slate-400",
1676
+ "hover:bg-neutral-400",
1677
+ "active:bg-neutral-400",
1680
1678
  "group-active:ring-0",
1681
1679
  "group-active:ring-inset",
1682
1680
  ],
@@ -1824,7 +1822,7 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
1824
1822
  onChange(newSchedule);
1825
1823
  };
1826
1824
  return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
1827
- return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
1825
+ return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
1828
1826
  }) }));
1829
1827
  };
1830
1828
 
@@ -1996,8 +1994,8 @@ const cvaSelect = cvaMerge([
1996
1994
  "flex",
1997
1995
  "shadow-sm",
1998
1996
  "rounded-lg",
1999
- "border-slate-300",
2000
- "hover:border-slate-400",
1997
+ "border-neutral-300",
1998
+ "hover:border-neutral-400",
2001
1999
  "hover:bg-neutral-50",
2002
2000
  "bg-white",
2003
2001
  "transition",
@@ -2015,7 +2013,7 @@ const cvaSelect = cvaMerge([
2015
2013
  false: "",
2016
2014
  },
2017
2015
  disabled: {
2018
- true: "!bg-neutral-100 hover:border-slate-300",
2016
+ true: "!bg-neutral-100 hover:border-neutral-300",
2019
2017
  false: "",
2020
2018
  },
2021
2019
  },
@@ -2051,10 +2049,10 @@ const cvaSelectIcon = cvaMerge([
2051
2049
  "cursor-pointer",
2052
2050
  "items-center",
2053
2051
  "justify-center",
2054
- "text-slate-400",
2055
- "hover:text-slate-500",
2052
+ "text-neutral-400",
2053
+ "hover:text-neutral-500",
2056
2054
  ]);
2057
- const cvaSelectPrefixSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "absolute", "inset-y-0"], {
2055
+ const cvaSelectPrefixSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "absolute", "inset-y-0"], {
2058
2056
  variants: {
2059
2057
  kind: {
2060
2058
  prefix: ["pl-3", "left-0"],
@@ -2068,8 +2066,8 @@ const cvaSelectXIcon = cvaMerge([
2068
2066
  "cursor-pointer",
2069
2067
  "items-center",
2070
2068
  "justify-center",
2071
- "text-slate-400",
2072
- "hover:text-slate-500",
2069
+ "text-neutral-400",
2070
+ "hover:text-neutral-500",
2073
2071
  "ml-1",
2074
2072
  ]);
2075
2073
  const cvaSelectMenuList = cvaMerge([], {
@@ -2303,13 +2301,13 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2303
2301
  },
2304
2302
  SingleValue: props => {
2305
2303
  const optionPrefix = getOptionPrefix ? getOptionPrefix(props.data) : null;
2306
- return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
2304
+ return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-neutral-700" : "", children: jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
2307
2305
  },
2308
2306
  Menu: props => {
2309
2307
  return (jsx(components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
2310
2308
  },
2311
2309
  Placeholder: props => {
2312
- return (jsx(components.Placeholder, { ...props, className: "!text-slate-400", children: props.children }));
2310
+ return (jsx(components.Placeholder, { ...props, className: "!text-neutral-400", children: props.children }));
2313
2311
  },
2314
2312
  MenuList: props => {
2315
2313
  return (jsx(components.MenuList, { ...props, innerProps: {
@@ -2415,7 +2413,7 @@ const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabl
2415
2413
  backgroundColor: "#ffffff",
2416
2414
  borderRadius: "var(--border-radius-lg)",
2417
2415
  zIndex: "var(--z-overlay)",
2418
- borderColor: "rgb(var(--color-slate-300))",
2416
+ borderColor: "rgb(var(--color-neutral-300))",
2419
2417
  boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
2420
2418
  }),
2421
2419
  menuList: base => {
@@ -2818,8 +2816,8 @@ const cvaToggleSwitchTrack = cvaMerge(["items-center", "shrink-0", "rounded-full
2818
2816
  large: ["w-[38px]", "p-[3px]"],
2819
2817
  },
2820
2818
  disabled: {
2821
- true: ["cursor-not-allowed", "bg-slate-200"],
2822
- false: ["cursor-pointer", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"],
2819
+ true: ["cursor-not-allowed", "bg-neutral-200"],
2820
+ false: ["cursor-pointer", "bg-neutral-300", "hover:bg-neutral-400", "active:bg-neutral-500"],
2823
2821
  },
2824
2822
  toggled: {
2825
2823
  true: "", // classes moved to compoundVariants to avoid conflicts with the disabled variant
@@ -2835,7 +2833,7 @@ const cvaToggleSwitchTrack = cvaMerge(["items-center", "shrink-0", "rounded-full
2835
2833
  {
2836
2834
  disabled: true,
2837
2835
  toggled: true,
2838
- className: ["bg-slate-400"],
2836
+ className: ["bg-neutral-400"],
2839
2837
  },
2840
2838
  {
2841
2839
  disabled: false,
@@ -2952,7 +2950,7 @@ const cvaUploadInputField = cvaMerge([
2952
2950
  "file:h-0",
2953
2951
  "file:invisible",
2954
2952
  "file:px-0",
2955
- "dark:text-gray-400",
2953
+ "dark:text-neutral-400",
2956
2954
  "self-center",
2957
2955
  ]);
2958
2956
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "1.8.15",
3
+ "version": "1.8.18",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -16,14 +16,14 @@
16
16
  "zod": "^3.23.8",
17
17
  "react-hook-form": "7.62.0",
18
18
  "tailwind-merge": "^2.0.0",
19
- "@trackunit/css-class-variance-utilities": "1.7.8",
20
- "@trackunit/react-components": "1.9.15",
21
- "@trackunit/ui-icons": "1.7.10",
22
- "@trackunit/shared-utils": "1.9.8",
23
- "@trackunit/ui-design-tokens": "1.7.8",
24
- "@trackunit/i18n-library-translation": "1.7.12",
19
+ "@trackunit/css-class-variance-utilities": "1.7.10",
20
+ "@trackunit/react-components": "1.9.18",
21
+ "@trackunit/ui-icons": "1.7.12",
22
+ "@trackunit/shared-utils": "1.9.10",
23
+ "@trackunit/ui-design-tokens": "1.7.10",
24
+ "@trackunit/i18n-library-translation": "1.7.14",
25
25
  "string-ts": "^2.0.0",
26
- "@trackunit/react-test-setup": "1.4.8",
26
+ "@trackunit/react-test-setup": "1.4.10",
27
27
  "@js-temporal/polyfill": "^0.5.1"
28
28
  },
29
29
  "module": "./index.esm.js",