@hackersheet/next-document-content-components 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/esm/components/index.mjs

@@ -1,16 +1,22 @@
 import CodeBlock from "./code-block/code-block";
+import DirectoryTree from "./code-block/directory-tree";
+import Gist from "./gist/gist";
+import Heading from "./heading/heading";
 import Image from "./image/image";
-import KifuTo from "./kifu-to/kifu-to";
 import Link from "./link/link";
 import LinkCard from "./link-card/link-card";
+import Mermaid from "./mermaid/mermaid";
 import XPost from "./x-post/x-post";
 import Youtube from "./youtube/youtube";
 export {
   CodeBlock,
+  DirectoryTree,
+  Gist,
+  Heading,
   Image,
-  KifuTo,
   Link,
   LinkCard,
+  Mermaid,
   XPost,
   Youtube
 };

package/dist/esm/components/link-card/link-card.mjs

@@ -10,7 +10,7 @@ function LinkCard({
   imageWidth
 }) {
   const faviconUrl = `https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://${domain}&size=16`;
-  return /* @__PURE__ */ React.createElement("a", { href: url, className: "link-card" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-main" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-title" }, title), /* @__PURE__ */ React.createElement("div", { className: "link-card-description" }, description), /* @__PURE__ */ React.createElement("div", { className: "link-card-domain" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement("img", { src: faviconUrl, alt: `${domain} favicon`, width: 16, height: 16 })), /* @__PURE__ */ React.createElement("div", null, domain))), imageUrl && /* @__PURE__ */ React.createElement("div", { className: "link-card-image" }, /* @__PURE__ */ React.createElement(Image, { alt: title, src: imageUrl, height: imageHeight, width: imageWidth })));
+  return /* @__PURE__ */ React.createElement("a", { href: url, className: "link-card" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-main" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-title-container" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-title" }, title)), /* @__PURE__ */ React.createElement("div", { className: "link-card-description" }, description), /* @__PURE__ */ React.createElement("div", { className: "link-card-domain" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement("img", { src: faviconUrl, alt: `${domain} favicon`, width: 16, height: 16 })), /* @__PURE__ */ React.createElement("div", null, domain))), imageUrl && /* @__PURE__ */ React.createElement("div", { className: "link-card-image" }, /* @__PURE__ */ React.createElement(Image, { alt: title, src: imageUrl, height: imageHeight, width: imageWidth })));
 }
 export {
   LinkCard as default

package/dist/esm/components/mermaid/mermaid.d.mts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MermaidComponentProps } from '@hackersheet/react-document-content';
+
+declare function Mermaid({ code }: MermaidComponentProps): React.JSX.Element;
+
+export { Mermaid as default };

package/dist/esm/components/{code-block/code-block-mermaid.mjs → mermaid/mermaid.mjs}

@@ -8,7 +8,7 @@ function createId(code) {
   hash.update(code);
   return "id-" + hash.digest("hex");
 }
-function CodeBlockMermaid({ code }) {
+function Mermaid({ code }) {
   const ref = useRef(null);
   const [mounted, setMounted] = useState(false);
   const [svg, setSvg] = useState("");
@@ -32,10 +32,11 @@ function CodeBlockMermaid({ code }) {
     };
     renderMermaid();
   }, [mounted, code, id, theme, systemTheme, setSvg, setMounted]);
-  if (!mounted)
-    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, "Loading..."));
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: svg }, ref }));
+  if (!mounted) {
+    return /* @__PURE__ */ React.createElement("div", { className: "mermaid-block mermaid-loading" }, /* @__PURE__ */ React.createElement("div", null, "Loading..."));
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "mermaid-block", dangerouslySetInnerHTML: { __html: svg }, ref });
 }
 export {
-  CodeBlockMermaid as default
+  Mermaid as default
 };

package/dist/esm/components/youtube/youtube.mjs

