@fibery/ui-kit 1.36.2 → 1.37.0

package/src/icons/svg/richeditor/mark/code.svg

@@ -1,6 +1,5 @@
-<?xml version="1.0" standalone="no"?>
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Icon">
-    <path d="M12.2293 3.92508C12.326 3.5223 12.0778 3.11743 11.675 3.02076C11.2723 2.92409 10.8674 3.17224 10.7707 3.57502L7.77071 16.075C7.67405 16.4778 7.9222 16.8827 8.32497 16.9793C8.72775 17.076 9.13263 16.8279 9.22929 16.4251L12.2293 3.92508Z" class="richEditorIcons"/>
-    <path d="M6.53033 6.21967C6.82322 6.51256 6.82322 6.98743 6.53033 7.28033L3.81066 10L6.53033 12.7197C6.82322 13.0126 6.82322 13.4874 6.53033 13.7803C6.23744 14.0732 5.76257 14.0732 5.46967 13.7803L2.21967 10.5304C2.07902 10.3897 2 10.1989 2 10C2 9.80111 2.07902 9.61034 2.21967 9.46969L5.46967 6.21967C5.76256 5.92678 6.23743 5.92678 6.53033 6.21967Z" class="richEditorIcons"/>
-    <path d="M13.4697 6.21967C13.7626 5.92678 14.2374 5.92678 14.5303 6.21967L17.7803 9.46969C17.921 9.61034 18 9.80111 18 10C18 10.1989 17.921 10.3897 17.7803 10.5304L14.5303 13.7803C14.2374 14.0732 13.7626 14.0732 13.4697 13.7803C13.1768 13.4874 13.1768 13.0126 13.4697 12.7197L16.1893 10L13.4697 7.28033C13.1768 6.98743 13.1768 6.51256 13.4697 6.21967Z" class="richEditorIcons"/>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.2293 3.92508C12.326 3.5223 12.0778 3.11743 11.675 3.02076C11.2723 2.92409 10.8674 3.17224 10.7707 3.57502L7.77071 16.075C7.67405 16.4778 7.9222 16.8827 8.32497 16.9793C8.72775 17.076 9.13263 16.8279 9.22929 16.4251L12.2293 3.92508Z" fill="black"/>
+    <path d="M6.53033 6.21967C6.82322 6.51256 6.82322 6.98743 6.53033 7.28033L3.81066 10L6.53033 12.7197C6.82322 13.0126 6.82322 13.4874 6.53033 13.7803C6.23744 14.0732 5.76257 14.0732 5.46967 13.7803L2.21967 10.5304C2.07902 10.3897 2 10.1989 2 10C2 9.80111 2.07902 9.61034 2.21967 9.46969L5.46967 6.21967C5.76256 5.92678 6.23743 5.92678 6.53033 6.21967Z" fill="black"/>
+    <path d="M13.4697 6.21967C13.7626 5.92678 14.2374 5.92678 14.5303 6.21967L17.7803 9.46969C17.921 9.61034 18 9.80111 18 10C18 10.1989 17.921 10.3897 17.7803 10.5304L14.5303 13.7803C14.2374 14.0732 13.7626 14.0732 13.4697 13.7803C13.1768 13.4874 13.1768 13.0126 13.4697 12.7197L16.1893 10L13.4697 7.28033C13.1768 6.98743 13.1768 6.51256 13.4697 6.21967Z" fill="black"/>
 </svg>

package/src/icons/svg/richeditor/mark/em.svg

@@ -1,2 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><path d="M6.89624 4.42857C6.89624 3.91574 7.31224 3.5 7.82481 3.5H13.3962C13.9088 3.5 14.3248 3.91574 14.3248 4.42857C14.3248 4.9414 13.9088 5.35714 13.3962 5.35714H11.8143L9.67039 14.6429H11.5391C12.0516 14.6429 12.4676 15.0586 12.4676 15.5715C12.4676 16.0843 12.0516 16.5 11.5391 16.5H5.96763C5.45506 16.5 5.03906 16.0843 5.03906 15.5715C5.03906 15.0586 5.45506 14.6429 5.96763 14.6429H7.76415L9.90801 5.35714H7.82481C7.31224 5.35714 6.89624 4.9414 6.89624 4.42857Z" class="richEditorIcons"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.89624 4.42857C6.89624 3.91574 7.31224 3.5 7.82481 3.5H13.3962C13.9088 3.5 14.3248 3.91574 14.3248 4.42857C14.3248 4.9414 13.9088 5.35714 13.3962 5.35714H11.8143L9.67039 14.6429H11.5391C12.0516 14.6429 12.4676 15.0586 12.4676 15.5715C12.4676 16.0843 12.0516 16.5 11.5391 16.5H5.96763C5.45506 16.5 5.03906 16.0843 5.03906 15.5715C5.03906 15.0586 5.45506 14.6429 5.96763 14.6429H7.76415L9.90801 5.35714H7.82481C7.31224 5.35714 6.89624 4.9414 6.89624 4.42857Z" fill="black"/>
+</svg>

package/src/icons/svg/richeditor/mark/highlight.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.5948 3.59463C12.9232 2.26635 15.0769 2.26635 16.4053 3.59463C17.7337 4.92303 17.7336 7.07677 16.4053 8.40521L8.81057 16H16.2501C16.6642 16 16.9999 16.3359 17.0001 16.75C17.0001 17.1642 16.6643 17.5 16.2501 17.5H3.5C2.94772 17.5 2.5 17.0523 2.5 16.5V13C2.50006 12.8011 2.57913 12.6103 2.71973 12.4697L11.5948 3.59463ZM4.00001 13.3105V16H6.68947L13.9024 8.78705L11.2139 6.09758L4.00001 13.3105ZM15.3448 4.65519C14.6022 3.91269 13.3979 3.91269 12.6553 4.65519L12.0977 5.21378L14.7862 7.90326L15.3448 7.34466C16.0873 6.602 16.0874 5.39779 15.3448 4.65519Z" fill="black"/>
+</svg>

package/src/icons/svg/richeditor/mark/strike.svg

