diff --git a/package.json b/package.json
index bf526fd..7a05b79 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "2.0.0-rc.6",
+    "version": "2.0.0-rc.7",
     "license": "LGPL-3.0-or-later",
     "author": "shiy2008@gmail.com",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
@@ -47,8 +47,8 @@
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.25.7",
         "@babel/preset-typescript": "^7.25.7",
-        "@eslint/compat": "^1.2.0",
-        "@eslint/js": "^9.12.0",
+        "@eslint/compat": "^1.2.1",
+        "@eslint/js": "^9.13.0",
         "@microsoft/api-extractor": "^7.47.11",
         "@parcel/config-default": "~2.12.0",
         "@parcel/packager-ts": "~2.12.0",
@@ -65,13 +65,13 @@
         "@storybook/react": "^7.6.20",
         "@storybook/react-vite": "^7.6.20",
         "@storybook/testing-library": "^0.2.2",
-        "@types/lodash": "^4.17.10",
-        "@types/node": "^20.16.12",
+        "@types/lodash": "^4.17.12",
+        "@types/node": "^20.16.13",
         "@types/prismjs": "^1.26.4",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.2",
-        "eslint": "^9.12.0",
+        "eslint": "^9.13.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-react": "^7.37.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80cddc9..51bc254 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,14 +67,14 @@ importers:
         specifier: ^7.25.7
         version: 7.25.7(@babel/core@7.25.8)
       '@eslint/compat':
-        specifier: ^1.2.0
-        version: 1.2.0(eslint@9.12.0)
+        specifier: ^1.2.1
+        version: 1.2.1(eslint@9.13.0)
       '@eslint/js':
-        specifier: ^9.12.0
-        version: 9.12.0
+        specifier: ^9.13.0
+        version: 9.13.0
       '@microsoft/api-extractor':
         specifier: ^7.47.11
-        version: 7.47.11(@types/node@20.16.12)
+        version: 7.47.11(@types/node@20.16.13)
       '@parcel/config-default':
         specifier: ~2.12.0
         version: 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)(postcss@8.4.47)(typescript@5.6.3)
@@ -116,16 +116,16 @@ importers:
         version: 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
       '@storybook/react-vite':
         specifier: ^7.6.20
-        version: 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))
+        version: 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))
       '@storybook/testing-library':
         specifier: ^0.2.2
         version: 0.2.2
       '@types/lodash':
-        specifier: ^4.17.10
-        version: 4.17.11
+        specifier: ^4.17.12
+        version: 4.17.12
       '@types/node':
-        specifier: ^20.16.12
-        version: 20.16.12
+        specifier: ^20.16.13
+        version: 20.16.13
       '@types/prismjs':
         specifier: ^1.26.4
         version: 1.26.4
@@ -137,19 +137,19 @@ importers:
         version: 18.3.1
       '@vitejs/plugin-react':
         specifier: ^4.3.2
-        version: 4.3.2(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))
+        version: 4.3.2(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))
       eslint:
-        specifier: ^9.12.0
-        version: 9.12.0
+        specifier: ^9.13.0
+        version: 9.13.0
       eslint-config-prettier:
         specifier: ^9.1.0
-        version: 9.1.0(eslint@9.12.0)
+        version: 9.1.0(eslint@9.13.0)
       eslint-plugin-react:
         specifier: ^7.37.1
-        version: 7.37.1(eslint@9.12.0)
+        version: 7.37.1(eslint@9.13.0)
       eslint-plugin-simple-import-sort:
         specifier: ^12.1.1
-        version: 12.1.1(eslint@9.12.0)
+        version: 12.1.1(eslint@9.13.0)
       globals:
         specifier: ^15.11.0
         version: 15.11.0
@@ -158,7 +158,7 @@ importers:
         version: 9.1.6
       koapache:
         specifier: ^2.2.2
-        version: 2.2.2(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.12)
+        version: 2.2.2(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.13)
       less:
         specifier: ^4.2.0
         version: 4.2.0
@@ -206,10 +206,10 @@ importers:
         version: 5.6.3
       typescript-eslint:
         specifier: ^8.10.0
-        version: 8.10.0(eslint@9.12.0)(typescript@5.6.3)
+        version: 8.10.0(eslint@9.13.0)(typescript@5.6.3)
       vite:
         specifier: ^5.4.9
