Example from https://react-md.dev/packages/utils/demos#hover-mode

Utils Example - Hover Mode

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Utils Example - Hover Mode</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

@use '../everything' as *;

.blockquote {
  $border-style: 0.25em solid rmd-divider-theme-var(background-color);

  @include rmd-theme(color, text-secondary-on-background);
  @include rmd-typography(subtitle-1);
  @include rmd-utils-rtl-auto(border-left, $border-style);

  font-style: italic;
  margin: 1em 0;
  padding: 0.5em 1em;
  position: relative;

  p:only-child {
    margin: 0;
  }

  p:last-child {
    margin-bottom: 0;
  }
}


import type { HTMLAttributes, ReactElement } from "react";
import cn from "classnames";

import styles from "./Blockquote.module.scss";

export default function Blockquote({
  className,
  children,
  ...props
}: HTMLAttributes<HTMLQuoteElement>): ReactElement {
  return (
    <blockquote {...props} className={cn(styles.blockquote, className)}>
      {children}
    </blockquote>
  );
}


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.code {
  @include rmd-typography(body-1);

  font-family: 'Source Code Pro', Consolas, Monaco, monospace;
}

.inline {
  color: var(--code-color);
  white-space: pre-wrap;
}

.ticked {
  &::before,
  &::after {
    content: '\`';
  }
}

.oneline {
  white-space: nowrap;
}


import type { HTMLAttributes } from "react";
import { forwardRef } from "react";
import cn from "classnames";

import styles from "./Code.module.scss";

export interface CodeProps extends HTMLAttributes<HTMLElement> {
  /**
   * Boolean if the code is displayed inline with other text normally meaning it
   * is not a child of the `CodeBlock` component.
   *
   * @defaultValue `true` when the `dangerouslySetInnerHTML` prop is not defined
   */
  inline?: boolean;

  /**
   * Boolean if the code should no be able to line wrap. This should really only
   * be enabled when the parent element also has `white-space: nowrap` and
   * overflown text should be ellipsis-ed
   *
   * @defaultValue `false`
   */
  noWrap?: boolean;

  /**
   * Boolean if the code should display backticks before and after the content
   * to help show that this is a code block.
   *
   * @defaultValue `true` when the `dangerouslySetInnerHTML` prop is not define
   */
  ticked?: boolean;
}

/**
 * This component is normally used to render inline code throughout the website.
 */
export default forwardRef<HTMLElement, CodeProps>(function Code(
  {
    children,
    className,
    dangerouslySetInnerHTML,
    inline = !dangerouslySetInnerHTML,
    ticked = inline,
    noWrap = false,
    ...props
  },
  ref
) {
  return (
    <code
      {...props}
      ref={ref}
      className={cn(
        styles.code,
        {
          [styles.inline]: inline,
          [styles.ticked]: ticked,
          [styles.oneline]: inline && noWrap,
        },
        className
      )}
      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
    >
      {children}
    </code>
  );
});


@use 'sass:map';
// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;
@use './solarized';

