@intlayer/design-system 5.1.4 → 5.1.6

package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LocaleSwitcher.mjs","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config/client';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { useCallback, useMemo, useRef, useState, type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport localeSwitcherContent from './localeSwitcher.content';\n\nexport type LocaleSwitcherProps = {\n  locale?: Locales;\n  localeList: Locales[];\n  availableLocales?: Locales[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locales) => void;\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n  locale: Locales;\n  englishName: string;\n  currentLocaleName: string;\n  ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n  panelProps,\n}) => {\n  let localeName = 'Select a locale';\n  const { switchTo, searchInput, localeSwitcherLabel, languageListLabel } =\n    useDictionary(localeSwitcherContent);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n    () =>\n      localeList.map((localeEl) => {\n        const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n        const currentLocaleName = getLocaleName(localeEl, locale);\n        const ownLocaleName = getLocaleName(localeEl);\n        return {\n          locale: localeEl,\n          englishName,\n          currentLocaleName,\n          ownLocaleName,\n        };\n      }),\n    [localeList, locale]\n  );\n\n  const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n    multilingualAvailableLocales\n  );\n\n  // Create a new Fuse instance with the options and documentation data\n  const fuse = useMemo(() => {\n    const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n      keys: [\n        { name: 'ownLocaleName', weight: 0.4 },\n        { name: 'englishName', weight: 0.2 },\n        { name: 'currentLocaleName', weight: 0.2 },\n        { name: 'locale', weight: 0.2 },\n      ],\n      threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n    };\n\n    return new Fuse(multilingualAvailableLocales, fuseOptions);\n  }, [multilingualAvailableLocales]);\n\n  const handleSearch = useCallback(\n    (searchQuery: string) => {\n      if (searchQuery) {\n        // Perform search on every input change\n        const searchResults = fuse\n          .search(searchQuery)\n          .map((result) => result.item);\n        setResults(searchResults);\n      } else {\n        setResults(multilingualAvailableLocales);\n      }\n    },\n    [fuse, multilingualAvailableLocales]\n  );\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <div\n      className=\"border-text text-text dark:border-text-dark dark:text-text-dark rounded-xl border transition-colors\"\n      aria-label={localeSwitcherLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-nowrap px-2\">{localeName}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"sm\"\n            aria-label={languageListLabel.value}\n          >\n            <div className=\"p-3\">\n              <Input\n                type=\"search\"\n                placeholder={searchInput.placeholder.value}\n                onChange={(e) => handleSearch(e.target.value)}\n                ref={inputRef}\n              />\n            </div>\n            <ol className=\"divide-text/20 dark:divide-text-dark/20 divide-y divide-dashed overflow-y-auto p-1\">\n              {results.map(\n                ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n                  <li className=\"px-1.5 py-1\" key={localeItem}>\n                    <Button\n                      onClick={() => setLocale(localeItem)}\n                      label={`${switchTo} ${currentLocaleName}`}\n                      disabled={\n                        !(availableLocales ?? localeList).includes(localeItem)\n                      }\n                      isActive={locale === localeItem}\n                      variant=\"hoverable\"\n                      color=\"text\"\n                      isFullWidth\n                      textAlign=\"left\"\n                    >\n                      <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n                        <div className=\"flex flex-col text-nowrap\">\n                          <span\n                            dir={getHTMLTextDir(localeItem)}\n                            lang={localeItem}\n                          >\n                            {ownLocaleName}\n                          </span>\n                          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n                            {currentLocaleName}\n                          </span>\n                        </div>\n                        <span className=\"text-neutral dark:text-neutral-dark text-sm\">\n                          {localeItem.toUpperCase()}\n                        </span>\n                      </div>\n                    </Button>\n                  </li>\n                )\n              )}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"LocaleSwitcher.mjs","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config/client';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { useCallback, useMemo, useRef, useState, type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport localeSwitcherContent from './localeSwitcher.content';\n\nexport type LocaleSwitcherProps = {\n  locale?: Locales;\n  localeList: Locales[];\n  availableLocales?: Locales[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locales) => void;\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n  locale: Locales;\n  englishName: string;\n  currentLocaleName: string;\n  ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n  panelProps,\n}) => {\n  let localeName = 'Select a locale';\n  const { switchTo, searchInput, localeSwitcherLabel, languageListLabel } =\n    useDictionary(localeSwitcherContent);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n    () =>\n      localeList.map((localeEl) => {\n        const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n        const currentLocaleName = getLocaleName(localeEl, locale);\n        const ownLocaleName = getLocaleName(localeEl);\n        return {\n          locale: localeEl,\n          englishName,\n          currentLocaleName,\n          ownLocaleName,\n        };\n      }),\n    [localeList, locale]\n  );\n\n  const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n    multilingualAvailableLocales\n  );\n\n  // Create a new Fuse instance with the options and documentation data\n  const fuse = useMemo(() => {\n    const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n      keys: [\n        { name: 'ownLocaleName', weight: 0.4 },\n        { name: 'englishName', weight: 0.2 },\n        { name: 'currentLocaleName', weight: 0.2 },\n        { name: 'locale', weight: 0.2 },\n      ],\n      threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n    };\n\n    return new Fuse(multilingualAvailableLocales, fuseOptions);\n  }, [multilingualAvailableLocales]);\n\n  const handleSearch = useCallback(\n    (searchQuery: string) => {\n      if (searchQuery) {\n        // Perform search on every input change\n        const searchResults = fuse\n          .search(searchQuery)\n          .map((result) => result.item);\n        setResults(searchResults);\n      } else {\n        setResults(multilingualAvailableLocales);\n      }\n    },\n    [fuse, multilingualAvailableLocales]\n  );\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <div\n      className=\"border-text text-text rounded-xl border transition-colors\"\n      aria-label={localeSwitcherLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-nowrap px-2\">{localeName}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"sm\"\n            aria-label={languageListLabel.value}\n          >\n            <div className=\"p-3\">\n              <Input\n                type=\"search\"\n                placeholder={searchInput.placeholder.value}\n                onChange={(e) => handleSearch(e.target.value)}\n                ref={inputRef}\n              />\n            </div>\n            <ol className=\"divide-text/20 divide-y divide-dashed overflow-y-auto p-1\">\n              {results.map(\n                ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n                  <li className=\"px-1.5 py-1\" key={localeItem}>\n                    <Button\n                      onClick={() => setLocale(localeItem)}\n                      label={`${switchTo} ${currentLocaleName}`}\n                      disabled={\n                        !(availableLocales ?? localeList).includes(localeItem)\n                      }\n                      isActive={locale === localeItem}\n                      variant=\"hoverable\"\n                      color=\"text\"\n                      isFullWidth\n                      textAlign=\"left\"\n                    >\n                      <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n                        <div className=\"flex flex-col text-nowrap\">\n                          <span\n                            dir={getHTMLTextDir(localeItem)}\n                            lang={localeItem}\n                          >\n                            {ownLocaleName}\n                          </span>\n                          <span className=\"text-neutral text-xs\">\n                            {currentLocaleName}\n                          </span>\n                        </div>\n                        <span className=\"text-neutral text-sm\">\n                          {localeItem.toUpperCase()}\n                        </span>\n                      </div>\n                    </Button>\n                  </li>\n                )\n              )}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/MarkDownRender/index.cjs