-        version: 5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0)
+        version: 5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0)
 
 packages:
 
@@ -1329,8 +1329,8 @@ packages:
     resolution: {integrity: sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.2.0':
-    resolution: {integrity: sha512-CkPWddN7J9JPrQedEr2X7AjK9y1jaMJtxZ4A/+jTMFA2+n5BWhcKHW/EbJyARqg2zzQfgtWUtVmG3hrG6+nGpg==}
+  '@eslint/compat@1.2.1':
+    resolution: {integrity: sha512-JbHG2TWuCeNzh87fXo+/46Z1LEo9DBA9T188d0fZgGxAD+cNyS6sx9fdiyxjGPBMyQVRlCutTByZ6a5+YMkF7g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.10.0
@@ -1342,16 +1342,16 @@ packages:
     resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.6.0':
-    resolution: {integrity: sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==}
+  '@eslint/core@0.7.0':
+    resolution: {integrity: sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@3.1.0':
     resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.12.0':
-    resolution: {integrity: sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==}
+  '@eslint/js@9.13.0':
+    resolution: {integrity: sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.4':
@@ -2889,8 +2889,8 @@ packages:
   '@types/koa@2.15.0':
     resolution: {integrity: sha512-7QFsywoE5URbuVnG3loe03QXuGajrnotr3gQkXcEBShORai23MePfFYdhz90FEtBBpkyIYQbVD+evKtloCgX3g==}
 
-  '@types/lodash@4.17.11':
-    resolution: {integrity: sha512-jzqWo/uQP/iqeGGTjhgFp2yaCrCYTauASQcpdzESNCkHjSprBJVcZP9KG9aQ0q+xcsXiKd/iuw/4dLjS3Odc7Q==}
+  '@types/lodash@4.17.12':
+    resolution: {integrity: sha512-sviUmCE8AYdaF/KIHLDJBQgeYzPBI0vf/17NaYehBJfYD1j6/L95Slh07NlyK2iNyBNaEkb3En2jRt+a8y3xZQ==}
 
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
@@ -2913,8 +2913,8 @@ packages:
   '@types/node@18.19.56':
     resolution: {integrity: sha512-4EMJlWwwGnVPflJAtM14p9eVSa6BOv5b92mCsh5zcM1UagNtEtrbbtaE6WE1tw2TabavatnwqXjlIpcAEuJJNg==}
 
-  '@types/node@20.16.12':
-    resolution: {integrity: sha512-LfPFB0zOeCeCNQV3i+67rcoVvoN5n0NVuR2vLG0O5ySQMgchuZlC4lgz546ZOJyDtj5KIgOxy+lacOimfqZAIA==}
+  '@types/node@20.16.13':
+    resolution: {integrity: sha512-GjQ7im10B0labo8ZGXDGROUl9k0BNyDgzfGpb4g/cl+4yYDWVKcozANF4FGr4/p0O/rAkQClM6Wiwkije++1Tg==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -3957,8 +3957,8 @@ packages:
     resolution: {integrity: sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.12.0:
-    resolution: {integrity: sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==}
+  eslint@9.13.0:
+    resolution: {integrity: sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -8007,16 +8007,16 @@ snapshots:
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.12.0)':
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.13.0)':
     dependencies:
-      eslint: 9.12.0
+      eslint: 9.13.0
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.11.1': {}
 
-  '@eslint/compat@1.2.0(eslint@9.12.0)':
+  '@eslint/compat@1.2.1(eslint@9.13.0)':
     optionalDependencies:
-      eslint: 9.12.0
+      eslint: 9.13.0
 
   '@eslint/config-array@0.18.0':
     dependencies:
@@ -8026,7 +8026,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/core@0.6.0': {}
+  '@eslint/core@0.7.0': {}
 
   '@eslint/eslintrc@3.1.0':
     dependencies:
@@ -8042,7 +8042,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.12.0': {}
+  '@eslint/js@9.13.0': {}
 
   '@eslint/object-schema@2.1.4': {}
 
@@ -8129,7 +8129,7 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       '@types/yargs': 16.0.9
       chalk: 4.1.2
 
@@ -8138,17 +8138,17 @@ snapshots:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))':
     dependencies:
       glob: 7.2.3
       glob-promise: 4.2.2(glob@7.2.3)
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.6.3)
-      vite: 5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0)
+      vite: 5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0)
     optionalDependencies:
       typescript: 5.6.3
 
