feat: common components

2 years ago · fa522fb89e
parent dcaa5a7baa
commit fa522fb89e
13 changed files with 647 additions and 168 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,8 +1,3 @@
-
 module.exports = {
-  // extends: require.resolve('@umijs/max/eslint'),
-  globals: {
-    page: true,
-    REACT_APP_ENV: true,
-  },
+  extends: require.resolve('@umijs/max/eslint')
 };
--- a/config/config.ts
+++ b/config/config.ts
@ -7,16 +7,16 @@ export default defineConfig({
    style: 'less',
    configProvider: {
      componentSize: 'large',
-      theme:{
+      theme: {
        'root-entry-name': 'variable',
        cssVar: true,
        hashed: false,
        token: {
          colorPrimary: '#2fbf85',
-          borderRadius:'20px',
-          motion: true,
-        },
-      },
+          borderRadius: 20,
+          motion: true
+        }
+      }
    }
  },
  hash: true,
@ -31,5 +31,5 @@ export default defineConfig({
  // },
  layout: false,
  routes,
-  npmClient: 'pnpm',
+  npmClient: 'pnpm'
 });
--- a/package.json
+++ b/package.json
@ -14,12 +14,14 @@
    "@ant-design/icons": "^5.3.7",
    "@ant-design/pro-components": "^2.7.1",
    "@umijs/max": "^4.2.1",
-    "antd": "^5.17.0"
+    "antd": "^5.17.0",
+    "antd-style": "^3.6.2",
+    "classnames": "^2.5.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
-    "eslint": "^9.2.0",
+    "eslint": "^8.56.0",
    "eslint-plugin-unused-imports": "^3.2.0",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -17,6 +17,12 @@ dependencies:
  antd:
    specifier: ^5.17.0
    version: 5.17.0(react-dom@18.3.1)(react@18.3.1)
+  antd-style:
+    specifier: ^3.6.2
+    version: 3.6.2(@types/react@18.3.1)(antd@5.17.0)(react-dom@18.3.1)(react@18.3.1)
+  classnames:
+    specifier: ^2.5.1
+    version: 2.5.1

 devDependencies:
  '@types/react':
@ -26,11 +32,11 @@ devDependencies:
    specifier: ^18.3.0
    version: 18.3.0
  eslint:
-    specifier: ^9.2.0
-    version: 9.2.0
+    specifier: ^8.56.0
+    version: 8.56.0
  eslint-plugin-unused-imports:
    specifier: ^3.2.0
-    version: 3.2.0(eslint@9.2.0)
+    version: 3.2.0(eslint@8.56.0)
  husky:
    specifier: ^9.0.11
    version: 9.0.11
@ -1302,10 +1308,50 @@ packages:
      tslib: 2.6.2
    dev: false

+  /@emotion/babel-plugin@11.11.0:
+    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
+    dependencies:
+      '@babel/helper-module-imports': 7.24.3
+      '@babel/runtime': 7.24.5
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/serialize': 1.1.4
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    dev: false
+
+  /@emotion/cache@11.11.0:
+    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
+    dependencies:
+      '@emotion/memoize': 0.8.1
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      stylis: 4.2.0
+    dev: false
+
+  /@emotion/css@11.11.2:
+    resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==}
+    dependencies:
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.4
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+    dev: false
+
  /@emotion/hash@0.8.0:
    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
    dev: false

+  /@emotion/hash@0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: false
+
  /@emotion/is-prop-valid@1.2.2:
    resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
    dependencies:
@ -1316,6 +1362,56 @@ packages:
    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
    dev: false

+  /@emotion/react@11.11.4(@types/react@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.4
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      '@types/react': 18.3.1
+      hoist-non-react-statics: 3.3.2
+      react: 18.3.1
+    dev: false
+
+  /@emotion/serialize@1.1.4:
+    resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==}
+    dependencies:
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/unitless': 0.8.1
+      '@emotion/utils': 1.2.1
+      csstype: 3.1.3
+    dev: false
+
+  /@emotion/server@11.11.0(@emotion/css@11.11.2):
+    resolution: {integrity: sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==}
+    peerDependencies:
+      '@emotion/css': ^11.0.0-rc.0
+    peerDependenciesMeta:
+      '@emotion/css':
+        optional: true
+    dependencies:
+      '@emotion/css': 11.11.2
+      '@emotion/utils': 1.2.1
+      html-tokenize: 2.0.1
+      multipipe: 1.0.2
+      through: 2.3.8
+    dev: false
+
+  /@emotion/sheet@1.2.2:
+    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
+    dev: false
+
  /@emotion/unitless@0.7.5:
    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
    dev: false
@ -1324,6 +1420,22 @@ packages:
    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
    dev: false

