@learningpool/ui 1.6.0 → 1.6.1

package/public/assets/flux/logo.svg

@@ -0,0 +1,22 @@
+<svg width="819" height="316" viewBox="0 0 819 316" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M495.4 225V26.6H531.4V224.9H495.4V225Z" fill="#003366"/>
+<path d="M638.7 96.5H674.7V225H638.7V204.1C633.2 220.9 612.8 228.3 600.2 228.3C566.6 228.3 549 205.7 549.3 167.2V96.5H585.3V165.3C585.3 185.4 597.4 194.7 609.8 194.7C622.2 194.7 638.7 187.6 638.7 164.4V96.5Z" fill="#003366"/>
+<path d="M818.3 225H776.2L747.9 184L719 225H676.6L727.5 155.4L685.1 96.5H727.7L748.1 126.2L767.9 96.5H810.3L767.9 155.4L818.3 225Z" fill="#003366"/>
+<path d="M471 60.2C450.4 60.2 443.8 71.5 443.5 86.9V96.5H471.6V124.6H443.5V225H407.5V124.6H383.3V96.5H407.5V87.1C407.5 48.6 427.3 26.6 463.9 26.6H479.3V60.2H471Z" fill="#003366"/>
+<path d="M425.1 257.1C437.5 257.1 444.8 266.6 444.8 279C444.8 291.3 437.5 300.7 425.1 300.7H408.2V257.1H425.1ZM425.1 295.3C434.3 295.3 439 288.2 439 278.9C439 269.6 434.3 262.3 425.1 262.3H414V295.3H425.1Z" fill="#003366"/>
+<path d="M480.7 288.3H456.7C457.5 293.5 461.3 296.3 466.4 296.3C470 296.3 473.3 294.7 475 291.7L479.7 293.6C477.2 298.7 471.9 301.5 466.2 301.5C457.8 301.5 451 295.2 451 285.9C451 276.6 457.8 270.5 466.2 270.5C474.6 270.5 480.9 276.6 480.9 285.9C480.8 286.6 480.7 287.4 480.7 288.3ZM475.3 283.5C474.6 278.4 471 275.5 466.1 275.5C461.1 275.5 457.6 278.2 456.7 283.5H475.3Z" fill="#003366"/>
+<path d="M486 292H491.1C491.2 294.5 493.4 296.6 497 296.6C500.7 296.6 502.9 294.8 502.9 292.4C502.9 290.2 501.2 289 498.9 288.5L494.9 287.6C490 286.3 487.1 283.9 487.1 279.1C487.1 274.2 491.3 270.4 497.2 270.4C502.2 270.4 507.4 273.1 507.4 279H502C501.9 276.7 499.6 275.2 497.3 275.2C494.5 275.2 492.6 277 492.6 279.3C492.6 281.3 494.5 282.4 496.4 282.8L500.8 283.9C506.9 285.4 508.5 289.1 508.5 292.4C508.5 297.9 503.2 301.4 497.1 301.4C491.7 301.4 486.2 298.1 486 292Z" fill="#003366"/>
+<path d="M514.7 260.2C514.7 258.1 516.5 256.5 518.6 256.5C520.8 256.5 522.5 258.1 522.5 260.2C522.5 262.3 520.7 263.9 518.6 263.9C516.5 263.9 514.7 262.3 514.7 260.2ZM515.8 300.7V271.2H521.3V300.7H515.8Z" fill="#003366"/>
+<path d="M554.2 271.1H559.7V296.5C559.7 310.5 553.4 315.7 543.6 315.7C538.2 315.7 533.2 313 530.3 307.8L535 305.3C536.8 308.7 540.3 310.5 543.6 310.5C550.1 310.5 554.2 306.8 554.2 296.8V295.9C552.2 299.3 547.9 301.3 543.7 301.3C535.6 301.3 528.9 295 528.9 285.7C528.9 276.3 535.5 270.2 543.6 270.2C548 270.2 552.2 272.2 554.2 275.6V271.1V271.1ZM554.2 285.8C554.2 279.4 549 275.6 544.1 275.6C538.7 275.6 534.4 279.9 534.4 285.8C534.4 291.7 538.7 296.2 544.1 296.2C549.5 296.2 554.2 292.1 554.2 285.8Z" fill="#003366"/>
+<path d="M596.5 283.6V300.7H591V283.9C591 279 588 275.8 583.9 275.8C579.8 275.8 574.9 278.3 574.9 284.7V300.7H569.4V271.2H574.9V275.7C576.7 272.1 581.5 270.5 584.7 270.5C592 270.4 596.6 275.3 596.5 283.6Z" fill="#003366"/>
+<path d="M620.1 288.3H625.8C626 292.2 629.7 296.1 635.5 296.1C641.1 296.1 644.3 292.4 644.3 288.6C644.3 284.4 640.4 282.5 636.8 281.5L631.2 280.1C622 277.9 620.5 272.4 620.5 268.9C620.5 261.4 627.3 256.3 634.9 256.3C642.6 256.3 648.7 261.2 648.7 268.9H643C643 264.5 639.4 261.6 634.7 261.6C630.3 261.6 626.3 264.5 626.3 268.8C626.3 270.3 626.8 273.4 632.6 274.9L638.3 276.4C645.7 278.4 650.1 282.2 650.1 288.4C650.1 295.2 644.6 301.4 635.6 301.4C626.3 301.4 620.2 295.1 620.1 288.3Z" fill="#003366"/>
+<path d="M677.4 271.1H683.3L665 315H659.2L665.4 299.8L653.5 271.1H659.4L668.3 292.9L677.4 271.1Z" fill="#003366"/>
+<path d="M686 292H691.1C691.2 294.5 693.4 296.6 697 296.6C700.7 296.6 702.9 294.8 702.9 292.4C702.9 290.2 701.2 289 698.9 288.5L694.9 287.6C690 286.3 687.1 283.9 687.1 279.1C687.1 274.2 691.3 270.4 697.2 270.4C702.2 270.4 707.4 273.1 707.4 279H702.1C702 276.7 699.7 275.2 697.4 275.2C694.6 275.2 692.7 277 692.7 279.3C692.7 281.3 694.6 282.4 696.5 282.8L700.9 283.9C707 285.4 708.6 289.1 708.6 292.4C708.6 297.9 703.3 301.4 697.2 301.4C691.7 301.4 686.2 298.1 686 292Z" fill="#003366"/>
+<path d="M730 271.1V275.8H723.6V300.6H718.1V275.8H712.8V271.1H718.1V260H723.6V271.1H730Z" fill="#003366"/>
+<path d="M763.3 288.3H739.3C740.1 293.5 743.9 296.3 749 296.3C752.6 296.3 755.9 294.7 757.6 291.7L762.3 293.6C759.8 298.7 754.5 301.5 748.8 301.5C740.4 301.5 733.6 295.2 733.6 285.9C733.6 276.6 740.4 270.5 748.8 270.5C757.2 270.5 763.5 276.6 763.5 285.9C763.4 286.6 763.3 287.4 763.3 288.3ZM757.9 283.5C757.2 278.4 753.6 275.5 748.7 275.5C743.7 275.5 740.2 278.2 739.3 283.5H757.9Z" fill="#003366"/>
+<path d="M817.4 283.6V300.7H811.9V283.9C811.9 279 809.2 275.7 804.9 275.7C799.7 275.6 796.9 279.3 796.9 285.9V300.7H791.4V283.9C791.4 278.9 788.7 275.7 784.8 275.7C780.6 275.7 776.5 278.4 776.5 284.7V300.7H771V271.2H776.5V275.8C778 272.6 781.8 270.5 786 270.5C790.3 270.5 794 272.8 795.7 276.8C798.4 271.5 803 270.5 806 270.5C813.4 270.4 817.4 275.3 817.4 283.6Z" fill="#003366"/>
+<path d="M237.4 45.8C233.7 36.9 228.2 28.8 221.2 21.7C214.2 14.6 206 9.29999 197 5.59999C196.7 5.49999 196.4 5.3 196 5.2C193.4 4.2 190.8 3.29999 188.1 2.59999C181.8 0.899991 175.2 0 168.5 0C161.8 0 155.2 0.899991 148.9 2.59999C146.2 3.29999 143.6 4.2 141 5.2C140.7 5.3 140.4 5.39999 140 5.59999C131.1 9.29999 122.9 14.7 115.8 21.7C108.7 28.7 103.3 36.9 99.6 45.8C95.9 54.7 94 64.3 94 74.2L93.9 106.8C93.9 111.6 99 114.5 103.1 112.1L135.8 93.2C138.8 91.4 140.7 88.2 140.7 84.7L140.8 74.2C140.8 74.1 140.8 74.1 140.8 74C140.8 72.2 141 70.4 141.4 68.7C141.8 66.9 142.3 65.2 143 63.5C144.4 60.2 146.4 57.3 148.9 54.8C151.4 52.3 154.4 50.3 157.7 48.9C161 47.5 164.6 46.8 168.4 46.8C172.2 46.8 175.8 47.6 179.1 48.9C182.4 50.3 185.4 52.3 187.9 54.8C190.4 57.3 192.4 60.2 193.8 63.5C194.5 65.1 195 66.9 195.4 68.7C195.8 70.4 195.9 72.2 196 74C196 74.1 196 74.1 196 74.2L195.9 84.7C195.9 88.2 197.8 91.5 200.8 93.2L233.5 112.1C237.6 114.5 242.7 111.5 242.7 106.8L243 74.2C243 64.3 241.1 54.7 237.4 45.8Z" fill="#DA1A32"/>
+<path d="M217 161V205.4C217 208.9 215.1 212.2 212.1 213.9L173.6 236.1C170.6 237.9 166.8 237.9 163.7 236.1L125.2 213.9C122.2 212.1 120.3 208.9 120.3 205.4V161C120.3 157.5 122.2 154.2 125.2 152.5L163.7 130.3C166.7 128.5 170.5 128.5 173.6 130.3L212.1 152.5C215.1 154.2 217 157.4 217 161Z" fill="#003366"/>
+<path d="M251.5 311.6C261 313 270.8 312.6 280.5 310.2C290.2 307.8 299 303.6 306.8 297.8C307.1 297.6 307.3 297.4 307.6 297.2C309.8 295.5 311.9 293.7 313.9 291.8C318.6 287.3 322.8 282.1 326.3 276.3C329.8 270.5 332.4 264.4 334.2 258.2C335 255.5 335.6 252.8 336 250.1C336.1 249.8 336.1 249.4 336.2 249.1C337.7 239.6 337.2 229.7 334.9 220.1C332.5 210.5 328.4 201.6 322.7 193.8C317 186 309.8 179.4 301.3 174.3L273.4 157.4C269.3 154.9 264.1 157.8 264.1 162.6L263.4 200.4C263.3 203.9 265.2 207.2 268.2 209L277.1 214.5C277.2 214.5 277.2 214.6 277.3 214.6C278.8 215.6 280.3 216.6 281.5 217.8C282.8 219 284 220.4 285.1 221.8C287.2 224.7 288.7 227.9 289.5 231.4C290.3 234.8 290.5 238.4 290 241.9C289.5 245.4 288.3 248.9 286.3 252.1C284.3 255.3 281.8 258 278.9 260.1C276 262.2 272.7 263.7 269.3 264.6C265.9 265.5 262.3 265.7 258.8 265.1C257 264.8 255.3 264.4 253.6 263.8C251.9 263.2 250.3 262.5 248.8 261.5C248.7 261.5 248.7 261.4 248.6 261.4L239.7 255.9C236.7 254.1 232.9 254 229.8 255.7L196.6 274.2C192.4 276.5 192.3 282.4 196.4 284.9L224.3 301.8C232.7 306.8 242 310.1 251.5 311.6Z" fill="#47BFAF"/>
+<path d="M85.7 311.6C76.2 313 66.4 312.6 56.7 310.2C47.1 307.8 38.2 303.6 30.4 297.8C30.1 297.6 29.9 297.4 29.6 297.2C27.4 295.5 25.3 293.7 23.3 291.8C18.6 287.3 14.4 282.1 10.9 276.3C7.39999 270.5 4.79999 264.4 2.99999 258.2C2.19999 255.5 1.60001 252.8 1.20001 250.1C1.10001 249.8 1.09999 249.4 0.999995 249.1C-0.500005 239.6 -1.74046e-05 229.7 2.29998 220.1C4.69998 210.5 8.8 201.6 14.5 193.8C20.2 186 27.4 179.4 35.9 174.3L63.8 157.4C67.9 154.9 73.1 157.8 73.2 162.6L73.9 200.4C74 203.9 72.1 207.2 69.1 209L60.2 214.5C60.1 214.5 60.1 214.6 60 214.6C58.5 215.6 57 216.6 55.8 217.8C54.5 219 53.3 220.4 52.2 221.8C50.1 224.7 48.6 227.9 47.8 231.4C47 234.8 46.8 238.4 47.3 241.9C47.8 245.4 49 248.9 51 252.1C53 255.3 55.5 258 58.4 260.1C61.3 262.2 64.6 263.7 68 264.6C71.4 265.5 75 265.7 78.5 265.1C80.3 264.8 82 264.4 83.7 263.8C85.3 263.2 87 262.5 88.5 261.5C88.6 261.5 88.6 261.4 88.7 261.4L97.6 255.9C100.6 254.1 104.4 254 107.5 255.7L140.6 274C144.8 276.3 144.9 282.2 140.8 284.7L113 301.7C104.5 306.8 95.3 310.1 85.7 311.6Z" fill="#F99D2A"/>
+</svg>

