@intlayer/design-system 2.0.13 → 3.0.1

package/dist/components/IDE/CodeRender.cjs

@@ -0,0 +1,627 @@
+"use client";
+"use strict";
+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 __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
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const CopyToClipboard = require("react-copy-to-clipboard");
+const utils_cn = require("../../utils/cn.cjs");
+const components_Loader_index = require("../Loader/index.cjs");
+const okaidia = {
+  'code[class*="language-"]': {
+    "color": "#f8f8f2",
+    "background": "none",
+    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
+    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    "fontSize": "1em",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "wordWrap": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "4",
+    "OTabSize": "4",
+    "tabSize": "4",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none"
+  },
+  'pre[class*="language-"]': {
+    "color": "#f8f8f2",
+    "background": "#272822",
+    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
+    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    "fontSize": "1em",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "wordWrap": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "4",
+    "OTabSize": "4",
+    "tabSize": "4",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none",
+    "padding": "1em",
+    "margin": ".5em 0",
+    "overflow": "auto",
+    "borderRadius": "0.3em"
+  },
+  ':not(pre) > code[class*="language-"]': {
+    "background": "#272822",
+    "padding": ".1em",
+    "borderRadius": ".3em",
+    "whiteSpace": "normal"
+  },
+  "comment": {
+    "color": "#8292a2"
+  },
+  "prolog": {
+    "color": "#8292a2"
+  },
+  "doctype": {
+    "color": "#8292a2"
+  },
+  "cdata": {
+    "color": "#8292a2"
+  },
+  "punctuation": {
+    "color": "#f8f8f2"
+  },
+  "namespace": {
+    "Opacity": ".7"
+  },
+  "property": {
+    "color": "#f92672"
+  },
+  "tag": {
+    "color": "#f92672"
+  },
+  "constant": {
+    "color": "#f92672"
+  },
+  "symbol": {
+    "color": "#f92672"
+  },
+  "deleted": {
+    "color": "#f92672"
+  },
+  "boolean": {
+    "color": "#ae81ff"
+  },
+  "number": {
+    "color": "#ae81ff"
+  },
+  "selector": {
+    "color": "#a6e22e"
+  },
+  "attr-name": {
+    "color": "#a6e22e"
+  },
+  "string": {
+    "color": "#a6e22e"
+  },
+  "char": {
+    "color": "#a6e22e"
+  },
+  "builtin": {
+    "color": "#a6e22e"
+  },
+  "inserted": {
+    "color": "#a6e22e"
+  },
+  "operator": {
+    "color": "#f8f8f2"
+  },
+  "entity": {
+    "color": "#f8f8f2",
+    "cursor": "help"
+  },
+  "url": {
+    "color": "#f8f8f2"
+  },
+  ".language-css .token.string": {
+    "color": "#f8f8f2"
+  },
+  ".style .token.string": {
+    "color": "#f8f8f2"
+  },
+  "variable": {
+    "color": "#f8f8f2"
+  },
+  "atrule": {
+    "color": "#e6db74"
+  },
+  "attr-value": {
+    "color": "#e6db74"
+  },
+  "function": {
+    "color": "#e6db74"
+  },
+  "class-name": {
+    "color": "#e6db74"
+  },
+  "keyword": {
+    "color": "#66d9ef"
+  },
+  "regex": {
+    "color": "#fd971f"
+  },
+  "important": {
+    "color": "#fd971f",
+    "fontWeight": "bold"
+  },
+  "bold": {
+    "fontWeight": "bold"
+  },
+  "italic": {
+    "fontStyle": "italic"
+  }
+};
+const coldarkCold = {
+  'code[class*="language-"]': {
+    "color": "#111b27",
+    "background": "none",
+    "fontFamily": 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "wordWrap": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "4",
+    "OTabSize": "4",
+    "tabSize": "4",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none"
+  },
+  'pre[class*="language-"]': {
+    "color": "#111b27",
+    "background": "#e3eaf2",
+    "fontFamily": 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "wordWrap": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "4",
+    "OTabSize": "4",
+    "tabSize": "4",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none",
+    "padding": "1em",
+    "margin": "0.5em 0",
+    "overflow": "auto"
+  },
+  'pre[class*="language-"]::-moz-selection': {
+    "background": "#8da1b9"
+  },
+  'pre[class*="language-"] ::-moz-selection': {
+    "background": "#8da1b9"
+  },
+  'code[class*="language-"]::-moz-selection': {
+    "background": "#8da1b9"
+  },
+  'code[class*="language-"] ::-moz-selection': {
+    "background": "#8da1b9"
+  },
+  'pre[class*="language-"]::selection': {
+    "background": "#8da1b9"
+  },
+  'pre[class*="language-"] ::selection': {
+    "background": "#8da1b9"
+  },
+  'code[class*="language-"]::selection': {
+    "background": "#8da1b9"
+  },
+  'code[class*="language-"] ::selection': {
+    "background": "#8da1b9"
+  },
+  ':not(pre) > code[class*="language-"]': {
+    "background": "#e3eaf2",
+    "padding": "0.1em 0.3em",
+    "borderRadius": "0.3em",
+    "whiteSpace": "normal"
+  },
+  "comment": {
+    "color": "#3c526d"
+  },
+  "prolog": {
+    "color": "#3c526d"
+  },
+  "doctype": {
+    "color": "#3c526d"
+  },
+  "cdata": {
+    "color": "#3c526d"
+  },
+  "punctuation": {
+    "color": "#111b27"
+  },
+  "delimiter.important": {
+    "color": "#006d6d",
+    "fontWeight": "inherit"
+  },
+  "selector.parent": {
+    "color": "#006d6d"
+  },
+  "tag": {
+    "color": "#006d6d"
+  },
+  "tag.punctuation": {
+    "color": "#006d6d"
+  },
+  "attr-name": {
+    "color": "#755f00"
+  },
+  "boolean": {
+    "color": "#755f00"
+  },
+  "boolean.important": {
+    "color": "#755f00"
+  },
+  "number": {
+    "color": "#755f00"
+  },
+  "constant": {
+    "color": "#755f00"
+  },
+  "selector.attribute": {
+    "color": "#755f00"
+  },
+  "class-name": {
+    "color": "#005a8e"
+  },
+  "key": {
+    "color": "#005a8e"
+  },
+  "parameter": {
+    "color": "#005a8e"
+  },
+  "property": {
+    "color": "#005a8e"
+  },
+  "property-access": {
+    "color": "#005a8e"
+  },
+  "variable": {
+    "color": "#005a8e"
+  },
+  "attr-value": {
+    "color": "#116b00"
+  },
+  "inserted": {
+    "color": "#116b00"
+  },
+  "color": {
+    "color": "#116b00"
+  },
+  "selector.value": {
+    "color": "#116b00"
+  },
+  "string": {
+    "color": "#116b00"
+  },
+  "string.url-link": {
+    "color": "#116b00"
+  },
+  "builtin": {
+    "color": "#af00af"
+  },
+  "keyword-array": {
+    "color": "#af00af"
+  },
+  "package": {
+    "color": "#af00af"
+  },
+  "regex": {
+    "color": "#af00af"
+  },
+  "function": {
+    "color": "#7c00aa"
+  },
+  "selector.class": {
+    "color": "#7c00aa"
+  },
+  "selector.id": {
+    "color": "#7c00aa"
+  },
+  "atrule.rule": {
+    "color": "#a04900"
+  },
+  "combinator": {
+    "color": "#a04900"
+  },
+  "keyword": {
+    "color": "#a04900"
+  },
+  "operator": {
+    "color": "#a04900"
+  },
+  "pseudo-class": {
+    "color": "#a04900"
+  },
+  "pseudo-element": {
+    "color": "#a04900"
+  },
+  "selector": {
+    "color": "#a04900"
+  },
+  "unit": {
+    "color": "#a04900"
+  },
+  "deleted": {
+    "color": "#c22f2e"
+  },
+  "important": {
+    "color": "#c22f2e",
+    "fontWeight": "bold"
+  },
+  "keyword-this": {
+    "color": "#005a8e",
+    "fontWeight": "bold"
+  },
+  "this": {
+    "color": "#005a8e",
+    "fontWeight": "bold"
+  },
+  "bold": {
+    "fontWeight": "bold"
+  },
+  "italic": {
+    "fontStyle": "italic"
+  },
+  "entity": {
+    "cursor": "help"
+  },
+  ".language-markdown .token.title": {
+    "color": "#005a8e",
+    "fontWeight": "bold"
+  },
+  ".language-markdown .token.title .token.punctuation": {
+    "color": "#005a8e",
+    "fontWeight": "bold"
+  },
+  ".language-markdown .token.blockquote.punctuation": {
+    "color": "#af00af"
+  },
+  ".language-markdown .token.code": {
+    "color": "#006d6d"
+  },
+  ".language-markdown .token.hr.punctuation": {
+    "color": "#005a8e"
+  },
+  ".language-markdown .token.url > .token.content": {
+    "color": "#116b00"
+  },
+  ".language-markdown .token.url-link": {
+    "color": "#755f00"
+  },
+  ".language-markdown .token.list.punctuation": {
+    "color": "#af00af"
+  },
+  ".language-markdown .token.table-header": {
+    "color": "#111b27"
+  },
+  ".language-json .token.operator": {
+    "color": "#111b27"
+  },
+  ".language-scss .token.variable": {
+    "color": "#006d6d"
+  },
+  "token.tab:not(:empty):before": {
+    "color": "#3c526d"
+  },
+  "token.cr:before": {
+    "color": "#3c526d"
+  },
+  "token.lf:before": {
+    "color": "#3c526d"
+  },
+  "token.space:before": {
+    "color": "#3c526d"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
+    "color": "#e3eaf2",
+    "background": "#005a8e"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
+    "color": "#e3eaf2",
+    "background": "#005a8e"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
+    "color": "#e3eaf2",
+    "background": "#005a8eda",
+    "textDecoration": "none"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
+    "color": "#e3eaf2",
+    "background": "#005a8eda",
+    "textDecoration": "none"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
+    "color": "#e3eaf2",
+    "background": "#005a8eda",
+    "textDecoration": "none"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
+    "color": "#e3eaf2",
+    "background": "#005a8eda",
+    "textDecoration": "none"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
+    "color": "#e3eaf2",
+    "background": "#3c526d"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
+    "color": "#e3eaf2",
+    "background": "#3c526d"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
+    "color": "#e3eaf2",
+    "background": "#3c526d"
+  },
+  ".line-highlight.line-highlight": {
+    "background": "linear-gradient(to right, #8da1b92f 70%, #8da1b925)"
+  },
+  ".line-highlight.line-highlight:before": {
+    "backgroundColor": "#3c526d",
+    "color": "#e3eaf2",
+    "boxShadow": "0 1px #8da1b9"
+  },
+  ".line-highlight.line-highlight[data-end]:after": {
+    "backgroundColor": "#3c526d",
+    "color": "#e3eaf2",
+    "boxShadow": "0 1px #8da1b9"
+  },
+  "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
+    "backgroundColor": "#3c526d1f"
+  },
+  ".line-numbers.line-numbers .line-numbers-rows": {
+    "borderRight": "1px solid #8da1b97a",
+    "background": "#d0dae77a"
+  },
+  ".line-numbers .line-numbers-rows > span:before": {
+    "color": "#3c526dda"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-1": {
+    "color": "#755f00"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-5": {
+    "color": "#755f00"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-9": {
+    "color": "#755f00"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-2": {
+    "color": "#af00af"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-6": {
+    "color": "#af00af"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-10": {
+    "color": "#af00af"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-3": {
+    "color": "#005a8e"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-7": {
+    "color": "#005a8e"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-11": {
+    "color": "#005a8e"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-4": {
+    "color": "#7c00aa"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-8": {
+    "color": "#7c00aa"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-12": {
+    "color": "#7c00aa"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
+    "backgroundColor": "#c22f2e1f"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
+    "backgroundColor": "#c22f2e1f"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
+    "backgroundColor": "#116b001f"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
+    "backgroundColor": "#116b001f"
+  },
+  ".command-line .command-line-prompt": {
+    "borderRight": "1px solid #8da1b97a"
+  },
+  ".command-line .command-line-prompt > span:before": {
+    "color": "#3c526dda"
+  }
+};
+const SyntaxHighlighter = require$$0.lazy(
+  () => import("react-syntax-highlighter").then((module2) => ({
+    default: module2.Prism
+  }))
+);
+const Code = ({
+  children,
+  language,
+  isDarkMode,
+  showLineNumbers = true,
+  ...props
+}) => {
+  const [copied, setCopied] = require$$0.useState(false);
+  require$$0.useEffect(() => {
+    const timer = setTimeout(() => {
+      setCopied(false);
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "relative h-full w-full text-sm",
+        showLineNumbers && "ml-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyToClipboard, { text: children, onCopy: () => setCopied(true), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("button", { className: "absolute right-3 top-3", "aria-label": "Copy code", children: copied ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.CopyCheckIcon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.CopyIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "grid size-full grid-cols-[0px] overflow-auto p-3", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(require$$0.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Loader_index.Loader, {}), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          SyntaxHighlighter,
+          {
+            customStyle: {
+              display: void 0,
+              overflowX: "auto",
+              overflowY: "auto",
+              padding: void 0,
+              color: void 0,
+              background: "inherit",
+              margin: void 0
+            },
+            PreTag: (props2) => props2.children,
+            language: language ?? "javascript",
+            style: isDarkMode ? okaidia : coldarkCold,
+            showLineNumbers,
+            ...props,
+            children: String(children).replace(/\n$/, "")
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+exports.Code = Code;
+//# sourceMappingURL=CodeRender.cjs.map