@intlayer/design-system 3.5.5 → 3.5.6

package/dist/components/DictionaryFieldEditor/VersionSwitcherDropDown/versionSwitcherDropDown.content.mjs

@@ -0,0 +1,55 @@
+import { t } from "intlayer";
+const versionSwitcherContent = {
+  key: "version-switcher",
+  content: {
+    versionSwitcherLabel: t({
+      en: "Version selector",
+      "en-GB": "Version selector",
+      fr: "Sélecteur de version",
+      es: "Selector de versión",
+      de: "Version wähler",
+      ja: "バージョンセレクター",
+      ko: "버전 선택기",
+      zh: "版本选择器",
+      it: "Selettore di versione",
+      pt: "Seletor de versão",
+      hi: "संस्करण चयनकर्ता",
+      ar: "منتقي الإصدار",
+      ru: "Выбор версии"
+    }),
+    versionListLabel: t({
+      en: "Version list",
+      "en-GB": "Version list",
+      fr: "Liste des versions",
+      es: "Lista de versiones",
+      de: "Versionsliste",
+      ja: "バージョンリスト",
+      ko: "버전 목록",
+      zh: "版本列表",
+      it: "Elenco delle versioni",
+      pt: "Lista de versões",
+      hi: "संस्करण सूची",
+      ar: "قائمة الإصدارات",
+      ru: "Список версий"
+    }),
+    switchTo: t({
+      en: "Switch to",
+      fr: "Passer à",
+      es: "Cambiar a",
+      "en-GB": "Switch to",
+      de: "Wechseln Sie zu",
+      ja: "に切り替える",
+      ko: "전환",
+      zh: "切换到",
+      it: "Passa a",
+      pt: "Mudar para",
+      hi: "स्विच करें",
+      ar: "التبديل إلى",
+      ru: "Переключиться на"
+    })
+  }
+};
+export {
+  versionSwitcherContent as default
+};
+//# sourceMappingURL=versionSwitcherDropDown.content.mjs.map

package/dist/components/DictionaryFieldEditor/VersionSwitcherDropDown/versionSwitcherDropDown.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"versionSwitcherDropDown.content.mjs","sources":["../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/versionSwitcherDropDown.content.ts"],"sourcesContent":["import { t, type DeclarationContent } from 'intlayer';\n\nconst versionSwitcherContent = {\n  key: 'version-switcher',\n  content: {\n    versionSwitcherLabel: t({\n      en: 'Version selector',\n      'en-GB': 'Version selector',\n      fr: 'Sélecteur de version',\n      es: 'Selector de versión',\n      de: 'Version wähler',\n      ja: 'バージョンセレクター',\n      ko: '버전 선택기',\n      zh: '版本选择器',\n      it: 'Selettore di versione',\n      pt: 'Seletor de versão',\n      hi: 'संस्करण चयनकर्ता',\n      ar: 'منتقي الإصدار',\n      ru: 'Выбор версии',\n    }),\n    versionListLabel: t({\n      en: 'Version list',\n      'en-GB': 'Version list',\n      fr: 'Liste des versions',\n      es: 'Lista de versiones',\n      de: 'Versionsliste',\n      ja: 'バージョンリスト',\n      ko: '버전 목록',\n      zh: '版本列表',\n      it: 'Elenco delle versioni',\n      pt: 'Lista de versões',\n      hi: 'संस्करण सूची',\n      ar: 'قائمة الإصدارات',\n      ru: 'Список версий',\n    }),\n    switchTo: t({\n      en: 'Switch to',\n      fr: 'Passer à',\n      es: 'Cambiar a',\n      'en-GB': 'Switch to',\n      de: 'Wechseln Sie zu',\n      ja: 'に切り替える',\n      ko: '전환',\n      zh: '切换到',\n      it: 'Passa a',\n      pt: 'Mudar para',\n      hi: 'स्विच करें',\n      ar: 'التبديل إلى',\n      ru: 'Переключиться на',\n    }),\n  },\n} satisfies DeclarationContent;\n\nexport default versionSwitcherContent;\n"],"names":[],"mappings":";AAEA,MAAM,yBAAyB;AAAA,EAC7B,KAAK;AAAA,EACL,SAAS;AAAA,IACP,sBAAsB,EAAE;AAAA,MACtB,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,kBAAkB,EAAE;AAAA,MAClB,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,UAAU,EAAE;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACL,CAAA;AAAA,EAAA;AAEL;"}