.block {
  @include rmd-typography(body-1);

  background-color: solarized.$base-03;
  color: solarized.$base-1;

  // always enforce ltr for blocked code
  direction: ltr;
  font-family: 'Source Code Pro', Consolas, Monaco, monospace;
  margin: 0.5em 0;
  overflow: auto;
  padding: 1em;

  &::selection,
  *::selection {
    background-color: solarized.$base-02;
  }

  // to help with the collapse transition on expandable code, update it so
  // that only the vertical overflow is hidden.
  &.rmd-collapse--no-overflow {
    overflow-y: hidden;
  }

  // prismjs custom theme
  // this is _basically_ my current vim theme, but not as good since
  // Prism doesn't have as many tokenizers
  :global {
    .token {
      position: relative;
      z-index: 1;

      &.comment,
      &.doctype {
        color: solarized.$base-01;
      }

      &.keyword {
        color: solarized.$green;
      }

      &.punctuation {
        color: solarized.$base-01;
      }

      &.inserted,
      &.string,
      .language-tsx &.attr-value {
        color: solarized.$cyan;
      }

      &.tag,
      &.selector,
      &.class-name {
        color: solarized.$blue;
      }

      &.attr-name,
      &.property,
      &.builtin {
        color: solarized.$yellow;
      }

      &.script,
      &.interpolation {
        color: solarized.$base-1;
      }

      &.deleted,
      &.boolean,
      &.number,
      &.interpolation-punctuation {
        color: solarized.$red;
      }

      &.important,
      &.bold {
        font-weight: map.get($rmd-typography-font-weights, bold);
      }

      &.italic {
        font-style: italic;
      }

      &.entity {
        cursor: help;
      }
    }
  }

  &:global(.language-scss) :global .token.function,
  &:global(.language-scss) :global .token.variable {
    color: solarized.$blue;
  }

  &:global(.language-ts) :global .token + .class-name {
    color: solarized.$base-1;
  }

  &:global(.language-scss) :global .token.function,
  &:global(.language-shell) :global .token.function {
    color: solarized.$orange;
  }
}

.counted {
  padding-left: 3em;
  position: relative;
}


import type { DOMAttributes, HTMLAttributes, ReactNode } from "react";
import { forwardRef } from "react";
import cn from "classnames";

import Code from "../Code";
import styles from "./CodeBlock.module.scss";
import LineNumbers from "./LineNumbers";
import { highlightCode } from "./utils";

export interface CodeBlockProps extends HTMLAttributes<HTMLPreElement> {
  /**
   * An optional code language. This should be one of:
   * - js
   * - jsx
   * - javascript
   * - ts
   * - tsx
   * - typescript
   * - css
   * - scss
   * - markup
   * - markdown
   * - bash
   * - shell
   * - git
   * - diff
   * - json
   * - properties
   *
   * And whatever the default Prism languages are. Update the `.babelrc` to add
   * additional languages for the `prismjs` plugin.
   */
  language?: string;

  /**
   * Boolean if the code should be highlighted using Prism
   */
  highlight?: boolean;

  /**
   * Boolean if line numbers should be displayed with the code.
   */
  lineNumbers?: boolean;

  /**
   * This should normally be a string of code to display, but can also be any
   * renderable thing. The {@link highlight} prop will only work for string
   * `children`.
   */
  children: ReactNode;
}

/**
 * Renders a code block with highlighted code using PrismJS.
 */
export default forwardRef<HTMLPreElement, CodeBlockProps>(function CodeBlock(
  {
    className,
    language = "markdown",
    children,
    highlight = true,
    lineNumbers: propLineNumbers,
    suppressHydrationWarning = false,
    ...props
  },
  ref
) {
  const code = typeof children === "string" ? children : "";

  const lineNumbers =
    propLineNumbers ??
    (!/markup|markdown|shell/.test(language) &&
      (code.match(/\r?\n/g) || []).length + 1 > 3);

  let dangerouslySetInnerHTML: DOMAttributes<HTMLElement>["dangerouslySetInnerHTML"];
  if (code && highlight) {
    dangerouslySetInnerHTML = {
      __html: highlightCode(code, language),
    };
  }

  return (
    <pre
      {...props}
      data-linenumbers={lineNumbers || undefined}
      ref={ref}
      className={cn(
        styles.block,
        lineNumbers && styles.counted,
        `language-${language}`,
        className
      )}
      suppressHydrationWarning={suppressHydrationWarning}
    >
      {lineNumbers && code && <LineNumbers code={code} />}
      <Code
        inline={!highlight || !code}
        dangerouslySetInnerHTML={dangerouslySetInnerHTML}
        suppressHydrationWarning={suppressHydrationWarning}
      >
        {dangerouslySetInnerHTML ? undefined : children}
      </Code>
    </pre>
  );
});


@use './solarized';