@@ -12,124 +12,125 @@ const MarkdownRenderer = ({
   children,
   isDarkMode,
   locale,
-  overrides
-}) => /* @__PURE__ */ jsxRuntime.jsx(components_IDE_CodeContext.CodeProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  Markdown,
-  {
-    options: {
-      overrides: {
-        h1: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H1, { isClickable: true, ...props }),
-        h2: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H2, { isClickable: true, ...props }),
-        h3: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H3, { isClickable: true, ...props }),
-        h4: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H4, { isClickable: true, ...props }),
-        code: (props) => typeof props.className === "undefined" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          components_IDE_Code.Code,
-          {
-            isDarkMode,
-            language: props.className?.replace("lang-", ""),
-            ...props
-          }
-        ),
-        blockquote: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "blockquote",
-          {
-            className: utils_cn.cn(
-              "border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5",
-              className
-            ),
-            ...props
-          }
-        ),
-        ul: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "ul",
-          {
-            className: utils_cn.cn("mt-5 flex flex-col gap-3 pl-5", className),
-            ...props
-          }
-        ),
-        ol: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "ol",
-          {
-            className: utils_cn.cn("mt-5 flex flex-col gap-3 pl-5", className),
-            ...props
-          }
-        ),
-        li: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: utils_cn.cn("list-disc", className), ...props }),
-        img: ({ className, ...props }) => (
-          // eslint-disable-next-line jsx-a11y/alt-text
+  options
+}) => {
+  const { overrides, ...restOptions } = options ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsx(components_IDE_CodeContext.CodeProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    Markdown,
+    {
+      options: {
+        overrides: {
+          h1: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H1, { isClickable: true, ...props }),
+          h2: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H2, { isClickable: true, ...props }),
+          h3: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H3, { isClickable: true, ...props }),
+          h4: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H4, { isClickable: true, ...props }),
+          code: (props) => typeof props.className === "undefined" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: props.children }) : /* @__PURE__ */ jsxRuntime.jsx(
+            components_IDE_Code.Code,
+            {
+              isDarkMode,
+              language: props.className?.replace("lang-", ""),
+              ...props
+            }
+          ),
+          blockquote: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "blockquote",
+            {
+              className: utils_cn.cn(
+                "border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5",
+                className
+              ),
+              ...props
+            }
+          ),
+          ul: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
+            {
+              className: utils_cn.cn("mt-5 flex flex-col gap-3 pl-5", className),
+              ...props
+            }
+          ),
+          ol: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "ol",
+            {
+              className: utils_cn.cn("mt-5 flex flex-col gap-3 pl-5", className),
+              ...props
+            }
+          ),
+          li: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: utils_cn.cn("list-disc", className), ...props }),
+          img: ({ className, ...props }) => (
+            // eslint-disable-next-line jsx-a11y/alt-text
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                ...props,
+                loading: "lazy",
+                className: utils_cn.cn("max-w-full rounded-md", className),
+                src: `${props.src}?raw=true`
+              }
+            )
+          ),
+          a: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+            components_Link_Link.Link,
+            {
+              color: "neutral",
+              isExternalLink: props.href?.startsWith("http"),
+              underlined: true,
+              locale,
+              ...props
+            }
+          ),
+          pre: (props) => props.children,
+          table: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full max-w-full overflow-scroll rounded", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "table",
+            {
+              className: utils_cn.cn(
+                "max-w-full table-auto overflow-hidden text-left",
+                className
+              ),
+              ...props
+            }
+          ) }),
+          th: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              className: utils_cn.cn(
+                "border-neutral bg-neutral/10 border-b p-4",
+                className
+              ),
+              ...props
+            }
+          ),
+          tr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: utils_cn.cn("hover:bg-neutral/10 hover:/10", className),
+              ...props
+            }
+          ),
+          td: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: utils_cn.cn("border-b border-neutral-500/50 p-4", className),
+              ...props
+            }
+          ),
+          ...overrides
+        },
+        wrapper: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components_Headers_SectionScroller.SectionScroller, {}),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            "div",
             {
-              ...props,
-              loading: "lazy",
-              className: utils_cn.cn("max-w-full rounded-md", className),
-              src: `${props.src}?raw=true`
+              className: utils_cn.cn("flex flex-col gap-6 p-10", className),
+              ...props
             }
           )
