@lets-events/react 12.8.4 → 12.8.6

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.8.4 build
+> @lets-events/react@12.8.6 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 397.40 KB
-ESM ⚡️ Build success in 76497ms
-CJS dist/index.js 412.83 KB
-CJS ⚡️ Build success in 76497ms
+ESM dist/index.mjs 398.26 KB
+ESM ⚡️ Build success in 334ms
+CJS dist/index.js 413.69 KB
+CJS ⚡️ Build success in 335ms
 DTS Build start
-DTS ⚡️ Build success in 9188ms
-DTS dist/index.d.mts 404.15 KB
-DTS dist/index.d.ts  404.15 KB
+DTS ⚡️ Build success in 7365ms
+DTS dist/index.d.mts 404.21 KB
+DTS dist/index.d.ts  404.21 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.8.6
+
+### Patch Changes
+
+- Calendar and timer icon color
+
+## 12.8.5
+
+### Patch Changes
+
+- Calendar layout
+
 ## 12.8.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -4722,13 +4722,14 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
     position?: "top" | "bottom" | "top-right" | "bottom-right";
     action?: boolean;
     actionText?: string;
+    actionAlign?: "left" | "center" | "right";
     hasError?: boolean;
     expand?: boolean;
     allowPastDates?: boolean;
     maxDate?: Date;
     maxYearsFromNow?: number;
 };
