@lets-events/react 12.9.0 → 12.9.2

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.9.0 build
+> @lets-events/react@12.9.2 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
-CJS dist/index.js 414.81 KB
-CJS ⚡️ Build success in 532ms
-ESM dist/index.mjs 399.34 KB
-ESM ⚡️ Build success in 533ms
+ESM dist/index.mjs 407.93 KB
+ESM ⚡️ Build success in 476ms
+CJS dist/index.js 423.42 KB
+CJS ⚡️ Build success in 476ms
 DTS Build start
-DTS ⚡️ Build success in 9136ms
+DTS ⚡️ Build success in 9249ms
 DTS dist/index.d.mts 404.35 KB
 DTS dist/index.d.ts  404.35 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.9.2
+
+### Patch Changes
+
+- Double Calendar width
+
+## 12.9.1
+
+### Patch Changes
+
+- Disabled click area
+
 ## 12.9.0
 
 ### Minor Changes

package/dist/index.js

@@ -8099,6 +8099,187 @@ var DayPickerWrapperStyled = styled("div", {
     }
   }
 });
+var DayPickerWrapperStyledToDoubleCalendar = styled("div", {
+  ".rt-TextFieldInput": {
+    fontFamily: "$default",
+    fontSize: "$14",
+    color: "$dark500"
+  },
+  ".rdp-root": {
+    padding: "0 $8"
+  },
+  ".rdp-today .rdp-day_button": {
+    color: "$brand500",
+    textDecoration: "underline"
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button": {
+    color: "$dark400"
+  },
+  ".rdp-day_button": {
+    height: "26px",
+    width: "26px",
+    borderRadius: "$sm",
+    fontSize: "$14",
+    color: "$text",
+    backgroundColor: "transparent",
+    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: "$brand600"
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button:hover": {
+    backgroundColor: "transparent",
+    borderColor: "transparent"
+  },
+  ".rdp-nav": {
+    position: "absolute",
+    width: "100%",
+    left: "0",
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  ".rdp-nav .rdp-chevron": {
+    display: "none"
+  },
+  ".rdp-nav .rdp-button_previous": {
+    display: "block",
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E")`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px"
+  },
+  ".rdp-nav .rdp-button_next": {
+    display: "block",
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px"
+  },
+  ".rdp-nav .rdp-button_previous:hover": {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    transition: "all 0.2s ease-in-out"
+  },
+  ".rdp-nav .rdp-button_next:hover": {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    transition: "all 0.2s ease-in-out"
+  },
+  ".rdp-nav button": {
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer"
+  },
+  ".rdp-months": {
+    display: "flex",
+    columnGap: "$8",
+    alignItems: "flex-start",
+    paddingTop: "$12"
+  },
+  ".rdp-month": {
+    marginTop: "0",
+    paddingTop: "$6"
+  },
+  ".rdp-month_caption": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    margin: "0 auto",
+    columnGap: "12px"
+  },
+  ".rdp-dropdowns span, .rdp-caption_label": {
+    fontSize: "$16",
+    fontWeight: "$regular",
+    lineHeight: "$20",
+    textTransform: "capitalize"
+  },
+  ".rdp-day.rdp-selected .rdp-day_button": {
+    backgroundColor: "$brand500",
+    color: "$neutral50",
+    borderColor: "$brand600",
+    borderRadius: "0.5rem"
+  },
+  ".rdp-dropdowns": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    columnGap: "12px"
+  },
+  ".rdp-dropdowns .rdp-caption_label": {
+    display: "none"
+  },
+  ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
+    border: "none",
+    backgroundColor: "transparent",
+    textTransform: "capitalize",
+    height: "1.25rem",
+    position: "relative",
+    fontFamily: "$default",
+    fontSize: "$16",
+    lineHeight: "1.25rem",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    paddingRight: "1.25rem",
+    zIndex: "3"
+  },
+  ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
+    border: "none",
+    outline: "none",
+    boxShadow: "none"
+  },
+  ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus": {
+    border: "none"
+  },
+  ".rdp-dropdown_root": {
+    position: "relative"
+  },
+  ".rdp-dropdown_root::after": {
+    content: "",
+    height: "1.25rem",
+    width: "1.25rem",
+    position: "absolute",
+    top: "0",
+    right: "0",
+    display: "block",
+    backgroundColor: "$neutral50",
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    borderRadius: "0.5rem",
+    zIndex: "2"
+  },
+  ".rdp-weekday": {
+    textTransform: "uppercase",
+    fontWeight: "$regular",
+    fontSize: "0px"
+  },
+  ".rdp-weekday::first-letter": {
+    fontSize: "$14"
+  },
+  ".rdp-month_grid": {
+    marginTop: "$16",
+    paddingTop: "$16",
+    borderTop: "2px solid $neutral100"
+  },
+  "@media (max-width: 748px)": {
+    ".rdp-months": {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "16px"
+    }
+  }
+});
 
 // src/components/Calendar/index.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -8319,13 +8500,13 @@ function DoubleCalendar(_a) {
             textAlign: "right",
             color: hasError ? "error" : "default",
             disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: "calendar", size: "xl" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
           }
         ) })
       }
     ),
     showContainer && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_react_day_picker2.DayPicker,
         {
           mode: "range",
@@ -13418,6 +13599,7 @@ var DateAndTimeFormField = (_a) => {
       event.stopPropagation();
       addToast({
         type: "error",
+        icon: "xmark-circle",
         message: disabledInfo
       });
     },
@@ -13431,10 +13613,6 @@ var DateAndTimeFormField = (_a) => {
     },
     [disabled]
   );