-        ),
-        a: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-          components_Link_Link.Link,
-          {
-            color: "neutral",
-            isExternalLink: props.href?.startsWith("http"),
-            underlined: true,
-            locale,
-            ...props
-          }
-        ),
-        pre: (props) => props.children,
-        table: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full max-w-full overflow-scroll rounded", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "table",
-          {
-            className: utils_cn.cn(
-              "max-w-full table-auto overflow-hidden text-left",
-              className
-            ),
-            ...props
-          }
-        ) }),
-        th: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "th",
-          {
-            className: utils_cn.cn(
-              "border-neutral bg-neutral/10 border-b p-4",
-              className
-            ),
-            ...props
-          }
-        ),
-        tr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "tr",
-          {
-            className: utils_cn.cn(
-              "hover:bg-neutral/10 hover:dark:bg-neutral-dark/10",
-              className
-            ),
-            ...props
-          }
-        ),
-        td: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "td",
-          {
-            className: utils_cn.cn("border-b border-neutral-500/50 p-4", className),
-            ...props
-          }
-        ),
-        ...overrides
+        ] }),
+        ...restOptions
       },
-      wrapper: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(components_Headers_SectionScroller.SectionScroller, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils_cn.cn("flex flex-col gap-6 p-10", className),
-            ...props
-          }
-        )
-      ] })
-    },
-    children: children ?? ""
-  }
-) });
+      children: children ?? ""
+    }
+  ) });
+};
 exports.MarkdownRenderer = MarkdownRenderer;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4 } 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          h4: (props) => <H4 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          table: ({ className, ...props }) => (\n            <div className=\"grid w-full max-w-full overflow-scroll rounded\">\n              <table\n                className={cn(\n                  'max-w-full table-auto overflow-hidden text-left',\n                  className\n                )}\n                {...props}\n              />\n            </div>\n          ),\n          th: ({ className, ...props }) => (\n            <th\n              className={cn(\n                'border-neutral bg-neutral/10 border-b p-4',\n                className\n              )}\n              {...props}\n            />\n          ),\n          tr: ({ className, ...props }) => (\n            <tr\n              className={cn(\n                'hover:bg-neutral/10 hover:dark:bg-neutral-dark/10',\n                className\n              )}\n              {...props}\n            />\n          ),\n          td: ({ className, ...props }) => (\n            <td\n              className={cn('border-b border-neutral-500/50 p-4', className)}\n              {...props}\n            />\n          ),\n          ...overrides,\n        },\n        wrapper: ({ className, ...props }) => (\n          <>\n            <SectionScroller />\n            <div\n              className={cn('flex flex-col gap-6 p-10', className)}\n              {...props}\n            />\n          </>\n        ),\n      }}\n    >\n      {children ?? ''}\n    </Markdown>\n  </CodeProvider>\n);\n"],"names":["CodeProvider","jsx","H1","H2","H3","H4","Code","cn","Link","jsxs","Fragment","SectionScroller"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4 } 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  options?: MarkdownToJSX.Options;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n  return (\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            h4: (props) => <H4 isClickable={true} {...props} />,\n\n            code: (props) =>\n              typeof props.className === 'undefined' ? (\n                <strong className=\"bg-card/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 text-neutral 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            table: ({ className, ...props }) => (\n              <div className=\"grid w-full max-w-full overflow-scroll rounded\">\n                <table\n                  className={cn(\n                    'max-w-full table-auto overflow-hidden text-left',\n                    className\n                  )}\n                  {...props}\n                />\n              </div>\n            ),\n            th: ({ className, ...props }) => (\n              <th\n                className={cn(\n                  'border-neutral bg-neutral/10 border-b p-4',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            tr: ({ className, ...props }) => (\n              <tr\n                className={cn('hover:bg-neutral/10 hover:/10', className)}\n                {...props}\n              />\n            ),\n            td: ({ className, ...props }) => (\n              <td\n                className={cn('border-b border-neutral-500/50 p-4', className)}\n                {...props}\n              />\n            ),\n            ...overrides,\n          },\n          wrapper: ({ className, ...props }) => (\n            <>\n              <SectionScroller />\n              <div\n                className={cn('flex flex-col gap-6 p-10', className)}\n                {...props}\n              />\n            </>\n          ),\n          ...restOptions,\n        }}\n      >\n        {children ?? ''}\n      </Markdown>\n    </CodeProvider>\n  );\n};\n"],"names":["CodeProvider","jsx","H1","H2","H3","H4","Code","cn","Link","jsxs","Fragment","SectionScroller"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ type MarkdownRendererProps = {
     children: string;
     isDarkMode?: boolean;
     locale?: Locales;
-    overrides?: MarkdownToJSX.Overrides;
+    options?: MarkdownToJSX.Options;
 };
 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":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,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,CA0HtD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MarkDownRender/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,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,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA2HtD,CAAC"}

package/dist/components/MarkDownRender/index.mjs

@@ -10,125 +10,126 @@ const MarkdownRenderer = ({
   children,
   isDarkMode,
   locale,
-  overrides
-}) => /* @__PURE__ */ jsx(CodeProvider, { children: /* @__PURE__ */ jsx(
-  Markdown,
-  {
-    options: {
-      overrides: {
-        h1: (props) => /* @__PURE__ */ jsx(H1, { isClickable: true, ...props }),
-        h2: (props) => /* @__PURE__ */ jsx(H2, { isClickable: true, ...props }),
-        h3: (props) => /* @__PURE__ */ jsx(H3, { isClickable: true, ...props }),
-        h4: (props) => /* @__PURE__ */ jsx(H4, { isClickable: true, ...props }),
-        code: (props) => typeof props.className === "undefined" ? /* @__PURE__ */ 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__ */ jsx(
-          Code,
-          {
-            isDarkMode,
-            language: props.className?.replace("lang-", ""),
-            ...props
-          }
-        ),
-        blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx(
-          "blockquote",
-          {
-            className: cn(
-              "border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5",
-              className
-            ),
-            ...props
-          }
-        ),
-        ul: ({ className, ...props }) => /* @__PURE__ */ jsx(
-          "ul",
-          {
-            className: cn("mt-5 flex flex-col gap-3 pl-5", className),
-            ...props
-          }
-        ),
-        ol: ({ className, ...props }) => /* @__PURE__ */ jsx(
-          "ol",
-          {
-            className: cn("mt-5 flex flex-col gap-3 pl-5", className),
-            ...props
-          }
-        ),
-        li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("list-disc", className), ...props }),
-        img: ({ className, ...props }) => (
-          // eslint-disable-next-line jsx-a11y/alt-text
+  options
+}) => {
+  const { overrides, ...restOptions } = options ?? {};
+  return /* @__PURE__ */ jsx(CodeProvider, { children: /* @__PURE__ */ jsx(
+    Markdown,
+    {
+      options: {
+        overrides: {
+          h1: (props) => /* @__PURE__ */ jsx(H1, { isClickable: true, ...props }),
+          h2: (props) => /* @__PURE__ */ jsx(H2, { isClickable: true, ...props }),
+          h3: (props) => /* @__PURE__ */ jsx(H3, { isClickable: true, ...props }),
+          h4: (props) => /* @__PURE__ */ jsx(H4, { isClickable: true, ...props }),
+          code: (props) => typeof props.className === "undefined" ? /* @__PURE__ */ jsx("strong", { className: "bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: props.children }) : /* @__PURE__ */ jsx(
+            Code,
+            {
+              isDarkMode,
+              language: props.className?.replace("lang-", ""),
+              ...props
+            }
+          ),
+          blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx(
+            "blockquote",
+            {
+              className: cn(
+                "border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5",
+                className
+              ),
+              ...props
+            }
+          ),
+          ul: ({ className, ...props }) => /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: cn("mt-5 flex flex-col gap-3 pl-5", className),
+              ...props
+            }
+          ),
+          ol: ({ className, ...props }) => /* @__PURE__ */ jsx(
+            "ol",
+            {
+              className: cn("mt-5 flex flex-col gap-3 pl-5", className),
+              ...props
+            }
+          ),
+          li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("list-disc", className), ...props }),
+          img: ({ className, ...props }) => (
+            // eslint-disable-next-line jsx-a11y/alt-text
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                ...props,
+                loading: "lazy",
+                className: cn("max-w-full rounded-md", className),
+                src: `${props.src}?raw=true`
+              }
+            )
+          ),
+          a: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              color: "neutral",
+              isExternalLink: props.href?.startsWith("http"),
+              underlined: true,
+              locale,
+              ...props
+            }
+          ),
+          pre: (props) => props.children,
+          table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-full overflow-scroll rounded", children: /* @__PURE__ */ jsx(
+            "table",
+            {
+              className: cn(
+                "max-w-full table-auto overflow-hidden text-left",
+                className
+              ),
+              ...props
+            }
+          ) }),
+          th: ({ className, ...props }) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: cn(
+                "border-neutral bg-neutral/10 border-b p-4",
+                className
+              ),
+              ...props
+            }
+          ),
+          tr: ({ className, ...props }) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: cn("hover:bg-neutral/10 hover:/10", className),
+              ...props
+            }
+          ),
+          td: ({ className, ...props }) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn("border-b border-neutral-500/50 p-4", className),
+              ...props
+            }
+          ),
+          ...overrides
+        },
+        wrapper: ({ className, ...props }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SectionScroller, {}),
           /* @__PURE__ */ jsx(
-            "img",
+            "div",
             {
-              ...props,
-              loading: "lazy",
-              className: cn("max-w-full rounded-md", className),
-              src: `${props.src}?raw=true`
+              className: cn("flex flex-col gap-6 p-10", className),
+              ...props
             }
           )