+  /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.3.1
+    dev: false
+
+  /@emotion/utils@1.2.1:
+    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
+    dev: false
+
+  /@emotion/weak-memoize@0.3.1:
+    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
+    dev: false
+
  /@esbuild-kit/cjs-loader@2.4.4:
    resolution: {integrity: sha512-NfsJX4PdzhwSkfJukczyUiZGc7zNNWZcEAyqeISpDnn0PTfzMJR1aR8xAIPskBejIxBJbIgCCMzbaYa9SXepIg==}
    dependencies:
@ -1751,13 +1863,13 @@ packages:
      eslint-visitor-keys: 3.4.3
    dev: false

-  /@eslint-community/eslint-utils@4.4.0(eslint@9.2.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
    dependencies:
-      eslint: 9.2.0
+      eslint: 8.56.0
      eslint-visitor-keys: 3.4.3

  /@eslint-community/regexpp@4.10.0:
@ -1779,32 +1891,15 @@ packages:
      strip-json-comments: 3.1.1
    transitivePeerDependencies:
      - supports-color
-    dev: false
-
-  /@eslint/eslintrc@3.0.2:
-    resolution: {integrity: sha512-wV19ZEGEMAC1eHgrS7UQPqsdEiCIbTKTasEfcXAigzoXICcqZSjBZEHlZwNVvKg6UBCjSlos84XiLqsRJnIcIg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 10.0.1
-      globals: 14.0.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color

  /@eslint/js@8.35.0:
    resolution: {integrity: sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: false

-  /@eslint/js@9.2.0:
-    resolution: {integrity: sha512-ESiIudvhoYni+MdsI8oD7skpprZ89qKocwRM2KEvhhBJ9nl5MRh7BXU5GTod7Mdygq+AUl+QzId6iWJKR/wABA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  /@eslint/js@8.56.0:
+    resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}

  /@floating-ui/core@0.6.2:
    resolution: {integrity: sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg==}
@ -1883,17 +1978,6 @@ packages:
      minimatch: 3.1.2
    transitivePeerDependencies:
      - supports-color
-    dev: false
-
-  /@humanwhocodes/config-array@0.13.0:
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color

  /@humanwhocodes/module-importer@1.0.1:
    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
@ -1902,10 +1986,6 @@ packages:
  /@humanwhocodes/object-schema@2.0.3:
    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}

-  /@humanwhocodes/retry@0.2.4:
-    resolution: {integrity: sha512-Ttl/jHpxfS3st5sxwICYfk4pOH0WrLI1SpW283GgQL7sCWU7EHIOhX4b4fkIxr3tkfzwg8+FNojtzsIEE7Ecgg==}
-    engines: {node: '>=18.18'}
-
  /@iconify/types@2.0.0:
    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
    dev: false
@ -2047,7 +2127,7 @@ packages:
    peerDependencies:
      react: '>=16.3.0'
    dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.5
      hoist-non-react-statics: 3.3.2
      react: 18.1.0
      react-is: 16.13.1
@ -2059,7 +2139,7 @@ packages:
    peerDependencies:
      react: '>=16.3.0'
    dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.5
      hoist-non-react-statics: 3.3.2
      react: 18.3.1
      react-is: 16.13.1
@ -2627,7 +2707,7 @@ packages:
        optional: true
    dependencies:
      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 5.62.0(eslint@9.2.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.56.0)(typescript@5.4.5)
      '@typescript-eslint/scope-manager': 5.62.0
      '@typescript-eslint/type-utils': 5.62.0(eslint@8.35.0)(typescript@5.4.5)
      '@typescript-eslint/utils': 5.62.0(eslint@8.35.0)(typescript@5.4.5)
@ -2643,7 +2723,7 @@ packages:
      - supports-color
    dev: false

-  /@typescript-eslint/parser@5.62.0(eslint@9.2.0)(typescript@5.4.5):
+  /@typescript-eslint/parser@5.62.0(eslint@8.56.0)(typescript@5.4.5):
    resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -2657,7 +2737,7 @@ packages:
      '@typescript-eslint/types': 5.62.0
      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5)
      debug: 4.3.4
-      eslint: 9.2.0
+      eslint: 8.56.0
      typescript: 5.4.5
    transitivePeerDependencies:
      - supports-color
@ -2991,7 +3071,7 @@ packages:
  /@umijs/history@5.3.1:
    resolution: {integrity: sha512-/e0cEGrR2bIWQD7pRl3dl9dcyRGeC9hoW0OCvUTT/hjY0EfUrkd6G8ZanVghPMpDuY5usxq9GVcvrT8KNXLWvA==}
    dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.5
      query-string: 6.14.1
    dev: false

@ -3002,7 +3082,7 @@ packages:
      '@babel/eslint-parser': 7.23.3(@babel/core@7.23.6)(eslint@8.35.0)
      '@stylelint/postcss-css-in-js': 0.38.0(postcss-syntax@0.36.2)(postcss@8.4.38)
      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.35.0)(typescript@5.4.5)
