@depup/nextra 4.6.1-depup.0

package/dist/client/components/file-tree/folder.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
+import cn from "clsx";
+import { useState } from "react";
+import { FolderIcon, FolderOpenIcon } from "../../icons/index.js";
+import { Button } from "../button.js";
+const Folder = (t0) => {
+  const $ = _c(16);
+  const {
+    name,
+    open,
+    children,
+    defaultOpen: t1,
+    active
+  } = t0;
+  const defaultOpen = t1 === void 0 ? false : t1;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setIsOpen(_temp);
+    };
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  const toggle = t2;
+  const isFolderOpen = open === void 0 ? isOpen : open;
+  const ComponentToUse = isFolderOpen ? FolderOpenIcon : FolderIcon;
+  let t3;
+  if ($[1] !== active) {
+    t3 = (t42) => {
+      const {
+        hover
+      } = t42;
+      return cn("x:flex x:items-center x:gap-1 x:break-all", "x:text-start", hover && "x:opacity-60", active && "x:text-primary-600");
+    };
+    $[1] = active;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== ComponentToUse) {
+    t4 = /* @__PURE__ */ jsx(ComponentToUse, { height: "14", className: "x:shrink-0" });
+    $[3] = ComponentToUse;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== name || $[6] !== open || $[7] !== t3 || $[8] !== t4) {
+    t5 = /* @__PURE__ */ jsxs(Button, { onClick: toggle, disabled: open, className: t3, children: [
+      t4,
+      name
+    ] });
+    $[5] = name;
+    $[6] = open;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== children || $[11] !== isFolderOpen) {
+    t6 = isFolderOpen && /* @__PURE__ */ jsx("ul", { className: "x:flex x:flex-col x:gap-2 x:ps-4", children });
+    $[10] = children;
+    $[11] = isFolderOpen;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t5 || $[14] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("li", { className: "x:flex x:flex-col x:gap-1", children: [
+      t5,
+      t6
+    ] });
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
+};
+function _temp(v) {
+  return !v;
+}
+export {
+  Folder
+};

package/dist/client/components/file-tree/index.d.ts

@@ -0,0 +1,57 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { FileProps } from './file.js';
+import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
+import { Tree } from './tree.js';
+
+/**
+ * A built-in component to visually represent a file tree.
+ *
+ * @example
+ * Click the folder to test the dynamic functionality of the file tree.
+ *
+ * <FileTree>
+ *   <FileTree.Folder name="content" defaultOpen>
+ *     <FileTree.File name="_meta.js" />
+ *     <FileTree.File name="contact.md" />
+ *     <FileTree.File name="index.mdx" />
+ *     <FileTree.Folder name="about">
+ *       <FileTree.File name="_meta.js" />
+ *       <FileTree.File name="legal.md" />
+ *       <FileTree.File name="index.mdx" />
+ *     </FileTree.Folder>
+ *   </FileTree.Folder>
+ * </FileTree>
+ *
+ * @usage
+ * Create the file tree structure by nesting `<FileTree.Folder>` and
+ * `<FileTree.File>` components within a `<FileTree>`. Name each file or folder
+ * with the `name` attribute. Use `defaultOpen` to set the folder to open on load.
+ *
+ * ```mdx filename="MDX"
+ * import { FileTree } from 'nextra/components'
+ *
+ * <FileTree>
+ *   <FileTree.Folder name="content" defaultOpen>
+ *     <FileTree.File name="_meta.js" />
+ *     <FileTree.File name="contact.md" />
+ *     <FileTree.File name="index.mdx" />
+ *     <FileTree.Folder name="about">
+ *       <FileTree.File name="_meta.js" />
+ *       <FileTree.File name="legal.md" />
+ *       <FileTree.File name="index.mdx" />
+ *     </FileTree.Folder>
+ *   </FileTree.Folder>
+ * </FileTree>
+ * ```
+ */
+declare const FileTree: ((props: ComponentProps<typeof Tree>) => react_jsx_runtime_js.JSX.Element) & {
+    Folder: react.FC<FileProps & {
+        open?: boolean;
+        defaultOpen?: boolean;
+        children: react.ReactNode;
+    }>;
+    File: react.FC<FileProps>;
+};
+
+export { FileTree };

