ab-ui-library 1.4.0 → 1.4.1

package/assets/images/logo-closed.svg

@@ -1,8 +1,11 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Layer_x0020_1">
-<g id="_2306800040480">
-<path id="Vector" d="M6.52433 14.9954L9.99994 7.0686L13.4756 14.9954C13.4943 15.04 13.5389 15.0681 13.5881 15.0681H15.2439C15.333 15.0681 15.3916 14.9767 15.3564 14.8946L11.3813 5.83032C10.8536 4.62488 9.14394 4.62488 8.61392 5.83032L4.63877 14.8946C4.6036 14.9767 4.66223 15.0681 4.75135 15.0681H6.40707C6.45632 15.0681 6.50088 15.04 6.51964 14.9954H6.52433Z" fill="#72BF44"/>
-<path id="Vector_2" d="M18.1262 20.0003H1.87383C0.839588 20.0003 0 19.1607 0 18.1264V1.87407C0 0.839833 0.839588 0.000244141 1.87383 0.000244141H18.1262C19.1604 0.000244141 20 0.839833 20 1.87407V18.1264C20 19.1607 19.1604 20.0003 18.1262 20.0003ZM1.87383 0.617037C1.17964 0.617037 0.616793 1.18223 0.616793 1.87407V18.1264C0.616793 18.8206 1.18199 19.3835 1.87383 19.3835H18.1262C18.8204 19.3835 19.3832 18.8183 19.3832 18.1264V1.87407C19.3832 1.17989 18.818 0.617037 18.1262 0.617037H1.87383Z" fill="#72BF44"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_16647_6582)">
+<path d="M7.82929 17.9943L12 8.48224L16.1708 17.9943C16.1933 18.0478 16.2467 18.0816 16.3058 18.0816H18.2927C18.3997 18.0816 18.47 17.9718 18.4278 17.8733L13.6576 6.99632C13.0244 5.54981 10.9728 5.54981 10.3368 6.99632L5.56663 17.8733C5.52441 17.9718 5.59477 18.0816 5.70171 18.0816H7.68858C7.74768 18.0816 7.80115 18.0478 7.82366 17.9943H7.82929Z" fill="#72BF44"/>
+<path d="M21.7514 24H2.24859C1.0075 24 0 22.9925 0 21.7514V2.24881C0 1.00774 1.0075 0.000244141 2.24859 0.000244141H21.7514C22.9925 0.000244141 24 1.00774 24 2.24881V21.7514C24 22.9925 22.9925 24 21.7514 24ZM2.24859 0.740386C1.41557 0.740386 0.74015 1.41862 0.74015 2.24881V21.7514C0.74015 22.5844 1.41839 23.2598 2.24859 23.2598H21.7514C22.5844 23.2598 23.2599 22.5816 23.2599 21.7514V2.24881C23.2599 1.4158 22.5816 0.740386 21.7514 0.740386H2.24859Z" fill="#72BF44"/>
 </g>
+<defs>
+<clipPath id="clip0_16647_6582">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/assets/images/logo.svg