package/dist/components/DictionaryFieldEditor/index.cjs

@@ -3,7 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_DictionaryFieldEditor_DictionariesSelector_DictionariesSelector = require("./DictionariesSelector/DictionariesSelector.cjs");
 const components_DictionaryFieldEditor_DictionaryCreationForm_DictionaryCreationForm = require("./DictionaryCreationForm/DictionaryCreationForm.cjs");
 const components_DictionaryFieldEditor_DictionaryFieldEditor = require("./DictionaryFieldEditor.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcher = require("./VersionSwitcherDropDown/VersionSwitcher.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext = require("./VersionSwitcherDropDown/VersionSwitcherContext.cjs");
 exports.DictionariesSelector = components_DictionaryFieldEditor_DictionariesSelector_DictionariesSelector.DictionariesSelector;
 exports.DictionaryCreationForm = components_DictionaryFieldEditor_DictionaryCreationForm_DictionaryCreationForm.DictionaryCreationForm;
 exports.DictionaryFieldEditor = components_DictionaryFieldEditor_DictionaryFieldEditor.DictionaryFieldEditor;
+exports.VersionSwitcher = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcher.VersionSwitcher;
+exports.VersionSwitcherProvider = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext.VersionSwitcherProvider;
+exports.useVersionSwitcher = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext.useVersionSwitcher;
 //# sourceMappingURL=index.cjs.map

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

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

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

@@ -1,4 +1,5 @@
 export * from './DictionariesSelector/DictionariesSelector';
 export * from './DictionaryCreationForm/DictionaryCreationForm';
 export * from './DictionaryFieldEditor';
+export * from './VersionSwitcherDropDown';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}

package/dist/components/DictionaryFieldEditor/index.mjs

@@ -1,9 +1,14 @@
 import { DictionariesSelector } from "./DictionariesSelector/DictionariesSelector.mjs";
 import { DictionaryCreationForm } from "./DictionaryCreationForm/DictionaryCreationForm.mjs";
 import { DictionaryFieldEditor } from "./DictionaryFieldEditor.mjs";
+import { VersionSwitcher } from "./VersionSwitcherDropDown/VersionSwitcher.mjs";
+import { VersionSwitcherProvider, useVersionSwitcher } from "./VersionSwitcherDropDown/VersionSwitcherContext.mjs";
 export {
   DictionariesSelector,
   DictionaryCreationForm,
-  DictionaryFieldEditor
+  DictionaryFieldEditor,
+  VersionSwitcher,
+  VersionSwitcherProvider,
+  useVersionSwitcher
 };
 //# sourceMappingURL=index.mjs.map

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

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

package/dist/components/EditableField/EditableFieldInput.cjs

