@intlayer/design-system 3.5.5 → 3.5.6

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/core';\nimport Markdown from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { H1, H2, H3 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/CodeRender';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n}) => (\n  <Markdown\n    options={{\n      overrides: {\n        h1: {\n          component: (props) => <H1 isClickable={true} {...props} />,\n        },\n        h2: {\n          component: (props) => <H2 isClickable={true} {...props} />,\n        },\n        h3: {\n          component: (props) => <H3 isClickable={true} {...props} />,\n        },\n        code: {\n          component: (props) =>\n            typeof props.className === 'undefined' ? (\n              <strong className=\"bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                {props.children}\n              </strong>\n            ) : (\n              <Container>\n                <Code\n                  isDarkMode={isDarkMode}\n                  language={props.className.replace('lang-', '')}\n                  {...props}\n                />\n              </Container>\n            ),\n        },\n        blockquote: ({ className, ...props }) => (\n          <blockquote\n            className={cn(\n              'border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5',\n              className\n            )}\n            {...props}\n          />\n        ),\n        ul: ({ className, ...props }) => (\n          <ul\n            className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n            {...props}\n          />\n        ),\n        ol: ({ className, ...props }) => (\n          <ol\n            className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n            {...props}\n          />\n        ),\n        img: ({ className, ...props }) => (\n          // eslint-disable-next-line jsx-a11y/alt-text\n          <img\n            {...props}\n            loading=\"lazy\"\n            className={cn('max-w-full rounded-md', className)}\n            src={`${props.src}?raw=true`}\n          />\n        ),\n        a: (props) => (\n          <Link\n            color=\"neutral\"\n            isExternalLink={props.href?.startsWith('http')}\n            underlined={true}\n            locale={locale}\n            {...props}\n          />\n        ),\n        pre: (props) => props.children,\n      },\n      wrapper: ({ className, ...props }) => (\n        <>\n          <SectionScroller />\n          <div\n            className={cn(\n              'text-text dark:text-text-dark flex flex-col gap-6 p-10',\n              className\n            )}\n            {...props}\n          />\n        </>\n      ),\n    }}\n  >\n    {children ?? ''}\n  </Markdown>\n);\n"],"names":["jsx","H1","H2","H3","Container","Code","cn","Link","jsxs","Fragment","SectionScroller"],"mappings":";;;;;;;;;;;AAkBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,IAAI;AAAA,UACF,WAAW,CAAC,UAAUA,iDAACC,yBAAAA,MAAG,aAAa,MAAO,GAAG,MAAO,CAAA;AAAA,QAC1D;AAAA,QACA,IAAI;AAAA,UACF,WAAW,CAAC,UAAUD,iDAACE,yBAAAA,MAAG,aAAa,MAAO,GAAG,MAAO,CAAA;AAAA,QAC1D;AAAA,QACA,IAAI;AAAA,UACF,WAAW,CAAC,UAAUF,iDAACG,yBAAAA,MAAG,aAAa,MAAO,GAAG,MAAO,CAAA;AAAA,QAC1D;AAAA,QACA,MAAM;AAAA,UACJ,WAAW,CAAC,UACV,OAAO,MAAM,cAAc,cACxBH,2BAAAA,kBAAAA,IAAA,UAAA,EAAO,WAAU,qGACf,UAAA,MAAM,SACT,CAAA,qDAECI,2BACC,WAAA,EAAA,UAAAJ,2BAAA,kBAAA;AAAA,YAACK,0BAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,UAAU,MAAM,UAAU,QAAQ,SAAS,EAAE;AAAA,cAC5C,GAAG;AAAA,YAAA;AAAA,UAAA,EAER,CAAA;AAAA,QAEN;AAAA,QACA,YAAY,CAAC,EAAE,WAAW,GAAG,MAC3B,MAAAL,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWM,SAAA;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAN,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWM,SAAAA,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAN,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWM,SAAAA,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM;AAAA;AAAA,UAE1BN,2BAAA,kBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,SAAQ;AAAA,cACR,WAAWM,SAAAA,GAAG,yBAAyB,SAAS;AAAA,cAChD,KAAK,GAAG,MAAM,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA;AAAA,QAGrB,GAAG,CAAC,UACFN,2BAAA,kBAAA;AAAA,UAACO,qBAAA;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,gBAAgB,MAAM,MAAM,WAAW,MAAM;AAAA,YAC7C,YAAY;AAAA,YACZ;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,UAAU,MAAM;AAAA,MACxB;AAAA,MACA,SAAS,CAAC,EAAE,WAAW,GAAG,YAEtBC,kDAAAC,WAAAA,kBAAAA,UAAA,EAAA,UAAA;AAAA,QAAAT,2BAAA,kBAAA,IAACU,mCAAgB,iBAAA,EAAA;AAAA,QACjBV,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWM,SAAA;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EACF,CAAA;AAAA,IAEJ;AAAA,IAEC,UAAY,YAAA;AAAA,EAAA;AACf;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import { Locales } from '@intlayer/core';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n  overrides?: MarkdownToJSX.Overrides;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  overrides,\n}) => (\n  <CodeProvider>\n    <Markdown\n      options={{\n        overrides: {\n          h1: (props) => <H1 isClickable={true} {...props} />,\n          h2: (props) => <H2 isClickable={true} {...props} />,\n          h3: (props) => <H3 isClickable={true} {...props} />,\n\n          code: (props) =>\n            typeof props.className === 'undefined' ? (\n              <strong className=\"bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                {props.children}\n              </strong>\n            ) : (\n              <Code\n                isDarkMode={isDarkMode}\n                language={props.className.replace('lang-', '')}\n                {...props}\n              />\n            ),\n\n          blockquote: ({ className, ...props }) => (\n            <blockquote\n              className={cn(\n                'border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                className\n              )}\n              {...props}\n            />\n          ),\n          ul: ({ className, ...props }) => (\n            <ul\n              className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n              {...props}\n            />\n          ),\n          ol: ({ className, ...props }) => (\n            <ol\n              className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n              {...props}\n            />\n          ),\n          li: ({ className, ...props }) => (\n            <li className={cn('list-disc', className)} {...props} />\n          ),\n          img: ({ className, ...props }) => (\n            // eslint-disable-next-line jsx-a11y/alt-text\n            <img\n              {...props}\n              loading=\"lazy\"\n              className={cn('max-w-full rounded-md', className)}\n              src={`${props.src}?raw=true`}\n            />\n          ),\n          a: (props) => (\n            <Link\n              color=\"neutral\"\n              isExternalLink={props.href?.startsWith('http')}\n              underlined={true}\n              locale={locale}\n              {...props}\n            />\n          ),\n          pre: (props) => props.children,\n          ...overrides,\n        },\n        wrapper: ({ className, ...props }) => (\n          <>\n            <SectionScroller />\n            <div\n              className={cn(\n                'text-text dark:text-text-dark flex flex-col gap-6 p-10',\n                className\n              )}\n              {...props}\n            />\n          </>\n        ),\n      }}\n    >\n      {children ?? ''}\n    </Markdown>\n  </CodeProvider>\n);\n"],"names":["CodeProvider","jsx","H1","H2","H3","Code","cn","Link","jsxs","Fragment","SectionScroller"],"mappings":";;;;;;;;;;AAiBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,uDACGA,2BAAAA,cACC,EAAA,UAAAC,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,IAAI,CAAC,UAAUA,iDAACC,yBAAAA,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QACjD,IAAI,CAAC,UAAUD,iDAACE,yBAAAA,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QACjD,IAAI,CAAC,UAAUF,iDAACG,yBAAAA,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QAEjD,MAAM,CAAC,UACL,OAAO,MAAM,cAAc,cACzBH,2BAAA,kBAAA,IAAC,UAAO,EAAA,WAAU,qGACf,UAAA,MAAM,SACT,CAAA,IAEAA,2BAAA,kBAAA;AAAA,UAACI,oBAAA;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU,MAAM,UAAU,QAAQ,SAAS,EAAE;AAAA,YAC5C,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAGJ,YAAY,CAAC,EAAE,WAAW,GAAG,MAC3B,MAAAJ,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWK,SAAA;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAL,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWK,SAAAA,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAL,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWK,SAAAA,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,MACxBL,2BAAAA,kBAAAA,IAAA,MAAA,EAAG,WAAWK,SAAG,GAAA,aAAa,SAAS,GAAI,GAAG,MAAO,CAAA;AAAA,QAExD,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM;AAAA;AAAA,UAE1BL,2BAAA,kBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,SAAQ;AAAA,cACR,WAAWK,SAAAA,GAAG,yBAAyB,SAAS;AAAA,cAChD,KAAK,GAAG,MAAM,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA;AAAA,QAGrB,GAAG,CAAC,UACFL,2BAAA,kBAAA;AAAA,UAACM,qBAAA;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,gBAAgB,MAAM,MAAM,WAAW,MAAM;AAAA,YAC7C,YAAY;AAAA,YACZ;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,UAAU,MAAM;AAAA,QACtB,GAAG;AAAA,MACL;AAAA,MACA,SAAS,CAAC,EAAE,WAAW,GAAG,YAEtBC,kDAAAC,WAAAA,kBAAAA,UAAA,EAAA,UAAA;AAAA,QAAAR,2BAAA,kBAAA,IAACS,mCAAgB,iBAAA,EAAA;AAAA,QACjBT,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWK,SAAA;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EACF,CAAA;AAAA,IAEJ;AAAA,IAEC,UAAY,YAAA;AAAA,EAAA;AACf,EACF,CAAA;;"}

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

@@ -1,9 +1,11 @@
 import { Locales } from '@intlayer/core';
+import { MarkdownToJSX } from 'markdown-to-jsx';
 import { FC } from 'react';
 type MarkdownRendererProps = {
     children: string;
     isDarkMode?: boolean;
     locale?: Locales;
+    overrides?: MarkdownToJSX.Overrides;
 };
 export declare const MarkdownRenderer: FC<MarkdownRendererProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MarkDownRender/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA0FtD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MarkDownRender/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAyFtD,CAAC"}

package/dist/components/MarkDownRender/index.mjs

@@ -1,40 +1,32 @@
-"use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
 import Markdown from "markdown-to-jsx";
 import { cn } from "../../utils/cn.mjs";
-import { Container } from "../Container/index.mjs";
 import { H1, H2, H3 } from "../Headers/index.mjs";
 import { SectionScroller } from "../Headers/SectionScroller.mjs";
-import { Code } from "../IDE/CodeRender.mjs";
+import { Code } from "../IDE/Code.mjs";
+import { CodeProvider } from "../IDE/CodeContext.mjs";
 import { Link } from "../Link/Link.mjs";
 const MarkdownRenderer = ({
   children,
   isDarkMode,
-  locale
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  locale,
+  overrides
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(CodeProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
   Markdown,
   {
     options: {
       overrides: {
-        h1: {
-          component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H1, { isClickable: true, ...props })
-        },
-        h2: {
-          component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H2, { isClickable: true, ...props })
-        },
-        h3: {
-          component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H3, { isClickable: true, ...props })
-        },
-        code: {
-          component: (props) => typeof props.className === "undefined" ? /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: props.children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Code,
-            {
-              isDarkMode,
-              language: props.className.replace("lang-", ""),
-              ...props
-            }
-          ) })
-        },
+        h1: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H1, { isClickable: true, ...props }),
+        h2: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H2, { isClickable: true, ...props }),
+        h3: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H3, { isClickable: true, ...props }),
+        code: (props) => typeof props.className === "undefined" ? /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: props.children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Code,
+          {
+            isDarkMode,
+            language: props.className.replace("lang-", ""),
+            ...props
+          }
+        ),
         blockquote: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "blockquote",
           {
@@ -59,6 +51,7 @@ const MarkdownRenderer = ({
             ...props
           }
         ),
+        li: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: cn("list-disc", className), ...props }),
         img: ({ className, ...props }) => (
           // eslint-disable-next-line jsx-a11y/alt-text
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81,7 +74,8 @@ const MarkdownRenderer = ({
             ...props
           }
         ),
-        pre: (props) => props.children
+        pre: (props) => props.children,
+        ...overrides
       },
       wrapper: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SectionScroller, {}),