.container {
  border-right: 1px solid solarized.$base-01;
  counter-reset: line-numbers;
  display: flex;
  flex-direction: column;
  left: 0;
  padding-right: 0.25em;
  pointer-events: none;
  position: absolute;
  text-align: right;
  width: 2.5em;
}

.counter::before {
  content: counter(line-numbers);
  counter-increment: line-numbers;
}


import type { ReactElement } from "react";

import styles from "./LineNumbers.module.scss";

export interface LineNumbersProps {
  code: string;
}

export default function LineNumbers({ code }: LineNumbersProps): ReactElement {
  const lineCount = code.match(/\r?\n/g)?.length;
  const lines = typeof lineCount === "number" ? lineCount + 1 : 1;

  return (
    <span className={styles.container}>
      {Array.from({ length: lines }).map((_, i) => (
        <span key={i} className={styles.counter} />
      ))}
    </span>
  );
}


import { highlight, languages } from "prismjs";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-jsx";
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-tsx";
import "prismjs/components/prism-css";
import "prismjs/components/prism-scss";
import "prismjs/components/prism-css-extras";
import "prismjs/components/prism-markup";
import "prismjs/components/prism-markdown";
import "prismjs/components/prism-bash";
import "prismjs/components/prism-git";
import "prismjs/components/prism-diff";
import "prismjs/components/prism-json";
import "prismjs/components/prism-properties";
import type {
  DangerouslyHighlightCode,
  GetCodeLanguage,
} from "react-marked-renderer";

export const getLanguage: GetCodeLanguage = (lang, _rawCode) => {
  // allow aliases
  lang = lang === "sh" ? "shell" : lang;

  // if the Prism doesn't support the language, default to nothing instead
  // of crashing
  if (!languages[lang]) {
    return "markup";
  }

  return lang;
};

export const highlightCode: DangerouslyHighlightCode = (code, lang) =>
  highlight(code, languages[lang], lang);


import type { ReactElement } from "react";
import { Typography } from "@react-md/typography";
import { HoverModeProvider } from "@react-md/utils";

import Markdown from "./Markdown";
import WikipediaPreviewLink from "./WikipediaPreviewLink";

function DesignLanguageDescription(): ReactElement {
  return (
    <Markdown>
      A **design language** or **design vocabulary** is an overarching scheme or
      style that guides the design of a complement of products or architectural
      settings.
    </Markdown>
  );
}

function GoogleNowDescription(): ReactElement {
  return (
    <Markdown>
      **Google Now** was a feature of Google Search of the Google app for
      Android and iOS. Google Now proactively delivered information to users to
      predict (based on search habits and other factors) information they may
      need in the form of informational cards. Google Now branding is no longer
      used, but the functionality continues in the Google app and its feed.
    </Markdown>
  );
}

export default function Demo(): ReactElement {
  return (
    // Note: this can be ignored if you are using the `Configuration` component
    // from `@react-md/utils`
    <HoverModeProvider>
      <Typography>
        {/* copy/pasted from https://en.wikipedia.org/wiki/Material_Design */}
        <strong>Material Design</strong> (codenamed{" "}
        <strong>Quantum Paper</strong>){" "}
        <WikipediaPreviewLink
          href="https://en.wikipedia.org/wiki/Design_language"
          preview={<DesignLanguageDescription />}
        >
          Design Language
        </WikipediaPreviewLink>{" "}
        {'"card" motifs that debuted in '}
        <WikipediaPreviewLink
          href="https://en.wikipedia.org/wiki/Google_Now"
          preview={<GoogleNowDescription />}
        >
          Google Now
        </WikipediaPreviewLink>{" "}
        , Material Design uses more grid-based layouts, responsive animations
        and transitions, padding, and depth effects such as lighting and
        shadows. Google announced Material Design on June 25, 2014, at the 2014
        Google I/O conference.
      </Typography>
    </HoverModeProvider>
  );
}