@@ -19,7 +19,11 @@ const EditableFieldInput = require$$0.forwardRef(({ onSave, onCancel, ...props }
     onCancel?.();
   };
   require$$0.useImperativeHandle(ref, () => inputRef.current);
-  const value = inputRef.current?.value ?? inputRef.current?.defaultValue ?? props.value ?? props.defaultValue;
+  const value = require$$0.useMemo(
+    () => props.value ?? inputRef.current?.value ?? props.defaultValue,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.value, props.defaultValue, inputRef.current?.value]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     components_EditableField_EditableFieldLayout.EditableFieldLayout,
     {

package/dist/components/EditableField/EditableFieldInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref, () => inputRef.current!);\n\n  const value =\n    inputRef.current?.value ??\n    inputRef.current?.defaultValue ??\n    (props.value as string) ??\n    (props.defaultValue as string);\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["forwardRef","useRef","useImperativeHandle","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAWa,MAAA,qBAAqBA,sBAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAWC,kBAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoBC,aAAAA,oBAAA,KAAK,MAAM,SAAS,OAAQ;AAE1C,QAAA,QACJ,SAAS,SAAS,SAClB,SAAS,SAAS,gBACjB,MAAM,SACN,MAAM;AAGP,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACD,2BAAA,kBAAA,IAAAE,uBAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;;"}
+{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAWa,MAAA,qBAAqBA,sBAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAWC,kBAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoBC,aAAAA,oBAAA,KAAK,MAAM,SAAS,OAAQ;AAEhD,QAAM,QAAQC,WAAA;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACD,2BAAA,kBAAA,IAAAE,uBAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;;"}

package/dist/components/EditableField/EditableFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mIAoC7B,CAAC"}
+{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mIAuC7B,CAAC"}

package/dist/components/EditableField/EditableFieldInput.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
-import { forwardRef, useRef, useImperativeHandle } from "react";
+import { forwardRef, useRef, useImperativeHandle, useMemo } from "react";
 import { Input } from "../Input/Input.mjs";
 import "../Input/InputPassword.mjs";
 import "../Input/Checkbox.mjs";
@@ -17,7 +17,11 @@ const EditableFieldInput = forwardRef(({ onSave, onCancel, ...props }, ref) => {
     onCancel?.();
   };
   useImperativeHandle(ref, () => inputRef.current);
-  const value = inputRef.current?.value ?? inputRef.current?.defaultValue ?? props.value ?? props.defaultValue;
+  const value = useMemo(
+    () => props.value ?? inputRef.current?.value ?? props.defaultValue,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.value, props.defaultValue, inputRef.current?.value]
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     EditableFieldLayout,
     {

package/dist/components/EditableField/EditableFieldInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref, () => inputRef.current!);\n\n  const value =\n    inputRef.current?.value ??\n    inputRef.current?.defaultValue ??\n    (props.value as string) ??\n    (props.defaultValue as string);\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["jsx"],"mappings":";;;;;;;AAWa,MAAA,qBAAqB,WAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoB,sBAAA,KAAK,MAAM,SAAS,OAAQ;AAE1C,QAAA,QACJ,SAAS,SAAS,SAClB,SAAS,SAAS,gBACjB,MAAM,SACN,MAAM;AAGP,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACA,kCAAA,IAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;"}
+{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["jsx"],"mappings":";;;;;;;AAWa,MAAA,qBAAqB,WAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoB,sBAAA,KAAK,MAAM,SAAS,OAAQ;AAEhD,QAAM,QAAQ;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACA,kCAAA,IAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;"}

package/dist/components/EditableField/EditableFieldTextArea.cjs

@@ -19,14 +19,9 @@ const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...prop
     onCancel?.();
   };
   const memoValue = require$$0.useMemo(
-    () => textAreaRef.current?.value ?? textAreaRef.current?.defaultValue ?? props.value ?? props.defaultValue ?? "",
+    () => props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      props.value,
-      props.defaultValue,
-      textAreaRef.current?.value,
-      textAreaRef.current?.defaultValue
-    ]
+    [props.value, props.defaultValue, textAreaRef.current?.value]
   );
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     components_EditableField_EditableFieldLayout.EditableFieldLayout,
@@ -41,7 +36,6 @@ const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...prop
       children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
         components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
         {
-          defaultValue: memoValue,
           className: "leading-6",
           ref: textAreaRef,
           onClick: (e) => {

package/dist/components/EditableField/EditableFieldTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue = useMemo(\n    () =>\n      textAreaRef.current?.value ??\n      textAreaRef.current?.defaultValue ??\n      (props.value as string) ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      props.value,\n      props.defaultValue,\n      textAreaRef.current?.value,\n      textAreaRef.current?.defaultValue,\n    ]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        defaultValue={memoValue}\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;AAWa,MAAA,wBAAwBA,sBAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAcC,kBAA4B,IAAI;AAGhCC,aAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAYC,WAAA;AAAA,IAChB,MACE,YAAY,SAAS,SACrB,YAAY,SAAS,gBACpB,MAAM,SACN,MAAM,gBACP;AAAA;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,YAAY,SAAS;AAAA,MACrB,YAAY,SAAS;AAAA,IAAA;AAAA,EAEzB;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,qCAAA;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;;"}
+{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue = useMemo(\n    () =>\n      (props.value as string) ??\n      textAreaRef.current?.value ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, textAreaRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;AAWa,MAAA,wBAAwBA,sBAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAcC,kBAA4B,IAAI;AAGhCC,aAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAYC,WAAA;AAAA,IAChB,MACG,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAAA;AAAA,IAEF,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,SAAS,KAAK;AAAA,EAC9D;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,qCAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;;"}

package/dist/components/EditableField/EditableFieldTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,yIA2DhC,CAAC"}
+{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,yIAoDhC,CAAC"}

package/dist/components/EditableField/EditableFieldTextArea.mjs

@@ -17,14 +17,9 @@ const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) =
     onCancel?.();
   };
   const memoValue = useMemo(
-    () => textAreaRef.current?.value ?? textAreaRef.current?.defaultValue ?? props.value ?? props.defaultValue ?? "",
+    () => props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      props.value,
-      props.defaultValue,
-      textAreaRef.current?.value,
-      textAreaRef.current?.defaultValue
-    ]
+    [props.value, props.defaultValue, textAreaRef.current?.value]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     EditableFieldLayout,
@@ -39,7 +34,6 @@ const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) =
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         AutoSizedTextArea,
         {
-          defaultValue: memoValue,
           className: "leading-6",
           ref: textAreaRef,
           onClick: (e) => {

package/dist/components/EditableField/EditableFieldTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue = useMemo(\n    () =>\n      textAreaRef.current?.value ??\n      textAreaRef.current?.defaultValue ??\n      (props.value as string) ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      props.value,\n      props.defaultValue,\n      textAreaRef.current?.value,\n      textAreaRef.current?.defaultValue,\n    ]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        defaultValue={memoValue}\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["jsx"],"mappings":";;;;;;AAWa,MAAA,wBAAwB,WAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAc,OAA4B,IAAI;AAGhC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAY;AAAA,IAChB,MACE,YAAY,SAAS,SACrB,YAAY,SAAS,gBACpB,MAAM,SACN,MAAM,gBACP;AAAA;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,YAAY,SAAS;AAAA,MACrB,YAAY,SAAS;AAAA,IAAA;AAAA,EAEzB;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;"}
+{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue = useMemo(\n    () =>\n      (props.value as string) ??\n      textAreaRef.current?.value ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, textAreaRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["jsx"],"mappings":";;;;;;AAWa,MAAA,wBAAwB,WAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAc,OAA4B,IAAI;AAGhC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAY;AAAA,IAChB,MACG,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAAA;AAAA,IAEF,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,SAAS,KAAK;AAAA,EAC9D;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;"}

package/dist/components/Form/FormLabel.cjs

@@ -6,12 +6,16 @@ const require$$0 = require("react");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Label_index = require("../Label/index.cjs");
 const components_Form_FormField = require("./FormField.cjs");
-const FormLabel = require$$0.forwardRef((props, ref) => {
+const FormLabel = require$$0.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = components_Form_FormField.useFormField();
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     components_Label_index.Label,
     {
-      className: utils_cn.cn(error && "text-error dark:text-error-dark"),
+      className: utils_cn.cn(
+        "mb-2",
+        error && "text-error dark:text-error-dark",
+        className
+      ),
       ref,
       htmlFor: formItemId,
       ...props

package/dist/components/Form/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>((props, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(error && 'text-error dark:text-error-dark')}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["forwardRef","useFormField","jsx","Label","cn"],"mappings":";;;;;;;;AAWO,MAAM,YAAYA,WAAA,WAGvB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,OAAO,WAAW,IAAIC,uCAAa;AAGzC,SAAAC,2BAAA,kBAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA,GAAG,SAAS,iCAAiC;AAAA,MACxD;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;;"}
+{"version":3,"file":"FormLabel.cjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(\n        'mb-2',\n        error && 'text-error dark:text-error-dark',\n        className\n      )}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["forwardRef","useFormField","jsx","Label","cn"],"mappings":";;;;;;;;AAWa,MAAA,YAAYA,sBAGvB,CAAC,EAAE,WAAW,GAAG,SAAS,QAAQ;AAClC,QAAM,EAAE,OAAO,WAAW,IAAIC,uCAAa;AAGzC,SAAAC,2BAAA,kBAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;;"}

package/dist/components/Form/FormLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormLabel.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS,mNAcpB,CAAC"}
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormLabel.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS,mNAkBpB,CAAC"}

package/dist/components/Form/FormLabel.mjs

@@ -4,12 +4,16 @@ import { forwardRef } from "react";
 import { cn } from "../../utils/cn.mjs";
 import { Label } from "../Label/index.mjs";
 import { useFormField } from "./FormField.mjs";
-const FormLabel = forwardRef((props, ref) => {
+const FormLabel = forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Label,
     {
-      className: cn(error && "text-error dark:text-error-dark"),
+      className: cn(
+        "mb-2",
+        error && "text-error dark:text-error-dark",
+        className
+      ),
       ref,
       htmlFor: formItemId,
       ...props

package/dist/components/Form/FormLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.mjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>((props, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(error && 'text-error dark:text-error-dark')}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["jsx"],"mappings":";;;;;;AAWO,MAAM,YAAY,WAGvB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAGzC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,SAAS,iCAAiC;AAAA,MACxD;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;"}
+{"version":3,"file":"FormLabel.mjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(\n        'mb-2',\n        error && 'text-error dark:text-error-dark',\n        className\n      )}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["jsx"],"mappings":";;;;;;AAWa,MAAA,YAAY,WAGvB,CAAC,EAAE,WAAW,GAAG,SAAS,QAAQ;AAClC,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAGzC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;"}

package/dist/components/Form/elements/EditableFieldInputElement.d.ts

@@ -3,7 +3,7 @@ import { EditableFieldInput } from '../../EditableField/EditableFieldInput';
 import { FormElementProps } from './FormElement';
 type EditableFieldInputElementProps = Omit<FormElementProps<typeof EditableFieldInput>, 'Element'> & Omit<ComponentProps<typeof EditableFieldInput>, 'onChange'> & {
     name: string;
-    description?: string;
+    description?: ReactNode;
     placeholder?: string;
     className?: string;
     children?: ReactNode;

package/dist/components/Form/elements/EditableFieldInputElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInputElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,8BAA8B,GAAG,IAAI,CACxC,gBAAgB,CAAC,OAAO,kBAAkB,CAAC,EAC3C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,yBAAyB,UAC7B,8BAA8B,4CAQtC,CAAC"}
+{"version":3,"file":"EditableFieldInputElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,8BAA8B,GAAG,IAAI,CACxC,gBAAgB,CAAC,OAAO,kBAAkB,CAAC,EAC3C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,yBAAyB,UAC7B,8BAA8B,4CAQtC,CAAC"}

package/dist/components/Form/elements/EditableFieldTextAreaElement.d.ts

@@ -3,7 +3,7 @@ import { EditableFieldTextArea } from '../../EditableField/EditableFieldTextArea
 import { FormElementProps } from './FormElement';
 type EditableFieldTextAreaElementProps = Omit<FormElementProps<typeof EditableFieldTextArea>, 'Element'> & Omit<ComponentProps<typeof EditableFieldTextArea>, 'onChange'> & {
     name: string;
-    description?: string;
+    description?: ReactNode;
     placeholder?: string;
     className?: string;
     children?: ReactNode;

package/dist/components/Form/elements/EditableFieldTextAreaElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextAreaElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,iCAAiC,GAAG,IAAI,CAC3C,gBAAgB,CAAC,OAAO,qBAAqB,CAAC,EAC9C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,4CAQzC,CAAC"}
+{"version":3,"file":"EditableFieldTextAreaElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,iCAAiC,GAAG,IAAI,CAC3C,gBAAgB,CAAC,OAAO,qBAAqB,CAAC,EAC9C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,4CAQzC,CAAC"}

package/dist/components/Form/elements/SelectElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/SelectElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,CAAC,GACzE,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,aAAa,yFASvB,mBAAmB,4CAiCrB,CAAC"}
+{"version":3,"file":"SelectElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/SelectElement.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,CAAC,GACzE,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,aAAa,yFASvB,mBAAmB,4CAgCrB,CAAC"}

package/dist/components/IDE/Code.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
+const require$$0 = require("react");
+const utils_cn = require("../../utils/cn.cjs");
+const components_Container_index = require("../Container/index.cjs");
+const components_IDE_CodeBlockClient = require("./CodeBlockClient.cjs");
+const components_IDE_CodeConditionalRenderer = require("./CodeConditionalRenderer.cjs");
+const components_IDE_CodeFormatSelector = require("./CodeFormatSelector.cjs");
+const components_IDE_ContentDeclarationFormatSelector = require("./ContentDeclarationFormatSelector.cjs");
+const components_IDE_CopyButton = require("./CopyButton.cjs");
+const components_IDE_PackageManagerSelector = require("./PackageManagerSelector.cjs");
+const Code = require$$0.forwardRef(
+  ({
+    children,
+    language,
+    isDarkMode,
+    showHeader = true,
+    showLineNumbers = true,
+    className,
+    fileName,
+    packageManager,
+    codeFormat,
+    contentDeclarationFormat,
+    ...props
+  }, ref) => {
+    const code = children.endsWith("\n") ? children.slice(0, -1) : children;
+    const hadSelectInHeader = packageManager || codeFormat || contentDeclarationFormat;
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_IDE_CodeConditionalRenderer.CodeConditionalRender,
+      {
+        packageManager,
+        codeFormat,
+        contentDeclarationFormat,
+        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+          components_Container_index.Container,
+          {
+            className: utils_cn.cn(
+              "relative text-sm leading-6",
+              showLineNumbers && "with-line-number ml-0",
+              className
+            ),
+            transparency: "lg",
+            ref,
+            ...props,
+            children: [
+              showHeader && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.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.jsxRuntimeExports.jsx("span", { className: "truncate", children: fileName ?? language }),
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                    packageManager && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_IDE_PackageManagerSelector.PackageManagerSelector, {}),
+                    codeFormat && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_IDE_CodeFormatSelector.CodeFormatSelector, {}),
+                    contentDeclarationFormat && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_IDE_ContentDeclarationFormatSelector.ContentDeclarationFormatSelector, {})
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "sticky top-28", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: utils_cn.cn([
+                      "absolute bottom-0 right-2 flex h-8 items-center",
+                      hadSelectInHeader && "h-11"
+                    ]),
+                    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_IDE_CopyButton.CopyButton, { content: code })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "grid size-full grid-cols-[0px] overflow-auto p-3", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_IDE_CodeBlockClient.CodeBlock, { lang: language, isDarkMode, children: code }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Code.displayName = "Code";
+exports.Code = Code;
+//# sourceMappingURL=Code.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.cjs","sources":["../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { 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 = forwardRef<HTMLDivElement, CodeCompProps>(\n  (\n    {\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    ref\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          ref={ref}\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-8 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);\n\nCode.displayName = 'Code';\n"],"names":["forwardRef","jsx","CodeConditionalRender","jsxs","Container","cn","Fragment","PackageManagerSelector","CodeFormatSelector","ContentDeclarationFormatSelector","CopyButton","CodeBlock"],"mappings":";;;;;;;;;;;;AAiCO,MAAM,OAAOA,WAAA;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACG,UAAA,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAEzD,UAAA,oBACJ,kBAAkB,cAAc;AAGhC,WAAAC,2BAAA,kBAAA;AAAA,MAACC,uCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAC,2BAAA,kBAAA;AAAA,UAACC,2BAAA;AAAA,UAAA;AAAA,YACC,WAAWC,SAAA;AAAA,cACT;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,YACF;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACC,GAAG;AAAA,YAEH,UAAA;AAAA,cAAA,cAEGF,2BAAA,kBAAA,KAAAG,uCAAA,EAAA,UAAA;AAAA,gBAACH,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,4KACb,UAAA;AAAA,kBAAAF,2BAAA,kBAAA,IAAC,QAAK,EAAA,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,kBACjDE,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,oBAAA,mEAAmBI,sCAAuB,wBAAA,EAAA;AAAA,oBAC1C,+DAAeC,kCAAmB,oBAAA,EAAA;AAAA,oBAClC,6EACEC,gDAAAA,kCAAiC,CAAA,CAAA;AAAA,kBAAA,EAEtC,CAAA;AAAA,gBAAA,GACF;AAAA,gBACAR,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,iBACb,UAAAA,2BAAA,kBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWI,SAAAA,GAAG;AAAA,sBACZ;AAAA,sBACA,qBAAqB;AAAA,oBAAA,CACtB;AAAA,oBAED,UAAAJ,2BAAAA,kBAAAA,IAACS,0BAAAA,YAAW,EAAA,SAAS,KAAM,CAAA;AAAA,kBAAA;AAAA,gBAAA,EAE/B,CAAA;AAAA,cAAA,GACF;AAAA,cAEFT,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,2BAAA,kBAAA,IAACU,4CAAU,MAAM,UAAU,YACxB,UAAA,KACH,CAAA,EACF,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGN;AAEA,KAAK,cAAc;;"}

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { BundledLanguage } from 'shiki';
+import { PackageManager, CodeFormat, ContentDeclarationFormat } from './CodeContext';
+export type CodeCompAttributes = {
+    fileName?: string;
+    packageManager?: PackageManager;
+    codeFormat?: CodeFormat;
+    contentDeclarationFormat?: ContentDeclarationFormat;
+};
+export declare const Code: import('react').ForwardRefExoticComponent<{
+    children: string;
+    fileName?: string;
+    language: BundledLanguage;
+    isDarkMode?: boolean;
+    showHeader?: boolean;
+    showLineNumbers?: boolean;
+} & CodeCompAttributes & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Code.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/Code.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EACV,wBAAwB,EACzB,MAAM,eAAe,CAAC;AAMvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;CACrD,CAAC;AAYF,eAAO,MAAM,IAAI;cATL,MAAM;eACL,MAAM;cACP,eAAe;iBACZ,OAAO;iBACP,OAAO;sBACF,OAAO;wGA2E1B,CAAC"}

package/dist/components/IDE/Code.mjs

@@ -0,0 +1,77 @@
+import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { CodeBlock } from "./CodeBlockClient.mjs";
+import { CodeConditionalRender } from "./CodeConditionalRenderer.mjs";
+import { CodeFormatSelector } from "./CodeFormatSelector.mjs";
+import { ContentDeclarationFormatSelector } from "./ContentDeclarationFormatSelector.mjs";
+import { CopyButton } from "./CopyButton.mjs";
+import { PackageManagerSelector } from "./PackageManagerSelector.mjs";
+const Code = forwardRef(
+  ({
+    children,
+    language,
+    isDarkMode,
+    showHeader = true,
+    showLineNumbers = true,
+    className,
+    fileName,
+    packageManager,
+    codeFormat,
+    contentDeclarationFormat,
+    ...props
+  }, ref) => {
+    const code = children.endsWith("\n") ? children.slice(0, -1) : children;
+    const hadSelectInHeader = packageManager || codeFormat || contentDeclarationFormat;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CodeConditionalRender,
+      {
+        packageManager,
+        codeFormat,
+        contentDeclarationFormat,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Container,
+          {
+            className: cn(
+              "relative text-sm leading-6",
+              showLineNumbers && "with-line-number ml-0",
+              className
+            ),
+            transparency: "lg",
+            ref,
+            ...props,
+            children: [
+              showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: fileName ?? language }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                    packageManager && /* @__PURE__ */ jsxRuntimeExports.jsx(PackageManagerSelector, {}),
+                    codeFormat && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeFormatSelector, {}),
+                    contentDeclarationFormat && /* @__PURE__ */ jsxRuntimeExports.jsx(ContentDeclarationFormatSelector, {})
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky top-28", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: cn([
+                      "absolute bottom-0 right-2 flex h-8 items-center",
+                      hadSelectInHeader && "h-11"
+                    ]),
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { content: code })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid size-full grid-cols-[0px] overflow-auto p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { lang: language, isDarkMode, children: code }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Code.displayName = "Code";
+export {
+  Code
+};
+//# sourceMappingURL=Code.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.mjs","sources":["../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { 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 = forwardRef<HTMLDivElement, CodeCompProps>(\n  (\n    {\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    ref\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          ref={ref}\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-8 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);\n\nCode.displayName = 'Code';\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;;;;;;;;AAiCO,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACG,UAAA,OAAO,SAAS,SAAS,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AAEzD,UAAA,oBACJ,kBAAkB,cAAc;AAGhC,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAC,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,YACF;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACC,GAAG;AAAA,YAEH,UAAA;AAAA,cAAA,cAEGA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,gBAACD,kCAAAA,KAAA,OAAA,EAAI,WAAU,4KACb,UAAA;AAAA,kBAAAD,kCAAA,IAAC,QAAK,EAAA,WAAU,YAAY,UAAA,YAAY,UAAS;AAAA,kBACjDC,kCAAAA,KAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,oBAAA,wDAAmB,wBAAuB,EAAA;AAAA,oBAC1C,oDAAe,oBAAmB,EAAA;AAAA,oBAClC,kEACE,kCAAiC,CAAA,CAAA;AAAA,kBAAA,EAEtC,CAAA;AAAA,gBAAA,GACF;AAAA,gBACAD,kCAAAA,IAAC,OAAI,EAAA,WAAU,iBACb,UAAAA,kCAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,GAAG;AAAA,sBACZ;AAAA,sBACA,qBAAqB;AAAA,oBAAA,CACtB;AAAA,oBAED,UAAAA,kCAAAA,IAAC,YAAW,EAAA,SAAS,KAAM,CAAA;AAAA,kBAAA;AAAA,gBAAA,EAE/B,CAAA;AAAA,cAAA,GACF;AAAA,cAEFA,kCAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,kCAAA,IAAC,aAAU,MAAM,UAAU,YACxB,UAAA,KACH,CAAA,EACF,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGN;AAEA,KAAK,cAAc;"}