@@ -2,7 +2,7 @@ import { YouTubeEmbed } from "@next/third-parties/google";
 import React from "react";
 async function Youtube({ videoId, params, playLabel, ...props }) {
   const paramsString = params ? Object.entries(params).filter(([, value]) => value !== void 0).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&") : void 0;
-  return /* @__PURE__ */ React.createElement(YouTubeEmbed, { ...props, videoid: videoId, params: paramsString, playlabel: playLabel });
+  return /* @__PURE__ */ React.createElement("div", { className: "youtube-block" }, /* @__PURE__ */ React.createElement(YouTubeEmbed, { ...props, videoid: videoId, params: paramsString, playlabel: playLabel }));
 }
 export {
   Youtube as default

package/dist/esm/index.d.mts

@@ -1,8 +1,11 @@
 export { default as CodeBlock } from './components/code-block/code-block.mjs';
+export { default as DirectoryTree } from './components/code-block/directory-tree.mjs';
+export { default as Gist } from './components/gist/gist.mjs';
+export { default as Heading } from './components/heading/heading.mjs';
 export { default as Image } from './components/image/image.mjs';
-export { default as KifuTo } from './components/kifu-to/kifu-to.mjs';
 export { default as Link } from './components/link/link.mjs';
 export { default as LinkCard } from './components/link-card/link-card.mjs';
+export { default as Mermaid } from './components/mermaid/mermaid.mjs';
 export { default as XPost } from './components/x-post/x-post.mjs';
 export { default as Youtube } from './components/youtube/youtube.mjs';
 import 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackersheet/next-document-content-components",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.11",
   "description": "Hacker Sheet document content components for Next.js",
   "keywords": [],
   "repository": {
@@ -10,19 +10,11 @@
   },
   "license": "MIT",
   "author": "",
-  "sideEffects": [
-    "*.css"
-  ],
   "exports": {
     ".": {
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.mjs",
       "types": "./dist/esm/index.d.ts"
-    },
-    "./style": {
-      "import": "./dist/style.module.css",
-      "require": "./dist/style.module.css",
-      "types": "./dist/style.module.scss.d.ts"
     }
   },
   "main": "./dist/cjs/index.js",
@@ -32,26 +24,22 @@
     "dist"
   ],
   "dependencies": {
-    "@hackersheet/core": "alpha",
-    "@hackersheet/react-document-content": "alpha",
     "@next/third-parties": "^14.2.5",
     "@shikijs/transformers": "^1.10.3",
-    "kifu-for-js": "^5.4.1",
     "mermaid": "^10.9.1",
     "next-themes": "^0.3.0",
     "react-icons": "^5.2.1",
     "react-tweet": "^3.2.1",
-    "shiki": "^1.10.3"
+    "shiki": "^1.10.3",
+    "@hackersheet/core": "0.1.0-alpha.9",
+    "@hackersheet/react-document-content": "0.1.0-alpha.11"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "next": "14.2.5",
-    "postcss": "8.4.39",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "sass": "1.77.8",
-    "typed-scss-modules": "8.0.1",
     "@hackersheet/eslint-config-custom": "0.0.0"
   },
   "peerDependencies": {
@@ -60,14 +48,12 @@
     "react-dom": "^18.0.0"
   },
   "scripts": {
-    "build": "rm -rf ./dist && pnpm tsup && pnpm typegen:scss && pnpm build:css",
-    "build:css": "cp src/styles/*.ts dist && pnpm sass src/styles/style.module.scss dist/style.module.css --no-source-map",
+    "build": "rm -rf ./dist && pnpm tsup",
     "check": "pnpm tsc && pnpm lint",
     "format": "pnpm -w format && pnpm lint:fix",
     "lint": "eslint \"**/*.{ts,tsx}\"",
     "lint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
     "pub": "pnpm publish --access=public --tag alpha",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "typegen:scss": "typed-scss-modules src/styles/style.module.scss"
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

package/dist/cjs/components/code-block/code-block-kifu.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface KifuProps {
-    kifu: string;
-    filename?: string;
-}
-declare function CodeBlockKifu({ kifu, filename }: KifuProps): React.JSX.Element | null;
-
-export { type KifuProps, CodeBlockKifu as default };

package/dist/cjs/components/code-block/code-block-kifu.js

@@ -1,66 +0,0 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var code_block_kifu_exports = {};
-__export(code_block_kifu_exports, {
-  default: () => CodeBlockKifu
-});
-module.exports = __toCommonJS(code_block_kifu_exports);
-var import_kifu_for_js = require("kifu-for-js");
-var import_navigation = require("next/navigation");
-var import_react = __toESM(require("react"));
-function CodeBlockKifu({ kifu, filename }) {
-  const searchParams = (0, import_navigation.useSearchParams)();
-  const id = filename ? `user-content-${filename}` : void 0;
-  const [kifuStore] = (0, import_react.useState)(() => new import_kifu_for_js.KifuStore({ kifu }));
-  (0, import_react.useEffect)(() => {
-    initKifuUserSettings();
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const newPly = Number(searchParams.get("ply") ?? 0);
-    const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
-    if (hash === id) {
-      kifuStore.player.goto(newPly);
-    }
-  }, [searchParams, kifuStore, id]);
-  if (!kifuStore) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "my-4 flex justify-center", id }, /* @__PURE__ */ import_react.default.createElement(import_kifu_for_js.KifuLite, { style: { width: "100%" }, kifuStore }));
-}
-function initKifuUserSettings() {
-  const LOCALSTORAGE_KEY = "kifuforjs";
-  const defaultSettings = {
-    hapticFeedback: false
-  };
-  const settings = localStorage.getItem(LOCALSTORAGE_KEY);
-  if (!settings) {
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(defaultSettings));
-  }
-}