import type { ReactNode, ReactElement } from "react";
import { createContext, useContext, useMemo } from "react";
import createIdGenerator from "./createIdGenerator";

type IdGenerator = ReturnType<typeof createIdGenerator>;

const context = createContext<IdGenerator>(createIdGenerator("autoid"));
const { Provider } = context;

export function useId(id?: string): string {
  const generator = useContext(context);

  return useMemo(() => {
    if (id) {
      return id;
    }

    return generator();
  }, [id, generator]);
}

export interface IdProviderProps {
  prefix?: string;
  children: ReactNode;
}

export function IdProvider({
  children,
  prefix = "autoid",
}: IdProviderProps): ReactElement {
  const value = useMemo(() => createIdGenerator(prefix), [prefix]);

  return <Provider value={value}>{children}</Provider>;
}


import type { ReactElement, ReactNode } from "react";
import type { LinkProps as NextLinkProps } from "next/link";
import NextLink from "next/link";
import { Link as RMDLink } from "@react-md/link";

export interface LinkProps extends Omit<NextLinkProps, "as" | "children"> {
  id?: string;
  className?: string;
  children: ReactNode;
  href: string;
}

export default function Link({
  children,
  shallow,
  scroll,
  replace,
  href,
  passHref,
  ...props
}: LinkProps): ReactElement {
  if (href.startsWith("http")) {
    return (
      <RMDLink {...props} href={href}>
        {children}
      </RMDLink>
    );
  }

  return (
    <NextLink
      shallow={shallow}
      scroll={scroll}
      replace={replace}
      href={href}
      passHref={passHref}
    >
      <RMDLink {...props}>{children}</RMDLink>
    </NextLink>
  );
}

Link.defaultProps = {
  passHref: true,
};


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.container {
  @include rmd-utils-phone-media {
    @each $headline in (1 2 3) {
      :global .rmd-typography--headline-#{$headline} {
        $name: 'headline-' + ($headline + 2);
        @include rmd-typography($name);
      }
    }
  }

  ul,
  ol {
    @include rmd-utils-scroll;
  }
}

.marginless {
  > p:only-child {
    margin-top: 0;
  }
}


import type { HTMLAttributes, ReactElement } from "react";
import { useEffect, useState } from "react";
import cn from "classnames";
import { Markdown as MarkdownRenderer } from "react-marked-renderer";

import { getLanguage, highlightCode } from "../utils";

import styles from "./Markdown.module.scss";
import { renderers } from "./renderers";
import { transformMarkdown } from "./utils";

function useMarkdownResolver(markdown: MarkdownProps["children"]): string {
  /* eslint-disable react-hooks/rules-of-hooks */
  // i will never swap between strings and promises
  if (typeof markdown === "string") {
    return transformMarkdown(markdown);
  }

  const [resolved, setResolved] = useState("");
  useEffect(() => {
    markdown().then((md) => {
      if (typeof md === "string") {
        setResolved(transformMarkdown(md));
      } else if (typeof md.default === "string") {
        setResolved(transformMarkdown(md.default));
      }
    });
  }, [markdown]);

  return resolved;
}

export type ResolveMarkdown = () => Promise<string | { default: string }>;
export type MarkdownChildren = string | ResolveMarkdown;

export interface MarkdownProps extends HTMLAttributes<HTMLDivElement> {
  children: ResolveMarkdown | string;
  disableSinglePMargin?: boolean;
}

export default function Markdown({
  className,
  children,
  disableSinglePMargin,
  ...props
}: MarkdownProps): ReactElement {
  const markdown = useMarkdownResolver(children);

  return (
    <>
      <div
        {...props}
        className={cn(
          styles.container,
          {
            [styles.marginless]: disableSinglePMargin,
          },
          className
        )}
      >
        <MarkdownRenderer
          markdown={markdown}
          renderers={renderers}
          getLanguage={getLanguage}
          highlightCode={highlightCode}
        />
      </div>
    </>
  );
}