-  const disabledInteractionProps = disabled ? {
-    onClickCapture: handleDisabledClick,
-    onMouseDownCapture: handleDisabledMouseDown
-  } : void 0;
   const handleValidate = (0, import_react28.useCallback)(
     (value) => {
       var _a2;
@@ -13510,35 +13688,57 @@ var DateAndTimeFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { gap: 12, align: "start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        Calendar,
-        __spreadValues({
-          selected: draftDate,
-          setSelected: (date) => {
-            const d = typeof date === "function" ? date(draftDate) : date;
-            handleDateChange(d);
-          },
-          hasError: haveError,
-          allowPastDates,
-          maxYearsFromNow,
-          maxDate,
-          disabled
-        }, props)
-      ) })),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        TimePicker,
-        __spreadValues({
-          selected: draftTime,
-          setSelected: (value) => {
-            const time = typeof value === "function" ? value(draftTime) : value;
-            handleTimeChange(time);
-          },
-          disabled,
-          hasError: haveError
-        }, props)
-      ) }))
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      Flex,
+      {
+        gap: 12,
+        align: "start",
+        style: disabled ? { position: "relative" } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            Calendar,
+            __spreadValues({
+              selected: draftDate,
+              setSelected: (date) => {
+                const d = typeof date === "function" ? date(draftDate) : date;
+                handleDateChange(d);
+              },
+              hasError: haveError,
+              allowPastDates,
+              maxYearsFromNow,
+              maxDate,
+              disabled
+            }, props)
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            TimePicker,
+            __spreadValues({
+              selected: draftTime,
+              setSelected: (value) => {
+                const time = typeof value === "function" ? value(draftTime) : value;
+                handleTimeChange(time);
+              },
+              disabled,
+              hasError: haveError
+            }, props)
+          ) }),
+          disabled && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 1,
+                cursor: "not-allowed"
+              },
+              onClick: handleDisabledClick,
+              onMouseDown: handleDisabledMouseDown
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };

package/dist/index.mjs

@@ -7983,6 +7983,187 @@ var DayPickerWrapperStyled = styled("div", {
     }
   }
 });