@@ -99,7 +93,7 @@ const MarkdownRenderer = ({
     },
     children: children ?? ""
   }
-);
+) });
 export {
   MarkdownRenderer
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/core';\nimport Markdown from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { H1, H2, H3 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/CodeRender';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n}) => (\n  <Markdown\n    options={{\n      overrides: {\n        h1: {\n          component: (props) => <H1 isClickable={true} {...props} />,\n        },\n        h2: {\n          component: (props) => <H2 isClickable={true} {...props} />,\n        },\n        h3: {\n          component: (props) => <H3 isClickable={true} {...props} />,\n        },\n        code: {\n          component: (props) =>\n            typeof props.className === 'undefined' ? (\n              <strong className=\"bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                {props.children}\n              </strong>\n            ) : (\n              <Container>\n                <Code\n                  isDarkMode={isDarkMode}\n                  language={props.className.replace('lang-', '')}\n                  {...props}\n                />\n              </Container>\n            ),\n        },\n        blockquote: ({ className, ...props }) => (\n          <blockquote\n            className={cn(\n              'border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5',\n              className\n            )}\n            {...props}\n          />\n        ),\n        ul: ({ className, ...props }) => (\n          <ul\n            className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n            {...props}\n          />\n        ),\n        ol: ({ className, ...props }) => (\n          <ol\n            className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n            {...props}\n          />\n        ),\n        img: ({ className, ...props }) => (\n          // eslint-disable-next-line jsx-a11y/alt-text\n          <img\n            {...props}\n            loading=\"lazy\"\n            className={cn('max-w-full rounded-md', className)}\n            src={`${props.src}?raw=true`}\n          />\n        ),\n        a: (props) => (\n          <Link\n            color=\"neutral\"\n            isExternalLink={props.href?.startsWith('http')}\n            underlined={true}\n            locale={locale}\n            {...props}\n          />\n        ),\n        pre: (props) => props.children,\n      },\n      wrapper: ({ className, ...props }) => (\n        <>\n          <SectionScroller />\n          <div\n            className={cn(\n              'text-text dark:text-text-dark flex flex-col gap-6 p-10',\n              className\n            )}\n            {...props}\n          />\n        </>\n      ),\n    }}\n  >\n    {children ?? ''}\n  </Markdown>\n);\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;;;;;;;AAkBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,IAAI;AAAA,UACF,WAAW,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,MAAO,CAAA;AAAA,QAC1D;AAAA,QACA,IAAI;AAAA,UACF,WAAW,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,MAAO,CAAA;AAAA,QAC1D;AAAA,QACA,IAAI;AAAA,UACF,WAAW,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,MAAO,CAAA;AAAA,QAC1D;AAAA,QACA,MAAM;AAAA,UACJ,WAAW,CAAC,UACV,OAAO,MAAM,cAAc,cACxBA,kCAAAA,IAAA,UAAA,EAAO,WAAU,qGACf,UAAA,MAAM,SACT,CAAA,0CAEC,WACC,EAAA,UAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,UAAU,MAAM,UAAU,QAAQ,SAAS,EAAE;AAAA,cAC5C,GAAG;AAAA,YAAA;AAAA,UAAA,EAER,CAAA;AAAA,QAEN;AAAA,QACA,YAAY,CAAC,EAAE,WAAW,GAAG,MAC3B,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM;AAAA;AAAA,UAE1BA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,SAAQ;AAAA,cACR,WAAW,GAAG,yBAAyB,SAAS;AAAA,cAChD,KAAK,GAAG,MAAM,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA;AAAA,QAGrB,GAAG,CAAC,UACFA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,gBAAgB,MAAM,MAAM,WAAW,MAAM;AAAA,YAC7C,YAAY;AAAA,YACZ;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,UAAU,MAAM;AAAA,MACxB;AAAA,MACA,SAAS,CAAC,EAAE,WAAW,GAAG,YAEtBC,uCAAAC,kBAAAA,UAAA,EAAA,UAAA;AAAA,QAAAF,kCAAA,IAAC,iBAAgB,EAAA;AAAA,QACjBA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EACF,CAAA;AAAA,IAEJ;AAAA,IAEC,UAAY,YAAA;AAAA,EAAA;AACf;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import { Locales } from '@intlayer/core';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n  overrides?: MarkdownToJSX.Overrides;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  overrides,\n}) => (\n  <CodeProvider>\n    <Markdown\n      options={{\n        overrides: {\n          h1: (props) => <H1 isClickable={true} {...props} />,\n          h2: (props) => <H2 isClickable={true} {...props} />,\n          h3: (props) => <H3 isClickable={true} {...props} />,\n\n          code: (props) =>\n            typeof props.className === 'undefined' ? (\n              <strong className=\"bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                {props.children}\n              </strong>\n            ) : (\n              <Code\n                isDarkMode={isDarkMode}\n                language={props.className.replace('lang-', '')}\n                {...props}\n              />\n            ),\n\n          blockquote: ({ className, ...props }) => (\n            <blockquote\n              className={cn(\n                'border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                className\n              )}\n              {...props}\n            />\n          ),\n          ul: ({ className, ...props }) => (\n            <ul\n              className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n              {...props}\n            />\n          ),\n          ol: ({ className, ...props }) => (\n            <ol\n              className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n              {...props}\n            />\n          ),\n          li: ({ className, ...props }) => (\n            <li className={cn('list-disc', className)} {...props} />\n          ),\n          img: ({ className, ...props }) => (\n            // eslint-disable-next-line jsx-a11y/alt-text\n            <img\n              {...props}\n              loading=\"lazy\"\n              className={cn('max-w-full rounded-md', className)}\n              src={`${props.src}?raw=true`}\n            />\n          ),\n          a: (props) => (\n            <Link\n              color=\"neutral\"\n              isExternalLink={props.href?.startsWith('http')}\n              underlined={true}\n              locale={locale}\n              {...props}\n            />\n          ),\n          pre: (props) => props.children,\n          ...overrides,\n        },\n        wrapper: ({ className, ...props }) => (\n          <>\n            <SectionScroller />\n            <div\n              className={cn(\n                'text-text dark:text-text-dark flex flex-col gap-6 p-10',\n                className\n              )}\n              {...props}\n            />\n          </>\n        ),\n      }}\n    >\n      {children ?? ''}\n    </Markdown>\n  </CodeProvider>\n);\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;;;;;;AAiBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,4CACG,cACC,EAAA,UAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,IAAI,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QACjD,IAAI,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QACjD,IAAI,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QAEjD,MAAM,CAAC,UACL,OAAO,MAAM,cAAc,cACzBA,kCAAA,IAAC,UAAO,EAAA,WAAU,qGACf,UAAA,MAAM,SACT,CAAA,IAEAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU,MAAM,UAAU,QAAQ,SAAS,EAAE;AAAA,YAC5C,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAGJ,YAAY,CAAC,EAAE,WAAW,GAAG,MAC3B,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,MACxBA,kCAAAA,IAAA,MAAA,EAAG,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,MAAO,CAAA;AAAA,QAExD,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM;AAAA;AAAA,UAE1BA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,SAAQ;AAAA,cACR,WAAW,GAAG,yBAAyB,SAAS;AAAA,cAChD,KAAK,GAAG,MAAM,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA;AAAA,QAGrB,GAAG,CAAC,UACFA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,gBAAgB,MAAM,MAAM,WAAW,MAAM;AAAA,YAC7C,YAAY;AAAA,YACZ;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,UAAU,MAAM;AAAA,QACtB,GAAG;AAAA,MACL;AAAA,MACA,SAAS,CAAC,EAAE,WAAW,GAAG,YAEtBC,uCAAAC,kBAAAA,UAAA,EAAA,UAAA;AAAA,QAAAF,kCAAA,IAAC,iBAAgB,EAAA;AAAA,QACjBA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EACF,CAAA;AAAA,IAEJ;AAAA,IAEC,UAAY,YAAA;AAAA,EAAA;AACf,EACF,CAAA;"}

package/dist/components/Modal/Modal.cjs

@@ -44,7 +44,7 @@ const Modal = ({
   onClose,
   hasCloseButton = false,
   title,
-  size = "unset",
+  size = "md",
   ...props
 }) => {
   const containerElement = hooks_useGetElementOrWindow.useGetElementOrWindow(container);
@@ -64,7 +64,7 @@ const Modal = ({
         transition: { duration: 0.1 },
         onClick: (e) => {
           e.stopPropagation();
-          onClose();
+          onClose?.();
         },
         "aria-hidden": !isOpen,
         children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
@@ -98,7 +98,7 @@ const Modal = ({
                         className: "right-2 top-2 ml-auto cursor-pointer",
                         onClick: (e) => {
                           e.stopPropagation();
-                          onClose();
+                          onClose?.();
                         }
                       }
                     )

package/dist/components/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<ContainerProps, 'transparency'>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'max-h-[95vh] w-[95vw] max-w-3xl',\n        unset: 'max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'unset',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({\n          variant: size,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["cva","motion","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","cn","jsxs","H3","X"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,gBAAgBA,uBAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAIA,MAAM,cAAcC,aAAAA,OAAO,OAAOC,oCAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmBC,kDAAsB,SAAS;AAExDC,gCAAA,kBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASC,iDAAAC,WAAAA,kBAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAAC,SAAA;AAAA,IACLF,2BAAA,kBAAA;AAAA,MAACJ,aAAAA,OAAO;AAAA,MAAP;AAAA,QACC,WAAWO,SAAA;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACV,kBAAA;AAAA,QACV;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAC,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW,cAAc;AAAA,cACvB,SAAS;AAAA,YAAA,CACV;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,2BAAA,kBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,SAAA;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEH,2BAAA,kBAAA,IAAAK,6BAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCL,2BAAA,kBAAA;AAAA,sBAACM,YAAA;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACV,kCAAA;AAAA,wBAAA;AAAA,sBACV;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCN,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,WAAU,6DACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<ContainerProps, 'transparency'>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'max-h-[95vh] w-[95vw] max-w-3xl',\n        unset: 'max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({\n          variant: size,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["cva","motion","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","cn","jsxs","H3","X"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,gBAAgBA,uBAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAIA,MAAM,cAAcC,aAAAA,OAAO,OAAOC,oCAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmBC,kDAAsB,SAAS;AAExDC,gCAAA,kBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASC,iDAAAC,WAAAA,kBAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAAC,SAAA;AAAA,IACLF,2BAAA,kBAAA;AAAA,MAACJ,aAAAA,OAAO;AAAA,MAAP;AAAA,QACC,WAAWO,SAAA;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACR,oBAAA;AAAA,QACZ;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAC,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW,cAAc;AAAA,cACvB,SAAS;AAAA,YAAA,CACV;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,2BAAA,kBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,SAAA;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEH,2BAAA,kBAAA,IAAAK,6BAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCL,2BAAA,kBAAA;AAAA,sBAACM,YAAA;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACR,oCAAA;AAAA,wBAAA;AAAA,sBACZ;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCN,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,WAAU,6DACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;"}

package/dist/components/Modal/Modal.d.ts

@@ -3,7 +3,7 @@ import { ContainerProps } from '../Container';
 type ModalProps = {
     children: React.ReactNode;
     isOpen: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     container?: HTMLElement;
     disableScroll?: boolean;
     hasCloseButton?: boolean;

package/dist/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAoBzC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAIhD;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAkFhC,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAoBzC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAIhD;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAkFhC,CAAC"}

package/dist/components/Modal/Modal.mjs

@@ -42,7 +42,7 @@ const Modal = ({
   onClose,
   hasCloseButton = false,
   title,
-  size = "unset",
+  size = "md",
   ...props
 }) => {
   const containerElement = useGetElementOrWindow(container);
@@ -62,7 +62,7 @@ const Modal = ({
         transition: { duration: 0.1 },
         onClick: (e) => {
           e.stopPropagation();
-          onClose();
+          onClose?.();
         },
         "aria-hidden": !isOpen,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -96,7 +96,7 @@ const Modal = ({
                         className: "right-2 top-2 ml-auto cursor-pointer",
                         onClick: (e) => {
                           e.stopPropagation();
-                          onClose();
+                          onClose?.();
                         }
                       }
                     )

package/dist/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<ContainerProps, 'transparency'>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'max-h-[95vh] w-[95vw] max-w-3xl',\n        unset: 'max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'unset',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({\n          variant: size,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["jsx","Fragment","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAIA,MAAM,cAAc,OAAO,OAAO,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASA,sCAAAC,kBAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACLD,kCAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACV,kBAAA;AAAA,QACV;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW,cAAc;AAAA,cACvB,SAAS;AAAA,YAAA,CACV;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEF,kCAAA,IAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCA,kCAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACV,kCAAA;AAAA,wBAAA;AAAA,sBACV;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCA,kCAAAA,IAAA,OAAA,EAAI,WAAU,6DACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;"}
+{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<ContainerProps, 'transparency'>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'max-h-[95vh] w-[95vw] max-w-3xl',\n        unset: 'max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({\n          variant: size,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["jsx","Fragment","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAIA,MAAM,cAAc,OAAO,OAAO,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASA,sCAAAC,kBAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACLD,kCAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACR,oBAAA;AAAA,QACZ;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW,cAAc;AAAA,cACvB,SAAS;AAAA,YAAA,CACV;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEF,kCAAA,IAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCA,kCAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACR,oCAAA;AAAA,wBAAA;AAAA,sBACZ;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCA,kCAAAA,IAAA,OAAA,EAAI,WAAU,6DACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/components/SwitchSelector/index.cjs

@@ -86,6 +86,10 @@ const SwitchSelector = ({
     setValue(newValue);
     onChange?.(newValue);
   };
+  require$$0.useEffect(() => {
+    if (value === void 0) return;
+    setValue(value);
+  }, [value]);
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     "div",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useRef,\n  type ReactNode,\n  type HTMLAttributes,\n  useState,\n  useEffect,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["cva","useState","useRef","useItemSelector","useEffect","jsx","jsxs","value","createElement","cn"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAU,KAAK,SAAS,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACtC,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE,KAAK,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IACtC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,qBAAqB;;8EAsB1B,CAAC;AAEF,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAuBF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,uEAQ7B,mBAAmB,CAAC,CAAC,CAAC,4CAiExB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACtC,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE,KAAK,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IACtC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,qBAAqB;;8EAsB1B,CAAC;AAEF,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAuBF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,uEAQ7B,mBAAmB,CAAC,CAAC,CAAC,4CAsExB,CAAC"}

package/dist/components/SwitchSelector/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
-import { useState, useRef, createElement } from "react";
+import { useState, useRef, useEffect, createElement } from "react";
 import { cva } from "class-variance-authority";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
@@ -84,6 +84,10 @@ const SwitchSelector = ({
     setValue(newValue);
     onChange?.(newValue);
   };
+  useEffect(() => {
+    if (value === void 0) return;
+    setValue(value);
+  }, [value]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs","value"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IAER;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,EACtC;AACM,QAAA,cAAc,OAA4B,EAAE;AAC5C,QAAA,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4B,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,EACrB;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,gBACD,CAAA;AAAA,cACH;AAAA,cACA,KAAK,aAAaA,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,cAAA;AAAA,YAC/B;AAAA,YAEC;AAAA,UACH;AAAA,QAAA,CAEH;AAAA,QACA,2BACCF,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cACD,CAAA;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,EAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useRef,\n  type ReactNode,\n  type HTMLAttributes,\n  useState,\n  useEffect,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs","value"],"mappings":"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"}

package/dist/components/index.cjs

@@ -12,8 +12,9 @@ const components_DictionaryEditor_DictionaryEditor = require("./DictionaryEditor
 const components_DictionaryFieldEditor_DictionariesSelector_DictionariesSelector = require("./DictionaryFieldEditor/DictionariesSelector/DictionariesSelector.cjs");
 const components_DictionaryFieldEditor_DictionaryCreationForm_DictionaryCreationForm = require("./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.cjs");
 const components_DictionaryFieldEditor_DictionaryFieldEditor = require("./DictionaryFieldEditor/DictionaryFieldEditor.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcher = require("./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext = require("./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.cjs");
 const components_DropDown_index = require("./DropDown/index.cjs");
-const components_LocaleSwitcherDropDown_LocaleSwitcher = require("./LocaleSwitcherDropDown/LocaleSwitcher.cjs");
 const components_ThemeSwitcherDropDown_DesktopThemeSwitcher = require("./ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs");
 const components_ThemeSwitcherDropDown_MobileThemeSwitcher = require("./ThemeSwitcherDropDown/MobileThemeSwitcher.cjs");
 const components_ThemeSwitcherDropDown_types = require("./ThemeSwitcherDropDown/types.cjs");
@@ -24,7 +25,7 @@ const components_Navbar_index = require("./Navbar/index.cjs");
 const components_ProfileDropDown_index = require("./ProfileDropDown/index.cjs");
 const components_Avatar_index = require("./Avatar/index.cjs");
 const components_Logo_index = require("./Logo/index.cjs");
-const components_IDE_CodeRender = require("./IDE/CodeRender.cjs");
+const components_IDE_Code = require("./IDE/Code.cjs");
 const components_IDE_IDE = require("./IDE/IDE.cjs");
 const components_IDE_FileList = require("./IDE/FileList.cjs");
 const components_Popover_index = require("./Popover/index.cjs");
@@ -75,6 +76,10 @@ const components_EditableField_EditableFieldInput = require("./EditableField/Edi
 const components_EditableField_EditableFieldTextArea = require("./EditableField/EditableFieldTextArea.cjs");
 const components_Tag_index = require("./Tag/index.cjs");
 const components_Accordion_Accordion = require("./Accordion/Accordion.cjs");
+const components_LocaleSwitcherDropDown_LocaleSwitcher = require("./LocaleSwitcherDropDown/LocaleSwitcher.cjs");
+const components_LocaleSwitcherContentDropDown_LocaleSwitcherContent = require("./LocaleSwitcherContentDropDown/LocaleSwitcherContent.cjs");
+const components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext = require("./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.cjs");
+const components_ClickOutsideDiv_index = require("./ClickOutsideDiv/index.cjs");
 const utils_dictionary = require("../utils/dictionary.cjs");
 exports.MaxHeightSmoother = components_MaxHeightSmoother_index.MaxHeightSmoother;
 exports.MaxWidthSmoother = components_MaxWidthSmoother_index.MaxWidthSmoother;
@@ -88,8 +93,10 @@ exports.DictionaryEditor = components_DictionaryEditor_DictionaryEditor.Dictiona
 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;
 exports.DropDown = components_DropDown_index.DropDown;
-exports.LocaleSwitcher = components_LocaleSwitcherDropDown_LocaleSwitcher.LocaleSwitcher;
 exports.DesktopThemeSwitcher = components_ThemeSwitcherDropDown_DesktopThemeSwitcher.DesktopThemeSwitcher;
 exports.MobileThemeSwitcher = components_ThemeSwitcherDropDown_MobileThemeSwitcher.MobileThemeSwitcher;
 exports.Modes = components_ThemeSwitcherDropDown_types.Modes;
@@ -100,7 +107,7 @@ exports.Navbar = components_Navbar_index.Navbar;
 exports.ProfileDropDown = components_ProfileDropDown_index.ProfileDropDown;
 exports.Avatar = components_Avatar_index.Avatar;
 exports.Logo = components_Logo_index.Logo;
-exports.Code = components_IDE_CodeRender.Code;
+exports.Code = components_IDE_Code.Code;
 exports.IDE = components_IDE_IDE.IDE;
 exports.FileList = components_IDE_FileList.FileList;
 exports.Popover = components_Popover_index.Popover;
@@ -173,6 +180,11 @@ exports.EditableFieldInput = components_EditableField_EditableFieldInput.Editabl
 exports.EditableFieldTextArea = components_EditableField_EditableFieldTextArea.EditableFieldTextArea;
 exports.Tag = components_Tag_index.Tag;
 exports.Accordion = components_Accordion_Accordion.Accordion;
+exports.LocaleSwitcher = components_LocaleSwitcherDropDown_LocaleSwitcher.LocaleSwitcher;
+exports.LocaleSwitcherContent = components_LocaleSwitcherContentDropDown_LocaleSwitcherContent.LocaleSwitcherContent;
+exports.LocaleSwitcherContentProvider = components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext.LocaleSwitcherContentProvider;
+exports.useLocaleSwitcherContent = components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext.useLocaleSwitcherContent;
+exports.ClickOutsideDiv = components_ClickOutsideDiv_index.ClickOutsideDiv;
 exports.editDictionaryByKeyPath = utils_dictionary.editDictionaryByKeyPath;
 exports.getDictionaryValueByKeyPath = utils_dictionary.getDictionaryValueByKeyPath;
 exports.renameDictionaryValueByKeyPath = utils_dictionary.renameDictionaryValueByKeyPath;

package/dist/components/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/index.d.ts

@@ -6,7 +6,6 @@ export * from './ContentSelector';
 export * from './DictionaryEditor';
 export * from './DictionaryFieldEditor';
 export * from './DropDown';
-export * from './LocaleSwitcherDropDown';
 export * from './ThemeSwitcherDropDown';
 export * from './Button';
 export * from './Container';
@@ -41,4 +40,7 @@ export * from './CopyToClipboard';
 export * from './EditableField';
 export * from './Tag';
 export * from './Accordion';
+export * from './LocaleSwitcherDropDown';
+export * from './LocaleSwitcherContentDropDown';
+export * from './ClickOutsideDiv';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mBAAmB,CAAC"}

package/dist/components/index.mjs

@@ -10,8 +10,9 @@ import { DictionaryEditor } from "./DictionaryEditor/DictionaryEditor.mjs";
 import { DictionariesSelector } from "./DictionaryFieldEditor/DictionariesSelector/DictionariesSelector.mjs";
 import { DictionaryCreationForm } from "./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs";
 import { DictionaryFieldEditor } from "./DictionaryFieldEditor/DictionaryFieldEditor.mjs";
+import { VersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs";
+import { VersionSwitcherProvider, useVersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs";
 import { DropDown } from "./DropDown/index.mjs";
-import { LocaleSwitcher } from "./LocaleSwitcherDropDown/LocaleSwitcher.mjs";
 import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
 import { Modes } from "./ThemeSwitcherDropDown/types.mjs";
@@ -22,7 +23,7 @@ import { Navbar } from "./Navbar/index.mjs";
 import { ProfileDropDown } from "./ProfileDropDown/index.mjs";
 import { Avatar } from "./Avatar/index.mjs";
 import { Logo } from "./Logo/index.mjs";
-import { Code } from "./IDE/CodeRender.mjs";
+import { Code } from "./IDE/Code.mjs";
 import { IDE } from "./IDE/IDE.mjs";
 import { FileList } from "./IDE/FileList.mjs";
 import { Popover } from "./Popover/index.mjs";
@@ -73,6 +74,10 @@ import { EditableFieldInput } from "./EditableField/EditableFieldInput.mjs";
 import { EditableFieldTextArea } from "./EditableField/EditableFieldTextArea.mjs";
 import { Tag } from "./Tag/index.mjs";
 import { Accordion } from "./Accordion/Accordion.mjs";
+import { LocaleSwitcher } from "./LocaleSwitcherDropDown/LocaleSwitcher.mjs";
+import { LocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
+import { LocaleSwitcherContentProvider, useLocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
+import { ClickOutsideDiv } from "./ClickOutsideDiv/index.mjs";
 import { editDictionaryByKeyPath, getDictionaryValueByKeyPath, renameDictionaryValueByKeyPath } from "../utils/dictionary.mjs";
 export {
   Accordion,
@@ -85,6 +90,7 @@ export {
   Button,
   ChangePasswordForm,
   Checkbox,
+  ClickOutsideDiv,
   Code,
   Command,
   CommandRoot,
@@ -121,6 +127,8 @@ export {
   Link,
   Loader,
   LocaleSwitcher,
+  LocaleSwitcherContent,
+  LocaleSwitcherContentProvider,
   Logo,
   MarkdownRenderer,
   MaxHeightSmoother,
@@ -153,6 +161,8 @@ export {
   ToastTitle,
   ToastViewport,
   Toaster,
+  VersionSwitcher,
+  VersionSwitcherProvider,
   WithResizer,
   badgeVariants,
   checkIsExternalLink,
@@ -169,11 +179,13 @@ export {
   useEditionPanelStore,
   useForm,
   useFormField,
+  useLocaleSwitcherContent,
   useResetPasswordSchema,
   useRightDrawerStore,
   useSignInSchema,
   useSignUpSchema,
   useToast,
-  useUser
+  useUser,
+  useVersionSwitcher
 };
 //# sourceMappingURL=index.mjs.map

package/dist/components/index.mjs.map

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