.heading {
  word-break: break-word;
}

.task {
  list-style: none;
  margin-left: -2.5rem;
}


import type { MarkdownRenderers } from "react-marked-renderer";
import {
  DEFAULT_MARKDOWN_RENDERERS,
  getTokensText,
  ImageRenderer,
  useSluggedId,
} from "react-marked-renderer";
import {
  Checkbox,
  Divider,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHeader,
  TableRow,
  Typography,
} from "react-md";

import Blockquote from "../Blockquote";
import Code from "../Code";
import CodeBlock from "../CodeBlock";
import Link from "../Link";

import styles from "./renderers.module.scss";

export const renderers: MarkdownRenderers = {
  ...DEFAULT_MARKDOWN_RENDERERS,
  hr: function Hr() {
    return <Divider />;
  },

  link: function LinkRenderer({
    type: _type,
    raw: _raw,
    text: _text,
    tokens: _tokens,
    ...props
  }) {
    return <Link {...props} />;
  },

  paragraph: function Paragraph({ children }) {
    return (
      <Typography type="subtitle-1" component="p">
        {children}
      </Typography>
    );
  },

  heading: function Heading({ depth, tokens, children }) {
    type Headline =
      | "headline-1"
      | "headline-2"
      | "headline-3"
      | "headline-4"
      | "headline-5"
      | "headline-6";

    let type: Headline;
    switch (depth) {
      case 1:
        type = "headline-1";
        break;
      case 2:
        type = "headline-2";
        break;
      case 3:
        type = "headline-3";
        break;
      case 4:
        type = "headline-4";
        break;
      case 5:
        type = "headline-5";
        break;
      default:
        type = "headline-6";
    }

    const id = useSluggedId(tokens);
    return (
      <Typography
        id={id}
        type={type}
        className={styles.heading}
        suppressHydrationWarning
      >
        {children}
      </Typography>
    );
  },

  codespan: function CodeSpan({ children }) {
    return <Code className="language-none">{children}</Code>;
  },

  codeblock: function Codeblock({ lang, text }) {
    return <CodeBlock language={lang}>{text}</CodeBlock>;
  },

  listitem: function ListItem({ children }) {
    return (
      <Typography component="li" type="subtitle-1">
        {children}
      </Typography>
    );
  },

  blockquote: function BlockquoteRenderer({ children }) {
    return <Blockquote>{children}</Blockquote>;
  },

  task: function Task({ defaultChecked, tokens, children }) {
    const id = useSluggedId(`${getTokensText(tokens)}-task`);
    // add a key so the state updates correctly if someone modifies the markdown
    // checked state instead of clicking the checkbox. Only useful if the
    // preview is persistent while updating the markdown.
    return (
      <li
        key={`${defaultChecked}`}
        className={styles.task}
        suppressHydrationWarning
      >
        <Checkbox id={id} defaultChecked={defaultChecked} label={children} />
      </li>
    );
  },

  img: function Img({ href, ...props }) {
    return (
      <Link
        href={href}
        className="rmd-media-container rmd-media-container--auto"
      >
        {href.endsWith(".mp4") ? (
          <video autoPlay loop muted controls>
            <source src={href} type="video/mp4" />
            {props.text || props.title}
          </video>
        ) : (
          <ImageRenderer href={href} {...props} />
        )}
      </Link>
    );
  },

  table: function TableRenderer({ children }) {
    return (
      <TableContainer>
        <Table>{children}</Table>
      </TableContainer>
    );
  },
  tbody: function Tbody({ children }) {
    return <TableBody>{children}</TableBody>;
  },
  thead: function Thead({ children }) {
    return <TableHeader>{children}</TableHeader>;
  },
  tr: function Tr({ children }) {
    return <TableRow>{children}</TableRow>;
  },
  td: function Td({ children }) {
    return <TableCell>{children}</TableCell>;
  },
  th: function Th({ children }) {
    return <TableCell>{children}</TableCell>;
  },
};


