@san-siva/blogkit 1.0.12 → 1.1.0

package/README.md

@@ -1,23 +1,36 @@
 # Blogkit
 
-A reusable, feature-rich blog component library for React and Next.js applications. Built with TypeScript and SCSS modules, BlogKit provides everything you need to create beautiful, interactive blog posts with code highlighting, diagrams, callouts, and more.
+A comprehensive, production-ready blog component library for React and Next.js applications. Built with TypeScript and SCSS modules, Blogkit provides a complete suite of components for creating professional, interactive blog posts with advanced features including syntax highlighting, diagram rendering, callouts, and more.
 
-**[📚 View Full Documentation](https://blogkit-c367c.web.app/)** | **[🌐 See Live Demo on santhoshsiva.dev](https://santhoshsiva.dev)**
+**[View Full Documentation](https://blogkit-c367c.web.app/)** | **[Live Demo](https://santhoshsiva.dev)**
 
-## Key Features
+## Overview
 
-✨ **Blog Layout with TOC** • 🎨 **Code Highlighting** • 📊 **Mermaid Diagrams** • 💬 **Callouts** • 📋 **Data Tables** • 🔗 **Blog Links** • 📝 **TypeScript** • 🎯 **React 19 Ready**
+Blogkit is designed to streamline the development of content-rich blog applications by providing a modular, customizable component library. It supports modern React patterns, offers full TypeScript support, and includes responsive design out of the box.
+
+## Features
+
+- **Blog Layout System**: Pre-built layout components with table of contents navigation
+- **Syntax Highlighting**: Code block components with multi-language support via Prism.js
+- **Diagram Rendering**: Integrated Mermaid.js support for flowcharts, sequence diagrams, and more
+- **Content Components**: Callouts, data tables, and specialized blog link components
+- **TypeScript Support**: Fully typed API for enhanced developer experience
+- **Responsive Design**: Mobile-first design with SCSS modules
+- **React 19 Compatible**: Built to work seamlessly with the latest React version
+- **Next.js Optimized**: Designed for optimal performance in Next.js applications
 
 ## Installation
 
 ```bash
-npm install @san-siva/blogkit @san-siva/stylekit
+npm install @san-siva/blogkit
 # or
-yarn add @san-siva/blogkit @san-siva/stylekit
+yarn add @san-siva/blogkit
 # or
-pnpm add @san-siva/blogkit @san-siva/stylekit
+pnpm add @san-siva/blogkit
 ```
 
+> **Note:** The required `@san-siva/stylekit` package is automatically installed as a dependency.
+
 ### Peer Dependencies
 
 Blogkit requires the following peer dependencies:
@@ -31,6 +44,7 @@ npm install react@^19.0.0 react-dom@^19.0.0 next@^16.0.10 @react-spring/web@^10.
 ```tsx
 import { Blog, BlogHeader, BlogSection, CodeBlock, Callout } from '@san-siva/blogkit';
 import '@san-siva/stylekit/index.module.scss';
+import '@san-siva/blogkit/styles.css';
 
 export default function MyBlogPost() {
 	return (
@@ -60,22 +74,59 @@ export default function MyBlogPost() {
 
 ## Documentation
 
-For detailed documentation, component APIs, live examples, and more:
-
-👉 **[Visit the Full Documentation](https://blogkit-c367c.web.app/)**
+Comprehensive documentation is available at [https://blogkit-c367c.web.app/](https://blogkit-c367c.web.app/)
 
 The documentation includes:
 
 - Complete component API reference
 - Interactive live examples
+- Implementation guides and best practices
 - Code snippets for all components
-- Customization guide
-- TypeScript usage examples
+- Customization and theming guide
+- TypeScript usage examples and type definitions
+
+## Examples
+
+See Blogkit in action in these blogs and documentation sites:
+
+- **[Gitsy](https://gitsy-56895.web.app/)** - A blog built with Blogkit showcasing various components
+- **[Optimizing Background Tasks with requestIdleCallback](https://santhoshsiva.dev/blog/optimizing-background-tasks-with-requestidlecallback-advanced-scheduling-in-the-javascript-event-loop/)** - Advanced scheduling in the JavaScript event loop
+- **[Linting at Scale](https://santhoshsiva.dev/blog/linting-at-scale-strategies-for-updating-eslint-configs-in-large-applications/)** - Strategies for updating ESLint configs in large applications
+
+## Requirements
+
+- React ^19.0.0
+- Next.js ^16.0.10
+- Node.js 18+ recommended
+
+## Browser Support
+
+Blogkit supports all modern browsers:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 
 ## Contributing
 
-Contributions are welcome! Open an issue or submit a pull request on [GitHub](https://github.com/san-siva/blogkit).
+Contributions are welcome and appreciated. To contribute:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/improvement`)
+3. Commit your changes (`git commit -am 'Add new feature'`)
+4. Push to the branch (`git push origin feature/improvement`)
+5. Open a Pull Request
+
+Please ensure your code follows the existing style conventions and includes appropriate tests.
+
+For bug reports and feature requests, please [open an issue](https://github.com/san-siva/blogkit/issues) on GitHub.
 
 ## License
 
 MIT © [Santhosh Siva](https://santhoshsiva.dev)
+
+## Author
+
+**Santhosh Siva**
+- Website: [https://santhoshsiva.dev](https://santhoshsiva.dev)
+- GitHub: [@san-siva](https://github.com/san-siva)

package/dist/cjs/components/Blog.js

@@ -5,126 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Blog_module = require('../styles/Blog.module.scss.js');
+var BlogStatic = require('../staticComponents/BlogStatic.js');
 
+const BlogDynamic = react.lazy(() => Promise.resolve().then(function () { return require('../dynamicComponents/BlogDynamic.js'); }));
 const Blog = ({ children, title = 'In this article' }) => {
-    const addPaddingTopTimerReference = react.useRef(null);
-    const highlightCategoryTimerReference = react.useRef(null);
-    const clearTimers = (addPaddingTopTimerReference_, highlightCategoryTimerReference_) => {
-        if (addPaddingTopTimerReference_) {
-            clearTimeout(addPaddingTopTimerReference_);
-        }
-        if (highlightCategoryTimerReference_) {
-            clearTimeout(highlightCategoryTimerReference_);
-        }
-    };
-    const sectionReferences = react.useRef(new Map());
-    const [categoryTitles, setCategoryTitles] = react.useState(new Map());
-    const [visibleTitle, setVisibleTitle] = react.useState(null);
-    react.useEffect(() => {
-        let firstSectionId = null;
-        const now = Date.now();
-        for (const [id, { title, el, isSubSection }] of sectionReferences.current) {
-            if (!firstSectionId) {
-                firstSectionId = id;
-            }
-            setCategoryTitles((previous) => {
-                const newState = new Map(previous);
-                newState.set(id, {
-                    el,
-                    title,
-                    lastUpdatedAt: now,
-                    isSubSection,
-                });
-                return newState;
-            });
-        }
-        setVisibleTitle(firstSectionId);
-    }, []);
-    react.useEffect(() => {
-        const observers = new Map();
-        for (const [id, { el }] of categoryTitles) {
-            const observer = new IntersectionObserver(([entry]) => {
-                if (!entry.isIntersecting)
-                    return;
-                setVisibleTitle(visibleId => {
-                    if (visibleId === id && !entry.isIntersecting)
-                        return null;
-                    if (entry.isIntersecting)
-                        return id;
-                    return visibleId;
-                });
-            }, { threshold: 0.1 });
-            observers.set(id, observer);
-            observer.observe(el);
-        }
-        return () => {
-            for (const observer of observers.values()) {
-                observer.disconnect();
-            }
-        };
-    }, [categoryTitles.size]);
-    react.useEffect(() => clearTimers(addPaddingTopTimerReference.current, highlightCategoryTimerReference.current), [addPaddingTopTimerReference, highlightCategoryTimerReference]);
-    const addSectionReferences = (element, isSubSection = false) => {
-        if (!element)
-            return;
-        const id = element.dataset.id;
-        if (!id)
-            return;
-        const title = element.dataset.title;
-        if (!title)
-            return;
-        sectionReferences.current.set(id, {
-            el: element,
-            title,
-            isSubSection,
-        });
-    };
-    const handleSectionReference = (element) => {
-        if (!element)
-            return;
-        const { parentRef, childRefs } = element;
-        if (!parentRef)
-            return;
-        addSectionReferences(parentRef);
-        if (!Array.isArray(childRefs))
-            return;
-        for (const childReference of childRefs) {
-            if (!childReference)
-                continue;
-            addSectionReferences(childReference, true);
-        }
-    };
-    const handleClickCategoryTitle = (error) => {
-        const id = error.currentTarget.dataset.id;
-        const index = error.currentTarget.dataset.idx;
-        if (!id || !index)
-            return;
-        const { el } = categoryTitles.get(id) || {};
-        if (!el)
-            return;
-        const top = el.getBoundingClientRect().top + document.body.scrollTop - 100;
-        document.body.scrollTo({
-            top,
-            behavior: 'smooth',
-        });
-        const timer = setTimeout(() => {
-            setVisibleTitle(id);
-            clearTimeout(timer);
-        }, 1000);
-    };
-    return (jsxRuntime.jsxs("div", { className: Blog_module.default.blog, children: [jsxRuntime.jsx("div", { className: Blog_module.default['blog__content'], children: react.Children.map(children, child => {
-                    if (!react.isValidElement(child))
-                        return child;
-                    return react.cloneElement(child, {
-                        ref: handleSectionReference,
-                    });
-                }) }), jsxRuntime.jsxs("div", { className: Blog_module.default['blog__sidebar'], children: [jsxRuntime.jsx("p", { className: `${Blog_module.default['margin-bottom--3']} ${Blog_module.default['category__header']}`, children: title }), [...categoryTitles].map(([id, { title, isSubSection }], index, array) => {
-                        const isNextSectionSubSection = array[index + 1]?.[1]?.isSubSection;
-                        return (jsxRuntime.jsx("p", { "data-idx": index, "data-id": id, className: `${Blog_module.default['category__title']} ${id === visibleTitle ? Blog_module.default['category__title--active'] : ''} ${isSubSection ? Blog_module.default['category__title--sub'] : ''} ${isSubSection && !isNextSectionSubSection
-                                ? Blog_module.default['margin-bottom-imp--2']
-                                : ''}`, onClick: handleClickCategoryTitle, children: title }, id));
-                    })] })] }));
+    return (jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(BlogStatic.default, { children: children }), children: jsxRuntime.jsx(BlogDynamic, { title: title, children: children }) }));
 };
 
 exports.default = Blog;

package/dist/cjs/components/Blog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blog.js","sources":["../../../src/components/Blog.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\n\nimport type { MouseEvent, ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/Blog.module.scss';\n\ninterface BlogProperties {\n\tchildren: ReactNode;\n\ttitle?: string;\n}\n\nexport interface ForwardedReference {\n\tparentRef: HTMLDivElement;\n\tchildRefs: HTMLDivElement[];\n}\n\ninterface SectionReferenceValue {\n\tel: HTMLElement;\n\ttitle: string;\n\tisSubSection: boolean;\n}\n\ntype SectionReference = Map<string, SectionReferenceValue>;\n\ninterface CategoryTitleValue extends SectionReferenceValue {\n\tlastUpdatedAt: number;\n}\n\ntype CategoryTitle = Map<string, CategoryTitleValue>;\n\ntype AddPaddingTopTimerReference = ReturnType<typeof setTimeout> | null;\n\nconst Blog = ({ children, title = 'In this article' }: BlogProperties) => {\n\tconst addPaddingTopTimerReference = useRef<AddPaddingTopTimerReference>(null);\n\tconst highlightCategoryTimerReference =\n\t\tuseRef<AddPaddingTopTimerReference>(null);\n\n\tconst clearTimers = (\n\t\taddPaddingTopTimerReference_: AddPaddingTopTimerReference,\n\t\thighlightCategoryTimerReference_: AddPaddingTopTimerReference\n\t) => {\n\t\tif (addPaddingTopTimerReference_) {\n\t\t\tclearTimeout(addPaddingTopTimerReference_);\n\t\t}\n\t\tif (highlightCategoryTimerReference_) {\n\t\t\tclearTimeout(highlightCategoryTimerReference_);\n\t\t}\n\t};\n\n\tconst sectionReferences = useRef<SectionReference>(new Map());\n\tconst [categoryTitles, setCategoryTitles] = useState<CategoryTitle>(\n\t\tnew Map()\n\t);\n\tconst [visibleTitle, setVisibleTitle] = useState<string | null>(null);\n\n\tuseEffect(() => {\n\t\tlet firstSectionId: string | null = null;\n\t\tconst now = Date.now();\n\t\tfor (const [id, { title, el, isSubSection }] of sectionReferences.current) {\n\t\t\tif (!firstSectionId) {\n\t\t\t\tfirstSectionId = id;\n\t\t\t}\n\t\t\tsetCategoryTitles((previous: CategoryTitle) => {\n\t\t\t\tconst newState = new Map(previous);\n\t\t\t\tnewState.set(id, {\n\t\t\t\t\tel,\n\t\t\t\t\ttitle,\n\t\t\t\t\tlastUpdatedAt: now,\n\t\t\t\t\tisSubSection,\n\t\t\t\t});\n\t\t\t\treturn newState;\n\t\t\t});\n\t\t}\n\t\tsetVisibleTitle(firstSectionId);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst observers = new Map<string, IntersectionObserver>();\n\t\tfor (const [id, { el }] of categoryTitles) {\n\t\t\tconst observer = new IntersectionObserver(\n\t\t\t\t([entry]) => {\n\t\t\t\t\tif (!entry.isIntersecting) return;\n\t\t\t\t\tsetVisibleTitle(visibleId => {\n\t\t\t\t\t\tif (visibleId === id && !entry.isIntersecting) return null;\n\t\t\t\t\t\tif (entry.isIntersecting) return id;\n\t\t\t\t\t\treturn visibleId;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{ threshold: 0.1 }\n\t\t\t);\n\t\t\tobservers.set(id, observer);\n\t\t\tobserver.observe(el);\n\t\t}\n\t\treturn () => {\n\t\t\tfor (const observer of observers.values()) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [categoryTitles.size]);\n\n\tuseEffect(\n\t\t() =>\n\t\t\tclearTimers(\n\t\t\t\taddPaddingTopTimerReference.current,\n\t\t\t\thighlightCategoryTimerReference.current\n\t\t\t),\n\t\t[addPaddingTopTimerReference, highlightCategoryTimerReference]\n\t);\n\n\tconst addSectionReferences = (element: HTMLElement, isSubSection = false) => {\n\t\tif (!element) return;\n\t\tconst id = element.dataset.id;\n\t\tif (!id) return;\n\t\tconst title = element.dataset.title;\n\t\tif (!title) return;\n\n\t\tsectionReferences.current.set(id, {\n\t\t\tel: element,\n\t\t\ttitle,\n\t\t\tisSubSection,\n\t\t});\n\t};\n\n\tconst handleSectionReference = (element: ForwardedReference) => {\n\t\tif (!element) return;\n\t\tconst { parentRef, childRefs } = element;\n\t\tif (!parentRef) return;\n\t\taddSectionReferences(parentRef);\n\t\tif (!Array.isArray(childRefs)) return;\n\t\tfor (const childReference of childRefs) {\n\t\t\tif (!childReference) continue;\n\t\t\taddSectionReferences(childReference, true);\n\t\t}\n\t};\n\n\tconst handleClickCategoryTitle = (\n\t\terror: MouseEvent<HTMLParagraphElement>\n\t) => {\n\t\tconst id = error.currentTarget.dataset.id;\n\t\tconst index = error.currentTarget.dataset.idx;\n\t\tif (!id || !index) return;\n\n\t\tconst { el } = categoryTitles.get(id) || {};\n\t\tif (!el) return;\n\n\t\tconst top = el.getBoundingClientRect().top + document.body.scrollTop - 100;\n\t\tdocument.body.scrollTo({\n\t\t\ttop,\n\t\t\tbehavior: 'smooth',\n\t\t});\n\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetVisibleTitle(id);\n\t\t\tclearTimeout(timer);\n\t\t}, 1000);\n\t};\n\n\treturn (\n\t\t<div className={styles.blog}>\n\t\t\t<div className={styles['blog__content']}>\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleSectionReference,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t<div className={styles['blog__sidebar']}>\n\t\t\t\t<p\n\t\t\t\t\tclassName={`${styles['margin-bottom--3']} ${styles['category__header']}`}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t\t{[...categoryTitles].map(\n\t\t\t\t\t([id, { title, isSubSection }], index, array) => {\n\t\t\t\t\t\tconst isNextSectionSubSection = array[index + 1]?.[1]?.isSubSection;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\t\t\tdata-idx={index}\n\t\t\t\t\t\t\t\tdata-id={id}\n\t\t\t\t\t\t\t\tclassName={`${styles['category__title']} ${\n\t\t\t\t\t\t\t\t\tid === visibleTitle ? styles['category__title--active'] : ''\n\t\t\t\t\t\t\t\t} ${isSubSection ? styles['category__title--sub'] : ''} ${\n\t\t\t\t\t\t\t\t\tisSubSection && !isNextSectionSubSection\n\t\t\t\t\t\t\t\t\t\t? styles['margin-bottom-imp--2']\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\tonClick={handleClickCategoryTitle}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default Blog;\n"],"names":["useRef","useState","useEffect","_jsxs","styles","_jsx","Children","isValidElement","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Blog.js","sources":["../../../src/components/Blog.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense } from 'react';\nimport type { ReactNode } from 'react';\nimport BlogStatic from '../staticComponents/BlogStatic';\n\nconst BlogDynamic = lazy(() => import('../dynamicComponents/BlogDynamic'));\n\ninterface BlogProperties {\n\tchildren: ReactNode;\n\ttitle?: string;\n}\n\nconst Blog = ({ children, title = 'In this article' }: BlogProperties) => {\n\treturn (\n\t\t<Suspense fallback={<BlogStatic>{children}</BlogStatic>}>\n\t\t\t<BlogDynamic title={title}>{children}</BlogDynamic>\n\t\t</Suspense>\n\t);\n};\n\nexport default Blog;\n"],"names":["lazy","_jsx","Suspense","BlogStatic"],"mappings":";;;;;;;;AAMA,MAAM,WAAW,GAAGA,UAAI,CAAC,MAAM,oDAAO,qCAAkC,KAAC,CAAC;AAO1E,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,iBAAiB,EAAkB,KAAI;IACxE,QACCC,eAACC,cAAQ,EAAA,EAAC,QAAQ,EAAED,cAAA,CAACE,kBAAU,EAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAc,YACtDF,cAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,EAAA,CAAe,EAAA,CACzC;AAEb;;;;"}

package/dist/cjs/components/BlogHeader.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var BlogHeader_module = require('../styles/BlogHeader.module.scss.js');
+var BlogHeaderDynamic = require('../dynamicComponents/BlogHeaderDynamic.js');
 
-const renderLineBreaks = (array) => array.map((element, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [element, index === array.length - 1 ? null : jsxRuntime.jsx("br", {})] }, element)));
-const BlogHeader = ({ title, desc, isDescCite = true }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h1", { className: `${BlogHeader_module.default['blog-header']}`, children: renderLineBreaks(title) }), isDescCite ? (jsxRuntime.jsx("cite", { className: `${BlogHeader_module.default['blog-date']}`, children: renderLineBreaks(desc) })) : (jsxRuntime.jsx("p", { className: `${BlogHeader_module.default['blog-date']}`, children: renderLineBreaks(desc) }))] }));
+const BlogHeader = ({ title, desc, isDescCite = true, }) => {
+    return (jsxRuntime.jsx(BlogHeaderDynamic.default, { title: title, desc: desc, isDescCite: isDescCite }));
+};
 
 exports.default = BlogHeader;
 //# sourceMappingURL=BlogHeader.js.map

package/dist/cjs/components/BlogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogHeader.js","sources":["../../../src/components/BlogHeader.tsx"],"sourcesContent":["import { Fragment } from 'react';\n\nimport styles from '../styles/BlogHeader.module.scss';\n\ninterface BlogProperties {\n\ttitle: string[];\n\tdesc: string[];\n\tisDescCite?: boolean;\n}\n\nconst renderLineBreaks = (array: string[]) =>\n\tarray.map((element, index, array) => (\n\t\t<Fragment key={element}>\n\t\t\t{element}\n\t\t\t{index === array.length - 1 ? null : <br />}\n\t\t</Fragment>\n\t));\n\nconst BlogHeader = ({ title, desc, isDescCite = true }: BlogProperties) => (\n\t\t<>\n\t\t\t<h1 className={`${styles['blog-header']}`}>{renderLineBreaks(title)}</h1>\n\t\t\t{isDescCite ? (\n\t\t\t\t<cite className={`${styles['blog-date']}`}>\n\t\t\t\t\t{renderLineBreaks(desc)}\n\t\t\t\t</cite>\n\t\t\t) : (\n\t\t\t\t<p className={`${styles['blog-date']}`}>{renderLineBreaks(desc)}</p>\n\t\t\t)}\n\t\t</>\n\t);\n\nexport default BlogHeader;\n"],"names":["_jsxs","Fragment","_jsx","_Fragment","styles"],"mappings":";;;;;;;;AAUA,MAAM,gBAAgB,GAAG,CAAC,KAAe,KACxC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,MAC/BA,eAAA,CAACC,cAAQ,eACP,OAAO,EACP,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,GAAGC,cAAA,CAAA,IAAA,EAAA,EAAA,CAAM,KAF7B,OAAO,CAGX,CACX,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAkB,MACpEF,eAAA,CAAAG,mBAAA,EAAA,EAAA,QAAA,EAAA,CACCD,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,GAAGE,yBAAM,CAAC,aAAa,CAAC,EAAE,EAAA,QAAA,EAAG,gBAAgB,CAAC,KAAK,CAAC,EAAA,CAAM,EACxE,UAAU,IACVF,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,EAAGE,yBAAM,CAAC,WAAW,CAAC,CAAA,CAAE,EAAA,QAAA,EACvC,gBAAgB,CAAC,IAAI,CAAC,EAAA,CACjB,KAEPF,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,CAAA,EAAGE,yBAAM,CAAC,WAAW,CAAC,CAAA,CAAE,EAAA,QAAA,EAAG,gBAAgB,CAAC,IAAI,CAAC,EAAA,CAAK,CACpE,CAAA,EAAA,CACC;;;;"}
+{"version":3,"file":"BlogHeader.js","sources":["../../../src/components/BlogHeader.tsx"],"sourcesContent":["import BlogHeaderDynamic from '../dynamicComponents/BlogHeaderDynamic';\n\ninterface BlogHeaderProperties {\n\ttitle: string[];\n\tdesc: string[];\n\tisDescCite?: boolean;\n}\n\nconst BlogHeader = ({\n\ttitle,\n\tdesc,\n\tisDescCite = true,\n}: BlogHeaderProperties) => {\n\treturn (\n\t\t<BlogHeaderDynamic title={title} desc={desc} isDescCite={isDescCite} />\n\t);\n};\n\nexport default BlogHeader;\n"],"names":["_jsx","BlogHeaderDynamic"],"mappings":";;;;;;;AAQA,MAAM,UAAU,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,IAAI,GACK,KAAI;AAC1B,IAAA,QACCA,cAAA,CAACC,yBAAiB,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAA,CAAI;AAEzE;;;;"}

package/dist/cjs/components/BlogLink.js

@@ -5,30 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var web = require('@react-spring/web');
-var BlogLink_module = require('../styles/BlogLink.module.scss.js');
-var index = require('../utils/index.js');
+var BlogLinkStatic = require('../staticComponents/BlogLinkStatic.js');
 
-const DEFAULT_LINE_END = 18;
-const DEFAULT_POLYLINE_POINTS = '12 5, 19 12, 12 19';
-const MOVED_POLYLINE_POINTS = '15 5, 22 12, 15 19';
-const BlogLink = ({ title = '', desc = '', isInProgress = false, href }) => {
-    const [isHovered, setIsHovered] = react.useState(false);
-    const link = href || `/blog/${index.generateUrlForBlogTitle(title)}`;
-    const svgColor = web.useSpring({
-        stroke: isHovered ? '#4242fa' : 'transparent',
-    });
-    const polyLine = web.useSpring({
-        points: isHovered ? MOVED_POLYLINE_POINTS : DEFAULT_POLYLINE_POINTS,
-        config: { duration: 200 },
-    });
-    const lineEnd = web.useSpring({
-        x2: isHovered ? `${DEFAULT_LINE_END + 2}` : `${DEFAULT_LINE_END}`,
-        config: { duration: 200 },
-    });
-    if (isInProgress)
-        return null;
-    return (jsxRuntime.jsxs("a", { className: BlogLink_module.default['blog-link'], onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), href: link, rel: "noopener noreferrer", children: [jsxRuntime.jsx("h6", { className: BlogLink_module.default['blog-link__title'], children: title }), jsxRuntime.jsx("p", { className: BlogLink_module.default['blog-link__description'], children: desc }), jsxRuntime.jsxs("div", { className: BlogLink_module.default['blog-link__read-more'], children: [jsxRuntime.jsx("p", { children: "Read More" }), jsxRuntime.jsxs(web.animated.svg, { xmlns: "http://www.w3.org/2000/svg", width: "18px", height: "18px", viewBox: "0 0 24 24", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: svgColor, children: [jsxRuntime.jsx(web.animated.line, { x1: "5", y1: "12", y2: "12", x2: lineEnd.x2 }), jsxRuntime.jsx(web.animated.polyline, { points: polyLine.points })] })] })] }));
+const BlogLinkDynamic = react.lazy(() => Promise.resolve().then(function () { return require('../dynamicComponents/BlogLinkDynamic.js'); }));
+const BlogLink = ({ title = '', desc = '', isInProgress = false, href, }) => {
+    return (jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(BlogLinkStatic.default, { title: title, desc: desc, isInProgress: isInProgress, href: href }), children: jsxRuntime.jsx(BlogLinkDynamic, { title: title, desc: desc, isInProgress: isInProgress, href: href }) }));
 };
 
 exports.default = BlogLink;

package/dist/cjs/components/BlogLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogLink.js","sources":["../../../src/components/BlogLink.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { animated, useSpring } from '@react-spring/web';\n\nimport styles from '../styles/BlogLink.module.scss';\n\nimport { generateUrlForBlogTitle } from '../utils';\n\ninterface Properties {\n\ttitle: string;\n\tdesc?: string;\n\tisInProgress?: boolean;\n\thref?: string;\n}\n\nconst DEFAULT_LINE_END = 18;\nconst DEFAULT_POLYLINE_POINTS = '12 5, 19 12, 12 19';\nconst MOVED_POLYLINE_POINTS = '15 5, 22 12, 15 19';\n\nconst BlogLink = ({ title = '', desc = '', isInProgress = false, href }: Properties) => {\n\tconst [isHovered, setIsHovered] = useState(false);\n\n\tconst link = href || `/blog/${generateUrlForBlogTitle(title)}`;\n\n\tconst svgColor = useSpring({\n\t\tstroke: isHovered ? '#4242fa' : 'transparent',\n\t});\n\n\tconst polyLine = useSpring({\n\t\tpoints: isHovered ? MOVED_POLYLINE_POINTS : DEFAULT_POLYLINE_POINTS,\n\t\tconfig: { duration: 200 },\n\t});\n\n\tconst lineEnd = useSpring({\n\t\tx2: isHovered ? `${DEFAULT_LINE_END + 2}` : `${DEFAULT_LINE_END}`,\n\t\tconfig: { duration: 200 },\n\t});\n\n\tif (isInProgress) return null;\n\n\treturn (\n\t\t<a\n\t\t\tclassName={styles['blog-link']}\n\t\t\tonMouseEnter={() => setIsHovered(true)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\thref={link}\n\t\t\trel=\"noopener noreferrer\"\n\t\t>\n\t\t\t<h6 className={styles['blog-link__title']}>{title}</h6>\n\t\t\t<p className={styles['blog-link__description']}>{desc}</p>\n\t\t\t<div className={styles['blog-link__read-more']}>\n\t\t\t\t<p>Read More</p>\n\t\t\t\t<animated.svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"18px\"\n\t\t\t\t\theight=\"18px\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tstyle={svgColor as any}\n\t\t\t\t>\n\t\t\t\t\t<animated.line x1=\"5\" y1=\"12\" y2=\"12\" x2={lineEnd.x2 as any}></animated.line>\n\t\t\t\t\t<animated.polyline points={polyLine.points as any} />\n\t\t\t\t</animated.svg>\n\t\t\t</div>\n\t\t</a>\n\t);\n};\n\nexport default BlogLink;\n"],"names":["useState","generateUrlForBlogTitle","useSpring","_jsxs","styles","_jsx","animated"],"mappings":";;;;;;;;;;AAiBA,MAAM,gBAAgB,GAAG,EAAE;AAC3B,MAAM,uBAAuB,GAAG,oBAAoB;AACpD,MAAM,qBAAqB,GAAG,oBAAoB;AAElD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,YAAY,GAAG,KAAK,EAAE,IAAI,EAAc,KAAI;IACtF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAEjD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAA,MAAA,EAASC,6BAAuB,CAAC,KAAK,CAAC,CAAA,CAAE;IAE9D,MAAM,QAAQ,GAAGC,aAAS,CAAC;QAC1B,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa;AAC7C,KAAA,CAAC;IAEF,MAAM,QAAQ,GAAGA,aAAS,CAAC;QAC1B,MAAM,EAAE,SAAS,GAAG,qBAAqB,GAAG,uBAAuB;AACnE,QAAA,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AACzB,KAAA,CAAC;IAEF,MAAM,OAAO,GAAGA,aAAS,CAAC;AACzB,QAAA,EAAE,EAAE,SAAS,GAAG,CAAA,EAAG,gBAAgB,GAAG,CAAC,EAAE,GAAG,CAAA,EAAG,gBAAgB,CAAA,CAAE;AACjE,QAAA,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AACzB,KAAA,CAAC;AAEF,IAAA,IAAI,YAAY;AAAE,QAAA,OAAO,IAAI;AAE7B,IAAA,QACCC,eAAA,CAAA,GAAA,EAAA,EACC,SAAS,EAAEC,uBAAM,CAAC,WAAW,CAAC,EAC9B,YAAY,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EACvC,IAAI,EAAE,IAAI,EACV,GAAG,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAEzBC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAED,uBAAM,CAAC,kBAAkB,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAM,EACvDC,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAED,uBAAM,CAAC,wBAAwB,CAAC,EAAA,QAAA,EAAG,IAAI,EAAA,CAAK,EAC1DD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,uBAAM,CAAC,sBAAsB,CAAC,aAC7CC,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,WAAA,EAAA,CAAgB,EAChBF,eAAA,CAACG,YAAQ,CAAC,GAAG,EAAA,EACZ,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,KAAK,EAAE,QAAe,aAEtBD,cAAA,CAACC,YAAQ,CAAC,IAAI,EAAA,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAE,OAAO,CAAC,EAAS,EAAA,CAAkB,EAC7ED,cAAA,CAACC,YAAQ,CAAC,QAAQ,IAAC,MAAM,EAAE,QAAQ,CAAC,MAAa,EAAA,CAAI,CAAA,EAAA,CACvC,CAAA,EAAA,CACV,CAAA,EAAA,CACH;AAEN;;;;"}
+{"version":3,"file":"BlogLink.js","sources":["../../../src/components/BlogLink.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense } from 'react';\nimport BlogLinkStatic from '../staticComponents/BlogLinkStatic';\n\nconst BlogLinkDynamic = lazy(\n\t() => import('../dynamicComponents/BlogLinkDynamic')\n);\n\ninterface BlogLinkProperties {\n\ttitle: string;\n\tdesc?: string;\n\tisInProgress?: boolean;\n\thref?: string;\n}\n\nconst BlogLink = ({\n\ttitle = '',\n\tdesc = '',\n\tisInProgress = false,\n\thref,\n}: BlogLinkProperties) => {\n\treturn (\n\t\t<Suspense\n\t\t\tfallback={\n\t\t\t\t<BlogLinkStatic\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tdesc={desc}\n\t\t\t\t\tisInProgress={isInProgress}\n\t\t\t\t\thref={href}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<BlogLinkDynamic\n\t\t\t\ttitle={title}\n\t\t\t\tdesc={desc}\n\t\t\t\tisInProgress={isInProgress}\n\t\t\t\thref={href}\n\t\t\t/>\n\t\t</Suspense>\n\t);\n};\n\nexport default BlogLink;\n"],"names":["lazy","_jsx","Suspense","BlogLinkStatic"],"mappings":";;;;;;;;AAKA,MAAM,eAAe,GAAGA,UAAI,CAC3B,MAAM,oDAAO,yCAAsC,KAAC,CACpD;AASD,MAAM,QAAQ,GAAG,CAAC,EACjB,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,YAAY,GAAG,KAAK,EACpB,IAAI,GACgB,KAAI;IACxB,QACCC,eAACC,cAAQ,EAAA,EACR,QAAQ,EACPD,cAAA,CAACE,sBAAc,EAAA,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EAAA,CACT,EAAA,QAAA,EAGHF,eAAC,eAAe,EAAA,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EAAA,CACT,EAAA,CACQ;AAEb;;;;"}

package/dist/cjs/components/BlogSection.js

@@ -5,36 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var BlogSection_module = require('../styles/BlogSection.module.scss.js');
-var index = require('../utils/index.js');
+var BlogSectionStatic = require('../staticComponents/BlogSectionStatic.js');
 
-const BlogSection = react.forwardRef(({ title = '', category = '', children = null, increaseMarginBottom = false, }, forwardedReference) => {
-    const titleWithCategory = category ? `${category} - ${title}` : title;
-    const id = index.generateIdForBlogTitle(titleWithCategory);
-    const parentReference = react.useRef(null);
-    const childReferences = react.useRef([]);
-    react.useImperativeHandle(forwardedReference, () => ({
-        parentRef: parentReference.current,
-        childRefs: childReferences.current,
-    }));
-    const handleChildReferences = (element) => {
-        if (!element)
-            return;
-        const { parentRef: subParentReference } = element;
-        if (!subParentReference)
-            return;
-        childReferences.current.push(subParentReference);
-    };
-    return (jsxRuntime.jsxs("div", { className: `${BlogSection_module.default['blog-section']}
-					${increaseMarginBottom
-            ? BlogSection_module.default['margin-bottom--9']
-            : BlogSection_module.default['margin-bottom--6']}`, "data-title": title, "data-id": id, ref: parentReference, children: [title ? (jsxRuntime.jsx("h4", { className: BlogSection_module.default['blog-section__title'], children: title })) : null, react.Children.map(children, child => {
-                if (!react.isValidElement(child))
-                    return child;
-                return react.cloneElement(child, {
-                    ref: handleChildReferences,
-                });
-            })] }));
+const BlogSectionDynamic = react.lazy(() => Promise.resolve().then(function () { return require('../dynamicComponents/BlogSectionDynamic.js'); }));
+const BlogSection = react.forwardRef(({ title = '', category = '', children = null, increaseMarginBottom = false, }, ref) => {
+    return (jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(BlogSectionStatic.default, { title: title, category: category, increaseMarginBottom: increaseMarginBottom, children: children }), children: jsxRuntime.jsx(BlogSectionDynamic, { ref: ref, title: title, category: category, increaseMarginBottom: increaseMarginBottom, children: children }) }));
 });
 BlogSection.displayName = 'BlogSection';
 

package/dist/cjs/components/BlogSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSection.js","sources":["../../../src/components/BlogSection.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './Blog';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string;\n\tcategory?: string;\n\tchildren?: ReactNode;\n\tincreaseMarginBottom?: boolean;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{\n\t\t\ttitle = '',\n\t\t\tcategory = '',\n\t\t\tchildren = null,\n\t\t\tincreaseMarginBottom = false,\n\t\t}: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleWithCategory = category ? `${category} - ${title}` : title;\n\t\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\t\tconst parentReference = useRef<ForwardedReference['parentRef']>(null);\n\t\tconst childReferences = useRef<ForwardedReference['childRefs']>([]);\n\n\t\tuseImperativeHandle(forwardedReference, () => ({\n\t\t\tparentRef: parentReference.current!,\n\t\t\tchildRefs: childReferences.current!,\n\t\t}));\n\n\t\tconst handleChildReferences = (element: ForwardedReference | null) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef: subParentReference } = element;\n\t\t\tif (!subParentReference) return;\n\t\t\tchildReferences.current.push(subParentReference);\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={`${styles['blog-section']}\n\t\t\t\t\t${\n\t\t\t\t\t\tincreaseMarginBottom\n\t\t\t\t\t\t\t? styles['margin-bottom--9']\n\t\t\t\t\t\t\t: styles['margin-bottom--6']\n\t\t\t\t\t}`}\n\t\t\t\tdata-title={title}\n\t\t\t\tdata-id={id}\n\t\t\t\tref={parentReference}\n\t\t\t>\n\t\t\t\t{title ? (\n\t\t\t\t\t<h4 className={styles['blog-section__title']}>{title}</h4>\n\t\t\t\t) : null}\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleChildReferences,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nBlogSection.displayName = 'BlogSection';\n\nexport default BlogSection;\n"],"names":["forwardRef","generateIdForBlogTitle","useRef","useImperativeHandle","_jsxs","styles","_jsx","Children","isValidElement","cloneElement"],"mappings":";;;;;;;;;AAyBA,MAAM,WAAW,GAAGA,gBAAU,CAC7B,CACC,EACC,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,EACf,oBAAoB,GAAG,KAAK,GACZ,EACjB,kBAAkB,KACf;AACH,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACrE,IAAA,MAAM,EAAE,GAAGC,4BAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,MAAM,eAAe,GAAGC,YAAM,CAAkC,IAAI,CAAC;AACrE,IAAA,MAAM,eAAe,GAAGA,YAAM,CAAkC,EAAE,CAAC;AAEnE,IAAAC,yBAAmB,CAAC,kBAAkB,EAAE,OAAO;QAC9C,SAAS,EAAE,eAAe,CAAC,OAAQ;QACnC,SAAS,EAAE,eAAe,CAAC,OAAQ;AACnC,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAkC,KAAI;AACpE,QAAA,IAAI,CAAC,OAAO;YAAE;AACd,QAAA,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,OAAO;AACjD,QAAA,IAAI,CAAC,kBAAkB;YAAE;AACzB,QAAA,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC;AACjD,IAAA,CAAC;IAED,QACCC,yBACC,SAAS,EAAE,GAAGC,0BAAM,CAAC,cAAc,CAAC;OAElC;AACC,cAAEA,0BAAM,CAAC,kBAAkB;cACzBA,0BAAM,CAAC,kBAAkB,CAC7B,CAAA,CAAE,EAAA,YAAA,EACS,KAAK,EAAA,SAAA,EACR,EAAE,EACX,GAAG,EAAE,eAAe,EAAA,QAAA,EAAA,CAEnB,KAAK,IACLC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAED,0BAAM,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACPE,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,IAAG;AAC/B,gBAAA,IAAI,CAACC,oBAAc,CAAC,KAAK,CAAC;AAAE,oBAAA,OAAO,KAAK;gBACxC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AAC1B,oBAAA,GAAG,EAAE,qBAAqB;AACW,iBAAA,CAAC;YACxC,CAAC,CAAC,CAAA,EAAA,CACG;AAER,CAAC;AAGF,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"BlogSection.js","sources":["../../../src/components/BlogSection.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, lazy, Suspense } from 'react';\nimport type { ReactNode } from 'react';\nimport BlogSectionStatic from '../staticComponents/BlogSectionStatic';\nimport type { ForwardedReference } from '../dynamicComponents/BlogDynamic';\nexport type { ForwardedReference };\n\nconst BlogSectionDynamic = lazy(\n\t() => import('../dynamicComponents/BlogSectionDynamic')\n);\n\ninterface BlogSectionProperties {\n\ttitle?: string;\n\tcategory?: string;\n\tchildren?: ReactNode;\n\tincreaseMarginBottom?: boolean;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogSectionProperties>(\n\t(\n\t\t{\n\t\t\ttitle = '',\n\t\t\tcategory = '',\n\t\t\tchildren = null,\n\t\t\tincreaseMarginBottom = false,\n\t\t},\n\t\tref\n\t) => {\n\t\treturn (\n\t\t\t<Suspense\n\t\t\t\tfallback={\n\t\t\t\t\t<BlogSectionStatic\n\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\tcategory={category}\n\t\t\t\t\t\tincreaseMarginBottom={increaseMarginBottom}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</BlogSectionStatic>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<BlogSectionDynamic\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tcategory={category}\n\t\t\t\t\tincreaseMarginBottom={increaseMarginBottom}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</BlogSectionDynamic>\n\t\t\t</Suspense>\n\t\t);\n\t}\n);\n\nBlogSection.displayName = 'BlogSection';\n\nexport default BlogSection;\n"],"names":["lazy","forwardRef","_jsx","Suspense","BlogSectionStatic"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB,GAAGA,UAAI,CAC9B,MAAM,oDAAO,4CAAyC,KAAC,CACvD;AASD,MAAM,WAAW,GAAGC,gBAAU,CAC7B,CACC,EACC,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,EACf,oBAAoB,GAAG,KAAK,GAC5B,EACD,GAAG,KACA;IACH,QACCC,eAACC,cAAQ,EAAA,EACR,QAAQ,EACPD,cAAA,CAACE,yBAAiB,EAAA,EACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,EAAA,QAAA,EAEzC,QAAQ,EAAA,CACU,YAGrBF,cAAA,CAAC,kBAAkB,IAClB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,YAEzC,QAAQ,EAAA,CACW,EAAA,CACX;AAEb,CAAC;AAGF,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/cjs/components/Callout.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var Callout_module = require('../styles/Callout.module.scss.js');
+var CalloutDynamic = require('../dynamicComponents/CalloutDynamic.js');
 
-const Callout = ({ children, type = 'info', hasMarginUp = false, hasMarginDown = false }) => {
-    const className = `${Callout_module.default.callout} ${Callout_module.default[`callout--${type}`]} ${hasMarginUp ? Callout_module.default['margin-top--1'] : ''} ${hasMarginDown ? Callout_module.default['margin-bottom--2'] : ''}`;
-    return (jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx("div", { className: Callout_module.default.callout__icon }), jsxRuntime.jsx("div", { className: Callout_module.default.callout__wrapper, children: children })] }));
+const Callout = ({ children, type = 'info', hasMarginUp = false, hasMarginDown = false, }) => {
+    return (jsxRuntime.jsx(CalloutDynamic.default, { type: type, hasMarginUp: hasMarginUp, hasMarginDown: hasMarginDown, children: children }));
 };
 
 exports.default = Callout;

