@san-siva/blogkit 1.1.30 → 1.1.31

package/dist/esm/staticComponents/BlogSectionStatic.js

@@ -3,9 +3,10 @@ import styles from '../styles/BlogSection.module.scss.js';
 import { generateIdForBlogTitle } from '../utils/index.js';
 
 const BlogSectionStatic = ({ title = '', category = '', children = null, }) => {
-    const titleWithCategory = category ? `${category} - ${title}` : title;
+    const titleString = typeof title === 'string' ? title : '';
+    const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
     const id = generateIdForBlogTitle(titleWithCategory);
-    return (jsxs("div", { className: styles['blog-section'], "data-title": title, "data-id": id, children: [title ? (jsx("h3", { className: styles['blog-section__title'], children: title })) : null, children] }));
+    return (jsxs("div", { className: styles['blog-section'], "data-title": titleString, "data-id": id, children: [title ? (jsx("h3", { className: styles['blog-section__title'], children: title })) : null, children] }));
 };
 
 export { BlogSectionStatic as default };

package/dist/esm/staticComponents/BlogSectionStatic.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleWithCategory = category ? `${category} - ${title}` : title;\n\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\treturn (\n\t\t<div className={styles['blog-section']} data-title={title} data-id={id}>\n\t\t\t{title ? (\n\t\t\t\t<h3 className={styles['blog-section__title']}>{title}</h3>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport default BlogSectionStatic;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,GACc,KAAI;AACjC,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACrE,IAAA,MAAM,EAAE,GAAG,sBAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,YAAA,EAAc,KAAK,aAAW,EAAE,EAAA,QAAA,EAAA,CACpE,KAAK,IACLC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACP,QAAQ,CAAA,EAAA,CACJ;AAER;;;;"}
+{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title : '';\n\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\treturn (\n\t\t<div className={styles['blog-section']} data-title={titleString} data-id={id}>\n\t\t\t{title ? (\n\t\t\t\t<h3 className={styles['blog-section__title']}>{title}</h3>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport default BlogSectionStatic;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,GACc,KAAI;AACjC,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,EAAE;AAC1D,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,WAAW,CAAA,CAAE,GAAG,WAAW;AACjF,IAAA,MAAM,EAAE,GAAG,sBAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,YAAA,EAAc,WAAW,aAAW,EAAE,EAAA,QAAA,EAAA,CAC1E,KAAK,IACLC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACP,QAAQ,CAAA,EAAA,CACJ;AAER;;;;"}

package/dist/esm/staticComponents/CheckListStatic.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import styles from '../styles/CheckList.module.scss.js';
 
 const CheckListStatic = ({ items, hasMarginUp = false, hasMarginDown = false, }) => {
-    return (jsx("div", { className: `${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`, children: items.map((item) => (jsxs("div", { className: styles['check-list__item'], "data-id": item.id, children: [jsx("div", { className: `${styles['check-list__item__input']} ${item.isChecked ? styles['check-list__item__input--checked'] : ''}` }), jsx("div", { children: item.children })] }, item.id))) }));
+    return (jsx("div", { className: `${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`, children: items.map((item) => (jsxs("div", { className: styles['check-list__item'], "data-id": item.id, children: [jsx("div", { className: `${styles['check-list__item__input']} ${item.isChecked ? styles['check-list__item__input--checked'] : ''}` }), item.children] }, item.id))) }));
 };
 
 export { CheckListStatic as default };

package/dist/esm/staticComponents/CheckListStatic.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckListStatic.js","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from '../styles/CheckList.module.scss';\n\nexport interface CheckListItem {\n\tid: string;\n\tchildren: ReactNode;\n\tisChecked?: boolean;\n}\n\ninterface CheckListProperties {\n\titems: CheckListItem[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst CheckListStatic = ({\n\titems,\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: CheckListProperties) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['check-list']} ${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{items.map((item) => (\n\t\t\t\t<div key={item.id} className={styles['check-list__item']} data-id={item.id}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`${styles['check-list__item__input']} ${\n\t\t\t\t\t\t\titem.isChecked ? styles['check-list__item__input--checked'] : ''\n\t\t\t\t\t\t}`}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>{item.children}</div>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default CheckListStatic;\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAgBA,MAAM,eAAe,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;IACzB,QACCA,aACC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,YAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACfC,IAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAA,SAAA,EAAW,IAAI,CAAC,EAAE,EAAA,QAAA,EAAA,CACzED,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,kCAAkC,CAAC,GAAG,EAC/D,CAAA,CAAE,EAAA,CACD,EACFA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,IAAI,CAAC,QAAQ,EAAA,CAAO,CAAA,EAAA,EANjB,IAAI,CAAC,EAAE,CAOX,CACN,CAAC,EAAA,CACG;AAER;;;;"}
+{"version":3,"file":"CheckListStatic.js","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\n\nimport styles from '../styles/CheckList.module.scss';\n\nexport interface CheckListItem {\n\tid: string;\n\tchildren: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tisChecked?: boolean;\n}\n\ninterface CheckListProperties {\n\titems: CheckListItem[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst CheckListStatic = ({\n\titems,\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: CheckListProperties) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['check-list']} ${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{items.map((item) => (\n\t\t\t\t<div key={item.id} className={styles['check-list__item']} data-id={item.id}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`${styles['check-list__item__input']} ${\n\t\t\t\t\t\t\titem.isChecked ? styles['check-list__item__input--checked'] : ''\n\t\t\t\t\t\t}`}\n\t\t\t\t\t/>\n\t\t\t\t\t{item.children}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default CheckListStatic;\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAgBA,MAAM,eAAe,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;IACzB,QACCA,aACC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,EAAE,EAAA,QAAA,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACfC,IAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,aAAW,IAAI,CAAC,EAAE,EAAA,QAAA,EAAA,CACzED,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,kCAAkC,CAAC,GAAG,EAC/D,CAAA,CAAE,EAAA,CACD,EACD,IAAI,CAAC,QAAQ,CAAA,EAAA,EANL,IAAI,CAAC,EAAE,CAOX,CACN,CAAC,EAAA,CACG;AAER;;;;"}

package/dist/types/components/BlogSection.d.ts

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import type { ForwardedReference } from '../dynamicComponents/BlogDynamic';
 export type { ForwardedReference };
 interface BlogSectionProperties {
-    title?: string;
+    title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     category?: string;
     children?: ReactNode;
 }

package/dist/types/components/BlogSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSection.d.ts","sourceRoot":"","sources":["../../../src/components/BlogSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAMnC,UAAU,qBAAqB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,sHA8BhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BlogSection.d.ts","sourceRoot":"","sources":["../../../src/components/BlogSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAMnC,UAAU,qBAAqB;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,sHA8BhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/types/components/CheckList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckList.d.ts","sourceRoot":"","sources":["../../../src/components/CheckList.tsx"],"names":[],"mappings":"AAAA,OAAwB,EAAE,KAAK,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAE1F,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,GAAI,wCAIhB,mBAAmB,4CAIrB,CAAC;AAEF,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAC9B,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CheckList.d.ts","sourceRoot":"","sources":["../../../src/components/CheckList.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,KAAK,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAI1F,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,GAAI,wCAIhB,mBAAmB,4CAUrB,CAAC;AAEF,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAC9B,eAAe,SAAS,CAAC"}

package/dist/types/dynamicComponents/BlogSectionDynamic.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode, RefAttributes } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
 import type { ForwardedReference } from './BlogDynamic';
 interface BlogProperties {
-    title?: string;
+    title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     category?: string;
     children?: ReactNode;
 }

package/dist/types/dynamicComponents/BlogSectionDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,UAAU,cAAc;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,+FAmFhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIpF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,UAAU,cAAc;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,+FAoFhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/types/dynamicComponents/CheckListDynamic.d.ts

@@ -0,0 +1,9 @@
+import type { CheckListItem } from '../staticComponents/CheckListStatic';
+interface Properties {
+    items: CheckListItem[];
+    hasMarginUp?: boolean;
+    hasMarginDown?: boolean;
+}
+declare const CheckListDynamic: ({ items, hasMarginUp, hasMarginDown, }: Properties) => import("react/jsx-runtime").JSX.Element;
+export default CheckListDynamic;
+//# sourceMappingURL=CheckListDynamic.d.ts.map

package/dist/types/dynamicComponents/CheckListDynamic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/CheckListDynamic.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAGzE,UAAU,UAAU;IACnB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAKD,QAAA,MAAM,gBAAgB,GAAI,wCAIvB,UAAU,4CA2CZ,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/types/staticComponents/BlogSectionStatic.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 interface BlogSectionStaticProperties {
-    title?: string;
+    title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     category?: string;
     children?: ReactNode;
 }

package/dist/types/staticComponents/BlogSectionStatic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,2BAA2B;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,GAAI,gCAIxB,2BAA2B,4CAY7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"BlogSectionStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,UAAU,2BAA2B;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,GAAI,gCAIxB,2BAA2B,4CAa7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/types/staticComponents/CheckListStatic.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 export interface CheckListItem {
     id: string;
-    children: ReactNode;
+    children: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     isChecked?: boolean;
 }
 interface CheckListProperties {

package/dist/types/staticComponents/CheckListStatic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckListStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,GAAI,wCAItB,mBAAmB,4CAmBrB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CheckListStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1D,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,GAAI,wCAItB,mBAAmB,4CAmBrB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.30",
+	"version": "1.1.31",
 	"description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",

package/src/components/BlogSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef, lazy, Suspense } from 'react';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import BlogSectionStatic from '../staticComponents/BlogSectionStatic';
 import type { ForwardedReference } from '../dynamicComponents/BlogDynamic';
 export type { ForwardedReference };
@@ -11,7 +11,7 @@ const BlogSectionDynamic = lazy(
 );
 
 interface BlogSectionProperties {
-	title?: string;
+	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	category?: string;
 	children?: ReactNode;
 }

package/src/components/CheckList.tsx

@@ -1,5 +1,10 @@
+'use client';
+
+import { lazy, Suspense } from 'react';
 import CheckListStatic, { type CheckListItem } from '../staticComponents/CheckListStatic';
 
+const CheckListDynamic = lazy(() => import('../dynamicComponents/CheckListDynamic'));
+
 interface CheckListProperties {
 	items: CheckListItem[];
 	hasMarginUp?: boolean;
@@ -12,7 +17,13 @@ const CheckList = ({
 	hasMarginDown = false,
 }: CheckListProperties) => {
 	return (
-		<CheckListStatic items={items} hasMarginUp={hasMarginUp} hasMarginDown={hasMarginDown} />
+		<Suspense
+			fallback={
+				<CheckListStatic items={items} hasMarginUp={hasMarginUp} hasMarginDown={hasMarginDown} />
+			}
+		>
+			<CheckListDynamic items={items} hasMarginUp={hasMarginUp} hasMarginDown={hasMarginDown} />
+		</Suspense>
 	);
 };
 

package/src/dynamicComponents/BlogSectionDynamic.tsx

@@ -10,7 +10,7 @@ import {
 	useRef,
 } from 'react';
 
-import type { ReactNode, RefAttributes } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
 
 import styles from '../styles/BlogSection.module.scss';
 
@@ -18,7 +18,7 @@ import type { ForwardedReference } from './BlogDynamic';
 import { generateIdForBlogTitle, generateSectionHref } from '../utils';
 
 interface BlogProperties {
-	title?: string;
+	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	category?: string;
 	children?: ReactNode;
 }
@@ -28,7 +28,8 @@ const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
 		{ title = '', category = '', children = null }: BlogProperties,
 		forwardedReference
 	) => {
-		const titleWithCategory = category ? `${category} - ${title}` : title;
+		const titleString = typeof title === 'string' ? title : '';
+		const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
 		const id = generateIdForBlogTitle(titleWithCategory);
 
 		const parentReference = useRef<ForwardedReference['parentRef']>(null);
@@ -78,7 +79,7 @@ const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
 		return (
 			<div
 				className={styles['blog-section']}
-				data-title={title}
+				data-title={titleString}
 				data-id={id}
 				ref={parentReference}
 			>

package/src/dynamicComponents/CheckListDynamic.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import type { CheckListItem } from '../staticComponents/CheckListStatic';
+import styles from '../styles/CheckList.module.scss';
+
+interface Properties {
+	items: CheckListItem[];
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+}
+
+const CHECKBOX_SIZE = 12;
+const P_TAG_FONT_SIZE = 16;
+
+const CheckListDynamic = ({
+	items,
+	hasMarginUp = false,
+	hasMarginDown = false,
+}: Properties) => {
+	const [checkboxMarginTop, setCheckboxMarginTop] = useState(0);
+	const measureRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!measureRef.current) return;
+		const p = measureRef.current.querySelector('p');
+		if (!p) return;
+		const rawLineHeight = getComputedStyle(p).lineHeight;
+		const lineHeight =
+			rawLineHeight === 'normal'
+				? P_TAG_FONT_SIZE * 1.2
+				: parseFloat(rawLineHeight);
+		if (!isNaN(lineHeight)) {
+			setCheckboxMarginTop(Math.max(0, (lineHeight - CHECKBOX_SIZE) / 2));
+		}
+	}, []);
+
+	return (
+		<div
+			className={`${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${
+				hasMarginDown ? styles['margin-bottom--2'] : ''
+			}`}
+		>
+			{items.map((item, index) => (
+				<div
+					key={item.id}
+					className={styles['check-list__item']}
+					style={{ alignItems: 'flex-start' }}
+					data-id={item.id}
+					ref={index === 0 ? measureRef : undefined}
+				>
+					<div
+						className={`${styles['check-list__item__input']} ${
+							item.isChecked ? styles['check-list__item__input--checked'] : ''
+						}`}
+						style={{ marginTop: `${checkboxMarginTop}px` }}
+					/>
+					{item.children}
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default CheckListDynamic;

package/src/staticComponents/BlogSectionStatic.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import styles from '../styles/BlogSection.module.scss';
 import { generateIdForBlogTitle } from '../utils';
 
 interface BlogSectionStaticProperties {
-	title?: string;
+	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	category?: string;
 	children?: ReactNode;
 }
@@ -13,11 +13,12 @@ const BlogSectionStatic = ({
 	category = '',
 	children = null,
 }: BlogSectionStaticProperties) => {
-	const titleWithCategory = category ? `${category} - ${title}` : title;
+	const titleString = typeof title === 'string' ? title : '';
+	const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
 	const id = generateIdForBlogTitle(titleWithCategory);
 
 	return (
-		<div className={styles['blog-section']} data-title={title} data-id={id}>
+		<div className={styles['blog-section']} data-title={titleString} data-id={id}>
 			{title ? (
 				<h3 className={styles['blog-section__title']}>{title}</h3>
 			) : null}

package/src/staticComponents/CheckListStatic.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 
 import styles from '../styles/CheckList.module.scss';
 
 export interface CheckListItem {
 	id: string;
-	children: ReactNode;
+	children: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	isChecked?: boolean;
 }
 
@@ -32,7 +32,7 @@ const CheckListStatic = ({
 							item.isChecked ? styles['check-list__item__input--checked'] : ''
 						}`}
 					/>
-					<div>{item.children}</div>
+					{item.children}
 				</div>
 			))}
 		</div>

package/src/styles/BlogSection.module.scss

@@ -16,11 +16,15 @@
 	}
 
 	&__title-link {
-		color: inherit;
-		text-decoration: none;
-		font-size: inherit;
-		font-weight: inherit;
-		font-family: inherit;
+		&,
+		> p,
+		> p > * {
+			color: inherit;
+			text-decoration: none;
+			font-size: inherit;
+			font-weight: inherit;
+			font-family: inherit;
+		}
 
 		&:hover {
 			color: stylekit.$color--dark;