@intlayer/design-system 5.7.8 → 5.8.1-canary.0

package/dist/components/ExpandCollapse/expandCollapse.content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandCollapse.content.cjs","sources":["../../../src/components/ExpandCollapse/expandCollapse.content.ts"],"sourcesContent":["import { cond, t, type Dictionary } from 'intlayer';\n\nconst expandCollapseContent = {\n  key: 'expand-collapse',\n  content: {\n    expandCollapseContent: cond({\n      true: t({\n        en: 'Show all',\n        fr: 'Afficher tout',\n        es: 'Mostrar todo',\n        'en-GB': 'Show all',\n        de: 'Mehr anzeigen',\n        ja: 'すべて表示',\n        ko: '모두 보기',\n        zh: '显示全部',\n        it: 'Mostra tutto',\n        pt: 'Mostrar tudo',\n        hi: 'सभी दिखाएँ',\n        ar: 'عرض الكل',\n        ru: 'Показать все',\n      }),\n      false: t({\n        en: 'Show less',\n        fr: 'Afficher moins',\n        es: 'Mostrar menos',\n        'en-GB': 'Show less',\n        de: 'Weniger anzeigen',\n        ja: '表示を減らす',\n        ko: '간략히 보기',\n        zh: '显示较少',\n        it: 'Mostra meno',\n        pt: 'Mostrar menos',\n        hi: 'कम दिखाएँ',\n        ar: 'عرض أقل',\n        ru: 'Показать меньше',\n      }),\n    }),\n  },\n} satisfies Dictionary;\n\nexport default expandCollapseContent;\n"],"names":["cond","t"],"mappings":";;AAEA,MAAM,wBAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,SAAS;AAAA,IACP,uBAAuBA,SAAAA,KAAK;AAAA,MAC1B,MAAMC,SAAAA,EAAE;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,CACL;AAAA,MACD,OAAOA,SAAAA,EAAE;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,CACL;AAAA,IAAA,CACF;AAAA,EAAA;AAEL;;"}

package/dist/components/ExpandCollapse/expandCollapse.content.d.ts

@@ -0,0 +1,40 @@
+declare const expandCollapseContent: {
+    key: string;
+    content: {
+        expandCollapseContent: import('@intlayer/core').TypedNodeModel<import("@intlayer/core").NodeType.Condition, import('@intlayer/core').ConditionContentStates<import('@intlayer/core').TypedNodeModel<import("@intlayer/core").NodeType.Translation, {
+            en: string;
+            fr: string;
+            es: string;
+            'en-GB': string;
+            de: string;
+            ja: string;
+            ko: string;
+            zh: string;
+            it: string;
+            pt: string;
+            hi: string;
+            ar: string;
+            ru: string;
+        }, {
+            nodeType: import("@intlayer/core").NodeType.Translation | "translation";
+        } & {
+            translation: {
+                en: string;
+                fr: string;
+                es: string;
+                'en-GB': string;
+                de: string;
+                ja: string;
+                ko: string;
+                zh: string;
+                it: string;
+                pt: string;
+                hi: string;
+                ar: string;
+                ru: string;
+            };
+        }>>, {}>;
+    };
+};
+export default expandCollapseContent;
+//# sourceMappingURL=expandCollapse.content.d.ts.map

package/dist/components/ExpandCollapse/expandCollapse.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandCollapse.content.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/expandCollapse.content.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCL,CAAC;AAEvB,eAAe,qBAAqB,CAAC"}

package/dist/components/ExpandCollapse/expandCollapse.content.mjs

@@ -0,0 +1,42 @@
+import { cond, t } from "intlayer";
+const expandCollapseContent = {
+  key: "expand-collapse",
+  content: {
+    expandCollapseContent: cond({
+      true: t({
+        en: "Show all",
+        fr: "Afficher tout",
+        es: "Mostrar todo",
+        "en-GB": "Show all",
+        de: "Mehr anzeigen",
+        ja: "すべて表示",
+        ko: "모두 보기",
+        zh: "显示全部",
+        it: "Mostra tutto",
+        pt: "Mostrar tudo",
+        hi: "सभी दिखाएँ",
+        ar: "عرض الكل",
+        ru: "Показать все"
+      }),
+      false: t({
+        en: "Show less",
+        fr: "Afficher moins",
+        es: "Mostrar menos",
+        "en-GB": "Show less",
+        de: "Weniger anzeigen",
+        ja: "表示を減らす",
+        ko: "간략히 보기",
+        zh: "显示较少",
+        it: "Mostra meno",
+        pt: "Mostrar menos",
+        hi: "कम दिखाएँ",
+        ar: "عرض أقل",
+        ru: "Показать меньше"
+      })
+    })
+  }
+};
+export {
+  expandCollapseContent as default
+};
+//# sourceMappingURL=expandCollapse.content.mjs.map

