@lets-events/react 11.8.0 → 12.0.0

package/src/components/Calendar/styledComponents.ts

@@ -1,209 +1,209 @@
-import { styled } from "../../styles"
-
-export const CalendarStyled = styled('div', {
-    fontFamily: '$default',
-    lineHeight: '$base',
-    fontSize: '$14',
-    borderRadius: '$sm',
-    position: 'relative',
-})
-export const CalendarButtonStyled = styled('button', {
-    backgroundColor: 'transparent',
-    border: 'none',
-    maxWidth: '200px',
-    padding: '0',
-    cursor: 'pointer',
-    '> div > div': {
-        paddingLeft: '1rem',
-        'input': {
-            textAlign: 'right',
-        } 
-    },
-})
-export const CalendarContentStyled = styled('div', {
-    fontFamily: '$default',
-    lineHeight: '$base',
-    fontSize: '$14',
-    width: '100%',
-    maxWidth: 'fit-content',
-    border: '1px solid $neutral300',
-    borderRadius: '$sm',
-    boxShadow: '0px 2px 8px 0px $shadow50',
-    position: 'absolute',
-    left: '0',
-    backgroundColor: '$neutral50',
-    zIndex: '999999',
-})
-
-export const CalendarFooterStyled = styled('div', {
-    borderTop: '2px solid $neutral100',
-    padding: '$4 $16',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '3rem',
-})
-
-export const DayPickerWrapperStyled = styled('div', {
-    '.rt-TextFieldInput': {
-        fontFamily: '$default',
-        fontSize: '$14',
-        color: '$dark500',
-    },
-    '.rdp-root': {
-        padding: '$16',
-    },
-    '.rdp-today .rdp-day_button': {
-        color: '$brand500',
-        textDecoration: 'underline',
-    },
-    '.rdp-day.rdp-disabled .rdp-day_button': {
-        color: '$dark400'
-    },
-    '.rdp-day_button': {
-        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',
-    },
-    '.rdp-day_button:hover': {
-        backgroundColor: '$dark100',
-        borderColor: '$brand500',
-    },
-    '.rdp-day.rdp-disabled .rdp-day_button:hover': {
-        backgroundColor: 'transparent',
-        borderColor: 'transparent',
-    },
-    '.rdp-nav': {
-        display: 'flex',
-        justifyContent: 'space-between',
-        width: '100%',
-    },
-    '.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-month': {
-        marginTop: '-24px',
-    },
-    '.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: '$brand500',
-    },
-    '.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',
-    },
-})
+import { styled } from "../../styles"
+
+export const CalendarStyled = styled('div', {
+    fontFamily: '$default',
+    lineHeight: '$base',
+    fontSize: '$14',
+    borderRadius: '$sm',
+    position: 'relative',
+})
+export const CalendarButtonStyled = styled('button', {
+    backgroundColor: 'transparent',
+    border: 'none',
+    maxWidth: '200px',
+    padding: '0',
+    cursor: 'pointer',
+    '> div > div': {
+        paddingLeft: '1rem',
+        'input': {
+            textAlign: 'right',
+        } 
+    },
+})
+export const CalendarContentStyled = styled('div', {
+    fontFamily: '$default',
+    lineHeight: '$base',
+    fontSize: '$14',
+    width: '100%',
+    maxWidth: 'fit-content',
+    border: '1px solid $neutral300',
+    borderRadius: '$sm',
+    boxShadow: '0px 2px 8px 0px $shadow50',
+    position: 'absolute',
+    left: '0',
+    backgroundColor: '$neutral50',
+    zIndex: '999999',
+})
+
+export const CalendarFooterStyled = styled('div', {
+    borderTop: '2px solid $neutral100',
+    padding: '$4 $16',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '3rem',
+})
+
+export const DayPickerWrapperStyled = styled('div', {
+    '.rt-TextFieldInput': {
+        fontFamily: '$default',
+        fontSize: '$14',
+        color: '$dark500',
+    },
+    '.rdp-root': {
+        padding: '$16',
+    },
+    '.rdp-today .rdp-day_button': {
+        color: '$brand500',
+        textDecoration: 'underline',
+    },
+    '.rdp-day.rdp-disabled .rdp-day_button': {
+        color: '$dark400'
+    },
+    '.rdp-day_button': {
+        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',
+    },
+    '.rdp-day_button:hover': {
+        backgroundColor: '$dark100',
+        borderColor: '$brand500',
+    },
+    '.rdp-day.rdp-disabled .rdp-day_button:hover': {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+    },
+    '.rdp-nav': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    '.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-month': {
+        marginTop: '-24px',
+    },
+    '.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: '$brand500',
+    },
+    '.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',
+    },
+})

package/src/components/Card.tsx

@@ -1,48 +1,48 @@
-import React from "react";
-import { ComponentProps, ElementType } from "react";
-import { styled } from "../styles";
-import { Box, Card as CardRadix } from "@radix-ui/themes";
-
-export const CardStyled = styled(CardRadix, {
-  borderRadius: "$2xl",
-  border: "1px solid $dark100",
-  padding: "16px",
-  defaultVariants: {
-    color: "primary",
-    boxShadow: false,
-  },
-  variants: {
-    color: {
-      primary: {
-        backgroundColor: "$dark50",
-        border: "1px solid $dark200",
-      },
-      disable: {
-        backgroundColor: "$grey50",
-        border: "1px solid $dark200",
-      },
-      error: {
-        backgroundColor: "$error50",
-        border: "1px solid $error600",
-      },
-    },
-    boxShadow: {
-      true: {
-        boxShadow:
-          "0 2px 4px rgba(35, 53, 67, 0.16), 0 4px 4px rgba(35, 53, 67, 0.08)",
-      },
-      false: {
-        boxShadow: "none",
-      },
-    },
-  },
-});
-
-export type CardProps = ComponentProps<typeof CardStyled> & {
-  children: React.ReactNode;
-  as?: ElementType;
-};
-
-export function Card({ asChild, children, ...props }: CardProps) {
-  return <CardStyled {...props}>{children}</CardStyled>;
-}
+import React from "react";
+import { ComponentProps, ElementType } from "react";
+import { styled } from "../styles";
+import { Box, Card as CardRadix } from "@radix-ui/themes";
+
+export const CardStyled = styled(CardRadix, {
+  borderRadius: "$2xl",
+  border: "1px solid $dark100",
+  padding: "16px",
+  defaultVariants: {
+    color: "primary",
+    boxShadow: false,
+  },
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: "$dark50",
+        border: "1px solid $dark200",
+      },
+      disable: {
+        backgroundColor: "$grey50",
+        border: "1px solid $dark200",
+      },
+      error: {
+        backgroundColor: "$error50",
+        border: "1px solid $error600",
+      },
+    },
+    boxShadow: {
+      true: {
+        boxShadow:
+          "0 2px 4px rgba(35, 53, 67, 0.16), 0 4px 4px rgba(35, 53, 67, 0.08)",
+      },
+      false: {
+        boxShadow: "none",
+      },
+    },
+  },
+});
+
+export type CardProps = ComponentProps<typeof CardStyled> & {
+  children: React.ReactNode;
+  as?: ElementType;
+};
+
+export function Card({ asChild, children, ...props }: CardProps) {
+  return <CardStyled {...props}>{children}</CardStyled>;
+}