@@ -8205,23 +8205,23 @@ snapshots:
       '@types/react': 18.3.11
       react: 18.3.1
 
-  '@microsoft/api-extractor-model@7.29.8(@types/node@20.16.12)':
+  '@microsoft/api-extractor-model@7.29.8(@types/node@20.16.13)':
     dependencies:
       '@microsoft/tsdoc': 0.15.0
       '@microsoft/tsdoc-config': 0.17.0
-      '@rushstack/node-core-library': 5.9.0(@types/node@20.16.12)
+      '@rushstack/node-core-library': 5.9.0(@types/node@20.16.13)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.47.11(@types/node@20.16.12)':
+  '@microsoft/api-extractor@7.47.11(@types/node@20.16.13)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.29.8(@types/node@20.16.12)
+      '@microsoft/api-extractor-model': 7.29.8(@types/node@20.16.13)
       '@microsoft/tsdoc': 0.15.0
       '@microsoft/tsdoc-config': 0.17.0
-      '@rushstack/node-core-library': 5.9.0(@types/node@20.16.12)
+      '@rushstack/node-core-library': 5.9.0(@types/node@20.16.13)
       '@rushstack/rig-package': 0.5.3
-      '@rushstack/terminal': 0.14.2(@types/node@20.16.12)
-      '@rushstack/ts-command-line': 4.23.0(@types/node@20.16.12)
+      '@rushstack/terminal': 0.14.2(@types/node@20.16.13)
+      '@rushstack/ts-command-line': 4.23.0(@types/node@20.16.13)
       lodash: 4.17.21
       minimatch: 3.0.8
       resolve: 1.22.8
@@ -9386,7 +9386,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.24.0':
     optional: true
 
-  '@rushstack/node-core-library@5.9.0(@types/node@20.16.12)':
+  '@rushstack/node-core-library@5.9.0(@types/node@20.16.13)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -9397,23 +9397,23 @@ snapshots:
       resolve: 1.22.8
       semver: 7.5.4
     optionalDependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@rushstack/rig-package@0.5.3':
     dependencies:
       resolve: 1.22.8
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.14.2(@types/node@20.16.12)':
+  '@rushstack/terminal@0.14.2(@types/node@20.16.13)':
     dependencies:
-      '@rushstack/node-core-library': 5.9.0(@types/node@20.16.12)
+      '@rushstack/node-core-library': 5.9.0(@types/node@20.16.13)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
-  '@rushstack/ts-command-line@4.23.0(@types/node@20.16.12)':
+  '@rushstack/ts-command-line@4.23.0(@types/node@20.16.13)':
     dependencies:
-      '@rushstack/terminal': 0.14.2(@types/node@20.16.12)
+      '@rushstack/terminal': 0.14.2(@types/node@20.16.13)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -9595,7 +9595,7 @@ snapshots:
       '@storybook/preview-api': 7.6.20
       '@storybook/theming': 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@storybook/types': 7.6.20
-      '@types/lodash': 4.17.11
+      '@types/lodash': 4.17.12
       color-convert: 2.0.1
       dequal: 2.0.3
       lodash: 4.17.21
@@ -9637,7 +9637,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/builder-vite@7.6.20(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))':
+  '@storybook/builder-vite@7.6.20(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))':
     dependencies:
       '@storybook/channels': 7.6.20
       '@storybook/client-logger': 7.6.20
@@ -9655,7 +9655,7 @@ snapshots:
       fs-extra: 11.2.0
       magic-string: 0.30.12
       rollup: 3.29.5
-      vite: 5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0)
+      vite: 5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -9942,18 +9942,18 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/react-vite@7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))':
+  '@storybook/react-vite@7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))
       '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      '@storybook/builder-vite': 7.6.20(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))
+      '@storybook/builder-vite': 7.6.20(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))
       '@storybook/react': 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
-      '@vitejs/plugin-react': 3.1.0(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))
+      '@vitejs/plugin-react': 3.1.0(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))
       magic-string: 0.30.12
       react: 18.3.1
       react-docgen: 7.0.3
       react-dom: 18.3.1(react@18.3.1)