package/public/assets/lplogo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="804" height="174"><path d="M155.451 0a44.015 44.015 0 00-34.475 16.521l-.974 1.217-1.19-1C94.227-3.692 59.151-5.608 32.486 12.02 5.822 29.65-6.13 62.655 3.072 93.251c9.202 30.595 37.384 51.55 69.357 51.569 33.871-.145 63.173-23.597 70.71-56.592l.351-1.514 1.516.378a44.237 44.237 0 0044.82-15.018 44.153 44.153 0 005.624-46.9C188.102 9.769 172.531-.031 155.451 0zm-42.43 115.212H72.428c-20.612.014-38.319-14.625-42.165-34.86-3.846-20.233 7.256-40.34 26.438-47.878 19.182-7.539 41.019-.378 51.999 17.053 10.98 17.43 7.998 40.2-7.1 54.221l11.42 11.464zm42.457-47.777h-22.054l6.197-6.219c-8.191-7.605-9.812-19.956-3.86-29.413 5.953-9.458 17.795-13.349 28.204-9.267 10.408 4.082 16.44 14.983 14.365 25.961-2.075 10.978-11.67 18.93-22.852 18.938zm56.259-8.508h13.983v83.896h-13.983zm75.891 54.238a31.115 31.115 0 00-7.422-21.107c-11.364-10.977-29.483-10.869-40.713.244a31.791 31.791 0 00-7.75 22.057 31.225 31.225 0 007.86 22.138 27.754 27.754 0 0020.901 8.302c2.82.017 5.633-.301 8.378-.95a23.983 23.983 0 007.34-2.957 28.45 28.45 0 006.249-5.209c1.756-1.92 3.327-4 4.693-6.212l-12.661-6.973a28.017 28.017 0 01-5.949 6.864 12.331 12.331 0 01-7.477 2.143 13.002 13.002 0 01-9.578-3.744 15.558 15.558 0 01-4.093-9.088v-.353h40.195v-4.991l.027-.164zm-41.613-5.263l.273-1.14a16.824 16.824 0 011.964-4.557 14.026 14.026 0 013.138-3.5 13.258 13.258 0 014.039-2.198 14.511 14.511 0 014.748-.786c6.822-.428 12.866 4.34 13.998 11.042l.328 1.139h-28.488zm90.368-22.438v5.587a24.172 24.172 0 00-16.886-7.152 24.873 24.873 0 00-19.187 8.555 30.663 30.663 0 00-7.66 21.24 31.713 31.713 0 007.66 21.592 25.416 25.416 0 0019.593 8.528 25.042 25.042 0 0016.535-6.666v5.074h14.126V85.464h-14.18zm-3.599 41.05a14.28 14.28 0 01-11.095 4.697 13.546 13.546 0 01-10.555-4.885 18.859 18.859 0 01-4.14-12.631 17.944 17.944 0 014.14-12.172 13.791 13.791 0 0110.825-4.804 13.954 13.954 0 0110.825 4.777 18.348 18.348 0 014.276 12.496 18.456 18.456 0 01-4.276 12.522zm61.726-38.885l-6.31 13.016-.58-.409a11.25 11.25 0 00-6.625-2.56c-6.52 0-9.688 5.038-9.688 15.412v29.734h-13.752V85.478h13.752v4.112a23.86 23.86 0 015.28-4.194 14.582 14.582 0 016.73-1.497 20.663 20.663 0 0110.717 3.43l.475.3zm52.933 20.191v35.002h-14.37V110.87a19.743 19.743 0 00-2.22-11.078 8.81 8.81 0 00-7.734-2.967 9.379 9.379 0 00-8.693 3.974c-1.7 2.722-2.578 7.512-2.578 14.344v27.68h-14.342v-57.32h14.342v4.382a21.806 21.806 0 0114.809-5.961 20.29 20.29 0 0115.85 6.369c3.264 3.593 4.936 9.499 4.936 17.528m22.917-39.959a8.726 8.726 0 01-2.687 6.351 8.512 8.512 0 01-6.26 2.691 8.942 8.942 0 01-6.364-2.634 8.969 8.969 0 01-2.611-6.381 8.484 8.484 0 012.687-6.27 8.593 8.593 0 016.26-2.692 8.7 8.7 0 016.342 2.691 8.484 8.484 0 012.687 6.324m-15.979 17.951h13.983v56.929h-13.983zm70.912 21.927v35.002h-14.35V110.87a19.733 19.733 0 00-2.223-11.078 8.818 8.818 0 00-7.738-2.966 9.386 9.386 0 00-8.698 3.973c-1.701 2.722-2.579 7.513-2.579 14.344v27.68h-14.35v-57.32h14.35v4.382a21.797 21.797 0 0114.817-5.96 20.223 20.223 0 0115.86 6.396c3.264 3.565 4.91 9.471 4.91 17.5m48.797-22.402v5.404a23.085 23.085 0 00-16.946-6.917 24.433 24.433 0 00-19.873 9.268 32.895 32.895 0 00-6.968 21.077 31.173 31.173 0 007.51 21.294 25.14 25.14 0 0017.831 8.446 25.153 25.153 0 0018.446-7.014v6.35c0 11.187-4.447 16.673-13.557 16.673a13.386 13.386 0 01-11.224-4.972 14.24 14.24 0 01-2.359-6.107v-.487h-14.18v.649a25.21 25.21 0 008.785 17.483 28.395 28.395 0 0018.978 6.188 26.858 26.858 0 0021.284-8.89 24.098 24.098 0 005.422-11.106 51.18 51.18 0 00.732-5.404c.163-2 .244-4.378.244-7V85.42h-14.125zm-3.308 40.533a13.575 13.575 0 01-11.252 5.134 13.575 13.575 0 01-11.089-5.08 18.872 18.872 0 01-3.714-12.079 19.114 19.114 0 013.714-12.187 13.33 13.33 0 0111.09-5.188 13.902 13.902 0 0110.844 4.783 18.066 18.066 0 014.203 12.538 18.576 18.576 0 01-3.823 12.079h.027zm73.625-33.377a24.806 24.806 0 00-19.43-8.673 24.376 24.376 0 00-16.697 6.781V85.47H594.26v87.316h14.072v-35.823a24.376 24.376 0 0016.94 6.997 24.888 24.888 0 0019.24-8.483 30.902 30.902 0 007.659-21.289 31.28 31.28 0 00-7.713-21.612m-32.473 8.86a14.327 14.327 0 0111.068-4.7 13.54 13.54 0 0110.662 4.89 18.648 18.648 0 014.113 12.616 17.758 17.758 0 01-4.302 12.212 13.54 13.54 0 01-10.608 4.808 13.92 13.92 0 01-10.987-4.781 18.378 18.378 0 01-4.276-12.509 18.216 18.216 0 014.249-12.535m97.402-7.889c-12.074-11.538-31.165-11.538-43.239 0a28.28 28.28 0 00-8.876 20.926 29.402 29.402 0 008.686 21.574 29.276 29.276 0 0021.525 8.765 30.37 30.37 0 0021.85-8.603 28.788 28.788 0 008.848-21.358 28.948 28.948 0 00-8.794-21.331m-9.989 33.952c-6.505 6.26-16.838 6.26-23.343 0a18.128 18.128 0 01-4.343-12.783 17.166 17.166 0 014.452-12.243 15.114 15.114 0 0111.536-4.72c4.4-.168 8.662 1.55 11.698 4.72a17.7 17.7 0 014.37 12.54 17.7 17.7 0 01-4.37 12.54m74.936-34.97c-12.074-11.548-31.165-11.548-43.239 0a28.238 28.238 0 00-8.902 20.891 29.415 29.415 0 008.658 21.594 29.262 29.262 0 0021.551 8.772 30.41 30.41 0 0021.85-8.61 28.827 28.827 0 008.849-21.378 28.988 28.988 0 00-8.794-21.35m-9.989 34.036c-6.505 6.267-16.838 6.267-23.343 0a18.155 18.155 0 01-4.343-12.794 17.192 17.192 0 014.56-12.308 15.134 15.134 0 0111.563-4.724 15.325 15.325 0 0111.672 4.724 17.726 17.726 0 014.37 12.551 17.726 17.726 0 01-4.37 12.551m25.671-67.585H804v83.896h-13.983z" fill="#0069B4"/></svg>