+var DayPickerWrapperStyledToDoubleCalendar = styled("div", {
+  ".rt-TextFieldInput": {
+    fontFamily: "$default",
+    fontSize: "$14",
+    color: "$dark500"
+  },
+  ".rdp-root": {
+    padding: "0 $8"
+  },
+  ".rdp-today .rdp-day_button": {
+    color: "$brand500",
+    textDecoration: "underline"
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button": {
+    color: "$dark400"
+  },
+  ".rdp-day_button": {
+    height: "26px",
+    width: "26px",
+    borderRadius: "$sm",
+    fontSize: "$14",
+    color: "$text",
+    backgroundColor: "transparent",
+    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: "$brand600"
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button:hover": {
+    backgroundColor: "transparent",
+    borderColor: "transparent"
+  },
+  ".rdp-nav": {
+    position: "absolute",
+    width: "100%",
+    left: "0",
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  ".rdp-nav .rdp-chevron": {
+    display: "none"
+  },
+  ".rdp-nav .rdp-button_previous": {
+    display: "block",
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E")`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px"
+  },
+  ".rdp-nav .rdp-button_next": {
+    display: "block",
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px"
+  },
+  ".rdp-nav .rdp-button_previous:hover": {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    transition: "all 0.2s ease-in-out"
+  },
+  ".rdp-nav .rdp-button_next:hover": {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    transition: "all 0.2s ease-in-out"
+  },
+  ".rdp-nav button": {
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer"
+  },
+  ".rdp-months": {
+    display: "flex",
+    columnGap: "$8",
+    alignItems: "flex-start",
+    paddingTop: "$12"
+  },
+  ".rdp-month": {
+    marginTop: "0",
+    paddingTop: "$6"
+  },
+  ".rdp-month_caption": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    margin: "0 auto",
+    columnGap: "12px"
+  },
+  ".rdp-dropdowns span, .rdp-caption_label": {
+    fontSize: "$16",
+    fontWeight: "$regular",
+    lineHeight: "$20",
+    textTransform: "capitalize"
+  },
+  ".rdp-day.rdp-selected .rdp-day_button": {
+    backgroundColor: "$brand500",
+    color: "$neutral50",
+    borderColor: "$brand600",
+    borderRadius: "0.5rem"
+  },
+  ".rdp-dropdowns": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    columnGap: "12px"
+  },
+  ".rdp-dropdowns .rdp-caption_label": {
+    display: "none"
+  },
+  ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
+    border: "none",
+    backgroundColor: "transparent",
+    textTransform: "capitalize",
+    height: "1.25rem",
+    position: "relative",
+    fontFamily: "$default",
+    fontSize: "$16",
+    lineHeight: "1.25rem",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    paddingRight: "1.25rem",
+    zIndex: "3"
+  },
+  ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
+    border: "none",
+    outline: "none",
+    boxShadow: "none"
+  },
+  ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus": {
+    border: "none"
+  },
+  ".rdp-dropdown_root": {
+    position: "relative"
+  },
+  ".rdp-dropdown_root::after": {
+    content: "",
+    height: "1.25rem",
+    width: "1.25rem",
+    position: "absolute",
+    top: "0",
+    right: "0",
+    display: "block",
+    backgroundColor: "$neutral50",
+    backgroundImage: `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E")`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    borderRadius: "0.5rem",
+    zIndex: "2"
+  },
+  ".rdp-weekday": {
+    textTransform: "uppercase",
+    fontWeight: "$regular",
+    fontSize: "0px"
+  },
+  ".rdp-weekday::first-letter": {
+    fontSize: "$14"
+  },
+  ".rdp-month_grid": {
+    marginTop: "$16",
+    paddingTop: "$16",
+    borderTop: "2px solid $neutral100"
+  },
+  "@media (max-width: 748px)": {
+    ".rdp-months": {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "16px"
+    }
+  }
+});
 
 // src/components/Calendar/index.tsx
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -8203,13 +8384,13 @@ function DoubleCalendar(_a) {
             textAlign: "right",
             color: hasError ? "error" : "default",
             disabled,
-            children: /* @__PURE__ */ jsx16(TextFieldSlot, { children: /* @__PURE__ */ jsx16(Icon_default, { name: "calendar", size: "xl" }) })
+            children: /* @__PURE__ */ jsx16(TextFieldSlot, { children: /* @__PURE__ */ jsx16(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
           }
         ) })
       }
     ),
     showContainer && /* @__PURE__ */ jsxs8(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ jsx16(
         DayPicker2,
         {
           mode: "range",
@@ -13311,6 +13492,7 @@ var DateAndTimeFormField = (_a) => {
       event.stopPropagation();
       addToast({
         type: "error",
+        icon: "xmark-circle",
         message: disabledInfo
       });
     },
@@ -13324,10 +13506,6 @@ var DateAndTimeFormField = (_a) => {
     },
     [disabled]
   );
-  const disabledInteractionProps = disabled ? {
-    onClickCapture: handleDisabledClick,
-    onMouseDownCapture: handleDisabledMouseDown
-  } : void 0;
   const handleValidate = useCallback8(
     (value) => {
       var _a2;
@@ -13403,35 +13581,57 @@ var DateAndTimeFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsxs33(Flex, { gap: 12, align: "start", children: [
-      /* @__PURE__ */ jsx59(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ jsx59(
-        Calendar,
-        __spreadValues({
-          selected: draftDate,
-          setSelected: (date) => {
-            const d = typeof date === "function" ? date(draftDate) : date;
-            handleDateChange(d);
-          },
-          hasError: haveError,
-          allowPastDates,
-          maxYearsFromNow,
-          maxDate,
-          disabled
-        }, props)
-      ) })),
-      /* @__PURE__ */ jsx59(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ jsx59(
-        TimePicker,
-        __spreadValues({
-          selected: draftTime,
-          setSelected: (value) => {
-            const time = typeof value === "function" ? value(draftTime) : value;
-            handleTimeChange(time);
-          },
-          disabled,
-          hasError: haveError
-        }, props)
-      ) }))
-    ] }),
+    /* @__PURE__ */ jsxs33(
+      Flex,
+      {
+        gap: 12,
+        align: "start",
+        style: disabled ? { position: "relative" } : void 0,
+        children: [
+          /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+            Calendar,
+            __spreadValues({
+              selected: draftDate,
+              setSelected: (date) => {
+                const d = typeof date === "function" ? date(draftDate) : date;
+                handleDateChange(d);
+              },
+              hasError: haveError,
+              allowPastDates,
+              maxYearsFromNow,
+              maxDate,
+              disabled
+            }, props)
+          ) }),
+          /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+            TimePicker,
+            __spreadValues({
+              selected: draftTime,
+              setSelected: (value) => {
+                const time = typeof value === "function" ? value(draftTime) : value;
+                handleTimeChange(time);
+              },
+              disabled,
+              hasError: haveError
+            }, props)
+          ) }),
+          disabled && /* @__PURE__ */ jsx59(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 1,
+                cursor: "not-allowed"
+              },
+              onClick: handleDisabledClick,
+              onMouseDown: handleDisabledMouseDown
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx59(ErrorFormMessage, { message: errorMsg })
   ] });
 };