-        ),
-        a: (props) => /* @__PURE__ */ jsx(
-          Link,
-          {
-            color: "neutral",
-            isExternalLink: props.href?.startsWith("http"),
-            underlined: true,
-            locale,
-            ...props
-          }
-        ),
-        pre: (props) => props.children,
-        table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-full overflow-scroll rounded", children: /* @__PURE__ */ jsx(
-          "table",
-          {
-            className: cn(
-              "max-w-full table-auto overflow-hidden text-left",
-              className
-            ),
-            ...props
-          }
-        ) }),
-        th: ({ className, ...props }) => /* @__PURE__ */ jsx(
-          "th",
-          {
-            className: cn(
-              "border-neutral bg-neutral/10 border-b p-4",
-              className
-            ),
-            ...props
-          }
-        ),
-        tr: ({ className, ...props }) => /* @__PURE__ */ jsx(
-          "tr",
-          {
-            className: cn(
-              "hover:bg-neutral/10 hover:dark:bg-neutral-dark/10",
-              className
-            ),
-            ...props
-          }
-        ),
-        td: ({ className, ...props }) => /* @__PURE__ */ jsx(
-          "td",
-          {
-            className: cn("border-b border-neutral-500/50 p-4", className),
-            ...props
-          }
-        ),
-        ...overrides
+        ] }),
+        ...restOptions
       },
-      wrapper: ({ className, ...props }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(SectionScroller, {}),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("flex flex-col gap-6 p-10", className),
-            ...props
-          }
-        )
-      ] })
-    },
-    children: children ?? ""
-  }
-) });
+      children: children ?? ""
+    }
+  ) });
+};
 export {
   MarkdownRenderer
 };