Link

import { Link } from "@styple/design-system";

<Text>
  This is a text paragraph with some <Link variant="color" href="#">links like this</Link>.
  There are a couple different variants for <Link href="#">these links</Link> that you see here. That is all.
</Text>

import NextLink from "next/link";
import { Link as DSLink } from "../packages/design-system";
import React from "react";
import { UrlObject } from "url";

type LinkProps = Omit<React.ComponentProps<typeof DSLink>, "href"> & {
  href: string | UrlObject;
};

export const Link = React.forwardRef<
  React.ElementRef<typeof DSLink>,
  LinkProps
>(({ href, children, ...props }, forwardedRef) => {
  return (
    <NextLink href={href} passHref>
      <DSLink ref={forwardedRef} {...props}>
        {children}
      </DSLink>
    </NextLink>
  );
});
Link.displayName = "Link";