Refactor typography components to use function declarations

10 files changed, 31 insertions, 29 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
index b68da08c18..3b59080ba6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
@@ -2,6 +2,6 @@ import { Text, TextProps } from './Text';
 
 export type BodySmallProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const BodySmall = <T extends React.ElementType = 'span'>(props: BodySmallProps<T>) => (
-  <Text variant="bodySmall" {...props} />
-);
+export function BodySmall<T extends React.ElementType = 'span'>(props: BodySmallProps<T>) {
+  return <Text variant="bodySmall" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
index 402153fa6c..f142f147a0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
@@ -2,6 +2,8 @@ import { Text, TextProps } from './Text';
 
 export type BodySmallSemiBoldProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const BodySmallSemiBold = <T extends React.ElementType = 'span'>(
+export function BodySmallSemiBold<T extends React.ElementType = 'span'>(
   props: BodySmallSemiBoldProps<T>,
-) => <Text variant="bodySmallSemibold" {...props} />;
+) {
+  return <Text variant="bodySmallSemibold" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
index 75a6ac3d39..9eb110f1f9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
@@ -2,6 +2,6 @@ import { Text, TextProps } from './Text';
 
 export type FootnoteMiniProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const FootnoteMini = <T extends React.ElementType = 'span'>(props: FootnoteMiniProps<T>) => (
-  <Text variant="footnoteMini" {...props} />
-);
+export function FootnoteMini<T extends React.ElementType = 'span'>(props: FootnoteMiniProps<T>) {
+  return <Text variant="footnoteMini" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
index 9bb7dc7b03..3a32493238 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
@@ -3,6 +3,6 @@ import { TextProps } from './Text';
 
 export type LabelProps<T extends React.ElementType = 'label'> = TextProps<T>;
 
-export const Label = <T extends React.ElementType = 'label'>(props: LabelProps<T>) => {
+export function Label<T extends React.ElementType = 'label'>(props: LabelProps<T>) {
   return <Text as="label" {...props} />;
-};
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
index c8dc9865cc..53f8fa2490 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
@@ -2,6 +2,6 @@ import { Text, TextProps } from './Text';
 
 export type LabelTinyProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const LabelTiny = <T extends React.ElementType = 'span'>(props: LabelTinyProps<T>) => (
-  <Text variant="labelTiny" {...props} />
-);
+export function LabelTiny<T extends React.ElementType = 'span'>(props: LabelTinyProps<T>) {
+  return <Text variant="labelTiny" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTinySemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTinySemiBold.tsx
index c0fc6e38ba..453e408bc0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTinySemiBold.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTinySemiBold.tsx
@@ -2,6 +2,8 @@ import { Text, TextProps } from './Text';
 
 export type LabelTinySemiBoldProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const LabelTinySemiBold = <T extends React.ElementType = 'span'>(
+export function LabelTinySemiBold<T extends React.ElementType = 'span'>(
   props: LabelTinySemiBoldProps<T>,
-) => <Text variant="labelTinySemiBold" {...props} />;
+) {
+  return <Text variant="labelTinySemiBold" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
index e8b58488b4..cc1a53fcf4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
@@ -36,13 +36,11 @@ const StyledText = styled.span<TransientProps<TextBaseProps>>(
   },
 );
 
-export const Text = <T extends React.ElementType = 'span'>({
+export function Text<T extends React.ElementType = 'span'>({
   variant,
   color,
   textAlign,
   ...props
-}: TextProps<T>) => {
+}: TextProps<T>) {
   return <StyledText $variant={variant} $color={color} $textAlign={textAlign} {...props} />;
-};
-
-Text.displayName = 'Text';
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
index 8060af731e..d143faa146 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
@@ -2,6 +2,6 @@ import { Text, TextProps } from './Text';
 
 export type TitleBigProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const TitleBig = <T extends React.ElementType = 'span'>(props: TitleBigProps<T>) => (
-  <Text variant="titleBig" {...props} />
-);
+export function TitleBig<T extends React.ElementType = 'span'>(props: TitleBigProps<T>) {
+  return <Text variant="titleBig" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
index d133bf3083..d687764cb7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
@@ -2,6 +2,6 @@ import { Text, TextProps } from './Text';
 
 export type TitleLargeProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const TitleLarge = <T extends React.ElementType = 'span'>(props: TitleLargeProps<T>) => (
-  <Text variant="titleLarge" {...props} />
-);
+export function TitleLarge<T extends React.ElementType = 'span'>(props: TitleLargeProps<T>) {
+  return <Text variant="titleLarge" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
index 5c4c2852e6..c6edbaa334 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
@@ -2,6 +2,6 @@ import { Text, TextProps } from './Text';
 
 export type TitleMediumProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const TitleMedium = <T extends React.ElementType = 'span'>(props: TitleMediumProps<T>) => (
-  <Text variant="titleMedium" {...props} />
-);
+export function TitleMedium<T extends React.ElementType = 'span'>(props: TitleMediumProps<T>) {
+  return <Text variant="titleMedium" {...props} />;
+}