chore: update deps, apply updated eslint ocnfig

.eslintrc.cjs

@@ -1,10 +1,17 @@
 module.exports = {
-  extends: ['@it-incubator/eslint-config', 'plugin:storybook/recommended'],
+  extends: ["@it-incubator/eslint-config", "plugin:storybook/recommended"],
-  plugins:['myPlugin'],
+  plugins: ["myPlugin"],
   rules: {
-    'no-console': ['warn', {
+    "no-console": ["warn", {
-      allow: ['warn', 'error']
+      allow: ["warn", "error"]
     }],
     "myPlugin/no-wrong-redux-import": "error"
-  }
+  },
+  overrides: [{
+    "files": ["**/*.stories.tsx"],
+    "rules": {
+      "react-hooks/rules-of-hooks": "off",
+      'no-console': 'off'
+    }
+  }]
 };

package.json

@@ -13,55 +13,55 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@fontsource/roboto": "^5.0.5",
+    "@fontsource/roboto": "^5.0.8",
-    "@hookform/resolvers": "^3.1.1",
+    "@hookform/resolvers": "^3.3.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@reduxjs/toolkit": "^1.9.5",
+    "@reduxjs/toolkit": "^1.9.7",
-    "@storybook/theming": "^7.2.1",
+    "@storybook/theming": "^7.4.6",
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.47.0",
-    "react-redux": "^8.1.2",
+    "react-redux": "^8.1.3",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^6.16.0",
     "react-toastify": "^9.1.3",
-    "remeda": "^1.24.0",
+    "remeda": "^1.27.1",
-    "storybook-addon-react-router-v6": "^2.0.0",
+    "storybook-addon-react-router-v6": "^2.0.7",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@hookform/devtools": "^4.3.1",
-    "@it-incubator/eslint-config": "^0.1.3",
+    "@it-incubator/eslint-config": "^1.0.1",
     "@it-incubator/prettier-config": "^0.1.2",
     "@it-incubator/stylelint-config": "^0.1.5",
-    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.2.1",
+    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-links": "^7.4.6",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.2.1",
+    "@storybook/blocks": "^7.4.6",
-    "@storybook/react": "^7.2.1",
+    "@storybook/react": "^7.4.6",
-    "@storybook/react-vite": "^7.2.1",
+    "@storybook/react-vite": "^7.4.6",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.4.5",
+    "@types/node": "^20.8.4",
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.2.27",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.2.12",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/parser": "^6.7.5",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "^4.1.0",
-    "eslint": "^8.45.0",
+    "eslint": "^8.51.0",
-    "eslint-plugin-myPlugin": "file:./eslint",
+    "eslint-plugin-myPlugin": "file:eslint",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
-    "sass": "^1.64.1",
+    "sass": "^1.69.1",
-    "storybook": "^7.2.1",
+    "storybook": "^7.4.6",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.2.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.11"
   }
 }

src/assets/icons/camera.tsx

@@ -1,60 +1,68 @@
-import { SVGProps, Ref, forwardRef, memo } from 'react'
+import { Ref, SVGProps, forwardRef, memo } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
   <svg
-    width="44"
+    fill={'none'}
-    height="44"
+    height={'44'}
-    viewBox="0 0 44 44"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
     ref={ref}
+    viewBox={'0 0 44 44'}
+    width={'44'}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g filter="url(#filter0_d_5918_2450)">
+    <g filter={'url(#filter0_d_5918_2450)'}>
-      <rect x="10" y="8" width="24" height="24" rx="4" fill="#4C4C4C" />
+      <rect fill={'#4C4C4C'} height={'24'} rx={'4'} width={'24'} x={'10'} y={'8'} />
-      <g clipPath="url(#clip0_5918_2450)">
+      <g clipPath={'url(#clip0_5918_2450)'}>
         <path
-          d="M26.6666 25.3334H17.3333C17.1565 25.3334 16.9869 25.4036 16.8619 25.5286C16.7369 25.6537 16.6666 25.8232 16.6666 26C16.6666 26.1769 16.7369 26.3464 16.8619 26.4714C16.9869 26.5965 17.1565 26.6667 17.3333 26.6667H26.6666C26.8434 26.6667 27.013 26.5965 27.138 26.4714C27.2631 26.3464 27.3333 26.1769 27.3333 26C27.3333 25.8232 27.2631 25.6537 27.138 25.5286C27.013 25.4036 26.8434 25.3334 26.6666 25.3334Z"
+          d={
-          fill="white"
+            'M26.6666 25.3334H17.3333C17.1565 25.3334 16.9869 25.4036 16.8619 25.5286C16.7369 25.6537 16.6666 25.8232 16.6666 26C16.6666 26.1769 16.7369 26.3464 16.8619 26.4714C16.9869 26.5965 17.1565 26.6667 17.3333 26.6667H26.6666C26.8434 26.6667 27.013 26.5965 27.138 26.4714C27.2631 26.3464 27.3333 26.1769 27.3333 26C27.3333 25.8232 27.2631 25.6537 27.138 25.5286C27.013 25.4036 26.8434 25.3334 26.6666 25.3334Z'
+          }
+          fill={'white'}
         />
         <path
-          d="M17.3333 24H17.3933L20.1733 23.7467C20.4778 23.7163 20.7626 23.5821 20.98 23.3667L26.98 17.3667C27.2128 17.1206 27.3387 16.7923 27.3299 16.4537C27.3212 16.115 27.1786 15.7937 26.9333 15.56L25.1066 13.7333C24.8682 13.5094 24.5558 13.3809 24.2288 13.3723C23.9019 13.3637 23.5831 13.4756 23.3333 13.6867L17.3333 19.6867C17.1178 19.904 16.9836 20.1888 16.9533 20.4933L16.6666 23.2733C16.6576 23.371 16.6703 23.4694 16.7037 23.5616C16.7371 23.6538 16.7905 23.7374 16.86 23.8067C16.9222 23.8684 16.9961 23.9173 17.0773 23.9505C17.1586 23.9837 17.2455 24.0005 17.3333 24ZM24.18 14.6667L26 16.4867L24.6666 17.7867L22.88 16L24.18 14.6667ZM18.2466 20.6067L22 16.88L23.8 18.68L20.0666 22.4133L18.0666 22.6L18.2466 20.6067Z"
+          d={
-          fill="white"
+            'M17.3333 24H17.3933L20.1733 23.7467C20.4778 23.7163 20.7626 23.5821 20.98 23.3667L26.98 17.3667C27.2128 17.1206 27.3387 16.7923 27.3299 16.4537C27.3212 16.115 27.1786 15.7937 26.9333 15.56L25.1066 13.7333C24.8682 13.5094 24.5558 13.3809 24.2288 13.3723C23.9019 13.3637 23.5831 13.4756 23.3333 13.6867L17.3333 19.6867C17.1178 19.904 16.9836 20.1888 16.9533 20.4933L16.6666 23.2733C16.6576 23.371 16.6703 23.4694 16.7037 23.5616C16.7371 23.6538 16.7905 23.7374 16.86 23.8067C16.9222 23.8684 16.9961 23.9173 17.0773 23.9505C17.1586 23.9837 17.2455 24.0005 17.3333 24ZM24.18 14.6667L26 16.4867L24.6666 17.7867L22.88 16L24.18 14.6667ZM18.2466 20.6067L22 16.88L23.8 18.68L20.0666 22.4133L18.0666 22.6L18.2466 20.6067Z'
+          }
+          fill={'white'}
         />
       </g>
     </g>
     <defs>
       <filter
-        id="filter0_d_5918_2450"
+        colorInterpolationFilters={'sRGB'}
-        x="0"
+        filterUnits={'userSpaceOnUse'}
-        y="0"
+        height={'44'}
-        width="44"
+        id={'filter0_d_5918_2450'}
-        height="44"
+        width={'44'}
-        filterUnits="userSpaceOnUse"
+        x={'0'}
-        colorInterpolationFilters="sRGB"
+        y={'0'}
       >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity={'0'} result={'BackgroundImageFix'} />
         <feColorMatrix
-          in="SourceAlpha"
+          in={'SourceAlpha'}
-          type="matrix"
+          result={'hardAlpha'}
-          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          type={'matrix'}
-          result="hardAlpha"
+          values={'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'}
         />
-        <feOffset dy="2" />
+        <feOffset dy={'2'} />
-        <feGaussianBlur stdDeviation="5" />
+        <feGaussianBlur stdDeviation={'5'} />
         <feColorMatrix
-          type="matrix"
+          type={'matrix'}
-          values="0 0 0 0 0.429167 0 0 0 0 0.429167 0 0 0 0 0.429167 0 0 0 0.25 0"
+          values={'0 0 0 0 0.429167 0 0 0 0 0.429167 0 0 0 0 0.429167 0 0 0 0.25 0'}
         />
-        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5918_2450" />
         <feBlend
-          mode="normal"
+          in2={'BackgroundImageFix'}
-          in="SourceGraphic"
+          mode={'normal'}
-          in2="effect1_dropShadow_5918_2450"
+          result={'effect1_dropShadow_5918_2450'}
-          result="shape"
+        />
+        <feBlend
+          in={'SourceGraphic'}
+          in2={'effect1_dropShadow_5918_2450'}
+          mode={'normal'}
+          result={'shape'}
         />
       </filter>
-      <clipPath id="clip0_5918_2450">
+      <clipPath id={'clip0_5918_2450'}>
-        <rect width="16" height="16" fill="white" transform="translate(14 12)" />
+        <rect fill={'white'} height={'16'} transform={'translate(14 12)'} width={'16'} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/check.tsx

@@ -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>) => (
   <svg
-    width={18}
+    fill={'none'}
     height={18}
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
     ref={ref}
+    viewBox={'0 0 18 18'}
+    width={18}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
     <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>
 )

src/assets/icons/chevron-up.tsx

@@ -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>) => (
   <svg
-    width={12}
+    fill={'none'}
     height={12}
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
     ref={ref}
+    viewBox={'0 0 12 12'}
+    width={12}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_9209_3250)">
+    <g clipPath={'url(#clip0_9209_3250)'}>
       <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>
     <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>
     </defs>
   </svg>

src/assets/icons/close.tsx

@@ -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>) => (
   <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}
+    viewBox={'0 0 24 24'}
+    width={'24'}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...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
-          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>
       <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>
       </defs>
     </svg>

src/assets/icons/edit-2-outline.tsx

@@ -1,26 +1,30 @@
 import { SVGProps } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="16"
+    fill={'none'}
-    height="16"
+    height={'16'}
-    viewBox="0 0 16 16"
+    viewBox={'0 0 16 16'}
-    fill="none"
+    width={'16'}
-    xmlns="http://www.w3.org/2000/svg"
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_28366_3239)">
+    <g clipPath={'url(#clip0_28366_3239)'}>
       <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
-        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>
     <defs>
-      <clipPath id="clip0_28366_3239">
+      <clipPath id={'clip0_28366_3239'}>
-        <rect width="16" height="16" fill="white" />
+        <rect fill={'white'} height={'16'} width={'16'} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/edit.tsx

@@ -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>) => (
   <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}
+    viewBox={'0 0 16 16'}
+    width={'16'}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_5918_2436)">
+    <g clipPath={'url(#clip0_5918_2436)'}>
       <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
-        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>
     <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>
     </defs>
   </svg>

src/assets/icons/email.tsx

@@ -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>) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    fill={'none'}
-    width={96}
     height={96}
-    fill="none"
-    viewBox="0 0 96 96"
     ref={ref}
+    viewBox={'0 0 96 96'}
+    width={96}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
     <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}
-      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
-      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
-      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
-      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
-      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
-      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
-      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
-      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
-      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
-      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
-      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
-      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>
 )

src/assets/icons/eye.tsx

@@ -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>) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    fill={'none'}
-    width={20}
     height={20}
-    fill="none"
-    viewBox="0 0 24 24"
     ref={ref}
+    viewBox={'0 0 24 24'}
+    width={20}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
     <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>
 )

src/assets/icons/keyboard-arrow-left.tsx

@@ -1,23 +1,23 @@
-import { SVGProps, Ref, forwardRef, memo } from 'react'
+import { Ref, SVGProps, forwardRef, memo } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
   <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}
+    viewBox={'0 0 16 16'}
+    width={'16'}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_5928_3055)">
+    <g clipPath={'url(#clip0_5928_3055)'}>
       <path
