@lets-events/react 6.0.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -32,6 +32,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@radix-ui/themes": "^3.2.1",
-    "@stitches/react": "^1.2.8"
+    "@stitches/react": "^1.2.8",
+    "react-day-picker": "^9.6.7"
   }
 }

package/src/components/Button/index.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react'
+import { ButtonStyled } from './styledComponents'
+import { Button as ButtonRadix } from '@radix-ui/themes'
+
+
+export interface ButtonProps extends ComponentProps<typeof ButtonStyled> {
+  asChild?: boolean,
+}
+
+export function Button({ asChild, ...props }: ButtonProps) {
+  const Component = asChild ? ButtonRadix : 'button'
+  return <ButtonStyled as={Component} {...props} />
+}

package/src/components/Button/styledComponents.ts

@@ -0,0 +1,250 @@
+import { Button as ButtonRadix } from '@radix-ui/themes'
+import { typographyButtonValues } from '../../types/typographyValues'
+
+import { styled } from "../../styles"
+
+export const ButtonStyled = styled(ButtonRadix, {
+    $$buttonColor: 'inherit',
+    $$buttonBgColor: '$colors$grey50',
+    $$buttonBorderColor: 'inherit',
+    $$buttonOutlinedColor: 'inherit',
+
+    fontFamily: '$default',
+    letterSpacing: 0,
+    border: 0,
+    transition: 'all 300ms ease-out',
+    cursor: 'pointer',
+    borderRadius: '$xs',
+    boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '$10',
+    padding: '$6 $16',
+    '&:disabled': {
+        cursor: 'not-allowed',
+        transition: 'none',
+    },
+    variants: {
+        color: {
+            brand: {
+                $$buttonColor: '$colors$brand500',
+                $$buttonBorderColor: '$colors$brand600',
+                $$buttonOutlinedColor: '$$buttonColor',
+                '&:hover': {
+                    $$buttonColor: '$colors$brand600',
+                    $$buttonBorderColor: '$colors$brand700',
+                },
+                '&:focus': {
+                    $$buttonColor: '$colors$brand400',
+                    $$buttonBorderColor: '$colors$brand300',
+                    $$buttonBgColor: '$colors$grey200',
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$brand500',
+                    $$buttonBorderColor: '$colors$brand700',
+                    $$buttonBgColor: '$colors$grey200',
+                },
+            },
+            purple: {
+                $$buttonColor: '$colors$purple500',
+                $$buttonBorderColor: '$colors$purple300',
+                $$buttonOutlinedColor: '$$buttonColor',
+                '&:hover': {
+                    $$buttonColor: '$colors$purple600',
+                    $$buttonBorderColor: '$colors$purple700',
+                    $$buttonOutlinedColor: '$colors$purple500',
+                    $$buttonBgColor: '$colors$purple50',
+                },
+                '&:focus': {
+                    $$buttonColor: '$colors$purple700',
+                    $$buttonOutlinedColor: '$colors$purple500',
+                    $$buttonBgColor: '$colors$purple200',
+                    $$buttonBorderColor: '$colors$purple400',
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$purple500',
+                    $$buttonOutlinedColor: '$colors$purple500',
+                    $$buttonBgColor: '$colors$purple100',
+                    $$buttonBorderColor: '$colors$purple300',
+                },
+            },
+            error: {
+                $$buttonColor: '$colors$error600',
+                $$buttonBorderColor: '$colors$error500',
+                $$buttonOutlinedColor: ' $colors$error500',
+                '&:hover': {
+                    $$buttonColor: '$colors$error600',
+                    $$buttonBorderColor: '$colors$error700',
+                    $$buttonBgColor: '$colors$error50'
+                },
+                '&:focus': {
+                    $$buttonColor: '$colors$error400',
+                    $$buttonBorderColor: '$colors$error300',
+                    $$buttonBgColor: '$colors$error200'
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$error700',
+                    $$buttonBorderColor: '$colors$error700',
+                    $$buttonBgColor: '$colors$re1050'
+                },
+            },
+            info: {
+                $$buttonColor: '$colors$info500',
+                $$buttonBorderColor: '$colors$info600',
+                $$buttonOutlinedColor: '$$buttonColor',
+                '&:hover': {
+                    $$buttonColor: '$colors$info600',
+                    $$buttonBorderColor: '$colors$info700',
+                    $$buttonBgColor: '$colors$info50'
+                },
+                '&:focus': {
+                    $$buttonColor: '$colors$info400',
+                    $$buttonBorderColor: '$colors$info600',
+                    $$buttonBgColor: '$colors$info200'
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$info700',
+                    $$buttonBorderColor: '$colors$info700',
+                    $$buttonBgColor: '$colors$info100'
+                },
+            },
+            success: {
+                $$buttonColor: '$colors$success500',
+                $$buttonBorderColor: '$colors$success600',
+                $$buttonOutlinedColor: '$$buttonColor',
+                '&:hover': {
+                    $$buttonColor: '$colors$success600',
+                    $$buttonBorderColor: '$colors$success700',
+                    $$buttonBgColor: '$colors$success50'
+                },
+                '&:focus': {
+                    $$buttonColor: '$colors$success400',
+                    $$buttonBorderColor: '$colors$success600',
+                    $$buttonBgColor: '$colors$success200'
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$success700',
+                    $$buttonBorderColor: '$colors$success700',
+                    $$buttonBgColor: '$colors$success100'
+                },
+            },
+            warning: {
+                $$buttonColor: '$colors$warning500',
+                $$buttonBorderColor: '$colors$warning600',
+                $$buttonOutlinedColor: '$$buttonColor',
+                '&:hover': {
+                    $$buttonColor: '$colors$warning600',
+                    $$buttonBorderColor: '$colors$warning700',
+                    $$buttonBgColor: '$colors$warning50'
+                },
+                '&:focus': {
+                    $$buttonColor: '$colors$warning400',
+                    $$buttonBorderColor: '$colors$warning600',
+                    $$buttonBgColor: '$colors$warning200'
+
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$warning700',
+                    $$buttonBorderColor: '$colors$warning700',
+                    $$buttonBgColor: '$colors$warning100'
+
+                },
+            },
+            neutral: {
+                $$buttonColor: '$colors$neutral600',
+                $$buttonBorderColor: '$colors$neutral300',
+                $$buttonOutlinedColor: '$$buttonColor',
+                '&:hover': {
+                    $$buttonColor: '$colors$neutral700',
+                    $$buttonBgColor: '$colors$neutral100',
+                    $$buttonBorderColor: '$colors$neutral300',
+                },
+                '&:focus': {
+                    $$buttonColor: '$colors$neutral800',
+                    $$buttonBgColor: '$colors$neutral300',
+                    $$buttonBorderColor: '$colors$neutral400',
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$neutral500',
+                    $$buttonBgColor: '$colors$neutral300',
+                    $$buttonBorderColor: '$colors$neutral400',
+                },
+            },
+            white: {
+                $$buttonColor: '$colors$neutral50',
+                $$buttonBorderColor: '$colors$neutral300',
+                $$buttonOutlinedColor: '$colors$neutral50',
+                '&:hover': {
+                    $$buttonColor: '$colors$neutral100',
+                    $$buttonBorderColor: '$colors$neutral300',
+                    $$buttonBgColor: '$colors$neutral100'
+                },
+                '&:focus': {
+                    $$buttonBorderColor: '$colors$neutral400',
+                    $$buttonColor: '$colors$neutral300',
+                    $$buttonBgColor: '$colors$neutral200'
+                },
+                '&:active': {
+                    $$buttonColor: '$colors$neutral400',
+                    $$buttonBorderColor: '$colors$neutral500',
+                    $$buttonBgColor: '$colors$neutral300'
+                },
+            },
+        },
+        variant: {
+            text: {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                padding: 0,
+                border: 0,
+                color: '$$buttonColor',
+            },
+            contained: {
+                color: '$grey50',
+                backgroundColor: '$$buttonColor',
+                border: '1px solid $$buttonBorderColor',
+                '&:disabled': {
+                    boxShadow: 'none',
+                    color: '$neutral400',
+                    backgroundColor: '$neutral200',
+                    $$buttonBorderColor: '$colors$neutral100'
+                }
+            },
+            outlined: {
+                color: '$$buttonOutlinedColor',
+                border: '1px solid $$buttonOutlinedColor',
+                backgroundColor: '$$buttonBgColor',
+                '&:disabled': {
+                    boxShadow: 'none',
+                    borderColor: '$colors$neutral100',
+                    $$buttonColor: '$colors$neutral300'
+                }
+            }
+        },
+        typography: typographyButtonValues,
+        fontWeight: {
+            regular: { fontWeight: '$regular' },
+            medium: { fontWeight: '$medium' },
+            semibold: { fontWeight: '$semibold' },
+            bold: { fontWeight: '$bold' },
+        },
+        outlinedBgColor: {
+            neutral: {},
+            transparent: {
+                backgroundColor: 'transparent',
+            },
+        },
+        radii: {
+            'full': {
+                borderRadius: '$full',
+            }
+        },
+    },
+
+    defaultVariants: {
+        variant: 'contained',
+        typography: 'buttonMedium',
+        color: 'brand',
+    },
+})