@@ -1,2 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><g class="richEditorIcons"><path d="M14.8042 12.6882C14.7507 15.0908 12.8062 16.6 9.72261 16.6C7.1272 16.6 5.39692 15.5296 4.89226 14.0667C4.81115 13.8526 4.76609 13.6207 4.76609 13.4066C4.76609 12.7644 5.18064 12.354 5.79344 12.354C6.30712 12.354 6.63155 12.5592 6.88388 13.0766C7.28941 14.1916 8.40688 14.6911 9.79471 14.6911C11.3628 14.6911 12.4622 13.924 12.4622 12.8536C12.4622 12.7971 12.4598 12.742 12.4549 12.6882H14.8042Z" class="richEditorIcons"></path><path d="M14.749 11.9H12.1227C12.1203 11.8973 12.1178 11.8945 12.1154 11.8917H4.88464C4.47064 11.8917 4.13464 11.556 4.13464 11.1417C4.13464 10.7275 4.47064 10.3917 4.88464 10.3917H7.50782C7.50444 10.3905 7.50105 10.3893 7.49767 10.3881H13.9766L13.9802 10.3917H15.3552C15.7692 10.3917 16.1052 10.7275 16.1052 11.1417C16.1052 11.556 15.7692 11.8917 15.3552 11.8917H14.7475C14.748 11.8945 14.7485 11.8973 14.749 11.9Z" class="richEditorIcons"></path><path d="M6.03927 9.59998C5.27104 8.972 4.90127 8.13769 4.90127 7.10005C4.90127 4.83432 6.91091 3.30005 9.73162 3.30005C12.0296 3.30005 13.814 4.31695 14.3457 6.02071C14.3998 6.16343 14.4268 6.33291 14.4268 6.547C14.4268 7.10897 14.0213 7.49254 13.4175 7.49254C12.8768 7.49254 12.5433 7.26061 12.3 6.76108C11.8584 5.67282 10.9302 5.20897 9.7136 5.20897C8.2717 5.20897 7.24435 5.8869 7.24435 6.96625C7.24435 7.84042 7.8932 8.4024 9.51534 8.74136L10.9122 9.02681C11.6488 9.17791 12.2707 9.36706 12.7864 9.59998H6.03927Z" class="richEditorIcons"></path></g></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.5137 11.625C13.9066 11.494 14.3317 11.7069 14.4629 12.0986C14.5799 12.4506 14.6453 12.8343 14.6553 13.2383C14.6812 14.3091 14.2978 15.2809 13.5469 16.0508C12.6479 16.9718 11.294 17.5 9.83203 17.5H9.83008C6.56233 17.5 5.33399 15.7243 4.87891 14.2334C4.75791 13.8374 4.98094 13.4179 5.37793 13.2969C5.76993 13.1749 6.19345 13.3989 6.31445 13.7959C6.77346 15.2999 7.89107 16.001 9.83105 16.001C10.892 16.001 11.8537 15.6378 12.4727 15.0039C12.9346 14.53 13.1712 13.9322 13.1553 13.2754C13.1493 13.0205 13.11 12.7852 13.04 12.5742C12.9091 12.1813 13.1208 11.7561 13.5137 11.625ZM9.83008 2.5C11.0201 2.50001 13.1728 2.8681 14.2148 5.33398C14.3758 5.71492 14.1973 6.15532 13.8164 6.31738C13.4354 6.47838 12.994 6.29897 12.833 5.91797C12.295 4.64501 11.285 4.00002 9.83008 4C9.22812 4 7.89603 4.21181 7.16699 5.01367C6.77299 5.44767 6.61464 5.99636 6.68164 6.69336C6.72667 7.16169 6.86599 8.58719 9.8623 9.12207C10.0675 9.15849 10.2843 9.20114 10.5068 9.25H15.75C16.164 9.25 16.5 9.586 16.5 10C16.5 10.414 16.164 10.75 15.75 10.75H3.75C3.336 10.75 3 10.414 3 10C3 9.586 3.336 9.25 3.75 9.25H6.4209C5.56966 8.50465 5.26386 7.60952 5.18945 6.83691C5.08247 5.72799 5.3817 4.74884 6.05762 4.00586C7.38662 2.54286 9.58408 2.5 9.83008 2.5Z" fill="black"/>
+</svg>

package/src/icons/svg/richeditor/mark/strong.svg

@@ -1,2 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><path d="M7.00901 16.5H11.2162C13.982 16.5 15.6486 15.1126 15.6486 12.8243C15.6486 11.0946 14.4595 9.84234 12.6937 9.64414V9.57207C13.991 9.35586 15.009 8.12162 15.009 6.74324C15.009 4.77928 13.4955 3.5 11.1892 3.5H7.00901C6.37838 3.5 6 3.8964 6 4.54505V15.455C6 16.1036 6.37838 16.5 7.00901 16.5ZM8.01802 9.03153V5.14865H10.7027C12.1622 5.14865 12.991 5.81532 12.991 7.02252C12.991 8.31081 12.027 9.03153 10.2793 9.03153H8.01802ZM8.01802 14.8514V10.5721H10.6847C12.5946 10.5721 13.5856 11.2928 13.5856 12.6982C13.5856 14.1036 12.6216 14.8514 10.8018 14.8514H8.01802Z" class="richEditorIcons"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.00901 16.5H11.2162C13.982 16.5 15.6486 15.1126 15.6486 12.8243C15.6486 11.0946 14.4595 9.84234 12.6937 9.64414V9.57207C13.991 9.35586 15.009 8.12162 15.009 6.74324C15.009 4.77928 13.4955 3.5 11.1892 3.5H7.00901C6.37838 3.5 6 3.8964 6 4.54505V15.455C6 16.1036 6.37838 16.5 7.00901 16.5ZM8.01802 9.03153V5.14865H10.7027C12.1622 5.14865 12.991 5.81532 12.991 7.02252C12.991 8.31081 12.027 9.03153 10.2793 9.03153H8.01802ZM8.01802 14.8514V10.5721H10.6847C12.5946 10.5721 13.5856 11.2928 13.5856 12.6982C13.5856 14.1036 12.6216 14.8514 10.8018 14.8514H8.01802Z" fill="black"/>
+</svg>

package/src/icons/svg/richeditor/mark/underline.svg

@@ -1,2 +1,4 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><g transform="translate(2, 2)" class="richEditorIcons"><path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136z" class="richEditorIcons"></path><path fill-rule="evenodd" d="M12.5 15h-9v-1h9v1z" clip-rule="evenodd" class="richEditorIcons"></path></g></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.31301 5.13599H6.08301V11.54C6.08301 13.645 7.55301 15.163 10 15.163C12.447 15.163 13.917 13.645 13.917 11.54V5.13599H12.687V11.459C12.687 12.949 11.709 14.029 10 14.029C8.29101 14.029 7.31301 12.949 7.31301 11.459V5.13599Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 17H5.5V16H14.5V17Z" fill="black"/>
+</svg>