-      vite: 5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0)
+      vite: 5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -10101,12 +10101,12 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
-  '@tech_query/node-toolkit@1.2.1(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.12)':
+  '@tech_query/node-toolkit@1.2.1(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.13)':
     dependencies:
       '@babel/core': 7.25.8
       '@babel/plugin-transform-modules-commonjs': 7.25.7(@babel/core@7.25.8)
       '@babel/preset-env': 7.25.8(@babel/core@7.25.8)
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       cross-spawn: 7.0.3
       file-type: 16.5.4
       fs-extra: 11.2.0
@@ -10140,7 +10140,7 @@ snapshots:
 
   '@types/accepts@1.3.7':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/argparse@1.0.38': {}
 
@@ -10170,16 +10170,16 @@ snapshots:
   '@types/body-parser@1.19.5':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/co-body@6.1.3':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       '@types/qs': 6.9.16
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/content-disposition@0.5.8': {}
 
@@ -10188,11 +10188,11 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/express': 5.0.0
       '@types/keygrip': 1.0.6
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/cross-spawn@6.0.6':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/detect-port@1.3.5': {}
 
@@ -10212,14 +10212,14 @@ snapshots:
 
   '@types/express-serve-static-core@4.19.6':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       '@types/qs': 6.9.16
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
 
   '@types/express-serve-static-core@5.0.0':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       '@types/qs': 6.9.16
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -10242,16 +10242,16 @@ snapshots:
 
   '@types/formidable@2.0.6':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/glob@7.2.0':
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/graceful-fs@4.1.9':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/hast@3.0.4':
     dependencies:
@@ -10288,9 +10288,9 @@ snapshots:
       '@types/http-errors': 2.0.4
       '@types/keygrip': 1.0.6
       '@types/koa-compose': 3.2.8
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
-  '@types/lodash@4.17.11': {}
+  '@types/lodash@4.17.12': {}
 
   '@types/mdast@4.0.4':
     dependencies:
@@ -10306,14 +10306,14 @@ snapshots:
 
   '@types/node-fetch@2.6.11':
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       form-data: 4.0.1
 
   '@types/node@18.19.56':
     dependencies:
       undici-types: 5.26.5
 
-  '@types/node@20.16.12':
+  '@types/node@20.16.13':
     dependencies:
       undici-types: 6.19.8
 
@@ -10349,12 +10349,12 @@ snapshots:
   '@types/send@0.17.4':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   '@types/serve-static@1.15.7':
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       '@types/send': 0.17.4
 
   '@types/unist@2.0.11': {}
@@ -10375,15 +10375,15 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.12.0)(typescript@5.6.3))(eslint@9.12.0)(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0)(typescript@5.6.3))(eslint@9.13.0)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 8.10.0(eslint@9.12.0)(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0)(typescript@5.6.3)
       '@typescript-eslint/scope-manager': 8.10.0
