diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json
index 0153f65fda3..43aac64dd38 100644
--- a/apps/www/public/registry/styles/default/calendar.json
+++ b/apps/www/public/registry/styles/default/calendar.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/default/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n    \n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex text-sm font-medium justify-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center gap-1 grow dropdowns pl-8 pr-9\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            {...props}\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            value={props.value as string}\n          >\n            <SelectTrigger className=\"pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\">\n              <SelectValue placeholder={props?.caption} >{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/default/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n    \n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center gap-1 grow dropdowns pl-8 pr-9\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            {...props}\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            value={props.value as string}\n          >\n            <SelectTrigger className={cn(buttonVariants({ variant: \"ghost\" }),\"pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\")}>\n              <SelectValue placeholder={props?.caption} >{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/calendar.json b/apps/www/public/registry/styles/new-york/calendar.json
index b04d5eee868..9eca07f0296 100644
--- a/apps/www/public/registry/styles/new-york/calendar.json
+++ b/apps/www/public/registry/styles/new-york/calendar.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/new-york/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex text-sm font-medium justify-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center gap-1 grow dropdowns pl-7 pr-8\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-6 w-6 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            {...props}\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            value={props.value as string}\n          >\n            <SelectTrigger className={cn(buttonVariants({ variant: \"ghost\" }), \"w-auto px-1 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\")}>\n              <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/new-york/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-3\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center grow dropdowns pl-7 pr-8\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-6 w-6 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            {...props}\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            value={props.value as string}\n          >\n            <SelectTrigger className={cn(buttonVariants({ variant: \"ghost\" }), \"px-2 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\")}>\n              <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx
index d1235b06563..d1d4a08655d 100644
--- a/apps/www/registry/default/ui/calendar.tsx
+++ b/apps/www/registry/default/ui/calendar.tsx
@@ -37,7 +37,7 @@ function Calendar({
         caption_between: "is-between",
         caption_end: "is-end",
         caption: "flex justify-center pt-1 relative items-center gap-1",
-        caption_label: "flex text-sm font-medium justify-center grow [.is-multiple_&]:flex",
+        caption_label: "flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex",
         caption_dropdowns: "flex justify-center gap-1 grow dropdowns pl-8 pr-9",
         multiple_months: "is-multiple",
         vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden",
@@ -85,7 +85,7 @@ function Calendar({
             }}
             value={props.value as string}
           >
-            <SelectTrigger className="pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex">
+            <SelectTrigger className={cn(buttonVariants({ variant: "ghost" }),"pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex")}>
               <SelectValue placeholder={props?.caption} >{props?.caption}</SelectValue>
             </SelectTrigger>
             <SelectContent className="max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]">
diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx
index 7768847e2da..3b66d89d169 100644
--- a/apps/www/registry/new-york/ui/calendar.tsx
+++ b/apps/www/registry/new-york/ui/calendar.tsx
@@ -31,16 +31,16 @@ function Calendar({
       className={cn("p-3", className)}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
+        month: "space-y-3",
         caption_start: "is-start",
         caption_between: "is-between",
         caption_end: "is-end",
         caption: "flex justify-center pt-1 relative items-center gap-1",
-        caption_label: "flex text-sm font-medium justify-center grow [.is-multiple_&]:flex",
-        caption_dropdowns: "flex justify-center gap-1 grow dropdowns pl-7 pr-8",
+        caption_label: "flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex",
+        caption_dropdowns: "flex justify-center grow dropdowns pl-7 pr-8",
         multiple_months: "is-multiple",
         vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden",
-        nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1",
+        nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
           "h-6 w-6 bg-transparent p-0 text-muted-foreground"
@@ -85,7 +85,7 @@ function Calendar({
             }}
             value={props.value as string}
           >
-            <SelectTrigger className={cn(buttonVariants({ variant: "ghost" }), "w-auto px-1 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex")}>
+            <SelectTrigger className={cn(buttonVariants({ variant: "ghost" }), "px-2 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex")}>
               <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>
             </SelectTrigger>
             <SelectContent className="max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]">