-      '@typescript-eslint/parser': 5.62.0(eslint@9.2.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.56.0)(typescript@5.4.5)
      '@umijs/babel-preset-umi': 4.2.1
      eslint-plugin-jest: 27.2.3(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.35.0)(typescript@5.4.5)
      eslint-plugin-react: 7.33.2(eslint@8.35.0)
@ -3376,6 +3456,9 @@ packages:
    resolution: {integrity: sha512-PqFQSoYZNqquHEBWCeVPCTPSFQCIOOs6W1dOx5wrvMBsQDGokin/0MYg3oaSOs3Xfr3G2/AD7bQWD7FPxsS9oQ==}
    dev: false

+  /@ungap/structured-clone@1.2.0:
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+
  /@vitejs/plugin-react@4.0.0(vite@4.5.2):
    resolution: {integrity: sha512-HX0XzMjL3hhOYm+0s95pb0Z7F8O81G7joUHgfDd/9J/ZZf5k4xX6QAMFkKsHFxaHlf6X7GD7+XuaZ66ULiJuhQ==}
    engines: {node: ^14.18.0 || >=16.0.0}
@ -3608,6 +3691,28 @@ packages:
      dayjs: 1.11.11
    dev: false

+  /antd-style@3.6.2(@types/react@18.3.1)(antd@5.17.0)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-p6tRV63+U9yp3T3DB4ope1Xs3VdkhNsPD+yiZMJnR57dclPQPtrNnrGBmdGwjWYP1HlzB1XS4JHqFAyMjvObHA==}
+    peerDependencies:
+      antd: '>=5.8.1'
+      react: '>=18'
+    dependencies:
+      '@ant-design/cssinjs': 1.20.0(react-dom@18.3.1)(react@18.3.1)
+      '@babel/runtime': 7.24.5
+      '@emotion/cache': 11.11.0
+      '@emotion/css': 11.11.2
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@emotion/serialize': 1.1.4
+      '@emotion/server': 11.11.0(@emotion/css@11.11.2)
+      '@emotion/utils': 1.2.1
+      antd: 5.17.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      use-merge-value: 1.2.0(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-dom
+    dev: false
+
  /antd@4.24.16(react-dom@18.3.1)(react@18.3.1):
    resolution: {integrity: sha512-zZrK4UYxHtU6tGOOf0uG/kBRx1kTvypfuSB3GqE/SBQxFhZ/TZ+yj7Z1qwI8vGfMtUUJdLeuoCAqGDa1zPsXnQ==}
    peerDependencies:
@ -3954,6 +4059,15 @@ packages:
      '@types/babel__traverse': 7.20.5
    dev: false

+  /babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.24.5
+      cosmiconfig: 7.1.0
+      resolve: 1.22.8
+    dev: false
+
  /babel-plugin-styled-components@2.1.4(@babel/core@7.24.5)(styled-components@6.1.1):
    resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==}
    peerDependencies:
@ -4160,6 +4274,10 @@ packages:
      node-int64: 0.4.0
    dev: false

+  /buffer-from@0.1.2:
+    resolution: {integrity: sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==}
+    dev: false
+
  /buffer-from@1.1.2:
    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
    dev: false
@ -4497,6 +4615,10 @@ packages:
    engines: {node: '>= 0.6'}
    dev: false

+  /convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: false
+
  /convert-source-map@2.0.0:
    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
    dev: false
@ -4944,7 +5066,6 @@ packages:
    engines: {node: '>=6.0.0'}
    dependencies:
      esutils: 2.0.3
-    dev: false

  /dom-align@1.12.4:
    resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
@ -4999,6 +5120,12 @@ packages:
      tslib: 2.6.2
    dev: false

+  /duplexer2@0.1.4:
+    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
+    dependencies:
+      readable-stream: 2.3.8
+    dev: false
+
  /duplexify@4.1.3:
    resolution: {integrity: sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==}
    dependencies:
@ -5481,7 +5608,7 @@ packages:
      string.prototype.matchall: 4.0.11
    dev: false

