@lets-events/react 12.3.3 → 12.3.4

package/dist/index.d.ts

@@ -34,7 +34,11 @@ declare const Icon: {
 declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.TextProps & React$1.RefAttributes<HTMLSpanElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -418,7 +422,11 @@ declare const ButtonStyled: _stitches_react_types_styled_component.StyledCompone
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     outlinedBgColor?: "transparent" | "neutral" | undefined;
     radii?: "full" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -798,7 +806,11 @@ declare function Button({ asChild, children, loading, ...props }: ButtonProps):
 
 declare const ButtonItemStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.ButtonProps & React$1.RefAttributes<HTMLButtonElement>>, {
     active?: boolean | "true" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -1173,7 +1185,11 @@ declare const ButtonGroupStyled: _stitches_react_types_styled_component.StyledCo
     variant?: "text" | "contained" | "outlined" | undefined;
     typography?: "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -1553,7 +1569,11 @@ declare const AvatarStyled: _stitches_react_types_styled_component.StyledCompone
     size?: "xs" | "sm" | "md" | "xl" | "lg" | undefined;
     radii?: "full" | undefined;
     variant?: "without-image" | "with-image" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -1936,7 +1956,11 @@ declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComp
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     textAlign?: "left" | "right" | "center" | undefined;
     isValid?: boolean | "false" | "true" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -2310,7 +2334,11 @@ declare const TextFieldSlotStyled: _stitches_react_types_styled_component.Styled
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     textAlign?: "left" | "right" | "center" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -2713,7 +2741,11 @@ declare const RadioGroupStyled: _stitches_react_types_styled_component.StyledCom
     disabled?: boolean | "false" | "true" | undefined;
     typography?: "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -3103,7 +3135,11 @@ declare const CheckboxGroupStyled: _stitches_react_types_styled_component.Styled
     disabled?: boolean | "false" | "true" | undefined;
     typography?: "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -3473,7 +3509,11 @@ declare const CheckboxGroupStyled: _stitches_react_types_styled_component.Styled
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const StyledItem: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<CheckboxGroup$1.ItemProps & React$1.RefAttributes<HTMLButtonElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledItem: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<CheckboxGroup$1.ItemProps & React$1.RefAttributes<HTMLButtonElement>>, {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -3900,7 +3940,11 @@ declare const BadgeStyled: _stitches_react_types_styled_component.StyledComponen
     size?: "xs" | "sm" | "md" | "xl" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     radii?: "full" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -4295,7 +4339,11 @@ declare function MenuDropdown({ children, isOpen, setIsOpen, }: MenuDropdownProp
 
 declare const CalendarStyled: _stitches_react_types_styled_component.StyledComponent<"div", {
     expand?: boolean | "true" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -4680,7 +4728,13 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
 };
 declare function Calendar({ action, actionText, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
-declare const DrawerOverlayStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const DrawerOverlayStyled: _stitches_react_types_styled_component.StyledComponent<"div", {
+    open?: boolean | "false" | "true" | undefined;
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -5062,11 +5116,15 @@ type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
     goBackAction?: () => void;
     zIndex?: number;
 };
-declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, goBackIcon, goBackAction, zIndex, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, goBackIcon, goBackAction, zIndex, }: DrawerProps): react_jsx_runtime.JSX.Element;
 
 declare const TimePickerStyled: _stitches_react_types_styled_component.StyledComponent<"div", {
     expand?: boolean | "true" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -5436,7 +5494,11 @@ declare const TimePickerStyled: _stitches_react_types_styled_component.StyledCom
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimePickerDropdownStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TimePickerDropdownStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -5806,7 +5868,11 @@ declare const TimePickerDropdownStyled: _stitches_react_types_styled_component.S
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimePickerFooterStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TimePickerFooterStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -6176,7 +6242,11 @@ declare const TimePickerFooterStyled: _stitches_react_types_styled_component.Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimerPickerContentStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TimerPickerContentStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -6546,7 +6616,11 @@ declare const TimerPickerContentStyled: _stitches_react_types_styled_component.S
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const InputStyled: _stitches_react_types_styled_component.StyledComponent<"input", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const InputStyled: _stitches_react_types_styled_component.StyledComponent<"input", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -6918,7 +6992,11 @@ declare const InputStyled: _stitches_react_types_styled_component.StyledComponen
 }, {}>>;
 declare const TimePickerButtonStyled: _stitches_react_types_styled_component.StyledComponent<"button", {
     expand?: boolean | "true" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -7288,7 +7366,11 @@ declare const TimePickerButtonStyled: _stitches_react_types_styled_component.Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimePickerIconButton: _stitches_react_types_styled_component.StyledComponent<typeof Button, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TimePickerIconButton: _stitches_react_types_styled_component.StyledComponent<typeof Button, {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -7669,7 +7751,11 @@ declare function TimePicker({ selected, setSelected, position, hasError, expand,
 
 declare const AlertDialogSimpleStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.ContentProps & React$1.RefAttributes<HTMLDivElement>>, {
     color?: "info" | "warning" | "error" | "success" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -8041,7 +8127,11 @@ declare const AlertDialogSimpleStyled: _stitches_react_types_styled_component.St
 }, {}>>;
 declare const AlertDialogCompleteStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.ContentProps & React$1.RefAttributes<HTMLDivElement>>, {
     color?: undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -8411,7 +8501,11 @@ declare const AlertDialogCompleteStyled: _stitches_react_types_styled_component.
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogDescriptionStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.DescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogDescriptionStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.DescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>, {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -8781,7 +8875,11 @@ declare const AlertDialogDescriptionStyled: _stitches_react_types_styled_compone
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogTitleStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.TitleProps & React$1.RefAttributes<HTMLHeadingElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogTitleStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.TitleProps & React$1.RefAttributes<HTMLHeadingElement>>, {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -9151,7 +9249,11 @@ declare const AlertDialogTitleStyled: _stitches_react_types_styled_component.Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogSubtitleStyled: _stitches_react_types_styled_component.StyledComponent<typeof Text, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogSubtitleStyled: _stitches_react_types_styled_component.StyledComponent<typeof Text, {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -9521,7 +9623,11 @@ declare const AlertDialogSubtitleStyled: _stitches_react_types_styled_component.
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogRowStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogRowStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -9891,7 +9997,11 @@ declare const AlertDialogRowStyled: _stitches_react_types_styled_component.Style
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialoghrStyled: _stitches_react_types_styled_component.StyledComponent<"hr", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialoghrStyled: _stitches_react_types_styled_component.StyledComponent<"hr", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -10283,7 +10393,11 @@ declare function Alert({ color, trigger, completAlert, simpleAlert, ...props }:
 declare const SwitchStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.SwitchProps & React$1.RefAttributes<HTMLButtonElement>>, {
     color?: "brand" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -10659,7 +10773,11 @@ type SwitchProps = ComponentProps<typeof Switch$1> & {
 };
 declare function Switch(props: SwitchProps): react_jsx_runtime.JSX.Element;
 
-declare const StepStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StepStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -11055,7 +11173,11 @@ declare function StepWrapper({ children, ...props }: {
 declare const CardStyled: _stitches_react_types_styled_component.StyledComponent<React__default.ForwardRefExoticComponent<_radix_ui_themes.CardProps & React__default.RefAttributes<HTMLDivElement>>, {
     color?: "warning" | "error" | "primary" | "disable" | undefined;
     boxShadow?: boolean | "false" | "true" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -11435,7 +11557,11 @@ declare function Card({ asChild, children, padding, radius, ...props }: CardProp
 
 declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<React__default.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -11807,7 +11933,11 @@ declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledC
 }, {}>>;
 declare const TextareaContainer: _stitches_react_types_styled_component.StyledComponent<"div", {
     color?: "default" | "error" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -12226,7 +12356,11 @@ declare const useToast: () => ToastContextType;
 declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const TooltipRoot: React$1.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TooltipContent: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>>, {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -12612,7 +12746,11 @@ declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent
     gap?: 0 | 2 | "0" | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
     gapY?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
     gapX?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -12991,7 +13129,11 @@ declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.
 declare const StyledTrigger: _stitches_react_types_styled_component.StyledComponent<"div", {
     color?: "default" | "error" | undefined;
     disabled?: boolean | "true" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -13383,7 +13525,11 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const Divider: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const Divider: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -13766,7 +13912,11 @@ declare const GridStyled: _stitches_react_types_styled_component.StyledComponent
     gap?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
     gapX?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
     gapY?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -14147,7 +14297,11 @@ declare const ContainerStyled: _stitches_react_types_styled_component.StyledComp
     size?: "xs" | "sm" | "md" | "xl" | "lg" | "xxl" | "responsive" | undefined;
     display?: "initial" | "none" | undefined;
     align?: "left" | "right" | "center" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -14526,7 +14680,11 @@ declare function Container({ children, ...props }: ContainerProps): react_jsx_ru
 declare const SectionStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.SectionProps & React$1.RefAttributes<HTMLDivElement>>, {
     size?: "xs" | "sm" | "md" | "xl" | "lg" | "xxl" | "responsive" | undefined;
     display?: "initial" | "none" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+}, {
+    md: "(max-width: 690px)";
+}, _stitches_react_types_css_util.CSS<{
+    md: "(max-width: 690px)";
+}, {
     colors: {
         brand50: string;
         brand100: string;

package/dist/index.js

@@ -1352,6 +1352,9 @@ var {
     lineHeights,
     radii,
     space
+  },
+  media: {
+    md: "(max-width: 690px)"
   }
 });
 
@@ -8145,27 +8148,70 @@ var DrawerOverlayStyled = styled("div", {
   right: 0,
   width: "100vw",
   height: "100vh",
-  background: "rgba(0, 0, 0, 0.4)"
+  background: "rgba(0, 0, 0, 0.4)",
+  transition: "opacity 200ms ease",
+  variants: {
+    open: {
+      true: {
+        opacity: "1"
+      },
+      false: {
+        pointerEvents: "none",
+        opacity: "0"
+      }
+    }
+  }
+});
+var DrawerWrapper = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  height: "100vh",
+  overflow: "hidden",
+  variants: {
+    open: {
+      true: {},
+      false: {
+        pointerEvents: "none"
+      }
+    }
+  }
 });
 var DrawerContainerStyled = styled("div", {
   position: "absolute",
   top: 0,
   right: 0,
-  maxWidth: "calc(100% - 2rem)",
-  height: "100%",
+  height: "100vh",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",
   boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
-  padding: "1.5rem 0",
-  overflowY: "auto"
+  overflowY: "auto",
+  width: "100%",
+  boxSizing: "border-box",
+  "@md": {
+    minWidth: "100vw",
+    maxWidth: "100vw"
+  },
+  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
+  paddingBottom: "1.5rem",
+  variants: {
+    open: {
+      true: {
+        transform: "translateX(0) scale(1)"
+      },
+      false: {
+        transform: "translateX(110%) scale(0.98)"
+      }
+    }
+  }
 });
 var DrawerHeaderDiv = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
   borderBottom: "1px solid $neutral300",
-  padding: "0 1.5rem 1rem",
+  padding: "1.5rem 1rem",
   position: "relative"
 });
 var DrawerHeaderTitle = styled("h2", {
@@ -8200,7 +8246,6 @@ function Drawer({
   goBackAction,
   zIndex = 1e3
 }) {
-  if (!isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       DrawerOverlayStyled,
@@ -8208,27 +8253,43 @@ function Drawer({
         css: {
           zIndex
         },
-        onClick: onClose
+        onClick: onClose,
+        open: isOpen
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-      DrawerContainerStyled,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      DrawerWrapper,
       {
-        style: {
-          width: width != null ? width : "34.25rem",
-          backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"],
-          zIndex: zIndex + 1
+        css: {
+          zIndex: zIndex + 1,
+          width: width != null ? width : "34.25rem"
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DrawerHeaderDiv, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: 8, align: "center", children: [
-              goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
-          ] }),
-          children
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          DrawerContainerStyled,
+          {
+            open: isOpen,
+            css: {
+              backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DrawerHeaderDiv, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: 8, align: "center", children: [
+                  goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+              ] }),
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null
+            ]
+          }
+        )
       }
     )
   ] });