package/public/assets/molecules.svg

@@ -0,0 +1,8 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="200" cy="118.25" r="45" fill="#2570EE"/>
+<circle cx="128" cy="246.25" r="45" fill="#2570EE"/>
+<circle cx="272" cy="246.25" r="45" fill="#2570EE"/>
+<line x1="164.48" y1="166.676" x2="150.426" y2="190.345" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="214.067" y1="264.734" x2="186.54" y2="264.734" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="2.5" y1="-2.5" x2="30.0269" y2="-2.5" transform="matrix(0.497645 0.867381 0.867381 -0.497645 240 163.25)" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+</svg>

package/public/assets/organisms.svg

@@ -0,0 +1,21 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="187.5" y1="97.75" x2="212.5" y2="97.75" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="138.5" y1="184.75" x2="163.5" y2="184.75" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="238.5" y1="184.75" x2="263.5" y2="184.75" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="187.5" y1="271.75" x2="213.2" y2="271.75" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="270.146" y1="234.127" x2="283.393" y2="212.104" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="116.146" y1="149.127" x2="129.393" y2="127.104" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="126.426" y1="235.175" x2="112.287" y2="213.713" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="283.426" y1="149.175" x2="269.288" y2="127.713" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="181.094" y1="150.199" x2="168.98" y2="127.635" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="232.094" y1="232.199" x2="219.98" y2="209.635" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="2.5" y1="-2.5" x2="28.11" y2="-2.5" transform="matrix(-0.491423 0.870921 0.870921 0.491423 240.042 131.25)" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<line x1="2.5" y1="-2.5" x2="28.11" y2="-2.5" transform="matrix(-0.491423 0.870921 0.870921 0.491423 182.042 209.25)" stroke="#6F9EFF" stroke-width="5" stroke-linecap="round"/>
+<circle cx="151" cy="98.25" r="30" fill="#2570EE"/>
+<circle cx="251" cy="98.25" r="30" fill="#2570EE"/>
+<circle cx="300" cy="180.25" r="30" fill="#2570EE"/>
+<circle cx="251" cy="263.25" r="30" fill="#2570EE"/>
+<circle cx="151" cy="263.25" r="30" fill="#2570EE"/>
+<circle cx="100" cy="180.25" r="30" fill="#2570EE"/>
+<circle cx="200" cy="180.25" r="30" fill="#2570EE"/>
+</svg>