-declare function Calendar({ action, actionText, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type DateRange = {
     from?: Date;

package/dist/index.d.ts

@@ -4722,13 +4722,14 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
     position?: "top" | "bottom" | "top-right" | "bottom-right";
     action?: boolean;
     actionText?: string;
+    actionAlign?: "left" | "center" | "right";
     hasError?: boolean;
     expand?: boolean;
     allowPastDates?: boolean;
     maxDate?: Date;
     maxYearsFromNow?: number;
 };
-declare function Calendar({ action, actionText, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type DateRange = {
     from?: Date;

package/dist/index.js

@@ -7892,9 +7892,24 @@ var CalendarFooterStyled = styled("div", {
   padding: "$4 $16",
   display: "flex",
   gap: "1rem",
-  justifyContent: "flex-end",
   alignItems: "center",
   height: "3rem",
+  variants: {
+    actionAlign: {
+      left: {
+        justifyContent: "flex-start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      right: {
+        justifyContent: "flex-end"
+      }
+    }
+  },
+  defaultVariants: {
+    actionAlign: "right"
+  },
   "@media (max-width: 748px)": {
     gap: "0",
     padding: "$4 $12",
@@ -7920,19 +7935,22 @@ var DayPickerWrapperStyled = styled("div", {
     color: "$dark400"
   },
   ".rdp-day_button": {
-    height: "28px",
-    width: "28px",
+    height: "32px",
+    width: "32px",
     borderRadius: "$sm",
     fontSize: "$14",
     color: "$text",
     backgroundColor: "transparent",
     border: "1px solid transparent",
     transition: "all 0.2s ease-in-out",
-    cursor: "pointer"
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   ".rdp-day_button:hover": {
     backgroundColor: "$dark100",
-    borderColor: "$brand500"
+    borderColor: "$brand600"
   },
   ".rdp-day.rdp-disabled .rdp-day_button:hover": {
     backgroundColor: "transparent",
@@ -8006,7 +8024,8 @@ var DayPickerWrapperStyled = styled("div", {
   ".rdp-day.rdp-selected .rdp-day_button": {
     backgroundColor: "$brand500",
     color: "$neutral50",
-    borderColor: "$brand500"
+    borderColor: "$brand600",
+    borderRadius: "0.5rem"
   },
   ".rdp-dropdowns": {
     display: "flex",
@@ -8094,6 +8113,7 @@ function Calendar(_a) {
   var _b = _a, {
     action,
     actionText,
+    actionAlign = "right",
     calendarLayout,
     selected,
     setSelected,
@@ -8106,6 +8126,7 @@ function Calendar(_a) {
   } = _b, props = __objRest(_b, [
     "action",
     "actionText",
+    "actionAlign",
     "calendarLayout",
     "selected",
     "setSelected",
@@ -8173,7 +8194,7 @@ function Calendar(_a) {
             inputMode: "numeric",
             textAlign: "right",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
           }
         )
       }
@@ -8193,7 +8214,7 @@ function Calendar(_a) {
           endMonth: resolvedMaxDate
         }
       ) }) }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         Button,
         {
           variant: "text",
@@ -8719,7 +8740,7 @@ function TimePicker({
             typography: "labelSmall",
             fontWeight: "regular",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "clock", size: "xl" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "clock", size: "xl", color: "#4C4F54" }) })
           }
         )
       }
@@ -13403,21 +13424,27 @@ var DateAndTimeFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: isoValue, onChange: setIsoValue } = field;
-  const { selectedDate, selectedTime } = (0, import_react28.useMemo)(() => {
-    if (!isoValue) return { selectedDate: void 0, selectedTime: void 0 };
+  const { selectedDateFromIso, selectedTimeFromIso } = (0, import_react28.useMemo)(() => {
+    if (!isoValue) return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     try {
       const date = new Date(isoValue);
       if (isNaN(date.getTime())) {
-        return { selectedDate: void 0, selectedTime: void 0 };
+        return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
       }
       const hours = String(date.getHours()).padStart(2, "0");
       const minutes = String(date.getMinutes()).padStart(2, "0");
       const time = `${hours}:${minutes}`;
-      return { selectedDate: date, selectedTime: time };
+      return { selectedDateFromIso: date, selectedTimeFromIso: time };
     } catch (e) {
-      return { selectedDate: void 0, selectedTime: void 0 };
+      return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
+  const [draftDate, setDraftDate] = (0, import_react28.useState)(selectedDateFromIso);
+  const [draftTime, setDraftTime] = (0, import_react28.useState)(selectedTimeFromIso);
+  (0, import_react28.useEffect)(() => {
+    setDraftDate(selectedDateFromIso);
+    setDraftTime(selectedTimeFromIso);
+  }, [selectedDateFromIso, selectedTimeFromIso]);
   const combineDateTime = (0, import_react28.useCallback)(
     (date, time) => {
       if (!date || !time) {
@@ -13432,10 +13459,12 @@ var DateAndTimeFormField = (_a) => {
     [setIsoValue]
   );
   const handleDateChange = (date) => {
-    combineDateTime(date, selectedTime);
+    setDraftDate(date);
+    combineDateTime(date, draftTime);
   };
   const handleTimeChange = (time) => {
-    combineDateTime(selectedDate, time);
+    setDraftTime(time);
+    combineDateTime(draftDate, time);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { direction: "column", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -13451,9 +13480,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         Calendar,
         __spreadValues({
-          selected: selectedDate,
+          selected: draftDate,
           setSelected: (date) => {
-            const d = typeof date === "function" ? date(selectedDate) : date;
+            const d = typeof date === "function" ? date(draftDate) : date;
             handleDateChange(d);
           },
           hasError: haveError,
@@ -13465,9 +13494,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         TimePicker,
         __spreadValues({
-          selected: selectedTime,
+          selected: draftTime,
           setSelected: (value) => {
-            const time = typeof value === "function" ? value(selectedTime) : value;
+            const time = typeof value === "function" ? value(draftTime) : value;
             handleTimeChange(time);
           },
           hasError: haveError

package/dist/index.mjs

@@ -7776,9 +7776,24 @@ var CalendarFooterStyled = styled("div", {
   padding: "$4 $16",
   display: "flex",
   gap: "1rem",
-  justifyContent: "flex-end",
   alignItems: "center",
   height: "3rem",
+  variants: {
+    actionAlign: {
+      left: {
+        justifyContent: "flex-start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      right: {
+        justifyContent: "flex-end"
+      }
+    }
+  },
+  defaultVariants: {
+    actionAlign: "right"
+  },
   "@media (max-width: 748px)": {
     gap: "0",
     padding: "$4 $12",
@@ -7804,19 +7819,22 @@ var DayPickerWrapperStyled = styled("div", {
     color: "$dark400"
   },
   ".rdp-day_button": {
-    height: "28px",
-    width: "28px",
+    height: "32px",
+    width: "32px",
     borderRadius: "$sm",
     fontSize: "$14",
     color: "$text",
     backgroundColor: "transparent",
     border: "1px solid transparent",
     transition: "all 0.2s ease-in-out",
-    cursor: "pointer"
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   ".rdp-day_button:hover": {
     backgroundColor: "$dark100",
-    borderColor: "$brand500"
+    borderColor: "$brand600"
   },
   ".rdp-day.rdp-disabled .rdp-day_button:hover": {
     backgroundColor: "transparent",
@@ -7890,7 +7908,8 @@ var DayPickerWrapperStyled = styled("div", {
   ".rdp-day.rdp-selected .rdp-day_button": {
     backgroundColor: "$brand500",
     color: "$neutral50",
-    borderColor: "$brand500"
+    borderColor: "$brand600",
+    borderRadius: "0.5rem"
   },
   ".rdp-dropdowns": {
     display: "flex",
@@ -7978,6 +7997,7 @@ function Calendar(_a) {
   var _b = _a, {
     action,
     actionText,
+    actionAlign = "right",
     calendarLayout,
     selected,
     setSelected,
@@ -7990,6 +8010,7 @@ function Calendar(_a) {
   } = _b, props = __objRest(_b, [
     "action",
     "actionText",
+    "actionAlign",
     "calendarLayout",
     "selected",
     "setSelected",
@@ -8057,7 +8078,7 @@ function Calendar(_a) {
             inputMode: "numeric",
             textAlign: "right",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl" }) })
+            children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
           }
         )
       }
@@ -8077,7 +8098,7 @@ function Calendar(_a) {
           endMonth: resolvedMaxDate
         }
       ) }) }),
-      action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { children: /* @__PURE__ */ jsx15(
+      action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ jsx15(
         Button,
         {
           variant: "text",
@@ -8603,7 +8624,7 @@ function TimePicker({
             typography: "labelSmall",
             fontWeight: "regular",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ jsx18(TextFieldSlot, { children: /* @__PURE__ */ jsx18(Icon_default, { name: "clock", size: "xl" }) })
+            children: /* @__PURE__ */ jsx18(TextFieldSlot, { children: /* @__PURE__ */ jsx18(Icon_default, { name: "clock", size: "xl", color: "#4C4F54" }) })
           }
         )
       }
@@ -13249,7 +13270,7 @@ var TimePickerFormField = (_a) => {
 
 // src/components/FormFields/DateAndTimeFormField.tsx
 import { useController as useController7 } from "react-hook-form";
-import { useCallback as useCallback8, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo4, useState as useState13 } from "react";
 import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
 var DateAndTimeFormField = (_a) => {
   var _b = _a, {
@@ -13296,21 +13317,27 @@ var DateAndTimeFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: isoValue, onChange: setIsoValue } = field;
-  const { selectedDate, selectedTime } = useMemo4(() => {
-    if (!isoValue) return { selectedDate: void 0, selectedTime: void 0 };
+  const { selectedDateFromIso, selectedTimeFromIso } = useMemo4(() => {
+    if (!isoValue) return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     try {
       const date = new Date(isoValue);
       if (isNaN(date.getTime())) {
-        return { selectedDate: void 0, selectedTime: void 0 };
+        return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
       }
       const hours = String(date.getHours()).padStart(2, "0");
       const minutes = String(date.getMinutes()).padStart(2, "0");
       const time = `${hours}:${minutes}`;
-      return { selectedDate: date, selectedTime: time };
+      return { selectedDateFromIso: date, selectedTimeFromIso: time };
     } catch (e) {
-      return { selectedDate: void 0, selectedTime: void 0 };
+      return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
+  const [draftDate, setDraftDate] = useState13(selectedDateFromIso);
+  const [draftTime, setDraftTime] = useState13(selectedTimeFromIso);
+  useEffect11(() => {
+    setDraftDate(selectedDateFromIso);
+    setDraftTime(selectedTimeFromIso);
+  }, [selectedDateFromIso, selectedTimeFromIso]);
   const combineDateTime = useCallback8(
     (date, time) => {
       if (!date || !time) {
@@ -13325,10 +13352,12 @@ var DateAndTimeFormField = (_a) => {
     [setIsoValue]
   );
   const handleDateChange = (date) => {
-    combineDateTime(date, selectedTime);
+    setDraftDate(date);
+    combineDateTime(date, draftTime);
   };
   const handleTimeChange = (time) => {
-    combineDateTime(selectedDate, time);
+    setDraftTime(time);
+    combineDateTime(draftDate, time);
   };
   return /* @__PURE__ */ jsxs33(Flex, { direction: "column", children: [
     label && /* @__PURE__ */ jsx59(
@@ -13344,9 +13373,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
         Calendar,
         __spreadValues({
-          selected: selectedDate,
+          selected: draftDate,
           setSelected: (date) => {
-            const d = typeof date === "function" ? date(selectedDate) : date;
+            const d = typeof date === "function" ? date(draftDate) : date;
             handleDateChange(d);
           },
           hasError: haveError,
@@ -13358,9 +13387,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
         TimePicker,
         __spreadValues({
-          selected: selectedTime,
+          selected: draftTime,
           setSelected: (value) => {
-            const time = typeof value === "function" ? value(selectedTime) : value;
+            const time = typeof value === "function" ? value(draftTime) : value;
             handleTimeChange(time);
           },
           hasError: haveError
@@ -13372,11 +13401,11 @@ var DateAndTimeFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState13, useCallback as useCallback9 } from "react";
+import { useState as useState14, useCallback as useCallback9 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState13(false);
-  const [progress, setProgress] = useState13(null);
-  const [error, setError] = useState13(null);
+  const [isUploading, setIsUploading] = useState14(false);
+  const [progress, setProgress] = useState14(null);
+  const [error, setError] = useState14(null);
   const {
     onSuccess,
     onError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.8.4",
+  "version": "12.8.6",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Calendar/index.tsx

@@ -22,6 +22,7 @@ export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
   position?: "top" | "bottom" | "top-right" | "bottom-right";
   action?: boolean;
   actionText?: string;
+  actionAlign?: "left" | "center" | "right";
   hasError?: boolean;
   expand?: boolean;
   allowPastDates?: boolean;
@@ -40,6 +41,7 @@ function formatToDateMask(value: string): string {
 export function Calendar({
   action,
   actionText,
+  actionAlign = "right",
   calendarLayout,
   selected,
   setSelected,
@@ -117,7 +119,7 @@ export function Calendar({
             color={hasError ? "error" : "default"}
           >
             <TextFieldSlot>
-              <Icon name="calendar" size={"xl"} />
+              <Icon name="calendar" size={"xl"} color="#4C4F54" />
             </TextFieldSlot>
           </TextField>
         </CalendarButtonStyled>
@@ -140,7 +142,7 @@ export function Calendar({
             </Box>
 
             {action && (
-              <CalendarFooterStyled>
+              <CalendarFooterStyled actionAlign={actionAlign}>
                 <Button
                   variant="text"
                   color="brand"

package/src/components/Calendar/styledComponents.ts

@@ -76,17 +76,32 @@ export const CalendarFooterStyled = styled("div", {
   borderTop: "2px solid $neutral100",
   padding: "$4 $16",
   display: "flex",
-  gap: '1rem',
-  justifyContent: "flex-end",
+  gap: "1rem",
   alignItems: "center",
   height: "3rem",
+  variants: {
+    actionAlign: {
+      left: {
+        justifyContent: "flex-start",
+      },
+      center: {
+        justifyContent: "center",
+      },
+      right: {
+        justifyContent: "flex-end",
+      },
+    },
+  },
+  defaultVariants: {
+    actionAlign: "right",
+  },
   "@media (max-width: 748px)": {
-    gap: '0',
+    gap: "0",
     padding: "$4 $12",
     "> div": {
-      padding: '0!important',
-    }
-  }
+      padding: "0!important",
+    },
+  },
 });
 
 export const DayPickerWrapperStyled = styled("div", {
@@ -106,8 +121,8 @@ export const DayPickerWrapperStyled = styled("div", {
     color: "$dark400",
   },
   ".rdp-day_button": {
-    height: "28px",
-    width: "28px",
+    height: "32px",
+    width: "32px",
     borderRadius: "$sm",
     fontSize: "$14",
     color: "$text",
@@ -115,10 +130,13 @@ export const DayPickerWrapperStyled = styled("div", {
     border: "1px solid transparent",
     transition: "all 0.2s ease-in-out",
     cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
   },
   ".rdp-day_button:hover": {
     backgroundColor: "$dark100",
-    borderColor: "$brand500",
+    borderColor: "$brand600",
   },
   ".rdp-day.rdp-disabled .rdp-day_button:hover": {
     backgroundColor: "transparent",
@@ -196,7 +214,8 @@ export const DayPickerWrapperStyled = styled("div", {
   ".rdp-day.rdp-selected .rdp-day_button": {
     backgroundColor: "$brand500",
     color: "$neutral50",
-    borderColor: "$brand500",
+    borderColor: "$brand600",
+    borderRadius: "0.5rem",
   },
   ".rdp-dropdowns": {
     display: "flex",

package/src/components/FormFields/DateAndTimeFormField.tsx

@@ -4,7 +4,7 @@ import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { Calendar, CalendarProps } from "../Calendar";
 import { TimePicker, TimePickerProps } from "../TimePicker";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 export type DateAndTimeFormFieldProps = Omit<
     CalendarProps,
@@ -66,25 +66,33 @@ export const DateAndTimeFormField = ({
 
     const { value: isoValue, onChange: setIsoValue } = field;
 
-    const { selectedDate, selectedTime } = useMemo(() => {
-        if (!isoValue) return { selectedDate: undefined, selectedTime: undefined };
+    const { selectedDateFromIso, selectedTimeFromIso } = useMemo(() => {
+        if (!isoValue) return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
 
         try {
             const date = new Date(isoValue);
             if (isNaN(date.getTime())) {
-                return { selectedDate: undefined, selectedTime: undefined };
+                return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
             }
 
             const hours = String(date.getHours()).padStart(2, "0");
             const minutes = String(date.getMinutes()).padStart(2, "0");
             const time = `${hours}:${minutes}`;
 
-            return { selectedDate: date, selectedTime: time };
+            return { selectedDateFromIso: date, selectedTimeFromIso: time };
         } catch {
-            return { selectedDate: undefined, selectedTime: undefined };
+            return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
         }
     }, [isoValue]);
 
+    const [draftDate, setDraftDate] = useState<Date | undefined>(selectedDateFromIso);
+    const [draftTime, setDraftTime] = useState<string | undefined>(selectedTimeFromIso);
+
+    useEffect(() => {
+        setDraftDate(selectedDateFromIso);
+        setDraftTime(selectedTimeFromIso);
+    }, [selectedDateFromIso, selectedTimeFromIso]);
+
     const combineDateTime = useCallback(
         (date?: Date, time?: string) => {
             if (!date || !time) {
@@ -102,11 +110,13 @@ export const DateAndTimeFormField = ({
     );
 
     const handleDateChange = (date: Date | undefined) => {
-        combineDateTime(date, selectedTime);
+        setDraftDate(date);
+        combineDateTime(date, draftTime);
     };
 
     const handleTimeChange = (time: string | undefined) => {
-        combineDateTime(selectedDate, time);
+        setDraftTime(time);
+        combineDateTime(draftDate, time);
     };
 
     return (
@@ -123,9 +133,9 @@ export const DateAndTimeFormField = ({
             <Flex gap={12} align="start">
                 <Flex direction="column">
                     <Calendar
-                        selected={selectedDate}
+                        selected={draftDate}
                         setSelected={(date) => {
-                            const d = typeof date === "function" ? date(selectedDate) : date;
+                            const d = typeof date === "function" ? date(draftDate) : date;
                             handleDateChange(d);
                         }}
                         hasError={haveError}
@@ -138,9 +148,9 @@ export const DateAndTimeFormField = ({
 
                 <Flex direction="column">
                     <TimePicker
-                        selected={selectedTime}
+                        selected={draftTime}
                         setSelected={(value) => {
-                            const time = typeof value === "function" ? value(selectedTime) : value;
+                            const time = typeof value === "function" ? value(draftTime) : value;
                             handleTimeChange(time);
                         }}
                         hasError={haveError}
@@ -154,4 +164,4 @@ export const DateAndTimeFormField = ({
     );
 };
 
-export default DateAndTimeFormField
+export default DateAndTimeFormField

package/src/components/TimePicker.tsx

@@ -222,7 +222,7 @@ export function TimePicker({
           color={hasError ? "error" : "default"}
         >
           <TextFieldSlot>
-            <Icon name="clock" size="xl" />
+            <Icon name="clock" size="xl" color="#4C4F54" />
           </TextFieldSlot>
         </TextField>
       </TimePickerButtonStyled>