package/dist/cjs/components/code-block/code-block-mermaid.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-interface CodeBlockMermaidProps {
-    code: string;
-}
-declare function CodeBlockMermaid({ code }: CodeBlockMermaidProps): React.JSX.Element;
-
-export { type CodeBlockMermaidProps, CodeBlockMermaid as default };

package/dist/cjs/components/kifu-to/kifu-to.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { KifuToComponentProps } from '@hackersheet/react-document-content';
-
-declare function KifuTo({ id, ply, label: defaultLabel }: KifuToComponentProps): React.JSX.Element;
-
-export { KifuTo as default };

package/dist/esm/components/code-block/code-block-kifu.d.mts

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface KifuProps {
-    kifu: string;
-    filename?: string;
-}
-declare function CodeBlockKifu({ kifu, filename }: KifuProps): React.JSX.Element | null;
-
-export { type KifuProps, CodeBlockKifu as default };

package/dist/esm/components/code-block/code-block-kifu.mjs

@@ -1,36 +0,0 @@
-"use client";
-import { KifuLite, KifuStore } from "kifu-for-js";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
-function CodeBlockKifu({ kifu, filename }) {
-  const searchParams = useSearchParams();
-  const id = filename ? `user-content-${filename}` : void 0;
-  const [kifuStore] = useState(() => new KifuStore({ kifu }));
-  useEffect(() => {
-    initKifuUserSettings();
-  }, []);
-  useEffect(() => {
-    const newPly = Number(searchParams.get("ply") ?? 0);
-    const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
-    if (hash === id) {
-      kifuStore.player.goto(newPly);
-    }
-  }, [searchParams, kifuStore, id]);
-  if (!kifuStore) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: "my-4 flex justify-center", id }, /* @__PURE__ */ React.createElement(KifuLite, { style: { width: "100%" }, kifuStore }));
-}
-function initKifuUserSettings() {
-  const LOCALSTORAGE_KEY = "kifuforjs";
-  const defaultSettings = {
-    hapticFeedback: false
-  };
-  const settings = localStorage.getItem(LOCALSTORAGE_KEY);
-  if (!settings) {
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(defaultSettings));
-  }
-}
-export {
-  CodeBlockKifu as default
-};

package/dist/esm/components/code-block/code-block-mermaid.d.mts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-interface CodeBlockMermaidProps {
-    code: string;
-}
-declare function CodeBlockMermaid({ code }: CodeBlockMermaidProps): React.JSX.Element;
-
-export { type CodeBlockMermaidProps, CodeBlockMermaid as default };

