mirror of
https://github.com/ershisan99/flashcards-example-project.git
synced 2025-12-18 05:09:23 +00:00
run updated linters
This commit is contained in:
@@ -1,4 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
extends: ['@it-incubator/eslint-config', 'plugin:storybook/recommended',],
|
extends: ['@it-incubator/eslint-config'],
|
||||||
plugins: ['react-refresh'],
|
|
||||||
};
|
};
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@it-incubator/eslint-config": "^1.0.2",
|
"@it-incubator/eslint-config": "^1.0.2",
|
||||||
"@it-incubator/prettier-config": "^0.1.2",
|
"@it-incubator/prettier-config": "^0.1.2",
|
||||||
"@it-incubator/stylelint-config": "^1.0.3",
|
"@it-incubator/stylelint-config": "2.0.0",
|
||||||
"@storybook/addon-essentials": "^8.0.9",
|
"@storybook/addon-essentials": "^8.0.9",
|
||||||
"@storybook/addon-interactions": "^8.0.9",
|
"@storybook/addon-interactions": "^8.0.9",
|
||||||
"@storybook/addon-links": "^8.0.9",
|
"@storybook/addon-links": "^8.0.9",
|
||||||
@@ -46,8 +46,10 @@
|
|||||||
"eslint-plugin-storybook": "^0.8.0",
|
"eslint-plugin-storybook": "^0.8.0",
|
||||||
"sass": "^1.76.0",
|
"sass": "^1.76.0",
|
||||||
"storybook": "^8.0.9",
|
"storybook": "^8.0.9",
|
||||||
"stylelint": "^16.5.0",
|
|
||||||
"typescript": "^5.4.5",
|
"typescript": "^5.4.5",
|
||||||
|
"stylelint": "^16.5.0",
|
||||||
|
"stylelint-config-clean-order": ">=5.4.2",
|
||||||
|
"stylelint-config-standard-scss": ">=13.1.0",
|
||||||
"vite": "^4.4.5"
|
"vite": "^4.4.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
110
pnpm-lock.yaml
generated
110
pnpm-lock.yaml
generated
@@ -37,8 +37,8 @@ importers:
|
|||||||
specifier: ^0.1.2
|
specifier: ^0.1.2
|
||||||
version: 0.1.2
|
version: 0.1.2
|
||||||
'@it-incubator/stylelint-config':
|
'@it-incubator/stylelint-config':
|
||||||
specifier: ^1.0.3
|
specifier: 2.0.0
|
||||||
version: 1.0.3(stylelint-config-clean-order@5.0.1(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5))
|
version: 2.0.0(stylelint-config-clean-order@5.4.2(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5))
|
||||||
'@storybook/addon-essentials':
|
'@storybook/addon-essentials':
|
||||||
specifier: ^8.0.9
|
specifier: ^8.0.9
|
||||||
version: 8.0.9(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
version: 8.0.9(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
@@ -102,6 +102,12 @@ importers:
|
|||||||
stylelint:
|
stylelint:
|
||||||
specifier: ^16.5.0
|
specifier: ^16.5.0
|
||||||
version: 16.5.0(typescript@5.4.5)
|
version: 16.5.0(typescript@5.4.5)
|
||||||
|
stylelint-config-clean-order:
|
||||||
|
specifier: '>=5.4.2'
|
||||||
|
version: 5.4.2(stylelint@16.5.0(typescript@5.4.5))
|
||||||
|
stylelint-config-standard-scss:
|
||||||
|
specifier: '>=13.1.0'
|
||||||
|
version: 13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5))
|
||||||
typescript:
|
typescript:
|
||||||
specifier: ^5.4.5
|
specifier: ^5.4.5
|
||||||
version: 5.4.5
|
version: 5.4.5
|
||||||
@@ -1056,12 +1062,12 @@ packages:
|
|||||||
'@it-incubator/prettier-config@0.1.2':
|
'@it-incubator/prettier-config@0.1.2':
|
||||||
resolution: {integrity: sha512-Yxy2vZHhmfEPEU4xf/JltSuQQ5GTModi+oqsiZdV5MtWbLbfSpXpv9a3rpUziEULTPtrv7MdM0mdOx9YDCgSjA==}
|
resolution: {integrity: sha512-Yxy2vZHhmfEPEU4xf/JltSuQQ5GTModi+oqsiZdV5MtWbLbfSpXpv9a3rpUziEULTPtrv7MdM0mdOx9YDCgSjA==}
|
||||||
|
|
||||||
'@it-incubator/stylelint-config@1.0.3':
|
'@it-incubator/stylelint-config@2.0.0':
|
||||||
resolution: {integrity: sha512-2wmrYKDTF2ZuXGpd9C3DoCgXvq2WXPYN15x3uszmSF3cnJP9HRjVdSfWX0+uH2OmHphANfRe2FLLsqNSraZDMg==}
|
resolution: {integrity: sha512-/cJUdGrAzAKLF09GcF6rvf1rEQMDeKjRWGvM0os//nGwmjCyPv0OjAxN+wDxW/iG1h5Och88FEqfYbt1VjougA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: 16.1.0
|
stylelint: '>=16.5.0'
|
||||||
stylelint-config-clean-order: 5.2.0
|
stylelint-config-clean-order: '>=5.4.2'
|
||||||
stylelint-config-standard-scss: 12.0.0
|
stylelint-config-standard-scss: '>=13.1.0'
|
||||||
|
|
||||||
'@jest/schemas@29.6.3':
|
'@jest/schemas@29.6.3':
|
||||||
resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
|
resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
|
||||||
@@ -3616,11 +3622,11 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.4.31
|
postcss: ^8.4.31
|
||||||
|
|
||||||
postcss-scss@4.0.6:
|
postcss-scss@4.0.9:
|
||||||
resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==}
|
resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
|
||||||
engines: {node: '>=12.0'}
|
engines: {node: '>=12.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.4.19
|
postcss: ^8.4.29
|
||||||
|
|
||||||
postcss-selector-parser@6.0.16:
|
postcss-selector-parser@6.0.16:
|
||||||
resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
|
resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
|
||||||
@@ -4081,48 +4087,53 @@ packages:
|
|||||||
resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
|
resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
|
|
||||||
stylelint-config-clean-order@5.0.1:
|
stylelint-config-clean-order@5.4.2:
|
||||||
resolution: {integrity: sha512-zKLXjTgrkZqiml0VXv7Syl11XLpzRErW+1/qSEjIQ+aHAFjGuRq6Uwal9OzxtDHvpoIhlc4wCYjougWDuLN5aA==}
|
resolution: {integrity: sha512-lhPnDUL1gQbZYqG9kQx5dfEfiD/EpyVbb6jOiR7YfKzkIVv7Rw4jSKzvxr4v5PZqmRyCSzM3goc93jqfF+OZbA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: '>=14'
|
stylelint: '>=14'
|
||||||
|
|
||||||
stylelint-config-recommended-scss@12.0.0:
|
stylelint-config-recommended-scss@14.0.0:
|
||||||
resolution: {integrity: sha512-5Bb2mlGy6WLa30oNeKpZvavv2lowJUsUJO25+OA68GFTemlwd1zbFsL7q0bReKipOSU3sG47hKneZ6Nd+ctrFA==}
|
resolution: {integrity: sha512-HDvpoOAQ1RpF+sPbDOT2Q2/YrBDEJDnUymmVmZ7mMCeNiFSdhRdyGEimBkz06wsN+HaFwUh249gDR+I9JR7Onw==}
|
||||||
|
engines: {node: '>=18.12.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.3.3
|
postcss: ^8.3.3
|
||||||
stylelint: ^15.5.0
|
stylelint: ^16.0.2
|
||||||
peerDependenciesMeta:
|
peerDependenciesMeta:
|
||||||
postcss:
|
postcss:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
stylelint-config-recommended@12.0.0:
|
stylelint-config-recommended@14.0.0:
|
||||||
resolution: {integrity: sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==}
|
resolution: {integrity: sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==}
|
||||||
|
engines: {node: '>=18.12.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: ^15.5.0
|
stylelint: ^16.0.0
|
||||||
|
|
||||||
stylelint-config-standard-scss@10.0.0:
|
stylelint-config-standard-scss@13.1.0:
|
||||||
resolution: {integrity: sha512-bChBEo1p3xUVWh/wenJI+josoMk21f2yuLDGzGjmKYcALfl2u3DFltY+n4UHswYiXghqXaA8mRh+bFy/q1hQlg==}
|
resolution: {integrity: sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==}
|
||||||
|
engines: {node: '>=18.12.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.3.3
|
postcss: ^8.3.3
|
||||||
stylelint: ^15.5.0
|
stylelint: ^16.3.1
|
||||||
peerDependenciesMeta:
|
peerDependenciesMeta:
|
||||||
postcss:
|
postcss:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
stylelint-config-standard@33.0.0:
|
stylelint-config-standard@36.0.0:
|
||||||
resolution: {integrity: sha512-eyxnLWoXImUn77+ODIuW9qXBDNM+ALN68L3wT1lN2oNspZ7D9NVGlNHb2QCUn4xDug6VZLsh0tF8NyoYzkgTzg==}
|
resolution: {integrity: sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==}
|
||||||
|
engines: {node: '>=18.12.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: ^15.5.0
|
stylelint: ^16.1.0
|
||||||
|
|
||||||
stylelint-order@6.0.3:
|
stylelint-order@6.0.4:
|
||||||
resolution: {integrity: sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==}
|
resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: ^14.0.0 || ^15.0.0
|
stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
|
||||||
|
|
||||||
stylelint-scss@5.0.1:
|
stylelint-scss@6.3.0:
|
||||||
resolution: {integrity: sha512-n87iCRZrr2J7//I/QFsDXxFLnHKw633U4qvWZ+mOW6KDAp/HLj06H+6+f9zOuTYy+MdGdTuCSDROCpQIhw5fvQ==}
|
resolution: {integrity: sha512-8OSpiuf1xC7f8kllJsBOFAOYp/mR/C1FXMVeOFjtJPw+AFvEmC93FaklHt7MlOqU4poxuQ1TkYMyfI0V+1SxjA==}
|
||||||
|
engines: {node: '>=18.12.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: ^14.5.1 || ^15.0.0
|
stylelint: ^16.0.2
|
||||||
|
|
||||||
stylelint@16.5.0:
|
stylelint@16.5.0:
|
||||||
resolution: {integrity: sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==}
|
resolution: {integrity: sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==}
|
||||||
@@ -5521,11 +5532,11 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
prettier: 3.0.0
|
prettier: 3.0.0
|
||||||
|
|
||||||
'@it-incubator/stylelint-config@1.0.3(stylelint-config-clean-order@5.0.1(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5))':
|
'@it-incubator/stylelint-config@2.0.0(stylelint-config-clean-order@5.4.2(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5))':
|
||||||
dependencies:
|
dependencies:
|
||||||
stylelint: 16.5.0(typescript@5.4.5)
|
stylelint: 16.5.0(typescript@5.4.5)
|
||||||
stylelint-config-clean-order: 5.0.1(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-config-clean-order: 5.4.2(stylelint@16.5.0(typescript@5.4.5))
|
||||||
stylelint-config-standard-scss: 10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-config-standard-scss: 13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5))
|
||||||
|
|
||||||
'@jest/schemas@29.6.3':
|
'@jest/schemas@29.6.3':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -7108,7 +7119,7 @@ snapshots:
|
|||||||
css-tree@2.3.1:
|
css-tree@2.3.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
mdn-data: 2.0.30
|
mdn-data: 2.0.30
|
||||||
source-map-js: 1.0.2
|
source-map-js: 1.2.0
|
||||||
|
|
||||||
css.escape@1.5.1: {}
|
css.escape@1.5.1: {}
|
||||||
|
|
||||||
@@ -8687,7 +8698,7 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
|
|
||||||
postcss-scss@4.0.6(postcss@8.4.38):
|
postcss-scss@4.0.9(postcss@8.4.38):
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
|
|
||||||
@@ -9224,45 +9235,46 @@ snapshots:
|
|||||||
|
|
||||||
strip-json-comments@3.1.1: {}
|
strip-json-comments@3.1.1: {}
|
||||||
|
|
||||||
stylelint-config-clean-order@5.0.1(stylelint@16.5.0(typescript@5.4.5)):
|
stylelint-config-clean-order@5.4.2(stylelint@16.5.0(typescript@5.4.5)):
|
||||||
dependencies:
|
dependencies:
|
||||||
stylelint: 16.5.0(typescript@5.4.5)
|
stylelint: 16.5.0(typescript@5.4.5)
|
||||||
stylelint-order: 6.0.3(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-order: 6.0.4(stylelint@16.5.0(typescript@5.4.5))
|
||||||
|
|
||||||
stylelint-config-recommended-scss@12.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)):
|
stylelint-config-recommended-scss@14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)):
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss-scss: 4.0.6(postcss@8.4.38)
|
postcss-scss: 4.0.9(postcss@8.4.38)
|
||||||
stylelint: 16.5.0(typescript@5.4.5)
|
stylelint: 16.5.0(typescript@5.4.5)
|
||||||
stylelint-config-recommended: 12.0.0(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5))
|
||||||
stylelint-scss: 5.0.1(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-scss: 6.3.0(stylelint@16.5.0(typescript@5.4.5))
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
|
|
||||||
stylelint-config-recommended@12.0.0(stylelint@16.5.0(typescript@5.4.5)):
|
stylelint-config-recommended@14.0.0(stylelint@16.5.0(typescript@5.4.5)):
|
||||||
dependencies:
|
dependencies:
|
||||||
stylelint: 16.5.0(typescript@5.4.5)
|
stylelint: 16.5.0(typescript@5.4.5)
|
||||||
|
|
||||||
stylelint-config-standard-scss@10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)):
|
stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)):
|
||||||
dependencies:
|
dependencies:
|
||||||
stylelint: 16.5.0(typescript@5.4.5)
|
stylelint: 16.5.0(typescript@5.4.5)
|
||||||
stylelint-config-recommended-scss: 12.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-config-recommended-scss: 14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5))
|
||||||
stylelint-config-standard: 33.0.0(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-config-standard: 36.0.0(stylelint@16.5.0(typescript@5.4.5))
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
|
|
||||||
stylelint-config-standard@33.0.0(stylelint@16.5.0(typescript@5.4.5)):
|
stylelint-config-standard@36.0.0(stylelint@16.5.0(typescript@5.4.5)):
|
||||||
dependencies:
|
dependencies:
|
||||||
stylelint: 16.5.0(typescript@5.4.5)
|
stylelint: 16.5.0(typescript@5.4.5)
|
||||||
stylelint-config-recommended: 12.0.0(stylelint@16.5.0(typescript@5.4.5))
|
stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5))
|
||||||
|
|
||||||
stylelint-order@6.0.3(stylelint@16.5.0(typescript@5.4.5)):
|
stylelint-order@6.0.4(stylelint@16.5.0(typescript@5.4.5)):
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
postcss-sorting: 8.0.2(postcss@8.4.38)
|
postcss-sorting: 8.0.2(postcss@8.4.38)
|
||||||
stylelint: 16.5.0(typescript@5.4.5)
|
stylelint: 16.5.0(typescript@5.4.5)
|
||||||
|
|
||||||
stylelint-scss@5.0.1(stylelint@16.5.0(typescript@5.4.5)):
|
stylelint-scss@6.3.0(stylelint@16.5.0(typescript@5.4.5)):
|
||||||
dependencies:
|
dependencies:
|
||||||
|
known-css-properties: 0.30.0
|
||||||
postcss-media-query-parser: 0.2.3
|
postcss-media-query-parser: 0.2.3
|
||||||
postcss-resolve-nested-selector: 0.1.1
|
postcss-resolve-nested-selector: 0.1.1
|
||||||
postcss-selector-parser: 6.0.16
|
postcss-selector-parser: 6.0.16
|
||||||
|
|||||||
@@ -1,18 +1,29 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="none" ref={ref} {...props}>
|
<svg
|
||||||
<circle cx={16} cy={16} r={15.5} fill="gray" stroke="#fff" />
|
fill={'none'}
|
||||||
|
height={32}
|
||||||
|
ref={ref}
|
||||||
|
width={32}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<circle cx={16} cy={16} fill={'gray'} r={15.5} stroke={'#fff'} />
|
||||||
<path
|
<path
|
||||||
fill="#fff"
|
clipRule={'evenodd'}
|
||||||
fillRule="evenodd"
|
d={
|
||||||
d="M16 18.84a2.49 2.49 0 1 0 0-4.97 2.49 2.49 0 0 0 0 4.97Zm0-.62a1.87 1.87 0 1 0 0-3.73 1.87 1.87 0 0 0 0 3.73Z"
|
'M16 18.84a2.49 2.49 0 1 0 0-4.97 2.49 2.49 0 0 0 0 4.97Zm0-.62a1.87 1.87 0 1 0 0-3.73 1.87 1.87 0 0 0 0 3.73Z'
|
||||||
clipRule="evenodd"
|
}
|
||||||
|
fill={'#fff'}
|
||||||
|
fillRule={'evenodd'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#fff"
|
clipRule={'evenodd'}
|
||||||
fillRule="evenodd"
|
d={
|
||||||
d="M19 11.38a3.86 3.86 0 0 0-3.02-1.25c-1.59 0-2.28.56-3.02 1.25H10.4c-1.03 0-1.87.83-1.87 1.86v6.23c0 1.03.84 1.86 1.87 1.86h11.2c1.03 0 1.87-.83 1.87-1.86v-6.23c0-1.03-.84-1.86-1.87-1.86H19Zm-.25.62-.06-.06-.18-.17a5.4 5.4 0 0 0-.67-.53 3.15 3.15 0 0 0-1.86-.48c-.92 0-1.44.2-1.87.48a5.4 5.4 0 0 0-.66.53l-.18.17-.07.06h-2.8c-.69 0-1.24.56-1.24 1.24v6.23c0 .68.55 1.24 1.24 1.24h11.2c.69 0 1.24-.56 1.24-1.24v-6.23c0-.68-.55-1.24-1.24-1.24h-2.85Z"
|
'M19 11.38a3.86 3.86 0 0 0-3.02-1.25c-1.59 0-2.28.56-3.02 1.25H10.4c-1.03 0-1.87.83-1.87 1.86v6.23c0 1.03.84 1.86 1.87 1.86h11.2c1.03 0 1.87-.83 1.87-1.86v-6.23c0-1.03-.84-1.86-1.87-1.86H19Zm-.25.62-.06-.06-.18-.17a5.4 5.4 0 0 0-.67-.53 3.15 3.15 0 0 0-1.86-.48c-.92 0-1.44.2-1.87.48a5.4 5.4 0 0 0-.66.53l-.18.17-.07.06h-2.8c-.69 0-1.24.56-1.24 1.24v6.23c0 .68.55 1.24 1.24 1.24h11.2c.69 0 1.24-.56 1.24-1.24v-6.23c0-.68-.55-1.24-1.24-1.24h-2.85Z'
|
||||||
clipRule="evenodd"
|
}
|
||||||
|
fill={'#fff'}
|
||||||
|
fillRule={'evenodd'}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,17 +1,19 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
width={18}
|
fill={'none'}
|
||||||
height={18}
|
height={18}
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 18 18'}
|
||||||
|
width={18}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M16 0H2a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V2a2 2 0 00-2-2zM7 14L2 9l1.41-1.41L7 11.17l7.59-7.59L16 5l-9 9z"
|
d={
|
||||||
fill="currentColor"
|
'M16 0H2a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V2a2 2 0 00-2-2zM7 14L2 9l1.41-1.41L7 11.17l7.59-7.59L16 5l-9 9z'
|
||||||
|
}
|
||||||
|
fill={'currentColor'}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,23 +1,25 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const ChevronUp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const ChevronUp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
width={12}
|
fill={'none'}
|
||||||
height={12}
|
height={12}
|
||||||
viewBox="0 0 12 12"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 12 12'}
|
||||||
|
width={12}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<g clipPath="url(#clip0_9209_3250)">
|
<g clipPath={'url(#clip0_9209_3250)'}>
|
||||||
<path
|
<path
|
||||||
d="M9.77084 7.25705C9.77107 7.37388 9.73039 7.4871 9.65584 7.57705C9.61387 7.62768 9.56232 7.66953 9.50415 7.70021C9.44597 7.73089 9.38232 7.74978 9.31683 7.75582C9.25134 7.76186 9.18531 7.75492 9.1225 7.7354C9.0597 7.71588 9.00137 7.68416 8.95084 7.64205L6.27084 5.40205L3.58584 7.56205C3.5347 7.60359 3.47585 7.6346 3.41268 7.65332C3.34951 7.67203 3.28327 7.67808 3.21775 7.67111C3.15224 7.66414 3.08875 7.64429 3.03093 7.61271C2.97311 7.58112 2.92211 7.53842 2.88084 7.48705C2.83533 7.43532 2.80099 7.37474 2.78 7.30911C2.759 7.24348 2.7518 7.17421 2.75884 7.10567C2.76589 7.03712 2.78702 6.97077 2.82092 6.91078C2.85482 6.85079 2.90076 6.79845 2.95584 6.75705L5.95584 4.34205C6.04531 4.26851 6.15753 4.22831 6.27334 4.22831C6.38916 4.22831 6.50138 4.26851 6.59084 4.34205L9.59084 6.84205C9.65135 6.89221 9.69918 6.95593 9.73046 7.02803C9.76173 7.10014 9.77557 7.1786 9.77084 7.25705Z"
|
d={
|
||||||
fill="white"
|
'M9.77084 7.25705C9.77107 7.37388 9.73039 7.4871 9.65584 7.57705C9.61387 7.62768 9.56232 7.66953 9.50415 7.70021C9.44597 7.73089 9.38232 7.74978 9.31683 7.75582C9.25134 7.76186 9.18531 7.75492 9.1225 7.7354C9.0597 7.71588 9.00137 7.68416 8.95084 7.64205L6.27084 5.40205L3.58584 7.56205C3.5347 7.60359 3.47585 7.6346 3.41268 7.65332C3.34951 7.67203 3.28327 7.67808 3.21775 7.67111C3.15224 7.66414 3.08875 7.64429 3.03093 7.61271C2.97311 7.58112 2.92211 7.53842 2.88084 7.48705C2.83533 7.43532 2.80099 7.37474 2.78 7.30911C2.759 7.24348 2.7518 7.17421 2.75884 7.10567C2.76589 7.03712 2.78702 6.97077 2.82092 6.91078C2.85482 6.85079 2.90076 6.79845 2.95584 6.75705L5.95584 4.34205C6.04531 4.26851 6.15753 4.22831 6.27334 4.22831C6.38916 4.22831 6.50138 4.26851 6.59084 4.34205L9.59084 6.84205C9.65135 6.89221 9.69918 6.95593 9.73046 7.02803C9.76173 7.10014 9.77557 7.1786 9.77084 7.25705Z'
|
||||||
|
}
|
||||||
|
fill={'white'}
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip0_9209_3250">
|
<clipPath id={'clip0_9209_3250'}>
|
||||||
<rect width={12} height={12} fill="white" />
|
<rect fill={'white'} height={12} width={12} />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,25 +1,33 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
|
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
width="24"
|
fill={'none'}
|
||||||
height="24"
|
height={'24'}
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 24 24'}
|
||||||
|
width={'24'}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
<svg
|
||||||
<g clipPath="url(#clip0_9883_2381)">
|
fill={'none'}
|
||||||
|
height={'24'}
|
||||||
|
viewBox={'0 0 24 24'}
|
||||||
|
width={'24'}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
|
>
|
||||||
|
<g clipPath={'url(#clip0_9883_2381)'}>
|
||||||
<path
|
<path
|
||||||
d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
|
d={
|
||||||
fill="white"
|
'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z'
|
||||||
|
}
|
||||||
|
fill={'white'}
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip0_9883_2381">
|
<clipPath id={'clip0_9883_2381'}>
|
||||||
<rect width="24" height="24" fill="white" />
|
<rect fill={'white'} height={'24'} width={'24'} />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,27 +1,31 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
width="16"
|
fill={'none'}
|
||||||
height="16"
|
height={'16'}
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 16 16'}
|
||||||
|
width={'16'}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<g clipPath="url(#clip0_5918_2436)">
|
<g clipPath={'url(#clip0_5918_2436)'}>
|
||||||
<path
|
<path
|
||||||
d="M12.6666 13.3334H3.33329C3.15648 13.3334 2.98691 13.4036 2.86189 13.5286C2.73686 13.6537 2.66663 13.8232 2.66663 14C2.66663 14.1769 2.73686 14.3464 2.86189 14.4714C2.98691 14.5965 3.15648 14.6667 3.33329 14.6667H12.6666C12.8434 14.6667 13.013 14.5965 13.138 14.4714C13.2631 14.3464 13.3333 14.1769 13.3333 14C13.3333 13.8232 13.2631 13.6537 13.138 13.5286C13.013 13.4036 12.8434 13.3334 12.6666 13.3334Z"
|
d={
|
||||||
fill="white"
|
'M12.6666 13.3334H3.33329C3.15648 13.3334 2.98691 13.4036 2.86189 13.5286C2.73686 13.6537 2.66663 13.8232 2.66663 14C2.66663 14.1769 2.73686 14.3464 2.86189 14.4714C2.98691 14.5965 3.15648 14.6667 3.33329 14.6667H12.6666C12.8434 14.6667 13.013 14.5965 13.138 14.4714C13.2631 14.3464 13.3333 14.1769 13.3333 14C13.3333 13.8232 13.2631 13.6537 13.138 13.5286C13.013 13.4036 12.8434 13.3334 12.6666 13.3334Z'
|
||||||
|
}
|
||||||
|
fill={'white'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M3.33329 12H3.39329L6.17329 11.7467C6.47782 11.7163 6.76264 11.5821 6.97995 11.3667L12.98 5.36665C13.2128 5.12063 13.3387 4.79233 13.3299 4.45368C13.3212 4.11503 13.1786 3.79366 12.9333 3.55999L11.1066 1.73332C10.8682 1.50938 10.5558 1.38089 10.2288 1.37229C9.90187 1.36368 9.58314 1.47557 9.33329 1.68665L3.33329 7.68665C3.1178 7.90396 2.98362 8.18879 2.95329 8.49332L2.66662 11.2733C2.65764 11.371 2.67031 11.4694 2.70373 11.5616C2.73715 11.6538 2.79049 11.7374 2.85995 11.8067C2.92225 11.8684 2.99612 11.9173 3.07735 11.9505C3.15857 11.9837 3.24555 12.0005 3.33329 12ZM10.18 2.66665L12 4.48665L10.6666 5.78665L8.87995 3.99999L10.18 2.66665ZM4.24662 8.60665L7.99995 4.87999L9.79995 6.67999L6.06662 10.4133L4.06662 10.6L4.24662 8.60665Z"
|
d={
|
||||||
fill="white"
|
'M3.33329 12H3.39329L6.17329 11.7467C6.47782 11.7163 6.76264 11.5821 6.97995 11.3667L12.98 5.36665C13.2128 5.12063 13.3387 4.79233 13.3299 4.45368C13.3212 4.11503 13.1786 3.79366 12.9333 3.55999L11.1066 1.73332C10.8682 1.50938 10.5558 1.38089 10.2288 1.37229C9.90187 1.36368 9.58314 1.47557 9.33329 1.68665L3.33329 7.68665C3.1178 7.90396 2.98362 8.18879 2.95329 8.49332L2.66662 11.2733C2.65764 11.371 2.67031 11.4694 2.70373 11.5616C2.73715 11.6538 2.79049 11.7374 2.85995 11.8067C2.92225 11.8684 2.99612 11.9173 3.07735 11.9505C3.15857 11.9837 3.24555 12.0005 3.33329 12ZM10.18 2.66665L12 4.48665L10.6666 5.78665L8.87995 3.99999L10.18 2.66665ZM4.24662 8.60665L7.99995 4.87999L9.79995 6.67999L6.06662 10.4133L4.06662 10.6L4.24662 8.60665Z'
|
||||||
|
}
|
||||||
|
fill={'white'}
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip0_5918_2436">
|
<clipPath id={'clip0_5918_2436'}>
|
||||||
<rect width="16" height="16" fill="white" />
|
<rect fill={'white'} height={'16'} width={'16'} />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,71 +1,98 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
fill={'none'}
|
||||||
width={96}
|
|
||||||
height={96}
|
height={96}
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 96 96"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 96 96'}
|
||||||
|
width={96}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#8C61FF"
|
d={
|
||||||
|
'M95.5 48c0 26.234-21.266 47.5-47.5 47.5C21.767 95.5.5 74.234.5 48 .5 21.767 21.767.5 48 .5 74.234.5 95.5 21.767 95.5 48z'
|
||||||
|
}
|
||||||
|
fill={'#8C61FF'}
|
||||||
fillOpacity={0.05}
|
fillOpacity={0.05}
|
||||||
stroke="#BEA6FF"
|
stroke={'#BEA6FF'}
|
||||||
d="M95.5 48c0 26.234-21.266 47.5-47.5 47.5C21.767 95.5.5 74.234.5 48 .5 21.767 21.767.5 48 .5 74.234.5 95.5 21.767 95.5 48z"
|
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={
|
||||||
d="M77.889 54.454a.651.651 0 0 1-.643-.643v-9.24a.643.643 0 0 1 1.285 0v9.25a.643.643 0 0 1-.641.633zM77.889 41.777a.643.643 0 0 1-.643-.643V39.24a.643.643 0 0 1 1.285 0v1.903a.634.634 0 0 1-.641.634zM25.786 32.503h-3.559a.668.668 0 0 1 0-1.335h3.56a.667.667 0 0 1 0 1.335z"
|
'M77.889 54.454a.651.651 0 0 1-.643-.643v-9.24a.643.643 0 0 1 1.285 0v9.25a.643.643 0 0 1-.641.633zM77.889 41.777a.643.643 0 0 1-.643-.643V39.24a.643.643 0 0 1 1.285 0v1.903a.634.634 0 0 1-.641.634zM25.786 32.503h-3.559a.668.668 0 0 1 0-1.335h3.56a.667.667 0 0 1 0 1.335z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={
|
||||||
d="M24.007 34.282a.668.668 0 0 1-.667-.667v-3.559a.668.668 0 0 1 1.335 0v3.56c0 .367-.3.666-.668.666zM36.857 73.714a.857.857 0 1 1 0 1.715.857.857 0 0 1 0-1.715zM31.714 73.714a.857.857 0 1 1 0 1.715.857.857 0 0 1 0-1.715zM26.571 73.714a.857.857 0 1 1 0 1.715.857.857 0 0 1 0-1.715z"
|
'M24.007 34.282a.668.668 0 0 1-.667-.667v-3.559a.668.668 0 0 1 1.335 0v3.56c0 .367-.3.666-.668.666zM36.857 73.714a.857.857 0 1 1 0 1.715.857.857 0 0 1 0-1.715zM31.714 73.714a.857.857 0 1 1 0 1.715.857.857 0 0 1 0-1.715zM26.571 73.714a.857.857 0 1 1 0 1.715.857.857 0 0 1 0-1.715z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
/>
|
/>
|
||||||
<path fill="#333" d="M47.864 23.242l-24.1 19.799 24.1 19.808 24.1-19.808-24.1-19.8z" />
|
<path d={'M47.864 23.242l-24.1 19.799 24.1 19.808 24.1-19.808-24.1-19.8z'} fill={'#333'} />
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={
|
||||||
d="M47.865 63.544a.667.667 0 0 1-.417-.195l-24.1-19.808a.698.698 0 0 1-.183-.833.725.725 0 0 1 .183-.242l24.1-19.799a.695.695 0 0 1 .926 0l24.1 19.799a.725.725 0 0 1 .25.537.695.695 0 0 1-.25.538l-24.1 19.808a.668.668 0 0 1-.51.195zM24.859 43.04l23.006 18.91L70.87 43.04l-23.006-18.9-23.006 18.9z"
|
'M47.865 63.544a.667.667 0 0 1-.417-.195l-24.1-19.808a.698.698 0 0 1-.183-.833.725.725 0 0 1 .183-.242l24.1-19.799a.695.695 0 0 1 .926 0l24.1 19.799a.725.725 0 0 1 .25.537.695.695 0 0 1-.25.538l-24.1 19.808a.668.668 0 0 1-.51.195zM24.859 43.04l23.006 18.91L70.87 43.04l-23.006-18.9-23.006 18.9z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
/>
|
/>
|
||||||
<path fill="#333" d="M65.013 28.803H30.717v40.784h34.296V28.803z" />
|
<path d={'M65.013 28.803H30.717v40.784h34.296V28.803z'} fill={'#333'} />
|
||||||
<path fill="#333" d="M55.41 40.853l-11.716 9.63v19.104h21.319V40.853H55.41z" />
|
<path d={'M55.41 40.853l-11.716 9.63v19.104h21.319V40.853H55.41z'} fill={'#333'} />
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={
|
||||||
d="M65.059 70.282H30.763a.704.704 0 0 1-.695-.695V28.803a.695.695 0 0 1 .695-.677H65.06a.695.695 0 0 1 .695.696v40.784a.705.705 0 0 1-.695.676zM31.412 68.91h32.905V29.517H31.412V68.91z"
|
'M65.059 70.282H30.763a.704.704 0 0 1-.695-.695V28.803a.695.695 0 0 1 .695-.677H65.06a.695.695 0 0 1 .695.696v40.784a.705.705 0 0 1-.695.676zM31.412 68.91h32.905V29.517H31.412V68.91z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={
|
||||||
d="M58.987 35.06H48.17a.695.695 0 0 1 0-1.39h10.817a.696.696 0 0 1 0 1.39zM44.463 35.06h-7.721a.696.696 0 0 1 0-1.39h7.72a.696.696 0 0 1 0 1.39zM58.987 39.694h-7.11a.695.695 0 0 1 0-1.39h7.11a.695.695 0 1 1 0 1.39zM48.17 39.694H36.742a.695.695 0 0 1 0-1.39H48.17a.695.695 0 1 1 0 1.39zM58.988 44.329H46.317a.696.696 0 0 1 0-1.39h12.67a.696.696 0 0 1 0 1.39zM42.609 44.329h-5.867a.696.696 0 0 1 0-1.39h5.867a.696.696 0 0 1 0 1.39zM58.987 48.964h-6.182a.695.695 0 0 1 0-1.39h6.182a.695.695 0 1 1 0 1.39zM49.097 48.964H36.742a.695.695 0 0 1 0-1.39h12.355a.695.695 0 1 1 0 1.39zM54.047 53.598H41.682a.695.695 0 1 1 0-1.39h12.365a.695.695 0 1 1 0 1.39z"
|
'M58.987 35.06H48.17a.695.695 0 0 1 0-1.39h10.817a.696.696 0 0 1 0 1.39zM44.463 35.06h-7.721a.696.696 0 0 1 0-1.39h7.72a.696.696 0 0 1 0 1.39zM58.987 39.694h-7.11a.695.695 0 0 1 0-1.39h7.11a.695.695 0 1 1 0 1.39zM48.17 39.694H36.742a.695.695 0 0 1 0-1.39H48.17a.695.695 0 1 1 0 1.39zM58.988 44.329H46.317a.696.696 0 0 1 0-1.39h12.67a.696.696 0 0 1 0 1.39zM42.609 44.329h-5.867a.696.696 0 0 1 0-1.39h5.867a.696.696 0 0 1 0 1.39zM58.987 48.964h-6.182a.695.695 0 0 1 0-1.39h6.182a.695.695 0 1 1 0 1.39zM49.097 48.964H36.742a.695.695 0 0 1 0-1.39h12.355a.695.695 0 1 1 0 1.39zM54.047 53.598H41.682a.695.695 0 1 1 0-1.39h12.365a.695.695 0 1 1 0 1.39z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#333"
|
d={
|
||||||
d="M23.765 43.04v26.547l16.147-13.273L23.765 43.04zM55.818 56.314l16.146 13.273V43.04L55.818 56.315z"
|
'M23.765 43.04v26.547l16.147-13.273L23.765 43.04zM55.818 56.314l16.146 13.273V43.04L55.818 56.315z'
|
||||||
|
}
|
||||||
|
fill={'#333'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#333"
|
d={'M47.864 62.849l-7.952-6.535-16.147 13.273h48.2L55.816 56.314l-7.953 6.535z'}
|
||||||
d="M47.864 62.849l-7.952-6.535-16.147 13.273h48.2L55.816 56.314l-7.953 6.535z"
|
fill={'#333'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#333"
|
d={
|
||||||
d="M28.4 50.493v15.284l9.297-7.637-9.297-7.647zM63.196 57.88l8.768 7.212V50.678l-8.768 7.202z"
|
'M28.4 50.493v15.284l9.297-7.637-9.297-7.647zM63.196 57.88l8.768 7.212V50.678l-8.768 7.202z'
|
||||||
|
}
|
||||||
|
fill={'#333'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={
|
||||||
d="M23.765 70.282a.67.67 0 0 1-.296-.074.686.686 0 0 1-.399-.62V43.04a.685.685 0 0 1 .399-.62.695.695 0 0 1 .741.083l16.147 13.273a.704.704 0 0 1 0 1.075L24.21 70.115a.686.686 0 0 1-.445.167zm.695-25.768v23.6l14.358-11.8-14.358-11.8z"
|
'M23.765 70.282a.67.67 0 0 1-.296-.074.686.686 0 0 1-.399-.62V43.04a.685.685 0 0 1 .399-.62.695.695 0 0 1 .741.083l16.147 13.273a.704.704 0 0 1 0 1.075L24.21 70.115a.686.686 0 0 1-.445.167zm.695-25.768v23.6l14.358-11.8-14.358-11.8z'
|
||||||
/>
|
}
|
||||||
<path fill="#333" d="M60.424 60.095l-10.15 8.343-7.08-5.821-8.473 6.97h37.243l-11.54-9.492z" />
|
fill={'#BEA6FF'}
|
||||||
<path
|
|
||||||
fill="#BEA6FF"
|
|
||||||
d="M71.964 70.282a.686.686 0 0 1-.445-.167L55.373 56.861a.703.703 0 0 1 0-1.076l16.174-13.282a.696.696 0 0 1 .742-.084.687.687 0 0 1 .398.621v26.547a.686.686 0 0 1-.398.621.668.668 0 0 1-.325.074zM56.911 56.314l14.358 11.8v-23.6l-14.358 11.8z"
|
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={'M60.424 60.095l-10.15 8.343-7.08-5.821-8.473 6.97h37.243l-11.54-9.492z'}
|
||||||
d="M71.964 70.282h-48.2a.704.704 0 0 1-.657-.463.705.705 0 0 1 .213-.77l16.147-13.273a.695.695 0 0 1 .927 0l7.508 6.173 7.508-6.174a.695.695 0 0 1 .927 0L72.483 69.05a.705.705 0 0 1 .213.77.704.704 0 0 1-.732.463zm-46.262-1.371h44.325L55.79 57.212l-7.508 6.173a.695.695 0 0 1-.927 0l-7.508-6.173L25.702 68.91zM46.358 75.36h-3.56a.668.668 0 0 1 0-1.335h3.56a.668.668 0 0 1 0 1.335z"
|
fill={'#333'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#BEA6FF"
|
d={
|
||||||
d="M44.579 77.14a.668.668 0 0 1-.668-.668v-3.559a.668.668 0 0 1 1.335 0v3.56a.667.667 0 0 1-.667.666z"
|
'M71.964 70.282a.686.686 0 0 1-.445-.167L55.373 56.861a.703.703 0 0 1 0-1.076l16.174-13.282a.696.696 0 0 1 .742-.084.687.687 0 0 1 .398.621v26.547a.686.686 0 0 1-.398.621.668.668 0 0 1-.325.074zM56.911 56.314l14.358 11.8v-23.6l-14.358 11.8z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d={
|
||||||
|
'M71.964 70.282h-48.2a.704.704 0 0 1-.657-.463.705.705 0 0 1 .213-.77l16.147-13.273a.695.695 0 0 1 .927 0l7.508 6.173 7.508-6.174a.695.695 0 0 1 .927 0L72.483 69.05a.705.705 0 0 1 .213.77.704.704 0 0 1-.732.463zm-46.262-1.371h44.325L55.79 57.212l-7.508 6.173a.695.695 0 0 1-.927 0l-7.508-6.173L25.702 68.91zM46.358 75.36h-3.56a.668.668 0 0 1 0-1.335h3.56a.668.668 0 0 1 0 1.335z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d={
|
||||||
|
'M44.579 77.14a.668.668 0 0 1-.668-.668v-3.559a.668.668 0 0 1 1.335 0v3.56a.667.667 0 0 1-.667.666z'
|
||||||
|
}
|
||||||
|
fill={'#BEA6FF'}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,19 +1,21 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
fill={'none'}
|
||||||
width={20}
|
|
||||||
height={20}
|
height={20}
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 24 24'}
|
||||||
|
width={20}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#fff"
|
clipRule={'evenodd'}
|
||||||
fillRule="evenodd"
|
d={
|
||||||
d="M12 4.5C7 4.5 2.73 7.6 1 12a11.83 11.83 0 0 0 22 0c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"
|
'M12 4.5C7 4.5 2.73 7.6 1 12a11.83 11.83 0 0 0 22 0c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'
|
||||||
clipRule="evenodd"
|
}
|
||||||
|
fill={'#fff'}
|
||||||
|
fillRule={'evenodd'}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
export { default as Eye } from './eye'
|
|
||||||
export { default as VisibilityOff } from './visibility-off'
|
|
||||||
export { default as Check } from './check'
|
|
||||||
export { default as Email } from './email'
|
|
||||||
export { default as Camera } from './camera'
|
export { default as Camera } from './camera'
|
||||||
export { default as Logout } from './logout'
|
export { default as Check } from './check'
|
||||||
export { default as Edit } from './edit'
|
|
||||||
export { default as Logo } from './logo'
|
|
||||||
export { default as PersonOutline } from './person-outline'
|
|
||||||
export { default as ChevronUp } from './chevron-up'
|
export { default as ChevronUp } from './chevron-up'
|
||||||
export { default as Close } from './close'
|
export { default as Close } from './close'
|
||||||
|
export { default as Edit } from './edit'
|
||||||
|
export { default as Email } from './email'
|
||||||
|
export { default as Eye } from './eye'
|
||||||
|
export { default as Logo } from './logo'
|
||||||
|
export { default as Logout } from './logout'
|
||||||
|
export { default as PersonOutline } from './person-outline'
|
||||||
|
export { default as VisibilityOff } from './visibility-off'
|
||||||
|
|||||||
@@ -1,28 +1,32 @@
|
|||||||
import { SVGProps } from 'react'
|
import { SVGProps } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
fill={'none'}
|
||||||
width={157}
|
|
||||||
height={36}
|
height={36}
|
||||||
fill="none"
|
viewBox={'0 0 157 36'}
|
||||||
viewBox="0 0 157 36"
|
width={157}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#fff"
|
d={
|
||||||
d="M70.99 24.72a7.34 7.34 0 0 1-3.5-.83 6.43 6.43 0 0 1-2.44-2.33c-.6-1-.89-2.13-.89-3.38s.3-2.37.89-3.36c.6-1 1.41-1.77 2.45-2.32a7.25 7.25 0 0 1 3.5-.85c1.1 0 2.08.19 2.96.57.89.39 1.63.94 2.23 1.66l-1.87 1.74a4.02 4.02 0 0 0-3.17-1.48c-.78 0-1.48.17-2.09.52-.6.34-1.09.81-1.44 1.43-.33.61-.5 1.3-.5 2.1 0 .77.17 1.47.5 2.09.35.6.83 1.1 1.44 1.44.61.34 1.31.5 2.1.5a4 4 0 0 0 3.16-1.5l1.87 1.74c-.6.73-1.34 1.3-2.23 1.68a7.4 7.4 0 0 1-2.97.58zM83.66 24.72c-1.8 0-3.2-.5-4.22-1.5-1-1-1.5-2.43-1.5-4.28v-7.08h2.93v6.97c0 2.26.93 3.4 2.8 3.4.92 0 1.61-.28 2.1-.82.47-.55.71-1.41.71-2.58v-6.97h2.89v7.08c0 1.85-.5 3.28-1.52 4.28-1 1-2.4 1.5-4.2 1.5zM101.5 17.93a3.13 3.13 0 0 1 2.3 3.12c0 1.1-.42 1.96-1.29 2.56-.84.6-2.09.9-3.73.9h-6.52V11.86h6.16c1.53 0 2.7.3 3.53.89a2.8 2.8 0 0 1 1.24 2.4 3.04 3.04 0 0 1-1.68 2.78zm-6.35-3.86v2.97h2.9c.72 0 1.26-.12 1.63-.38.38-.25.56-.62.56-1.11 0-.5-.18-.86-.56-1.1a2.92 2.92 0 0 0-1.63-.38h-2.9zm3.4 8.23c.77 0 1.34-.13 1.73-.38.4-.25.6-.65.6-1.18 0-1.04-.78-1.57-2.33-1.57h-3.4v3.13h3.4zM114.32 21.8h-5.85l-1.12 2.7h-2.99l5.62-12.64h2.88l5.64 12.64h-3.07l-1.11-2.7zm-.92-2.23l-2-4.84-2 4.84h4zM121.78 14.25h-4.03v-2.39h10.98v2.39h-4.03V24.5h-2.92V14.25zM136.23 24.72a7.4 7.4 0 0 1-3.55-.85 6.39 6.39 0 0 1-2.47-2.33 6.5 6.5 0 0 1-.88-3.36 6.34 6.34 0 0 1 3.35-5.69 7.4 7.4 0 0 1 3.55-.84c1.3 0 2.48.28 3.53.85a6.35 6.35 0 0 1 3.37 5.68 6.4 6.4 0 0 1-.9 3.36 6.4 6.4 0 0 1-2.47 2.33 7.29 7.29 0 0 1-3.53.85zm0-2.5a3.69 3.69 0 0 0 3.42-1.95c.35-.6.52-1.3.52-2.09 0-.78-.17-1.48-.52-2.1a3.56 3.56 0 0 0-1.4-1.42 3.94 3.94 0 0 0-2.02-.52 3.94 3.94 0 0 0-3.44 1.95c-.34.61-.5 1.3-.5 2.1 0 .77.16 1.47.5 2.09a3.82 3.82 0 0 0 3.44 1.94zM153.35 24.5l-2.43-3.52H148.24v3.52h-2.92V11.86h5.45c1.12 0 2.09.19 2.9.56.83.38 1.47.9 1.91 1.6.44.68.67 1.49.67 2.43a4.3 4.3 0 0 1-.69 2.44 4.25 4.25 0 0 1-1.9 1.55l2.82 4.06h-3.13zm-.06-8.05c0-.71-.22-1.25-.68-1.63-.45-.38-1.11-.57-1.99-.57h-2.36v4.4h2.37c.88 0 1.54-.2 2-.58a2 2 0 0 0 .68-1.62zM0 11.88h2.91v12.6H0v-12.6zM8.5 14.25H4.49v-2.37h10.97v2.37h-4.03v10.22H8.5V14.25zM33.74 11.88h2.92v12.6h-2.92v-12.6zM51.2 11.88v12.6h-2.39l-6.28-7.65v7.64h-2.88v-12.6h2.41l6.27 7.65v-7.64h2.88z"
|
'M70.99 24.72a7.34 7.34 0 0 1-3.5-.83 6.43 6.43 0 0 1-2.44-2.33c-.6-1-.89-2.13-.89-3.38s.3-2.37.89-3.36c.6-1 1.41-1.77 2.45-2.32a7.25 7.25 0 0 1 3.5-.85c1.1 0 2.08.19 2.96.57.89.39 1.63.94 2.23 1.66l-1.87 1.74a4.02 4.02 0 0 0-3.17-1.48c-.78 0-1.48.17-2.09.52-.6.34-1.09.81-1.44 1.43-.33.61-.5 1.3-.5 2.1 0 .77.17 1.47.5 2.09.35.6.83 1.1 1.44 1.44.61.34 1.31.5 2.1.5a4 4 0 0 0 3.16-1.5l1.87 1.74c-.6.73-1.34 1.3-2.23 1.68a7.4 7.4 0 0 1-2.97.58zM83.66 24.72c-1.8 0-3.2-.5-4.22-1.5-1-1-1.5-2.43-1.5-4.28v-7.08h2.93v6.97c0 2.26.93 3.4 2.8 3.4.92 0 1.61-.28 2.1-.82.47-.55.71-1.41.71-2.58v-6.97h2.89v7.08c0 1.85-.5 3.28-1.52 4.28-1 1-2.4 1.5-4.2 1.5zM101.5 17.93a3.13 3.13 0 0 1 2.3 3.12c0 1.1-.42 1.96-1.29 2.56-.84.6-2.09.9-3.73.9h-6.52V11.86h6.16c1.53 0 2.7.3 3.53.89a2.8 2.8 0 0 1 1.24 2.4 3.04 3.04 0 0 1-1.68 2.78zm-6.35-3.86v2.97h2.9c.72 0 1.26-.12 1.63-.38.38-.25.56-.62.56-1.11 0-.5-.18-.86-.56-1.1a2.92 2.92 0 0 0-1.63-.38h-2.9zm3.4 8.23c.77 0 1.34-.13 1.73-.38.4-.25.6-.65.6-1.18 0-1.04-.78-1.57-2.33-1.57h-3.4v3.13h3.4zM114.32 21.8h-5.85l-1.12 2.7h-2.99l5.62-12.64h2.88l5.64 12.64h-3.07l-1.11-2.7zm-.92-2.23l-2-4.84-2 4.84h4zM121.78 14.25h-4.03v-2.39h10.98v2.39h-4.03V24.5h-2.92V14.25zM136.23 24.72a7.4 7.4 0 0 1-3.55-.85 6.39 6.39 0 0 1-2.47-2.33 6.5 6.5 0 0 1-.88-3.36 6.34 6.34 0 0 1 3.35-5.69 7.4 7.4 0 0 1 3.55-.84c1.3 0 2.48.28 3.53.85a6.35 6.35 0 0 1 3.37 5.68 6.4 6.4 0 0 1-.9 3.36 6.4 6.4 0 0 1-2.47 2.33 7.29 7.29 0 0 1-3.53.85zm0-2.5a3.69 3.69 0 0 0 3.42-1.95c.35-.6.52-1.3.52-2.09 0-.78-.17-1.48-.52-2.1a3.56 3.56 0 0 0-1.4-1.42 3.94 3.94 0 0 0-2.02-.52 3.94 3.94 0 0 0-3.44 1.95c-.34.61-.5 1.3-.5 2.1 0 .77.16 1.47.5 2.09a3.82 3.82 0 0 0 3.44 1.94zM153.35 24.5l-2.43-3.52H148.24v3.52h-2.92V11.86h5.45c1.12 0 2.09.19 2.9.56.83.38 1.47.9 1.91 1.6.44.68.67 1.49.67 2.43a4.3 4.3 0 0 1-.69 2.44 4.25 4.25 0 0 1-1.9 1.55l2.82 4.06h-3.13zm-.06-8.05c0-.71-.22-1.25-.68-1.63-.45-.38-1.11-.57-1.99-.57h-2.36v4.4h2.37c.88 0 1.54-.2 2-.58a2 2 0 0 0 .68-1.62zM0 11.88h2.91v12.6H0v-12.6zM8.5 14.25H4.49v-2.37h10.97v2.37h-4.03v10.22H8.5V14.25zM33.74 11.88h2.92v12.6h-2.92v-12.6zM51.2 11.88v12.6h-2.39l-6.28-7.65v7.64h-2.88v-12.6h2.41l6.27 7.65v-7.64h2.88z'
|
||||||
|
}
|
||||||
|
fill={'#fff'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#FF0808"
|
clipRule={'evenodd'}
|
||||||
fillRule="evenodd"
|
d={'M34.99 6.53a1.96 1.96 0 1 1 0 3.93 1.96 1.96 0 0 1 0-3.93z'}
|
||||||
d="M34.99 6.53a1.96 1.96 0 1 1 0 3.93 1.96 1.96 0 0 1 0-3.93z"
|
fill={'#FF0808'}
|
||||||
clipRule="evenodd"
|
fillRule={'evenodd'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#fff"
|
clipRule={'evenodd'}
|
||||||
fillRule="evenodd"
|
d={
|
||||||
d="M19.5 16.04A2 2 0 0 1 21.5 18a2 2 0 0 1-2 1.96A2 2 0 0 1 17.46 18a2 2 0 0 1 2.02-1.96zM42.48 34.5a16.5 16.5 0 1 0 0-33 16.5 16.5 0 0 0 0 33zm0 1.5a18 18 0 1 0 0-36 18 18 0 0 0 0 36z"
|
'M19.5 16.04A2 2 0 0 1 21.5 18a2 2 0 0 1-2 1.96A2 2 0 0 1 17.46 18a2 2 0 0 1 2.02-1.96zM42.48 34.5a16.5 16.5 0 1 0 0-33 16.5 16.5 0 0 0 0 33zm0 1.5a18 18 0 1 0 0-36 18 18 0 0 0 0 36z'
|
||||||
clipRule="evenodd"
|
}
|
||||||
|
fill={'#fff'}
|
||||||
|
fillRule={'evenodd'}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,27 +1,31 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
width="16"
|
fill={'none'}
|
||||||
height="16"
|
height={'16'}
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 16 16'}
|
||||||
|
width={'16'}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<g clipPath="url(#clip0_6627_107)">
|
<g clipPath={'url(#clip0_6627_107)'}>
|
||||||
<path
|
<path
|
||||||
d="M4.66663 3.99996C4.84344 3.99996 5.01301 3.92972 5.13803 3.8047C5.26305 3.67967 5.33329 3.5101 5.33329 3.33329C5.33329 3.15648 5.26305 2.98691 5.13803 2.86189C5.01301 2.73686 4.84344 2.66663 4.66663 2.66663H3.33329C3.15648 2.66663 2.98691 2.73686 2.86189 2.86189C2.73686 2.98691 2.66663 3.15648 2.66663 3.33329V12.6666C2.66663 12.8434 2.73686 13.013 2.86189 13.138C2.98691 13.2631 3.15648 13.3333 3.33329 13.3333H4.66663C4.84344 13.3333 5.01301 13.2631 5.13803 13.138C5.26305 13.013 5.33329 12.8434 5.33329 12.6666C5.33329 12.4898 5.26305 12.3202 5.13803 12.1952C5.01301 12.0702 4.84344 12 4.66663 12H3.99996V3.99996H4.66663Z"
|
d={
|
||||||
fill="white"
|
'M4.66663 3.99996C4.84344 3.99996 5.01301 3.92972 5.13803 3.8047C5.26305 3.67967 5.33329 3.5101 5.33329 3.33329C5.33329 3.15648 5.26305 2.98691 5.13803 2.86189C5.01301 2.73686 4.84344 2.66663 4.66663 2.66663H3.33329C3.15648 2.66663 2.98691 2.73686 2.86189 2.86189C2.73686 2.98691 2.66663 3.15648 2.66663 3.33329V12.6666C2.66663 12.8434 2.73686 13.013 2.86189 13.138C2.98691 13.2631 3.15648 13.3333 3.33329 13.3333H4.66663C4.84344 13.3333 5.01301 13.2631 5.13803 13.138C5.26305 13.013 5.33329 12.8434 5.33329 12.6666C5.33329 12.4898 5.26305 12.3202 5.13803 12.1952C5.01301 12.0702 4.84344 12 4.66663 12H3.99996V3.99996H4.66663Z'
|
||||||
|
}
|
||||||
|
fill={'white'}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M13.88 7.61338L12 4.94672C11.898 4.80299 11.7433 4.70548 11.5697 4.67549C11.396 4.64551 11.2176 4.6855 11.0733 4.78672C11.0012 4.83724 10.9399 4.90154 10.8927 4.97592C10.8456 5.05029 10.8137 5.13326 10.7988 5.22004C10.784 5.30681 10.7864 5.39568 10.8061 5.4815C10.8257 5.56732 10.8622 5.64839 10.9133 5.72005L12.06 7.33338H6.66667C6.48986 7.33338 6.32029 7.40362 6.19526 7.52864C6.07024 7.65367 6 7.82324 6 8.00005C6 8.17686 6.07024 8.34643 6.19526 8.47145C6.32029 8.59648 6.48986 8.66672 6.66667 8.66672H12L10.8 10.2667C10.7475 10.3368 10.7093 10.4165 10.6875 10.5013C10.6658 10.5861 10.661 10.6743 10.6734 10.761C10.6857 10.8477 10.7151 10.931 10.7597 11.0064C10.8043 11.0817 10.8633 11.1475 10.9333 11.2C11.0487 11.2866 11.1891 11.3334 11.3333 11.3334C11.4368 11.3334 11.5389 11.3093 11.6315 11.263C11.724 11.2167 11.8046 11.1495 11.8667 11.0667L13.8667 8.40005C13.952 8.28729 13.9994 8.15031 14.0018 8.00889C14.0041 7.86748 13.9615 7.72897 13.88 7.61338Z"
|
d={
|
||||||
fill="white"
|
'M13.88 7.61338L12 4.94672C11.898 4.80299 11.7433 4.70548 11.5697 4.67549C11.396 4.64551 11.2176 4.6855 11.0733 4.78672C11.0012 4.83724 10.9399 4.90154 10.8927 4.97592C10.8456 5.05029 10.8137 5.13326 10.7988 5.22004C10.784 5.30681 10.7864 5.39568 10.8061 5.4815C10.8257 5.56732 10.8622 5.64839 10.9133 5.72005L12.06 7.33338H6.66667C6.48986 7.33338 6.32029 7.40362 6.19526 7.52864C6.07024 7.65367 6 7.82324 6 8.00005C6 8.17686 6.07024 8.34643 6.19526 8.47145C6.32029 8.59648 6.48986 8.66672 6.66667 8.66672H12L10.8 10.2667C10.7475 10.3368 10.7093 10.4165 10.6875 10.5013C10.6658 10.5861 10.661 10.6743 10.6734 10.761C10.6857 10.8477 10.7151 10.931 10.7597 11.0064C10.8043 11.0817 10.8633 11.1475 10.9333 11.2C11.0487 11.2866 11.1891 11.3334 11.3333 11.3334C11.4368 11.3334 11.5389 11.3093 11.6315 11.263C11.724 11.2167 11.8046 11.1495 11.8667 11.0667L13.8667 8.40005C13.952 8.28729 13.9994 8.15031 14.0018 8.00889C14.0041 7.86748 13.9615 7.72897 13.88 7.61338Z'
|
||||||
|
}
|
||||||
|
fill={'white'}
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip0_6627_107">
|
<clipPath id={'clip0_6627_107'}>
|
||||||
<rect width="16" height="16" fill="white" />
|
<rect fill={'white'} height={'16'} width={'16'} />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,19 +1,23 @@
|
|||||||
import { SVGProps } from 'react'
|
import { SVGProps } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
fill={'none'}
|
||||||
width={16}
|
|
||||||
height={16}
|
height={16}
|
||||||
fill="none"
|
viewBox={'0 0 16 16'}
|
||||||
viewBox="0 0 16 16"
|
width={16}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<g fill="#fff" clipPath="url(#clip0_6693_1154)">
|
<g clipPath={'url(#clip0_6693_1154)'} fill={'#fff'}>
|
||||||
<path d="M8 7.334a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.334zm0-4a1.333 1.333 0 1 1 0 2.667 1.333 1.333 0 0 1 0-2.666zM8 8.668a4.667 4.667 0 0 0-4.667 4.666.667.667 0 1 0 1.334 0 3.333 3.333 0 0 1 6.666 0 .667.667 0 1 0 1.334 0A4.667 4.667 0 0 0 8 8.668z" />
|
<path
|
||||||
|
d={
|
||||||
|
'M8 7.334a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.334zm0-4a1.333 1.333 0 1 1 0 2.667 1.333 1.333 0 0 1 0-2.666zM8 8.668a4.667 4.667 0 0 0-4.667 4.666.667.667 0 1 0 1.334 0 3.333 3.333 0 0 1 6.666 0 .667.667 0 1 0 1.334 0A4.667 4.667 0 0 0 8 8.668z'
|
||||||
|
}
|
||||||
|
/>
|
||||||
</g>
|
</g>
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip0_6693_1154">
|
<clipPath id={'clip0_6693_1154'}>
|
||||||
<path fill="#fff" d="M0 0h16v16H0z" />
|
<path d={'M0 0h16v16H0z'} fill={'#fff'} />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,17 +1,19 @@
|
|||||||
import { SVGProps, Ref, forwardRef, memo } from 'react'
|
import { Ref, SVGProps, forwardRef, memo } from 'react'
|
||||||
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
fill={'none'}
|
||||||
width={20}
|
|
||||||
height={20}
|
height={20}
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
viewBox={'0 0 24 24'}
|
||||||
|
width={20}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#fff"
|
d={
|
||||||
d="M12 5.975a9.77 9.77 0 0 1 8.82 5.5 9.647 9.647 0 0 1-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53-1.73-4.39-6-7.5-11-7.5-1.27 0-2.49.2-3.64.57l1.65 1.65c.65-.13 1.31-.22 1.99-.22zm-1.07 1.14L13 9.185c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07.01-2.48-2.01-4.49-4.49-4.49-.37 0-.72.05-1.07.14zm-8.92-3.27l2.68 2.68A11.738 11.738 0 0 0 1 11.475c1.73 4.39 6 7.5 11 7.5 1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.425l-1.41 1.42zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 0 1-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75a4.6 4.6 0 0 0-.36 1.78 4.507 4.507 0 0 0 6.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 0 1-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z"
|
'M12 5.975a9.77 9.77 0 0 1 8.82 5.5 9.647 9.647 0 0 1-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53-1.73-4.39-6-7.5-11-7.5-1.27 0-2.49.2-3.64.57l1.65 1.65c.65-.13 1.31-.22 1.99-.22zm-1.07 1.14L13 9.185c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07.01-2.48-2.01-4.49-4.49-4.49-.37 0-.72.05-1.07.14zm-8.92-3.27l2.68 2.68A11.738 11.738 0 0 0 1 11.475c1.73 4.39 6 7.5 11 7.5 1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.425l-1.41 1.42zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 0 1-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75a4.6 4.6 0 0 0-.36 1.78 4.507 4.507 0 0 0 6.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 0 1-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z'
|
||||||
|
}
|
||||||
|
fill={'#fff'}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -3,15 +3,15 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|||||||
import { Button } from './'
|
import { Button } from './'
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: 'Components/Button',
|
|
||||||
component: Button,
|
|
||||||
tags: ['autodocs'],
|
|
||||||
argTypes: {
|
argTypes: {
|
||||||
variant: {
|
variant: {
|
||||||
options: ['primary', 'secondary', 'tertiary', 'link'],
|
|
||||||
control: { type: 'radio' },
|
control: { type: 'radio' },
|
||||||
|
options: ['primary', 'secondary', 'tertiary', 'link'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
component: Button,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
title: 'Components/Button',
|
||||||
} satisfies Meta<typeof Button>
|
} satisfies Meta<typeof Button>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
@@ -19,47 +19,47 @@ type Story = StoryObj<typeof meta>
|
|||||||
|
|
||||||
export const Primary: Story = {
|
export const Primary: Story = {
|
||||||
args: {
|
args: {
|
||||||
variant: 'primary',
|
|
||||||
children: 'Primary Button',
|
children: 'Primary Button',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
variant: 'primary',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Secondary: Story = {
|
export const Secondary: Story = {
|
||||||
args: {
|
args: {
|
||||||
variant: 'secondary',
|
|
||||||
children: 'Secondary Button',
|
children: 'Secondary Button',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
variant: 'secondary',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
export const Tertiary: Story = {
|
export const Tertiary: Story = {
|
||||||
args: {
|
args: {
|
||||||
variant: 'tertiary',
|
|
||||||
children: 'Tertiary Button',
|
children: 'Tertiary Button',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
variant: 'tertiary',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
export const Link: Story = {
|
export const Link: Story = {
|
||||||
args: {
|
args: {
|
||||||
variant: 'link',
|
|
||||||
children: 'Tertiary Button',
|
children: 'Tertiary Button',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
variant: 'link',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export const FullWidth: Story = {
|
export const FullWidth: Story = {
|
||||||
args: {
|
args: {
|
||||||
variant: 'primary',
|
|
||||||
children: 'Full Width Button',
|
children: 'Full Width Button',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
fullWidth: true,
|
fullWidth: true,
|
||||||
|
variant: 'primary',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export const AsLink: Story = {
|
export const AsLink: Story = {
|
||||||
args: {
|
args: {
|
||||||
variant: 'primary',
|
|
||||||
children: 'Link that looks like a button',
|
|
||||||
as: 'a',
|
as: 'a',
|
||||||
|
children: 'Link that looks like a button',
|
||||||
|
variant: 'primary',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,13 +5,13 @@ import s from './button.module.scss'
|
|||||||
export type ButtonProps<T extends ElementType = 'button'> = {
|
export type ButtonProps<T extends ElementType = 'button'> = {
|
||||||
as?: T
|
as?: T
|
||||||
children: ReactNode
|
children: ReactNode
|
||||||
variant?: 'primary' | 'secondary' | 'tertiary' | 'link'
|
|
||||||
fullWidth?: boolean
|
|
||||||
className?: string
|
className?: string
|
||||||
|
fullWidth?: boolean
|
||||||
|
variant?: 'link' | 'primary' | 'secondary' | 'tertiary'
|
||||||
} & ComponentPropsWithoutRef<T>
|
} & ComponentPropsWithoutRef<T>
|
||||||
|
|
||||||
export const Button = <T extends ElementType = 'button'>(props: ButtonProps<T>) => {
|
export const Button = <T extends ElementType = 'button'>(props: ButtonProps<T>) => {
|
||||||
const { variant = 'primary', fullWidth, className, as: Component = 'button', ...rest } = props
|
const { as: Component = 'button', className, fullWidth, variant = 'primary', ...rest } = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Component className={`${s[variant]} ${fullWidth ? s.fullWidth : ''} ${className}`} {...rest} />
|
<Component className={`${s[variant]} ${fullWidth ? s.fullWidth : ''} ${className}`} {...rest} />
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import { Card } from './'
|
|
||||||
|
|
||||||
import { Typography } from '@/components'
|
import { Typography } from '@/components'
|
||||||
|
|
||||||
|
import { Card } from './'
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: 'Components/Card',
|
|
||||||
component: Card,
|
component: Card,
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs'],
|
||||||
|
title: 'Components/Card',
|
||||||
} satisfies Meta<typeof Card>
|
} satisfies Meta<typeof Card>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
@@ -17,9 +17,9 @@ export const Default: Story = {
|
|||||||
args: {
|
args: {
|
||||||
children: <Typography variant={'large'}>Card</Typography>,
|
children: <Typography variant={'large'}>Card</Typography>,
|
||||||
style: {
|
style: {
|
||||||
width: '300px',
|
|
||||||
height: '300px',
|
height: '300px',
|
||||||
padding: '24px',
|
padding: '24px',
|
||||||
|
width: '300px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,5 +11,5 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...restP
|
|||||||
root: clsx(s.root, className),
|
root: clsx(s.root, className),
|
||||||
}
|
}
|
||||||
|
|
||||||
return <div ref={ref} className={classNames.root} {...restProps}></div>
|
return <div className={classNames.root} ref={ref} {...restProps}></div>
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -16,7 +16,6 @@
|
|||||||
|
|
||||||
.root {
|
.root {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -4,9 +4,9 @@ import { Meta, StoryObj } from '@storybook/react'
|
|||||||
|
|
||||||
import { Checkbox } from './checkbox'
|
import { Checkbox } from './checkbox'
|
||||||
const meta = {
|
const meta = {
|
||||||
title: 'Components/Checkbox',
|
|
||||||
component: Checkbox,
|
component: Checkbox,
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs'],
|
||||||
|
title: 'Components/Checkbox',
|
||||||
} satisfies Meta<typeof Checkbox>
|
} satisfies Meta<typeof Checkbox>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
@@ -14,8 +14,8 @@ export default meta
|
|||||||
type Story = StoryObj<typeof meta>
|
type Story = StoryObj<typeof meta>
|
||||||
export const Uncontrolled: Story = {
|
export const Uncontrolled: Story = {
|
||||||
args: {
|
args: {
|
||||||
label: 'Click here',
|
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
label: 'Click here',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -26,8 +26,8 @@ export const Controlled: Story = {
|
|||||||
return (
|
return (
|
||||||
<Checkbox
|
<Checkbox
|
||||||
{...args}
|
{...args}
|
||||||
label="Click here"
|
|
||||||
checked={checked}
|
checked={checked}
|
||||||
|
label={'Click here'}
|
||||||
onCheckedChange={() => setChecked(!checked)}
|
onCheckedChange={() => setChecked(!checked)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,38 +1,37 @@
|
|||||||
import { ComponentPropsWithoutRef, FC } from 'react'
|
import { ComponentPropsWithoutRef, FC } from 'react'
|
||||||
|
|
||||||
|
import { Check } from '@/assets/icons'
|
||||||
|
import { Typography } from '@/components'
|
||||||
import * as CheckboxRadix from '@radix-ui/react-checkbox'
|
import * as CheckboxRadix from '@radix-ui/react-checkbox'
|
||||||
import * as LabelRadix from '@radix-ui/react-label'
|
import * as LabelRadix from '@radix-ui/react-label'
|
||||||
import { clsx } from 'clsx'
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
import s from './checkbox.module.scss'
|
import s from './checkbox.module.scss'
|
||||||
|
|
||||||
import { Check } from '@/assets/icons'
|
|
||||||
import { Typography } from '@/components'
|
|
||||||
|
|
||||||
export type CheckboxProps = {
|
export type CheckboxProps = {
|
||||||
label?: string
|
label?: string
|
||||||
position?: 'left' | 'default'
|
position?: 'default' | 'left'
|
||||||
} & ComponentPropsWithoutRef<typeof CheckboxRadix.Root>
|
} & ComponentPropsWithoutRef<typeof CheckboxRadix.Root>
|
||||||
|
|
||||||
export const Checkbox: FC<CheckboxProps> = ({
|
export const Checkbox: FC<CheckboxProps> = ({
|
||||||
position = 'default',
|
|
||||||
label,
|
|
||||||
className,
|
className,
|
||||||
disabled,
|
disabled,
|
||||||
|
label,
|
||||||
|
position = 'default',
|
||||||
...rest
|
...rest
|
||||||
}) => {
|
}) => {
|
||||||
const classNames = {
|
const classNames = {
|
||||||
container: clsx(s.container, className),
|
|
||||||
buttonWrapper: clsx(s.buttonWrapper, disabled && s.disabled, position === 'left' && s.left),
|
buttonWrapper: clsx(s.buttonWrapper, disabled && s.disabled, position === 'left' && s.left),
|
||||||
root: s.root,
|
container: clsx(s.container, className),
|
||||||
indicator: s.indicator,
|
indicator: s.indicator,
|
||||||
label: clsx(s.label, disabled && s.disabled),
|
label: clsx(s.label, disabled && s.disabled),
|
||||||
|
root: s.root,
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames.container}>
|
<div className={classNames.container}>
|
||||||
<LabelRadix.Root asChild>
|
<LabelRadix.Root asChild>
|
||||||
<Typography variant="body2" className={classNames.label} as={'label'}>
|
<Typography as={'label'} className={classNames.label} variant={'body2'}>
|
||||||
<div className={classNames.buttonWrapper}>
|
<div className={classNames.buttonWrapper}>
|
||||||
<CheckboxRadix.Root className={classNames.root} disabled={disabled} {...rest}>
|
<CheckboxRadix.Root className={classNames.root} disabled={disabled} {...rest}>
|
||||||
<CheckboxRadix.Indicator className={classNames.indicator}>
|
<CheckboxRadix.Indicator className={classNames.indicator}>
|
||||||
|
|||||||
@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|||||||
import { TextField } from './'
|
import { TextField } from './'
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: 'Components/TextField',
|
|
||||||
component: TextField,
|
component: TextField,
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs'],
|
||||||
|
title: 'Components/TextField',
|
||||||
} satisfies Meta<typeof TextField>
|
} satisfies Meta<typeof TextField>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
@@ -28,8 +28,8 @@ export const Password: Story = {
|
|||||||
|
|
||||||
export const Error: Story = {
|
export const Error: Story = {
|
||||||
args: {
|
args: {
|
||||||
|
errorMessage: 'Error message',
|
||||||
label: 'Input with error',
|
label: 'Input with error',
|
||||||
value: 'Wrong value',
|
value: 'Wrong value',
|
||||||
errorMessage: 'Error message',
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,31 @@
|
|||||||
import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, forwardRef, useState } from 'react'
|
import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, forwardRef, useState } from 'react'
|
||||||
|
|
||||||
|
import { Eye, VisibilityOff } from '@/assets'
|
||||||
|
import { Typography } from '@/components'
|
||||||
import { clsx } from 'clsx'
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
import s from './text-field.module.scss'
|
import s from './text-field.module.scss'
|
||||||
|
|
||||||
import { VisibilityOff, Eye } from '@/assets'
|
|
||||||
import { Typography } from '@/components'
|
|
||||||
|
|
||||||
export type TextFieldProps = {
|
export type TextFieldProps = {
|
||||||
onValueChange?: (value: string) => void
|
|
||||||
containerProps?: ComponentProps<'div'>
|
containerProps?: ComponentProps<'div'>
|
||||||
labelProps?: ComponentProps<'label'>
|
|
||||||
errorMessage?: string
|
errorMessage?: string
|
||||||
label?: string
|
label?: string
|
||||||
|
labelProps?: ComponentProps<'label'>
|
||||||
|
onValueChange?: (value: string) => void
|
||||||
} & ComponentPropsWithoutRef<'input'>
|
} & ComponentPropsWithoutRef<'input'>
|
||||||
|
|
||||||
export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||||
(
|
(
|
||||||
{
|
{
|
||||||
className,
|
className,
|
||||||
errorMessage,
|
|
||||||
placeholder,
|
|
||||||
type,
|
|
||||||
containerProps,
|
containerProps,
|
||||||
labelProps,
|
errorMessage,
|
||||||
label,
|
label,
|
||||||
|
labelProps,
|
||||||
onChange,
|
onChange,
|
||||||
onValueChange,
|
onValueChange,
|
||||||
|
placeholder,
|
||||||
|
type,
|
||||||
...restProps
|
...restProps
|
||||||
},
|
},
|
||||||
ref
|
ref
|
||||||
@@ -43,41 +42,41 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const classNames = {
|
const classNames = {
|
||||||
root: clsx(s.root, containerProps?.className),
|
|
||||||
fieldContainer: clsx(s.fieldContainer),
|
|
||||||
field: clsx(s.field, !!errorMessage && s.error, className),
|
|
||||||
label: clsx(s.label, labelProps?.className),
|
|
||||||
error: clsx(s.error),
|
error: clsx(s.error),
|
||||||
|
field: clsx(s.field, !!errorMessage && s.error, className),
|
||||||
|
fieldContainer: clsx(s.fieldContainer),
|
||||||
|
label: clsx(s.label, labelProps?.className),
|
||||||
|
root: clsx(s.root, containerProps?.className),
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames.root}>
|
<div className={classNames.root}>
|
||||||
{label && (
|
{label && (
|
||||||
<Typography variant="body2" as="label" className={classNames.label}>
|
<Typography as={'label'} className={classNames.label} variant={'body2'}>
|
||||||
{label}
|
{label}
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
)}
|
||||||
<div className={classNames.fieldContainer}>
|
<div className={classNames.fieldContainer}>
|
||||||
<input
|
<input
|
||||||
className={classNames.field}
|
className={classNames.field}
|
||||||
|
onChange={handleChange}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
type={finalType}
|
type={finalType}
|
||||||
onChange={handleChange}
|
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
{isShowPasswordButtonShown && (
|
{isShowPasswordButtonShown && (
|
||||||
<button
|
<button
|
||||||
className={s.showPassword}
|
className={s.showPassword}
|
||||||
type={'button'}
|
|
||||||
onClick={() => setShowPassword(prev => !prev)}
|
onClick={() => setShowPassword(prev => !prev)}
|
||||||
|
type={'button'}
|
||||||
>
|
>
|
||||||
{showPassword ? <VisibilityOff /> : <Eye />}
|
{showPassword ? <VisibilityOff /> : <Eye />}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Typography variant="error" className={classNames.error}>
|
<Typography className={classNames.error} variant={'error'}>
|
||||||
{errorMessage}
|
{errorMessage}
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,11 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|||||||
import { Typography } from './'
|
import { Typography } from './'
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: 'Components/Typography',
|
|
||||||
component: Typography,
|
|
||||||
tags: ['autodocs'],
|
|
||||||
argTypes: {
|
argTypes: {
|
||||||
variant: {
|
variant: {
|
||||||
|
control: { type: 'radio' },
|
||||||
options: [
|
options: [
|
||||||
'large',
|
'large',
|
||||||
'h1',
|
'h1',
|
||||||
@@ -23,9 +21,11 @@ const meta = {
|
|||||||
'link2',
|
'link2',
|
||||||
'error',
|
'error',
|
||||||
],
|
],
|
||||||
control: { type: 'radio' },
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
component: Typography,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
title: 'Components/Typography',
|
||||||
} satisfies Meta<typeof Typography>
|
} satisfies Meta<typeof Typography>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|||||||
@@ -6,22 +6,22 @@ import s from './typography.module.scss'
|
|||||||
|
|
||||||
export interface TextProps<T extends ElementType> {
|
export interface TextProps<T extends ElementType> {
|
||||||
as?: T
|
as?: T
|
||||||
|
children?: ReactNode
|
||||||
|
className?: string
|
||||||
variant?:
|
variant?:
|
||||||
| 'large'
|
| 'body1'
|
||||||
|
| 'body2'
|
||||||
|
| 'caption'
|
||||||
|
| 'error'
|
||||||
| 'h1'
|
| 'h1'
|
||||||
| 'h2'
|
| 'h2'
|
||||||
| 'h3'
|
| 'h3'
|
||||||
| 'body1'
|
| 'large'
|
||||||
| 'body2'
|
|
||||||
| 'subtitle1'
|
|
||||||
| 'subtitle2'
|
|
||||||
| 'caption'
|
|
||||||
| 'overline'
|
|
||||||
| 'link1'
|
| 'link1'
|
||||||
| 'link2'
|
| 'link2'
|
||||||
| 'error'
|
| 'overline'
|
||||||
children?: ReactNode
|
| 'subtitle1'
|
||||||
className?: string
|
| 'subtitle2'
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Typography<T extends ElementType = 'p'>({
|
export function Typography<T extends ElementType = 'p'>({
|
||||||
@@ -29,7 +29,7 @@ export function Typography<T extends ElementType = 'p'>({
|
|||||||
className,
|
className,
|
||||||
variant = 'body1',
|
variant = 'body1',
|
||||||
...restProps
|
...restProps
|
||||||
}: TextProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof TextProps<T>>) {
|
}: Omit<ComponentPropsWithoutRef<T>, keyof TextProps<T>> & TextProps<T>) {
|
||||||
const classNames = clsx(s.text, s[variant], className)
|
const classNames = clsx(s.text, s[variant], className)
|
||||||
const Component = as || 'p'
|
const Component = as || 'p'
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,11 @@
|
|||||||
import '@fontsource/roboto/400.css'
|
|
||||||
import '@fontsource/roboto/700.css'
|
|
||||||
import './styles/index.scss'
|
|
||||||
|
|
||||||
import { StrictMode } from 'react'
|
import { StrictMode } from 'react'
|
||||||
|
|
||||||
|
import { App } from '@/App'
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
|
|
||||||
import { App } from '@/App'
|
import './styles/index.scss'
|
||||||
|
import '@fontsource/roboto/400.css'
|
||||||
|
import '@fontsource/roboto/700.css'
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
createRoot(document.getElementById('root')!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user