diff --git a/apps/www/public/registry/styles/default/phone-input.json b/apps/www/public/registry/styles/default/phone-input.json
index d1d501dab58..c96753cfd73 100644
--- a/apps/www/public/registry/styles/default/phone-input.json
+++ b/apps/www/public/registry/styles/default/phone-input.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "phone-input.tsx",
-      "content": "import * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport { Input, InputProps } from \"@/registry/default/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype PhoneInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\"\n> &\n  Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n    onChange?: (value: RPNInput.Value) => void\n  }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n    ({ className, onChange, ...props }, ref) => (\n      <RPNInput.default\n        ref={ref}\n        className={cn(\"flex\", className)}\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={InputComponent}\n        /**\n         * Handles the onChange event.\n         *\n         * react-phone-number-input might trigger the onChange event as undefined\n         * when a valid phone number is not entered. To prevent this,\n         * the value is coerced to an empty string.\n         *\n         * @param {E164Number | undefined} value - The entered value\n         */\n        onChange={(value) => onChange?.(value || \"\")}\n        {...props}\n      />\n    )\n  )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, ...props }, ref) => (\n    <Input\n      className={cn(\"rounded-s-none rounded-e-lg\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: RPNInput.Country\n  onChange: (value: RPNInput.Country) => void\n  options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n  disabled,\n  value,\n  onChange,\n  options,\n}: CountrySelectProps) => {\n  const handleSelect = React.useCallback(\n    (country: RPNInput.Country) => {\n      onChange(country)\n    },\n    [onChange]\n  )\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant={\"outline\"}\n          className={cn(\"flex gap-1 rounded-e-none rounded-s-lg pr-1 pl-3\")}\n          disabled={disabled}\n        >\n          <FlagComponent country={value} countryName={value} />\n          <ChevronsUpDown\n            className={cn(\n              \"h-4 w-4 opacity-50\",\n              disabled ? \"hidden\" : \"opacity-100\"\n            )}\n          />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"p-0 w-[300px]\">\n        <Command>\n          <CommandList>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandEmpty>No country found.</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => (\n                <CommandItem\n                  className=\"gap-2\"\n                  key={option.value}\n                  onSelect={() => handleSelect(option.value)}\n                >\n                  <FlagComponent\n                    country={option.value}\n                    countryName={option.label}\n                  />\n                  <span className=\"text-sm flex-1\">{option.label}</span>\n                  {option.value && (\n                    <span className=\"text-sm text-foreground/50\">\n                      {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                    </span>\n                  )}\n                  <Check\n                    className={cn(\n                      \"ml-auto h-4 w-4\",\n                      option.value === value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n      {Flag && <Flag title={countryName} />}\n    </span>\n  )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
+      "content": "import * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport { Input, InputProps } from \"@/registry/default/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype PhoneInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\"\n> &\n  Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n    onChange?: (value: RPNInput.Value) => void\n  }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n    ({ className, onChange, ...props }, ref) => (\n      <RPNInput.default\n        ref={ref}\n        className={cn(\"flex\", className)}\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={InputComponent}\n        /**\n         * Handles the onChange event.\n         *\n         * react-phone-number-input might trigger the onChange event as undefined\n         * when a valid phone number is not entered. To prevent this,\n         * the value is coerced to an empty string.\n         *\n         * @param {E164Number | undefined} value - The entered value\n         */\n        onChange={(value) => onChange?.(value || \"\")}\n        {...props}\n      />\n    )\n  )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, ...props }, ref) => (\n    <Input\n      className={cn(\"rounded-s-none rounded-e-lg\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: RPNInput.Country\n  onChange: (value: RPNInput.Country) => void\n  options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n  disabled,\n  value,\n  onChange,\n  options,\n}: CountrySelectProps) => {\n  const handleSelect = React.useCallback(\n    (country: RPNInput.Country) => {\n      onChange(country)\n    },\n    [onChange]\n  )\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant={\"outline\"}\n          className={cn(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n          disabled={disabled}\n        >\n          <FlagComponent country={value} countryName={value} />\n          <ChevronsUpDown\n            className={cn(\n              \"h-4 w-4 opacity-50 -mr-2\",\n              disabled ? \"hidden\" : \"opacity-100\"\n            )}\n          />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"p-0 w-[300px]\">\n        <Command>\n          <CommandList>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandEmpty>No country found.</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => (\n                <CommandItem\n                  className=\"gap-2\"\n                  key={option.value}\n                  onSelect={() => handleSelect(option.value)}\n                >\n                  <FlagComponent\n                    country={option.value}\n                    countryName={option.label}\n                  />\n                  <span className=\"text-sm flex-1\">{option.label}</span>\n                  {option.value && (\n                    <span className=\"text-sm text-foreground/50\">\n                      {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                    </span>\n                  )}\n                  <Check\n                    className={cn(\n                      \"ml-auto h-4 w-4\",\n                      option.value === value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n      {Flag && <Flag title={countryName} />}\n    </span>\n  )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/phone-input.json b/apps/www/public/registry/styles/new-york/phone-input.json
index 9f4b0680ed2..f950f60c0f0 100644
--- a/apps/www/public/registry/styles/new-york/phone-input.json
+++ b/apps/www/public/registry/styles/new-york/phone-input.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "phone-input.tsx",
-      "content": "import * as React from \"react\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport { Input, InputProps } from \"@/registry/new-york/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype PhoneInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\"\n> &\n  Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n    onChange?: (value: RPNInput.Value) => void\n  }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n    ({ className, onChange, ...props }, ref) => (\n      <RPNInput.default\n        ref={ref}\n        className={cn(\"flex\", className)}\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={InputComponent}\n        /**\n         * Handles the onChange event.\n         *\n         * react-phone-number-input might trigger the onChange event as undefined\n         * when a valid phone number is not entered. To prevent this,\n         * the value is coerced to an empty string.\n         *\n         * @param {E164Number | undefined} value - The entered value\n         */\n        onChange={(value) => onChange?.(value || \"\")}\n        {...props}\n      />\n    )\n  )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, ...props }, ref) => (\n    <Input\n      className={cn(\"rounded-s-none rounded-e-lg\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: RPNInput.Country\n  onChange: (value: RPNInput.Country) => void\n  options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n  disabled,\n  value,\n  onChange,\n  options,\n}: CountrySelectProps) => {\n  const handleSelect = React.useCallback(\n    (country: RPNInput.Country) => {\n      onChange(country)\n    },\n    [onChange]\n  )\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant={\"outline\"}\n          className={cn(\"flex gap-1 rounded-e-none rounded-s-lg pr-1 pl-3\")}\n          disabled={disabled}\n        >\n          <FlagComponent country={value} countryName={value} />\n          <CaretSortIcon\n            className={cn(\n              \"h-4 w-4 opacity-50\",\n              disabled ? \"hidden\" : \"opacity-100\"\n            )}\n          />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"p-0 w-[300px]\">\n        <Command>\n          <CommandList>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandEmpty>No country found.</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => (\n                <CommandItem\n                  className=\"gap-2\"\n                  key={option.value}\n                  onSelect={() => handleSelect(option.value)}\n                >\n                  <FlagComponent\n                    country={option.value}\n                    countryName={option.label}\n                  />\n                  <span className=\"text-sm flex-1\">{option.label}</span>\n                  {option.value && (\n                    <span className=\"text-sm text-foreground/50\">\n                      {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                    </span>\n                  )}\n                  <CheckIcon\n                    className={cn(\n                      \"ml-auto h-4 w-4\",\n                      option.value === value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n      {Flag && <Flag title={countryName} />}\n    </span>\n  )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
+      "content": "import * as React from \"react\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport { Input, InputProps } from \"@/registry/new-york/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype PhoneInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\"\n> &\n  Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n    onChange?: (value: RPNInput.Value) => void\n  }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n    ({ className, onChange, ...props }, ref) => (\n      <RPNInput.default\n        ref={ref}\n        className={cn(\"flex\", className)}\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={InputComponent}\n        /**\n         * Handles the onChange event.\n         *\n         * react-phone-number-input might trigger the onChange event as undefined\n         * when a valid phone number is not entered. To prevent this,\n         * the value is coerced to an empty string.\n         *\n         * @param {E164Number | undefined} value - The entered value\n         */\n        onChange={(value) => onChange?.(value || \"\")}\n        {...props}\n      />\n    )\n  )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, ...props }, ref) => (\n    <Input\n      className={cn(\"rounded-s-none rounded-e-lg\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: RPNInput.Country\n  onChange: (value: RPNInput.Country) => void\n  options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n  disabled,\n  value,\n  onChange,\n  options,\n}: CountrySelectProps) => {\n  const handleSelect = React.useCallback(\n    (country: RPNInput.Country) => {\n      onChange(country)\n    },\n    [onChange]\n  )\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant={\"outline\"}\n          className={cn(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n          disabled={disabled}\n        >\n          <FlagComponent country={value} countryName={value} />\n          <CaretSortIcon\n            className={cn(\n              \"h-4 w-4 opacity-50 -mr-2\",\n              disabled ? \"hidden\" : \"opacity-100\"\n            )}\n          />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"p-0 w-[300px]\">\n        <Command>\n          <CommandList>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandEmpty>No country found.</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => (\n                <CommandItem\n                  className=\"gap-2\"\n                  key={option.value}\n                  onSelect={() => handleSelect(option.value)}\n                >\n                  <FlagComponent\n                    country={option.value}\n                    countryName={option.label}\n                  />\n                  <span className=\"text-sm flex-1\">{option.label}</span>\n                  {option.value && (\n                    <span className=\"text-sm text-foreground/50\">\n                      {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                    </span>\n                  )}\n                  <CheckIcon\n                    className={cn(\n                      \"ml-auto h-4 w-4\",\n                      option.value === value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n      {Flag && <Flag title={countryName} />}\n    </span>\n  )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/registry/default/ui/phone-input.tsx b/apps/www/registry/default/ui/phone-input.tsx
index cdb67859e96..2ba1d10e9cc 100644
--- a/apps/www/registry/default/ui/phone-input.tsx
+++ b/apps/www/registry/default/ui/phone-input.tsx
@@ -92,13 +92,13 @@ const CountrySelect = ({
         <Button
           type="button"
           variant={"outline"}
-          className={cn("flex gap-1 rounded-e-none rounded-s-lg pr-1 pl-3")}
+          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3")}
           disabled={disabled}
         >
           <FlagComponent country={value} countryName={value} />
           <ChevronsUpDown
             className={cn(
-              "h-4 w-4 opacity-50",
+              "h-4 w-4 opacity-50 -mr-2",
               disabled ? "hidden" : "opacity-100"
             )}
           />
diff --git a/apps/www/registry/new-york/ui/phone-input.tsx b/apps/www/registry/new-york/ui/phone-input.tsx
index 0c939a71abe..d24c8a1020d 100644
--- a/apps/www/registry/new-york/ui/phone-input.tsx
+++ b/apps/www/registry/new-york/ui/phone-input.tsx
@@ -92,13 +92,13 @@ const CountrySelect = ({
         <Button
           type="button"
           variant={"outline"}
-          className={cn("flex gap-1 rounded-e-none rounded-s-lg pr-1 pl-3")}
+          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3")}
           disabled={disabled}
         >
           <FlagComponent country={value} countryName={value} />
           <CaretSortIcon
             className={cn(
-              "h-4 w-4 opacity-50",
+              "h-4 w-4 opacity-50 -mr-2",
               disabled ? "hidden" : "opacity-100"
             )}
           />