-  /eslint-plugin-unused-imports@3.2.0(eslint@9.2.0):
+  /eslint-plugin-unused-imports@3.2.0(eslint@8.56.0):
    resolution: {integrity: sha512-6uXyn6xdINEpxE1MtDjxQsyXB37lfyO2yKGVVgtD7WEWQGORSOZjgrD6hBhvGv4/SO+TOlS+UnC6JppRqbuwGQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -5491,7 +5618,7 @@ packages:
      '@typescript-eslint/eslint-plugin':
        optional: true
    dependencies:
-      eslint: 9.2.0
+      eslint: 8.56.0
      eslint-rule-composer: 0.3.0
    dev: true

@ -5514,14 +5641,6 @@ packages:
    dependencies:
      esrecurse: 4.3.0
      estraverse: 5.3.0
-    dev: false
-
-  /eslint-scope@8.0.1:
-    resolution: {integrity: sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0

  /eslint-utils@3.0.0(eslint@8.35.0):
    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
@ -5542,10 +5661,6 @@ packages:
    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}

-  /eslint-visitor-keys@4.0.0:
-    resolution: {integrity: sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
  /eslint@8.35.0:
    resolution: {integrity: sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -5595,37 +5710,41 @@ packages:
      - supports-color
    dev: false

-  /eslint@9.2.0:
-    resolution: {integrity: sha512-0n/I88vZpCOzO+PQpt0lbsqmn9AsnsJAQseIqhZFI8ibQT0U1AkEKRxA3EVMos0BoHSXDQvCXY25TUjB5tr8Og==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  /eslint@8.56.0:
+    resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    hasBin: true
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
      '@eslint-community/regexpp': 4.10.0
-      '@eslint/eslintrc': 3.0.2
-      '@eslint/js': 9.2.0
-      '@humanwhocodes/config-array': 0.13.0
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.56.0
+      '@humanwhocodes/config-array': 0.11.14
      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.2.4
      '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.2.0
      ajv: 6.12.6
      chalk: 4.1.2
      cross-spawn: 7.0.3
      debug: 4.3.4
+      doctrine: 3.0.0
      escape-string-regexp: 4.0.0
-      eslint-scope: 8.0.1
-      eslint-visitor-keys: 4.0.0
-      espree: 10.0.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
      esquery: 1.5.0
      esutils: 2.0.3
      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
+      file-entry-cache: 6.0.1
      find-up: 5.0.0
      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
      ignore: 5.3.1
      imurmurhash: 0.1.4
      is-glob: 4.0.3
      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
      json-stable-stringify-without-jsonify: 1.0.1
      levn: 0.4.1
      lodash.merge: 4.6.2
@ -5647,14 +5766,6 @@ packages:
      type: 2.7.2
    dev: false

-  /espree@10.0.1:
-    resolution: {integrity: sha512-MWkrWZbJsL2UwnjxTX3gG8FneachS/Mwg7tdGXce011sJd5b0JG54vat5KHnfSBODZ3Wvzd2WnjxyzsRoVv+ww==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
-      eslint-visitor-keys: 4.0.0
-
  /espree@9.6.1:
    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -5662,7 +5773,6 @@ packages:
      acorn: 8.11.3
      acorn-jsx: 5.3.2(acorn@8.11.3)
      eslint-visitor-keys: 3.4.3
-    dev: false

  /esprima@4.0.1:
    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
@ -5889,13 +5999,6 @@ packages:
    engines: {node: ^10.12.0 || >=12.0.0}
    dependencies:
      flat-cache: 3.2.0
-    dev: false
-
-  /file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
-    dependencies:
-      flat-cache: 4.0.1

  /fill-range@7.0.1:
    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
@ -5923,6 +6026,10 @@ packages:
      - supports-color
    dev: false

+  /find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
+
  /find-up@4.1.0:
    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
    engines: {node: '>=8'}
@ -5945,14 +6052,6 @@ packages:
      flatted: 3.3.1
      keyv: 4.5.4
      rimraf: 3.0.2
-    dev: false
-
-  /flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
-    dependencies:
-      flatted: 3.3.1
-      keyv: 4.5.4

  /flatted@3.3.1:
    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
@ -6054,7 +6153,6 @@ packages:

  /fs.realpath@1.0.0:
    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: false

  /fsevents@2.3.3:
    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
@ -6188,7 +6286,6 @@ packages:
      minimatch: 3.1.2
      once: 1.4.0
      path-is-absolute: 1.0.1
-    dev: false

  /global-modules@2.0.0:
    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
@ -6223,11 +6320,6 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      type-fest: 0.20.2
-    dev: false
-
-  /globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}

  /globalthis@1.0.4:
    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
@ -6279,7 +6371,6 @@ packages:

  /graphemer@1.4.0:
    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: false

  /handle-thing@2.0.1:
    resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
@ -6380,7 +6471,7 @@ packages:
  /history@5.3.0:
    resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
    dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.5
    dev: false

  /hmac-drbg@1.0.1:
@ -6448,6 +6539,17 @@ packages:
    engines: {node: '>=8'}
    dev: false

+  /html-tokenize@2.0.1:
+    resolution: {integrity: sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==}
+    hasBin: true
+    dependencies:
+      buffer-from: 0.1.2
+      inherits: 2.0.4
+      minimist: 1.2.8
+      readable-stream: 1.0.34
+      through2: 0.4.2
+    dev: false
+
  /html-webpack-plugin@5.5.0(webpack@5.91.0):
    resolution: {integrity: sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==}
    engines: {node: '>=10.13.0'}
@ -6593,7 +6695,6 @@ packages:
    dependencies:
      once: 1.4.0
      wrappy: 1.0.2
-    dev: false

  /inherits@2.0.1:
    resolution: {integrity: sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==}
@ -6605,7 +6706,6 @@ packages:

  /inherits@2.0.4:
    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false

  /ini@1.3.8:
    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
@ -7655,6 +7755,10 @@ packages:
      kind-of: 6.0.3
    dev: false

+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: false
+
  /minipass@7.1.1:
    resolution: {integrity: sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==}
    engines: {node: '>=16 || 14 >=14.17'}
@ -7675,6 +7779,13 @@ packages:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
    dev: false

+  /multipipe@1.0.2:
+    resolution: {integrity: sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==}
+    dependencies:
+      duplexer2: 0.1.4
+      object-assign: 4.1.1
+    dev: false
+
  /nanoid@3.3.7:
    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@ -7868,6 +7979,10 @@ packages:
    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
    dev: false

+  /object-keys@0.4.0:
+    resolution: {integrity: sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==}
+    dev: false
+
  /object-keys@1.1.1:
    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
    engines: {node: '>= 0.4'}
@ -7958,7 +8073,6 @@ packages:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
      wrappy: 1.0.2
-    dev: false

  /onetime@5.1.2:
    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@ -8104,7 +8218,6 @@ packages:
  /path-is-absolute@1.0.1:
    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
    engines: {node: '>=0.10.0'}
-    dev: false

  /path-key@3.1.1:
    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
@ -9933,7 +10046,7 @@ packages:
      react: ^16.6.0 || ^17.0.0 || ^18.0.0
      react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
    dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.5
      invariant: 2.2.4
      prop-types: 15.8.1
      react: 18.1.0
@ -9948,7 +10061,7 @@ packages:
      react: ^16.6.0 || ^17.0.0 || ^18.0.0
      react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
    dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.5
      invariant: 2.2.4
      prop-types: 15.8.1
      react: 18.3.1
@ -10179,6 +10292,15 @@ packages:
      type-fest: 0.6.0
    dev: false

+  /readable-stream@1.0.34:
+    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: false
+
  /readable-stream@2.3.8:
    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
    dependencies:
@ -10375,7 +10497,6 @@ packages:
    hasBin: true
    dependencies:
      glob: 7.2.3
-    dev: false

  /rimraf@5.0.1:
    resolution: {integrity: sha512-OfFZdwtd3lZ+XZzYP/6gTACubwFcHdLRqS9UX3UwpU2dnGQYkPFISRwvM3w9IiB2w7bW5qGo/uAwE4SmXXSKvg==}
@ -10718,6 +10839,11 @@ packages:
      source-map: 0.6.1
    dev: false

+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
  /source-map@0.6.1:
    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
    engines: {node: '>=0.10.0'}
@ -10929,6 +11055,10 @@ packages:
      safe-buffer: 5.2.1
    dev: false

+  /string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+    dev: false
+
  /string_decoder@1.1.1:
    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
    dependencies:
@ -11064,6 +11194,10 @@ packages:
      - supports-color
    dev: false

+  /stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+    dev: false
+
  /stylis@4.3.2:
    resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
    dev: false
@ -11239,6 +11373,17 @@ packages:
    engines: {node: '>=12.22'}
    dev: false

+  /through2@0.4.2:
+    resolution: {integrity: sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==}
+    dependencies:
+      readable-stream: 1.0.34
+      xtend: 2.1.2
+    dev: false
+
+  /through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+    dev: false
+
  /timers-browserify@2.0.12:
    resolution: {integrity: sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==}
    engines: {node: '>=0.6.0'}
@ -11342,7 +11487,6 @@ packages:
  /type-fest@0.20.2:
    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
    engines: {node: '>=10'}
-    dev: false

  /type-fest@0.6.0:
    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
@ -11541,6 +11685,14 @@ packages:
      react: 18.1.0
    dev: false

+  /use-merge-value@1.2.0(react@18.3.1):
+    resolution: {integrity: sha512-DXgG0kkgJN45TcyoXL49vJnn55LehnrmoHc7MbKi+QDBvr8dsesqws8UlyIWGHMR+JXgxc1nvY+jDGMlycsUcw==}
+    peerDependencies:
+      react: '>= 16.x'
+    dependencies:
+      react: 18.3.1
+    dev: false
+
  /use-sync-external-store@1.2.0(react@18.3.1):
    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
    peerDependencies:
@ -11866,7 +12018,6 @@ packages:

  /wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: false

  /write-file-atomic@4.0.2:
    resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
@ -11876,6 +12027,13 @@ packages:
      signal-exit: 3.0.7
    dev: false

+  /xtend@2.1.2:
+    resolution: {integrity: sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==}
+    engines: {node: '>=0.4'}
+    dependencies:
+      object-keys: 0.4.0
+    dev: false
+
  /xtend@4.0.2:
    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
    engines: {node: '>=0.4'}
--- a/src/components/popover/index.less
+++ b/src/components/popover/index.less
@ -0,0 +1,27 @@
+:local(.seal_custom_popover) {
+  position: relative;
+  padding-top: var(--ant-popover-inner-padding);
+  border-radius: var(--ant-border-radius-lg);
+  background-color: var(--color-white-1);
+  box-shadow: var(--ant-box-shadow-secondary);
+  overflow: hidden;
+  padding-top: 80px;
+  :global(.ant-popover-inner) {
+    box-shadow: none;
+    padding-top: 0;
+  }
+  :global(.ant-popover-content) {
+    position: static;
+  }
+  :global(.ant-popover-title) {
+    position: absolute;
+    top: 0;
+    padding-block: var(--ant-popover-inner-padding)
+      var(--ant-popover-title-margin-bottom);
+    margin-bottom: 0;
+    background: #fff;
+    padding-left: var(--ant-popover-inner-padding);
+    left: 0;
+    width: 100%;
+  }
+}
--- a/src/components/popover/index.tsx
+++ b/src/components/popover/index.tsx
@ -0,0 +1,23 @@
+import { Popover } from 'antd';
+import type { PopoverProps } from 'antd/lib/popover';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const SealPopover: React.FC<PopoverProps> = (props) => {
+  const { className, children, style, ...restProps } = props;
+
+  return (
+    <div className="popover-wrapper">
+      <Popover
+        {...restProps}
+        style={{ ...style }}
+        data-maxHeight="300px"
+        overlayClassName={classNames(className, styles.seal_custom_popover)}
+      >
+        {children}
+      </Popover>
+    </div>
+  );
+};
+
+export default SealPopover;
--- a/src/components/seal-form/components/wrapper.less
+++ b/src/components/seal-form/components/wrapper.less
@ -0,0 +1,49 @@
+:local(.wrapper) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 54px;
+  border-width: var(--ant-line-width);
+  border-style: var(--ant-line-type);
+  border-color: var(--ant-color-border);
+  border-radius: 28px;
+  padding-inline: 12px;
+  padding-block: 20px 0;
+  &:hover {
+    border-color: var(--ant-input-hover-border-color);
+    transition: all 0.2s ease;
+  }
+  &:focus-within {
+    border-color: var(--ant-input-active-border-color);
+    box-shadow: var(--ant-input-active-shadow);
+    outline: 0;
+    background-color: var(--ant-input-active-bg);
+  }
+  .label {
+    position: absolute;
+    left: 24px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: var(--font-size-base);
+    line-height: 1;
+    pointer-events: all;
+    z-index: 5;
+    &.isfoucs-has-value {
+      top: 8px;
+      transition: all 0.2s var(--seal-transition-func);
+    }
+    &.blur-no-value {
+      top: 21px;
+      transition: all 0.2s var(--seal-transition-func);
+    }
+  }
+  :global(.ant-input) {
+    display: flex;
+    align-items: center;
+    border: none;
+    box-shadow: none;
+    padding-block: 5px;
+    padding-inline: 12px;
+    height: 32px;
+  }
+}
--- a/src/components/seal-form/components/wrapper.tsx
+++ b/src/components/seal-form/components/wrapper.tsx
@ -1,14 +1,34 @@
+import classNames from 'classnames';
+import wrapperStyle from './wrapper.less';
 interface WrapperProps {
  children: React.ReactNode;
  label: string;
+  isFocus: boolean;
+  onClick?: () => void;
 }

-const Wrapper: React.FC<WrapperProps>= ({ children }) => {
+const Wrapper: React.FC<WrapperProps> = ({
+  children,
+  label,
+  isFocus,
+  onClick
+}) => {
  return (
-    <div>
+    <div className={wrapperStyle.wrapper} onClick={onClick}>
+      <label
+        onClick={onClick}
+        className={classNames(
+          wrapperStyle['label'],
+          isFocus
+            ? wrapperStyle['isfoucs-has-value']
+            : wrapperStyle['blur-no-value']
+        )}
+      >
+        {label}
+      </label>
      {children}
    </div>
  );
-}
+};

-export default Wrapper;
+export default Wrapper;
--- a/src/components/seal-form/seal-input.tsx
+++ b/src/components/seal-form/seal-input.tsx
@ -1,24 +1,72 @@
-import { Input } from 'antd';
 import type { InputProps } from 'antd';
+import { Input } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import Wrapper from './components/wrapper';
-import  { SealFormItemProps } from './types';
+import { SealFormItemProps } from './types';

 const TextArea: React.FC<InputProps & SealFormItemProps> = (props) => {
+  console.log('textarea=========', 121);
  return (
    <Wrapper label="input">
-      <Input.TextArea placeholder='send your message' autoSize={{minRows: 1,maxRows: 6}} size="large" variant='borderless'></Input.TextArea>
+      <Input.TextArea
+        placeholder="send your message"
+        autoSize={{ minRows: 1, maxRows: 6 }}
+        size="large"
+        variant="borderless"
+      ></Input.TextArea>
    </Wrapper>
  );
-}
+};

 const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const {label, ...rest} = props;
+  const { label, placeholder, ...rest } = props;
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (props.value) {
+      setIsFocus(true);
+    }
+  }, [props.value]);
+
+  const handleClickWrapper = () => {
+    if (!props.disabled && !isFocus) {
+      inputRef.current?.focus?.();
+      setIsFocus(true);
+    }
+  };
+
+  const handleChange = (e: any) => {
+    props.onChange?.(e);
+  };
+
+  const handleOnFocus = (e: any) => {
+    setIsFocus(true);
+    props.onFocus?.(e);
+  };
+
+  const handleOnBlur = (e: any) => {
+    if (!inputRef.current?.input?.value) {
+      setIsFocus(false);
+      props.onBlur?.(e);
+    }
+  };
+
  return (
-    <Wrapper label="input">
-      <Input {...rest} placeholder='send your message'></Input>
+    <Wrapper
+      label={label || (placeholder as string)}
+      isFocus={isFocus}
+      onClick={handleClickWrapper}
+    >
+      <Input
+        {...rest}
+        ref={inputRef}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onChange={(e) => handleChange(e)}
+      ></Input>
    </Wrapper>
  );