import {
  RMD_VERSION,
  GITHUB_URL,
  COMMIT_SHA,
  GITHUB_FILE_URL,
} from "../github";
import { PACKAGE_NAMES, SCSS_PACKAGES } from "../packages";

type Transformer = (markdown: string) => string;
const joinedNames = PACKAGE_NAMES.join("|");
const packagesList = `
${PACKAGE_NAMES.map(
  (name) => `- [@react-md/${name}](/packages/${name}/installation)`
).join("\n")}
`;
const sassdocPackageList = `
${SCSS_PACKAGES.map(
  (name) => `- [@react-md/${name} SassDoc](/packages/${name}/sassdoc)`
).join("\n")}
`;
const whitespace = "(?=\r?\n| |[^/])";

/**
 * Updates the markdown to quickly link to a specific package's demo or
 * installation page. The installation page will only be used if the package is
 * not demoable.
 *
 * @example
 *
 * ```
 * #package-name -> [@react-md/package-name](/packages/package-name/demos|installation)
 * ```
 */
export const packageQuickLink: Transformer = (md) =>
  md.replace(
    new RegExp(`(\\s|\\()#(${joinedNames})${whitespace}`, "g"),
    (_, char, pkg) => `${char}[@react-md/${pkg}](/packages/${pkg}/demos)`
  );

/**
 * Updates the markdown to quickly link to a specific package's documentation
 * page.
 *
 * @example
 *
 * ```
 * #package-name -> [package-name page](/packages/package-name/page)
 * ```
 */
export const packagePageQuickLink: Transformer = (md) =>
  md.replace(
    new RegExp(`#(${joinedNames})/(demos|api|sassdoc)`, "g"),
    "[$1 $2](/packages/$1/$2)"
  );

/**
 * Updates the markdown to list all the available packages by creating links to
 * all the demo or installation pages.
 *
 * @example
 *
 * ```
 * #packages -> markdown list for all react-md packages
 * ```
 */
export const listAllPackages: Transformer = (md) =>
  md.replace(/#packages(\/(demos|sassdoc))?/g, (_, subpath) => {
    if (subpath === "/demos") {
      return packagesList.replace(/\/installation/g, "/demos");
    }
    if (subpath === "/sassdoc") {
      return sassdocPackageList;
    }

    return packagesList;
  });

/**
 * Creates a quick link to customizing your theme. Not used too much.
 */
export const linkToCustomizingTheme: Transformer = (md) =>
  md.replace(
    /#customizing-your-theme/g,
    "[customizing your theme](/guides/customizing-your-theme)"
  );

/**
 * Updates the markdown to link to specific issues and pull requests within
 * GitHub. This will also try to make sure that hex color codes aren't updated
 * to GitHub links as well.
 *
 * @example
 *
 * ```
 * #1 > [#1](https://github.com/mlaursen/react-md/issues/1)
 * #713 -> [#713](https://github.com/mlaursen/react-md/issues/713)
 * ```
 */