package/dist/components/ExpandCollapse/expandCollapse.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandCollapse.content.mjs","sources":["../../../src/components/ExpandCollapse/expandCollapse.content.ts"],"sourcesContent":["import { cond, t, type Dictionary } from 'intlayer';\n\nconst expandCollapseContent = {\n  key: 'expand-collapse',\n  content: {\n    expandCollapseContent: cond({\n      true: t({\n        en: 'Show all',\n        fr: 'Afficher tout',\n        es: 'Mostrar todo',\n        'en-GB': 'Show all',\n        de: 'Mehr anzeigen',\n        ja: 'すべて表示',\n        ko: '모두 보기',\n        zh: '显示全部',\n        it: 'Mostra tutto',\n        pt: 'Mostrar tudo',\n        hi: 'सभी दिखाएँ',\n        ar: 'عرض الكل',\n        ru: 'Показать все',\n      }),\n      false: t({\n        en: 'Show less',\n        fr: 'Afficher moins',\n        es: 'Mostrar menos',\n        'en-GB': 'Show less',\n        de: 'Weniger anzeigen',\n        ja: '表示を減らす',\n        ko: '간략히 보기',\n        zh: '显示较少',\n        it: 'Mostra meno',\n        pt: 'Mostrar menos',\n        hi: 'कम दिखाएँ',\n        ar: 'عرض أقل',\n        ru: 'Показать меньше',\n      }),\n    }),\n  },\n} satisfies Dictionary;\n\nexport default expandCollapseContent;\n"],"names":[],"mappings":";AAEA,MAAM,wBAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,SAAS;AAAA,IACP,uBAAuB,KAAK;AAAA,MAC1B,MAAM,EAAE;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,CACL;AAAA,MACD,OAAO,EAAE;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,CACL;AAAA,IAAA,CACF;AAAA,EAAA;AAEL;"}

package/dist/components/ExpandCollapse/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_ExpandCollapse_ExpandCollapse = require("./ExpandCollapse.cjs");
+exports.ExpandCollapse = components_ExpandCollapse_ExpandCollapse.ExpandCollapse;
+//# sourceMappingURL=index.cjs.map

package/dist/components/ExpandCollapse/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,2 @@
+export * from './ExpandCollapse';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ExpandCollapse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/ExpandCollapse/index.mjs