package/public/assets/pages.svg

@@ -0,0 +1,4 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M124 91.4308C120.686 91.4308 118 94.1171 118 97.4308V282.431C118 285.744 120.686 288.431 124 288.431H275C278.314 288.431 281 285.744 281 282.431V139.44C281 137.832 280.355 136.291 279.209 135.164L236.535 93.155C235.413 92.0501 233.901 91.4308 232.326 91.4308H124Z" stroke="#2570EE" stroke-width="12" stroke-linejoin="round"/>
+<path d="M231.86 139.965V96.25L276.322 139.965H231.86Z" fill="#2570EE"/>
+</svg>

package/public/assets/particles.svg

@@ -0,0 +1,3 @@
+<svg width="400" height="399" viewBox="0 0 400 399" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="200" cy="197.214" r="41" fill="#2570EE"/>
+</svg>

package/public/assets/stream-suite-logo.svg

@@ -0,0 +1,38 @@
+<svg width="199" height="203" viewBox="0 0 199 203" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="48" y="0" width="116" height="118">
+<path d="M89.5 117.5L48 39L121.5 0L163.5 80.5L89.5 117.5Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0_121_40535)">
+<path d="M108.125 153.152C102.068 159.877 89.0204 158.715 87.568 142.649L68.767 156.377C76.068 175.816 94.7604 182.131 111.068 177.877C125.876 174.014 135.647 154.052 136.129 142.649C119.538 111.259 108.763 91.4168 101.777 78.8767L96.568 86.8768L99.8756 77.6227C99.8756 77.6227 91.8756 63.2484 89.0204 57.3658C87.3756 53.2484 88.1993 44.834 95.8652 42.2199C108.978 37.7484 115.068 52.3768 115.068 57.3658L134.068 44.8767C123.068 19.8767 101.068 14.8768 81.5378 25.3461C63.304 37.0947 68.767 60.8729 68.767 60.8729C68.767 60.8729 87.9054 95.4522 100.876 120.543L106.876 110.623L102.461 123.623C108.526 135.459 112.867 144.593 112.532 145.884C111.484 149.926 109.158 152.414 108.125 153.152Z" fill="#ffffff"/>
+</g>
+<mask id="mask1_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="80" y="30" width="119" height="78">
+<path d="M102 108L80 89.5L126.5 30L174 46.5L198.5 92.5L102 108Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1_121_40535)">
+<path d="M55.1406 132.916C51.2692 130.98 46.461 124.361 50.2358 113.058C50.4347 112.462 50.0652 111.819 49.4542 111.673C43.1861 110.181 37.8988 105.621 35.7147 103.51C35.1945 103.007 34.3076 103.162 34.0259 103.829C26.2326 122.27 28.1933 138.968 42.333 150.67C53.8428 160.195 72.0471 158.202 82.0981 152.798C82.2541 152.714 82.3854 152.583 82.4764 152.431C130.828 71.6707 128.143 72.0377 130.833 68.1699C133.009 65.0415 140.533 61.7699 147.333 66.1699C154.935 71.8856 152.231 80.571 150.568 85.3253C150.352 85.9426 150.778 86.5921 151.427 86.6735C160.247 87.7801 165.695 92.6631 167.817 94.9634C168.315 95.5037 169.232 95.4325 169.544 94.7665C174.558 84.0309 178.382 57.5911 155.641 45.4159C137.009 36.339 119.01 51.2295 117.443 52.574L117.434 52.582C117.36 52.6459 117.335 52.6673 117.283 52.7573C115.585 55.7185 71.2564 132.993 67.333 134.17C62.1406 135.728 59.1406 134.916 55.1406 132.916Z" fill="#ffffff"/>
+</g>
+<mask id="mask2_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="79" width="85" height="84">
+<path d="M97 163V79H182V163H97Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask2_121_40535)">
+<path d="M151.697 119.826C154.719 128.357 144.861 139.052 130.048 132.667L133.548 155.667C155.821 160.167 170.547 149.167 174.832 129.03C179.547 100.167 157.24 90.2953 151.047 90.1669C144.855 90.0385 58.3942 90.9357 58.3942 90.9357C54.8906 89.8938 48.1891 83.6516 49.5475 75.6669C52.0641 60.8736 69.1624 64.7876 73.5475 67.1669C64.855 57.4129 70.855 46.4129 68.9009 45.385C39.355 43.4129 24.855 63.4129 26.682 82.242C28.355 100.185 48.355 109.413 51.8177 110.41C59.855 113.913 141.855 107.413 147.41 112.486C150.464 115.334 151.54 118.566 151.697 119.826Z" fill="#ffffff"/>
+</g>
+<mask id="mask3_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="43" y="85" width="116" height="118">
+<path d="M84.5 202.5L43 124L116.5 85L158.5 165.5L84.5 202.5Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask3_121_40535)">
+<path d="M108.125 154.152C102.068 160.877 89.0204 159.715 87.568 143.649L68.767 157.377C76.068 176.816 94.7604 183.131 111.068 178.877C125.876 175.014 135.647 155.052 136.129 143.649C119.538 112.259 108.763 92.4168 101.777 79.8767L96.568 87.8768L99.8756 78.6227C99.8756 78.6227 91.8756 64.2484 89.0204 58.3658C87.3756 54.2484 88.1993 45.834 95.8652 43.2199C108.978 38.7484 115.068 53.3768 115.068 58.3658L134.068 45.8767C123.068 20.8767 101.068 15.8768 81.5378 26.3461C63.304 38.0947 68.767 61.8729 68.767 61.8729C68.767 61.8729 87.9054 96.4522 100.876 121.543L106.876 111.623L102.461 124.623C108.526 136.459 112.867 145.593 112.532 146.884C111.484 150.926 109.158 153.414 108.125 154.152Z" fill="#ffffff"/>
+</g>
+<mask id="mask4_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="88" width="119" height="78">
+<path d="M96.5 88L118.5 106.5L72 166L24.5 149.5L0 103.5L96.5 88Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask4_121_40535)">
+<path d="M55.1406 132.916C51.2692 130.98 46.461 124.361 50.2358 113.058C50.4347 112.462 50.0652 111.819 49.4542 111.673C43.1861 110.181 37.8988 105.621 35.7147 103.51C35.1945 103.007 34.3076 103.162 34.0259 103.829C26.2326 122.27 28.1933 138.968 42.333 150.67C53.8428 160.195 72.0471 158.202 82.0981 152.798C82.2541 152.714 82.3854 152.583 82.4764 152.431C130.828 71.6707 128.143 72.0377 130.833 68.1699C133.009 65.0415 140.533 61.7699 147.333 66.1699C154.935 71.8856 152.231 80.571 150.568 85.3253C150.352 85.9426 150.778 86.5921 151.427 86.6735C160.247 87.7801 165.695 92.6631 167.817 94.9634C168.315 95.5037 169.232 95.4325 169.544 94.7665C174.558 84.0309 178.382 57.5911 155.641 45.4159C137.009 36.339 119.01 51.2295 117.443 52.574L117.434 52.582C117.36 52.6459 117.335 52.6673 117.283 52.7573C115.585 55.7185 71.2564 132.993 67.333 134.17C62.1406 135.728 59.1406 134.916 55.1406 132.916Z" fill="#ffffff"/>
+</g>
+<mask id="mask5_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="43" width="85" height="84">
+<path d="M16 127V43H101V127H16Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask5_121_40535)">
+<path d="M151.697 119.826C154.719 128.357 144.861 139.052 130.048 132.667L133.548 155.667C155.821 160.167 170.547 149.167 174.832 129.03C179.547 100.167 157.24 90.2953 151.047 90.1669C144.855 90.0385 58.3942 90.9357 58.3942 90.9357C54.8906 89.8938 48.1891 83.6516 49.5475 75.6669C52.0641 60.8736 69.1624 64.7876 73.5475 67.1669C64.855 57.4129 70.855 46.4129 68.9009 45.385C39.355 43.4129 24.855 63.4129 26.682 82.242C28.355 100.185 48.355 109.413 51.8177 110.41C59.855 113.913 141.855 107.413 147.41 112.486C150.464 115.334 151.54 118.566 151.697 119.826Z" fill="#ffffff"/>
+</g>
+</svg>