-      '@typescript-eslint/type-utils': 8.10.0(eslint@9.12.0)(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.10.0(eslint@9.12.0)(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 8.10.0(eslint@9.13.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0)(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 8.10.0
-      eslint: 9.12.0
+      eslint: 9.13.0
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
@@ -10393,14 +10393,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.10.0(eslint@9.12.0)(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.10.0(eslint@9.13.0)(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.10.0
       '@typescript-eslint/types': 8.10.0
       '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 8.10.0
       debug: 4.3.7
-      eslint: 9.12.0
+      eslint: 9.13.0
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -10411,10 +10411,10 @@ snapshots:
       '@typescript-eslint/types': 8.10.0
       '@typescript-eslint/visitor-keys': 8.10.0
 
-  '@typescript-eslint/type-utils@8.10.0(eslint@9.12.0)(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.10.0(eslint@9.13.0)(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.10.0(eslint@9.12.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0)(typescript@5.6.3)
       debug: 4.3.7
       ts-api-utils: 1.3.0(typescript@5.6.3)
     optionalDependencies:
@@ -10440,13 +10440,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.10.0(eslint@9.12.0)(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.10.0(eslint@9.13.0)(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0)
       '@typescript-eslint/scope-manager': 8.10.0
       '@typescript-eslint/types': 8.10.0
       '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
-      eslint: 9.12.0
+      eslint: 9.13.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -10458,25 +10458,25 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react@3.1.0(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))':
+  '@vitejs/plugin-react@3.1.0(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))':
     dependencies:
       '@babel/core': 7.25.8
       '@babel/plugin-transform-react-jsx-self': 7.25.7(@babel/core@7.25.8)
       '@babel/plugin-transform-react-jsx-source': 7.25.7(@babel/core@7.25.8)
       magic-string: 0.27.0
       react-refresh: 0.14.2
-      vite: 5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0)
+      vite: 5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@4.3.2(vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0))':
+  '@vitejs/plugin-react@4.3.2(vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0))':
     dependencies:
       '@babel/core': 7.25.8
       '@babel/plugin-transform-react-jsx-self': 7.25.7(@babel/core@7.25.8)
       '@babel/plugin-transform-react-jsx-source': 7.25.7(@babel/core@7.25.8)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0)
+      vite: 5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -10930,9 +10930,9 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
-  commander-jsx@0.6.9(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.12):
+  commander-jsx@0.6.9(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.13):
     dependencies:
-      '@tech_query/node-toolkit': 1.2.1(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.12)
+      '@tech_query/node-toolkit': 1.2.1(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.13)
       tslib: 2.8.0
     transitivePeerDependencies:
       - '@babel/plugin-transform-modules-commonjs'
@@ -11488,11 +11488,11 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-prettier@9.1.0(eslint@9.12.0):
+  eslint-config-prettier@9.1.0(eslint@9.13.0):
     dependencies:
-      eslint: 9.12.0
+      eslint: 9.13.0
 
-  eslint-plugin-react@7.37.1(eslint@9.12.0):
+  eslint-plugin-react@7.37.1(eslint@9.13.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlast: 1.2.5
@@ -11500,7 +11500,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.1.0
-      eslint: 9.12.0
+      eslint: 9.13.0
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -11514,9 +11514,9 @@ snapshots:
       string.prototype.matchall: 4.0.11
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-simple-import-sort@12.1.1(eslint@9.12.0):
+  eslint-plugin-simple-import-sort@12.1.1(eslint@9.13.0):
     dependencies:
-      eslint: 9.12.0
+      eslint: 9.13.0
 
   eslint-scope@8.1.0:
     dependencies:
@@ -11527,14 +11527,14 @@ snapshots:
 
   eslint-visitor-keys@4.1.0: {}
 
-  eslint@9.12.0:
+  eslint@9.13.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0)
       '@eslint-community/regexpp': 4.11.1
       '@eslint/config-array': 0.18.0
-      '@eslint/core': 0.6.0
+      '@eslint/core': 0.7.0
       '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.12.0
+      '@eslint/js': 9.13.0
       '@eslint/plugin-kit': 0.2.0
       '@humanfs/node': 0.16.5
       '@humanwhocodes/module-importer': 1.0.1
@@ -12341,7 +12341,7 @@ snapshots:
     dependencies:
       '@jest/types': 29.6.3
       '@types/graceful-fs': 4.1.9
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -12356,14 +12356,14 @@ snapshots:
   jest-mock@27.5.1:
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
 
   jest-regex-util@29.6.3: {}
 
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -12371,7 +12371,7 @@ snapshots:
 
   jest-worker@29.7.0:
     dependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
@@ -12525,11 +12525,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  koapache@2.2.2(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.12):
+  koapache@2.2.2(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.13):
     dependencies:
       '@koa/cors': 4.0.0
-      '@tech_query/node-toolkit': 1.2.1(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.12)
-      commander-jsx: 0.6.9(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.12)
+      '@tech_query/node-toolkit': 1.2.1(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.13)
+      commander-jsx: 0.6.9(@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8))(@babel/preset-env@7.25.8(@babel/core@7.25.8))(@types/node@20.16.13)
       form-data: 4.0.1
       internal-ip: 6.2.0
       koa: 2.15.3
@@ -14393,11 +14393,11 @@ snapshots:
       typescript: 5.6.3
       yaml: 2.6.0
 
-  typescript-eslint@8.10.0(eslint@9.12.0)(typescript@5.6.3):
+  typescript-eslint@8.10.0(eslint@9.13.0)(typescript@5.6.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.12.0)(typescript@5.6.3))(eslint@9.12.0)(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.10.0(eslint@9.12.0)(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.10.0(eslint@9.12.0)(typescript@5.6.3)
+      '@typescript-eslint/eslint-plugin': 8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0)(typescript@5.6.3))(eslint@9.13.0)(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0)(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -14573,13 +14573,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite@5.4.9(@types/node@20.16.12)(less@4.2.0)(lightningcss@1.27.0):
+  vite@5.4.9(@types/node@20.16.13)(less@4.2.0)(lightningcss@1.27.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
       rollup: 4.24.0
     optionalDependencies:
-      '@types/node': 20.16.12
+      '@types/node': 20.16.13
       fsevents: 2.3.3
       less: 4.2.0
       lightningcss: 1.27.0
diff --git a/preview/content.tsx b/preview/content.tsx
index 0fb4ed9..69e917d 100644
--- a/preview/content.tsx
+++ b/preview/content.tsx
@@ -38,7 +38,7 @@ export class Content extends Component {
     @observable
     accessor showLoading = false;
 
-    inputDialog = new Dialog<Record<'a' | 'b', number>>(({ defer }) => (
+    inputDialog = new Dialog<{}, Record<'a' | 'b', number>>(({ defer }) => (
         <Modal show={!!defer} onHide={() => defer?.reject(new DialogClose())}>
             <Modal.Header>Dialog</Modal.Header>
             <Modal.Body>
diff --git a/source/Dialog.tsx b/source/Dialog.tsx
index d364538..518d18d 100644
--- a/source/Dialog.tsx
+++ b/source/Dialog.tsx
@@ -13,18 +13,25 @@ export interface DialogProps<T = any> {
     defer?: Defer<T>;
 }
 
-export class Dialog<T = any> {
+export class Dialog<I extends object = {}, O = any> {
     @observable
-    accessor defer: Defer<T> | undefined;
+    accessor input = {} as I;
 
-    Component: FC;
+    @observable
+    accessor defer: Defer<O> | undefined;
+
+    Component: FC<I>;
 
-    constructor(Factory: FC<DialogProps<T>>) {
-        this.Component = observer(() => <Factory defer={this.defer} />);
+    constructor(Factory: FC<I & DialogProps<O>>) {
+        this.Component = observer(props => (
+            <Factory {...props} {...this.input} defer={this.defer} />
+        ));
         this.Component.displayName = 'DialogComponent';
     }
 
-    open() {
+    open(input?: I) {
+        if (input) this.input = input;
+
         this.defer = new Defer();
 
         this.defer.promise.finally(() => (this.defer = undefined));
diff --git a/source/Editor.tsx b/source/Editor.tsx
index 4da3b52..2b8ea81 100644
--- a/source/Editor.tsx
+++ b/source/Editor.tsx
@@ -1,7 +1,7 @@
 import { EditorCore, WrapperProps } from '@react-editor-js/core';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { InputHTMLAttributes, PropsWithoutRef, PureComponent } from 'react';
+import { Component, InputHTMLAttributes, PropsWithoutRef } from 'react';
 import { createReactEditorJS } from 'react-editor-js';
 
 const ReactEditorJS = createReactEditorJS();
@@ -12,7 +12,7 @@ export type EditorProps = PropsWithoutRef<
 >;
 
 @observer
-export class Editor extends PureComponent<EditorProps> {
+export class Editor extends Component<EditorProps> {
     static displayName = 'Editor';
 
     private core?: EditorCore;
diff --git a/source/Loading.tsx b/source/Loading.tsx
index 2288c85..ef8cc65 100644
--- a/source/Loading.tsx
+++ b/source/Loading.tsx
@@ -1,11 +1,19 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import { Spinner } from 'react-bootstrap';
 
-export type LoadingProps = PropsWithChildren<{}>;
+export type LoadingProps = HTMLAttributes<HTMLDivElement>;
 
-export const Loading: FC<LoadingProps> = ({ children = 'Loading...' }) => (
-    <div className="fixed-top h-100 w-100 d-flex justify-content-center align-items-center opacity-25 bg-black">
+export const Loading: FC<LoadingProps> = ({
+    className = '',
+    children = 'Loading...',
+    ...props
+}) => (
+    <div
+        className={`fixed-top h-100 w-100 d-flex justify-content-center align-items-center opacity-25 bg-black ${className}`}
+        {...props}
+    >
         <Spinner animation="border" variant="success" />
+
         <span className="ml-3 text-white">{children}</span>
     </div>
 );
diff --git a/source/PageNav.tsx b/source/PageNav.tsx
index afc599d..90ef3b2 100644
--- a/source/PageNav.tsx
+++ b/source/PageNav.tsx
@@ -1,6 +1,6 @@
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { PureComponent } from 'react';
+import { Component } from 'react';
 import { Nav, NavProps } from 'react-bootstrap';
 import { scrollTo, uniqueID } from 'web-utility';
 
@@ -16,7 +16,7 @@ export interface PageNavProps extends NavProps {
 }
 
 @observer
-export class PageNav extends PureComponent<PageNavProps> {
+export class PageNav extends Component<PageNavProps> {
     static displayName = 'PageNav';
 
     @observable
diff --git a/source/Select.tsx b/source/Select.tsx
index d65a3ad..85c48c3 100644
--- a/source/Select.tsx
+++ b/source/Select.tsx
@@ -1,20 +1,15 @@
 import classNames from 'classnames';
+import { FC, isValidElement, ReactElement, ReactNode } from 'react';
 import {
-    CSSProperties,
-    FC,
-    isValidElement,
-    PropsWithChildren,
-    ReactElement,
-    ReactNode
-} from 'react';
-import { Dropdown, DropdownButtonProps } from 'react-bootstrap';
+    Dropdown,
+    DropdownButtonProps,
+    DropdownItemProps
+} from 'react-bootstrap';
 import { makeArray } from 'web-utility';
 
-export type OptionProps = PropsWithChildren<{
-    className?: string;
-    style?: CSSProperties;
+export interface OptionProps extends DropdownItemProps {
     value?: string;
-}>;
+}
 
 export const Option: FC<OptionProps> = ({ value, children, ...props }) => (
     <Dropdown.Item {...props} data-value={value}>
@@ -25,7 +20,7 @@ export const Option: FC<OptionProps> = ({ value, children, ...props }) => (
 Option.displayName = 'Option';
 
 export interface SelectProps
-    extends OptionProps,
+    extends Omit<OptionProps, 'onChange'>,
         Pick<DropdownButtonProps, 'variant' | 'menuVariant'> {
     onChange?: (value: string) => any;
     valueRender?: (value: string) => ReactNode;
diff --git a/source/ShareBox.tsx b/source/ShareBox.tsx
index f731a7c..421236a 100644
--- a/source/ShareBox.tsx
+++ b/source/ShareBox.tsx
@@ -1,7 +1,7 @@
 import html2canvas from 'html2canvas';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { createRef, MouseEvent, PropsWithChildren, PureComponent } from 'react';
+import { Component, createRef, HTMLAttributes, MouseEvent } from 'react';
 import { Image } from 'react-bootstrap';
 import { blobOf } from 'web-utility';
 
@@ -23,10 +23,10 @@ export async function elementToImage(
     );
 }
 
-export type ShareBoxProps = PropsWithChildren<ShareData>;
+export type ShareBoxProps = HTMLAttributes<HTMLDivElement> & ShareData;
 
 @observer
-export class ShareBox extends PureComponent<ShareBoxProps> {
+export class ShareBox extends Component<ShareBoxProps> {
     static displayName = 'ShareBox';
 
     root = createRef<HTMLDivElement>();
@@ -67,7 +67,7 @@ export class ShareBox extends PureComponent<ShareBoxProps> {
     };
 
     render() {
-        const { children } = this.props,
+        const { className = '', children, ...props } = this.props,
             { loading, imageURI } = this;
 
         return (
@@ -75,8 +75,9 @@ export class ShareBox extends PureComponent<ShareBoxProps> {
                 {loading && <Loading />}
 
                 <div
+                    {...props}
                     ref={this.root}
-                    className="position-relative"
+                    className={`position-relative ${className}`}
                     onMouseEnter={imageURI ? undefined : this.generateImage}
                     onTouchStart={imageURI ? undefined : this.generateImage}
                 >
diff --git a/source/TableSpinner.tsx b/source/TableSpinner.tsx
index d3cb53a..43d6232 100644
--- a/source/TableSpinner.tsx
+++ b/source/TableSpinner.tsx
@@ -1,12 +1,22 @@
-import { FC, PropsWithoutRef } from 'react';
-import { Spinner } from 'react-bootstrap';
+import { FC, HTMLAttributes } from 'react';
+import { Spinner, SpinnerProps } from 'react-bootstrap';
 
-export type TableSpinnerProps = PropsWithoutRef<{ colSpan: number }>;
+export interface TableSpinnerProps
+    extends HTMLAttributes<HTMLTableRowElement>,
+        Pick<SpinnerProps, 'animation' | 'variant' | 'size'> {
+    colSpan: number;
+}
 
-export const TableSpinner: FC<TableSpinnerProps> = ({ colSpan }) => (
-    <tr>
+export const TableSpinner: FC<TableSpinnerProps> = ({
+    animation = 'border',
+    variant = 'primary',
+    size,
+    colSpan,
+    ...props
+}) => (
+    <tr {...props}>
         <td className="text-center p-4" colSpan={colSpan}>
-            <Spinner animation="border" variant="primary" />
+            <Spinner {...{ animation, variant, size }} />
         </td>
     </tr>
 );
diff --git a/source/TimeDistance.tsx b/source/TimeDistance.tsx
index d09e5f9..afc05fb 100644
--- a/source/TimeDistance.tsx
+++ b/source/TimeDistance.tsx
@@ -1,13 +1,12 @@
-import { FC, PropsWithoutRef } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import { diffTime, TimeData } from 'web-utility';
 
-export type TimeDistanceProps = PropsWithoutRef<{
-    className?: string;
+export interface TimeDistanceProps extends HTMLAttributes<HTMLTimeElement> {
     date: TimeData;
     unitWords?: Record<string, string>;
     beforeWord?: string;
     afterWord?: string;
-}>;
+}
 
 const UnitWords = {
     ms: 'millisecond(s)',
@@ -21,22 +20,18 @@ const UnitWords = {
 };
 
 export const TimeDistance: FC<TimeDistanceProps> = ({
-    className,
     date,
     unitWords = UnitWords,
     beforeWord = ' before',
-    afterWord = ' after'
+    afterWord = ' after',
+    ...props
 }) => {
     date = new Date(date);
 
     const { distance, unit } = diffTime(date);
 
     return (
-        <time
-            className={className}
-            dateTime={date.toJSON()}
-            title={date.toLocaleString()}
-        >
+        <time {...props} dateTime={date.toJSON()} title={date.toLocaleString()}>
             {Math.abs(distance)} {unitWords[unit]}
             {distance < 0 ? beforeWord : afterWord}
         </time>
diff --git a/source/TypeEcho.tsx b/source/TypeEcho.tsx
index 363d17a..af78d0c 100644
--- a/source/TypeEcho.tsx
+++ b/source/TypeEcho.tsx
@@ -1,17 +1,16 @@
 import classNames from 'classnames';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { PropsWithoutRef, PureComponent, RefCallback } from 'react';
+import { Component, HTMLAttributes, RefCallback } from 'react';
 import { sleep } from 'web-utility';
 
-export type TypeEchoProps = PropsWithoutRef<{
-    className?: string;
+export interface TypeEchoProps extends HTMLAttributes<HTMLPreElement> {
     text: string;
     intervals?: number;
-}>;
+}
 
 @observer
-export class TypeEcho extends PureComponent<TypeEchoProps> {
+export class TypeEcho extends Component<TypeEchoProps> {
     static displayName = 'TypeEcho';
 
     @observable
@@ -34,11 +33,15 @@ export class TypeEcho extends PureComponent<TypeEchoProps> {
         }).observe(node);
 
     render() {
-        const { className, text } = this.props,
+        const { className, text, ...props } = this.props,
             { echoed } = this;
 
         return (
-            <pre ref={this.init} className={classNames('text-wrap', className)}>
+            <pre
+                {...props}
+                ref={this.init}
+                className={classNames('text-wrap', className)}
+            >
                 {echoed + (echoed === text ? '' : '_')}
             </pre>
         );