@@ -0,0 +1,5 @@
+import { ExpandCollapse } from "./ExpandCollapse.mjs";
+export {
+  ExpandCollapse
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/ExpandCollapse/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Form/FormBase.cjs

@@ -2,7 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const zod = require("../../zod-K7y5gPX4.cjs");
+const zod = require("../../zod-BvUVjPTw.cjs");
 const reactHookForm = require("react-hook-form");
 const utils_cn = require("../../utils/cn.cjs");
 const awaitFunction = async (fn) => {

package/dist/components/Form/FormBase.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { a } from "../../zod-D4WapgbL.js";
+import { a } from "../../zod-CJrbzxwg.js";
 import { useForm as useForm$1, FormProvider } from "react-hook-form";
 import { cn } from "../../utils/cn.mjs";
 const awaitFunction = async (fn) => {

package/dist/components/Form/elements/FormElementWrapper.cjs

@@ -2,9 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const zod = require("../../../zod-K7y5gPX4.cjs");
+const zod = require("../../../zod-BvUVjPTw.cjs");
 const reactHookForm = require("react-hook-form");
-const schemas = require("../../../schemas-Q6C7ZNs3.cjs");
+const schemas = require("../../../schemas-lh5OFOvX.cjs");
 const Schema = schemas.object({
   test: schemas.string().min(3, "test error")
 });

package/dist/components/Form/elements/FormElementWrapper.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { a } from "../../../zod-D4WapgbL.js";
+import { a } from "../../../zod-CJrbzxwg.js";
 import { useForm, FormProvider } from "react-hook-form";
-import { o as object, s as string } from "../../../schemas-BIuxHDyZ.js";
+import { o as object, s as string } from "../../../schemas-DEXdAbCK.js";
 const Schema = object({
   test: string().min(3, "test error")
 });

package/dist/components/IDE/Code.cjs

@@ -3,12 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Container_index = require("../Container/index.cjs");
+const components_ExpandCollapse_ExpandCollapse = require("../ExpandCollapse/ExpandCollapse.cjs");
 const components_IDE_CodeBlockClient = require("./CodeBlockClient.cjs");
 const components_IDE_CodeConditionalRenderer = require("./CodeConditionalRenderer.cjs");
 const components_IDE_CodeFormatSelector = require("./CodeFormatSelector.cjs");
 const components_IDE_ContentDeclarationFormatSelector = require("./ContentDeclarationFormatSelector.cjs");
 const components_IDE_CopyCode = require("./CopyCode.cjs");
 const components_IDE_PackageManagerSelector = require("./PackageManagerSelector.cjs");
+const MIN_HEIGHT = 700;
 const Code = ({
   children,
   language,
@@ -20,6 +22,7 @@ const Code = ({
   packageManager,
   codeFormat,
   contentDeclarationFormat,
+  isRollable = true,
   ...props
 }) => {
   const code = children.endsWith("\n") ? children.slice(0, -1) : children;
@@ -61,7 +64,15 @@ const Code = ({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid size-full grid-cols-[0px] overflow-auto p-3", children: /* @__PURE__ */ jsxRuntime.jsx(components_IDE_CodeBlockClient.CodeBlock, { lang: language, isDarkMode, children: code }) })
+            /* @__PURE__ */ jsxRuntime.jsx(components_ExpandCollapse_ExpandCollapse.ExpandCollapse, { minHeight: MIN_HEIGHT, isRollable, children: /* @__PURE__ */ jsxRuntime.jsx(
+              components_IDE_CodeBlockClient.CodeBlock,
+              {
+                lang: language,
+                isDarkMode,
+                className: "p-2 scroll-w-auto",
+                children: code
+              }
+            ) })
           ]
         }
       )

package/dist/components/IDE/Code.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Code.cjs","sources":["../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  ...props\n}) => {\n  const code = children.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"bg-card/50 text-neutral grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-48\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <div className=\"grid size-full grid-cols-[0px] overflow-auto p-3\">\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </div>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"names":["jsx","CodeConditionalRender","jsxs","Container","cn","Fragment","PackageManagerSelector","CodeFormatSelector","ContentDeclarationFormatSelector","CopyCode","CodeBlock"],"mappings":";;;;;;;;;;;AAiCO,MAAM,OAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAE/D,QAAM,oBACJ,kBAAkB,cAAc;AAElC,SACEA,2BAAAA;AAAAA,IAACC,uCAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAAA;AAAAA,QAACC,2BAAAA;AAAAA,QAAA;AAAA,UACC,WAAWC,SAAAA;AAAAA,YACT;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,UAAA;AAAA,UAEF,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cACCF,2BAAAA,KAAAG,qBAAA,EACE,UAAA;AAAA,cAAAH,2BAAAA,KAAC,OAAA,EAAI,WAAU,gIACb,UAAA;AAAA,gBAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjDE,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,kBAAA,iDAAmBI,sCAAAA,wBAAA,EAAuB;AAAA,kBAC1C,6CAAeC,kCAAAA,oBAAA,EAAmB;AAAA,kBAClC,2DACEC,gDAAAA,kCAAA,CAAA,CAAiC;AAAA,gBAAA,EAAA,CAEtC;AAAA,cAAA,GACF;AAAA,cACAR,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBACb,UAAAA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWI,SAAAA;AAAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBAAA;AAAA,kBAGvB,UAAAJ,2BAAAA,IAACS,oCAAS,KAAA,CAAY;AAAA,gBAAA;AAAA,cAAA,EACxB,CACF;AAAA,YAAA,GACF;AAAA,YAEFT,2BAAAA,IAAC,OAAA,EAAI,WAAU,oDACb,UAAAA,2BAAAA,IAACU,+BAAAA,aAAU,MAAM,UAAU,YACxB,UAAA,KAAA,CACH,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"Code.cjs","sources":["../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"bg-card/50 text-neutral grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-48\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse minHeight={MIN_HEIGHT} isRollable={isRollable}>\n          <CodeBlock\n            lang={language}\n            isDarkMode={isDarkMode}\n            className=\"p-2 scroll-w-auto\"\n          >\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"names":["jsx","CodeConditionalRender","jsxs","Container","cn","Fragment","PackageManagerSelector","CodeFormatSelector","ContentDeclarationFormatSelector","CopyCode","ExpandCollapse","CodeBlock"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEZ,MAAM,OAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,QAAM,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAE/D,QAAM,oBACJ,kBAAkB,cAAc;AAElC,SACEA,2BAAAA;AAAAA,IAACC,uCAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAAA;AAAAA,QAACC,2BAAAA;AAAAA,QAAA;AAAA,UACC,WAAWC,SAAAA;AAAAA,YACT;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,UAAA;AAAA,UAEF,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cACCF,2BAAAA,KAAAG,qBAAA,EACE,UAAA;AAAA,cAAAH,2BAAAA,KAAC,OAAA,EAAI,WAAU,gIACb,UAAA;AAAA,gBAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjDE,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,kBAAA,iDAAmBI,sCAAAA,wBAAA,EAAuB;AAAA,kBAC1C,6CAAeC,kCAAAA,oBAAA,EAAmB;AAAA,kBAClC,2DACEC,gDAAAA,kCAAA,CAAA,CAAiC;AAAA,gBAAA,EAAA,CAEtC;AAAA,cAAA,GACF;AAAA,cACAR,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBACb,UAAAA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWI,SAAAA;AAAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBAAA;AAAA,kBAGvB,UAAAJ,2BAAAA,IAACS,oCAAS,KAAA,CAAY;AAAA,gBAAA;AAAA,cAAA,EACxB,CACF;AAAA,YAAA,GACF;AAAA,YAEFT,2BAAAA,IAACU,yCAAAA,gBAAA,EAAe,WAAW,YAAY,YACrC,UAAAV,2BAAAA;AAAAA,cAACW,+BAAAA;AAAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,WAAU;AAAA,gBAET,UAAA;AAAA,cAAA;AAAA,YAAA,EACH,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;;"}

package/dist/components/IDE/Code.d.ts

@@ -14,6 +14,7 @@ type CodeCompProps = {
     isDarkMode?: boolean;
     showHeader?: boolean;
     showLineNumbers?: boolean;
+    isRollable?: boolean;
 } & CodeCompAttributes & HTMLAttributes<HTMLDivElement>;
 export declare const Code: FC<CodeCompProps>;
 export {};

package/dist/components/IDE/Code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/Code.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,KAAK,EACV,UAAU,EACV,wBAAwB,EACxB,cAAc,EACf,MAAM,eAAe,CAAC;AAMvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;CACrD,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,kBAAkB,GACpB,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,aAAa,CAiElC,CAAC"}
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/Code.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAM7C,OAAO,KAAK,EACV,UAAU,EACV,wBAAwB,EACxB,cAAc,EACf,MAAM,eAAe,CAAC;AAMvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;CACrD,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,kBAAkB,GACpB,cAAc,CAAC,cAAc,CAAC,CAAC;AAIjC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,aAAa,CAsElC,CAAC"}

package/dist/components/IDE/Code.mjs

@@ -1,12 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.mjs";
 import { Container } from "../Container/index.mjs";
+import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
 import { CodeBlock } from "./CodeBlockClient.mjs";
 import { CodeConditionalRender } from "./CodeConditionalRenderer.mjs";
 import { CodeFormatSelector } from "./CodeFormatSelector.mjs";
 import { ContentDeclarationFormatSelector } from "./ContentDeclarationFormatSelector.mjs";
 import { CopyCode } from "./CopyCode.mjs";
 import { PackageManagerSelector } from "./PackageManagerSelector.mjs";
+const MIN_HEIGHT = 700;
 const Code = ({
   children,
   language,
@@ -18,6 +20,7 @@ const Code = ({
   packageManager,
   codeFormat,
   contentDeclarationFormat,
+  isRollable = true,
   ...props
 }) => {
   const code = children.endsWith("\n") ? children.slice(0, -1) : children;
@@ -59,7 +62,15 @@ const Code = ({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid size-full grid-cols-[0px] overflow-auto p-3", children: /* @__PURE__ */ jsx(CodeBlock, { lang: language, isDarkMode, children: code }) })
+            /* @__PURE__ */ jsx(ExpandCollapse, { minHeight: MIN_HEIGHT, isRollable, children: /* @__PURE__ */ jsx(
+              CodeBlock,
+              {
+                lang: language,
+                isDarkMode,
+                className: "p-2 scroll-w-auto",
+                children: code
+              }
+            ) })
           ]
         }
       )

package/dist/components/IDE/Code.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","sources":["../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  ...props\n}) => {\n  const code = children.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"bg-card/50 text-neutral grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-48\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <div className=\"grid size-full grid-cols-[0px] overflow-auto p-3\">\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </div>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAiCO,MAAM,OAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAE/D,QAAM,oBACJ,kBAAkB,cAAc;AAElC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,UAAA;AAAA,UAEF,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cACC,qBAAA,UAAA,EACE,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,gIACb,UAAA;AAAA,gBAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjD,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,kBAAA,sCAAmB,wBAAA,EAAuB;AAAA,kBAC1C,kCAAe,oBAAA,EAAmB;AAAA,kBAClC,gDACE,kCAAA,CAAA,CAAiC;AAAA,gBAAA,EAAA,CAEtC;AAAA,cAAA,GACF;AAAA,cACA,oBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBAAA;AAAA,kBAGvB,UAAA,oBAAC,YAAS,KAAA,CAAY;AAAA,gBAAA;AAAA,cAAA,EACxB,CACF;AAAA,YAAA,GACF;AAAA,YAEF,oBAAC,OAAA,EAAI,WAAU,oDACb,UAAA,oBAAC,aAAU,MAAM,UAAU,YACxB,UAAA,KAAA,CACH,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Code.mjs","sources":["../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"bg-card/50 text-neutral grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-48\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse minHeight={MIN_HEIGHT} isRollable={isRollable}>\n          <CodeBlock\n            lang={language}\n            isDarkMode={isDarkMode}\n            className=\"p-2 scroll-w-auto\"\n          >\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,aAAa;AAEZ,MAAM,OAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,QAAM,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAE/D,QAAM,oBACJ,kBAAkB,cAAc;AAElC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,UAAA;AAAA,UAEF,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cACC,qBAAA,UAAA,EACE,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,gIACb,UAAA;AAAA,gBAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjD,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,kBAAA,sCAAmB,wBAAA,EAAuB;AAAA,kBAC1C,kCAAe,oBAAA,EAAmB;AAAA,kBAClC,gDACE,kCAAA,CAAA,CAAiC;AAAA,gBAAA,EAAA,CAEtC;AAAA,cAAA,GACF;AAAA,cACA,oBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBAAA;AAAA,kBAGvB,UAAA,oBAAC,YAAS,KAAA,CAAY;AAAA,gBAAA;AAAA,cAAA,EACxB,CACF;AAAA,YAAA,GACF;AAAA,YAEF,oBAAC,gBAAA,EAAe,WAAW,YAAY,YACrC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,WAAU;AAAA,gBAET,UAAA;AAAA,cAAA;AAAA,YAAA,EACH,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/IDE/CodeBlockClient.cjs

@@ -7,7 +7,7 @@ const ReactExports = require("react");
 const shiki = require("shiki");
 const utils_cn = require("../../utils/cn.cjs");
 const CodeDefault = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: children.split("\n").map((line, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line block w-full", children: line }, index)) }) }) });
-const CodeBlockShiki = ({
+const CodeBlockShiki = (({
   children,
   lang,
   isDarkMode,
@@ -42,7 +42,7 @@ const CodeBlockShiki = ({
       style: { backgroundColor: "transparent" }
     }
   );
-};
+});
 const CodeBlock = ({
   className,
   onChange,

package/dist/components/IDE/CodeBlockClient.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockClient.cjs","sources":["../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport {\n  type HTMLAttributes,\n  type FC,\n  useState,\n  useEffect,\n  useMemo,\n} from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nconst CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport const CodeBlockShiki = (({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const [out, setOut] = useState<string | null>(null);\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> =\n    useMemo(\n      () => ({\n        lang,\n        theme: isDarkMode ? 'github-dark' : 'github-light',\n        transformers: [\n          transformerNotationDiff(),\n          transformerNotationHighlight(),\n          transformerNotationWordHighlight(),\n          transformerNotationErrorLevel(),\n          transformerMetaHighlight(),\n          transformerMetaWordHighlight(),\n        ],\n      }),\n      [lang, isDarkMode]\n    );\n\n  useEffect(() => {\n    codeToHtml(children, shikiOptions)\n      .then((out) => setOut(out))\n      .catch((e) => console.error(e));\n  }, [shikiOptions, children]);\n\n  if (!out) return <CodeDefault>{children}</CodeDefault>;\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <CodeBlockShiki\n    className={cn('flex w-full', className)}\n    contentEditable={isEditable}\n    onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n    {...props}\n  />\n);\n"],"names":["jsx","useState","useMemo","transformerNotationDiff","transformerNotationHighlight","transformerNotationWordHighlight","transformerNotationErrorLevel","transformerMetaHighlight","transformerMetaWordHighlight","useEffect","codeToHtml","out","cn"],"mappings":";;;;;;;;AAyBA,MAAM,cAAwC,CAAC,EAAE,SAAA,MAC/CA,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAAA,IAAC,QAAA,EAAK,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAGK,MAAM,iBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,CAAC,KAAK,MAAM,IAAIC,aAAAA,SAAwB,IAAI;AAClD,QAAM,eACJC,aAAAA;AAAAA,IACE,OAAO;AAAA,MACL;AAAA,MACA,OAAO,aAAa,gBAAgB;AAAA,MACpC,cAAc;AAAA,QACZC,qCAAA;AAAA,QACAC,0CAAA;AAAA,QACAC,8CAAA;AAAA,QACAC,2CAAA;AAAA,QACAC,sCAAA;AAAA,QACAC,aAAAA,6BAAA;AAAA,MAA6B;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EAAA;AAGrBC,eAAAA,UAAU,MAAM;AACdC,UAAAA,WAAW,UAAU,YAAY,EAC9B,KAAK,CAACC,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAClC,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAK,QAAOX,2BAAAA,IAAC,eAAa,SAAA,CAAS;AAExC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAUO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWY,SAAAA,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN;;;"}
+{"version":3,"file":"CodeBlockClient.cjs","sources":["../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport {\n  type HTMLAttributes,\n  type FC,\n  useState,\n  useEffect,\n  useMemo,\n} from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nconst CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport const CodeBlockShiki = (({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const [out, setOut] = useState<string | null>(null);\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> =\n    useMemo(\n      () => ({\n        lang,\n        theme: isDarkMode ? 'github-dark' : 'github-light',\n        transformers: [\n          transformerNotationDiff(),\n          transformerNotationHighlight(),\n          transformerNotationWordHighlight(),\n          transformerNotationErrorLevel(),\n          transformerMetaHighlight(),\n          transformerMetaWordHighlight(),\n        ],\n      }),\n      [lang, isDarkMode]\n    );\n\n  useEffect(() => {\n    codeToHtml(children, shikiOptions)\n      .then((out) => setOut(out))\n      .catch((e) => console.error(e));\n  }, [shikiOptions, children]);\n\n  if (!out) return <CodeDefault>{children}</CodeDefault>;\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <CodeBlockShiki\n    className={cn('flex w-full', className)}\n    contentEditable={isEditable}\n    onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n    {...props}\n  />\n);\n"],"names":["jsx","useState","useMemo","transformerNotationDiff","transformerNotationHighlight","transformerNotationWordHighlight","transformerNotationErrorLevel","transformerMetaHighlight","transformerMetaWordHighlight","useEffect","codeToHtml","out","cn"],"mappings":";;;;;;;;AAyBA,MAAM,cAAwC,CAAC,EAAE,SAAA,MAC/CA,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAAA,IAAC,QAAA,EAAK,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAGK,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,CAAC,KAAK,MAAM,IAAIC,aAAAA,SAAwB,IAAI;AAClD,QAAM,eACJC,aAAAA;AAAAA,IACE,OAAO;AAAA,MACL;AAAA,MACA,OAAO,aAAa,gBAAgB;AAAA,MACpC,cAAc;AAAA,QACZC,qCAAA;AAAA,QACAC,0CAAA;AAAA,QACAC,8CAAA;AAAA,QACAC,2CAAA;AAAA,QACAC,sCAAA;AAAA,QACAC,aAAAA,6BAAA;AAAA,MAA6B;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EAAA;AAGrBC,eAAAA,UAAU,MAAM;AACdC,UAAAA,WAAW,UAAU,YAAY,EAC9B,KAAK,CAACC,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAClC,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAK,QAAOX,2BAAAA,IAAC,eAAa,SAAA,CAAS;AAExC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAUO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWY,SAAAA,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN;;;"}

package/dist/components/IDE/CodeBlockClient.mjs

@@ -5,7 +5,7 @@ import { useState, useMemo, useEffect } from "react";
 import { codeToHtml } from "shiki";
 import { cn } from "../../utils/cn.mjs";
 const CodeDefault = ({ children }) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: children.split("\n").map((line, index) => /* @__PURE__ */ jsx("span", { className: "line block w-full", children: line }, index)) }) }) });
-const CodeBlockShiki = ({
+const CodeBlockShiki = (({
   children,
   lang,
   isDarkMode,
@@ -40,7 +40,7 @@ const CodeBlockShiki = ({
       style: { backgroundColor: "transparent" }
     }
   );
-};
+});
 const CodeBlock = ({
   className,
   onChange,

package/dist/components/IDE/CodeBlockClient.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockClient.mjs","sources":["../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport {\n  type HTMLAttributes,\n  type FC,\n  useState,\n  useEffect,\n  useMemo,\n} from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nconst CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport const CodeBlockShiki = (({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const [out, setOut] = useState<string | null>(null);\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> =\n    useMemo(\n      () => ({\n        lang,\n        theme: isDarkMode ? 'github-dark' : 'github-light',\n        transformers: [\n          transformerNotationDiff(),\n          transformerNotationHighlight(),\n          transformerNotationWordHighlight(),\n          transformerNotationErrorLevel(),\n          transformerMetaHighlight(),\n          transformerMetaWordHighlight(),\n        ],\n      }),\n      [lang, isDarkMode]\n    );\n\n  useEffect(() => {\n    codeToHtml(children, shikiOptions)\n      .then((out) => setOut(out))\n      .catch((e) => console.error(e));\n  }, [shikiOptions, children]);\n\n  if (!out) return <CodeDefault>{children}</CodeDefault>;\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <CodeBlockShiki\n    className={cn('flex w-full', className)}\n    contentEditable={isEditable}\n    onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n    {...props}\n  />\n);\n"],"names":["out"],"mappings":";;;;;;AAyBA,MAAM,cAAwC,CAAC,EAAE,SAAA,MAC/C,oBAAC,OAAA,EACC,UAAA,oBAAC,OAAA,EACC,UAAA,oBAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAA,EAAK,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAGK,MAAM,iBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAwB,IAAI;AAClD,QAAM,eACJ;AAAA,IACE,OAAO;AAAA,MACL;AAAA,MACA,OAAO,aAAa,gBAAgB;AAAA,MACpC,cAAc;AAAA,QACZ,wBAAA;AAAA,QACA,6BAAA;AAAA,QACA,iCAAA;AAAA,QACA,8BAAA;AAAA,QACA,yBAAA;AAAA,QACA,6BAAA;AAAA,MAA6B;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EAAA;AAGrB,YAAU,MAAM;AACd,eAAW,UAAU,YAAY,EAC9B,KAAK,CAACA,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAClC,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAK,QAAO,oBAAC,eAAa,SAAA,CAAS;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAUO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN;"}
+{"version":3,"file":"CodeBlockClient.mjs","sources":["../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport {\n  type HTMLAttributes,\n  type FC,\n  useState,\n  useEffect,\n  useMemo,\n} from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nconst CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport const CodeBlockShiki = (({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const [out, setOut] = useState<string | null>(null);\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> =\n    useMemo(\n      () => ({\n        lang,\n        theme: isDarkMode ? 'github-dark' : 'github-light',\n        transformers: [\n          transformerNotationDiff(),\n          transformerNotationHighlight(),\n          transformerNotationWordHighlight(),\n          transformerNotationErrorLevel(),\n          transformerMetaHighlight(),\n          transformerMetaWordHighlight(),\n        ],\n      }),\n      [lang, isDarkMode]\n    );\n\n  useEffect(() => {\n    codeToHtml(children, shikiOptions)\n      .then((out) => setOut(out))\n      .catch((e) => console.error(e));\n  }, [shikiOptions, children]);\n\n  if (!out) return <CodeDefault>{children}</CodeDefault>;\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <CodeBlockShiki\n    className={cn('flex w-full', className)}\n    contentEditable={isEditable}\n    onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n    {...props}\n  />\n);\n"],"names":["out"],"mappings":";;;;;;AAyBA,MAAM,cAAwC,CAAC,EAAE,SAAA,MAC/C,oBAAC,OAAA,EACC,UAAA,oBAAC,OAAA,EACC,UAAA,oBAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAA,EAAK,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAGK,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAwB,IAAI;AAClD,QAAM,eACJ;AAAA,IACE,OAAO;AAAA,MACL;AAAA,MACA,OAAO,aAAa,gBAAgB;AAAA,MACpC,cAAc;AAAA,QACZ,wBAAA;AAAA,QACA,6BAAA;AAAA,QACA,iCAAA;AAAA,QACA,8BAAA;AAAA,QACA,yBAAA;AAAA,QACA,6BAAA;AAAA,MAA6B;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EAAA;AAGrB,YAAU,MAAM;AACd,eAAW,UAAU,YAAY,EAC9B,KAAK,CAACA,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAClC,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAK,QAAO,oBAAC,eAAa,SAAA,CAAS;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAUO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN;"}

package/dist/components/IDE/CodeBlockServer.cjs

@@ -5,7 +5,7 @@ const transformers = require("@shikijs/transformers");
 const ReactExports = require("react");
 const shiki = require("shiki");
 const utils_cn = require("../../utils/cn.cjs");
-const CodeBlockShiki = async ({
+const CodeBlockShiki = (async ({
   children,
   lang,
   isDarkMode,
@@ -33,7 +33,7 @@ const CodeBlockShiki = async ({
       style: { backgroundColor: "transparent" }
     }
   );
-};
+});
 const CodeDefault = ({
   children,
   isEditable,

package/dist/components/IDE/CodeBlockServer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockServer.cjs","sources":["../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport { type HTMLAttributes, Suspense, type FC } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"names":["transformerNotationDiff","transformerNotationHighlight","transformerNotationWordHighlight","transformerNotationErrorLevel","transformerMetaHighlight","transformerMetaWordHighlight","codeToHtml","jsx","Suspense","cn"],"mappings":";;;;;;;AAiBO,MAAM,iBAAkB,OAAO;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,eAAiE;AAAA,IACrE;AAAA,IACA,OAAO,aAAa,gBAAgB;AAAA,IACpC,cAAc;AAAA,MACZA,qCAAA;AAAA,MACAC,0CAAA;AAAA,MACAC,8CAAA;AAAA,MACAC,2CAAA;AAAA,MACAC,sCAAA;AAAA,MACAC,aAAAA,6BAAA;AAAA,IAA6B;AAAA,EAC/B;AAGF,QAAM,MAAM,MAAMC,iBAAW,UAAU,YAAY;AAEnD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA,IAAC,OAAA,EAAI,iBAAiB,YAAa,GAAG,OACpC,UAAAA,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAAA,IAAC,QAAA,EAAK,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,qCACGC,aAAAA,UAAA,EAAS,yCAAW,aAAA,EAAa,GAAG,OAAO,GAC1C,UAAAD,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWE,SAAAA,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN,EAAA,CACF;;;"}
+{"version":3,"file":"CodeBlockServer.cjs","sources":["../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport { type HTMLAttributes, Suspense, type FC } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"names":["transformerNotationDiff","transformerNotationHighlight","transformerNotationWordHighlight","transformerNotationErrorLevel","transformerMetaHighlight","transformerMetaWordHighlight","codeToHtml","jsx","Suspense","cn"],"mappings":";;;;;;;AAiBO,MAAM,kBAAkB,OAAO;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,eAAiE;AAAA,IACrE;AAAA,IACA,OAAO,aAAa,gBAAgB;AAAA,IACpC,cAAc;AAAA,MACZA,qCAAA;AAAA,MACAC,0CAAA;AAAA,MACAC,8CAAA;AAAA,MACAC,2CAAA;AAAA,MACAC,sCAAA;AAAA,MACAC,aAAAA,6BAAA;AAAA,IAA6B;AAAA,EAC/B;AAGF,QAAM,MAAM,MAAMC,iBAAW,UAAU,YAAY;AAEnD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA,IAAC,OAAA,EAAI,iBAAiB,YAAa,GAAG,OACpC,UAAAA,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAAA,IAAC,QAAA,EAAK,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,qCACGC,aAAAA,UAAA,EAAS,yCAAW,aAAA,EAAa,GAAG,OAAO,GAC1C,UAAAD,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWE,SAAAA,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN,EAAA,CACF;;;"}

package/dist/components/IDE/CodeBlockServer.mjs

@@ -3,7 +3,7 @@ import { transformerNotationDiff, transformerNotationHighlight, transformerNotat
 import { Suspense } from "react";
 import { codeToHtml } from "shiki";
 import { cn } from "../../utils/cn.mjs";
-const CodeBlockShiki = async ({
+const CodeBlockShiki = (async ({
   children,
   lang,
   isDarkMode,
@@ -31,7 +31,7 @@ const CodeBlockShiki = async ({
       style: { backgroundColor: "transparent" }
     }
   );
-};
+});
 const CodeDefault = ({
   children,
   isEditable,

package/dist/components/IDE/CodeBlockServer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockServer.mjs","sources":["../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport { type HTMLAttributes, Suspense, type FC } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,iBAAkB,OAAO;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,eAAiE;AAAA,IACrE;AAAA,IACA,OAAO,aAAa,gBAAgB;AAAA,IACpC,cAAc;AAAA,MACZ,wBAAA;AAAA,MACA,6BAAA;AAAA,MACA,iCAAA;AAAA,MACA,8BAAA;AAAA,MACA,yBAAA;AAAA,MACA,6BAAA;AAAA,IAA6B;AAAA,EAC/B;AAGF,QAAM,MAAM,MAAM,WAAW,UAAU,YAAY;AAEnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,OAAA,EAAI,iBAAiB,YAAa,GAAG,OACpC,UAAA,oBAAC,OAAA,EACC,UAAA,oBAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAA,EAAK,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,0BACG,UAAA,EAAS,8BAAW,aAAA,EAAa,GAAG,OAAO,GAC1C,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN,EAAA,CACF;"}
+{"version":3,"file":"CodeBlockServer.mjs","sources":["../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n  transformerNotationErrorLevel,\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n} from '@shikijs/transformers';\nimport { type HTMLAttributes, Suspense, type FC } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki';\nimport { cn } from '../../utils/cn';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,kBAAkB,OAAO;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,eAAiE;AAAA,IACrE;AAAA,IACA,OAAO,aAAa,gBAAgB;AAAA,IACpC,cAAc;AAAA,MACZ,wBAAA;AAAA,MACA,6BAAA;AAAA,MACA,iCAAA;AAAA,MACA,8BAAA;AAAA,MACA,yBAAA;AAAA,MACA,6BAAA;AAAA,IAA6B;AAAA,EAC/B;AAGF,QAAM,MAAM,MAAM,WAAW,UAAU,YAAY;AAEnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAA;AAAA,MAClC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAA;AAAA,IAAc;AAAA,EAAA;AAG9C;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,OAAA,EAAI,iBAAiB,YAAa,GAAG,OACpC,UAAA,oBAAC,OAAA,EACC,UAAA,oBAAC,QAAA,EACE,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAA,EAAK,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EAAA,CACH,EAAA,CACF,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,0BACG,UAAA,EAAS,8BAAW,aAAA,EAAa,GAAG,OAAO,GAC1C,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,eAAe,SAAS;AAAA,IACtC,iBAAiB;AAAA,IACjB,SAAS,CAAC,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN,EAAA,CACF;"}

package/dist/components/IDE/CodeContext.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const ReactExports = require("react");
 require("@intlayer/config/built");
-require("../../better-auth.8zoxzg-F-BEBqzpjz.cjs");
+require("../../better-auth.CMQ3rA-I-C2nBKRMa.cjs");
 require("@intlayer/editor-react");
 require("../Toaster/Toast.cjs");
 require("../../hooks/useAsync/useAsyncStateStore.cjs");

package/dist/components/IDE/CodeContext.mjs

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import "@intlayer/config/built";
-import "../../better-auth.8zoxzg-F-D8e0X4ys.js";
+import "../../better-auth.CMQ3rA-I-7umXOENE.js";
 import "@intlayer/editor-react";
 import "../Toaster/Toast.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";

package/dist/components/IDE/CopyCode.cjs

@@ -5,9 +5,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const reactIntlayer = require("react-intlayer");
 const components_CopyButton_index = require("../CopyButton/index.cjs");
 const components_Popover_index = require("../Popover/index.cjs");
-const components_IDE_copyCode_content = require("./copyCode.content.cjs");
 const CopyCode = ({ code }) => {
-  const { title, description } = reactIntlayer.useDictionary(components_IDE_copyCode_content);
+  const { title, description } = reactIntlayer.useIntlayer("code");
   return /* @__PURE__ */ jsxRuntime.jsxs(components_Popover_index.Popover, { identifier: "copy", children: [
     /* @__PURE__ */ jsxRuntime.jsx(components_CopyButton_index.CopyButton, { content: code }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -15,7 +14,7 @@ const CopyCode = ({ code }) => {
       {
         identifier: "copy",
         className: "flex flex-col gap-3 p-3 min-w-64 text-sm",
-        xAlign: "end",
+        xAlign: components_Popover_index.PopoverXAlign.END,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("strong", { children: title }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral", children: description })

package/dist/components/IDE/CopyCode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.cjs","sources":["../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover } from '../Popover';\nimport copyContentContent from './copyCode.content';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useDictionary(copyContentContent);\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex flex-col gap-3 p-3 min-w-64 text-sm\"\n        xAlign=\"end\"\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"names":["useDictionary","copyContentContent","jsxs","Popover","jsx","CopyButton"],"mappings":";;;;;;;;AAYO,MAAM,WAA8B,CAAC,EAAE,WAAW;AACvD,QAAM,EAAE,OAAO,gBAAgBA,cAAAA,cAAcC,+BAAkB;AAE/D,SACEC,2BAAAA,KAACC,yBAAAA,SAAA,EAAQ,YAAW,QAClB,UAAA;AAAA,IAAAC,2BAAAA,IAACC,4BAAAA,YAAA,EAAW,SAAS,KAAA,CAAM;AAAA,IAE3BH,2BAAAA;AAAAA,MAACC,yBAAAA,QAAQ;AAAA,MAAR;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,QAAO;AAAA,QAEP,UAAA;AAAA,UAAAC,2BAAAA,IAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,UACfA,2BAAAA,IAAC,KAAA,EAAE,WAAU,gBAAgB,UAAA,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3C,GACF;AAEJ;;"}
+{"version":3,"file":"CopyCode.cjs","sources":["../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex flex-col gap-3 p-3 min-w-64 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"names":["useIntlayer","jsxs","Popover","jsx","CopyButton","PopoverXAlign"],"mappings":";;;;;;;AAWO,MAAM,WAA8B,CAAC,EAAE,WAAW;AACvD,QAAM,EAAE,OAAO,gBAAgBA,cAAAA,YAAY,MAAM;AAEjD,SACEC,2BAAAA,KAACC,yBAAAA,SAAA,EAAQ,YAAW,QAClB,UAAA;AAAA,IAAAC,2BAAAA,IAACC,4BAAAA,YAAA,EAAW,SAAS,KAAA,CAAM;AAAA,IAE3BH,2BAAAA;AAAAA,MAACC,yBAAAA,QAAQ;AAAA,MAAR;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,QAAQG,yBAAAA,cAAc;AAAA,QAEtB,UAAA;AAAA,UAAAF,2BAAAA,IAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,UACfA,2BAAAA,IAAC,KAAA,EAAE,WAAU,gBAAgB,UAAA,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3C,GACF;AAEJ;;"}

package/dist/components/IDE/CopyCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/CopyCode.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiBtC,CAAC"}
+{"version":3,"file":"CopyCode.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/CopyCode.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiBtC,CAAC"}

package/dist/components/IDE/CopyCode.mjs

@@ -1,11 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useDictionary } from "react-intlayer";
+import { useIntlayer } from "react-intlayer";
 import { CopyButton } from "../CopyButton/index.mjs";
-import { Popover } from "../Popover/index.mjs";
-import copyContentContent from "./copyCode.content.mjs";
+import { Popover, PopoverXAlign } from "../Popover/index.mjs";
 const CopyCode = ({ code }) => {
-  const { title, description } = useDictionary(copyContentContent);
+  const { title, description } = useIntlayer("code");
   return /* @__PURE__ */ jsxs(Popover, { identifier: "copy", children: [
     /* @__PURE__ */ jsx(CopyButton, { content: code }),
     /* @__PURE__ */ jsxs(
@@ -13,7 +12,7 @@ const CopyCode = ({ code }) => {
       {
         identifier: "copy",
         className: "flex flex-col gap-3 p-3 min-w-64 text-sm",
-        xAlign: "end",
+        xAlign: PopoverXAlign.END,
         children: [
           /* @__PURE__ */ jsx("strong", { children: title }),
           /* @__PURE__ */ jsx("p", { className: "text-neutral", children: description })

package/dist/components/IDE/CopyCode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.mjs","sources":["../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover } from '../Popover';\nimport copyContentContent from './copyCode.content';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useDictionary(copyContentContent);\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex flex-col gap-3 p-3 min-w-64 text-sm\"\n        xAlign=\"end\"\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,WAA8B,CAAC,EAAE,WAAW;AACvD,QAAM,EAAE,OAAO,gBAAgB,cAAc,kBAAkB;AAE/D,SACE,qBAAC,SAAA,EAAQ,YAAW,QAClB,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,SAAS,KAAA,CAAM;AAAA,IAE3B;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,QAAO;AAAA,QAEP,UAAA;AAAA,UAAA,oBAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,UACf,oBAAC,KAAA,EAAE,WAAU,gBAAgB,UAAA,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3C,GACF;AAEJ;"}
+{"version":3,"file":"CopyCode.mjs","sources":["../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex flex-col gap-3 p-3 min-w-64 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWO,MAAM,WAA8B,CAAC,EAAE,WAAW;AACvD,QAAM,EAAE,OAAO,gBAAgB,YAAY,MAAM;AAEjD,SACE,qBAAC,SAAA,EAAQ,YAAW,QAClB,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,SAAS,KAAA,CAAM;AAAA,IAE3B;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,QAAQ,cAAc;AAAA,QAEtB,UAAA;AAAA,UAAA,oBAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,UACf,oBAAC,KAAA,EAAE,WAAU,gBAAgB,UAAA,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3C,GACF;AAEJ;"}