@san-siva/blogkit 1.1.31 → 1.1.33

package/dist/esm/staticComponents/BlogSectionStatic.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from '../styles/BlogSection.module.scss.js';
-import { generateIdForBlogTitle } from '../utils/index.js';
+import { extractTextFromReactNode, generateIdForBlogTitle } from '../utils/index.js';
 
 const BlogSectionStatic = ({ title = '', category = '', children = null, }) => {
-    const titleString = typeof title === 'string' ? title : '';
+    const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
     const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
     const id = generateIdForBlogTitle(titleWithCategory);
     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] }));

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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 { extractTextFromReactNode, 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 : extractTextFromReactNode(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,wBAAwB,CAAC,KAAK,CAAC;AACvF,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/utils/index.js

@@ -1,6 +1,19 @@
+import { isValidElement } from 'react';
+
+const extractTextFromReactNode = (node) => {
+    if (node === null || node === undefined || typeof node === 'boolean')
+        return '';
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (isValidElement(node))
+        return extractTextFromReactNode(node.props.children);
+    if (Array.isArray(node))
+        return node.map(extractTextFromReactNode).join('');
+    return '';
+};
 const generateIdForBlogTitle = (title) => title.toLowerCase().replace(/[^\w\d]/g, '-');
 const generateUrlForBlogTitle = (title) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
 const generateSectionHref = (id) => `?section=${id}`;
 
-export { generateIdForBlogTitle, generateSectionHref, generateUrlForBlogTitle };
+export { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref, generateUrlForBlogTitle };
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":[],"mappings":"MAAa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const extractTextFromReactNode = (node: ReactNode): string => {\n\tif (node === null || node === undefined || typeof node === 'boolean') return '';\n\tif (typeof node === 'string' || typeof node === 'number') return String(node);\n\tif (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);\n\tif (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');\n\treturn '';\n};\n\nexport const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":[],"mappings":";;AAGO,MAAM,wBAAwB,GAAG,CAAC,IAAe,KAAY;IACnE,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,IAAI,KAAK,SAAS;AAAE,QAAA,OAAO,EAAE;IAC/E,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ;AAAE,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC;IAC7E,IAAI,cAAc,CAAC,IAAI,CAAC;QAAE,OAAO,wBAAwB,CAAE,IAAI,CAAC,KAAkC,CAAC,QAAQ,CAAC;AAC5G,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3E,IAAA,OAAO,EAAE;AACV;MAEa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"CheckList.d.ts","sourceRoot":"","sources":["../../../src/components/CheckList.tsx"],"names":[],"mappings":"AAAA,OAAwB,EACvB,KAAK,aAAa,EAClB,MAAM,qCAAqC,CAAC;AAE7C,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,4CAQrB,CAAC;AAEF,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAC9B,eAAe,SAAS,CAAC"}

package/dist/types/utils/index.d.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+export declare const extractTextFromReactNode: (node: ReactNode) => string;
 export declare const generateIdForBlogTitle: (title: string) => string;
 export declare const generateUrlForBlogTitle: (title: string) => string;
 export declare const generateSectionHref: (id: string) => string;

package/dist/types/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,WAAiD,CAAC;AAEtG,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,WAAoE,CAAC;AAE1H,eAAO,MAAM,mBAAmB,GAAI,IAAI,MAAM,WAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,eAAO,MAAM,wBAAwB,GAAI,MAAM,SAAS,KAAG,MAM1D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,WAAiD,CAAC;AAEtG,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,WAAoE,CAAC;AAE1H,eAAO,MAAM,mBAAmB,GAAI,IAAI,MAAM,WAAqB,CAAC"}

package/dist/types/utils/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/types/utils/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/utils/index.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.31",
+	"version": "1.1.33",
 	"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",
@@ -24,6 +24,7 @@
 	"scripts": {
 		"build": "rollup -c && tsc --emitDeclarationOnly --outDir dist/types && cp -r src/assets dist/",
 		"dev": "rollup -c -w",
+		"test": "vitest run",
 		"lint": "tsc --noEmit",
 		"prepublishOnly": "npm ci && npm run lint && npm run build"
 	},
@@ -70,6 +71,7 @@
 		"rollup-plugin-url": "^3.0.1",
 		"sass": "^1.77.8",
 		"tslib": "^2.8.1",
-		"typescript": "^5.7.2"
+		"typescript": "^5.7.2",
+		"vitest": "^4.1.2"
 	}
 }

package/src/components/CheckList.tsx

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

package/src/dynamicComponents/BlogSectionDynamic.tsx

@@ -15,7 +15,7 @@ import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'rea
 import styles from '../styles/BlogSection.module.scss';
 
 import type { ForwardedReference } from './BlogDynamic';
-import { generateIdForBlogTitle, generateSectionHref } from '../utils';
+import { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils';
 
 interface BlogProperties {
 	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
@@ -28,7 +28,7 @@ const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
 		{ title = '', category = '', children = null }: BlogProperties,
 		forwardedReference
 	) => {
-		const titleString = typeof title === 'string' ? title : '';
+		const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
 		const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
 		const id = generateIdForBlogTitle(titleWithCategory);
 

package/src/staticComponents/BlogSectionStatic.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import styles from '../styles/BlogSection.module.scss';
-import { generateIdForBlogTitle } from '../utils';
+import { extractTextFromReactNode, generateIdForBlogTitle } from '../utils';
 
 interface BlogSectionStaticProperties {
 	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
@@ -13,7 +13,7 @@ const BlogSectionStatic = ({
 	category = '',
 	children = null,
 }: BlogSectionStaticProperties) => {
-	const titleString = typeof title === 'string' ? title : '';
+	const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
 	const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
 	const id = generateIdForBlogTitle(titleWithCategory);
 

package/src/styles/CheckList.module.scss

@@ -8,7 +8,7 @@
 	&__item {
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: flex-start;
 		justify-content: flex-start;
 
 		&__input {
@@ -17,6 +17,7 @@
 			border: 1px solid stylekit.$color--grey-medium;
 			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
 			margin-right: stylekit.space(1);
+			margin-top: stylekit.rem(6);
 			flex-shrink: 0;
 
 			&--checked {
@@ -30,7 +31,6 @@
 		}
 
 		> p {
-			font-size: stylekit.$font-size--small;
 			margin: 0;
 		}
 	}

package/src/styles/CodeBlock.module.scss

@@ -83,7 +83,6 @@ $code-block-background-color: #282a36;
 		&__title {
 			font-size: stylekit.$font-size--small;
 			color: stylekit.$color--code;
-			text-transform: capitalize;
 		}
 
 		&__copy {
@@ -119,6 +118,6 @@ $code-block-background-color: #282a36;
 
 .code-block--static code {
 	color: stylekit.$color--base !important;
-  font-family: stylekit.$font-family--code !important;
-  font-size: stylekit.$font-size--small !important;
+	font-family: stylekit.$font-family--code !important;
+	font-size: stylekit.$font-size--small !important;
 }

package/src/utils/index.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { createElement } from 'react';
+import { extractTextFromReactNode } from './index';
+
+describe('extractTextFromReactNode', () => {
+	it('returns empty string for null', () => {
+		expect(extractTextFromReactNode(null)).toBe('');
+	});
+
+	it('returns empty string for undefined', () => {
+		expect(extractTextFromReactNode(undefined)).toBe('');
+	});
+
+	it('returns empty string for boolean', () => {
+		expect(extractTextFromReactNode(true)).toBe('');
+		expect(extractTextFromReactNode(false)).toBe('');
+	});
+
+	it('returns string as-is', () => {
+		expect(extractTextFromReactNode('Hello')).toBe('Hello');
+	});
+
+	it('converts number to string', () => {
+		expect(extractTextFromReactNode(42)).toBe('42');
+	});
+
+	it('extracts text from a simple element', () => {
+		const node = createElement('p', null, 'Section title');
+		expect(extractTextFromReactNode(node)).toBe('Section title');
+	});
+
+	it('extracts text from nested elements', () => {
+		const node = createElement('p', null,
+			'Hello ',
+			createElement('strong', null, 'world'),
+		);
+		expect(extractTextFromReactNode(node)).toBe('Hello world');
+	});
+
+	it('extracts text from deeply nested elements', () => {
+		const node = createElement('p', null,
+			createElement('em', null,
+				createElement('strong', null, 'deep'),
+			),
+		);
+		expect(extractTextFromReactNode(node)).toBe('deep');
+	});
+
+	it('extracts text from an array of nodes', () => {
+		const nodes = ['foo', ' ', createElement('span', null, 'bar')];
+		expect(extractTextFromReactNode(nodes)).toBe('foo bar');
+	});
+
+	it('handles mixed content with numbers and elements', () => {
+		const node = createElement('p', null, 'Step ', 3, ': done');
+		expect(extractTextFromReactNode(node)).toBe('Step 3: done');
+	});
+
+	it('returns empty string for element with no children', () => {
+		const node = createElement('p', null);
+		expect(extractTextFromReactNode(node)).toBe('');
+	});
+});

package/src/utils/index.ts

@@ -1,3 +1,14 @@
+import { isValidElement } from 'react';
+import type { ReactNode } from 'react';
+
+export const extractTextFromReactNode = (node: ReactNode): string => {
+	if (node === null || node === undefined || typeof node === 'boolean') return '';
+	if (typeof node === 'string' || typeof node === 'number') return String(node);
+	if (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);
+	if (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');
+	return '';
+};
+
 export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\w\d]/g, '-');
 
 export const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());

package/src/dynamicComponents/CheckListDynamic.tsx

@@ -1,66 +0,0 @@
-'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;