@intlayer/design-system 5.1.4 → 5.1.6

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react-hook-form");
 require("../../Select/Multiselect.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("../FormField.cjs");
 exports.MultiSelectElement = components_Form_layout_FormItemLayout.MultiSelectElement;
 //# sourceMappingURL=MultiselectElement.cjs.map

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react-hook-form";
 import "../../Select/Multiselect.mjs";
-import { M } from "../../../Form-BZUDRfoN.js";
+import { M } from "../../../Form-MjLzPGze.js";
 import "../FormField.mjs";
 export {
   M as MultiSelectElement

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react-hook-form");
 require("../../Select/Select.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("../FormField.cjs");
 exports.SelectElement = components_Form_layout_FormItemLayout.SelectElement;
 //# sourceMappingURL=SelectElement.cjs.map

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react-hook-form";
 import "../../Select/Select.mjs";
-import { S } from "../../../Form-BZUDRfoN.js";
+import { S } from "../../../Form-MjLzPGze.js";
 import "../FormField.mjs";
 export {
   S as SelectElement

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react-hook-form");
 require("../../SwitchSelector/index.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("../FormField.cjs");
 exports.SwitchSelectorElement = components_Form_layout_FormItemLayout.SwitchSelectorElement;
 //# sourceMappingURL=SwitchSelectorElement.cjs.map

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react-hook-form";
 import "../../SwitchSelector/index.mjs";
-import { e } from "../../../Form-BZUDRfoN.js";
+import { e } from "../../../Form-MjLzPGze.js";
 import "../FormField.mjs";
 export {
   e as SwitchSelectorElement

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

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("../../TextArea/TextArea.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.TextAreaElement = components_Form_layout_FormItemLayout.TextAreaElement;
 //# sourceMappingURL=TextAreaElement.cjs.map

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

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../TextArea/TextArea.mjs";
-import { T } from "../../../Form-BZUDRfoN.js";
+import { T } from "../../../Form-MjLzPGze.js";
 export {
   T as TextAreaElement
 };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.EditableFieldInputElement = components_Form_layout_FormItemLayout.EditableFieldInputElement;
 exports.EditableFieldTextAreaElement = components_Form_layout_FormItemLayout.EditableFieldTextAreaElement;
 exports.FormElement = components_Form_layout_FormItemLayout.FormElement;

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

@@ -1,4 +1,4 @@
-import { E, c, a, I, b, T } from "../../../Form-BZUDRfoN.js";
+import { E, c, a, I, b, T } from "../../../Form-MjLzPGze.js";
 export {
   E as EditableFieldInputElement,
   c as EditableFieldTextAreaElement,

package/dist/components/Form/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_Form_FormBase = require("./FormBase.cjs");
 const components_Form_FormField = require("./FormField.cjs");
-const components_Form_layout_FormItemLayout = require("../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../Form-BpxW17v4.cjs");
 exports.useForm = components_Form_FormBase.useForm;
 exports.useFormField = components_Form_FormField.useFormField;
 exports.Form = components_Form_layout_FormItemLayout.Form;

package/dist/components/Form/index.mjs

@@ -1,6 +1,6 @@
 import { useForm } from "./FormBase.mjs";
 import { useFormField } from "./FormField.mjs";
-import { F } from "../../Form-BZUDRfoN.js";
+import { F } from "../../Form-MjLzPGze.js";
 export {
   F as Form,
   useForm,

package/dist/components/Form/layout/FormItemLayout.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("./FormLabelLayout.cjs");
 exports.FormItemLayout = components_Form_layout_FormItemLayout.FormItemLayout;
 //# sourceMappingURL=FormItemLayout.cjs.map

package/dist/components/Form/layout/FormItemLayout.mjs

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { d } from "../../../Form-BZUDRfoN.js";
+import { d } from "../../../Form-MjLzPGze.js";
 import "./FormLabelLayout.mjs";
 export {
   d as FormItemLayout

package/dist/components/Form/layout/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 const components_Form_layout_FormLabelLayout = require("./FormLabelLayout.cjs");
 exports.FormItemLayout = components_Form_layout_FormItemLayout.FormItemLayout;
 exports.FormLabelLayout = components_Form_layout_FormLabelLayout.FormLabelLayout;

package/dist/components/Form/layout/index.mjs

@@ -1,4 +1,4 @@
-import { d } from "../../../Form-BZUDRfoN.js";
+import { d } from "../../../Form-MjLzPGze.js";
 import { FormLabelLayout } from "./FormLabelLayout.mjs";
 export {
   d as FormItemLayout,

package/dist/components/Headers/index.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const utils_cn = require("../../utils/cn.cjs");
 const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
-const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
+const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
 const StyledH1 = ({
   className,
   ...props

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","cn","id"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","cn","id"],"mappings":";;;;AAGA,MAAM,gBAAgB;AACtB,MAAM,cAAc;AAEpB,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEEA,+BAAC,QAAG,WAAWC,SAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,MAAO,CAAA;AAAA;AAGtE,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEED,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA,GAAG,2BAA2B,eAAe,SAAS;AAAA,MAChE,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAIR,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEED,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA,GAAG,0BAA0B,eAAe,SAAS;AAAA,MAC/D,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAIR,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEED,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA,GAAG,0BAA0B,eAAe,SAAS;AAAA,MAC/D,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAIR,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEED,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA,GAAG,4BAA4B,eAAe,SAAS;AAAA,MACjE,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAYR,MAAM,QAAQ,CAAC,aACb,OAAO,QAAQ,EAEZ,UAAU,KAAK,EACf,QAAQ,oBAAoB,EAAE,EAE9B,QAAQ,QAAQ,GAAG,EACnB,YAAY;AAEjB,MAAM,eAAe,CAAC,OAAe;AAC7B,QAAA,UAAU,SAAS,eAAe,EAAE;AAC1C,QAAM,SAAS;AACf,QAAM,KACH,SAAS,sBAAA,GAAyB,OAAO,KAAK,OAAO,UAAU;AAElE,SAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAChD;AAEA,MAAM,aAAa,CAAC,YAAqB,MAAsC;AACvE,QAAA,aAAa,WAAW,sBAAsB,EAAE,MACpD,YAAY,WAAW,wBAAwB;AAEjD,QAAM,QAAQ,OAAO,iBAAiB,YAAY,QAAQ;AAE1D,QAAM,aAAa,aAAa,SAAS,MAAM,iBAAiB,MAAM,GAAG,EAAE,GACzE,WAAW,aAAa,SAAS,MAAM,OAAO,EAAE;AAElD,QAAM,cAAc,YAAY,SAAS,MAAM,iBAAiB,KAAK,GAAG,EAAE,GACxE,YAAY,cAAc,SAAS,MAAM,QAAQ,EAAE;AAErD,QAAM,SAAS,EAAE,SACf,SAAS,EAAE;AAEb,QAAM,iBACJ,UAAU,cACV,UAAU,YACV,UAAU,eACV,UAAU;AAEL,SAAA;AACT;AAEA,MAAM,iBAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,OAAO,aAAa,WAAW,MAAM,QAAQ,IAAI;AAEtD,QAAA,UAAU,CAAC,MAAsC;AACrD,UAAM,EAAE,IAAAC,IAAG,IAAI,EAAE;AAEjB,UAAM,iBAAiB,WAAW,EAAE,eAAe,CAAC;AAEhD,QAAA,kBAAkB,OAAOA,QAAO,UAAU;AAC5C,YAAM,iBAAiB,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,CAAC;AACxD,YAAM,MAAM,GAAG,cAAc,IAAIA,GAAE;AAGzB,gBAAA,UAAU,UAAU,GAAG;AAEjC,mBAAaA,GAAE;AAAA,IAAA;AAAA,EAEnB;AAGE,SAAAF,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,cAAc,UAAU;AAAA,MACjC,cACE,cACI,8BAA8B,EAAE,wCAChC;AAAA,MAEN,WAAWC,SAAA,GAAG,eAAe,aAAa,SAAS;AAAA,MAClD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;AAEa,MAAA,KAAuB,CAAC,EAAE,aAAa,GAAG,GAAG,MACxD,MAAAD,+BAAC,UAAU,EAAA,GAAG,MAAO,CAAA;AAGhB,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,+BAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;AAE7D,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,+BAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;AAE7D,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,+BAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;AAE7D,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,+BAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;;;;;;"}

package/dist/components/Headers/index.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.mjs";
 const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
-const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
+const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
 const StyledH1 = ({
   className,
   ...props

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["id"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["id"],"mappings":"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"}

package/dist/components/IDE/Code.cjs

@@ -42,7 +42,7 @@ const Code = ({
           ...props,
           children: [
             showHeader && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card/50 dark:bg-card-dark/50 text-neutral dark:text-neutral-dark grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("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", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: fileName ?? language }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                   packageManager && /* @__PURE__ */ jsxRuntime.jsx(components_IDE_PackageManagerSelector.PackageManagerSelector, {}),

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  PackageManager,\n  CodeFormat,\n  ContentDeclarationFormat,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyButton } from './CopyButton';\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 dark:bg-card-dark/50 text-neutral dark:text-neutral-dark 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-28\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyButton content={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","CopyButton","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;AACE,QAAA,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAEzD,QAAA,oBACJ,kBAAkB,cAAc;AAGhC,SAAAA,2BAAA;AAAA,IAACC,uCAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAA;AAAA,QAACC,2BAAA;AAAA,QAAA;AAAA,UACC,WAAWC,SAAA;AAAA,YACT;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,UACF;AAAA,UACA,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cAEGF,2BAAA,KAAAG,qBAAA,EAAA,UAAA;AAAA,cAACH,2BAAAA,KAAA,OAAA,EAAI,WAAU,4KACb,UAAA;AAAA,gBAAAF,2BAAA,IAAC,QAAK,EAAA,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjDE,2BAAAA,KAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,kBAAA,iDAAmBI,sCAAuB,wBAAA,EAAA;AAAA,kBAC1C,6CAAeC,kCAAmB,oBAAA,EAAA;AAAA,kBAClC,2DACEC,gDAAAA,kCAAiC,CAAA,CAAA;AAAA,gBAAA,EAEtC,CAAA;AAAA,cAAA,GACF;AAAA,cACAR,2BAAAA,IAAC,OAAI,EAAA,WAAU,iBACb,UAAAA,2BAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWI,SAAA;AAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBACvB;AAAA,kBAEA,UAAAJ,2BAAAA,IAACS,0BAAAA,YAAW,EAAA,SAAS,KAAM,CAAA;AAAA,gBAAA;AAAA,cAAA,EAE/B,CAAA;AAAA,YAAA,GACF;AAAA,YAEFT,2BAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,2BAAA,IAACU,4CAAU,MAAM,UAAU,YACxB,UAAA,KACH,CAAA,EACF,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;;"}
+{"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  PackageManager,\n  CodeFormat,\n  ContentDeclarationFormat,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyButton } from './CopyButton';\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-28\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyButton content={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","CopyButton","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;AACE,QAAA,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAEzD,QAAA,oBACJ,kBAAkB,cAAc;AAGhC,SAAAA,2BAAA;AAAA,IAACC,uCAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAA;AAAA,QAACC,2BAAA;AAAA,QAAA;AAAA,UACC,WAAWC,SAAA;AAAA,YACT;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,UACF;AAAA,UACA,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cAEGF,2BAAA,KAAAG,qBAAA,EAAA,UAAA;AAAA,cAACH,2BAAAA,KAAA,OAAA,EAAI,WAAU,gIACb,UAAA;AAAA,gBAAAF,2BAAA,IAAC,QAAK,EAAA,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjDE,2BAAAA,KAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,kBAAA,iDAAmBI,sCAAuB,wBAAA,EAAA;AAAA,kBAC1C,6CAAeC,kCAAmB,oBAAA,EAAA;AAAA,kBAClC,2DACEC,gDAAAA,kCAAiC,CAAA,CAAA;AAAA,gBAAA,EAEtC,CAAA;AAAA,cAAA,GACF;AAAA,cACAR,2BAAAA,IAAC,OAAI,EAAA,WAAU,iBACb,UAAAA,2BAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWI,SAAA;AAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBACvB;AAAA,kBAEA,UAAAJ,2BAAAA,IAACS,0BAAAA,YAAW,EAAA,SAAS,KAAM,CAAA;AAAA,gBAAA;AAAA,cAAA,EAE/B,CAAA;AAAA,YAAA,GACF;AAAA,YAEFT,2BAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,2BAAA,IAACU,4CAAU,MAAM,UAAU,YACxB,UAAA,KACH,CAAA,EACF,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;;"}

package/dist/components/IDE/Code.mjs

@@ -40,7 +40,7 @@ const Code = ({
           ...props,
           children: [
             showHeader && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: "bg-card/50 dark:bg-card-dark/50 text-neutral dark:text-neutral-dark grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs", children: [
+              /* @__PURE__ */ jsxs("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", children: [
                 /* @__PURE__ */ jsx("span", { className: "truncate", children: fileName ?? language }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   packageManager && /* @__PURE__ */ jsx(PackageManagerSelector, {}),

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  PackageManager,\n  CodeFormat,\n  ContentDeclarationFormat,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyButton } from './CopyButton';\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 dark:bg-card-dark/50 text-neutral dark:text-neutral-dark 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-28\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyButton content={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;AACE,QAAA,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAEzD,QAAA,oBACJ,kBAAkB,cAAc;AAGhC,SAAA;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,UACF;AAAA,UACA,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,cAAC,qBAAA,OAAA,EAAI,WAAU,4KACb,UAAA;AAAA,gBAAA,oBAAC,QAAK,EAAA,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjD,qBAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,kBAAA,sCAAmB,wBAAuB,EAAA;AAAA,kBAC1C,kCAAe,oBAAmB,EAAA;AAAA,kBAClC,gDACE,kCAAiC,CAAA,CAAA;AAAA,gBAAA,EAEtC,CAAA;AAAA,cAAA,GACF;AAAA,cACA,oBAAC,OAAI,EAAA,WAAU,iBACb,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBACvB;AAAA,kBAEA,UAAA,oBAAC,YAAW,EAAA,SAAS,KAAM,CAAA;AAAA,gBAAA;AAAA,cAAA,EAE/B,CAAA;AAAA,YAAA,GACF;AAAA,YAEF,oBAAC,OAAI,EAAA,WAAU,oDACb,UAAA,oBAAC,aAAU,MAAM,UAAU,YACxB,UAAA,KACH,CAAA,EACF,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"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  PackageManager,\n  CodeFormat,\n  ContentDeclarationFormat,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyButton } from './CopyButton';\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-28\">\n              <div\n                className={cn(\n                  'absolute bottom-0 right-2 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyButton content={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;AACE,QAAA,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAEzD,QAAA,oBACJ,kBAAkB,cAAc;AAGhC,SAAA;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,UACF;AAAA,UACA,cAAa;AAAA,UACZ,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,cAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,cAAC,qBAAA,OAAA,EAAI,WAAU,gIACb,UAAA;AAAA,gBAAA,oBAAC,QAAK,EAAA,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,gBACjD,qBAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,kBAAA,sCAAmB,wBAAuB,EAAA;AAAA,kBAC1C,kCAAe,oBAAmB,EAAA;AAAA,kBAClC,gDACE,kCAAiC,CAAA,CAAA;AAAA,gBAAA,EAEtC,CAAA;AAAA,cAAA,GACF;AAAA,cACA,oBAAC,OAAI,EAAA,WAAU,iBACb,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,qBAAqB;AAAA,kBACvB;AAAA,kBAEA,UAAA,oBAAC,YAAW,EAAA,SAAS,KAAM,CAAA;AAAA,gBAAA;AAAA,cAAA,EAE/B,CAAA;AAAA,YAAA,GACF;AAAA,YAEF,oBAAC,OAAI,EAAA,WAAU,oDACb,UAAA,oBAAC,aAAU,MAAM,UAAU,YACxB,UAAA,KACH,CAAA,EACF,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/IDE/CodeBlockClient.cjs

@@ -34,7 +34,14 @@ const CodeBlockShiki = ({
     shiki.codeToHtml(children, shikiOptions).then((out2) => setOut(out2)).catch((e) => console.error(e));
   }, [shikiOptions, children]);
   if (!out) return /* @__PURE__ */ jsxRuntime.jsx(CodeDefault, { children });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: out }, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: out },
+      ...props,
+      style: { backgroundColor: "transparent" }
+    }
+  );
 };
 const CodeBlock = ({
   className,

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 <div dangerouslySetInnerHTML={{ __html: out }} {...props} />;\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,OACC,EAAA,UAAAA,2BAAAA,IAAC,OACC,EAAA,UAAAA,2BAAA,IAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAA,IAAC,QAAK,EAAA,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,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,aAAA;AAAA,IACE,OAAO;AAAA,MACL;AAAA,MACA,OAAO,aAAa,gBAAgB;AAAA,MACpC,cAAc;AAAA,QACZC,qCAAwB;AAAA,QACxBC,0CAA6B;AAAA,QAC7BC,8CAAiC;AAAA,QACjCC,2CAA8B;AAAA,QAC9BC,sCAAyB;AAAA,QACzBC,aAA6B,6BAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EACnB;AAEFC,eAAAA,UAAU,MAAM;AACdC,UAAA,WAAW,UAAU,YAAY,EAC9B,KAAK,CAACC,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAAA,GAC/B,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAY,QAAAX,2BAAAA,IAAC,eAAa,SAAS,CAAA;AAEjC,SAAAA,2BAAA,IAAC,SAAI,yBAAyB,EAAE,QAAQ,IAAI,GAAI,GAAG,OAAO;AACnE;AAUO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,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,OACC,EAAA,UAAAA,2BAAAA,IAAC,OACC,EAAA,UAAAA,2BAAA,IAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAA,IAAC,QAAK,EAAA,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,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,aAAA;AAAA,IACE,OAAO;AAAA,MACL;AAAA,MACA,OAAO,aAAa,gBAAgB;AAAA,MACpC,cAAc;AAAA,QACZC,qCAAwB;AAAA,QACxBC,0CAA6B;AAAA,QAC7BC,8CAAiC;AAAA,QACjCC,2CAA8B;AAAA,QAC9BC,sCAAyB;AAAA,QACzBC,aAA6B,6BAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EACnB;AAEFC,eAAAA,UAAU,MAAM;AACdC,UAAA,WAAW,UAAU,YAAY,EAC9B,KAAK,CAACC,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAAA,GAC/B,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAY,QAAAX,2BAAAA,IAAC,eAAa,SAAS,CAAA;AAGtC,SAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAI;AAAA,MACtC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAc;AAAA,IAAA;AAAA,EAC1C;AAEJ;AAUO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockClient.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/CodeBlockClient.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,OAAO,CAAC;AAiBf,eAAO,MAAM,cAAc,EAkCV,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAYxC,CAAC"}
+{"version":3,"file":"CodeBlockClient.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/CodeBlockClient.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,OAAO,CAAC;AAiBf,eAAO,MAAM,cAAc,EAwCV,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAYxC,CAAC"}

package/dist/components/IDE/CodeBlockClient.mjs

@@ -32,7 +32,14 @@ const CodeBlockShiki = ({
     codeToHtml(children, shikiOptions).then((out2) => setOut(out2)).catch((e) => console.error(e));
   }, [shikiOptions, children]);
   if (!out) return /* @__PURE__ */ jsx(CodeDefault, { children });
-  return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: out }, ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: out },
+      ...props,
+      style: { backgroundColor: "transparent" }
+    }
+  );
 };
 const CodeBlock = ({
   className,

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 <div dangerouslySetInnerHTML={{ __html: out }} {...props} />;\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,OACC,EAAA,UAAA,oBAAC,OACC,EAAA,UAAA,oBAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAK,EAAA,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,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,wBAAwB;AAAA,QACxB,6BAA6B;AAAA,QAC7B,iCAAiC;AAAA,QACjC,8BAA8B;AAAA,QAC9B,yBAAyB;AAAA,QACzB,6BAA6B;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EACnB;AAEF,YAAU,MAAM;AACd,eAAW,UAAU,YAAY,EAC9B,KAAK,CAACA,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAAA,GAC/B,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAY,QAAA,oBAAC,eAAa,SAAS,CAAA;AAEjC,SAAA,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,IAAI,GAAI,GAAG,OAAO;AACnE;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,OACC,EAAA,UAAA,oBAAC,OACC,EAAA,UAAA,oBAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAK,EAAA,WAAU,qBACb,UAAA,KAAA,GADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,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,wBAAwB;AAAA,QACxB,6BAA6B;AAAA,QAC7B,iCAAiC;AAAA,QACjC,8BAA8B;AAAA,QAC9B,yBAAyB;AAAA,QACzB,6BAA6B;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEF,CAAC,MAAM,UAAU;AAAA,EACnB;AAEF,YAAU,MAAM;AACd,eAAW,UAAU,YAAY,EAC9B,KAAK,CAACA,SAAQ,OAAOA,IAAG,CAAC,EACzB,MAAM,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC;AAAA,EAAA,GAC/B,CAAC,cAAc,QAAQ,CAAC;AAE3B,MAAI,CAAC,IAAY,QAAA,oBAAC,eAAa,SAAS,CAAA;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAI;AAAA,MACtC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAc;AAAA,IAAA;AAAA,EAC1C;AAEJ;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

@@ -25,7 +25,14 @@ const CodeBlockShiki = async ({
     ]
   };
   const out = await shiki.codeToHtml(children, shikiOptions);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: out }, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: out },
+      ...props,
+      style: { backgroundColor: "transparent" }
+    }
+  );
 };
 const CodeDefault = ({
   children,

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 <div dangerouslySetInnerHTML={{ __html: out }} {...props} />;\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,qCAAwB;AAAA,MACxBC,0CAA6B;AAAA,MAC7BC,8CAAiC;AAAA,MACjCC,2CAA8B;AAAA,MAC9BC,sCAAyB;AAAA,MACzBC,aAA6B,6BAAA;AAAA,IAAA;AAAA,EAEjC;AAEA,QAAM,MAAM,MAAMC,iBAAW,UAAU,YAAY;AAE5C,SAAAC,2BAAA,IAAC,SAAI,yBAAyB,EAAE,QAAQ,IAAI,GAAI,GAAG,OAAO;AACnE;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA,IAAC,OAAI,EAAA,iBAAiB,YAAa,GAAG,OACpC,UAAAA,2BAAA,IAAC,OACC,EAAA,UAAAA,2BAAAA,IAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAAA,IAAC,QAAK,EAAA,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,qCACGC,aAAAA,UAAS,EAAA,yCAAW,aAAa,EAAA,GAAG,OAAO,GAC1C,UAAAD,2BAAA;AAAA,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,EACF,CAAA;;;"}
+{"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,qCAAwB;AAAA,MACxBC,0CAA6B;AAAA,MAC7BC,8CAAiC;AAAA,MACjCC,2CAA8B;AAAA,MAC9BC,sCAAyB;AAAA,MACzBC,aAA6B,6BAAA;AAAA,IAAA;AAAA,EAEjC;AAEA,QAAM,MAAM,MAAMC,iBAAW,UAAU,YAAY;AAGjD,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAI;AAAA,MACtC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAc;AAAA,IAAA;AAAA,EAC1C;AAEJ;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA,IAAC,OAAI,EAAA,iBAAiB,YAAa,GAAG,OACpC,UAAAA,2BAAA,IAAC,OACC,EAAA,UAAAA,2BAAAA,IAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/BA,2BAAAA,IAAC,QAAK,EAAA,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,qCACGC,aAAAA,UAAS,EAAA,yCAAW,aAAa,EAAA,GAAG,OAAO,GAC1C,UAAAD,2BAAA;AAAA,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,EACF,CAAA;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockServer.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/CodeBlockServer.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,cAAc,EAuBV,EAAE,CAAC,cAAc,CAAC,CAAC;AAsBpC,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAcxC,CAAC"}
+{"version":3,"file":"CodeBlockServer.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/CodeBlockServer.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,cAAc,EA6BV,EAAE,CAAC,cAAc,CAAC,CAAC;AAsBpC,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAcxC,CAAC"}

package/dist/components/IDE/CodeBlockServer.mjs

@@ -23,7 +23,14 @@ const CodeBlockShiki = async ({
     ]
   };
   const out = await codeToHtml(children, shikiOptions);
-  return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: out }, ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: out },
+      ...props,
+      style: { backgroundColor: "transparent" }
+    }
+  );
 };
 const CodeDefault = ({
   children,

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 <div dangerouslySetInnerHTML={{ __html: out }} {...props} />;\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,wBAAwB;AAAA,MACxB,6BAA6B;AAAA,MAC7B,iCAAiC;AAAA,MACjC,8BAA8B;AAAA,MAC9B,yBAAyB;AAAA,MACzB,6BAA6B;AAAA,IAAA;AAAA,EAEjC;AAEA,QAAM,MAAM,MAAM,WAAW,UAAU,YAAY;AAE5C,SAAA,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,IAAI,GAAI,GAAG,OAAO;AACnE;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,OAAI,EAAA,iBAAiB,YAAa,GAAG,OACpC,UAAA,oBAAC,OACC,EAAA,UAAA,oBAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAK,EAAA,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,0BACG,UAAS,EAAA,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,EACF,CAAA;"}
+{"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,wBAAwB;AAAA,MACxB,6BAA6B;AAAA,MAC7B,iCAAiC;AAAA,MACjC,8BAA8B;AAAA,MAC9B,yBAAyB;AAAA,MACzB,6BAA6B;AAAA,IAAA;AAAA,EAEjC;AAEA,QAAM,MAAM,MAAM,WAAW,UAAU,YAAY;AAGjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,IAAI;AAAA,MACtC,GAAG;AAAA,MACJ,OAAO,EAAE,iBAAiB,cAAc;AAAA,IAAA;AAAA,EAC1C;AAEJ;AAEA,MAAM,cAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,OAAI,EAAA,iBAAiB,YAAa,GAAG,OACpC,UAAA,oBAAC,OACC,EAAA,UAAA,oBAAC,QACE,EAAA,UAAA,SAAS,MAAM,IAAI,EAAE,IAAI,CAAC,MAAM,UAC/B,oBAAC,QAAK,EAAA,WAAU,qBACb,UAAA,QADsC,KAEzC,CACD,EACH,CAAA,EACF,CAAA,GACF;AAWK,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,0BACG,UAAS,EAAA,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,EACF,CAAA;"}

package/dist/components/IDE/FileList.cjs

@@ -11,7 +11,7 @@ const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
     transparency: "none",
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-red-500" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-green-500" })

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

@@ -1 +1 @@
-{"version":3,"file":"FileList.cjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":["jsxs","Container","jsx","FileTree"],"mappings":";;;;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAAA,2BAAA;AAAA,EAACC,2BAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,SAAI,WAAU,sJACb,UAACF,2BAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAACE,2BAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,qCACC,OAAI,EAAA,WAAU,mEACb,UAACA,2BAAA,IAAA,OAAA,EAAI,WAAU,mCACb,UAAAA,2BAAAA,IAAC,OAAI,EAAA,WAAU,kBACb,UAACA,2BAAAA,IAAAC,wBAAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"FileList.cjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":["jsxs","Container","jsx","FileTree"],"mappings":";;;;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAAA,2BAAA;AAAA,EAACC,2BAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,SAAI,WAAU,+HACb,UAACF,2BAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAACE,2BAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,qCACC,OAAI,EAAA,WAAU,mEACb,UAACA,2BAAA,IAAA,OAAA,EAAI,WAAU,mCACb,UAAAA,2BAAAA,IAAC,OAAI,EAAA,WAAU,kBACb,UAACA,2BAAAA,IAAAC,wBAAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;;"}

package/dist/components/IDE/FileList.mjs

@@ -9,7 +9,7 @@ const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxs(
     transparency: "none",
     ...props,
     children: [
-      /* @__PURE__ */ jsx("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: /* @__PURE__ */ jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: /* @__PURE__ */ jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
         /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
         /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
         /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })

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

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":[],"mappings":";;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,sJACb,UAAC,qBAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChD,oBAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnD,oBAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,0BACC,OAAI,EAAA,WAAU,mEACb,UAAC,oBAAA,OAAA,EAAI,WAAU,mCACb,UAAA,oBAAC,OAAI,EAAA,WAAU,kBACb,UAAC,oBAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;"}
+{"version":3,"file":"FileList.mjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":[],"mappings":";;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,+HACb,UAAC,qBAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChD,oBAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnD,oBAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,0BACC,OAAI,EAAA,WAAU,mEACb,UAAC,oBAAA,OAAA,EAAI,WAAU,mCACb,UAAA,oBAAC,OAAI,EAAA,WAAU,kBACb,UAAC,oBAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;"}

package/dist/components/IDE/FileTree.cjs

@@ -87,7 +87,7 @@ const FileTree = ({
   prePaths = []
 }) => {
   const fileTree = components_IDE_createFileTree.createFileTree(filesPaths);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1", children: fileTree.map(({ path, subPath, isFile }) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral flex size-full flex-col items-start justify-start py-1", children: fileTree.map(({ path, subPath, isFile }) => /* @__PURE__ */ jsxRuntime.jsx(
     FileItem,
     {
       isFile,