diff --git a/.changeset/hip-needles-design.md b/.changeset/hip-needles-design.md
new file mode 100644
index 0000000000..9dee36589b
--- /dev/null
+++ b/.changeset/hip-needles-design.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Made PhoneNumberInput default flag size responsive to the input size.
diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx
index 950c323086..f1d17d990f 100644
--- a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx
+++ b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx
@@ -199,14 +199,21 @@ export interface PhoneNumberInputProps
};
}
-const DefaultPrefix: ComponentType<{
+type DefaultPrefixProps = {
value?: string | number;
className?: string;
-}> = ({ value, ...rest }) =>
+ size?: FieldSize;
+};
+
+const DefaultPrefix = ({ value, ...rest }: DefaultPrefixProps) =>
value ? (
) : null;
+const getDefaultPrefix = (size: FieldSize) => (args: DefaultPrefixProps) => (
+
+);
+
/**
* Provides a straightforward way for users to type their phone number in an
* accurate, consistent format including the country code and subscriber number.
@@ -404,6 +411,7 @@ export function PhoneNumberInput({
(({ value: inputValue, ...rest }) => (
))
@@ -434,7 +442,7 @@ export function PhoneNumberInput({
countryCodeRef as RefObject,
countryCode.ref as ForwardedRef,
)}
- renderPrefix={countryCode.renderPrefix ?? DefaultPrefix}
+ renderPrefix={countryCode.renderPrefix ?? getDefaultPrefix(size)}
/>
)}