package/src/icons/svg/space-app.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.25C2 3.00736 3.00736 2 4.25 2H7C8.24264 2 9.25 3.00736 9.25 4.25V7C9.25 8.24264 8.24264 9.25 7 9.25H4.25C3.00736 9.25 2 8.24264 2 7V4.25ZM3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5H7C7.41421 3.5 7.75 3.83579 7.75 4.25V7C7.75 7.41421 7.41421 7.75 7 7.75H4.25C3.83579 7.75 3.5 7.41421 3.5 7V4.25ZM13 10.75C11.7574 10.75 10.75 11.7574 10.75 13V15.75C10.75 16.9926 11.7574 18 13 18H15.75C16.9926 18 18 16.9926 18 15.75V13C18 11.7574 16.9926 10.75 15.75 10.75H13ZM13 12.25C12.5858 12.25 12.25 12.5858 12.25 13V15.75C12.25 16.1642 12.5858 16.5 13 16.5H15.75C16.1642 16.5 16.5 16.1642 16.5 15.75V13C16.5 12.5858 16.1642 12.25 15.75 12.25H13ZM7.19458 10.9001C6.32772 10.0333 4.92228 10.0333 4.05542 10.9001L2.15014 12.8054C1.28329 13.6723 1.28329 15.0777 2.15014 15.9446L4.05542 17.8499C4.92228 18.7167 6.32772 18.7167 7.19458 17.8499L9.09986 15.9446C9.96671 15.0777 9.96671 13.6723 9.09986 12.8054L7.19458 10.9001ZM6.13392 11.9608C5.85285 11.6797 5.39715 11.6797 5.11608 11.9608L3.2108 13.8661C2.92973 14.1472 2.92973 14.6028 3.2108 14.8839L5.11608 16.7892C5.39715 17.0703 5.85285 17.0703 6.13392 16.7892L8.0392 14.8839C8.32027 14.6028 8.32027 14.1472 8.0392 13.8661L6.13392 11.9608ZM16.5 5.5C16.5 6.60457 15.6046 7.5 14.5 7.5C13.3954 7.5 12.5 6.60457 12.5 5.5C12.5 4.39543 13.3954 3.5 14.5 3.5C15.6046 3.5 16.5 4.39543 16.5 5.5ZM18 5.5C18 7.433 16.433 9 14.5 9C12.567 9 11 7.433 11 5.5C11 3.567 12.567 2 14.5 2C16.433 2 18 3.567 18 5.5Z" fill="black"/>
+</svg>

package/src/icons/svg/space-generate.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 2C3.00736 2 2 3.00736 2 4.25V7C2 8.24264 3.00736 9.25 4.25 9.25H7C8.24264 9.25 9.25 8.24264 9.25 7V4.25C9.25 3.00736 8.24264 2 7 2H4.25ZM4.25 3.5C3.83579 3.5 3.5 3.83579 3.5 4.25V7C3.5 7.41421 3.83579 7.75 4.25 7.75H7C7.41421 7.75 7.75 7.41421 7.75 7V4.25C7.75 3.83579 7.41421 3.5 7 3.5H4.25ZM4.05542 10.9001C4.92228 10.0333 6.32772 10.0333 7.19458 10.9001L9.09986 12.8054C9.96671 13.6723 9.96671 15.0777 9.09986 15.9446L7.19458 17.8499C6.32772 18.7167 4.92228 18.7167 4.05542 17.8499L2.15014 15.9446C1.28329 15.0777 1.28329 13.6723 2.15014 12.8054L4.05542 10.9001ZM5.11608 11.9608C5.39715 11.6797 5.85285 11.6797 6.13392 11.9608L8.0392 13.8661C8.32027 14.1472 8.32027 14.6028 8.0392 14.8839L6.13392 16.7892C5.85285 17.0703 5.39715 17.0703 5.11608 16.7892L3.2108 14.8839C2.92973 14.6028 2.92973 14.1472 3.2108 13.8661L5.11608 11.9608ZM14.5 7.5C15.6046 7.5 16.5 6.60457 16.5 5.5C16.5 4.39543 15.6046 3.5 14.5 3.5C13.3954 3.5 12.5 4.39543 12.5 5.5C12.5 6.60457 13.3954 7.5 14.5 7.5ZM14.5 9C16.433 9 18 7.433 18 5.5C18 3.567 16.433 2 14.5 2C12.567 2 11 3.567 11 5.5C11 7.433 12.567 9 14.5 9ZM14.0609 11.3131C14.202 10.8993 14.788 10.8944 14.9361 11.3058L15.6157 13.1935C15.6547 13.3019 15.7423 13.386 15.8526 13.4208L17.6767 13.9971C18.1039 14.1321 18.1091 14.7322 17.6843 14.8745L15.8542 15.4878C15.7453 15.5243 15.6595 15.6091 15.622 15.7172L14.9379 17.6891C14.7929 18.1072 14.1974 18.1024 14.0592 17.682L13.4154 15.7231C13.3788 15.6116 13.2911 15.5241 13.1792 15.4873L11.3182 14.8754C10.8901 14.7346 10.8953 14.1298 11.3257 13.9964L13.1807 13.4214C13.2939 13.3863 13.3834 13.2994 13.4216 13.1875L14.0609 11.3131Z" fill="black"/>
+</svg>

package/src/icons/svg/space-scratch.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35999 7.75H7C7.41421 7.75 7.75 7.41421 7.75 7V6.28H9.25V7C9.25 8.24264 8.24264 9.25 7 9.25H6.35999V7.75ZM3.5 6.28V7C3.5 7.41421 3.83579 7.75 4.25 7.75H4.85999V9.25H4.25C3.00736 9.25 2 8.24264 2 7V6.28H3.5ZM4.85999 3.5H4.25C3.83579 3.5 3.5 3.83579 3.5 4.25V4.78H2V4.25C2 3.00736 3.00736 2 4.25 2H4.85999V3.5ZM6.35999 3.5H7C7.41421 3.5 7.75 3.83579 7.75 4.25V4.78H9.25V4.25C9.25 3.00736 8.24264 2 7 2H6.35999V3.5ZM10.75 6.28V7C10.75 8.24264 11.7574 9.25 13 9.25H13.62V7.75H13C12.5858 7.75 12.25 7.41421 12.25 7V6.28H10.75ZM12.25 4.78H10.75V4.25C10.75 3.00736 11.7574 2 13 2H13.62V3.5H13C12.5858 3.5 12.25 3.83579 12.25 4.25V4.78ZM16.5 4.78V4.25C16.5 3.83579 16.1642 3.5 15.75 3.5H15.12V2H15.75C16.9926 2 18 3.00736 18 4.25V4.78H16.5ZM15.12 7.75H15.75C16.1642 7.75 16.5 7.41421 16.5 7V6.28H18V7C18 8.24264 16.9926 9.25 15.75 9.25H15.12V7.75ZM13.62 10.75H13C11.7574 10.75 10.75 11.7574 10.75 13V13.67H12.25V13C12.25 12.5858 12.5858 12.25 13 12.25H13.62V10.75ZM15.12 12.25V10.75H15.75C16.9926 10.75 18 11.7574 18 13V13.67H16.5V13C16.5 12.5858 16.1642 12.25 15.75 12.25H15.12ZM15.12 16.5H15.75C16.1642 16.5 16.5 16.1642 16.5 15.75V15.17H18V15.75C18 16.9926 16.9926 18 15.75 18H15.12V16.5ZM12.25 15.17V15.75C12.25 16.1642 12.5858 16.5 13 16.5H13.62V18H13C11.7574 18 10.75 16.9926 10.75 15.75V15.17H12.25ZM9.25 13.67V13C9.25 11.7574 8.24264 10.75 7 10.75H6.35999V12.25H7C7.41421 12.25 7.75 12.5858 7.75 13V13.67H9.25ZM7.75 15.17H9.25V15.75C9.25 16.9926 8.24264 18 7 18H6.35999V16.5H7C7.41421 16.5 7.75 16.1642 7.75 15.75V15.17ZM3.5 15.17V15.75C3.5 16.1642 3.83579 16.5 4.25 16.5H4.85999V18H4.25C3.00736 18 2 16.9926 2 15.75V15.17H3.5ZM4.85999 12.25H4.25C3.83579 12.25 3.5 12.5858 3.5 13V13.67H2V13C2 11.7574 3.00736 10.75 4.25 10.75H4.85999V12.25Z" fill="black"/>
+</svg>