package/package.json

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

package/src/components/Calendar/styledComponents.ts

@@ -291,3 +291,190 @@ export const DayPickerWrapperStyled = styled("div", {
     },
   }
 });
+export const DayPickerWrapperStyledToDoubleCalendar = styled("div", {
+  ".rt-TextFieldInput": {
+    fontFamily: "$default",
+    fontSize: "$14",
+    color: "$dark500",
+  },
+  ".rdp-root": {
+    padding: "0 $8",
+  },
+  ".rdp-today .rdp-day_button": {
+    color: "$brand500",
+    textDecoration: "underline",
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button": {
+    color: "$dark400",
+  },
+  ".rdp-day_button": {
+    height: "26px",
+    width: "26px",
+    borderRadius: "$sm",
+    fontSize: "$14",
+    color: "$text",
+    backgroundColor: "transparent",
+    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: "$brand600",
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button:hover": {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+  },
+  ".rdp-nav": {
+    position: "absolute",
+    width: "100%",
+    left: "0",
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  ".rdp-nav .rdp-chevron": {
+    display: "none",
+  },
+  ".rdp-nav .rdp-button_previous": {
+    display: "block",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px",
+  },
+  ".rdp-nav .rdp-button_next": {
+    display: "block",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px",
+  },
+  ".rdp-nav .rdp-button_previous:hover": {
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    transition: "all 0.2s ease-in-out",
+  },
+  ".rdp-nav .rdp-button_next:hover": {
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    transition: "all 0.2s ease-in-out",
+  },
+  ".rdp-nav button": {
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+  },
+  ".rdp-months": {
+    display: "flex",
+    columnGap: "$8",
+    alignItems: "flex-start",
+    paddingTop: "$12",
+  },
+  ".rdp-month": {
+    marginTop: "0",
+    paddingTop: "$6",
+  },
+  ".rdp-month_caption": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    margin: "0 auto",
+    columnGap: "12px",
+  },
+  ".rdp-dropdowns span, .rdp-caption_label": {
+    fontSize: "$16",
+    fontWeight: "$regular",
+    lineHeight: "$20",
+    textTransform: "capitalize",
+  },
+  ".rdp-day.rdp-selected .rdp-day_button": {
+    backgroundColor: "$brand500",
+    color: "$neutral50",
+    borderColor: "$brand600",
+    borderRadius: "0.5rem",
+  },
+  ".rdp-dropdowns": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    columnGap: "12px",
+  },
+  ".rdp-dropdowns .rdp-caption_label": {
+    display: "none",
+  },
+  ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
+    border: "none",
+    backgroundColor: "transparent",
+    textTransform: "capitalize",
+    height: "1.25rem",
+    position: "relative",
+    fontFamily: "$default",
+    fontSize: "$16",
+    lineHeight: "1.25rem",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    paddingRight: "1.25rem",
+    zIndex: "3",
+  },
+  ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+  },
+  ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus":
+  {
+    border: "none",
+  },
+  ".rdp-dropdown_root": {
+    position: "relative",
+  },
+  ".rdp-dropdown_root::after": {
+    content: "",
+    height: "1.25rem",
+    width: "1.25rem",
+    position: "absolute",
+    top: "0",
+    right: "0",
+    display: "block",
+    backgroundColor: "$neutral50",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    borderRadius: "0.5rem",
+    zIndex: "2",
+  },
+  ".rdp-weekday": {
+    textTransform: "uppercase",
+    fontWeight: "$regular",
+    fontSize: "0px",
+  },
+  ".rdp-weekday::first-letter": {
+    fontSize: "$14",
+  },
+  ".rdp-month_grid": {
+    marginTop: "$16",
+    paddingTop: "$16",
+    borderTop: "2px solid $neutral100",
+  },
+  "@media (max-width: 748px)": {
+    ".rdp-months": {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "16px"
+    },
+  }
+});