package/src/components/ButtonGroup.tsx

@@ -41,7 +41,7 @@ export const ButtonGroupStyled = styled(Flex, {
       },
       contained: {
         [`& ${ButtonItemStyled}`]: {
-          borderWidth: '$1',
+          borderWidth: '1px',
           borderStyle: 'solid',
           '&:disabled': {
             boxShadow: 'none',
@@ -50,7 +50,7 @@ export const ButtonGroupStyled = styled(Flex, {
       },
       outlined: {
         [`& ${ButtonItemStyled}`]: {
-          borderWidth: '$1',
+          borderWidth: '1px',
           borderStyle: 'solid',
           '&:disabled': {
             color: '$neutral400',

package/src/components/Calendar/index.tsx

@@ -0,0 +1,124 @@
+import React, { ComponentProps, useEffect, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import { ptBR } from "date-fns/locale";
+import { Dialog as Calendaradix } from "@radix-ui/themes";
+import { parse, isValid, format, addYears } from "date-fns";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { TextField, TextFieldSlot } from "../TextField";
+import Icon from "../Icon";
+import {
+  CalendarContentStyled,
+  CalendarFooterStyled,
+  CalendarStyled,
+  DayPickerWrapperStyled,
+  CalendarTitleStyled,
+} from "./styledComponents";
+
+export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
+  calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+  selected: Date | undefined;
+  setSelected: React.Dispatch<React.SetStateAction<Date | undefined>>;
+  action?: boolean;
+  actionText?: string;
+  onAction?: () => void;
+};
+
+function formatToDateMask(value: string): string {
+  const numeric = value.replace(/\D/g, "").slice(0, 8);
+  const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/);
+  if (!parts) return "";
+  const [, day, month, year] = parts;
+  return [day, month, year].filter(Boolean).join("/");
+}
+
+export function Calendar({
+  action,
+  actionText,
+  calendarLayout,
+  selected,
+  setSelected,
+  onAction,
+  ...props
+}: CalendarProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const today = new Date();
+  const maxDate = addYears(today, 20);
+
+  useEffect(() => {
+    console.log("selected", selected);
+    if (selected) {
+      setInputValue(format(selected, "dd/MM/yyyy"));
+    } else {
+      setInputValue("");
+    }
+  }, [selected]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const masked = formatToDateMask(e.target.value);
+    setInputValue(masked);
+
+    const parsed = parse(masked, "dd/MM/yyyy", new Date());
+    if (isValid(parsed)) {
+      setSelected(parsed);
+    } else {
+      console.warn("Data inválida inserida no input:", masked);
+    }
+  };
+
+  return (
+    <Calendaradix.Root>
+      <CalendarStyled {...props}>
+        <Calendaradix.Trigger>
+          <TextField
+            placeholder="00/00/0000"
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            inputMode="numeric"
+          >
+            <TextFieldSlot>
+              <Icon name="calendar" size={"xl"} />
+            </TextFieldSlot>
+          </TextField>
+        </Calendaradix.Trigger>
+
+        <CalendarContentStyled>
+          <CalendarTitleStyled>Calendário</CalendarTitleStyled>
+          <Box>
+            <DayPickerWrapperStyled>
+              <DayPicker
+                mode="single"
+                captionLayout={calendarLayout}
+                selected={selected}
+                onSelect={setSelected}
+                required
+                locale={ptBR}
+                disabled={{ before: today }}
+                startMonth={today}
+                endMonth={maxDate}
+              />
+            </DayPickerWrapperStyled>
+          </Box>
+
+          {action && onAction && (
+            <CalendarFooterStyled>
+              <Calendaradix.Close>
+                <Button
+                  variant="text"
+                  color="brand"
+                  onClick={onAction}
+                  typography="buttonMedium"
+                  fontWeight="medium"
+                >
+                  {actionText ?? "Aplicar"}
+                </Button>
+              </Calendaradix.Close>
+            </CalendarFooterStyled>
+          )}
+        </CalendarContentStyled>
+      </CalendarStyled>
+    </Calendaradix.Root>
+  );
+}

package/src/components/Calendar/styledComponents.ts

@@ -0,0 +1,197 @@
+import { Dialog as Calendaradix } from "@radix-ui/themes";
+
+import { styled } from "../../styles"
+
+export const CalendarStyled = styled('div', {
+    fontFamily: '$default',
+    lineHeight: '$base',
+    fontSize: '$14',
+    maxWidth: '200px',
+    borderRadius: '$sm',
+})
+export const CalendarTitleStyled = styled(Calendaradix.Title, {
+    display: 'none',
+})
+export const CalendarContentStyled = styled(Calendaradix.Content, {
+    fontFamily: '$default',
+    lineHeight: '$base',
+    fontSize: '$14',
+    width: '100%',
+    maxWidth: 'fit-content',
+    border: '1px solid $neutral300',
+    borderRadius: '$sm',
+    boxShadow: '0px 2px 8px 0px $shadow50',
+})
+
+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/Flex.tsx

@@ -29,6 +29,7 @@ export const FlexStyled = styled(FlexRadix, {
       'column-reverse': { flexDirection: 'column-reverse' },
     },
     gap: {
+      0: { gap: '0px' },
       2: { gap: '$2' },
       4: { gap: '$4' },
       6: { gap: '$6' },