-        d="M10.2733 11.06L7.21998 8L10.2733 4.94L9.33331 4L5.33331 8L9.33331 12L10.2733 11.06Z"
+        d={'M10.2733 11.06L7.21998 8L10.2733 4.94L9.33331 4L5.33331 8L9.33331 12L10.2733 11.06Z'}
-        fill="white"
+        fill={'white'}
       />
     </g>
     <defs>
-      <clipPath id="clip0_5928_3055">
+      <clipPath id={'clip0_5928_3055'}>
-        <rect width="16" height="16" fill="white" />
+        <rect fill={'white'} height={'16'} width={'16'} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/keyboard-arrow-right.tsx

@@ -1,23 +1,23 @@
-import { SVGProps, Ref, forwardRef, memo } from 'react'
+import { Ref, SVGProps, forwardRef, memo } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
   <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}
+    viewBox={'0 0 16 16'}
+    width={'16'}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_5928_3027)">
+    <g clipPath={'url(#clip0_5928_3027)'}>
       <path
-        d="M5.72665 11.06L8.77999 8L5.72665 4.94L6.66665 4L10.6667 8L6.66665 12L5.72665 11.06Z"
+        d={'M5.72665 11.06L8.77999 8L5.72665 4.94L6.66665 4L10.6667 8L6.66665 12L5.72665 11.06Z'}
-        fill="white"
+        fill={'white'}
       />
     </g>
     <defs>
-      <clipPath id="clip0_5928_3027">
+      <clipPath id={'clip0_5928_3027'}>
-        <rect width="16" height="16" fill="white" />
+        <rect fill={'white'} height={'16'} width={'16'} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/logo.tsx

@@ -1,28 +1,32 @@
 import { SVGProps } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    fill={'none'}
-    width={157}
     height={36}
-    fill="none"
+    viewBox={'0 0 157 36'}
-    viewBox="0 0 157 36"
+    width={157}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
     <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
-      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
-      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>
 )

src/assets/icons/logout.tsx

@@ -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>) => (
   <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}
+    viewBox={'0 0 16 16'}
+    width={'16'}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_6627_107)">
+    <g clipPath={'url(#clip0_6627_107)'}>
       <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
-        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>
     <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>
     </defs>
   </svg>

src/assets/icons/person-outline.tsx

@@ -1,19 +1,23 @@
 import { SVGProps } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    fill={'none'}
-    width={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}
   >
-    <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>
     <defs>
-      <clipPath id="clip0_6693_1154">
+      <clipPath id={'clip0_6693_1154'}>
-        <path fill="#fff" d="M0 0h16v16H0z" />
+        <path d={'M0 0h16v16H0z'} fill={'#fff'} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/play-circle-outline.tsx

@@ -1,26 +1,30 @@
 import { SVGProps } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="16"
+    fill={'none'}
-    height="16"
+    height={'16'}
-    viewBox="0 0 16 16"
+    viewBox={'0 0 16 16'}
-    fill="none"
+    width={'16'}
-    xmlns="http://www.w3.org/2000/svg"
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_28366_3435)">
+    <g clipPath={'url(#clip0_28366_3435)'}>
       <path
-        d="M8.00004 1.33337C6.6815 1.33337 5.39257 1.72437 4.29624 2.45691C3.19991 3.18945 2.34543 4.23064 1.84085 5.44882C1.33626 6.66699 1.20424 8.00744 1.46148 9.30064C1.71871 10.5938 2.35365 11.7817 3.286 12.7141C4.21835 13.6464 5.40624 14.2814 6.69944 14.5386C7.99265 14.7958 9.33309 14.6638 10.5513 14.1592C11.7694 13.6547 12.8106 12.8002 13.5432 11.7038C14.2757 10.6075 14.6667 9.31858 14.6667 8.00004C14.6667 7.12456 14.4943 6.25766 14.1592 5.44882C13.8242 4.63998 13.3331 3.90505 12.7141 3.286C12.095 2.66694 11.3601 2.17588 10.5513 1.84084C9.74243 1.50581 8.87552 1.33337 8.00004 1.33337ZM8.00004 13.3334C6.94521 13.3334 5.91406 13.0206 5.037 12.4345C4.15994 11.8485 3.47635 11.0156 3.07269 10.041C2.66902 9.06648 2.5634 7.99412 2.76919 6.95956C2.97498 5.92499 3.48293 4.97468 4.22881 4.2288C4.97469 3.48292 5.925 2.97497 6.95956 2.76919C7.99413 2.5634 9.06648 2.66902 10.041 3.07268C11.0156 3.47635 11.8485 4.15994 12.4345 5.037C13.0206 5.91406 13.3334 6.94521 13.3334 8.00004C13.3334 9.41453 12.7715 10.7711 11.7713 11.7713C10.7711 12.7715 9.41453 13.3334 8.00004 13.3334Z"
+        d={
-        fill="white"
+          'M8.00004 1.33337C6.6815 1.33337 5.39257 1.72437 4.29624 2.45691C3.19991 3.18945 2.34543 4.23064 1.84085 5.44882C1.33626 6.66699 1.20424 8.00744 1.46148 9.30064C1.71871 10.5938 2.35365 11.7817 3.286 12.7141C4.21835 13.6464 5.40624 14.2814 6.69944 14.5386C7.99265 14.7958 9.33309 14.6638 10.5513 14.1592C11.7694 13.6547 12.8106 12.8002 13.5432 11.7038C14.2757 10.6075 14.6667 9.31858 14.6667 8.00004C14.6667 7.12456 14.4943 6.25766 14.1592 5.44882C13.8242 4.63998 13.3331 3.90505 12.7141 3.286C12.095 2.66694 11.3601 2.17588 10.5513 1.84084C9.74243 1.50581 8.87552 1.33337 8.00004 1.33337ZM8.00004 13.3334C6.94521 13.3334 5.91406 13.0206 5.037 12.4345C4.15994 11.8485 3.47635 11.0156 3.07269 10.041C2.66902 9.06648 2.5634 7.99412 2.76919 6.95956C2.97498 5.92499 3.48293 4.97468 4.22881 4.2288C4.97469 3.48292 5.925 2.97497 6.95956 2.76919C7.99413 2.5634 9.06648 2.66902 10.041 3.07268C11.0156 3.47635 11.8485 4.15994 12.4345 5.037C13.0206 5.91406 13.3334 6.94521 13.3334 8.00004C13.3334 9.41453 12.7715 10.7711 11.7713 11.7713C10.7711 12.7715 9.41453 13.3334 8.00004 13.3334Z'
+        }
+        fill={'white'}
       />
       <path
-        d="M8.22666 4.96667C8.06331 4.81613 7.85932 4.71692 7.64004 4.68136C7.42077 4.6458 7.19588 4.67547 6.99333 4.76667C6.7967 4.84621 6.62825 4.98257 6.5095 5.15832C6.39075 5.33407 6.32709 5.54123 6.32666 5.75334V10.2467C6.32709 10.4588 6.39075 10.6659 6.5095 10.8417C6.62825 11.0174 6.7967 11.1538 6.99333 11.2333C7.13784 11.2989 7.29464 11.333 7.45333 11.3333C7.73927 11.3321 8.01467 11.2252 8.22666 11.0333L10.6667 8.78667C10.7758 8.68674 10.8629 8.56519 10.9226 8.42976C10.9822 8.29433 11.013 8.14798 11.013 8C11.013 7.85203 10.9822 7.70568 10.9226 7.57025C10.8629 7.43482 10.7758 7.31327 10.6667 7.21334L8.22666 4.96667ZM7.66666 9.73334V6.26667L9.53999 8L7.66666 9.73334Z"
+        d={
-        fill="white"
+          'M8.22666 4.96667C8.06331 4.81613 7.85932 4.71692 7.64004 4.68136C7.42077 4.6458 7.19588 4.67547 6.99333 4.76667C6.7967 4.84621 6.62825 4.98257 6.5095 5.15832C6.39075 5.33407 6.32709 5.54123 6.32666 5.75334V10.2467C6.32709 10.4588 6.39075 10.6659 6.5095 10.8417C6.62825 11.0174 6.7967 11.1538 6.99333 11.2333C7.13784 11.2989 7.29464 11.333 7.45333 11.3333C7.73927 11.3321 8.01467 11.2252 8.22666 11.0333L10.6667 8.78667C10.7758 8.68674 10.8629 8.56519 10.9226 8.42976C10.9822 8.29433 11.013 8.14798 11.013 8C11.013 7.85203 10.9822 7.70568 10.9226 7.57025C10.8629 7.43482 10.7758 7.31327 10.6667 7.21334L8.22666 4.96667ZM7.66666 9.73334V6.26667L9.53999 8L7.66666 9.73334Z'
+        }
+        fill={'white'}
       />
     </g>
     <defs>
-      <clipPath id="clip0_28366_3435">
+      <clipPath id={'clip0_28366_3435'}>
-        <rect width="16" height="16" fill="white" />
+        <rect fill={'white'} height={'16'} width={'16'} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/search.tsx

@@ -1,23 +1,25 @@
-import { SVGProps, Ref, forwardRef, memo } from 'react'
+import { Ref, SVGProps, forwardRef, memo } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
   <svg
-    width={20}
+    fill={'none'}
     height={20}
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
     ref={ref}
+    viewBox={'0 0 20 20'}
+    width={20}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_21547_180)">
+    <g clipPath={'url(#clip0_21547_180)'}>
       <path
-        d="M17.2583 16.075L14.425 13.25C15.3392 12.0854 15.8352 10.6472 15.8333 9.16667C15.8333 7.84813 15.4423 6.5592 14.7098 5.46287C13.9773 4.36654 12.9361 3.51206 11.7179 3.00747C10.4997 2.50289 9.15927 2.37087 7.86607 2.6281C6.57286 2.88534 5.38497 3.52027 4.45262 4.45262C3.52027 5.38497 2.88534 6.57286 2.6281 7.86607C2.37087 9.15927 2.50289 10.4997 3.00747 11.7179C3.51206 12.9361 4.36654 13.9773 5.46287 14.7098C6.5592 15.4423 7.84813 15.8333 9.16667 15.8333C10.6472 15.8352 12.0854 15.3392 13.25 14.425L16.075 17.2583C16.1525 17.3364 16.2446 17.3984 16.3462 17.4407C16.4477 17.4831 16.5567 17.5048 16.6667 17.5048C16.7767 17.5048 16.8856 17.4831 16.9871 17.4407C17.0887 17.3984 17.1809 17.3364 17.2583 17.2583C17.3364 17.1809 17.3984 17.0887 17.4407 16.9871C17.4831 16.8856 17.5048 16.7767 17.5048 16.6667C17.5048 16.5567 17.4831 16.4477 17.4407 16.3462C17.3984 16.2446 17.3364 16.1525 17.2583 16.075ZM4.16667 9.16667C4.16667 8.17776 4.45991 7.21106 5.00932 6.38882C5.55873 5.56657 6.33962 4.92571 7.25325 4.54727C8.16688 4.16883 9.17222 4.06982 10.1421 4.26274C11.112 4.45567 12.0029 4.93187 12.7022 5.63114C13.4015 6.3304 13.8777 7.22131 14.0706 8.19122C14.2635 9.16112 14.1645 10.1665 13.7861 11.0801C13.4076 11.9937 12.7668 12.7746 11.9445 13.324C11.1223 13.8734 10.1556 14.1667 9.16667 14.1667C7.84059 14.1667 6.56882 13.6399 5.63114 12.7022C4.69345 11.7645 4.16667 10.4928 4.16667 9.16667Z"
+        d={
-        fill="#808080"
+          'M17.2583 16.075L14.425 13.25C15.3392 12.0854 15.8352 10.6472 15.8333 9.16667C15.8333 7.84813 15.4423 6.5592 14.7098 5.46287C13.9773 4.36654 12.9361 3.51206 11.7179 3.00747C10.4997 2.50289 9.15927 2.37087 7.86607 2.6281C6.57286 2.88534 5.38497 3.52027 4.45262 4.45262C3.52027 5.38497 2.88534 6.57286 2.6281 7.86607C2.37087 9.15927 2.50289 10.4997 3.00747 11.7179C3.51206 12.9361 4.36654 13.9773 5.46287 14.7098C6.5592 15.4423 7.84813 15.8333 9.16667 15.8333C10.6472 15.8352 12.0854 15.3392 13.25 14.425L16.075 17.2583C16.1525 17.3364 16.2446 17.3984 16.3462 17.4407C16.4477 17.4831 16.5567 17.5048 16.6667 17.5048C16.7767 17.5048 16.8856 17.4831 16.9871 17.4407C17.0887 17.3984 17.1809 17.3364 17.2583 17.2583C17.3364 17.1809 17.3984 17.0887 17.4407 16.9871C17.4831 16.8856 17.5048 16.7767 17.5048 16.6667C17.5048 16.5567 17.4831 16.4477 17.4407 16.3462C17.3984 16.2446 17.3364 16.1525 17.2583 16.075ZM4.16667 9.16667C4.16667 8.17776 4.45991 7.21106 5.00932 6.38882C5.55873 5.56657 6.33962 4.92571 7.25325 4.54727C8.16688 4.16883 9.17222 4.06982 10.1421 4.26274C11.112 4.45567 12.0029 4.93187 12.7022 5.63114C13.4015 6.3304 13.8777 7.22131 14.0706 8.19122C14.2635 9.16112 14.1645 10.1665 13.7861 11.0801C13.4076 11.9937 12.7668 12.7746 11.9445 13.324C11.1223 13.8734 10.1556 14.1667 9.16667 14.1667C7.84059 14.1667 6.56882 13.6399 5.63114 12.7022C4.69345 11.7645 4.16667 10.4928 4.16667 9.16667Z'
+        }
+        fill={'#808080'}
       />
     </g>
     <defs>