package/dist/esm/components/kifu-to/kifu-to.d.mts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { KifuToComponentProps } from '@hackersheet/react-document-content';
-
-declare function KifuTo({ id, ply, label: defaultLabel }: KifuToComponentProps): React.JSX.Element;
-
-export { KifuTo as default };

package/dist/esm/components/kifu-to/kifu-to.mjs

@@ -1,11 +0,0 @@
-import Link from "next/link";
-import React from "react";
-function KifuTo({ id, ply, label: defaultLabel }) {
-  const fullId = `user-content-${id}`;
-  const href = `?ply=${ply}#${fullId}`;
-  const label = defaultLabel ?? `${ply}\u624B\u76EE`;
-  return /* @__PURE__ */ React.createElement(Link, { href }, label);
-}
-export {
-  KifuTo as default
-};

package/dist/style.module.css

@@ -1,279 +0,0 @@
-.main :first-child {
-  margin-top: 0;
-}
-.main * {
-  word-break: break-word;
-  scroll-margin-top: var(--hsdc-scroll-margin-top);
-}
-.main h1,
-.main h2,
-.main h3,
-.main h4,
-.main h5,
-.main h6 {
-  margin: 4rem 0 1.5rem 0;
-  padding: 0.5rem 0;
-  font-weight: 700;
-  border-bottom: 1px solid hsl(var(--hsdc-border));
-}
-.main p {
-  margin: 1.8rem 0;
-}
-.main strong {
-  font-weight: 700;
-}
-.main hr {
-  margin: 4rem 0;
-}
-.main h1 {
-  font-size: 2rem;
-}
-.main h2 {
-  font-size: 1.5rem;
-}
-.main h3 {
-  font-size: 1.2rem;
-}
-.main h4 {
-  font-size: 1rem;
-}
-.main h5 {
-  font-size: 0.8rem;
-}
-.main h6 {
-  font-size: 0.7rem;
-}
-.main p {
-  line-height: 2.2;
-  letter-spacing: 0.04em;
-}
-.main ol,
-.main ul {
-  padding-left: 1.5em;
-}
-.main ol ol,
-.main ol ul,
-.main ul ol,
-.main ul ul {
-  padding-left: 1em;
-}
-.main ol li,
-.main ul li {
-  line-height: 2rem;
-  padding-left: 0.5rem;
-}
-.main ul {
-  list-style-type: disc;
-}
-.main ul ul {
-  list-style-type: circle;
-}
-.main ul ul ul {
-  list-style-type: square;
-}
-.main ol {
-  list-style-type: decimal;
-}
-.main ol ul {
-  list-style-type: circle;
-}
-.main ol ul ul {
-  list-style-type: square;
-}
-.main table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-  border-radius: 8px;
-  border-spacing: 0;
-  border: 1px solid hsl(var(--hsdc-border));
-  overflow: hidden;
-}
-.main table thead {
-  background-color: hsl(var(--hsdc-muted));
-}
-.main table tbody td {
-  border-top: 1px solid hsl(var(--hsdc-border));
-}
-.main table tbody tr:hover {
-  background-color: hsl(var(--hsdc-muted)/0.5);
-}
-.main table th,
-.main table td {
-  padding: 8px;
-  font-size: 0.875rem;
-  text-align: left;
-}
-.main table th :global(&.left),
-.main table td :global(&.left) {
-  text-align: left;
-}
-.main table th :global(&.center),
-.main table td :global(&.center) {
-  text-align: center;
-}
-.main table th :global(&.right),
-.main table td :global(&.right) {
-  text-align: right;
-}
-.main code:not(pre code) {
-  border-radius: 4px;
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 2px 8px;
-  font-family: var(--hsdc-font-code);
-  line-height: 1.5;
-  border: 1px solid hsl(var(--hsdc-border));
-  background-color: hsl(var(--hsdc-muted));
-}
-.main blockquote {
-  border-left: 12px solid hsl(var(--hsdc-border));
-  color: hsl(var(--hsdc-muted-foreground));
-  margin: 0;
-  padding: 0 16px;
-}
-.main blockquote blockquote {
-  margin: 0 12px;
-}
-.main a:not(article a) {
-  color: hsl(var(--hsdc-link));
-}
-.main a:not(article a):hover {
-  text-decoration-line: underline;
-}
-.main summary {
-  cursor: pointer;
-}
-.main :global(.footnotes) {
-  margin: 4rem 0 1.5rem 0;
-  color: hsl(var(--hsdc-muted-foreground));
-}
-.main :global(.footnotes) p {
-  margin: 0;
-}
-.main :global(.contains-task-list) {
-  list-style-type: none;
-  padding-left: 0;
-}
-.main :global(.contains-task-list) input {
-  margin-right: 0.5rem;
-}
-
-.main :global(.react-tweet-theme) p {
-  margin: 0;
-  line-height: 1.5;
-  font-size: 17px;
-}
-.main :global(.code-block) {
-  margin: 1.5rem 0;
-  border: 1px solid hsl(var(--hsdc-border));
-  border-radius: 8px;
-  overflow: hidden;
-}
-.main :global(.code-block) pre {
-  font-family: var(--hsdc-font-code);
-  font-size: 14px;
-  padding: 16px;
-  overflow: auto;
-  background-color: hsl(var(--hsdc-code-block));
-}
-.main :global(.code-block) :global(.code-block-header) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  padding: 8px 16px;
-  background-color: hsl(var(--hsdc-muted));
-  border-bottom: 1px solid hsl(var(--hsdc-border));
-}
-.main :global(.code-block) :global(.code-block-filename) {
-  flex: 1 1 auto;
-}
-.main :global(.shiki) code {
-  width: 100%;
-  min-width: max-content;
-  display: flex;
-  flex-direction: column;
-  margin: 0 -16px;
-}
-.main :global(.shiki) :global(span.line) {
-  position: relative;
-  width: 100%;
-  padding: 0 16px;
-}
-.main :global(.shiki) :global(span.line.diff.add) {
-  background-color: hsl(var(--hsdc-shiki-diff-add)/0.1) !important;
-}
-.main :global(.shiki) :global(span.line.diff.add)::before {
-  position: absolute;
-  left: 2px;
-  content: "+";
-  color: hsl(var(--hsdc-shiki-diff-add));
-}
-.main :global(.shiki) :global(span.line.diff.remove) {
-  background-color: hsl(var(--hsdc-shiki-diff-remove)/0.1) !important;
-}
-.main :global(.shiki) :global(span.line.diff.remove)::before {
-  position: absolute;
-  left: 2px;
-  content: "-";
-  color: hsl(var(--hsdc-shiki-diff-remove));
-}
-.main :global(.shiki) :global(.highlighted-word) {
-  background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.2);
-  padding: 2px 0;
-  margin: -2px 0;
-}
-.main :global(.link-card) {
-  display: flex;
-  flex-direction: row;
-  border: 1px solid hsl(var(--hsdc-border));
-  border-radius: 8px;
-  overflow: hidden;
-  color: inherit;
-  width: 100%;
-  max-height: 144px;
-  margin: 1.8rem 0;
-}
-.main :global(.link-card):hover {
-  text-decoration: none;
-  background-color: hsl(var(--hsdc-muted)/0.5);
-}
-.main :global(.link-card) :global(.link-card-main) {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 12px 16px;
-  overflow: hidden;
-  gap: 8px;
-}
-.main :global(.link-card) :global(.link-card-main) > div {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-clamp: 2;
-}
-.main :global(.link-card) :global(.link-card-main) :global(.link-card-title) {
-  flex: 1 1 auto;
-}
-.main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
-  font-size: 0.75rem;
-  color: hsl(var(--hsdc-muted-foreground));
-}
-.main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.75rem;
-  color: hsl(var(--hsdc-muted-foreground));
-}
-.main :global(.link-card) :global(.link-card-image) {
-  width: 35%;
-}
-.main :global(.link-card) :global(.link-card-image) img {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}

package/dist/style.module.scss.d.ts

@@ -1,9 +0,0 @@
-export type Styles = {
-  main: string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;