package/public/assets/templates.svg

@@ -0,0 +1,3 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="119" y="92.5" width="163" height="197" stroke="#2570EE" stroke-width="12" stroke-linejoin="round" stroke-dasharray="11 11"/>
+</svg>

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Learningpool",
+  "name": "Learningpool Design System",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

package/src/docs.tsx

@@ -0,0 +1,167 @@
+export const DOCS = {
+  Button: {
+    Default: 'Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like; Modal windows, Forms, Cards, Toolbars. The Button comes with three variants: text (default), contained, and outlined.',
+    Text: 'Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content.',
+    Contained: 'Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.',
+    Outlined: 'Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren\'t the primary action in an app. Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.',
+    Colors: '',
+    Sizes: 'For larger or smaller buttons, use the size prop.',
+    WithIcon: 'Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.',
+    IconButtons: 'Icon buttons are commonly found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.',
+    All: ''
+  },
+  Checkbox: {
+    Default: 'Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.',
+    Label: 'You can provide a label to the Checkbox thanks to the FormControlLabel component.',
+    Colors: '',
+    Sizes: 'Use the `size` prop or customize the font size of the svg icons to change the size of the checkboxes.',
+    Icon: '',
+    Controlled: 'You can control the checkbox with the checked and onChange props:',
+    Indeterminate: 'A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn\'t. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.\n\n ⚠️ When indeterminate is set, the value of the checked prop only impacts the form submitted values. It has no accessibility or UX implications.',
+    CheckboxesGroup: 'FormGroup is a helpful wrapper used to group selection control components.',
+    LabelPosition: 'You can change the placement of the label:',
+    All: ''
+  },
+  Switch: {
+    Default: 'Switches toggle the state of a single setting on or off. Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it\'s in, should be made clear from the corresponding inline label.',
+    Label: 'You can provide a label to the `Switch` thanks to the `FormControlLabel` component.',
+    Colors: '',
+    Sizes: 'Use the `size` prop to change the size of the switch.',
+    Controlled: 'You can control the switch with the `checked` and `onChange` props:',
+    SwitchesGroup: '`FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API. However, you are encouraged to use Checkboxes instead if multiple related controls are required. (See: [When to use](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)).',
+    LabelPosition: 'You can change the placement of the label:',
+    All: ''
+  },
+  Radio: {
+    Default: '`RadioGroup` is a helpful wrapper used to group `Radio` components that provides an easier API, and proper keyboard accessibility to the group.',
+    Direction: 'To lay out the buttons horizontally, set the `row` prop:',
+    Controlled: 'You can control the radio with the `value` and `onChange` props:',
+    Standalone: '`Radio` can also be used standalone, without the RadioGroup wrapper.',
+    Sizes: 'Use the `size` prop or customize the font size of the svg icons to change the size of the radios.',
+    Colors: '',
+    Indeterminate: 'A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn\'t. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.\n\n ⚠️ When indeterminate is set, the value of the checked prop only impacts the form submitted values. It has no accessibility or UX implications.',
+    LabelPosition: 'You can change the placement of the label with the `FormControlLabel` component\'s `labelPlacement` prop:',
+    ShowError: 'In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted:',
+    All: ''
+  },
+  Select: {
+    Default: 'Menus are positioned under their emitting elements, unless they are close to the bottom of the viewport.\n\nThe Select component is meant to be interchangeable with a native <select> element.If you are looking for more advanced features, like combobox, multiselect, autocomplete, async or creatable support, head to the `Autocomplete` component. It\'s meant to be an improved version of the \'react-select\' and \'downshift\' packages.',
+    Variants: 'The Select component is implemented as a custom `<input>` element of the InputBase. It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected. It shares the same styles and many of the same props. Refer to the respective component\'s API page for details.',
+    HelperText: '⚠ Note that when using FormControl with the outlined variant of the Select, you need to provide a label in two places: in the InputLabel component and in the `label` prop of the Select component (see the above demo).',
+    AutoWidth: '',
+    OtherProps: '',
+    NativeSelect: 'As the user experience can be improved on mobile using the native select of the platform, we allow such pattern.',
+    MultipleSelect: 'The `Select` component can handle multiple selections. It\'s enabled with the `multiple` prop.\n\nLike with the single selection, you can pull out the new value by accessing `event.target.value` in the `onChange` callback. It\'s always an array.',
+    Checkmarks: '',
+    Chips: '',
+    Placeholder: '',
+    Native: '',
+    Controlled: 'You can control the open state of the select with the `open` prop. Alternatively, it is also possible to set the initial (uncontrolled) open state of the component with the `defaultOpen` prop.',
+    WithDialog: 'While it\'s discouraged by the Material Design guidelines, you can use a select inside a dialog.',
+    Grouping: 'Display categories with the `ListSubheader` component or the native `<optgroup>` element.',
+    All: ''
+  },
+  TextField: {
+    Basic: 'The `TextField` wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), filled, and standard.',
+    Validation: 'The `error` prop toggles the error state. The `helperText` prop can then be used to provide feedback to the user about the error.',
+    Sizes: 'Fancy smaller inputs? Use the `size` prop.',
+    Colors: 'The `color` prop changes the highlight color of the text field when focused.',
+    All: ''
+  },
+  Slider: {
+    Default: 'Continuous sliders allow users to select a value along a subjective range.',
+    Colors: '',
+    Sizes: 'For smaller slider, use the prop `size=\'small\'`.',
+    Discrete: 'Discrete sliders can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with `marks={true}`.',
+    Range: 'The slider can be used to set the start and end of a range by supplying an array of values to the `value` prop.',
+    All: ''
+  },
+  ToggleButton: {
+    Default: '',
+    ExclusiveSection: 'With exclusive selection, selecting one option deselects any other. Note: Exclusive selection does not enforce that a button must be active. For that effect see [enforce value set](https://mui.com/components/toggle-button/#enforce-value-set).',
+    MultipleSection: 'Multiple selection allows for logically-grouped options, like bold, italic, and underline, to have multiple options selected.',
+    Sizes: 'For larger or smaller buttons, use the `size` prop.',
+    Colors: '',
+    EnforceValues: 'If you want to enforce that at least one button must be active, you can adapt your `handleChange` function.',
+    All: ''
+  },
+  Alert: {
+    Default: 'The alert offers four severity levels that set a distinctive icon and color.',
+    Description: 'You can use the `AlertTitle` component to display a formatted title above the content.',
+    Actions: 'An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert.',
+    Icons: 'The icon prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity.',
+    Variants: 'Two variants are available - outlined, and filled:',
+    All: ''
+  },
+  Chip: {
+    Default: 'The Chip component supports outlined and filled styling.',
+    Colors: 'You can use the `color` prop to define a color from theme palette.',
+    Sizes: 'You can use the `size` prop to define a small Chip.',
+    Adornments: 'You can add ornaments to the beginning of the component. Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon.',
+    Actions: 'Chips can be both clickable and deletable.',
+    All: ''
+  },
+  Autocomplete: {
+    Default: '',
+    ComboBox: 'The value must be chosen from a predefined set of allowed values.',
+    FreeSolo: 'Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search input with suggestions, e.g. Google search or react-autowhatever.',
+    Grouped: 'You can group the options with the `groupBy` prop. If you do so, make sure that the options are also sorted with the same dimension that they are grouped by, otherwise, you will notice duplicate headers.',
+    DisabledOptions: 'Use the `getOptionDisabled` prop to set the disabled state of an option.',
+    MultipleValues: 'Also known as tags, the user is allowed to enter more than one value.',
+    Sizes: 'Use the `size` prop to render smaller inputs.',
+    All: ''
+  },
+  Tooltip: {
+    Default: 'When activated, Tooltips display a text label identifying an element, such as a description of its function.',
+    Position: 'The `Tooltip` has 12 placements choice. They don\'t have directional arrows; instead, they rely on motion emanating from the source to convey direction.',
+    Arrow: 'You can use the `arrow` prop to give your tooltip an arrow indicating which element it refers to.',
+    Triggers: 'You can define the types of events that cause a tooltip to show. The touch action requires a long press due to the `enterTouchDelay` prop being set to 700ms by default.',
+    Transitions: 'There are 3 different transition props available: `grow` `fade` and `zoom`',
+    FollowCursor: 'You can enable the tooltip to follow the cursor by setting `followCursor={true}.`',
+    ShowingAndHiding: 'The tooltip is normally shown immediately when the user\'s mouse hovers over the element, and hides immediately when the user\'s mouse leaves. A delay in showing or hiding the tooltip can be added through the `enterDelay` and `leaveDelay` props.',
+    All: ''
+  },
+  List: {
+    Default: '',
+    Basic: 'Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.',
+    Nested: 'List items can easily be nested inside of one another.',
+    Folder: '',
+    SelectedListItem: '',
+    AlignListItems: 'When displaying three lines or more, the avatar is not aligned at the top. You should set the `alignItems="flex-start"` prop to align the avatar at the top, following the Material Design guidelines:',
+    ListControls: 'List controls can include both a primary and secondary action. The primary action is triggered when a user clicks on the list item. The secondary action is triggered when a user clicks on the secondary action element.',
+    StickySubheader: 'Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader. This feature relies on CSS sticky positioning.',
+    All: ''
+  },
+  Drawer: {
+    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
+    TemporaryDrawer: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.',
+    PersistentDrawer: 'Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session. When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport.',
+    PermanentDrawer: 'Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed.'
+  },
+  Avatar: {
+    Default: 'Hi',
+    ImageAvatars: 'Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component.',
+    LetterAvatars: 'Avatars containing simple characters can be created by passing a string as `children`.',
+    Sizes: 'You can change the size of the avatar using the `sx` prop with height and width properties.',
+    Colors: 'You can use different background colors for the avatar using the `sx` prop with a `bgcolor` property.',
+    IconAvatars: 'Icon avatars are created by passing an icon as `children`.',
+    Variants: 'If you need square or rounded avatars, use the `variant` prop.',
+    Grouped: '`AvatarGroup` renders its children as a stack. Use the `max` prop to limit the number of avatars.',
+    TotalAvatars: 'If you need to control the total number of avatars not shown, you can use the `total` prop.',
+    BadgeAvatars: '',
+    All: ''
+  },
+  VerticalNavigation: {
+    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
+    Overview: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.',
+    Empty: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.'
+  },
+  MobileNavigation: {
+    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
+    Overview: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.'
+  },
+  Header: {
+    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
+    Overview: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.'
+  }
+}