export const linkToGithubIssues: Transformer = (md) =>
  md.replace(
    /(: )?(#)(\d+)(?=\r?\n| (?!!)|$)/g,
    (match, invalid, _hash, ticket) => {
      if (invalid) {
        return match;
      }

      return `[#${ticket}](${GITHUB_URL}/issues/${ticket})`;
    }
  );

/**
 * Updates the markdown to link to specific github commits if there is a 7 digit
 * sha in the markdown.
 *
 * @example
 *
 * ```
 * 034c7de -> [034c7de](https://github.com/mlaursen/react-md/commit/034c7de)
 * ```
 */
export const linkToGithubCommit: Transformer = (md) =>
  md.replace(/([^[])(\b[0-9a-f]{7}\b)/g, `$1[$2](${GITHUB_URL}/commit/$2)`);

/**
 * A _super_ important transformer that replaces emojis in the markdown if the
 * markdown did not use the emoji character.
 *
 * Currently only supports:
 *
 * ```
 * :tada: -> 🎉
 * ```
 */
export const replaceEmojis: Transformer = (md) => md.replace(/(:tada:)/g, "🎉");

export const replaceGeneratedConstants: Transformer = (md) =>
  md.replace(
    /{{(COMMIT_SHA|GITHUB_URL|GITHUB_FILE_URL|RMD_VERSION)}}/g,
    (_, type) => {
      switch (type) {
        case "COMMIT_SHA":
          return COMMIT_SHA;
        case "GITHUB_URL":
          return GITHUB_URL;
        case "GITHUB_FILE_URL":
          return GITHUB_FILE_URL;
        case "RMD_VERSION":
          return RMD_VERSION;
        default:
          throw new Error(`Unknown git replacement: ${type}`);
      }
    }
  );

const transforms: Transformer[] = [
  packageQuickLink,
  packagePageQuickLink,
  listAllPackages,
  linkToCustomizingTheme,
  linkToGithubIssues,
  linkToGithubCommit,
  replaceEmojis,
  replaceGeneratedConstants,
];

const transform = (markdown: string): string =>
  transforms.reduce((updated, fn) => fn(updated), markdown);

export function transformMarkdown(markdown: string): string {
  return transform(markdown);
}


.dialog {
  cursor: pointer;
  max-height: 10rem;
  max-width: 20rem;
  overflow: hidden;
}


import type { ReactElement, ReactNode } from "react";
import { useRef } from "react";
import { DialogContent, FixedDialog } from "@react-md/dialog";
import { Link } from "@react-md/link";
import { BELOW_CENTER_ANCHOR, useHoverMode } from "@react-md/utils";

import { useId } from "../IdProvider";

import styles from "./WikipediaPreviewLink.module.scss";

export interface WikipediaPreviewLinkProps {
  /**
   * The wikipedia URL
   */
  href: string;

  /**
   * The content to display in the preview window.
   */
  preview: ReactNode;

  /**
   * The link contents.
   */
  children: ReactNode;
}

export default function WikipediaPreviewLink({
  href,
  preview,
  children,
}: WikipediaPreviewLinkProps): ReactElement {
  const id = useId("wiki");
  const { active, hoverHandlers, visible, setVisible } = useHoverMode({
    exitVisibilityDelay: 0,
  });

  const linkRef = useRef<HTMLAnchorElement>(null);
  return (
    <>
      <Link ref={linkRef} href={href} {...hoverHandlers}>
        {children}
      </Link>
      <FixedDialog
        aria-label="Wikipedia Preview"
        id={id}
        visible={visible}
        onRequestClose={() => setVisible(false)}
        {...hoverHandlers}
        fixedTo={linkRef}
        onClick={() => {
          window.location.href = href;
        }}
        disableFocusContainer={active}
        disableScrollLock={!active}
        anchor={BELOW_CENTER_ANCHOR}
        options={{ preventOverlap: true }}
        overlay={active ? false : undefined}
        className={styles.dialog}
      >
        <DialogContent>{preview}</DialogContent>
      </FixedDialog>
    </>
  );
}


export { default } from "./WikipediaPreviewLink";


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


/**
 * An extremely simplified uuid function that is scoped with a specific prefix.
 * This will just always increment the total count at the end of the prefix.
 *
 * ```ts
 * const uuid = createIdGenerator("my-custom-prefix");
 *
 * uuid(); // my-custom-prefix-0
 * uuid(); // my-custom-prefix-1
 * uuid(); // my-custom-prefix-2
 * ```
 *
 * @param prefix - The string prefix to use
 * @returns a function to call to generate a "uuid"
 */
export default function createIdGenerator(prefix: string): () => string {
  const generator = (function* idGenerator() {
    let index = 0;
    while (true) {
      yield `${prefix}-${index}`;
      index += 1;
    }
  })();

  return (): string => generator.next().value;
}


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