-}
-
+};

-export default {TextArea,Input: SealInput};
+export default { TextArea, Input: SealInput };
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@ -1 +1,7 @@
 export const DEFAULT_NAME = 'Umi Max';
+
+export const INPUT_WIDTH = {
+  default: 500,
+  large: 600,
+  small: 400
+};
--- a/src/global.less
+++ b/src/global.less
@ -1,4 +1,4 @@
-html{
+html {
  --color-fill-1: rgba(0, 0, 0, 0.04);
  --color-fill-2: #fff;
  --color-fill-3: #f3f6fa;
@ -10,23 +10,37 @@ html{
  --color-text-1: #1d2129;
  --color-bg-light-1: #f0fff6;
  --font-size-base: 12px;
-  --ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 0.06);
-  --ant-input-active-border-color: #2fbf85;
  --ant-color-fill-secondary: rgba(0, 0, 0, 0.06);
  // --color-text-1: #000;
- 
+
+  --seal-transition-func: cubic-bezier(0, 0, 1, 1);
+  // ======== input ============
+  --ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 0.06);
+  --ant-input-active-border-color: #2fbf85;
+  --ant-input-hover-border-color: #54cc98;

  .css-var-rf {
-    --ant-font-size:  var(--font-size-base);
+    --ant-font-size: var(--font-size-base);
  }
  .css-var-r0 {
    // --ant-control-height: 36px;
-    --ant-font-size-sm:  var(--font-size-base);
-    --ant-font-size-lg:  var(--font-size-base);
+    --ant-font-size-sm: var(--font-size-base);
+    --ant-font-size-lg: var(--font-size-base);
    --ant-font-size-xl: 20px;
    --ant-padding-sm: 14px;
+
+    &.ant-popover {
+      --ant-popover-inner-padding: 26px;
+      --ant-popover-title-margin-bottom: 22px;
+    }
+
+    &.ant-btn {
+      --ant-button-content-font-size-lg: 13px;
+      --ant-button-content-font-size: 13px;
+      --ant-button-content-font-size-sm: 13px;
+    }
  }
- 
+
  .css-var-rf.ant-menu-css-var {
    --ant-menu-item-height: 46px;
    --ant-menu-item-selected-bg: var(--color-white-1);
@ -39,12 +53,12 @@ html{
  .css-var-r0.ant-input-css-var {
    --ant-input-input-font-size: var(--font-size-base);
    --ant-input-input-font-size-lg: var(--font-size-base);
-    --ant-input-input-font-size-sm:var(--font-size-base);
+    --ant-input-input-font-size-sm: var(--font-size-base);
  }
  .css-var-r0.ant-select-css-var {
    --ant-select-option-active-bg: var(--color-fill-1);
    --ant-select-option-font-size: var(--font-size-base);
-  } 
+  }
 }
 body * {
  font-weight: var(--font-weight-normal);
@ -59,7 +73,6 @@ body * {
  }
  .ant-layout {
    min-height: 100vh;
-    
  }
  .ant-pro-layout-container {
    background-color: var(--color-fill-2);
@ -84,4 +97,4 @@ body * {
 }
 // ======== menu style end ============

-@import url('src/assets/styles/menu.less');
+@import url('src/assets/styles/menu.less');
--- a/src/pages/playground/components/params-settings.tsx
+++ b/src/pages/playground/components/params-settings.tsx
@ -1,13 +1,142 @@
-import { Form } from 'antd';
-import { useState } from 'react';
+import SealInput from '@/components/seal-form/seal-input';
+import { INPUT_WIDTH } from '@/constants';
+import { Button, Form, Space } from 'antd';
+
+type ParamsSettingsProps = {
+  seed?: number;
+  stopSequence?: number;
+  temperature?: number;
+  topK?: number;
+  topP?: number;
+  repeatPenalty?: number;
+  repeatLastN?: number;
+  tfsZ?: number;
+  contextLength?: number;
+  maxTokens?: number;
+};

 const ParamsSettings: React.FC = () => {
-  const [params, setParams] = useState({
-    name: 'jack',
-    age: 18,
-  });
+  const initialValues = {
+    seed: 1,
+    stopSequence: 1,
+    temperature: 1,
+    topK: 1,
+    topP: 1,
+    repeatPenalty: 1,
+    repeatLastN: 1,
+    tfsZ: 1,
+    contextLength: 256,
+    maxTokens: 256
+  };
+  const [form] = Form.useForm();
+
+  const handleOnFinish = (values: any) => {
+    console.log('handleOnFinish', values);
+  };
+
+  const handleOnFinishFailed = (errorInfo: any) => {
+    console.log('handleOnFinishFailed', errorInfo);
+  };

-  return <Form></Form>;
+  return (
+    <Form
+      name="modelparams"
+      form={form}
+      onFinish={handleOnFinish}
+      onFinishFailed={handleOnFinishFailed}
+    >
+      <Form.Item<ParamsSettingsProps> name="seed" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="Seed"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="stopSequence"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Stop Sequence"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="temperature"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Temperature"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps> name="topK" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="TopK"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps> name="topP" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="TopP"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="repeatPenalty"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Repeat Penalty"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="repeatLastN"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Repeat Last N"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps> name="tfsZ" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="TFSZ"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="contextLength"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Context Length"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="maxTokens"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Max Tokens"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item noStyle>
+        <Space
+          size={20}
+          align="end"
+          style={{ width: '100%', display: 'flex', justifyContent: 'end' }}
+        >
+          <Button>Cancel</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Space>
+      </Form.Item>
+    </Form>
+  );
 };

 export default ParamsSettings;
--- a/src/pages/playground/index.tsx
+++ b/src/pages/playground/index.tsx
@ -1,10 +1,11 @@
-import SealInput from '@/components/seal-form/seal-input';
+import SealPopover from '@/components/popover';
 import { ControlOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Popover, Select, Space } from 'antd';
+import { Button, Select, Space } from 'antd';
 import { useEffect, useState } from 'react';
 import ChatContent from './components/chatContent';
 import MessageInput from './components/messageInput';
+import ParamsSettings from './components/params-settings';

 const dataList = [
  { value: 'llama3:latest', label: 'llama3:latest' },
@ -23,6 +24,7 @@ const Playground: React.FC = () => {

  const getMessageList = () => {
    // fetch message list from server
+    console.log('getModelList');
    setMessageList(['1']);
  };

@ -43,13 +45,21 @@ const Playground: React.FC = () => {
            onChange={handleSelectChange}
            variant="filled"
          ></Select>
-          <Popover content="ssd" title="Title" trigger="click">
+          <SealPopover
+            content={<ParamsSettings></ParamsSettings>}
+            destroyTooltipOnHide={true}
+            title="Params Settings"
+            trigger="click"
+            arrow={false}
+            overlayInnerStyle={{ maxHeight: '500px', overflow: 'auto' }}
+            placement="bottomRight"
+          >
            <Button
              type="primary"
              shape="circle"
              icon={<ControlOutlined />}
            ></Button>
-          </Popover>
+          </SealPopover>
        </Space>
      ]}
      footer={[<MessageInput />]}
@ -57,7 +67,6 @@ const Playground: React.FC = () => {
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <ChatContent messageList={messageList}></ChatContent>
      </div>
-      <SealInput.Input label="test label"></SealInput.Input>
    </PageContainer>
  );
 };