package/src/components/DoubleCalendar/index.tsx

@@ -11,7 +11,7 @@ import {
     CalendarContentStyled,
     CalendarFooterStyled,
     CalendarStyled,
-    DayPickerWrapperStyled,
+    DayPickerWrapperStyledToDoubleCalendar,
     CalendarButtonStyled,
 } from "../Calendar/styledComponents";
 
@@ -111,7 +111,7 @@ export function DoubleCalendar({
                             disabled={disabled}
                         >
                             <TextFieldSlot>
-                                <Icon name="calendar" size={"xl"} />
+                                <Icon name="calendar" size={"xl"}  color="#4C4F54"/>
                             </TextFieldSlot>
                         </TextField>
                     </div>
@@ -120,7 +120,7 @@ export function DoubleCalendar({
                 {showContainer && (
                     <CalendarContentStyled position={position}>
                         <Box>
-                            <DayPickerWrapperStyled>
+                            <DayPickerWrapperStyledToDoubleCalendar>
                                 <DayPicker
                                     mode="range"
                                     numberOfMonths={2}
@@ -133,7 +133,7 @@ export function DoubleCalendar({
                                     fromMonth={allowPastDates ? undefined : today}
                                     toMonth={resolvedMaxDate}
                                 />
-                            </DayPickerWrapperStyled>
+                            </DayPickerWrapperStyledToDoubleCalendar>
                         </Box>
 
                         {action && (

package/src/components/FormFields/DateAndTimeFormField.tsx

@@ -53,6 +53,7 @@ export const DateAndTimeFormField = ({
             event.stopPropagation();
             addToast({
                 type: "error",
+                icon: "xmark-circle",
                 message: disabledInfo,
             });
         },
@@ -68,12 +69,6 @@ export const DateAndTimeFormField = ({
         [disabled]
     );
 
-    const disabledInteractionProps = disabled
-        ? {
-            onClickCapture: handleDisabledClick,
-            onMouseDownCapture: handleDisabledMouseDown,
-        }
-        : undefined;
     const handleValidate = useCallback(
         (value?: string) => {
             if (value === undefined || value === null || value === "") {
@@ -165,8 +160,12 @@ export const DateAndTimeFormField = ({
                 />
             )}
 
-            <Flex gap={12} align="start">
-                <Flex direction="column" {...(disabledInteractionProps ?? {})}>
+            <Flex
+                gap={12}
+                align="start"
+                style={disabled ? { position: "relative" } : undefined}
+            >
+                <Flex direction="column">
                     <Calendar
                         selected={draftDate}
                         setSelected={(date) => {
@@ -182,7 +181,7 @@ export const DateAndTimeFormField = ({
                     />
                 </Flex>
 
-                <Flex direction="column" {...(disabledInteractionProps ?? {})}>
+                <Flex direction="column">
                     <TimePicker
                         selected={draftTime}
                         setSelected={(value) => {
@@ -194,6 +193,20 @@ export const DateAndTimeFormField = ({
                         {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
                     />
                 </Flex>
+
+                {disabled && (
+                    <div
+                        aria-hidden
+                        style={{
+                            position: "absolute",
+                            inset: 0,
+                            zIndex: 1,
+                            cursor: "not-allowed",
+                        }}
+                        onClick={handleDisabledClick}
+                        onMouseDown={handleDisabledMouseDown}
+                    />
+                )}
             </Flex>
 
             <ErrorFormMessage message={errorMsg} />

package/src/components/TextField.tsx

@@ -304,9 +304,9 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             style={
               addon
                 ? {
-                    borderTopLeftRadius: "0px",
-                    borderBottomLeftRadius: "0px",
-                  }
+                  borderTopLeftRadius: "0px",
+                  borderBottomLeftRadius: "0px",
+                }
                 : undefined
             }
           >