package/src/lib/assets/Images.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { createSvgIcon } from '@mui/material/utils'
+
+export const StreamSuiteLogo = createSvgIcon(
+  <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 447.9 484.8">
+    <path d="M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z"/>
+  </svg>,
+  'StreamSuite'
+)
+
+export const LearningPoolLogo = createSvgIcon(
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 804 174">
+    <path fill="#0069B4" d="M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z"/>
+  </svg>,
+  'LearningPool'
+)
+
+export const NotchSVG = createSvgIcon(
+  <svg className='notch-svg'>
+    <clipPath id='notch' clipPathUnits='objectBoundingBox'>
+      <path d='M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0'></path>
+    </clipPath>
+  </svg>,
+  'Notch'
+)
+
+export const NotchMiniSVG = createSvgIcon(
+  <svg className='notch-mini-svg' width="100%" height="100%" viewBox="0 0 15 26">
+    <path d="M15 13.09c0 4.456-3.358 8.069-7.5 8.069-4.142 0-7.5-3.613-7.5-8.07 0-4.456 3.358-8.068 7.5-8.068 4.142 0 7.5 3.612 7.5 8.069Z"/>
+    <path d="M7.333 26c.167-2.869-1.666-5.2-2.666-5.559H10L7.333 26ZM7.333 0C7.5 2.869 5.667 5.2 4.667 5.559H10L7.333 0Z"/>
+  </svg>,
+  'NotchMini'
+)
+
+export const NotchExtendSVG = createSvgIcon(
+  <svg className='notch-extend-svg' viewBox="0 0 22 85" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" />
+  </svg>,
+  'NotchExtend'
+)
+
+export const NotchBackgroundSVG = createSvgIcon(
+  <svg className='notch-background-svg' viewBox="0 0 25 865" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" />
+  </svg>,
+  'NotchBackground'
+)

