Link: export linkStyles to allow styling React Router Links

src/components/Link/Link.tsx

@@ -8,9 +8,7 @@ import {
 } from "react";
 import { Icon, IconName } from "@/components";
 import { styled } from "styled-components";
-
-type TextSize = "xs" | "sm" | "md" | "lg";
-type TextWeight = "normal" | "medium" | "semibold" | "bold";
+import { linkStyles, TextSize, TextWeight } from "./common";
 
 export interface LinkProps<T extends ElementType = "a"> {
   size?: TextSize;
@@ -22,33 +20,7 @@ export interface LinkProps<T extends ElementType = "a"> {
 }
 
 const CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`
-  font: ${({ $size, $weight = "normal", theme }) =>
-    theme.typography.styles.product.text[$weight][$size]};
-  color: ${({ theme }) => theme.click.global.color.text.link.default};
-  margin: 0;
-  text-decoration: none;
-  display: inline-flex;
-  gap: ${({ $size, theme }) =>
-    $size === "xs" || $size === "sm"
-      ? theme.click.link.space.sm.gap
-      : theme.click.link.space.md.gap};
-  margin-right: ${({ $size, theme }) =>
-    $size === "xs" || $size === "sm"
-      ? theme.click.link.space.sm.gap
-      : theme.click.link.space.md.gap};
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    color: ${({ theme }) => theme.click.global.color.text.link.hover};
-    transition: ${({ theme }) => theme.transition.default};
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  &:visited {
-    color: ${({ theme }) => theme.click.global.color.text.link.default};
-  }
+  ${linkStyles}
 `;
 
 const IconWrapper = styled.span<{ $size: TextSize }>`

src/components/Link/common.ts

@@ -0,0 +1,36 @@
+import { css } from "styled-components";
+
+export type TextSize = "xs" | "sm" | "md" | "lg";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+
+export type StyledLinkProps = { $size: TextSize; $weight: TextWeight };
+
+export const linkStyles = css<StyledLinkProps>`
+  font: ${({ $size, $weight = "normal", theme }) =>
+    theme.typography.styles.product.text[$weight][$size]};
+  color: ${({ theme }) => theme.click.global.color.text.link.default};
+  margin: 0;
+  text-decoration: none;
+  display: inline-flex;
+  gap: ${({ $size, theme }) =>
+    $size === "xs" || $size === "sm"
+      ? theme.click.link.space.sm.gap
+      : theme.click.link.space.md.gap};
+  margin-right: ${({ $size, theme }) =>
+    $size === "xs" || $size === "sm"
+      ? theme.click.link.space.sm.gap
+      : theme.click.link.space.md.gap};
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.click.global.color.text.link.hover};
+    transition: ${({ theme }) => theme.transition.default};
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &:visited {
+    color: ${({ theme }) => theme.click.global.color.text.link.default};
+  }
+`;

src/components/index.ts

@@ -34,6 +34,7 @@ export { default as Flags } from "./icons/Flags";
 export { Grid } from "./Grid/Grid";
 export { HoverCard } from "./HoverCard/HoverCard";
 export { Link } from "./Link/Link";
+export { linkStyles } from "./Link/common";
 export { Logo } from "./Logos/Logo";
 export { NumberField } from "./Input/NumberField";
 export { PasswordField } from "./Input/PasswordField";

src/components/types.ts

@@ -58,6 +58,7 @@ export type {
   GridContextMenuItemProps,
   Rectangle,
 } from "./Grid/types";
+export type { StyledLinkProps } from "./Link/common";
 
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";