package/src/icons/svg/space-template.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.75C2 3.23122 3.23122 2 4.75 2H15.25C16.7688 2 18 3.23122 18 4.75V15.25C18 16.7688 16.7688 18 15.25 18H4.75C3.23122 18 2 16.7688 2 15.25V4.75ZM4.75 3.5C4.05964 3.5 3.5 4.05964 3.5 4.75V15.25C3.5 15.9404 4.05964 16.5 4.75 16.5H15.25C15.9404 16.5 16.5 15.9404 16.5 15.25V4.75C16.5 4.05964 15.9404 3.5 15.25 3.5H4.75ZM8.55542 6.65015C9.42227 5.7833 10.8277 5.7833 11.6946 6.65015L13.5999 8.55543C14.4667 9.42229 14.4667 10.8277 13.5999 11.6946L11.6946 13.5999C10.8277 14.4667 9.42227 14.4667 8.55542 13.5999L6.65013 11.6946C5.78328 10.8277 5.78328 9.42229 6.65013 8.55543L8.55542 6.65015ZM9.61608 7.71081C9.89714 7.42974 10.3528 7.42974 10.6339 7.71081L12.5392 9.61609C12.8203 9.89716 12.8203 10.3529 12.5392 10.6339L10.6339 12.5392C10.3528 12.8203 9.89714 12.8203 9.61608 12.5392L7.71079 10.6339C7.42972 10.3529 7.42972 9.89716 7.71079 9.61609L9.61608 7.71081Z" fill="black"/>
+</svg>

package/src/icons/svg/table-layout.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.875 2.96875C3.63465 2.96875 3.40414 3.06423 3.23418 3.23418C3.06423 3.40414 2.96875 3.63465 2.96875 3.875V7.40614H7.40614V2.96875H3.875ZM3.875 1.28125C3.1871 1.28125 2.52736 1.55452 2.04094 2.04094C1.55452 2.52736 1.28125 3.1871 1.28125 3.875V16.125C1.28125 16.8129 1.55452 17.4726 2.04094 17.959C2.52736 18.4455 3.1871 18.7188 3.875 18.7188H16.125C16.8129 18.7188 17.4726 18.4455 17.959 17.959C18.4455 17.4726 18.7188 16.8129 18.7188 16.125V3.875C18.7188 3.1871 18.4455 2.52736 17.959 2.04094C17.4726 1.55452 16.8129 1.28125 16.125 1.28125H3.875ZM9.09364 2.96875V7.40614H17.0312V3.875C17.0312 3.63465 16.9358 3.40414 16.7658 3.23418C16.5959 3.06423 16.3654 2.96875 16.125 2.96875H9.09364ZM7.40614 9.09364H2.96875V16.125C2.96875 16.3654 3.06423 16.5959 3.23418 16.7658C3.40414 16.9358 3.63465 17.0312 3.875 17.0312H7.40614V9.09364ZM9.09364 17.0312V9.09364H17.0312V16.125C17.0312 16.3654 16.9358 16.5959 16.7658 16.7658C16.5959 16.9358 16.3654 17.0312 16.125 17.0312H9.09364Z" />
+</svg>

package/src/icons/svg/templates-filled.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.94438 2.22229H4.16662C3.09273 2.22229 2.22217 3.09285 2.22217 4.16674V6.9445C2.22217 8.01838 3.09273 8.88894 4.16662 8.88894H6.94438C8.01826 8.88894 8.88882 8.01838 8.88882 6.9445V4.16674C8.88882 3.09285 8.01826 2.22229 6.94438 2.22229Z" />
+<path d="M15.8331 11.1111H13.0553C11.9814 11.1111 11.1108 11.9817 11.1108 13.0556V15.8334C11.1108 16.9073 11.9814 17.7778 13.0553 17.7778H15.8331C16.907 17.7778 17.7775 16.9073 17.7775 15.8334V13.0556C17.7775 11.9817 16.907 11.1111 15.8331 11.1111Z" />
+<path d="M14.4441 9.16681C16.4385 9.16681 18.0553 7.55006 18.0553 5.55569C18.0553 3.56133 16.4385 1.94458 14.4441 1.94458C12.4498 1.94458 10.833 3.56133 10.833 5.55569C10.833 7.55006 12.4498 9.16681 14.4441 9.16681Z" />
+<path d="M5.55569 18.0557C7.55006 18.0557 9.16681 16.4389 9.16681 14.4446C9.16681 12.4502 7.55006 10.8334 5.55569 10.8334C3.56133 10.8334 1.94458 12.4502 1.94458 14.4446C1.94458 16.4389 3.56133 18.0557 5.55569 18.0557Z" />
+</svg>