@@ -1,14 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="20" viewBox="0 0 128 20" fill="none">
-<path d="M92.0697 9.71023C92.6204 9.57496 93.0526 9.307 93.3665 8.90599C93.6804 8.50536 93.8375 8.02467 93.8375 7.46429C93.8375 6.68192 93.5262 6.06373 92.9028 5.60972C92.2802 5.15572 91.4274 4.92853 90.3456 4.92853H86.9448C86.334 4.92853 85.8389 5.42367 85.8389 6.03445V13.966C85.8389 14.5768 86.334 15.072 86.9448 15.072H90.4757C91.6349 15.072 92.55 14.8233 93.2216 14.3259C93.8931 13.8285 94.2285 13.1447 94.2285 12.2753C94.2285 11.5993 94.0377 11.0341 93.6563 10.5801C93.2746 10.1261 92.7457 9.83624 92.0697 9.7106V9.71023ZM87.7805 6.60928H90.2437C90.7458 6.59964 91.1398 6.70119 91.4248 6.91355C91.7094 7.12592 91.8521 7.42575 91.8521 7.81193C91.8521 8.20812 91.7094 8.51722 91.4248 8.73922C91.1398 8.96159 90.7458 9.0724 90.2437 9.0724H87.7805V6.60891V6.60928ZM91.6928 13.0432C91.3451 13.2848 90.8618 13.4008 90.2437 13.3908H87.7805V10.7102H90.2437C90.8618 10.7005 91.3448 10.8139 91.6928 11.0508C92.0404 11.2876 92.2146 11.6134 92.2146 12.0288C92.2146 12.4635 92.0408 12.8016 91.6928 13.0432Z" fill="#222222"/>
-<path d="M116.059 4.92817H114.422C114.353 4.92817 114.298 4.98339 114.298 5.05121V11.9269L109.435 5.41998C109.204 5.11051 108.84 4.9278 108.453 4.9278C107.776 4.9278 107.227 5.47668 107.227 6.1538V14.9482C107.227 15.0164 107.282 15.0716 107.35 15.0716H109.002C109.07 15.0716 109.125 15.0164 109.125 14.9482V8.08694L113.952 14.5494C114.19 14.8681 114.56 15.072 114.958 15.0716C115.634 15.0705 116.182 14.5223 116.182 13.8456V5.05121C116.182 4.98302 116.126 4.92817 116.059 4.92817H116.059Z" fill="#222222"/>
-<path d="M127.739 14.8774L123.732 9.21732L127.443 5.13422C127.515 5.05491 127.459 4.92816 127.352 4.92816H125.395C125.36 4.92816 125.327 4.94299 125.304 4.96893L120.762 9.98561V5.05195C120.762 4.98375 120.707 4.92853 120.639 4.92853H118.943C118.875 4.92853 118.82 4.98375 118.82 5.05195V14.9489C118.82 15.0171 118.875 15.072 118.943 15.072H120.639C120.707 15.072 120.762 15.0167 120.762 14.9489V12.478L122.356 10.7246L125.507 15.0216C125.53 15.0531 125.567 15.072 125.606 15.072H127.639C127.739 15.072 127.797 14.9593 127.739 14.8774H127.739Z" fill="#222222"/>
-<path d="M45.9642 4.92816C45.4335 4.92816 44.9524 5.24022 44.7364 5.72499L41.7592 12.398L38.7542 5.72091C38.5371 5.23837 38.0571 4.92816 37.5282 4.92816H37.5253C36.7825 4.92816 36.1807 5.53004 36.1807 6.27276V14.9482C36.1807 15.0164 36.2359 15.0716 36.3037 15.0716H37.8251C37.8929 15.0716 37.9481 15.0164 37.9481 14.9482V7.79711L40.8642 14.4812C40.9846 14.7573 41.2214 14.9726 41.5142 15.0438C41.9782 15.1565 42.4352 14.9159 42.6161 14.4994L45.5265 7.79711V14.9482C45.5265 15.0164 45.5817 15.0716 45.6496 15.0716H47.1854C47.2536 15.0716 47.3084 15.0164 47.3084 14.9482V6.27276C47.3084 5.53004 46.7066 4.92816 45.9638 4.92816H45.9642Z" fill="#72BF44"/>
-<path d="M57.4304 13.3764H51.8878V10.8262H56.6914C56.7596 10.8262 56.8144 10.7709 56.8144 10.7031V9.254C56.8144 9.18581 56.7592 9.13096 56.6914 9.13096H51.8878V6.6241H57.2566C57.3248 6.6241 57.3796 6.56888 57.3796 6.50069V5.05157C57.3796 4.98338 57.3244 4.92853 57.2566 4.92853H51.0521C50.4413 4.92853 49.9462 5.42367 49.9462 6.03445V13.966C49.9462 14.5768 50.4413 15.072 51.0521 15.072H57.4304C57.4986 15.072 57.5538 15.0167 57.5538 14.9485V13.4998C57.5538 13.4316 57.4986 13.3764 57.4304 13.3764Z" fill="#72BF44"/>
-<path d="M72.109 4.92816H70.4135C70.3453 4.92816 70.2904 4.98338 70.2904 5.05121V14.9482C70.2904 15.0164 70.3453 15.0716 70.4135 15.0716H72.109C72.1772 15.0716 72.2321 15.0164 72.2321 14.9482V5.05121C72.2321 4.98301 72.1768 4.92816 72.109 4.92816Z" fill="#72BF44"/>
-<path d="M66.0427 11.7064C66.2176 11.6345 66.3855 11.55 66.5367 11.4503C66.9274 11.1927 67.2572 10.848 67.5014 10.4492C67.8443 9.88925 68.0159 9.21287 68.0159 8.42049C68.0159 7.30975 67.6582 6.44992 66.9437 5.84099C66.2284 5.23244 65.2144 4.92816 63.9005 4.92816H60.7755C60.1647 4.92816 59.6696 5.42331 59.6696 6.03408V14.9485C59.6696 15.0167 59.7248 15.0716 59.7926 15.0716H61.4882C61.5564 15.0716 61.6116 15.0167 61.6116 14.9485V12.0866H63.9009H63.9035L66.0557 15.0216C66.079 15.0531 66.1157 15.072 66.155 15.072H68.1875C68.2875 15.072 68.3457 14.9593 68.2879 14.8774L66.0431 11.7064H66.0427ZM65.5813 9.89814C65.1947 10.2169 64.6343 10.3766 63.9002 10.3766H61.6108V6.62374H63.9002C64.6343 6.62374 65.1943 6.77828 65.5813 7.08738C65.9675 7.39684 66.1609 7.86049 66.1609 8.47868C66.1609 9.10687 65.9675 9.58015 65.5813 9.89851V9.89814Z" fill="#72BF44"/>
-<path d="M25.9009 14.9963L29.3777 7.06921L32.8541 14.9963C32.8737 15.0412 32.9182 15.0701 32.9667 15.0701H34.623C34.7116 15.0701 34.7716 14.9789 34.7357 14.8974L30.7605 5.83357C30.2319 4.6287 28.5227 4.6287 27.9942 5.83357L24.0193 14.8974C23.9833 14.9789 24.043 15.0701 24.132 15.0701H25.7879C25.8368 15.0701 25.8813 15.0412 25.9009 14.9963Z" fill="#72BF44"/>
-<path d="M75.5595 14.9964L79.0359 7.06923L82.5123 14.9964C82.5319 15.0412 82.5764 15.0701 82.6253 15.0701H84.2816C84.3702 15.0701 84.4302 14.9789 84.3943 14.8974L80.419 5.83359C79.8905 4.62871 78.1812 4.62871 77.6527 5.83359L73.6779 14.8974C73.6419 14.9789 73.7016 15.0701 73.7905 15.0701H75.4464C75.4954 15.0701 75.5395 15.0412 75.5595 14.9964Z" fill="#72BF44"/>
-<path d="M96.9478 14.9964L100.424 7.06923L103.901 14.9964C103.92 15.0412 103.965 15.0701 104.014 15.0701H105.67C105.758 15.0701 105.819 14.9789 105.783 14.8974L101.807 5.83359C101.279 4.62871 99.5695 4.62871 99.041 5.83359L95.0662 14.8974C95.0302 14.9789 95.0899 15.0701 95.1788 15.0701H96.8348C96.8837 15.0701 96.9278 15.0412 96.9478 14.9964Z" fill="#222222"/>
-<path d="M6.52306 14.9964L9.99945 7.06923L13.4758 14.9964C13.4955 15.0412 13.54 15.0701 13.5889 15.0701H15.2452C15.3337 15.0701 15.3938 14.9789 15.3578 14.8974L11.3826 5.83359C10.8541 4.62871 9.14481 4.62871 8.61631 5.83359L4.64106 14.8974C4.60548 14.9789 4.66515 15.0701 4.75373 15.0701H6.40965C6.45857 15.0701 6.50305 15.0412 6.52269 14.9964H6.52306Z" fill="#72BF44"/>
-<path d="M18.126 20.0001H1.87371C0.840434 20.0001 0.000244141 19.1595 0.000244141 18.1262V1.8739C0.000244141 0.840621 0.840804 6.10352e-05 1.87371 6.10352e-05H18.126C19.1593 6.10352e-05 19.9995 0.840621 19.9995 1.8739V18.1262C19.9995 19.1595 19.1589 20.0001 18.126 20.0001ZM1.87371 0.616027C1.17992 0.616027 0.615839 1.18011 0.615839 1.8739V18.1262C0.615839 18.82 1.17992 19.3841 1.87371 19.3841H18.126C18.8194 19.3841 19.3843 18.82 19.3843 18.1262V1.8739C19.3843 1.18011 18.8198 0.616027 18.126 0.616027H1.87371Z" fill="#72BF44"/>
-</svg>
+<svg width="154" height="24" viewBox="0 0 154 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_16647_5158)">
+<path d="M110.484 11.6523C111.145 11.49 111.663 11.1684 112.04 10.6872C112.417 10.2064 112.605 9.62961 112.605 8.95716C112.605 8.01831 112.232 7.27649 111.483 6.73168C110.736 6.18687 109.713 5.91425 108.415 5.91425H104.334C103.601 5.91425 103.007 6.50842 103.007 7.24135V16.7593C103.007 17.4922 103.601 18.0864 104.334 18.0864H108.571C109.962 18.0864 111.06 17.7879 111.866 17.1911C112.672 16.5943 113.074 15.7737 113.074 14.7303C113.074 13.9191 112.845 13.2409 112.388 12.6961C111.93 12.1513 111.295 11.8035 110.484 11.6527V11.6523ZM105.337 7.93115H108.292C108.895 7.91958 109.368 8.04144 109.71 8.29628C110.051 8.55111 110.223 8.91091 110.223 9.37433C110.223 9.84976 110.051 10.2207 109.71 10.4871C109.368 10.7539 108.895 10.8869 108.292 10.8869H105.337V7.9307V7.93115ZM110.031 15.6518C109.614 15.9418 109.034 16.081 108.292 16.069H105.337V12.8522H108.292C109.034 12.8406 109.614 12.9767 110.031 13.2609C110.449 13.5451 110.658 13.936 110.658 14.4346C110.658 14.9563 110.449 15.3619 110.031 15.6518Z" fill="black"/>
+<path d="M139.271 5.91377H137.306C137.224 5.91377 137.158 5.98004 137.158 6.06143V14.3123L131.322 6.50395C131.044 6.13259 130.608 5.91333 130.143 5.91333C129.331 5.91333 128.672 6.57199 128.672 7.38453V17.9378C128.672 18.0196 128.739 18.0859 128.82 18.0859H130.802C130.883 18.0859 130.95 18.0196 130.95 17.9378V9.7043L136.742 17.4592C137.028 17.8417 137.472 18.0863 137.95 18.0859C138.761 18.0846 139.418 17.4268 139.418 16.6147V6.06143C139.418 5.9796 139.352 5.91377 139.27 5.91377H139.271Z" fill="black"/>
+<path d="M153.286 17.8529L148.478 11.0608L152.932 6.16109C153.018 6.06592 152.95 5.91382 152.822 5.91382H150.474C150.433 5.91382 150.393 5.93161 150.365 5.96274L144.914 11.9828V6.06236C144.914 5.98053 144.848 5.91426 144.767 5.91426H142.732C142.65 5.91426 142.584 5.98053 142.584 6.06236V17.9387C142.584 18.0206 142.65 18.0864 142.732 18.0864H144.767C144.848 18.0864 144.914 18.0201 144.914 17.9387V14.9736L146.827 12.8696L150.608 18.0259C150.636 18.0637 150.68 18.0864 150.727 18.0864H153.166C153.286 18.0864 153.357 17.9512 153.287 17.8529H153.286Z" fill="black"/>
+<path d="M55.157 5.91382C54.5202 5.91382 53.9429 6.28829 53.6836 6.87001L50.111 14.8776L46.505 6.86512C46.2444 6.28607 45.6685 5.91382 45.0338 5.91382H45.0303C44.139 5.91382 43.4168 6.63608 43.4168 7.52734V17.9378C43.4168 18.0197 43.483 18.0859 43.5644 18.0859H45.3901C45.4715 18.0859 45.5377 18.0197 45.5377 17.9378V9.35656L49.037 17.3775C49.1815 17.7088 49.4657 17.9672 49.817 18.0526C50.3738 18.1878 50.9222 17.8991 51.1392 17.3993L54.6318 9.35656V17.9378C54.6318 18.0197 54.6981 18.0859 54.7794 18.0859H56.6225C56.7043 18.0859 56.7701 18.0197 56.7701 17.9378V7.52734C56.7701 6.63608 56.0478 5.91382 55.1566 5.91382H55.157Z" fill="#72BF44"/>
+<path d="M68.9164 16.0517H62.2653V12.9914H68.0296C68.1115 12.9914 68.1773 12.9251 68.1773 12.8438V11.1048C68.1773 11.023 68.111 10.9572 68.0296 10.9572H62.2653V7.94894H68.7079C68.7897 7.94894 68.8555 7.88267 68.8555 7.80084V6.0619C68.8555 5.98007 68.7892 5.91425 68.7079 5.91425H61.2625C60.5295 5.91425 59.9353 6.50842 59.9353 7.24135V16.7593C59.9353 17.4922 60.5295 18.0864 61.2625 18.0864H68.9164C68.9983 18.0864 69.0645 18.0201 69.0645 17.9383V16.1998C69.0645 16.1179 68.9983 16.0517 68.9164 16.0517Z" fill="#72BF44"/>
+<path d="M86.5308 5.91382H84.4961C84.4143 5.91382 84.3485 5.98008 84.3485 6.06147V17.9378C84.3485 18.0197 84.4143 18.0859 84.4961 18.0859H86.5308C86.6127 18.0859 86.6785 18.0197 86.6785 17.9378V6.06147C86.6785 5.97964 86.6122 5.91382 86.5308 5.91382Z" fill="#72BF44"/>
+<path d="M79.2513 14.0477C79.4612 13.9614 79.6627 13.86 79.8441 13.7404C80.3129 13.4313 80.7087 13.0177 81.0018 12.5391C81.4132 11.8671 81.6191 11.0555 81.6191 10.1046C81.6191 8.77172 81.1899 7.73992 80.3324 7.00922C79.4741 6.27895 78.2573 5.91382 76.6807 5.91382H72.9306C72.1977 5.91382 71.6035 6.50799 71.6035 7.24092V17.9383C71.6035 18.0201 71.6698 18.0859 71.7512 18.0859H73.7858C73.8677 18.0859 73.934 18.0201 73.934 17.9383V14.504H76.6811H76.6842L79.2668 18.0259C79.2949 18.0637 79.3389 18.0864 79.386 18.0864H81.825C81.9451 18.0864 82.0149 17.9512 81.9455 17.8529L79.2517 14.0477H79.2513ZM78.6976 11.8778C78.2337 12.2603 77.5613 12.452 76.6802 12.452H73.9331V7.94851H76.6802C77.5613 7.94851 78.2333 8.13396 78.6976 8.50488C79.161 8.87624 79.3931 9.43261 79.3931 10.1744C79.3931 10.9283 79.161 11.4962 78.6976 11.8782V11.8778Z" fill="#72BF44"/>
+<path d="M31.081 17.9956L35.2532 8.48305L39.4248 17.9956C39.4484 18.0494 39.5018 18.0841 39.56 18.0841H41.5476C41.6539 18.0841 41.7259 17.9747 41.6828 17.8769L36.9125 7.00028C36.2783 5.55443 34.2271 5.55443 33.5929 7.00028L28.8231 17.8769C28.78 17.9747 28.8516 18.0841 28.9583 18.0841H30.9454C31.0041 18.0841 31.0575 18.0494 31.081 17.9956Z" fill="#72BF44"/>
+<path d="M90.6714 17.9956L94.8431 8.48305L99.0147 17.9956C99.0383 18.0494 99.0917 18.0841 99.1504 18.0841H101.138C101.244 18.0841 101.316 17.9747 101.273 17.8769L96.5028 7.00028C95.8686 5.55443 93.8175 5.55443 93.1833 7.00028L88.4134 17.8769C88.3703 17.9747 88.4419 18.0841 88.5486 18.0841H90.5357C90.5944 18.0841 90.6474 18.0494 90.6714 17.9956Z" fill="#72BF44"/>
+<path d="M116.337 17.9956L120.509 8.48305L124.681 17.9956C124.704 18.0494 124.758 18.0841 124.816 18.0841H126.804C126.91 18.0841 126.982 17.9747 126.939 17.8769L122.169 7.00028C121.535 5.55443 119.483 5.55443 118.849 7.00028L114.079 17.8769C114.036 17.9747 114.108 18.0841 114.215 18.0841H116.202C116.26 18.0841 116.313 18.0494 116.337 17.9956Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.24865 24H21.7514C22.9909 24 23.9996 22.9913 23.9996 21.7514V2.24861C23.9996 1.00867 22.9914 0 21.7514 0H2.24865C1.00916 0 0.000488281 1.00867 0.000488281 2.24861V21.7514C0.000488281 22.9913 1.00872 24 2.24865 24ZM0.739203 2.24861C0.739203 1.41605 1.4161 0.739159 2.24865 0.739159H21.7514C22.584 0.739159 23.2613 1.41605 23.2613 2.24861V21.7514C23.2613 22.5839 22.5835 23.2608 21.7514 23.2608H2.24865C1.4161 23.2608 0.739203 22.5839 0.739203 21.7514V2.24861ZM11.9993 8.48307L7.82767 17.9956C7.8041 18.0494 7.75029 18.0841 7.69158 18.0841H5.70448C5.59819 18.0841 5.52658 17.9747 5.56928 17.8769L10.3396 7.00031C10.9738 5.55445 13.0249 5.55445 13.6591 7.00031L18.4294 17.8769C18.4725 17.9747 18.4005 18.0841 18.2942 18.0841H16.3067C16.2479 18.0841 16.1946 18.0494 16.171 17.9956L11.9993 8.48307Z" fill="#72BF44"/>
+</g>
+<defs>
+<clipPath id="clip0_16647_5158">
+<rect width="153.314" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/styles/styles.css

