@lets-events/react 12.9.1 → 12.9.2

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.9.1 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
-ESM dist/index.mjs 399.64 KB
-ESM ⚡️ Build success in 505ms
-CJS dist/index.js 415.12 KB
-CJS ⚡️ Build success in 506ms
+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 9204ms
+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,11 @@
 # @lets-events/react
 
+## 12.9.2
+
+### Patch Changes
+
+- Double Calendar width
+
 ## 12.9.1
 
 ### Patch 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",

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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.9.1",
+  "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/TextField.tsx

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