package/dist/client/components/file-tree/index.js

@@ -0,0 +1,12 @@
+"use no memo";
+import { jsx } from "react/jsx-runtime";
+import { File } from "./file.js";
+import { Folder } from "./folder.js";
+import { Tree } from "./tree.js";
+const FileTree = Object.assign((props) => /* @__PURE__ */ jsx(Tree, { ...props }), {
+  Folder,
+  File
+});
+export {
+  FileTree
+};

package/dist/client/components/file-tree/tree.d.ts

@@ -0,0 +1,5 @@
+import { FC, HTMLAttributes } from 'react';
+
+declare const Tree: FC<HTMLAttributes<HTMLUListElement>>;
+
+export { Tree };

package/dist/client/components/file-tree/tree.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
+import cn from "clsx";
+const Tree = (t0) => {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("nextra-filetree x:mt-[1.25em] x:select-none x:text-sm x:text-gray-800 x:dark:text-gray-300", "not-prose", "x:rounded-lg x:border x:px-4 x:py-3 x:inline-flex x:flex-col x:gap-2", "nextra-border", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /* @__PURE__ */ jsx("ul", { className: t1, ...props });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+};
+export {
+  Tree
+};

package/dist/client/components/head.d.ts

@@ -0,0 +1,139 @@
+import * as react from 'react';
+import { FC } from 'react';
+import { z } from 'zod';
+import { HeadProps } from '../../types.generated.js';
+import 'rehype-pretty-code';
+import '@mdx-js/mdx';
+import 'rehype-katex';
+import 'better-react-mathjax';
+
+declare const HeadPropsSchema: z.ZodObject<{
+    color: z.ZodDefault<z.ZodObject<{
+        hue: z.ZodDefault<z.ZodUnion<readonly [z.ZodNumber, z.ZodObject<{
+            dark: z.ZodNumber;
+            light: z.ZodNumber;
+        }, z.core.$strict>]>>;
+        saturation: z.ZodDefault<z.ZodUnion<readonly [z.ZodNumber, z.ZodObject<{
+            dark: z.ZodNumber;
+            light: z.ZodNumber;
+        }, z.core.$strict>]>>;
+        lightness: z.ZodDefault<z.ZodUnion<readonly [z.ZodNumber, z.ZodObject<{
+            dark: z.ZodNumber;
+            light: z.ZodNumber;
+        }, z.core.$strict>]>>;
+    }, z.core.$strict>>;
+    faviconGlyph: z.ZodOptional<z.ZodString>;
+    backgroundColor: z.ZodDefault<z.ZodObject<{
+        dark: z.ZodPipe<z.ZodDefault<z.ZodString>, z.ZodTransform<string, string>>;
+        light: z.ZodPipe<z.ZodDefault<z.ZodString>, z.ZodTransform<string, string>>;
+    }, z.core.$strict>>;
+    children: z.ZodOptional<z.ZodCustom<react.ReactNode, react.ReactNode>>;
+}, z.core.$strict>;
+/**
+ * Configure the `<head>` tags, primary color, background color and favicon glyph
+ * of the website.
+ *
+ * @usage
+ * ### Static head tags
+ *
+ * If you have static head tags, they should be put as `children` in `Head`. For
+ * example:
+ *
+ * ```jsx filename="app/layout.jsx" {8}
+ * import { Layout } from 'my-nextra-theme'
+ * import { Head } from 'nextra/components'
+ *
+ * export default function MyLayout({ children, ...props }) {
+ *   return (
+ *     <html lang="en">
+ *       <Head>
+ *         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ *       </Head>
+ *       <body>
+ *         <Layout>{children}</Layout>
+ *       </body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ *
+ * ### Dynamic tags based on page
+ *
+ * You can dynamically generate the head tags based on the current page's front
+ * matter. For example:
+ *
+ * #### via Markdown front matter
+ *
+ * ```mdx filename="my-page/page.mdx"
+ * ---
+ * title: My title
+ * description: My description
+ * ---
+ * ```
+ *
+ * #### via exporting `metadata` object
+ *
+ * ```mdx filename="my-page/page.mdx"
+ * export const metadata = {
+ *   title: 'My title',
+ *   description: 'My description'
+ * }
+ * ```
+ *
+ * #### in [dynamic routes with catch-all segment](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)
+ *
+ * ```jsx filename="app/[[...mdxPath]]/page.jsx"
+ * import { importPage } from 'nextra/pages'
+ *
+ * export async function generateMetadata(props) {
+ *   const { mdxPath } = await props.params
+ *   const { metadata } = await importPage(mdxPath)
+ *   return {
+ *     title: metadata.title || 'Nextra',
+ *     description: metadata.description || 'The next site builder'
+ *   }
+ * }
+ * ```
+ *
+ * ### Theme color
+ *
+ * You can adjust the theme color of the website by setting primary Hue, Saturation
+ * and Lightness (HSL) values for light and dark themes. Try it out for this
+ * website:
+ *
+ * | Hue (H)                                            | Saturation (S)                                            | Lightness (L)                                             | Background Color   |
+ * | -------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | ------------------ |
+ * | <Slider max={360} cssVar="--nextra-primary-hue" /> | <Slider max={100} cssVar="--nextra-primary-saturation" /> | <Slider max={100} cssVar="--nextra-primary-lightness"  /> | <BackgroundColor/> |
+ *
+ * > [!TIP]
+ * >
+ * > You can adjust the lightness independently for dark or light mode to increase
+ * > legibility. E.g. to have a neutral primary color you can set the primary color
+ * > to be white `HSL(0, 0%, 100%)` on dark theme and gray `HSL(0, 0%, 50%)` for
+ * > light theme.
+ * >
+ * > ```jsx filename="app/layout.jsx"
+ * > <Head
+ * >   color={{
+ * >     hue: 0,
+ * >     saturation: 0,
+ * >     lightness: {
+ * >       light: 50,
+ * >       dark: 100
+ * >     }
+ * >   }}
+ * > />
+ * > ```
+ *
+ * ### Favicon glyph
+ *
+ * This isn't supported by all browsers, but it's a nice way to customize the
+ * favicon of the website simply by using an emoji or character.
+ *
+ * ```jsx filename="app/layout.jsx"
+ * <Head faviconGlyph="✦" />
+ * ```
+ */
+declare const Head: FC<HeadProps>;
+
+export { Head, HeadPropsSchema };

package/dist/client/components/head.js

@@ -0,0 +1,202 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
+import { z } from "zod";
+import { reactNode } from "../../server/schemas.js";
+const darkLightSchema = z.union([z.number(), z.strictObject({
+  dark: z.number(),
+  light: z.number()
+})]);
+function convertColor(v) {
+  return typeof v === "number" ? {
+    dark: v,
+    light: v
+  } : v;
+}
+function hexToRgb(hex) {
+  hex = hex.slice(1);
+  if (hex.length === 3) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  const bigint = Number.parseInt(hex, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return `${r},${g},${b}`;
+}
+const RGB_RE = /^rgb\((?<rgb>.*?)\)$/;
+const HEX_RE = /^#(?<hex>[0-9a-f]{3,6})$/i;
+function normalizeColor(value) {
+  if (value.startsWith("#")) {
+    return hexToRgb(value);
+  }
+  const rgb = value.match(RGB_RE)?.groups.rgb;
+  if (rgb) {
+    return rgb.replaceAll(" ", "");
+  }
+  return value;
+}
+const stringColorSchema = z.string().refine((str) => {
+  if (HEX_RE.test(str) || RGB_RE.test(str)) {
+    return true;
+  }
+  throw new Error("Color format should be in HEX or RGB format. E.g. #000, #112233 or rgb(255,255,255)");
+});
+const colorSchema = z.strictObject({
+  hue: darkLightSchema.default({
+    dark: 204,
+    light: 212
+  }).overwrite(convertColor).meta({
+    description: "The hue of the primary theme color.<br/>Range: `0 - 360`"
+  }),
+  saturation: darkLightSchema.default(100).overwrite(convertColor).meta({
+    description: "The saturation of the primary theme color.<br/>Range: `0 - 100`"
+  }),
+  lightness: darkLightSchema.default({
+    dark: 55,
+    light: 45
+  }).overwrite(convertColor).meta({
+    description: "The lightness of the primary theme color.<br/>Range: `0 - 100`"
+  })
+});
+const bgColorSchema = z.strictObject({
+  dark: stringColorSchema.default("rgb(17,17,17)").transform(normalizeColor).meta({
+    description: 'Background color for dark theme.<br/>Format: `"rgb(RRR,GGG,BBB)" | "#RRGGBB"`'
+  }),
+  light: stringColorSchema.default("rgb(250,250,250)").transform(normalizeColor).meta({
+    description: 'Background color for light theme.<br/>Format: `"rgb(RRR,GGG,BBB)" | "#RRGGBB"`'
+  })
+});
+const HeadPropsSchema = z.strictObject({
+  color: colorSchema.default(colorSchema.parse({})),
+  faviconGlyph: z.string().optional().meta({
+    description: "The glyph to use as the favicon."
+  }),
+  backgroundColor: bgColorSchema.default(bgColorSchema.parse({})),
+  children: reactNode.optional().meta({
+    description: "Content of `<head>`."
+  })
+});
+const Head = (t0) => {
+  const $ = _c(21);
+  let children;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = props;
+  } else {
+    children = $[1];
+    props = $[2];
+  }
+  let data;
+  if ($[3] !== props) {
+    const {
+      data: t12,
+      error
+    } = HeadPropsSchema.safeParse(props);
+    data = t12;
+    if (error) {
+      throw z.prettifyError(error);
+    }
+    $[3] = props;
+    $[4] = data;
+  } else {
+    data = $[4];
+  }
+  const {
+    color,
+    backgroundColor,
+    faviconGlyph
+  } = data;
+  const t1 = `
+:root {
+  --nextra-primary-hue: ${color.hue.light}deg;
+  --nextra-primary-saturation: ${color.saturation.light}%;
+  --nextra-primary-lightness: ${color.lightness.light}%;
+  --nextra-bg: ${backgroundColor.light};
+  --nextra-content-width: 90rem;
+}
+.dark {
+  --nextra-primary-hue: ${color.hue.dark}deg;
+  --nextra-primary-saturation: ${color.saturation.dark}%;
+  --nextra-primary-lightness: ${color.lightness.dark}%;
+  --nextra-bg: ${backgroundColor.dark};
+}
+::selection {
+  background: hsla(var(--nextra-primary-hue),var(--nextra-primary-saturation),var(--nextra-primary-lightness),.3);
+}
+html {
+  background: rgb(var(--nextra-bg));
+}
+`;
+  let t2;
+  if ($[5] !== t1) {
+    t2 = t1.trim();
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const style = t2;
+  let t3;
+  if ($[7] !== style) {
+    t3 = /* @__PURE__ */ jsx("style", { children: style });
+    $[7] = style;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const t4 = `rgb(${backgroundColor.light})`;
+  let t5;
+  if ($[9] !== t4) {
+    t5 = /* @__PURE__ */ jsx("meta", { name: "theme-color", media: "(prefers-color-scheme: light)", content: t4 });
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const t6 = `rgb(${backgroundColor.dark})`;
+  let t7;
+  if ($[11] !== t6) {
+    t7 = /* @__PURE__ */ jsx("meta", { name: "theme-color", media: "(prefers-color-scheme: dark)", content: t6 });
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== faviconGlyph) {
+    t8 = faviconGlyph && /* @__PURE__ */ jsx("link", { rel: "icon", href: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text x='50' y='.9em' font-size='90' text-anchor='middle'>${faviconGlyph}</text><style>svg{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}@media(prefers-color-scheme:dark){svg{fill:#fff}}</style></svg>` });
+    $[13] = faviconGlyph;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== children || $[16] !== t3 || $[17] !== t5 || $[18] !== t7 || $[19] !== t8) {
+    t9 = /* @__PURE__ */ jsxs("head", { children: [
+      children,
+      t3,
+      t5,
+      t7,
+      t8
+    ] });
+    $[15] = children;
+    $[16] = t3;
+    $[17] = t5;
+    $[18] = t7;
+    $[19] = t8;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  return t9;
+};
+export {
+  Head,
+  HeadPropsSchema
+};

package/dist/client/components/image-zoom.d.ts

@@ -0,0 +1,6 @@
+import { ImageProps } from 'next/image';
+import { FC } from 'react';
+
+declare const ImageZoom: FC<ImageProps>;
+
+export { ImageZoom };

package/dist/client/components/image-zoom.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import Zoom from "react-medium-image-zoom";
+import { Image } from "../mdx-components/image.js";
+function getImageSrc(src) {
+  if (typeof src === "string") {
+    return src;
+  }
+  if ("default" in src) {
+    return src.default.src;
+  }
+  return src.src;
+}
+const ImageZoom = (props) => {
+  const $ = _c(12);
+  const imgRef = useRef(null);
+  const [isInsideAnchor, setIsInsideAnchor] = useState(false);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setIsInsideAnchor(imgRef.current.closest("a") !== null);
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[2] !== props) {
+    t2 = /* @__PURE__ */ jsx(Image, { ...props, ref: imgRef });
+    $[2] = props;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const img = t2;
+  if (isInsideAnchor) {
+    return img;
+  }
+  let t3;
+  if ($[4] !== props.src) {
+    t3 = getImageSrc(props.src);
+    $[4] = props.src;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== props.alt || $[7] !== t3) {
+    t4 = {
+      src: t3,
+      alt: props.alt
+    };
+    $[6] = props.alt;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== img || $[10] !== t4) {
+    t5 = /* @__PURE__ */ jsx(Zoom, { zoomMargin: 40, zoomImg: t4, wrapElement: "span", children: img });
+    $[9] = img;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
+};
+export {
+  ImageZoom
+};

package/dist/client/components/index.d.ts

@@ -0,0 +1,56 @@
+export { Mermaid } from '@theguild/remark-mermaid/mermaid';
+export { MathJax, MathJaxContext } from 'better-react-mathjax';
+export { Banner } from './banner/index.js';
+export { FileTree } from './file-tree/index.js';
+export { SkipNavContent } from './skip-nav/index.js';
+export { Popup } from './popup/index.js';
+export { Tabs } from './tabs/index.js';
+export { Bleed } from './bleed.js';
+export { Button } from './button.js';
+export { Callout } from './callout.js';
+export { Cards } from './cards.js';
+export { Collapse } from './collapse.js';
+export { Head } from './head.js';
+export { ImageZoom } from './image-zoom.js';
+export { Playground } from './playground.js';
+export { Search } from './search.js';
+export { Select } from './select.js';
+export { Steps } from './steps.js';
+export { withIcons } from '../hocs/with-icons.js';
+export { withGitHubAlert } from '../hocs/with-github-alert.js';
+export { Pre } from '../mdx-components/pre/index.js';
+export { Anchor } from '../mdx-components/anchor.js';
+export { Code } from '../mdx-components/code.js';
+export { Details } from '../mdx-components/details.js';
+export { Image } from '../mdx-components/image.js';
+export { Summary } from '../mdx-components/summary.js';
+export { Table } from '../mdx-components/table.js';
+export { SkipNavLink } from './skip-nav/index.client.js';
+import 'react';
+import './file-tree/file.js';
+import 'react/jsx-runtime.js';
+import './file-tree/tree.js';
+import '@headlessui/react';
+import './popup/index.client.js';
+import './tabs/index.client.js';
+import 'zod';
+import '../../types.generated.js';
+import 'rehype-pretty-code';
+import '@mdx-js/mdx';
+import 'rehype-katex';
+import 'next/image';
+import '../mdx-remote.js';
+import '../evaluate.js';
+import '../../types.js';
+import 'mdast';
+import 'next';
+import '../../server/schemas.js';
+import './lib/index.js';
+import 'rehype-katex/lib/index.js';
+import '../mdx-components.js';
+import 'url';
+import 'next/link.js';
+import 'next/image.js';
+import '@headlessui/react/dist/internal/floating';
+import 'next/link';
+import 'next/dist/shared/lib/get-img-props';