package/src/lib/assets/stream-suite-logo.svg

@@ -0,0 +1,38 @@
+<svg width="199" height="203" viewBox="0 0 199 203" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="48" y="0" width="116" height="118">
+<path d="M89.5 117.5L48 39L121.5 0L163.5 80.5L89.5 117.5Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0_121_40535)">
+<path d="M108.125 153.152C102.068 159.877 89.0204 158.715 87.568 142.649L68.767 156.377C76.068 175.816 94.7604 182.131 111.068 177.877C125.876 174.014 135.647 154.052 136.129 142.649C119.538 111.259 108.763 91.4168 101.777 78.8767L96.568 86.8768L99.8756 77.6227C99.8756 77.6227 91.8756 63.2484 89.0204 57.3658C87.3756 53.2484 88.1993 44.834 95.8652 42.2199C108.978 37.7484 115.068 52.3768 115.068 57.3658L134.068 44.8767C123.068 19.8767 101.068 14.8768 81.5378 25.3461C63.304 37.0947 68.767 60.8729 68.767 60.8729C68.767 60.8729 87.9054 95.4522 100.876 120.543L106.876 110.623L102.461 123.623C108.526 135.459 112.867 144.593 112.532 145.884C111.484 149.926 109.158 152.414 108.125 153.152Z" fill="#ffffff"/>
+</g>
+<mask id="mask1_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="80" y="30" width="119" height="78">
+<path d="M102 108L80 89.5L126.5 30L174 46.5L198.5 92.5L102 108Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1_121_40535)">
+<path d="M55.1406 132.916C51.2692 130.98 46.461 124.361 50.2358 113.058C50.4347 112.462 50.0652 111.819 49.4542 111.673C43.1861 110.181 37.8988 105.621 35.7147 103.51C35.1945 103.007 34.3076 103.162 34.0259 103.829C26.2326 122.27 28.1933 138.968 42.333 150.67C53.8428 160.195 72.0471 158.202 82.0981 152.798C82.2541 152.714 82.3854 152.583 82.4764 152.431C130.828 71.6707 128.143 72.0377 130.833 68.1699C133.009 65.0415 140.533 61.7699 147.333 66.1699C154.935 71.8856 152.231 80.571 150.568 85.3253C150.352 85.9426 150.778 86.5921 151.427 86.6735C160.247 87.7801 165.695 92.6631 167.817 94.9634C168.315 95.5037 169.232 95.4325 169.544 94.7665C174.558 84.0309 178.382 57.5911 155.641 45.4159C137.009 36.339 119.01 51.2295 117.443 52.574L117.434 52.582C117.36 52.6459 117.335 52.6673 117.283 52.7573C115.585 55.7185 71.2564 132.993 67.333 134.17C62.1406 135.728 59.1406 134.916 55.1406 132.916Z" fill="#ffffff"/>
+</g>
+<mask id="mask2_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="79" width="85" height="84">
+<path d="M97 163V79H182V163H97Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask2_121_40535)">
+<path d="M151.697 119.826C154.719 128.357 144.861 139.052 130.048 132.667L133.548 155.667C155.821 160.167 170.547 149.167 174.832 129.03C179.547 100.167 157.24 90.2953 151.047 90.1669C144.855 90.0385 58.3942 90.9357 58.3942 90.9357C54.8906 89.8938 48.1891 83.6516 49.5475 75.6669C52.0641 60.8736 69.1624 64.7876 73.5475 67.1669C64.855 57.4129 70.855 46.4129 68.9009 45.385C39.355 43.4129 24.855 63.4129 26.682 82.242C28.355 100.185 48.355 109.413 51.8177 110.41C59.855 113.913 141.855 107.413 147.41 112.486C150.464 115.334 151.54 118.566 151.697 119.826Z" fill="#ffffff"/>
+</g>
+<mask id="mask3_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="43" y="85" width="116" height="118">
+<path d="M84.5 202.5L43 124L116.5 85L158.5 165.5L84.5 202.5Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask3_121_40535)">
+<path d="M108.125 154.152C102.068 160.877 89.0204 159.715 87.568 143.649L68.767 157.377C76.068 176.816 94.7604 183.131 111.068 178.877C125.876 175.014 135.647 155.052 136.129 143.649C119.538 112.259 108.763 92.4168 101.777 79.8767L96.568 87.8768L99.8756 78.6227C99.8756 78.6227 91.8756 64.2484 89.0204 58.3658C87.3756 54.2484 88.1993 45.834 95.8652 43.2199C108.978 38.7484 115.068 53.3768 115.068 58.3658L134.068 45.8767C123.068 20.8767 101.068 15.8768 81.5378 26.3461C63.304 38.0947 68.767 61.8729 68.767 61.8729C68.767 61.8729 87.9054 96.4522 100.876 121.543L106.876 111.623L102.461 124.623C108.526 136.459 112.867 145.593 112.532 146.884C111.484 150.926 109.158 153.414 108.125 154.152Z" fill="#ffffff"/>
+</g>
+<mask id="mask4_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="88" width="119" height="78">
+<path d="M96.5 88L118.5 106.5L72 166L24.5 149.5L0 103.5L96.5 88Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask4_121_40535)">
+<path d="M55.1406 132.916C51.2692 130.98 46.461 124.361 50.2358 113.058C50.4347 112.462 50.0652 111.819 49.4542 111.673C43.1861 110.181 37.8988 105.621 35.7147 103.51C35.1945 103.007 34.3076 103.162 34.0259 103.829C26.2326 122.27 28.1933 138.968 42.333 150.67C53.8428 160.195 72.0471 158.202 82.0981 152.798C82.2541 152.714 82.3854 152.583 82.4764 152.431C130.828 71.6707 128.143 72.0377 130.833 68.1699C133.009 65.0415 140.533 61.7699 147.333 66.1699C154.935 71.8856 152.231 80.571 150.568 85.3253C150.352 85.9426 150.778 86.5921 151.427 86.6735C160.247 87.7801 165.695 92.6631 167.817 94.9634C168.315 95.5037 169.232 95.4325 169.544 94.7665C174.558 84.0309 178.382 57.5911 155.641 45.4159C137.009 36.339 119.01 51.2295 117.443 52.574L117.434 52.582C117.36 52.6459 117.335 52.6673 117.283 52.7573C115.585 55.7185 71.2564 132.993 67.333 134.17C62.1406 135.728 59.1406 134.916 55.1406 132.916Z" fill="#ffffff"/>
+</g>
+<mask id="mask5_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="43" width="85" height="84">
+<path d="M16 127V43H101V127H16Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask5_121_40535)">
+<path d="M151.697 119.826C154.719 128.357 144.861 139.052 130.048 132.667L133.548 155.667C155.821 160.167 170.547 149.167 174.832 129.03C179.547 100.167 157.24 90.2953 151.047 90.1669C144.855 90.0385 58.3942 90.9357 58.3942 90.9357C54.8906 89.8938 48.1891 83.6516 49.5475 75.6669C52.0641 60.8736 69.1624 64.7876 73.5475 67.1669C64.855 57.4129 70.855 46.4129 68.9009 45.385C39.355 43.4129 24.855 63.4129 26.682 82.242C28.355 100.185 48.355 109.413 51.8177 110.41C59.855 113.913 141.855 107.413 147.41 112.486C150.464 115.334 151.54 118.566 151.697 119.826Z" fill="#ffffff"/>
+</g>
+</svg>