package/dist/cjs/components/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","sources":["../../../src/components/Callout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from '../styles/Callout.module.scss';\n\ninterface CalloutProperties {\n\tchildren?: ReactNode;\n\ttype: 'info' | 'warning' | 'error' | 'success';\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst Callout = ({ children, type = 'info',\n\thasMarginUp = false,\n\thasMarginDown = false\n}: CalloutProperties) => {\n\tconst className = `${styles.callout} ${styles[`callout--${type}`]} ${\n\t\thasMarginUp ? styles['margin-top--1'] : ''\n\t} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`;\n\treturn (\n\t\t<div className={className}>\n\t\t\t<div className={styles.callout__icon}/>\n\t\t\t<div className={styles.callout__wrapper}>{children}</div>\n\t\t</div>\n\t);\n};\n\nexport default Callout;\n"],"names":["styles","_jsxs","_jsx"],"mappings":";;;;;;;AAWA,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,EACzC,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,EACF,KAAI;AACvB,IAAA,MAAM,SAAS,GAAG,CAAA,EAAGA,sBAAM,CAAC,OAAO,IAAIA,sBAAM,CAAC,CAAA,SAAA,EAAY,IAAI,EAAE,CAAC,CAAA,CAAA,EAChE,WAAW,GAAGA,sBAAM,CAAC,eAAe,CAAC,GAAG,EACzC,CAAA,CAAA,EAAI,aAAa,GAAGA,sBAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE;IACrD,QACCC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,aACxBC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,sBAAM,CAAC,aAAa,GAAG,EACvCE,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,sBAAM,CAAC,gBAAgB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA,EAAA,CACpD;AAER;;;;"}
+{"version":3,"file":"Callout.js","sources":["../../../src/components/Callout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CalloutDynamic from '../dynamicComponents/CalloutDynamic';\n\ninterface CalloutProperties {\n\tchildren?: ReactNode;\n\ttype: 'info' | 'warning' | 'error' | 'success';\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst Callout = ({\n\tchildren,\n\ttype = 'info',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: CalloutProperties) => {\n\treturn (\n\t\t<CalloutDynamic\n\t\t\ttype={type}\n\t\t\thasMarginUp={hasMarginUp}\n\t\t\thasMarginDown={hasMarginDown}\n\t\t>\n\t\t\t{children}\n\t\t</CalloutDynamic>\n\t);\n};\n\nexport default Callout;\n"],"names":["_jsx","CalloutDynamic"],"mappings":";;;;;;;AAUA,MAAM,OAAO,GAAG,CAAC,EAChB,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACF,KAAI;AACvB,IAAA,QACCA,cAAA,CAACC,sBAAc,IACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,YAE3B,QAAQ,EAAA,CACO;AAEnB;;;;"}

package/dist/cjs/components/CodeBlock.js

@@ -5,33 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var reactSyntaxHighlighter = require('react-syntax-highlighter');
-var prism = require('react-syntax-highlighter/dist/esm/styles/prism');
-require('prismjs/themes/prism-tomorrow.css');
-var CodeBlock_module = require('../styles/CodeBlock.module.scss.js');
+var CodeBlockStatic = require('../staticComponents/CodeBlockStatic.js');
 
-const SH = reactSyntaxHighlighter.Prism;
+const CodeBlockDynamic = react.lazy(() => Promise.resolve().then(function () { return require('../dynamicComponents/CodeBlockDynamic.js'); }));
 const CodeBlock = ({ language = 'javascript', code = '', hasMarginUp = false, hasMarginDown = false, }) => {
-    const [isCopyMode, setCopyMode] = react.useState(false);
-    const copyToClipboard = async () => {
-        try {
-            await navigator.clipboard.writeText(code);
-            setCopyMode(true);
-            setTimeout(() => {
-                setCopyMode(false);
-            }, 1000);
-        }
-        catch (error) {
-            console.error('Failed to copy:', error);
-        }
-    };
-    const lineNumberStyle = {
-        color: '#95a1b1',
-        fontSize: '0.9em',
-        paddingRight: '1em',
-        marginRight: '8px',
-    };
-    return (jsxRuntime.jsxs("div", { className: `${CodeBlock_module.default['code-block']} ${hasMarginUp ? CodeBlock_module.default['margin-top--1'] : ''} ${hasMarginDown ? CodeBlock_module.default['margin-bottom--2'] : ''}`, children: [jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__header'], children: [jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__header__title'], children: language }), jsxRuntime.jsx("div", { className: `${CodeBlock_module.default['code-block__header__copy']} ${isCopyMode ? CodeBlock_module.default['code-block__header__copy--active'] : ''}`, onClick: copyToClipboard })] }), jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__wrapper'], children: jsxRuntime.jsx(SH, { language: language, style: prism.dracula, showLineNumbers: true, lineNumberStyle: lineNumberStyle, children: code }) })] }));
+    return (jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(CodeBlockStatic.default, { language: language, code: code, hasMarginUp: hasMarginUp, hasMarginDown: hasMarginDown }), children: jsxRuntime.jsx(CodeBlockDynamic, { language: language, code: code, hasMarginUp: hasMarginUp, hasMarginDown: hasMarginDown }) }));
 };
 
 exports.default = CodeBlock;