package/src/icons/svg/thumbs-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 3C5.76932 3 6.23419 3.22765 6.55469 3.58691C7.02196 3.22023 7.60973 3 8.25 3H13.9609L14.1934 3.00977C15.3419 3.10665 16.32 3.91543 16.6191 5.0459L17.8096 9.5459L17.8486 9.70898C18.19 11.3953 16.9014 12.9998 15.1523 13H11.8262L12.624 15.167L12.6982 15.4033C13.0137 16.593 12.4564 17.8602 11.335 18.4209C11.0282 18.5741 10.6568 18.4997 10.4326 18.2402L6.16797 13.3037C6.0553 13.173 5.95656 13.0314 5.87109 12.8838C5.67782 12.9573 5.46907 13 5.25 13H3.75C2.7835 13 2 12.2165 2 11.25V4.75C2 3.7835 2.7835 3 3.75 3H5.25ZM8.25 4.5C7.55921 4.5 7 5.05921 7 5.75V11.25C7 11.302 6.99663 11.3534 6.99219 11.4043C6.9967 11.4376 6.99999 11.4714 7 11.5059C7 11.8055 7.10788 12.0961 7.30371 12.3232L11.0889 16.7061C11.2682 16.4426 11.3333 16.1089 11.248 15.7871L11.2158 15.6855L10.0459 12.5088C9.9614 12.2789 9.99473 12.0222 10.1348 11.8213C10.275 11.6201 10.5048 11.5 10.75 11.5H15.1523C15.9214 11.4998 16.4943 10.8172 16.3896 10.0781L16.3604 9.92969L15.1689 5.42969C15.033 4.91615 14.5884 4.54887 14.0664 4.50488L13.9609 4.5H8.25ZM3.75 4.5C3.61193 4.5 3.5 4.61193 3.5 4.75V11.25C3.5 11.3881 3.61193 11.5 3.75 11.5H5.25C5.38807 11.5 5.5 11.3881 5.5 11.25V4.75C5.5 4.61193 5.38807 4.5 5.25 4.5H3.75Z" />
+</svg>

package/src/icons/svg/thumbs-up.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5234 1.6709C10.7489 1.48518 11.0667 1.44516 11.335 1.5791L11.5518 1.7002C12.5272 2.30812 12.9927 3.48614 12.6982 4.59668L12.624 4.83301L11.8262 7H15.1523C16.9014 7.00021 18.19 8.60471 17.8486 10.291L17.8096 10.4541L16.6191 14.9541C16.3 16.1601 15.2081 17 13.9609 17H8.25C7.60952 17 7.02203 16.779 6.55469 16.4121C6.23418 16.7717 5.76958 17 5.25 17H3.75C2.7835 17 2 16.2165 2 15.25V8.75C2 7.7835 2.7835 7 3.75 7H5.25C5.46895 7 5.67791 7.0418 5.87109 7.11524C5.95646 6.96785 6.05549 6.82772 6.16797 6.69727L10.4326 1.75977L10.5234 1.6709ZM3.75 8.5C3.61193 8.5 3.5 8.61193 3.5 8.75V15.25C3.5 15.3881 3.61193 15.5 3.75 15.5H5.25C5.38807 15.5 5.5 15.3881 5.5 15.25V8.75C5.5 8.61193 5.38807 8.5 5.25 8.5H3.75ZM7.30371 7.67676C7.1079 7.90393 7 8.19449 7 8.49414C6.99999 8.52797 6.99653 8.56111 6.99219 8.59375C6.99675 8.64525 7 8.69732 7 8.75V14.25L7.00684 14.3779C7.07087 15.0085 7.60244 15.5 8.25 15.5H13.9609C14.5277 15.5 15.024 15.1181 15.1689 14.5703L16.3604 10.0703L16.3896 9.92188C16.4943 9.18275 15.9214 8.50021 15.1523 8.5H10.75C10.5048 8.5 10.275 8.37983 10.1348 8.17871C9.99474 7.97777 9.96143 7.72109 10.0459 7.49121L11.2158 4.31446L11.248 4.21289C11.3333 3.8908 11.2685 3.55656 11.0889 3.29297L7.30371 7.67676Z" />
+</svg>

package/src/icons/svg/view-dashboard.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 11.5C10.3284 11.5 11 12.2122 11 13.0908V14.4092C11 15.2878 10.3284 16 9.5 16H6.5C5.6716 16 5.00005 15.2878 5 14.4092V13.0908C5.00005 12.2122 5.6716 11.5 6.5 11.5H9.5Z" />
+<path d="M15.4688 5.46875C16.3144 5.46875 17 6.15431 17 7V13C17 13.8457 16.3144 14.5312 15.4688 14.5312H13.9688C13.1231 14.5312 12.4375 13.8457 12.4375 13V7C12.4375 6.15431 13.1231 5.46875 13.9688 5.46875H15.4688Z" />
+<path d="M8.95605 4C9.80877 4.00009 10.5 4.67163 10.5 5.5V8.5C10.5 9.32837 9.80877 9.99991 8.95605 10H4.54395C3.69123 9.99991 3 9.32837 3 8.5V5.5C3 4.67163 3.69123 4.00009 4.54395 4H8.95605Z" />
+</svg>

package/src/icons/svg/warning-triangle-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8917 14.5583L12.1833 2.89166C11.9665 2.50292 11.6498 2.17912 11.266 1.95372C10.8822 1.72831 10.4451 1.60947 10 1.60947C9.55489 1.60947 9.11785 1.72831 8.73402 1.95372C8.35019 2.17912 8.03351 2.50292 7.81668 2.89166L1.15001 14.5583C0.925677 14.9367 0.805132 15.3675 0.800551 15.8073C0.795969 16.2472 0.907512 16.6804 1.12392 17.0634C1.34032 17.4463 1.65393 17.7654 2.03308 17.9883C2.41223 18.2113 2.8435 18.3303 3.28335 18.3333H16.7167C17.1601 18.3377 17.5966 18.2241 17.9816 18.0041C18.3666 17.7841 18.6861 17.4657 18.9075 17.0815C19.1289 16.6973 19.244 16.2612 19.2413 15.8178C19.2385 15.3744 19.1178 14.9397 18.8917 14.5583ZM10 6.66666C9.779 6.66666 9.56704 6.75446 9.41076 6.91074C9.25448 7.06702 9.16668 7.27898 9.16668 7.49999V10.8333C9.16668 11.0543 9.25448 11.2663 9.41076 11.4226C9.56704 11.5789 9.779 11.6667 10 11.6667C10.221 11.6667 10.433 11.5789 10.5893 11.4226C10.7455 11.2663 10.8333 11.0543 10.8333 10.8333V7.49999C10.8333 7.27898 10.7455 7.06702 10.5893 6.91074C10.433 6.75446 10.221 6.66666 10 6.66666ZM9.53704 13.4738C9.67408 13.3822 9.8352 13.3333 10 13.3333C10.221 13.3333 10.433 13.4211 10.5893 13.5774C10.7455 13.7337 10.8333 13.9456 10.8333 14.1667C10.8333 14.3315 10.7845 14.4926 10.6929 14.6296C10.6013 14.7667 10.4712 14.8735 10.3189 14.9366C10.1666 14.9996 9.99909 15.0161 9.83744 14.984C9.67579 14.9518 9.5273 14.8725 9.41076 14.7559C9.29421 14.6394 9.21485 14.4909 9.18269 14.3292C9.15054 14.1676 9.16704 14 9.23011 13.8478C9.29319 13.6955 9.4 13.5653 9.53704 13.4738Z" fill="black"/>
+</svg>