-      <clipPath id="clip0_21547_180">
+      <clipPath id={'clip0_21547_180'}>
-        <rect width={20} height={20} fill="white" />
+        <rect fill={'white'} height={20} width={20} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/trash-outline.tsx

@@ -1,22 +1,24 @@
 import { SVGProps } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="16"
+    fill={'none'}
-    height="16"
+    height={'16'}
-    viewBox="0 0 16 16"
+    viewBox={'0 0 16 16'}
-    fill="none"
+    width={'16'}
-    xmlns="http://www.w3.org/2000/svg"
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
-    <g clipPath="url(#clip0_28366_3245)">
+    <g clipPath={'url(#clip0_28366_3245)'}>
       <path
-        d="M14 3.99998H10.6667V2.88665C10.6511 2.45986 10.4668 2.05669 10.1544 1.76551C9.842 1.47433 9.42687 1.31891 9.00004 1.33332H7.00004C6.57321 1.31891 6.15808 1.47433 5.84566 1.76551C5.53324 2.05669 5.34901 2.45986 5.33337 2.88665V3.99998H2.00004C1.82323 3.99998 1.65366 4.07022 1.52864 4.19525C1.40361 4.32027 1.33337 4.48984 1.33337 4.66665C1.33337 4.84346 1.40361 5.01303 1.52864 5.13805C1.65366 5.26308 1.82323 5.33332 2.00004 5.33332H2.66671V12.6666C2.66671 13.1971 2.87742 13.7058 3.25249 14.0809C3.62757 14.4559 4.13627 14.6666 4.66671 14.6666H11.3334C11.8638 14.6666 12.3725 14.4559 12.7476 14.0809C13.1227 13.7058 13.3334 13.1971 13.3334 12.6666V5.33332H14C14.1769 5.33332 14.3464 5.26308 14.4714 5.13805C14.5965 5.01303 14.6667 4.84346 14.6667 4.66665C14.6667 4.48984 14.5965 4.32027 14.4714 4.19525C14.3464 4.07022 14.1769 3.99998 14 3.99998ZM6.66671 2.88665C6.66671 2.77998 6.80671 2.66665 7.00004 2.66665H9.00004C9.19337 2.66665 9.33337 2.77998 9.33337 2.88665V3.99998H6.66671V2.88665ZM12 12.6666C12 12.8435 11.9298 13.013 11.8048 13.1381C11.6798 13.2631 11.5102 13.3333 11.3334 13.3333H4.66671C4.4899 13.3333 4.32033 13.2631 4.1953 13.1381C4.07028 13.013 4.00004 12.8435 4.00004 12.6666V5.33332H12V12.6666Z"
+        d={
-        fill="white"
+          'M14 3.99998H10.6667V2.88665C10.6511 2.45986 10.4668 2.05669 10.1544 1.76551C9.842 1.47433 9.42687 1.31891 9.00004 1.33332H7.00004C6.57321 1.31891 6.15808 1.47433 5.84566 1.76551C5.53324 2.05669 5.34901 2.45986 5.33337 2.88665V3.99998H2.00004C1.82323 3.99998 1.65366 4.07022 1.52864 4.19525C1.40361 4.32027 1.33337 4.48984 1.33337 4.66665C1.33337 4.84346 1.40361 5.01303 1.52864 5.13805C1.65366 5.26308 1.82323 5.33332 2.00004 5.33332H2.66671V12.6666C2.66671 13.1971 2.87742 13.7058 3.25249 14.0809C3.62757 14.4559 4.13627 14.6666 4.66671 14.6666H11.3334C11.8638 14.6666 12.3725 14.4559 12.7476 14.0809C13.1227 13.7058 13.3334 13.1971 13.3334 12.6666V5.33332H14C14.1769 5.33332 14.3464 5.26308 14.4714 5.13805C14.5965 5.01303 14.6667 4.84346 14.6667 4.66665C14.6667 4.48984 14.5965 4.32027 14.4714 4.19525C14.3464 4.07022 14.1769 3.99998 14 3.99998ZM6.66671 2.88665C6.66671 2.77998 6.80671 2.66665 7.00004 2.66665H9.00004C9.19337 2.66665 9.33337 2.77998 9.33337 2.88665V3.99998H6.66671V2.88665ZM12 12.6666C12 12.8435 11.9298 13.013 11.8048 13.1381C11.6798 13.2631 11.5102 13.3333 11.3334 13.3333H4.66671C4.4899 13.3333 4.32033 13.2631 4.1953 13.1381C4.07028 13.013 4.00004 12.8435 4.00004 12.6666V5.33332H12V12.6666Z'
+        }
+        fill={'white'}
       />
     </g>
     <defs>
-      <clipPath id="clip0_28366_3245">
+      <clipPath id={'clip0_28366_3245'}>
-        <rect width="16" height="16" fill="white" />
+        <rect fill={'white'} height={'16'} width={'16'} />
       </clipPath>
     </defs>
   </svg>

src/assets/icons/visibility-off.tsx

@@ -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>) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    fill={'none'}
-    width={20}
     height={20}
-    fill="none"
-    viewBox="0 0 24 24"
     ref={ref}
+    viewBox={'0 0 24 24'}
+    width={20}
+    xmlns={'http://www.w3.org/2000/svg'}
     {...props}
   >
     <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>
 )

src/components/auth/check-email/check-email.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { CheckEmail } from './'
 
 const meta = {
-  title: 'Auth/Check email',
   component: CheckEmail,
   tags: ['autodocs'],
+  title: 'Auth/Check email',
 } satisfies Meta<typeof CheckEmail>
 
 export default meta

src/components/auth/check-email/check-email.tsx