package/dist/cjs/components/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport 'prismjs/themes/prism-tomorrow.css';\n\nconst SH = SyntaxHighlighter as any;\n\nimport styles from '../styles/CodeBlock.module.scss';\n\ninterface Properties {\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n\tlanguage?: string;\n\tcode?: string;\n}\n\nconst CodeBlock = ({\n\tlanguage = 'javascript',\n\tcode = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: Properties) => {\n\tconst [isCopyMode, setCopyMode] = useState(false);\n\n\tconst copyToClipboard = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopyMode(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetCopyMode(false);\n\t\t\t}, 1000);\n\t\t} catch (error) {\n\t\t\tconsole.error('Failed to copy:', error);\n\t\t}\n\t};\n\n\tconst lineNumberStyle = {\n\t\tcolor: '#95a1b1',\n\t\tfontSize: '0.9em',\n\t\tpaddingRight: '1em',\n\t\tmarginRight: '8px',\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t<div className={styles['code-block__header']}>\n\t\t\t\t<div className={styles['code-block__header__title']}>{language}</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles['code-block__header__copy']} ${\n\t\t\t\t\t\tisCopyMode ? styles['code-block__header__copy--active'] : ''\n\t\t\t\t\t}`}\n\t\t\t\t\tonClick={copyToClipboard}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className={styles['code-block__wrapper']}>\n\t\t\t\t<SH\n\t\t\t\t\tlanguage={language}\n\t\t\t\t\tstyle={dracula}\n\t\t\t\t\tshowLineNumbers\n\t\t\t\t\tlineNumberStyle={lineNumberStyle}\n\t\t\t\t>\n\t\t\t\t\t{code}\n\t\t\t\t</SH>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default CodeBlock;\n"],"names":["SyntaxHighlighter","useState","_jsxs","styles","_jsx","dracula"],"mappings":";;;;;;;;;;;AAQA,MAAM,EAAE,GAAGA,4BAAwB;AAWnC,MAAM,SAAS,GAAG,CAAC,EAClB,QAAQ,GAAG,YAAY,EACvB,IAAI,GAAG,EAAE,EACT,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACT,KAAI;IAChB,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,eAAe,GAAG,YAAW;AAClC,QAAA,IAAI;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;YACzC,WAAW,CAAC,IAAI,CAAC;YACjB,UAAU,CAAC,MAAK;gBACf,WAAW,CAAC,KAAK,CAAC;YACnB,CAAC,EAAE,IAAI,CAAC;QACT;QAAE,OAAO,KAAK,EAAE;AACf,YAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC;QACxC;AACD,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG;AACvB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,WAAW,EAAE,KAAK;KAClB;IAED,QACCC,eAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,wBAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAGA,wBAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAGA,wBAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,EAAA,QAAA,EAAA,CAEFD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,wBAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAA,CAC3CC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,2BAA2B,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EACrEC,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGD,wBAAM,CAAC,0BAA0B,CAAC,CAAA,CAAA,EAC/C,UAAU,GAAGA,wBAAM,CAAC,kCAAkC,CAAC,GAAG,EAC3D,CAAA,CAAE,EACF,OAAO,EAAE,eAAe,EAAA,CACvB,CAAA,EAAA,CACG,EACNC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAC5CC,cAAA,CAAC,EAAE,EAAA,EACF,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAEC,aAAO,EACd,eAAe,EAAA,IAAA,EACf,eAAe,EAAE,eAAe,EAAA,QAAA,EAE/B,IAAI,EAAA,CACD,EAAA,CACA,CAAA,EAAA,CACD;AAER;;;;"}
+{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense } from 'react';\nimport CodeBlockStatic from '../staticComponents/CodeBlockStatic';\n\nconst CodeBlockDynamic = lazy(\n\t() => import('../dynamicComponents/CodeBlockDynamic')\n);\n\ninterface CodeBlockProperties {\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n\tlanguage?: string;\n\tcode?: string;\n}\n\nconst CodeBlock = ({\n\tlanguage = 'javascript',\n\tcode = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: CodeBlockProperties) => {\n\treturn (\n\t\t<Suspense\n\t\t\tfallback={\n\t\t\t\t<CodeBlockStatic\n\t\t\t\t\tlanguage={language}\n\t\t\t\t\tcode={code}\n\t\t\t\t\thasMarginUp={hasMarginUp}\n\t\t\t\t\thasMarginDown={hasMarginDown}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<CodeBlockDynamic\n\t\t\t\tlanguage={language}\n\t\t\t\tcode={code}\n\t\t\t\thasMarginUp={hasMarginUp}\n\t\t\t\thasMarginDown={hasMarginDown}\n\t\t\t/>\n\t\t</Suspense>\n\t);\n};\n\nexport default CodeBlock;\n"],"names":["lazy","_jsx","Suspense","CodeBlockStatic"],"mappings":";;;;;;;;AAKA,MAAM,gBAAgB,GAAGA,UAAI,CAC5B,MAAM,oDAAO,0CAAuC,KAAC,CACrD;AASD,MAAM,SAAS,GAAG,CAAC,EAClB,QAAQ,GAAG,YAAY,EACvB,IAAI,GAAG,EAAE,EACT,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;IACzB,QACCC,eAACC,cAAQ,EAAA,EACR,QAAQ,EACPD,cAAA,CAACE,uBAAe,EAAA,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAAA,CAC3B,EAAA,QAAA,EAGHF,eAAC,gBAAgB,EAAA,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAAA,CAC3B,EAAA,CACQ;AAEb;;;;"}

package/dist/cjs/components/Mermaid.js

@@ -5,54 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var mermaid = require('mermaid');
-var Mermaid_module = require('../styles/Mermaid.module.scss.js');
+var MermaidStatic = require('../staticComponents/MermaidStatic.js');
 
-mermaid.initialize({
-    startOnLoad: false,
-    theme: 'default',
-    timeline: {
-        useMaxWidth: true,
-        diagramMarginX: 0,
-    },
-    flowchart: {
-        useMaxWidth: true,
-        diagramPadding: 0,
-    },
-    sequence: {
-        useMaxWidth: true,
-        diagramMarginX: 0,
-    },
-});
+const MermaidDynamic = react.lazy(() => Promise.resolve().then(function () { return require('../dynamicComponents/MermaidDynamic.js'); }));
 const Mermaid = ({ code = '', id = '', hasMarginUp = false, hasMarginDown = false, }) => {
-    const [enabled, setEnabled] = react.useState(false);
-    const mermaidReference = react.useRef(null);
-    const initializeMermaid = react.useCallback(async () => {
-        try {
-            if (!mermaidReference.current || !code)
-                return;
-            const { svg, bindFunctions } = await mermaid.render(`mermaid-diagram-${id}`, code);
-            if (!svg)
-                return;
-            mermaidReference.current.innerHTML = svg || '';
-            bindFunctions?.(mermaidReference.current);
-            setEnabled(true);
-        }
-        catch (error) {
-            console.error('Failed to render Mermaid diagram:', error);
-        }
-    }, [code, id]);
-    react.useEffect(() => {
-        if (!code || !mermaidReference.current)
-            return;
-        const timer = setTimeout(async () => {
-            await initializeMermaid();
-        }, 100);
-        return () => clearTimeout(timer);
-    }, [code, initializeMermaid]);
-    return (jsxRuntime.jsxs("div", { className: `${Mermaid_module.default.mermaid}
-				${hasMarginUp ? Mermaid_module.default['margin-top--1'] : ''}
-				${hasMarginDown ? Mermaid_module.default['margin-bottom--2'] : ''}`, children: [enabled ? null : jsxRuntime.jsx("p", { children: "Diagram Loading..." }), jsxRuntime.jsx("div", { ref: mermaidReference, id: id })] }));
+    return (jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(MermaidStatic.default, { code: code, id: id, hasMarginUp: hasMarginUp, hasMarginDown: hasMarginDown }), children: jsxRuntime.jsx(MermaidDynamic, { code: code, id: id, hasMarginUp: hasMarginUp, hasMarginDown: hasMarginDown }) }));
 };
 
 exports.default = Mermaid;

package/dist/cjs/components/Mermaid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mermaid.js","sources":["../../../src/components/Mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport mermaid from 'mermaid';\n\nimport styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nmermaid.initialize({\n\tstartOnLoad: false,\n\ttheme: 'default',\n\ttimeline: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n\tflowchart: {\n\t\tuseMaxWidth: true,\n\t\tdiagramPadding: 0,\n\t},\n\tsequence: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n});\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\tconst [enabled, setEnabled] = useState(false);\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\n\tconst initializeMermaid = useCallback(async () => {\n\t\ttry {\n\t\t\tif (!mermaidReference.current || !code) return;\n\t\t\tconst { svg, bindFunctions } = await mermaid.render(\n\t\t\t\t`mermaid-diagram-${id}`,\n\t\t\t\tcode\n\t\t\t);\n\t\t\tif (!svg) return;\n\t\t\tmermaidReference.current.innerHTML = svg || '';\n\t\t\tbindFunctions?.(mermaidReference.current);\n\t\t\tsetEnabled(true);\n\t\t} catch (error) {\n\t\t\tconsole.error('Failed to render Mermaid diagram:', error);\n\t\t}\n\t}, [code, id]);\n\n\tuseEffect(() => {\n\t\tif (!code || !mermaidReference.current) return;\n\t\tconst timer = setTimeout(async () => {\n\t\t\tawait initializeMermaid();\n\t\t}, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, initializeMermaid]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mermaid}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t>\n\t\t\t{enabled ? null : <p>Diagram Loading...</p>}\n\t\t\t<div ref={mermaidReference} id={id}></div>\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","styles","_jsx"],"mappings":";;;;;;;;;AAeA,OAAO,CAAC,UAAU,CAAC;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,QAAQ,EAAE;AACT,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;AACV,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,IAAA,QAAQ,EAAE;AACT,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,CAAA,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EAChB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,EAAE,EACP,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACF,KAAI;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC7C,IAAA,MAAM,gBAAgB,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAErD,IAAA,MAAM,iBAAiB,GAAGC,iBAAW,CAAC,YAAW;AAChD,QAAA,IAAI;AACH,YAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,IAAI;gBAAE;AACxC,YAAA,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,MAAM,OAAO,CAAC,MAAM,CAClD,CAAA,gBAAA,EAAmB,EAAE,EAAE,EACvB,IAAI,CACJ;AACD,YAAA,IAAI,CAAC,GAAG;gBAAE;YACV,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,GAAG,IAAI,EAAE;AAC9C,YAAA,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC;YACzC,UAAU,CAAC,IAAI,CAAC;QACjB;QAAE,OAAO,KAAK,EAAE;AACf,YAAA,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC;QAC1D;AACD,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEdC,eAAS,CAAC,MAAK;AACd,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO;YAAE;AACxC,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,YAAW;YACnC,MAAM,iBAAiB,EAAE;QAC1B,CAAC,EAAE,GAAG,CAAC;AACP,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;AAE7B,IAAA,QACCC,eAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,sBAAM,CAAC,OAAO;MACzB,WAAW,GAAGA,sBAAM,CAAC,eAAe,CAAC,GAAG,EAAE;AAC1C,IAAA,EAAA,aAAa,GAAGA,sBAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CAEnD,OAAO,GAAG,IAAI,GAAGC,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAyB,EAC3CA,wBAAK,GAAG,EAAE,gBAAgB,EAAE,EAAE,EAAE,EAAE,EAAA,CAAQ,CAAA,EAAA,CACrC;AAER;;;;"}
+{"version":3,"file":"Mermaid.js","sources":["../../../src/components/Mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense } from 'react';\nimport MermaidStatic from '../staticComponents/MermaidStatic';\n\nconst MermaidDynamic = lazy(\n\t() => import('../dynamicComponents/MermaidDynamic')\n);\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\treturn (\n\t\t<Suspense\n\t\t\tfallback={\n\t\t\t\t<MermaidStatic\n\t\t\t\t\tcode={code}\n\t\t\t\t\tid={id}\n\t\t\t\t\thasMarginUp={hasMarginUp}\n\t\t\t\t\thasMarginDown={hasMarginDown}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<MermaidDynamic\n\t\t\t\tcode={code}\n\t\t\t\tid={id}\n\t\t\t\thasMarginUp={hasMarginUp}\n\t\t\t\thasMarginDown={hasMarginDown}\n\t\t\t/>\n\t\t</Suspense>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["lazy","_jsx","Suspense","MermaidStatic"],"mappings":";;;;;;;;AAKA,MAAM,cAAc,GAAGA,UAAI,CAC1B,MAAM,oDAAO,wCAAqC,KAAC,CACnD;AASD,MAAM,OAAO,GAAG,CAAC,EAChB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,EAAE,EACP,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACF,KAAI;IACvB,QACCC,eAACC,cAAQ,EAAA,EACR,QAAQ,EACPD,cAAA,CAACE,qBAAa,EAAA,EACb,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAAA,CAC3B,EAAA,QAAA,EAGHF,eAAC,cAAc,EAAA,EACd,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAAA,CAC3B,EAAA,CACQ;AAEb;;;;"}