@@ -7664,9 +7664,10 @@ body {
   -webkit-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-box-orient: vertical;
-  background-color: var(--ds-color-bg-white);
-  border-right: 1px solid var(--ds-color-border-tertiary);
+  background-color: var(--ds-color-bg-container-lighter);
+  border-right: 1px solid var(--ds-color-border-quintary);
   bottom: 0;
+  box-shadow: 0 0 56px 2px rgba(78, 78, 78, 0.122);
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -7675,63 +7676,37 @@ body {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  height: 100%;
   left: 0;
-  padding: 0 0 var(--ds-space-16) var(--ds-space-2);
   position: fixed;
   right: unset;
   top: 0;
   transition: width 0.4s linear, padding-left 0.4s linear;
-  width: 72px;
-  z-index: -1;
+  width: 64px;
+  z-index: 9999;
 }
 
 .side-navigation__btn {
-  border-radius: var(--ds-border-radius-sm);
-  bottom: unset;
-  box-shadow: var(--shadow-brand-2) !important;
-  left: unset;
-  position: absolute;
-  right: calc(var(--ds-space-12) * -1);
-  top: var(--ds-space-24);
-  z-index: 2;
+  cursor: pointer;
+  display: none;
 }
 
-.side-navigation__btn .svg-icon {
-  transition: transform 0.3s linear;
+.side-navigation--pin {
+  box-shadow: none;
+  position: relative;
 }
 
 .side-navigation--opened {
-  min-width: 268px;
+  width: 280px;
 }
 
-.side-navigation--opened, .side-navigation--opened .navigation-item__inner > a, .side-navigation--opened .navigation-item__inner > div:not(.badge, .avatar) {
-  padding-left: var(--ds-space-12);
+.side-navigation--opened .side-navigation__btn {
+  display: flex;
 }
 
-.side-navigation--opened .navigation-item.navigation-item--user .navigation-item__inner .avatar + .body, .side-navigation--opened .navigation-item__inner > a > .svg-icon + .body, .side-navigation--opened .navigation-item__inner > div:not(.badge, .avatar) > .svg-icon + .body {
+.side-navigation--opened .navigation-item__inner > a > .svg-icon + .body, .side-navigation--opened .navigation-item__inner > div:not(.badge, .navigation-item__actions) > .svg-icon + .body {
   max-width: 100%;
-  padding-left: var(--ds-space-8);
-}
-
-.side-navigation--opened .navigation-item.navigation-item--user .navigation-item__child {
-  display: none;
-}
-
-.side-navigation--opened .navigation-item__child {
-  border: 0;
-  border-radius: 0;
-  display: block;
-  left: unset;
-  max-height: 0;
-  overflow: hidden;
-  position: relative;
-  transition: max-height 0.3s linear;
-  width: auto;
-}
-
-.side-navigation--opened .navigation-item__child.active {
-  max-height: 1000px;
-  transition: max-height 0.3s linear;
+  padding-left: var(--ds-space-10);
 }
 
 .side-navigation--opened .side-navigation__btn .svg-icon {
@@ -7747,51 +7722,13 @@ body {
   transition: max-width 0.1s linear;
 }
 
-.side-navigation--opened .side-navigation__bottom {
-  text-align: left;
-}
-
-.side-navigation--opened .side-navigation__bottom__text {
-  max-width: 100%;
-}
-
-.side-navigation--opened .side-navigation__bottom__img {
-  min-width: 130px;
-  width: 130px;
-}
-
-.side-navigation__icon {
-  margin: var(--ds-space-24) 0;
-}
-
-.side-navigation__bottom {
-  padding: var(--ds-space-12);
-}
-
-.side-navigation__bottom__text {
-  max-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: max-width 0.3s linear;
-  white-space: nowrap;
-}
-
-.side-navigation__bottom__img {
-  height: var(--ds-size-20);
-  min-width: 20px;
-  overflow: hidden;
-  transition: all 0.3s linear;
-  width: 20px;
-}
-
-.side-navigation__bottom__img img {
-  max-width: none;
-}
-
 .side-navigation header {
   -webkit-box-align: center;
   -moz-box-align: center;
   -ms-flex-align: center;
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -ms-flex-pack: justify;
   -webkit-align-items: center;
   align-items: center;
   display: -webkit-box;
@@ -7799,19 +7736,16 @@ body {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
-  min-height: 72px;
-}
-
-.side-navigation header .navigation-item {
-  width: 100%;
-}
-
-.side-navigation header .navigation-item__inner:hover {
-  background-color: transparent;
+  height: var(--ds-size-64);
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: var(--ds-space-16) var(--ds-space-20);
 }
 
 .side-navigation main {
-  padding-top: var(--ds-space-10);
+  flex: 1;
+  overflow-y: scroll;
+  padding: 0 var(--ds-space-6) 0 var(--ds-space-10);
 }
 
 .side-navigation footer {
@@ -7823,10 +7757,10 @@ body {
 }
 
 .navigation-item__inner {
-  border-radius: var(--ds-border-radius-sm);
+  border-radius: var(--ds-border-radius-lg);
 }
 
-.navigation-item__inner, .navigation-item__inner > a, .navigation-item__inner > div:not(.badge, .avatar) {
+.navigation-item__inner, .navigation-item__inner > a, .navigation-item__inner > div:not(.badge, .navigation-item__actions) {
   -webkit-box-align: center;
   -moz-box-align: center;
   -ms-flex-align: center;
@@ -7837,18 +7771,23 @@ body {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
+  position: relative;
   width: 100%;
 }
 
-.navigation-item__inner > a, .navigation-item__inner > div:not(.badge, .avatar) {
+.navigation-item__inner > a, .navigation-item__inner > div:not(.badge, .navigation-item__actions) {
   height: var(--ds-size-40);
-  padding: var(--ds-space-4) var(--ds-space-12) var(--ds-space-4) var(--ds-space-24);
-  position: relative;
+  padding: 0 var(--ds-space-10);
   text-decoration: none;
   transition: padding-left 0.3s linear;
 }
 
-.navigation-item__inner > a > .svg-icon + .body, .navigation-item__inner > div:not(.badge, .avatar) > .svg-icon + .body {
+.navigation-item__inner > a > .svg-icon path, .navigation-item__inner > div:not(.badge, .navigation-item__actions) > .svg-icon path {
+  fill: var(--ds-color-text-tertiary);
+}
+
+.navigation-item__inner > a > .svg-icon + .body, .navigation-item__inner > div:not(.badge, .navigation-item__actions) > .svg-icon + .body {
+  color: var(--ds-color-text-secondary);
   max-width: 0;
   overflow: hidden;
   padding-left: 0;
@@ -7858,42 +7797,15 @@ body {
 }
 
 .navigation-item__inner .svg-icon {
-  font-size: var(--font-size-20);
-  min-width: var(--ds-size-20);
+  font-size: var(--font-size-24);
+  min-width: var(--ds-size-24);
 }
 
 .navigation-item__inner:hover {
-  background-color: var(--ds-color-bg-container-lighter);
-}
-
-.navigation-item__inner.active {
   background-color: var(--ds-color-bg-container-light);
 }
 
-.navigation-item__inner.active:after {
-  background-color: var(--ds-color-text-selected);
-  border-radius: var(--ds-border-radius-xs) 0 0 var(--ds-border-radius-xs);
-  content: "";
-  height: var(--ds-size-20);
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: var(--ds-size-4);
-}
-
-.navigation-item.navigation-item--header {
-  min-height: 72px;
-  padding: 0 var(--ds-space-12) 0 var(--ds-space-24);
-  transition: padding-left 0.3s linear;
-}
-
-.navigation-item.navigation-item--header, .navigation-item.navigation-item--header .navigation-item__inner > div {
-  -webkit-box-align: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
+.navigation-item__inner:hover .navigation-item__actions {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -7901,74 +7813,82 @@ body {
   display: flex;
 }
 
-.navigation-item.navigation-item--header .navigation-item__inner > div .svg-icon {
-  font-size: var(--font-size-20);
-}
-
-.navigation-item.navigation-item--header .navigation-item__inner > div > .svg-icon + .body, .navigation-item.navigation-item--user .navigation-item__inner .avatar + .body {
-  max-width: 0;
-  overflow: hidden;
-  padding-left: 0;
-  text-overflow: ellipsis;
-  transition: all 0.3s linear;
-  white-space: nowrap;
+.navigation-item__inner.active {
+  background-color: var(--ds-color-bg-container);
 }
 
-.navigation-item.navigation-item--user .navigation-item__child.active {
-  bottom: 0;
-  top: unset;
+.navigation-item__inner.active > a > .svg-icon path, .navigation-item__inner.active > div:not(.badge, .navigation-item__actions) > .svg-icon path {
+  fill: var(--ds-color-text-primary);
 }
 
-.navigation-item.navigation-item--user .navigation-item__expandable-icon {
-  display: none;
+.navigation-item__inner.active > a > .svg-icon + .body, .navigation-item__inner.active > div:not(.badge, .navigation-item__actions) > .svg-icon + .body {
+  color: var(--ds-color-text-primary);
 }
 
-.navigation-item.navigation-item--sub .navigation-item__inner > a > .svg-icon + .body {
-  padding-left: var(--ds-space-8);
+.navigation-item--expandable > .navigation-item__inner:hover > a > .svg-icon, .navigation-item--expandable > .navigation-item__inner:hover > div:not(.badge, .navigation-item__actions) > .svg-icon {
+  opacity: 0;
 }
 
 .navigation-item__child {
-  background-color: var(--ds-color-bg-white);
-  border: 1px solid var(--ds-color-border-primary);
-  border-radius: 4px;
-  display: none;
-  left: calc(100% + 4px);
-  min-width: 160px;
+  max-height: 0;
   overflow: hidden;
-  position: absolute;
-  top: 0;
-  transition: 0.3s;
+  padding-left: var(--ds-space-40);
+  transition: max-height 0.3s linear;
 }
 
 .navigation-item__child.active {
-  display: block;
-  overflow: visible;
+  max-height: 1000px;
 }
 
-.navigation-item__child--title {
+.navigation-item__actions {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-align-items: center;
+  align-items: center;
   display: none;
+  gap: var(--ds-space-8);
+  height: 100%;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 var(--ds-space-10);
+  position: absolute;
+  width: 100%;
 }
 
-.navigation-item__child--title.active {
-  display: block;
-  padding: var(--space-12);
+.navigation-item__actions__expand .svg-icon {
+  transition: all 0.3s linear;
 }
 
-.navigation-item__child .navigation-item__inner > a > .svg-icon + .body {
-  max-width: 100% !important;
+.navigation-item__actions__expand .svg-icon path {
+  fill: var(--ds-color-text-tertiary);
 }
 
-.navigation-item__expandable-icon .svg-icon {
-  transition: all 0.3s linear;
+.navigation-item__actions__expand.opened .svg-icon {
+  transform: rotate(-180deg);
 }
 
-.navigation-item__expandable-icon.opened .svg-icon {
-  transform: rotate(-180deg);
+.navigation-item__actions__right {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  gap: var(--ds-space-8);
+  margin-left: auto;
 }
 
 .navigation-block {
   flex: 1;
-  margin-top: var(--ds-space-16);
+  margin-bottom: var(--ds-space-16);
   position: relative;
 }
 
@@ -7983,10 +7903,10 @@ body {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
-  margin-bottom: var(--ds-space-12);
+  margin-bottom: var(--ds-space-2);
   max-width: 100%;
-  min-height: var(--ds-size-20);
-  padding: 0 var(--ds-space-12);
+  min-height: var(--ds-size-32);
+  padding: 0 var(--ds-space-10);
 }
 
 .navigation-block__label, .navigation-block__label__text {
@@ -7996,6 +7916,7 @@ body {
 }
 
 .navigation-block__label__text {
+  font-size: 13px;
   max-width: 0;
   transition: max-width 0.3s linear;
 }
@@ -8008,10 +7929,6 @@ body {
   white-space: nowrap;
 }
 
-.profile-text {
-  flex: 1;
-}
-
 .side-sheet {
   --ds-side-sheet-width-sm:640px;
   --ds-side-sheet-width-lg:740px;