@@ -14,16 +14,16 @@ export const CheckEmail = ({ email }: Props) => {
 
   return (
     <Card className={s.card}>
-      <Typography variant="large" className={s.title}>
+      <Typography className={s.title} variant={'large'}>
         Check your email
       </Typography>
       <div className={s.iconContainer}>
         <Email />
       </div>
-      <Typography variant="body2" className={s.instructions}>
+      <Typography className={s.instructions} variant={'body2'}>
         {message}
       </Typography>
-      <Button fullWidth as={Link} to={'/sing-in'}>
+      <Button as={Link} fullWidth to={'/sing-in'}>
         Back to Sign in
       </Button>
     </Card>

src/components/auth/new-password/new-password.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { NewPassword } from './'
 
 const meta = {
-  title: 'Auth/New password',
   component: NewPassword,
   tags: ['autodocs'],
+  title: 'Auth/New password',
 } satisfies Meta<typeof NewPassword>
 
 export default meta

src/components/auth/new-password/new-password.tsx

@@ -1,9 +1,9 @@
-import { DevTool } from '@hookform/devtools'
-import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { z } from 'zod'
 
 import { Button, Card, ControlledTextField, Typography } from '../../ui'
+import { DevTool } from '@hookform/devtools'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
 
 import s from './new-password.module.scss'
 
@@ -19,10 +19,10 @@ type Props = {
 
 export const NewPassword = (props: Props) => {
   const { control, handleSubmit } = useForm<FormType>({
-    resolver: zodResolver(schema),
     defaultValues: {
       password: '',
     },
+    resolver: zodResolver(schema),
   })
 
   const handleFormSubmitted = handleSubmit(props.onSubmit)
@@ -31,18 +31,18 @@ export const NewPassword = (props: Props) => {
     <>
       <DevTool control={control} />
       <Card className={s.card}>
-        <Typography variant="large" className={s.title}>
+        <Typography className={s.title} variant={'large'}>
           Create new password
         </Typography>
         <form onSubmit={handleFormSubmitted}>
           <ControlledTextField
-            placeholder={'Password'}
-            name={'password'}
-            control={control}
-            type={'password'}
             containerProps={{ className: s.input }}
+            control={control}
+            name={'password'}
+            placeholder={'Password'}
+            type={'password'}
           />
-          <Typography variant="caption" className={s.instructions}>
+          <Typography className={s.instructions} variant={'caption'}>
             Create new password and we will send you further instructions to email
           </Typography>
           <Button fullWidth type={'submit'}>

src/components/auth/recover-password/recover-password.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { RecoverPassword } from './'
 
 const meta = {
-  title: 'Auth/Recover password',
   component: RecoverPassword,
   tags: ['autodocs'],
+  title: 'Auth/Recover password',
 } satisfies Meta<typeof RecoverPassword>
 
 export default meta

src/components/auth/recover-password/recover-password.tsx

@@ -1,10 +1,10 @@
-import { DevTool } from '@hookform/devtools'
-import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
-import { z } from 'zod'
 
 import { Button, Card, ControlledTextField, Typography } from '../../ui'
+import { DevTool } from '@hookform/devtools'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
 
 import s from './recover-password.module.scss'
 
@@ -20,11 +20,11 @@ type Props = {
 
 export const RecoverPassword = (props: Props) => {
   const { control, handleSubmit } = useForm<FormType>({
-    mode: 'onSubmit',
-    resolver: zodResolver(schema),
     defaultValues: {
       email: '',
     },
+    mode: 'onSubmit',
+    resolver: zodResolver(schema),
   })
 
   const handleFormSubmitted = handleSubmit(props.onSubmit)
@@ -33,24 +33,24 @@ export const RecoverPassword = (props: Props) => {
     <>
       <DevTool control={control} />
       <Card className={s.card}>
-        <Typography variant="large" className={s.title}>
+        <Typography className={s.title} variant={'large'}>
           Forgot your password?
         </Typography>
         <form onSubmit={handleFormSubmitted}>
           <div className={s.form}>
-            <ControlledTextField placeholder={'Email'} name={'email'} control={control} />
+            <ControlledTextField control={control} name={'email'} placeholder={'Email'} />
           </div>
-          <Typography variant="body2" className={s.instructions}>
+          <Typography className={s.instructions} variant={'body2'}>
             Enter your email address and we will send you further instructions
           </Typography>
           <Button className={s.button} fullWidth type={'submit'}>
             Send Instructions
           </Button>
         </form>
-        <Typography variant="body2" className={s.caption}>
+        <Typography className={s.caption} variant={'body2'}>
           Did you remember your password?
         </Typography>
-        <Typography variant="link1" as={Link} to="/sign-in" className={s.loginLink}>
+        <Typography as={Link} className={s.loginLink} to={'/sign-in'} variant={'link1'}>
           Try logging in
         </Typography>
       </Card>

src/components/auth/sign-in/sign-in.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { SignIn } from './'
 
 const meta = {
-  title: 'Auth/Sign in',
   component: SignIn,
   tags: ['autodocs'],
+  title: 'Auth/Sign in',
 } satisfies Meta<typeof SignIn>
 
 export default meta

src/components/auth/sign-in/sign-in.tsx

@@ -1,10 +1,10 @@
-import { DevTool } from '@hookform/devtools'
-import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
-import { z } from 'zod'
 
 import { Button, Card, ControlledCheckbox, ControlledTextField, Typography } from '../../ui'
+import { DevTool } from '@hookform/devtools'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
 
 import s from './sign-in.module.scss'
 
@@ -22,13 +22,13 @@ type Props = {
 
 export const SignIn = (props: Props) => {
   const { control, handleSubmit } = useForm<FormType>({
-    mode: 'onSubmit',
-    resolver: zodResolver(schema),
     defaultValues: {
       email: '',
       password: '',
       rememberMe: false,
     },
+    mode: 'onSubmit',
+    resolver: zodResolver(schema),
   })
 
   const handleFormSubmitted = handleSubmit(props.onSubmit)
@@ -37,37 +37,37 @@ export const SignIn = (props: Props) => {
     <>
       <DevTool control={control} />
       <Card className={s.card}>
-        <Typography variant="large" className={s.title}>
+        <Typography className={s.title} variant={'large'}>
           Sign In
         </Typography>
         <form onSubmit={handleFormSubmitted}>
           <div className={s.form}>
             <ControlledTextField
-              placeholder={'Email'}
+              control={control}
               label={'Email'}
               name={'email'}
-              control={control}
+              placeholder={'Email'}
             />
             <ControlledTextField
-              placeholder={'Password'}
-              label={'Password'}
-              type={'password'}
-              name={'password'}
               control={control}
+              label={'Password'}
+              name={'password'}
+              placeholder={'Password'}
+              type={'password'}
             />
           </div>
           <ControlledCheckbox
             className={s.checkbox}
-            label={'Remember me'}
             control={control}
+            label={'Remember me'}
             name={'rememberMe'}
             position={'left'}
           />
           <Typography
-            variant="body2"
             as={Link}
-            to="/recover-password"
             className={s.recoverPasswordLink}
+            to={'/recover-password'}
+            variant={'body2'}
           >
             Forgot Password?
           </Typography>
@@ -75,10 +75,10 @@ export const SignIn = (props: Props) => {
             Sign In
           </Button>
         </form>
-        <Typography className={s.caption} variant="body2">
+        <Typography className={s.caption} variant={'body2'}>
           {`Don't have an account?`}
         </Typography>
-        <Typography variant="link1" as={Link} to="/sign-up" className={s.signUpLink}>
+        <Typography as={Link} className={s.signUpLink} to={'/sign-up'} variant={'link1'}>
           Sign Up
         </Typography>
       </Card>

src/components/auth/sign-up/sign-up.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { SignUp } from './'
 
 const meta = {
-  title: 'Auth/Sign up',
   component: SignUp,
   tags: ['autodocs'],
+  title: 'Auth/Sign up',
 } satisfies Meta<typeof SignUp>
 
 export default meta

src/components/auth/sign-up/sign-up.tsx

@@ -1,11 +1,11 @@
-import { DevTool } from '@hookform/devtools'
-import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
-import { omit } from 'remeda'
-import { z } from 'zod'
 
 import { Button, Card, ControlledTextField, Typography } from '../../ui'
+import { DevTool } from '@hookform/devtools'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { omit } from 'remeda'
+import { z } from 'zod'
 
 import s from './sign-up.module.scss'
 
@@ -18,8 +18,8 @@ const schema = z
   .superRefine((data, ctx) => {
     if (data.password !== data.passwordConfirmation) {
       ctx.addIssue({
-        message: 'Passwords do not match',
         code: z.ZodIssueCode.custom,
+        message: 'Passwords do not match',
         path: ['passwordConfirmation'],
       })
     }
@@ -35,13 +35,13 @@ type Props = {
 
 export const SignUp = (props: Props) => {
   const { control, handleSubmit } = useForm<FormType>({
-    mode: 'onSubmit',
-    resolver: zodResolver(schema),
     defaultValues: {
       email: '',
       password: '',
       passwordConfirmation: '',
     },
+    mode: 'onSubmit',
+    resolver: zodResolver(schema),
   })
 
   const handleFormSubmitted = handleSubmit(data =>
@@ -52,30 +52,30 @@ export const SignUp = (props: Props) => {
     <>
       <DevTool control={control} />
       <Card className={s.card}>
-        <Typography variant="large" className={s.title}>
+        <Typography className={s.title} variant={'large'}>
           Sign Up
         </Typography>
         <form onSubmit={handleFormSubmitted}>
           <div className={s.form}>
             <ControlledTextField
+              control={control}
               label={'Email'}
-              placeholder={'Email'}
               name={'email'}
-              control={control}
+              placeholder={'Email'}
             />
             <ControlledTextField
-              placeholder={'Password'}
+              control={control}
               label={'Password'}
-              type={'password'}
               name={'password'}
-              control={control}
+              placeholder={'Password'}
+              type={'password'}
             />
             <ControlledTextField
-              placeholder={'Confirm password'}
-              label={'Confirm password'}
-              type={'password'}
-              name={'passwordConfirmation'}
               control={control}
+              label={'Confirm password'}
+              name={'passwordConfirmation'}
+              placeholder={'Confirm password'}
+              type={'password'}
             />
           </div>
           <Button className={s.button} fullWidth type={'submit'}>
@@ -83,10 +83,10 @@ export const SignUp = (props: Props) => {
           </Button>
         </form>
         {/* eslint-disable-next-line react/no-unescaped-entities */}
-        <Typography variant="body2" className={s.caption}>
+        <Typography className={s.caption} variant={'body2'}>
           Already have an account?
         </Typography>
-        <Typography variant="link1" as={Link} to="/sign-in" className={s.signInLink}>
+        <Typography as={Link} className={s.signInLink} to={'/sign-in'} variant={'link1'}>
           Sign In
         </Typography>
       </Card>

src/components/decks/cards-table.tsx

@@ -5,23 +5,23 @@ import { formatDate } from '@/utils'
 const columns: Column[] = [
   {
     key: 'question',
-    title: 'Question',
     sortable: true,
+    title: 'Question',
   },
   {
     key: 'answer',
-    title: 'Answer',
     sortable: true,
+    title: 'Answer',
   },
   {
     key: 'updated',
-    title: 'Last Updated',
     sortable: true,
+    title: 'Last Updated',
   },
   {
     key: 'grade',
-    title: 'Grade',
     sortable: true,
+    title: 'Grade',
   },
 ]
 

src/components/decks/deck-dialog/deck-dialog.stories.tsx

@@ -1,15 +1,13 @@
 import { useState } from 'react'
 
+import { DeckDialog } from './'
+import { Button } from '@/components'
 import { Meta, StoryObj } from '@storybook/react'
 
-import { DeckDialog } from './'
-
-import { Button } from '@/components'
-
 const meta = {
-  title: 'Decks/Deck Dialog',
   component: DeckDialog,
   tags: ['autodocs'],
+  title: 'Decks/Deck Dialog',
 } satisfies Meta<typeof DeckDialog>
 
 export default meta
@@ -17,8 +15,8 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    open: true,
     onOpenChange: () => {},
+    open: true,
   },
   render: args => {
     const [open, setOpen] = useState(false)
@@ -29,13 +27,13 @@ export const Default: Story = {
         <Button onClick={() => setOpen(true)}>Open Modal</Button>
         <DeckDialog
           {...args}
-          onOpenChange={setOpen}
-          open={open}
           onCancel={closeModal}
           onConfirm={data => {
             console.log(data)
             closeModal()
           }}
+          onOpenChange={setOpen}
+          open={open}
         />
       </>
     )
@@ -44,8 +42,8 @@ export const Default: Story = {
 
 export const WithDefaultValues: Story = {
   args: {
-    open: true,
     onOpenChange: () => {},
+    open: true,
   },
   render: args => {
     const [open, setOpen] = useState(false)
@@ -57,16 +55,16 @@ export const WithDefaultValues: Story = {
         <DeckDialog
           {...args}
           defaultValues={{
-            name: 'some name',
             isPrivate: true,
+            name: 'some name',
           }}
-          onOpenChange={setOpen}
-          open={open}
           onCancel={closeModal}
           onConfirm={data => {
             console.log(data)
             closeModal()
           }}
+          onOpenChange={setOpen}
+          open={open}
         />
       </>
     )

src/components/decks/deck-dialog/deck-dialog.tsx

@@ -1,31 +1,31 @@
-import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+
+import { ControlledCheckbox, ControlledTextField, Dialog, DialogProps } from '@/components'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
 import s from './deck-dialog.module.scss'
 
-import { ControlledCheckbox, ControlledTextField, Dialog, DialogProps } from '@/components'
-
 const newDeckSchema = z.object({
-  name: z.string().min(3).max(50),
   isPrivate: z.boolean(),
+  name: z.string().min(3).max(50),
 })
 
 type FormValues = z.infer<typeof newDeckSchema>
 
-type Props = Pick<DialogProps, 'onOpenChange' | 'open' | 'onCancel'> & {
+type Props = Pick<DialogProps, 'onCancel' | 'onOpenChange' | 'open'> & {
-  onConfirm: (data: FormValues) => void
   defaultValues?: FormValues
+  onConfirm: (data: FormValues) => void
 }
 export const DeckDialog = ({
-  onConfirm,
-  onCancel,
   defaultValues = { isPrivate: false, name: '' },
+  onCancel,
+  onConfirm,
   ...dialogProps
 }: Props) => {
   const { control, handleSubmit, reset } = useForm<FormValues>({
-    resolver: zodResolver(newDeckSchema),
     defaultValues,
+    resolver: zodResolver(newDeckSchema),
   })
   const onSubmit = handleSubmit(data => {
     onConfirm(data)
@@ -38,13 +38,13 @@ export const DeckDialog = ({
   }
 
   return (
-    <Dialog {...dialogProps} title={'Create new deck'} onConfirm={onSubmit} onCancel={handleCancel}>
+    <Dialog {...dialogProps} onCancel={handleCancel} onConfirm={onSubmit} title={'Create new deck'}>
       <form className={s.content} onSubmit={onSubmit}>
-        <ControlledTextField name={'name'} control={control} label={'Deck name'} />
+        <ControlledTextField control={control} label={'Deck name'} name={'name'} />
         <ControlledCheckbox
-          name={'isPrivate'}
           control={control}
           label={'Private'}
+          name={'isPrivate'}
           position={'left'}
         />
       </form>

src/components/decks/decks-table.tsx

@@ -1,7 +1,5 @@
 import { Link } from 'react-router-dom'
 
-import s from './decks-table.module.scss'
-
 import { Edit2Outline, PlayCircleOutline, TrashOutline } from '@/assets'
 import {
   Button,
@@ -15,6 +13,8 @@ import {
 } from '@/components'
 import { Deck } from '@/services/decks'
 import { formatDate } from '@/utils'
+
+import s from './decks-table.module.scss'
 const columns: Column[] = [
   {
     key: 'name',
@@ -39,12 +39,12 @@ const columns: Column[] = [
 ]
 
 type Props = {
+  currentUserId: string
   decks: Deck[] | undefined
   onDeleteClick: (id: string) => void
-  currentUserId: string
   onEditClick: (id: string) => void
 }
-export const DecksTable = ({ decks, onEditClick, onDeleteClick, currentUserId }: Props) => {
+export const DecksTable = ({ currentUserId, decks, onDeleteClick, onEditClick }: Props) => {
   const handleEditClick = (id: string) => () => onEditClick(id)
   const handleDeleteClick = (id: string) => () => onDeleteClick(id)
 
@@ -55,7 +55,7 @@ export const DecksTable = ({ decks, onEditClick, onDeleteClick, currentUserId }:
         {decks?.map(deck => (
           <TableRow key={deck.id}>
             <TableCell>
-              <Typography variant={'body2'} as={Link} to={`/decks/${deck.id}`}>
+              <Typography as={Link} to={`/decks/${deck.id}`} variant={'body2'}>
                 {deck.name}
               </Typography>
             </TableCell>
@@ -64,15 +64,15 @@ export const DecksTable = ({ decks, onEditClick, onDeleteClick, currentUserId }:
             <TableCell>{deck.author.name}</TableCell>
             <TableCell>
               <div className={s.iconsContainer}>
-                <Button variant={'icon'} as={Link} to={`/decks/${deck.id}/learn`}>
+                <Button as={Link} to={`/decks/${deck.id}/learn`} variant={'icon'}>
                   <PlayCircleOutline />
                 </Button>
                 {deck.author.id === currentUserId && (
                   <>
-                    <Button variant={'icon'} onClick={handleEditClick(deck.id)}>
+                    <Button onClick={handleEditClick(deck.id)} variant={'icon'}>
                       <Edit2Outline />
                     </Button>
-                    <Button variant={'icon'} onClick={handleDeleteClick(deck.id)}>
+                    <Button onClick={handleDeleteClick(deck.id)} variant={'icon'}>
                       <TrashOutline />
                     </Button>
                   </>

src/components/decks/delete-deck-dialog/delete-deck-dialog.stories.tsx

@@ -1,15 +1,13 @@
 import { useState } from 'react'
 
+import { DeleteDeckDialog } from './'
+import { Button } from '@/components'
 import { Meta, StoryObj } from '@storybook/react'
 
-import { DeleteDeckDialog } from './'
-
-import { Button } from '@/components'
-
 const meta = {
-  title: 'Decks/Delete Deck Dialog',
   component: DeleteDeckDialog,
   tags: ['autodocs'],
+  title: 'Decks/Delete Deck Dialog',
 } satisfies Meta<typeof DeleteDeckDialog>
 
 export default meta
@@ -18,8 +16,8 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     deckName: 'Deck Name',
-    open: true,
     onOpenChange: () => {},
+    open: true,
   },
   render: args => {
     const [open, setOpen] = useState(false)
@@ -30,10 +28,10 @@ export const Default: Story = {
         <Button onClick={() => setOpen(true)}>Open Modal</Button>
         <DeleteDeckDialog
           {...args}
-          onOpenChange={setOpen}
-          open={open}
           onCancel={closeModal}
           onConfirm={closeModal}
+          onOpenChange={setOpen}
+          open={open}
         />
       </>
     )

src/components/decks/delete-deck-dialog/delete-deck-dialog.tsx

@@ -1,8 +1,8 @@
-import s from './delete-deck-dialog.module.scss'
-
 import { Dialog, DialogProps } from '@/components'
+
+import s from './delete-deck-dialog.module.scss'
 export default {}
-type Props = Pick<DialogProps, 'onConfirm' | 'onCancel' | 'open' | 'onOpenChange'> & {
+type Props = Pick<DialogProps, 'onCancel' | 'onConfirm' | 'onOpenChange' | 'open'> & {
   deckName: string
 }
 export const DeleteDeckDialog = ({ deckName, ...dialogProps }: Props) => {

src/components/profile/personal-information/personal-information.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { PersonalInformation } from './'
 
 const meta = {
-  title: 'Profile/Personal information',
   component: PersonalInformation,
   tags: ['autodocs'],
+  title: 'Profile/Personal information',
 } satisfies Meta<typeof PersonalInformation>
 
 export default meta
@@ -13,17 +13,17 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    email: 'your_email@domain.com',
     avatar: 'https://picsum.photos/200',
+    email: 'your_email@domain.com',
     name: 'John Doe',
     onAvatarChange: () => {
       console.info('avatar changed')
     },
-    onNameChange: () => {
-      console.info('name changed')
-    },
     onLogout: () => {
       console.info('logout')
     },
+    onNameChange: () => {
+      console.info('name changed')
+    },
   },
 }

src/components/profile/personal-information/personal-information.tsx

@@ -4,11 +4,11 @@ import { Button, Card, Typography } from '../../ui'
 import s from './personal-information.module.scss'
 
 type Props = {
-  email: string
   avatar: string
+  email: string
   name: string
-  onLogout: () => void
   onAvatarChange: (newAvatar: string) => void
+  onLogout: () => void
   onNameChange: (newName: string) => void
 }
 export const PersonalInformation = ({
@@ -16,8 +16,8 @@ export const PersonalInformation = ({
   email,
   name,
   onAvatarChange,
-  onNameChange,
   onLogout,
+  onNameChange,
 }: Props) => {
   const handleAvatarChanged = () => {
     onAvatarChange('new Avatar')
@@ -31,31 +31,31 @@ export const PersonalInformation = ({
 
   return (
     <Card className={s.card}>
-      <Typography variant="large" className={s.title}>
+      <Typography className={s.title} variant={'large'}>
         Personal Information
       </Typography>
       <div className={s.photoContainer}>
         <div>
-          <img src={avatar} alt={'avatar'} />
+          <img alt={'avatar'} src={avatar} />
           <button className={s.editAvatarButton} onClick={handleAvatarChanged}>
             <Camera />
           </button>
         </div>
       </div>
       <div className={s.nameWithEditButton}>
-        <Typography variant="h1" className={s.name}>
+        <Typography className={s.name} variant={'h1'}>
           {name}
         </Typography>
         <button className={s.editNameButton} onClick={handleNameChanged}>
           <Edit />
         </button>
       </div>
-      <Typography variant="body2" className={s.email}>
+      <Typography className={s.email} variant={'body2'}>
         {/* eslint-disable-next-line react/no-unescaped-entities */}
         {email}
       </Typography>
       <div className={s.buttonContainer}>
-        <Button variant={'secondary'} onClick={handleLogout}>
+        <Button onClick={handleLogout} variant={'secondary'}>
           <Logout />
           Sign Out
         </Button>

src/components/ui/button/button.stories.tsx

@@ -3,15 +3,15 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Button } from './'
 
 const meta = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
   argTypes: {
     variant: {
-      options: ['primary', 'secondary', 'tertiary', 'link'],
       control: { type: 'radio' },
+      options: ['primary', 'secondary', 'tertiary', 'link'],
     },
   },
+  component: Button,
+  tags: ['autodocs'],
+  title: 'Components/Button',
 } satisfies Meta<typeof Button>
 
 export default meta
@@ -19,47 +19,47 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   args: {
-    variant: 'primary',
     children: 'Primary Button',
     disabled: false,
+    variant: 'primary',
   },
 }
 
 export const Secondary: Story = {
   args: {
-    variant: 'secondary',
     children: 'Secondary Button',
     disabled: false,
+    variant: 'secondary',
   },
 }
 export const Tertiary: Story = {
   args: {
-    variant: 'tertiary',
     children: 'Tertiary Button',
     disabled: false,
+    variant: 'tertiary',
   },
 }
 export const Link: Story = {
   args: {
-    variant: 'link',
     children: 'Tertiary Button',
     disabled: false,
+    variant: 'link',
   },
 }
 
 export const FullWidth: Story = {
   args: {
-    variant: 'primary',
     children: 'Full Width Button',
     disabled: false,
     fullWidth: true,
+    variant: 'primary',
   },
 }
 
 export const AsLink: Story = {
   args: {
-    variant: 'primary',
-    children: 'Link that looks like a button',
     as: 'a',
+    children: 'Link that looks like a button',
+    variant: 'primary',
   },
 }

src/components/ui/button/button.tsx

@@ -5,13 +5,13 @@ import s from './button.module.scss'
 export type ButtonProps<T extends ElementType = 'button'> = {
   as?: T
   children: ReactNode
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'link' | 'icon'
-  fullWidth?: boolean
   className?: string
+  fullWidth?: boolean
+  variant?: 'icon' | 'link' | 'primary' | 'secondary' | 'tertiary'
 } & ComponentPropsWithoutRef<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 (
     <Component className={`${s[variant]} ${fullWidth ? s.fullWidth : ''} ${className}`} {...rest} />

src/components/ui/card/card.stories.tsx

@@ -1,13 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Card } from './'
-
 import { Typography } from '@/components'
 
 const meta = {
-  title: 'Components/Card',
   component: Card,
   tags: ['autodocs'],
+  title: 'Components/Card',
 } satisfies Meta<typeof Card>
 
 export default meta
@@ -17,9 +16,9 @@ export const Default: Story = {
   args: {
     children: <Typography variant={'large'}>Card</Typography>,
     style: {
-      width: '300px',
       height: '300px',
       padding: '24px',
+      width: '300px',
     },
   },
 }

src/components/ui/card/card.tsx

@@ -11,5 +11,5 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...restP
     root: clsx(s.root, className),
   }
 
-  return <div ref={ref} className={classNames.root} {...restProps}></div>
+  return <div className={classNames.root} ref={ref} {...restProps}></div>
 })

src/components/ui/checkbox/checkbox.stories.tsx

@@ -1,12 +1,11 @@
 import { useState } from 'react'
 
-import { Meta, StoryObj } from '@storybook/react'
-
 import { Checkbox } from './checkbox'
+import { Meta, StoryObj } from '@storybook/react'
 const meta = {
-  title: 'Components/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
+  title: 'Components/Checkbox',
 } satisfies Meta<typeof Checkbox>
 
 export default meta
@@ -14,8 +13,8 @@ export default meta
 type Story = StoryObj<typeof meta>
 export const Uncontrolled: Story = {
   args: {
-    label: 'Click here',
     disabled: false,
+    label: 'Click here',
   },
 }
 
@@ -26,8 +25,8 @@ export const Controlled: Story = {
     return (
       <Checkbox
         {...args}
-        label="Click here"
         checked={checked}
+        label={'Click here'}
         onChange={() => setChecked(!checked)}
       />
     )

src/components/ui/checkbox/checkbox.tsx

@@ -1,55 +1,54 @@
 import { FC } from 'react'
 
+import { Check } from '@/assets/icons'
+import { Typography } from '@/components'
 import * as CheckboxRadix from '@radix-ui/react-checkbox'
 import * as LabelRadix from '@radix-ui/react-label'
 import { clsx } from 'clsx'
 
 import s from './checkbox.module.scss'
 
-import { Check } from '@/assets/icons'
-import { Typography } from '@/components'
-
 export type CheckboxProps = {
-  className?: string
   checked?: boolean
-  onChange?: (checked: boolean) => void
+  className?: string
   disabled?: boolean
-  required?: boolean
-  label?: string
   id?: string
+  label?: string
+  onChange?: (checked: boolean) => void
   position?: 'left'
+  required?: boolean
 }
 
 export const Checkbox: FC<CheckboxProps> = ({
   checked,
+  className,
+  disabled,
+  id,
+  label,
   onChange,
   position,
-  disabled,
   required,
-  label,
-  id,
-  className,
 }) => {
   const classNames = {
-    container: clsx(s.container, className),
     buttonWrapper: clsx(s.buttonWrapper, disabled && s.disabled, position === 'left' && s.left),
-    root: s.root,
+    container: clsx(s.container, className),
     indicator: s.indicator,
     label: clsx(s.label, disabled && s.disabled),
+    root: s.root,
   }
 
   return (
     <div className={classNames.container}>
       <LabelRadix.Root asChild>
-        <Typography variant="body2" className={classNames.label} as={'label'}>
+        <Typography as={'label'} className={classNames.label} variant={'body2'}>
           <div className={classNames.buttonWrapper}>
             <CheckboxRadix.Root
-              className={classNames.root}
               checked={checked}
-              onCheckedChange={onChange}
+              className={classNames.root}
               disabled={disabled}
-              required={required}
               id={id}
+              onCheckedChange={onChange}
+              required={required}
             >
               {checked && (
                 <CheckboxRadix.Indicator className={classNames.indicator} forceMount>

src/components/ui/controlled/controlled-checkbox/controlled-checkbox.tsx

@@ -1,34 +1,34 @@
-import { FieldValues, useController, UseControllerProps } from 'react-hook-form'
+import { FieldValues, UseControllerProps, useController } from 'react-hook-form'
 
 import { Checkbox, CheckboxProps } from '../../'
 
 export type ControlledCheckboxProps<TFieldValues extends FieldValues> =
-  UseControllerProps<TFieldValues> & Omit<CheckboxProps, 'onChange' | 'value' | 'id'>
+  UseControllerProps<TFieldValues> & Omit<CheckboxProps, 'id' | 'onChange' | 'value'>
 
 export const ControlledCheckbox = <TFieldValues extends FieldValues>({
+  control,
+  defaultValue,
   name,
   rules,
   shouldUnregister,
-  control,
-  defaultValue,
   ...checkboxProps
 }: ControlledCheckboxProps<TFieldValues>) => {
   const {
     field: { onChange, value },
   } = useController({
+    control,
+    defaultValue,
     name,
     rules,
     shouldUnregister,
-    control,
-    defaultValue,
   })
 
   return (
     <Checkbox
       {...{
-        onChange,
         checked: value,
         id: name,
+        onChange,
         ...checkboxProps,
       }}
     />

src/components/ui/controlled/controlled-radio-group/controlled-radio-group.tsx

@@ -3,9 +3,9 @@ import { Control, FieldPath, FieldValues, useController } from 'react-hook-form'
 import { RadioGroup, RadioGroupProps } from '@/components/ui'
 
 export type ControlledRadioGroupProps<TFieldValues extends FieldValues> = {
-  name: FieldPath<TFieldValues>
   control: Control<TFieldValues>
-} & Omit<RadioGroupProps, 'onChange' | 'value' | 'id'>
+  name: FieldPath<TFieldValues>
+} & Omit<RadioGroupProps, 'id' | 'onChange' | 'value'>
 
 export const ControlledRadioGroup = <TFieldValues extends FieldValues>(
   props: ControlledRadioGroupProps<TFieldValues>
@@ -14,17 +14,17 @@ export const ControlledRadioGroup = <TFieldValues extends FieldValues>(
     field: { onChange, ...field },
     fieldState: { error },
   } = useController({
-    name: props.name,
     control: props.control,
+    name: props.name,
   })
 
   return (
     <RadioGroup
       {...props}
       {...field}
-      onValueChange={onChange}
       errorMessage={error?.message}
       id={props.name}
+      onValueChange={onChange}
     />
   )
 }

src/components/ui/controlled/controlled-text-field/controlled-text-field.tsx

@@ -3,9 +3,9 @@ import { Control, FieldPath, FieldValues, useController } from 'react-hook-form'
 import { TextField, TextFieldProps } from '@/components'
 
 export type ControlledTextFieldProps<TFieldValues extends FieldValues> = {
-  name: FieldPath<TFieldValues>
   control: Control<TFieldValues>
-} & Omit<TextFieldProps, 'onChange' | 'value' | 'id'>
+  name: FieldPath<TFieldValues>
+} & Omit<TextFieldProps, 'id' | 'onChange' | 'value'>
 
 export const ControlledTextField = <TFieldValues extends FieldValues>(
   props: ControlledTextFieldProps<TFieldValues>
@@ -14,8 +14,8 @@ export const ControlledTextField = <TFieldValues extends FieldValues>(
     field,
     fieldState: { error },
   } = useController({
-    name: props.name,
     control: props.control,
+    name: props.name,
   })
 
   return <TextField {...props} {...field} errorMessage={error?.message} id={props.name} />

src/components/ui/dialog/dialog.stories.tsx

@@ -1,13 +1,12 @@
 import { useState } from 'react'
 
+import { Dialog } from './'
 import { Meta, StoryObj } from '@storybook/react'
 
-import { Dialog } from './'
-
 const meta = {
-  title: 'Components/Dialog',
   component: Dialog,
   tags: ['autodocs'],
+  title: 'Components/Dialog',
 } satisfies Meta<typeof Dialog>
 
 export default meta
@@ -15,10 +14,10 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    open: true,
-    onOpenChange: () => {},
-    title: 'Modal',
     children: 'Modal',
+    onOpenChange: () => {},
+    open: true,
+    title: 'Modal',
   },
   render: args => {
     const [open, setOpen] = useState(false)

src/components/ui/dialog/dialog.tsx

@@ -1,26 +1,26 @@
-import s from './dialog.module.scss'
-
 import { Button, Modal, ModalProps } from '@/components'
 
+import s from './dialog.module.scss'
+
 export type DialogProps = ModalProps & {
-  confirmText?: string
   cancelText?: string
-  onConfirm?: () => void
+  confirmText?: string
   onCancel?: () => void
+  onConfirm?: () => void
 }
 export const Dialog = ({
+  cancelText = 'Cancel',
   children,
+  confirmText = 'OK',
   onCancel,
   onConfirm,
-  confirmText = 'OK',
-  cancelText = 'Cancel',
   ...modalProps
 }: DialogProps) => {
   return (
     <Modal {...modalProps}>
       {children}
       <div className={s.buttons}>
-        <Button variant={'secondary'} onClick={onCancel}>
+        <Button onClick={onCancel} variant={'secondary'}>
           {cancelText}
         </Button>
         <Button onClick={onConfirm}>{confirmText}</Button>

src/components/ui/label/label.tsx

@@ -9,7 +9,7 @@ export type LabelProps = {
   label?: ReactNode
 } & ComponentPropsWithoutRef<'label'>
 
-export const Label: FC<LabelProps> = ({ label, children, className, ...rest }) => {
+export const Label: FC<LabelProps> = ({ children, className, label, ...rest }) => {
   const classNames = {
     label: clsx(s.label, className),
   }

src/components/ui/modal/modal.stories.tsx

@@ -1,13 +1,12 @@
 import { useState } from 'react'
 
+import { Modal } from '@/components'
 import { Meta, StoryObj } from '@storybook/react'
 
-import { Modal } from '@/components'
-
 const meta = {
-  title: 'Components/Modal',
   component: Modal,
   tags: ['autodocs'],
+  title: 'Components/Modal',
 } satisfies Meta<typeof Modal>
 
 export default meta
@@ -15,10 +14,10 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    open: true,
-    onOpenChange: () => {},
-    title: 'Modal',
     children: 'Modal',
+    onOpenChange: () => {},
+    open: true,
+    title: 'Modal',
   },
   render: args => {
     const [open, setOpen] = useState(false)

src/components/ui/modal/modal.tsx

@@ -1,18 +1,17 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
 
+import { Close } from '@/assets'
+import { Typography } from '@/components'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 
 import s from './modal.module.scss'
 
-import { Close } from '@/assets'
-import { Typography } from '@/components'
-
 export type ModalProps = {
-  title?: string
-  open: boolean
-  onOpenChange: (open: boolean) => void
   children: ReactNode
-} & Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Dialog>, 'open' | 'onOpenChange'>
+  onOpenChange: (open: boolean) => void
+  open: boolean
+  title?: string
+} & Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Dialog>, 'onOpenChange' | 'open'>
 export const Modal = ({ children, title, ...props }: ModalProps) => {
   return (
     <DialogPrimitive.Root {...props}>
@@ -21,7 +20,7 @@ export const Modal = ({ children, title, ...props }: ModalProps) => {
         <DialogPrimitive.Content className={s.content}>
           <div className={s.header}>
             <DialogPrimitive.Title asChild>
-              <Typography variant={'h2'} as={'h2'}>
+              <Typography as={'h2'} variant={'h2'}>
                 {title}
               </Typography>
             </DialogPrimitive.Title>

src/components/ui/page/page.tsx

@@ -11,5 +11,5 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(({ className, ...props
     root: clsx(s.root, className),
   }
 
-  return <div {...props} ref={ref} className={classNames.root} />
+  return <div {...props} className={classNames.root} ref={ref} />
 })

src/components/ui/pagination/pagination.tsx

@@ -1,67 +1,66 @@
 import { FC } from 'react'
 
+import { usePagination } from './usePagination'
+import { KeyboardArrowLeft, KeyboardArrowRight } from '@/assets'
 import { clsx } from 'clsx'
 
 import s from './pagination.module.scss'
-import { usePagination } from './usePagination'
-
-import { KeyboardArrowLeft, KeyboardArrowRight } from '@/assets'
 
 type PaginationConditionals =
   | {
-      perPage?: null
+      onPerPageChange: (itemPerPage: number) => void
-      perPageOptions?: never
-      onPerPageChange?: never
-    }
-  | {
       perPage: number
       perPageOptions: number[]
-      onPerPageChange: (itemPerPage: number) => void
+    }
+  | {
+      onPerPageChange?: never
+      perPage?: null
+      perPageOptions?: never
     }
 
 export type PaginationProps = {
   count: number
-  page: number
   onChange: (page: number) => void
-  siblings?: number
+  onPerPageChange?: (itemPerPage: number) => void
+  page: number
   perPage?: number
   perPageOptions?: number[]
-  onPerPageChange?: (itemPerPage: number) => void
+  siblings?: number
 } & PaginationConditionals
 
 const classNames = {
-  root: s.root,
   container: s.container,
-  selectBox: s.selectBox,
-  select: s.select,
-  item: s.item,
   dots: s.dots,
   icon: s.icon,
+  item: s.item,
   pageButton(selected?: boolean) {
     return clsx(this.item, selected && s.selected)
   },
+  root: s.root,
+  select: s.select,
+  selectBox: s.selectBox,
 }
 
 export const Pagination: FC<PaginationProps> = ({
-  onChange,
   count,
+  onChange,
+  onPerPageChange,
   page,
   perPage = null,
   perPageOptions,
-  onPerPageChange,
   siblings,
 }) => {
   const {
-    paginationRange,
-    isLastPage,
-    isFirstPage,
-    handlePreviousPageClicked,
-    handleNextPageClicked,
     handleMainPageClicked,
+    handleNextPageClicked,
+    handlePreviousPageClicked,
+    isFirstPage,
+    isLastPage,
+    paginationRange,
   } = usePagination({
-    page,
     count,
     onChange,
+    page,
     siblings,
   })
 
@@ -70,7 +69,7 @@ export const Pagination: FC<PaginationProps> = ({
   return (
     <div className={classNames.root}>
       <div className={classNames.container}>
-        <PrevButton onClick={handlePreviousPageClicked} disabled={isFirstPage} />
+        <PrevButton disabled={isFirstPage} onClick={handlePreviousPageClicked} />
 
         <MainPaginationButtons
           currentPage={page}
@@ -78,15 +77,15 @@ export const Pagination: FC<PaginationProps> = ({
           paginationRange={paginationRange}
         />
 
-        <NextButton onClick={handleNextPageClicked} disabled={isLastPage} />
+        <NextButton disabled={isLastPage} onClick={handleNextPageClicked} />
       </div>
 
       {showPerPageSelect && (
         <PerPageSelect
           {...{
+            onPerPageChange,
             perPage,
             perPageOptions,
-            onPerPageChange,
           }}
         />
       )}
@@ -95,8 +94,8 @@ export const Pagination: FC<PaginationProps> = ({
 }
 
 type NavigationButtonProps = {
-  onClick: () => void
   disabled?: boolean
+  onClick: () => void
 }
 
 type PageButtonProps = NavigationButtonProps & {
@@ -107,43 +106,43 @@ type PageButtonProps = NavigationButtonProps & {
 const Dots: FC = () => {
   return <span className={classNames.dots}>&#8230;</span>
 }
-const PageButton: FC<PageButtonProps> = ({ onClick, disabled, selected, page }) => {
+const PageButton: FC<PageButtonProps> = ({ disabled, onClick, page, selected }) => {
   return (
     <button
-      onClick={onClick}
-      disabled={selected || disabled}
       className={classNames.pageButton(selected)}
+      disabled={selected || disabled}
+      onClick={onClick}
     >
       {page}
     </button>
   )
 }
-const PrevButton: FC<NavigationButtonProps> = ({ onClick, disabled }) => {
+const PrevButton: FC<NavigationButtonProps> = ({ disabled, onClick }) => {
   return (
-    <button className={classNames.item} onClick={onClick} disabled={disabled}>
+    <button className={classNames.item} disabled={disabled} onClick={onClick}>
       <KeyboardArrowLeft className={classNames.icon} />
     </button>
   )
 }
 
-const NextButton: FC<NavigationButtonProps> = ({ onClick, disabled }) => {
+const NextButton: FC<NavigationButtonProps> = ({ disabled, onClick }) => {
   return (
-    <button className={classNames.item} onClick={onClick} disabled={disabled}>
+    <button className={classNames.item} disabled={disabled} onClick={onClick}>
       <KeyboardArrowRight className={classNames.icon} />
     </button>
   )
 }
 
 type MainPaginationButtonsProps = {
-  paginationRange: (number | string)[]
   currentPage: number
   onClick: (pageNumber: number) => () => void
+  paginationRange: (number | string)[]
 }
 
 const MainPaginationButtons: FC<MainPaginationButtonsProps> = ({
-  paginationRange,
   currentPage,
   onClick,
+  paginationRange,
 }) => {
   return (
     <>
@@ -154,16 +153,16 @@ const MainPaginationButtons: FC<MainPaginationButtonsProps> = ({
           return <Dots key={index} />
         }
 
-        return <PageButton key={index} page={page} selected={isSelected} onClick={onClick(page)} />
+        return <PageButton key={index} onClick={onClick(page)} page={page} selected={isSelected} />
       })}
     </>
   )
 }
 
 export type PerPageSelectProps = {
+  onPerPageChange: (itemPerPage: number) => void
   perPage: number
   perPageOptions: number[]
-  onPerPageChange: (itemPerPage: number) => void
 }
 
 export const PerPageSelect: FC<PerPageSelectProps> = (

src/components/ui/radio-group/radio-group.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { RadioGroup } from './'
 
 const meta = {
-  title: 'Components/Radio Group',
   component: RadioGroup,
   tags: ['autodocs'],
+  title: 'Components/Radio Group',
 } satisfies Meta<typeof RadioGroup>
 
 export default meta
@@ -22,10 +22,10 @@ export const Default: Story = {
 
 export const Disabled: Story = {
   args: {
+    disabled: true,
     options: [
       { label: 'Option One', value: 'option-one' },
       { label: 'Option Two', value: 'option-two' },
     ],
-    disabled: true,
   },
 }

src/components/ui/radio-group/radio-group.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
 
+import { Typography } from '@/components'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { clsx } from 'clsx'
 
 import s from './radio-group.module.scss'
 
-import { Typography } from '@/components'
-
 const RadioGroupRoot = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
@@ -19,9 +18,9 @@ RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, children, ...props }, ref) => {
+>(({ children, className, ...props }, ref) => {
   return (
-    <RadioGroupPrimitive.Item ref={ref} className={clsx(s.option, className)} {...props}>
+    <RadioGroupPrimitive.Item className={clsx(s.option, className)} ref={ref} {...props}>
       <div className={s.icon}></div>
     </RadioGroupPrimitive.Item>
   )
@@ -37,21 +36,21 @@ export type RadioGroupProps = Omit<
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
   'children'
 > & {
-  options: Option[]
   errorMessage?: string
+  options: Option[]
 }
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   RadioGroupProps
 >((props, ref) => {
-  const { options, errorMessage, ...restProps } = props
+  const { errorMessage, options, ...restProps } = props
 
   return (
     <RadioGroupRoot {...restProps} ref={ref}>
       {options.map(option => (
         <div className={s.label} key={option.value}>
-          <RadioGroupItem value={option.value} id={option.value} />
+          <RadioGroupItem id={option.value} value={option.value} />
-          <Typography variant={'body2'} as={'label'} htmlFor={option.value}>
+          <Typography as={'label'} htmlFor={option.value} variant={'body2'}>
             {option.label}
           </Typography>
         </div>
@@ -60,4 +59,4 @@ const RadioGroup = React.forwardRef<
   )
 })
 
-export { RadioGroupRoot, RadioGroupItem, RadioGroup }
+export { RadioGroup, RadioGroupItem, RadioGroupRoot }

src/components/ui/slider/slider.tsx

@@ -9,24 +9,26 @@ const Slider = forwardRef<
   Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value'> & {
     value?: (number | undefined)[]
   }
->(({ className, value, ...props }, ref) => {
+>(({ className, max, onValueChange, value, ...props }, ref) => {
   useEffect(() => {
     if (value?.[1] === undefined || value?.[1] === null) {
-      props.onValueChange?.([value?.[0] ?? 0, props.max ?? 0])
+      onValueChange?.([value?.[0] ?? 0, max ?? 0])
     }
-  }, [props.max, value])
+  }, [max, value, onValueChange])
 
   return (
     <div className={s.container}>
       <span>{value?.[0]}</span>
       <SliderPrimitive.Root
-        ref={ref}
         className={clsx(s.root, className)}
+        max={max}
+        onValueChange={onValueChange}
+        ref={ref}
         {...props}
-        value={[value?.[0] ?? 0, value?.[1] ?? props.max ?? 0]}
+        value={[value?.[0] ?? 0, value?.[1] ?? max ?? 0]}
       >
         <SliderPrimitive.Track className={s.track}>
-          <SliderPrimitive.Range className="absolute h-full bg-primary" />
+          <SliderPrimitive.Range className={'absolute h-full bg-primary'} />
         </SliderPrimitive.Track>
         <SliderPrimitive.Thumb className={s.thumb} />
         <SliderPrimitive.Thumb className={s.thumb} />

src/components/ui/table/table.stories.tsx

@@ -1,12 +1,10 @@
+import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeadCell, TableRow } from './'
+import { Typography } from '@/components'
 import { Meta } from '@storybook/react'
 
-import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeadCell, TableRow } from './'
-
-import { Typography } from '@/components'
-
 export default {
-  title: 'Components/Table',
   component: Table,
+  title: 'Components/Table',
 } as Meta<typeof Table>
 
 export const Default = {
@@ -16,7 +14,7 @@ export const Default = {
         <TableHead>
           <TableRow>
             <TableHeadCell>Название</TableHeadCell>
-            <TableHeadCell align="center">Описание</TableHeadCell>
+            <TableHeadCell align={'center'}>Описание</TableHeadCell>
             <TableHeadCell>Ссылка</TableHeadCell>
             <TableHeadCell>Тип</TableHeadCell>
             <TableHeadCell>Вид</TableHeadCell>
@@ -34,9 +32,9 @@ export const Default = {
             <TableCell>
               <Typography
                 as={'a'}
+                href={'https://it-incubator.io/'}
+                target={'_blank'}
                 variant={'link1'}
-                href="https://it-incubator.io/"
-                target="_blank"
               >
                 Какая-то ссылка кудато на какой-то источник с информациейо ссылка кудато на какой-то
                 источник
@@ -69,27 +67,27 @@ export const Default = {
 
 const data = [
   {
+    category: 'Основной',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
     id: '01',
-    title: 'Web Basic',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
     link: 'Какая-то ссылка кудато на какой-то источник с информациейо ссылка кудато на какой-то',
-    category: 'Основной',
+    title: 'Web Basic',
     type: 'Читать',
   },
   {
+    category: 'Основной',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
     id: '02',
-    title: 'Web Basic',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
     link: 'Какая-то ссылка куда-то',
-    category: 'Основной',
+    title: 'Web Basic',
     type: 'Читать',
   },
   {
-    id: '03',
-    title: 'Web Basic',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
-    link: 'Какая-то ссылка кудато на какой-то источник с информациейо ссылка кудато на какой-то. Какая-то ссылка кудато на какой-то источник с информациейо ссылка куда-то на какой-то',
     category: 'Основной',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
+    id: '03',
+    link: 'Какая-то ссылка кудато на какой-то источник с информациейо ссылка кудато на какой-то. Какая-то ссылка кудато на какой-то источник с информациейо ссылка куда-то на какой-то',
+    title: 'Web Basic',
     type: 'Читать',
   },
 ]
@@ -101,7 +99,7 @@ export const WithMapMethod = {
         <TableHead>
           <TableRow>
             <TableHeadCell>Название</TableHeadCell>
-            <TableHeadCell align="center">Описание</TableHeadCell>
+            <TableHeadCell align={'center'}>Описание</TableHeadCell>
             <TableHeadCell>Ссылка</TableHeadCell>
             <TableHeadCell>Тип</TableHeadCell>
             <TableHeadCell>Вид</TableHeadCell>

src/components/ui/table/table.tsx

@@ -1,11 +1,10 @@
 import { ComponentProps, ComponentPropsWithoutRef, ElementRef, FC, forwardRef } from 'react'
 
+import { Typography } from '@/components'
 import { clsx } from 'clsx'
 
 import s from './table.module.scss'
 
-import { Typography } from '@/components'
-
 export const Table = forwardRef<HTMLTableElement, ComponentPropsWithoutRef<'table'>>(
   ({ className, ...rest }, ref) => {
     const classNames = {
@@ -34,7 +33,7 @@ export const TableRow = forwardRef<ElementRef<'tr'>, ComponentPropsWithoutRef<'t
 )
 
 export const TableHeadCell = forwardRef<ElementRef<'th'>, ComponentPropsWithoutRef<'th'>>(
-  ({ className, children, ...rest }, ref) => {
+  ({ children, className, ...rest }, ref) => {
     const classNames = {
       headCell: clsx(className, s.headCell),
     }
@@ -56,10 +55,10 @@ export const TableCell = forwardRef<ElementRef<'td'>, ComponentPropsWithoutRef<'
   }
 )
 
-export const TableEmpty: FC<ComponentProps<'div'> & { mt?: string; mb?: string }> = ({
+export const TableEmpty: FC<ComponentProps<'div'> & { mb?: string; mt?: string }> = ({
   className,
-  mt = '89px',
   mb,
+  mt = '89px',
 }) => {
   const classNames = {
     empty: clsx(className, s.empty),
@@ -67,9 +66,9 @@ export const TableEmpty: FC<ComponentProps<'div'> & { mt?: string; mb?: string }
 
   return (
     <Typography
-      variant={'h2'}
       className={classNames.empty}
-      style={{ marginTop: mt, marginBottom: mb }}
+      style={{ marginBottom: mb, marginTop: mt }}
+      variant={'h2'}
     >
       Пока тут еще нет данных! :(
     </Typography>
@@ -77,41 +76,47 @@ export const TableEmpty: FC<ComponentProps<'div'> & { mt?: string; mb?: string }
 }
 export type Column = {
   key: string
-  title: string
   sortable?: boolean
+  title: string
 }
 export type Sort = {
-  key: string
   direction: 'asc' | 'desc'
+  key: string
 } | null
 
 export const TableHeader: FC<
   Omit<
     ComponentPropsWithoutRef<'thead'> & {
       columns: Column[]
-      sort?: Sort
       onSort?: (sort: Sort) => void
+      sort?: Sort
     },
     'children'
   >
-> = ({ columns, sort, onSort, ...restProps }) => {
+> = ({ columns, onSort, sort, ...restProps }) => {
   const handleSort = (key: string, sortable?: boolean) => () => {
-    if (!onSort || !sortable) return
+    if (!onSort || !sortable) {
+      return
+    }
 
-    if (sort?.key !== key) return onSort({ key, direction: 'asc' })
+    if (sort?.key !== key) {
+      return onSort({ direction: 'asc', key })
+    }
 
-    if (sort.direction === 'desc') return onSort(null)
+    if (sort.direction === 'desc') {
+      return onSort(null)
+    }
 
     return onSort({
-      key,
       direction: sort?.direction === 'asc' ? 'desc' : 'asc',
+      key,
     })
   }
 
   return (
     <TableHead {...restProps}>
       <TableRow>
-        {columns.map(({ title, key, sortable = true }) => (
+        {columns.map(({ key, sortable = true, title }) => (
           <TableHeadCell key={key} onClick={handleSort(key, sortable)}>
             {title}
             {sort && sort.key === key && <span>{sort.direction === 'asc' ? '▲' : '▼'}</span>}

src/components/ui/tabs/tabs.tsx

@@ -11,7 +11,7 @@ const TabsList = forwardRef<
   ElementRef<typeof TabsPrimitive.List>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List ref={ref} className={clsx(s.list, className)} {...props} />
+  <TabsPrimitive.List className={clsx(s.list, className)} ref={ref} {...props} />
 ))
 
 TabsList.displayName = TabsPrimitive.List.displayName
@@ -20,7 +20,7 @@ const TabsTrigger = forwardRef<
   ElementRef<typeof TabsPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger ref={ref} className={clsx(s.trigger, className)} {...props} />
+  <TabsPrimitive.Trigger className={clsx(s.trigger, className)} ref={ref} {...props} />
 ))
 
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
@@ -29,9 +29,9 @@ const TabsContent = forwardRef<
   ElementRef<typeof TabsPrimitive.Content>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={clsx(s.content, className)} {...props} />
+  <TabsPrimitive.Content className={clsx(s.content, className)} ref={ref} {...props} />
 ))
 
 TabsContent.displayName = TabsPrimitive.Content.displayName
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsContent, TabsList, TabsTrigger }

src/components/ui/text-field/text-field.tsx

@@ -1,18 +1,17 @@
 import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, forwardRef, useState } from 'react'
 
+import { Eye, Search, VisibilityOff } from '@/assets'
+import { Typography } from '@/components'
 import { clsx } from 'clsx'
 
 import s from './text-field.module.scss'
 
-import { VisibilityOff, Eye, Search } from '@/assets'
-import { Typography } from '@/components'
-
 export type TextFieldProps = {
-  onValueChange?: (value: string) => void
   containerProps?: ComponentProps<'div'>
-  labelProps?: ComponentProps<'label'>
   errorMessage?: string
   label?: string
+  labelProps?: ComponentProps<'label'>
+  onValueChange?: (value: string) => void
   search?: boolean
 } & ComponentPropsWithoutRef<'input'>
 
@@ -20,15 +19,15 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
       className,
-      errorMessage,
-      placeholder,
-      type,
       containerProps,
-      labelProps,
+      errorMessage,
       label,
+      labelProps,
       onChange,
       onValueChange,
+      placeholder,
       search,
+      type,
       ...restProps
     },
     ref
@@ -45,18 +44,18 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     }
 
     const classNames = {
-      root: clsx(s.root, containerProps?.className),
-      fieldContainer: clsx(s.fieldContainer),
-      field: clsx(s.field, !!errorMessage && s.error, search && s.hasLeadingIcon, className),
-      label: clsx(s.label, labelProps?.className),
       error: clsx(s.error),
+      field: clsx(s.field, !!errorMessage && s.error, search && s.hasLeadingIcon, className),
+      fieldContainer: clsx(s.fieldContainer),
+      label: clsx(s.label, labelProps?.className),
       leadingIcon: s.leadingIcon,
+      root: clsx(s.root, containerProps?.className),
     }
 
     return (
       <div className={classNames.root}>
         {label && (
-          <Typography variant="body2" as="label" className={classNames.label}>
+          <Typography as={'label'} className={classNames.label} variant={'body2'}>
             {label}
           </Typography>
         )}
@@ -64,24 +63,24 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {search && <Search className={classNames.leadingIcon} />}
           <input
             className={classNames.field}
+            onChange={handleChange}
             placeholder={placeholder}
             ref={ref}
             type={finalType}
-            onChange={handleChange}
             {...restProps}
           />
           {isShowPasswordButtonShown && (
             <button
               className={s.showPassword}
-              type={'button'}
               onClick={() => setShowPassword(prev => !prev)}
+              type={'button'}
             >
               {showPassword ? <VisibilityOff /> : <Eye />}
             </button>
           )}
         </div>
 
-        <Typography variant="error" className={classNames.error}>
+        <Typography className={classNames.error} variant={'error'}>
           {errorMessage}
         </Typography>
       </div>

src/components/ui/typography/typography.stories.tsx

@@ -3,11 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Typography } from './'
 
 const meta = {
-  title: 'Components/Typography',
-  component: Typography,
-  tags: ['autodocs'],
   argTypes: {
     variant: {
+      control: { type: 'radio' },
       options: [
         'large',
         'h1',
@@ -23,9 +21,11 @@ const meta = {
         'link2',
         'error',
       ],
-      control: { type: 'radio' },
     },
   },
+  component: Typography,
+  tags: ['autodocs'],
+  title: 'Components/Typography',
 } satisfies Meta<typeof Typography>
 
 export default meta

src/components/ui/typography/typography.tsx

@@ -6,22 +6,22 @@ import s from './typography.module.scss'
 
 export interface TextProps<T extends ElementType> {
   as?: T
+  children?: ReactNode
+  className?: string
   variant?:
-    | 'large'
+    | 'body1'
+    | 'body2'
+    | 'caption'
+    | 'error'
     | 'h1'
     | 'h2'
     | 'h3'
-    | 'body1'
+    | 'large'
-    | 'body2'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'caption'
-    | 'overline'
     | 'link1'
     | 'link2'
-    | 'error'
+    | 'overline'
-  children?: ReactNode
+    | 'subtitle1'
-  className?: string
+    | 'subtitle2'
 }
 
 export function Typography<T extends ElementType = 'p'>({

src/main.tsx

@@ -1,13 +1,12 @@
+import { StrictMode } from 'react'
+
+import { App } from './App'
+import { createRoot } from 'react-dom/client'
+
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/700.css'
 import './styles/index.scss'
 
-import { StrictMode } from 'react'
-
-import { createRoot } from 'react-dom/client'
-
-import { App } from './App'
-
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />

src/pages/deck-page/deck-page.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react'
-
 import { Link, useParams } from 'react-router-dom'
 
-import { Button, TextField, Typography, CardsTable } from '@/components'
+import { Button, CardsTable, TextField, Typography } from '@/components'
 import { Pagination } from '@/components/ui/pagination'
 import { useGetDeckByIdQuery, useGetDeckCardsQuery } from '@/services'
 
@@ -20,12 +19,12 @@ export const DeckPage = () => {
       <Button as={Link} to={learnLink}>
         Learn
       </Button>
-      <TextField search placeholder={'Search cards'} />
+      <TextField placeholder={'Search cards'} search />
       <CardsTable cards={cardsData?.items} />
       <Pagination
         count={cardsData?.pagination?.totalPages || 1}
-        page={currentPage}
         onChange={setCurrentPage}
+        page={currentPage}
       />
     </div>
   )

src/pages/decks-page/decks-page.tsx

@@ -1,7 +1,5 @@
 import { useState } from 'react'
 
-import s from './decks-page.module.scss'
-
 import { Button, Page, Slider, TextField, Typography } from '@/components'
 import { DeckDialog } from '@/components/decks/deck-dialog'
 import { DecksTable } from '@/components/decks/decks-table'
@@ -21,14 +19,16 @@ import {
   selectDecksMaxCards,
   selectDecksMinCards,
   selectDecksSearch,
-} from '@/services/decks/decks.selectors.ts'
+} from '@/services/decks/decks.selectors'
-import { decksSlice } from '@/services/decks/decks.slice.ts'
+import { decksSlice } from '@/services/decks/decks.slice'
 import { useAppDispatch, useAppSelector } from '@/services/store'
 
+import s from './decks-page.module.scss'
+
 export const DecksPage = () => {
   const [showCreateModal, setShowCreateModal] = useState(false)
-  const [deckToDeleteId, setDeckToDeleteId] = useState<string | null>(null)
+  const [deckToDeleteId, setDeckToDeleteId] = useState<null | string>(null)
-  const [deckToEditId, setDeckToEditId] = useState<string | null>(null)
+  const [deckToEditId, setDeckToEditId] = useState<null | string>(null)
 
   const showEditModal = !!deckToEditId
 
@@ -59,11 +59,11 @@ export const DecksPage = () => {
   const authorId = currentTab === 'my' ? currentUserId : undefined
 
   const { data: decks } = useGetDecksQuery({
-    currentPage,
-    minCardsCount: minCards,
-    maxCardsCount: maxCards,
-    name: search,
     authorId,
+    currentPage,
+    maxCardsCount: maxCards,
+    minCardsCount: minCards,
+    name: search,
   })
 
   const showConfirmDeleteModal = !!deckToDeleteId
@@ -76,71 +76,75 @@ export const DecksPage = () => {
   const [updateDeck] = useUpdateDeckMutation()
   const openCreateModal = () => setShowCreateModal(true)
 
-  if (!decks) return <div>loading...</div>
+  if (!decks) {
+    return <div>loading...</div>
+  }
 
   return (
     <Page>
       <DeleteDeckDialog
-        open={showConfirmDeleteModal}
-        onOpenChange={() => setDeckToDeleteId(null)}
         deckName={deckToDeleteName ?? 'Selected deck'}
         onCancel={() => setDeckToDeleteId(null)}
         onConfirm={() => {
           deleteDeck({ id: deckToDeleteId ?? '' })
           setDeckToDeleteId(null)
         }}
+        onOpenChange={() => setDeckToDeleteId(null)}
+        open={showConfirmDeleteModal}
       />
       <DeckDialog
-        open={showEditModal}
+        defaultValues={deckToEdit}
-        onOpenChange={() => setDeckToEditId(null)}
+        key={deckToEditId}
         onConfirm={data => {
-          if (!deckToEditId) return
+          if (!deckToEditId) {
+            return
+          }
 
           updateDeck({ id: deckToEditId, ...data })
         }}
-        defaultValues={deckToEdit}
+        onOpenChange={() => setDeckToEditId(null)}
-        key={deckToEditId}
+        open={showEditModal}
       />
       <div className={s.root}>
         <div className={s.header}>
-          <Typography variant="large">Decks</Typography>
+          <Typography variant={'large'}>Decks</Typography>
           <Button onClick={openCreateModal}>Add new deck</Button>
           <DeckDialog
-            open={showCreateModal}
-            onOpenChange={setShowCreateModal}
-            onConfirm={createDeck}
             onCancel={() => setShowCreateModal(false)}
+            onConfirm={createDeck}
+            onOpenChange={setShowCreateModal}
+            open={showCreateModal}
           />
         </div>
         <div className={s.filters}>
-          <TextField placeholder="Search" search value={search} onValueChange={setSearch} />
+          <TextField onValueChange={setSearch} placeholder={'Search'} search value={search} />
-          <Tabs value={currentTab} onValueChange={value => setCurrentTab(value as Tab)}>
+          <Tabs onValueChange={value => setCurrentTab(value as Tab)} value={currentTab}>
             <TabsList>
               <TabsTrigger value={'my'}>My decks</TabsTrigger>
               <TabsTrigger value={'all'}>All decks</TabsTrigger>
             </TabsList>
           </Tabs>
           <Slider
+            max={decks?.maxCardsCount || 0}
+            min={0}
+            onValueChange={setRangeValue}
             onValueCommit={handleSliderCommitted}
             value={rangeValue}
-            onValueChange={setRangeValue}
-            min={0}
-            max={decks?.maxCardsCount || 0}
           />
-          <Button variant={'secondary'} onClick={resetFilters}>
+          <Button onClick={resetFilters} variant={'secondary'}>
             Clear filters
           </Button>
         </div>
         <DecksTable
+          currentUserId={currentUserId}
           decks={decks?.items}
           onDeleteClick={setDeckToDeleteId}
           onEditClick={setDeckToEditId}
-          currentUserId={currentUserId}
         />
         <Pagination
           count={decks?.pagination?.totalPages || 1}
-          page={currentPage}
           onChange={setCurrentPage}
+          page={currentPage}
         />
       </div>
     </Page>

src/pages/sign-in-page/sign-in-page.tsx

@@ -1,4 +1,4 @@
-import { SignIn, Page } from '@/components'
+import { Page, SignIn } from '@/components'
 
 export const SignInPage = () => {
   return (

src/router.tsx

@@ -1,42 +1,41 @@
 import {
-  createBrowserRouter,
   Navigate,
   Outlet,
   RouteObject,
   RouterProvider,
+  createBrowserRouter,
 } from 'react-router-dom'
 
-import { SignInPage, DecksPage } from './pages'
+import { DecksPage, SignInPage } from './pages'
-
+import { DeckPage } from '@/pages/deck-page/deck-page'
-import { DeckPage } from '@/pages/deck-page/deck-page.tsx'
 
 const publicRoutes: RouteObject[] = [
   {
-    element: <Outlet />,
     children: [
       {
-        path: '/login',
         element: <SignInPage />,
+        path: '/login',
       },
     ],
+    element: <Outlet />,
   },
 ]
 
 const privateRoutes: RouteObject[] = [
   {
-    path: '/',
     element: <DecksPage />,
+    path: '/',
   },
   {
-    path: '/decks/:deckId',
     element: <DeckPage />,
+    path: '/decks/:deckId',
   },
 ]
 
 const router = createBrowserRouter([
   {
-    element: <PrivateRoutes />,
     children: privateRoutes,
+    element: <PrivateRoutes />,
   },
   ...publicRoutes,
 ])
@@ -48,5 +47,5 @@ export const Router = () => {
 function PrivateRoutes() {
   const isAuthenticated = true
 
-  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />
+  return isAuthenticated ? <Outlet /> : <Navigate to={'/login'} />
 }

src/services/base-api.ts

@@ -1,8 +1,6 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
 export const baseApi = createApi({
-  reducerPath: 'baseApi',
-  tagTypes: ['Decks'],
   baseQuery: fetchBaseQuery({
     baseUrl: 'https://api.flashcards.andrii.es',
     credentials: 'include',
@@ -11,4 +9,6 @@ export const baseApi = createApi({
     },
   }),
   endpoints: () => ({}),
+  reducerPath: 'baseApi',
+  tagTypes: ['Decks'],
 })

src/services/store.ts

@@ -1,17 +1,16 @@
-import { configureStore } from '@reduxjs/toolkit'
-import { setupListeners } from '@reduxjs/toolkit/query/react'
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
 
 import { baseApi } from './base-api'
-
+import { decksSlice } from '@/services/decks/decks.slice'
-import { decksSlice } from '@/services/decks/decks.slice.ts'
+import { configureStore } from '@reduxjs/toolkit'
+import { setupListeners } from '@reduxjs/toolkit/query/react'
 
 export const store = configureStore({
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware),
   reducer: {
     [baseApi.reducerPath]: baseApi.reducer,
     [decksSlice.name]: decksSlice.reducer,
   },
-  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware),
 })
 
 export type AppDispatch = typeof store.dispatch