package/src/icons/svg/windows.svg

@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11033_44381)">
+<mask id="mask0_11033_44381" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="2" width="16" height="16">
+<path d="M18 2H2V18H18V2Z"/>
+</mask>
+<g mask="url(#mask0_11033_44381)">
+<path d="M2 2H9.58482V9.58154H2V2ZM10.4152 2H18V9.58154H10.4152V2ZM2 10.4152H9.58482V18H2V10.4152ZM10.4152 10.4152H18V18H10.4152"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_11033_44381">
+<rect width="16" height="16" transform="translate(2 2)"/>
+</clipPath>
+</defs>
+</svg>

package/src/integration-compact-info-button.tsx

@@ -34,7 +34,9 @@ export const IntegrationCompactInfoButton: React.FC<{
   if (error) {
     iconNode = <WarningIcon color={colors.errorButtonColor} iconSize={18} containerSize={24} />;
   } else if (loading) {
-    iconNode = <Spinner color={colors.accentTextColor} backgroundColor={colors.mainBg} size={16} containerSize={24} />;
+    iconNode = (
+      <Spinner color={colors.accentTextColor} backgroundColor={colors.mainBg} iconSize={16} containerSize={24} />
+    );
   }
 
   const className = cx(buttonCss, loading && loadingCss);

package/src/layout-styles.ts

@@ -0,0 +1,23 @@
+import {css} from "@linaria/core";
+import {
+  layout,
+  listRowSurfaceFontSizeVar,
+  sidebarMenuItemHeightVar,
+  sidebarMenuIconSizeVar,
+  textStyles,
+} from "./design-system";
+import {mobileRootClassName} from "./mobile-styles";
+
+export const layoutStyles = css`
+  :global() {
+    html:root {
+      ${sidebarMenuItemHeightVar}: ${layout.newMenuItemHeight}px;
+      ${sidebarMenuIconSizeVar}: ${layout.newMenuIconSize}px;
+      ${listRowSurfaceFontSizeVar}: ${textStyles.regular.fontSize}px;
+      &.${mobileRootClassName} {
+        ${sidebarMenuItemHeightVar}: ${layout.mobileSidebarMenuItemHeight}px;
+        ${sidebarMenuIconSizeVar}: ${layout.mobileSidebarIconSize}px;
+      }
+    }
+  }
+`;

package/src/lists/list-row-surface.tsx

@@ -1,6 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
-import {border, space, textStyles, themeVars, transition} from "../design-system";
+import {border, layoutVars, space, textStyles, themeVars, transition} from "../design-system";
 
 interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
@@ -28,6 +28,7 @@ export const listRowSurfaceStylesBase = css`
   padding: 0 ${space.s4}px;
   column-gap: ${space.s4}px;
   ${{...textStyles.regular}};
+  font-size: ${layoutVars.listRowSurfaceFontSize};
   color: ${themeVars.textColor};
   border-radius: ${border.radius6}px;
   transition: background-color ${transition};

package/src/loaders.tsx

@@ -105,7 +105,7 @@ const ContainerSpinner = styled.div<{containerSize: number}>`
 `;
 
 type Props = {
-  size?: number;
+  iconSize?: number;
   containerSize?: number;
   width?: number;
   color?: string;
@@ -114,7 +114,7 @@ type Props = {
 
 export const Spinner = memo<Props>(
   ({
-    size = 20,
+    iconSize = 20,
     containerSize = 15,
     width = 2,
     color = themeVars.iconColor,
@@ -122,14 +122,14 @@ export const Spinner = memo<Props>(
   }) => {
     const style = useMemo(() => {
       return {
-        width: size,
-        height: size,
-        ...getShiftStyle({elementSize: size, containerSize}),
+        width: iconSize,
+        height: iconSize,
+        ...getShiftStyle({elementSize: iconSize, containerSize}),
         borderWidth: width,
         borderColor: backgroundColor,
         borderTopColor: color,
       };
-    }, [backgroundColor, color, containerSize, size, width]);
+    }, [backgroundColor, color, containerSize, iconSize, width]);
 
     return (
       <ContainerSpinner containerSize={containerSize}>

package/src/logo.tsx

@@ -10,40 +10,47 @@ export const Logo: FC<LogoProps> = ({size = 40}) => {
   return (
     <svg width={size} height={size} viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M4.03423 14.4218C3.21412 13.9208 2.98021 12.7899 3.50892 12.0007L9.78271 2.68903C10.3144 1.96674 11.3497 1.78689 12.0902 2.296C12.8324 2.80633 13.0464 3.84401 12.577 4.61037L6.30323 13.9221C5.81148 14.6516 4.79323 14.8855 4.03423 14.4218Z"
+        d="M3.5181 14.7077C2.61266 14.1545 2.35441 12.906 2.93813 12.0346L9.86469 1.75412C10.4517 0.956677 11.5947 0.758115 12.4123 1.3202C13.2317 1.88362 13.468 3.02927 12.9497 3.87537L6.02318 14.156C5.48027 14.9614 4.35607 15.2196 3.5181 14.7077Z"
         fill="#4FC5B3"
       />
       <path
-        d="M12.5824 5.76052L14.4262 5.62076C15.0707 5.57197 15.7022 5.909 16.0235 6.47175C16.4824 7.27568 16.2062 8.3398 15.4042 8.80787L7.37161 13.4944L12.5824 5.76052Z"
+        d="M12.9561 5.1453L14.9917 4.99099C15.7033 4.93713 16.4005 5.30922 16.7552 5.93053C17.2619 6.8181 16.9569 7.99294 16.0715 8.50971L7.20312 13.6839L12.9561 5.1453Z"
         fill="#4FC5B3"
       />
       <path
-        d="M7.9007 15.2941L7.54998 14.143L9.39081 13.069L10.9608 13.6928L11.1421 14.2861C11.4113 15.1703 10.9111 16.1473 10.0244 16.4244C9.13418 16.6992 8.17086 16.1782 7.9007 15.2941Z"
+        d="M7.78663 15.671L7.39941 14.4001L9.43178 13.2144L11.1651 13.9031L11.3653 14.5581C11.6625 15.5343 11.1102 16.6129 10.1313 16.9189C9.14845 17.2223 8.08489 16.6471 7.78663 15.671Z"
         fill="#4FC5B3"
       />
       <path
-        d="M13.8573 10.463L10.1048 12.6524L13.1951 13.8803C14.1762 14.262 15.2829 13.6203 15.4739 12.6003C15.6223 11.8078 15.1831 10.9898 14.4313 10.6908L13.8573 10.463Z"
+        d="M14.3627 10.3369L10.2197 12.7541L13.6316 14.1098C14.7147 14.5312 15.9366 13.8227 16.1475 12.6966C16.3113 11.8216 15.8264 10.9185 14.9964 10.5884L14.3627 10.3369Z"
         fill="#4FC5B3"
       />
       <path
-        d="M6.62886 6.21191L4.19346 9.82661C3.94456 9.84546 3.69329 9.87829 3.44344 9.87829C2.53771 9.87954 1.78415 9.13161 1.75116 8.23166C1.71817 7.33154 2.41483 6.52941 3.31826 6.46286L6.62886 6.21191Z"
+        d="M6.38255 5.64331L3.69375 9.63411C3.41895 9.65492 3.14154 9.69117 2.86569 9.69117C1.86572 9.69255 1.03376 8.8668 0.997336 7.87321C0.960913 6.87944 1.73006 5.99385 2.72749 5.92037L6.38255 5.64331Z"
         fill="#4FC5B3"
       />
       <path
-        d="M7.47702 2.86321L8.28896 3.74803L7.052 5.58397L5.46788 5.70755L4.99456 5.19028C4.36761 4.50647 4.40795 3.40642 5.08509 2.77166C5.76095 2.13811 6.85128 2.1807 7.47702 2.86321Z"
+        d="M7.31897 1.94643L8.21539 2.92332L6.84973 4.95028L5.10078 5.08672L4.57821 4.51563C3.88603 3.76067 3.93057 2.54616 4.67816 1.84536C5.42435 1.14589 6.62812 1.19291 7.31897 1.94643Z"
         fill="#4FC5B3"
       />
     </svg>
   );
 };
 
-const logoPadding = (layout.newMenuIconSize - layout.logoSize) / 2;
-
 export const logoContainerStyle = css`
   ${{
-    padding: logoPadding,
     width: layout.newMenuIconSize,
     height: layout.newMenuIconSize,
     lineHeight: 0,
   }}
 `;
+
+export const mobileLogoSize = 28;
+
+export const mobileLogoContainerStyle = css`
+  ${{
+    width: mobileLogoSize,
+    height: mobileLogoSize,
+    lineHeight: 0,
+  }}
+`;

package/src/mobile-styles.ts

@@ -0,0 +1,2 @@
+export const mobileRootClassName = "fibery-mobile";
+export const mobileRootSelector = `.${mobileRootClassName}`;

package/src/new-badge.tsx

@@ -1,17 +1,14 @@
 import {css} from "@linaria/core";
-import {fontWeight, space, textStyles, themeVars} from "./design-system";
+import {space, textStyles, themeVars} from "./design-system";
 
 const newBadgeStyle = css`
-  ${textStyles.heading7}
-  text-transform: none;
-  font-weight: ${fontWeight.medium};
+  ${textStyles.heading8}
   display: inline-block;
-  padding: ${space.s2}px 4.5px ${space.s2}px 5px;
+  padding: ${space.s2}px 5px;
   color: ${themeVars.colorTextBadgeNeutral};
   background-color: ${themeVars.colorBgBadgeNeutral};
-  //border: 0.5px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
   vertical-align: text-top;
-  border-radius: 4px;
+  border-radius: ${space.s4}px;
 `;
 
 type Props = {children: React.ReactNode};

package/src/number-input/text-area-auto-sized.tsx

@@ -0,0 +1,47 @@
+import {useEffect, useMemo, useRef} from "react";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {hiddenCss, inputCss, textAreaCss} from "./styles";
+import {css, cx} from "@linaria/core";
+import {Stack} from "./stack";
+import {invalidInputClass} from "./edit-unit-styles";
+
+type Props = {
+  width?: number;
+  invalid?: boolean;
+  autoSelect?: boolean;
+} & React.ComponentProps<"textarea">;
+
+export const TextAreaAutoSized = ({value, placeholder, invalid, autoSelect, ...rest}: Props) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const initialValue = useRef(value);
+
+  const hiddenValue = useMemo(() => {
+    return !value || !initialValue.current ? placeholder : value;
+  }, [placeholder, value]);
+
+  useEffect(() => {
+    if (autoSelect && ref.current) {
+      ref.current.select();
+    }
+  }, [autoSelect]);
+
+  return (
+    <Stack
+      className={css`
+        width: 100%;
+      `}
+      bottom={<div className={cx(inputCss, textAreaCss, hiddenCss)}>{hiddenValue}</div>}
+      top={
+        <textarea
+          ref={ref}
+          rows={1} // Allows textarea to shrink to 1 row if there is only 1 row (otherwise it has min 2 by default)
+          value={value}
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, textAreaCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};

package/src/number-input/text-input-auto-sized.tsx

@@ -0,0 +1,49 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {Stack} from "./stack";
+import {cx} from "@linaria/core";
+import {hiddenCss, inputCss, textInlineCss} from "./styles";
+import {invalidInputClass} from "./edit-unit-styles";
+import {useEffect, useMemo, useRef} from "react";
+
+type Props = {
+  value?: string;
+  width?: number;
+  invalid?: boolean;
+  autoSelect?: boolean;
+} & Omit<React.ComponentProps<"input">, "value">;
+
+export const TextInputAutoSized = ({value, placeholder, invalid, autoSelect, ...rest}: Props) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const hiddenValue = useMemo(() => {
+    let hiddenValue = placeholder || "";
+    if (value && value.length > hiddenValue.length - 1) {
+      hiddenValue = value;
+    }
+    return hiddenValue;
+  }, [placeholder, value]);
+
+  useEffect(() => {
+    if (autoSelect && ref.current) {
+      ref.current.select();
+    }
+  }, [autoSelect]);
+
+  return (
+    <Stack
+      bottom={<div className={cx(inputCss, textInlineCss, hiddenCss)}>{hiddenValue}</div>}
+      top={
+        <input
+          ref={ref}
+          size={1} // Allows input to shrink (otherwise it has size 20 by default)
+          value={value || ""}
+          type="text"
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};

package/src/palette.ts

@@ -1,33 +1,33 @@
 export const slate = {
-  slateBase: "hsl(0, 0%, 99%)",
-  slate1: "hsl(206, 30%, 99%)",
-  slate2: "hsl(210, 17%, 98%)",
-  slate3: "hsl(209, 13%, 95%)",
-  slate4: "hsl(209, 12%, 93%)",
-  slate5: "hsl(208, 12%, 91%)",
-  slate6: "hsl(208, 11%, 89%)",
-  slate7: "hsl(207, 11%, 86%)",
-  slate8: "hsl(205, 11%, 78%)",
-  slate9: "hsl(205, 8%, 62%)",
-  slate10: "hsl(205, 9%, 47%)",
-  slate11: "hsl(204, 14%, 37%)",
-  slate12: "hsl(200, 7%, 9%)",
+  slateBase: "hsl(0, 0%, 100%)",
+  slate1: "hsl(206, 0%, 99%)",
+  slate2: "hsl(210, 0%, 97%)",
+  slate3: "hsl(209, 0%, 95%)",
+  slate4: "hsl(209, 0%, 93%)",
+  slate5: "hsl(208, 0%, 91%)",
+  slate6: "hsl(208, 0%, 89%)",
+  slate7: "hsl(207, 0%, 86%)",
+  slate8: "hsl(205, 0%, 78%)",
+  slate9: "hsl(205, 0%, 62%)",
+  slate10: "hsl(205, 0%, 47%)",
+  slate11: "hsl(204, 0%, 37%)",
+  slate12: "hsl(200, 0%, 9%)",
 } as const;
 
 export const slateDark = {
-  slateBase: "hsl(0, 0%, 3%)",
-  slate1: "hsl(200, 7%, 9%)",
-  slate2: "hsl(195, 7%, 11%)",
-  slate3: "hsl(197, 7%, 14%)",
-  slate4: "hsl(198, 7%, 16%)",
-  slate5: "hsl(199, 6%, 18%)",
-  slate6: "hsl(201, 6%, 20%)",
-  slate7: "hsl(203, 6%, 24%)",
-  slate8: "hsl(207, 6%, 32%)",
-  slate9: "hsl(206, 6%, 44%)",
-  slate10: "hsl(206, 5%, 50%)",
-  slate11: "hsl(206, 6%, 63%)",
-  slate12: "hsl(210, 6%, 93%)",
+  slateBase: "hsl(0, 0%, 5%)",
+  slate1: "hsl(200, 0%, 9%)",
+  slate2: "hsl(195, 0%, 11%)",
+  slate3: "hsl(197, 0%, 14%)",
+  slate4: "hsl(198, 0%, 16%)",
+  slate5: "hsl(199, 0%, 18%)",
+  slate6: "hsl(201, 0%, 20%)",
+  slate7: "hsl(203, 0%, 24%)",
+  slate8: "hsl(207, 0%, 32%)",
+  slate9: "hsl(206, 0%, 44%)",
+  slate10: "hsl(206, 0%, 50%)",
+  slate11: "hsl(206, 0%, 63%)",
+  slate12: "hsl(210, 0%, 93%)",
 } as const;
 
 export const teal = {
@@ -61,33 +61,33 @@ export const tealDark = {
 } as const;
 
 export const indigo = {
-  indigo1: "hsl(225, 60%, 99%)",
-  indigo2: "hsl(223, 100%, 99%)",
-  indigo3: "hsl(223, 98%, 97%)",
-  indigo4: "hsl(223, 93%, 95%)",
-  indigo5: "hsl(224, 87%, 92%)",
-  indigo6: "hsl(224, 82%, 88%)",
-  indigo7: "hsl(225, 77%, 82%)",
-  indigo8: "hsl(226, 75%, 75%)",
-  indigo9: "hsl(226, 70%, 56%)",
-  indigo10: "hsl(226, 59%, 51%)",
-  indigo11: "hsl(226, 55%, 45%)",
-  indigo12: "hsl(226, 62%, 17%)",
+  indigo1: "hsl(220, 60%, 99%)",
+  indigo2: "hsl(220, 90%, 99%)",
+  indigo3: "hsl(220, 88%, 97%)",
+  indigo4: "hsl(220, 83%, 95%)",
+  indigo5: "hsl(220, 77%, 92%)",
+  indigo6: "hsl(220, 72%, 88%)",
+  indigo7: "hsl(220, 67%, 82%)",
+  indigo8: "hsl(220, 65%, 75%)",
+  indigo9: "hsl(220, 62%, 56%)",
+  indigo10: "hsl(220, 59%, 51%)",
+  indigo11: "hsl(220, 55%, 45%)",
+  indigo12: "hsl(220, 62%, 17%)",
 } as const;
 
 export const indigoDark = {
-  indigo1: "hsl(229, 24%, 10%)",
-  indigo2: "hsl(230, 36%, 13%)",
-  indigo3: "hsl(228, 43%, 18%)",
-  indigo4: "hsl(227, 47%, 21%)",
-  indigo5: "hsl(227, 50%, 24%)",
-  indigo6: "hsl(226, 53%, 28%)",
-  indigo7: "hsl(226, 56%, 35%)",
-  indigo8: "hsl(226, 58%, 44%)",
-  indigo9: "hsl(226, 70%, 56%)",
-  indigo10: "hsl(227, 75%, 62%)",
-  indigo11: "hsl(228, 100%, 76%)",
-  indigo12: "hsl(226, 83%, 96%)",
+  indigo1: "hsl(222, 24%, 10%)",
+  indigo2: "hsl(222, 36%, 13%)",
+  indigo3: "hsl(222, 43%, 18%)",
+  indigo4: "hsl(222, 47%, 21%)",
+  indigo5: "hsl(222, 45%, 24%)",
+  indigo6: "hsl(222, 43%, 28%)",
+  indigo7: "hsl(222, 50%, 35%)",
+  indigo8: "hsl(222, 55%, 44%)",
+  indigo9: "hsl(222, 60%, 56%)",
+  indigo10: "hsl(222, 65%, 62%)",
+  indigo11: "hsl(222, 70%, 76%)",
+  indigo12: "hsl(222, 83%, 96%)",
 } as const;
 
 export const red = {

package/src/popup/index.tsx

@@ -139,6 +139,7 @@ function MobilePopup({
         className={cx(
           css`
             border-top: ${themeVars.separators.opacity5};
+            min-width: 0;
           `,
           mobilePopupContentClassName
         )}

package/src/rich-text-embed-error.tsx

@@ -3,7 +3,7 @@ import {border, space, themeVars} from "./design-system";
 import ImageXmark from "./icons/react/ImageXmark";
 import {type ReactNode} from "react";
 
-const wrapperStyle = css`
+export const richTextEmbedErrorStyle = css`
   height: 380px;
   display: flex;
   flex-direction: column;
@@ -36,7 +36,7 @@ type Props = {
 
 export const RichTextEmbedError = ({isSelected, label}: Props) => {
   return (
-    <div className={cx(wrapperStyle, isSelected && selectedStyle)}>
+    <div className={cx(richTextEmbedErrorStyle, isSelected && selectedStyle)}>
       <ImageXmark iconSize={32} color={themeVars.disabledTextColor} />
       <div className={textStyle}>{label}</div>
     </div>