@fibery/ui-kit 4.1.0 → 4.3.0

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

@@ -0,0 +1,5 @@
+<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"/>
+ <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"/>
+ <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"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<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"/>
+</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"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<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"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<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"/>
+</svg>

package/src/icons/svg/simple-compass.svg

@@ -1,5 +1,5 @@
 <svg class="Icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.24138 9.65517L10 4.13793L12.7586 9.65517H7.24138Z" fill="#6E7A83"/>
-<path d="M7.24138 11.0345L10 16.5517L12.7586 11.0345H7.24138Z" fill="#C1C8CD"/>
+<path d="M7.24138 9.65517L10 4.13793L12.7586 9.65517H7.24138Z"/>
+<path d="M7.24138 11.0345L10 16.5517L12.7586 11.0345H7.24138Z"/>
 </svg>
 

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

@@ -1,3 +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"/>
+<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"/>
 </svg>

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

@@ -1,3 +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"/>
+<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"/>
 </svg>

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

@@ -1,3 +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"/>
+<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"/>
 </svg>

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

@@ -1,3 +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"/>
+<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"/>
 </svg>

package/src/icons/svg/value-edit.svg

@@ -1,3 +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.5 6.25C3.5 5.83579 3.83579 5.5 4.25 5.5H15.75C16.1642 5.5 16.5 5.83579 16.5 6.25V8.25C16.5 8.66421 16.8358 9 17.25 9C17.6642 9 18 8.66421 18 8.25V6.25C18 5.00736 16.9926 4 15.75 4H4.25C3.00736 4 2 5.00736 2 6.25V11.75C2 12.9926 3.00736 14 4.25 14H12C12.4142 14 12.75 13.6642 12.75 13.25C12.75 12.8358 12.4142 12.5 12 12.5H4.25C3.83579 12.5 3.5 12.1642 3.5 11.75V6.25ZM5.75 8.25C5.33579 8.25 5 8.58579 5 9C5 9.41421 5.33579 9.75 5.75 9.75H8.25C8.66421 9.75 9 9.41421 9 9C9 8.58579 8.66421 8.25 8.25 8.25H5.75ZM14.75 10.25C14.3358 10.25 14 10.5858 14 11C14 11.4142 14.3358 11.75 14.75 11.75H15.75V16.25H14.75C14.3358 16.25 14 16.5858 14 17C14 17.4142 14.3358 17.75 14.75 17.75H18.25C18.6642 17.75 19 17.4142 19 17C19 16.5858 18.6642 16.25 18.25 16.25H17.25V11.75H18.25C18.6642 11.75 19 11.4142 19 11C19 10.5858 18.6642 10.25 18.25 10.25H14.75Z" fill="black"/>
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 6.25C3.5 5.83579 3.83579 5.5 4.25 5.5H15.75C16.1642 5.5 16.5 5.83579 16.5 6.25V8.25C16.5 8.66421 16.8358 9 17.25 9C17.6642 9 18 8.66421 18 8.25V6.25C18 5.00736 16.9926 4 15.75 4H4.25C3.00736 4 2 5.00736 2 6.25V11.75C2 12.9926 3.00736 14 4.25 14H12C12.4142 14 12.75 13.6642 12.75 13.25C12.75 12.8358 12.4142 12.5 12 12.5H4.25C3.83579 12.5 3.5 12.1642 3.5 11.75V6.25ZM5.75 8.25C5.33579 8.25 5 8.58579 5 9C5 9.41421 5.33579 9.75 5.75 9.75H8.25C8.66421 9.75 9 9.41421 9 9C9 8.58579 8.66421 8.25 8.25 8.25H5.75ZM14.75 10.25C14.3358 10.25 14 10.5858 14 11C14 11.4142 14.3358 11.75 14.75 11.75H15.75V16.25H14.75C14.3358 16.25 14 16.5858 14 17C14 17.4142 14.3358 17.75 14.75 17.75H18.25C18.6642 17.75 19 17.4142 19 17C19 16.5858 18.6642 16.25 18.25 16.25H17.25V11.75H18.25C18.6642 11.75 19 11.4142 19 11C19 10.5858 18.6642 10.25 18.25 10.25H14.75Z"/>
 </svg>

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

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20"  xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9633 10.9027C14.8539 10.9028 15.7085 11.2564 16.3383 11.8861C16.9681 12.5159 17.3216 13.3705 17.3217 14.2611C17.3217 15.1517 16.968 16.0063 16.3383 16.6361C15.7085 17.2659 14.8539 17.6195 13.9633 17.6195C13.0726 17.6195 12.2181 17.2659 11.5883 16.6361C10.9585 16.0063 10.6049 15.1518 10.6049 14.2611C10.6049 13.3705 10.9585 12.5159 11.5883 11.8861C12.2181 11.2564 13.0727 10.9027 13.9633 10.9027Z" />
+<path d="M8.02774 11.1576C8.12983 11.1576 8.23138 11.1779 8.32559 11.2172C8.41966 11.2565 8.50486 11.3146 8.57657 11.3871H8.56778C8.64011 11.4588 8.69748 11.5441 8.73672 11.6381C8.77604 11.7323 8.7963 11.8338 8.7963 11.9359C8.79625 12.0379 8.77597 12.1387 8.73672 12.2328C8.69742 12.327 8.64031 12.413 8.56778 12.4848L6.79044 14.2611L8.56778 16.0385C8.64012 16.1101 8.69747 16.1955 8.73672 16.2894C8.77604 16.3837 8.7963 16.4852 8.7963 16.5873C8.79627 16.6892 8.77596 16.7901 8.73672 16.8842C8.69744 16.9783 8.64027 17.0643 8.56778 17.1361C8.42312 17.2798 8.22678 17.3607 8.02286 17.3607C7.81906 17.3607 7.62351 17.2797 7.47891 17.1361L5.70157 15.3588L3.9252 17.1361C3.77966 17.2816 3.58218 17.3636 3.37637 17.3637C3.17058 17.3637 2.9731 17.2816 2.82755 17.1361C2.68202 16.9906 2.60005 16.7931 2.60001 16.5873C2.60001 16.3814 2.68199 16.184 2.82755 16.0385L4.60391 14.2611L2.82755 12.4848C2.68205 12.3393 2.6001 12.1417 2.60001 11.9359C2.60001 11.7301 2.68204 11.5327 2.82755 11.3871C2.97312 11.2415 3.1705 11.1596 3.37637 11.1596C3.58219 11.1596 3.77966 11.2416 3.9252 11.3871L5.70157 13.1635L7.47891 11.3871C7.55072 11.3145 7.63665 11.2565 7.73087 11.2172C7.82495 11.178 7.92581 11.1576 8.02774 11.1576Z" />
+<path d="M6.99551 2.90272C8.19844 2.90285 8.8002 3.50435 8.8002 4.70741V7.29334C8.8002 8.49641 8.19844 9.0979 6.99551 9.09803H4.4086C3.20559 9.09794 2.60391 8.49645 2.60391 7.29334V4.70741C2.60391 3.5043 3.20559 2.90281 4.4086 2.90272H6.99551Z" />
+<path d="M12.8471 3.10682C13.3123 2.29778 14.6143 2.29767 15.0795 3.10682L17.4242 7.16346C17.5394 7.35931 17.6 7.58273 17.6 7.80995C17.6 8.03722 17.5395 8.26057 17.4242 8.45643C17.1824 8.84713 16.7541 9.098 16.2982 9.09803H11.6186C11.1628 9.09797 10.7349 8.85634 10.5023 8.45643C10.387 8.26056 10.3266 8.03723 10.3266 7.80995C10.3266 7.58267 10.3871 7.35935 10.5023 7.16346L12.8471 3.10682Z" />
+</svg>

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

@@ -1,5 +1,5 @@
 <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4 5.5C4 4.67157 4.67157 4 5.5 4H9.5C10.3284 4 11 4.67157 11 5.5C11 6.32843 10.3284 7 9.5 7H5.5C4.67157 7 4 6.32843 4 5.5Z" fill="black"/>
-    <path d="M4 14.5C4 13.6716 4.67157 13 5.5 13H11.5C12.3284 13 13 13.6716 13 14.5C13 15.3284 12.3284 16 11.5 16H5.5C4.67157 16 4 15.3284 4 14.5Z" fill="black"/>
-    <path d="M4 10C4 9.17157 4.67157 8.5 5.5 8.5H14.5C15.3284 8.5 16 9.17157 16 10C16 10.8284 15.3284 11.5 14.5 11.5H5.5C4.67157 11.5 4 10.8284 4 10Z" fill="black"/>
+ <path d="M4 5.5C4 4.67157 4.67157 4 5.5 4H9.5C10.3284 4 11 4.67157 11 5.5C11 6.32843 10.3284 7 9.5 7H5.5C4.67157 7 4 6.32843 4 5.5Z"/>
+ <path d="M4 14.5C4 13.6716 4.67157 13 5.5 13H11.5C12.3284 13 13 13.6716 13 14.5C13 15.3284 12.3284 16 11.5 16H5.5C4.67157 16 4 15.3284 4 14.5Z"/>
+ <path d="M4 10C4 9.17157 4.67157 8.5 5.5 8.5H14.5C15.3284 8.5 16 9.17157 16 10C16 10.8284 15.3284 11.5 14.5 11.5H5.5C4.67157 11.5 4 10.8284 4 10Z"/>
 </svg>

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

@@ -1,3 +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"/>
+ <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"/>
 </svg>

package/src/images-gallery/images-gallery.tsx

@@ -3,7 +3,6 @@ import {noop} from "@fibery/helpers/src/_";
 import "photoswipe/style.css";
 import {createContext} from "@fibery/react/src/create-context";
 import {css} from "@linaria/core";
-/* eslint-disable max-lines */
 import PhotoSwipeLightbox, {type PhotoSwipeEventsMap, type PhotoSwipeOptions} from "photoswipe/lightbox";
 import type {PropsWithChildren} from "react";
 import {useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";

package/src/images-gallery/slide-buttons.tsx

@@ -8,19 +8,21 @@ import {Button} from "../button/button";
 import {IconButton} from "../button/icon-button";
 import {copyUrlToClipboard} from "../copy-to-clipboard";
 import {space} from "../design-system";
+import {canShareFile, shareFile} from "../file-item/share-file";
+import ArrowBack from "../icons/react/arrow-back";
 import ArrowForward from "../icons/react/arrow-forward";
-import Back from "../icons/react/back";
 import Close from "../icons/react/close";
 import Link from "../icons/react/link";
 import LoupeZoomIn from "../icons/react/loupe-zoom-in";
 import LoupeZoomOut from "../icons/react/loupe-zoom-out";
-import RicheditorOpenLink from "../icons/react/richeditor-open-link";
+import RicheditorOpenLink from "../icons/react/open-link";
+import Share from "../icons/react/share";
 import {safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
 import {ThemeProvider} from "../theme-provider";
 import type {ThemeMode} from "../theme-settings";
 import {ToastProvider, useToast} from "../toast/toast-provider";
 import type {ToastQueue} from "../toast/toast-queue";
-import {useIsPhone} from "../use-is-phone";
+import {isPhoneApp, isPhoneMode} from "../use-is-phone";
 
 const barClassName = css`
   position: absolute;
@@ -78,7 +80,7 @@ export function SlideButtons({
     };
   }, [items, pswp]);
 
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
 
   return (
     <ToastProvider toastQueue={toastQueue}>
@@ -90,17 +92,23 @@ export function SlideButtons({
             {slideState.actions ? (
               <SlideActionsMenu actions={slideState.actions} uiHandlers={uiHandlers} />
             ) : slideState.src ? (
-              <IconButton
-                size={isPhone ? "large" : "medium"}
-                color="neutral"
-                variant="soft"
-                onClick={() => {
-                  window.open(slideState.src, "_blank");
-                  uiHandlers.showUI();
-                }}
-              >
-                <RicheditorOpenLink />
-              </IconButton>
+              isPhoneApp() ? (
+                canShareFile() ? (
+                  <ShareButton pswp={pswp} showUI={uiHandlers.showUI} />
+                ) : null
+              ) : (
+                <IconButton
+                  size={isPhone ? "large" : "medium"}
+                  color="neutral"
+                  variant="soft"
+                  onClick={() => {
+                    window.open(slideState.src, "_blank");
+                    uiHandlers.showUI();
+                  }}
+                >
+                  <RicheditorOpenLink />
+                </IconButton>
+              )
             ) : null}
 
             <IconButton
@@ -126,7 +134,7 @@ export function SlideButtons({
               color="neutral"
               variant="soft"
             >
-              <Back />
+              <ArrowBack />
             </IconButton>
           </div>
           <div className="pswp__button--arrow--next pswp__button--arrow">
@@ -157,7 +165,7 @@ function SlideActionsMenu({
   uiHandlers: {showUI: () => void; setForceShowUI: (value: boolean) => void};
 }) {
   const [container, setContainer] = useState<HTMLDivElement | null>();
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
   return (
     <div>
       <ActionsMenu
@@ -178,10 +186,35 @@ function SlideActionsMenu({
   );
 }
 
+function ShareButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
+  const toast = useToast();
+  const isPhone = isPhoneMode();
+  return (
+    <IconButton
+      size={isPhone ? "large" : "medium"}
+      color="neutral"
+      variant="soft"
+      onClick={() => {
+        showUI();
+        const src = pswp.currSlide?.data.src;
+        if (!src) {
+          toast.error({title: "Unable to share file"});
+          return;
+        }
+        shareFile(src, pswp.currSlide?.data.label, {toast}).catch((error) =>
+          toast.error({title: "Unable to share file", subTitle: error.message})
+        );
+      }}
+    >
+      <Share />
+    </IconButton>
+  );
+}
+
 function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const [zoomed, setZoomed] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
 
   useEffect(() => {
     if (!pswp) {
@@ -231,7 +264,7 @@ function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
 
 function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const toast = useToast();
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
   return (
     <Button
       onClick={() => {

package/src/is-in-popup.ts

@@ -3,9 +3,6 @@ import type {$TSFixMe} from "./tsfixme";
 
 const selectors = [
   ".vzdrp-popover",
-  ".prosemirror-popover",
-  ".ant-modal-wrap",
-  ".ant-dropdown",
   ".react-select-menu",
   "[data-radix-popper-content-wrapper]",
   `.${basicPopupContainerClassName}`,

package/src/loading-sausage.tsx

@@ -3,7 +3,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cn from "classnames";
 import type {ComponentType, ReactNode} from "react";
-import {memo, useRef} from "react";
+import {memo, useState} from "react";
 
 import {space, themeVars} from "./design-system";
 
@@ -124,11 +124,11 @@ export const LoadingSausage = memo(function LoadingSausage({
   margins = true,
   animateAppearance = false,
 }: LoadingSausageProps): JSX.Element {
-  const widthRef = useRef(getRandomInt(minWidth, maxWidth, index));
+  const [width] = useState(() => getRandomInt(minWidth, maxWidth, index));
   return (
     <Container
       height={height}
-      style={{width: widthRef.current, height}}
+      style={{width, height}}
       className={cn(
         loadingSausageStyle,
         inverted ? light : dark,

package/src/mobile-drawer.tsx

@@ -0,0 +1,104 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
+import cx from "classnames";
+import type {ReactElement, ReactNode, Ref} from "react";
+import {Drawer} from "vaul";
+
+import {IconButton} from "./button/icon-button";
+import {border, space, textClasses, themeVars} from "./design-system";
+import CloseIcon from "./icons/react/close";
+import {safeAreaInsetBottomVar, safeAreaInsetTopVar} from "./mobile-styles";
+import {ThemeProvider} from "./theme-provider";
+
+const overlayClassName = css`
+  position: fixed;
+  inset: 0;
+  z-index: 1002;
+  background: ${themeVars.modalBg};
+`;
+
+const contentClassName = css`
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1002;
+  display: grid;
+  grid-template-rows: auto 60px 1fr;
+  height: calc(100% - var(${safeAreaInsetTopVar}) - ${space.s24}px);
+  background: ${themeVars.actionMenuBg};
+  border-top-left-radius: ${border.radius6}px;
+  border-top-right-radius: ${border.radius6}px;
+`;
+
+const handleClassName = css`
+  margin: ${space.s8}px auto 0;
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: ${themeVars.borderSeparator};
+`;
+
+const headerClassName = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s8}px;
+  padding: ${space.s8}px ${space.s8}px ${space.s8}px ${space.s20}px;
+  min-width: 0;
+`;
+
+const titleClassName = css`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const bodyClassName = css`
+  border-top: ${themeVars.borderSeparatorDimmed};
+  min-width: 0;
+  overflow-y: auto;
+  padding-bottom: var(${safeAreaInsetBottomVar});
+`;
+
+export function MobileDrawer({
+  open,
+  onOpenChange,
+  title,
+  trigger,
+  triggerRef,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  trigger?: ReactElement;
+  triggerRef?: Ref<HTMLDivElement>;
+  children: ReactNode;
+}) {
+  return (
+    <Drawer.Root open={open} onOpenChange={onOpenChange} noBodyStyles>
+      {trigger ? (
+        <Drawer.Trigger asChild ref={triggerRef as Ref<HTMLButtonElement>}>
+          {trigger}
+        </Drawer.Trigger>
+      ) : null}
+      <Drawer.Portal>
+        <Drawer.Overlay className={overlayClassName} />
+        <Drawer.Content className={contentClassName} onClick={stopPropagation}>
+          <ThemeProvider portal>
+            <Drawer.Handle className={handleClassName} />
+            <div className={headerClassName}>
+              <Drawer.Title className={cx(textClasses.heading3, titleClassName)}>{title}</Drawer.Title>
+              <IconButton onClick={() => onOpenChange(false)} size="xLarge">
+                <CloseIcon />
+              </IconButton>
+            </div>
+            <div className={bodyClassName}>{children}</div>
+          </ThemeProvider>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}

package/src/number-input/types.ts

@@ -12,7 +12,7 @@ export type NumberInputProps = {
   onChange?: (value: string | null) => void;
 } & Pick<
   React.ComponentProps<"input">,
-  "className" | "autoFocus" | "placeholder" | "style" | "disabled" | "onFocus" | "onBlur" | "onKeyDown"
+  "className" | "autoFocus" | "placeholder" | "style" | "disabled" | "name" | "onFocus" | "onBlur" | "onKeyDown"
 > & {
     // TODO: coming from and, get rid of it after migrating from ant
     wrapClassName?: string;

package/src/palettes/common.ts

@@ -15,7 +15,7 @@ export const common: ThemePaletteBase = {
     //                   its Lc target is re-checked.
     bg: [
       {swatchAlpha: 0.15, minC: 0.02, surfaceLc: 4, colorCodingLc: 4},
-      {swatchAlpha: 0.3, minC: 0.025, surfaceLc: 2, colorCodingLc: 2},
+      {swatchAlpha: 0.3, minC: 0.025, surfaceLc: -2, colorCodingLc: -2},
     ],
     // Swatch's share in fg = mixSrgb(textColor, swatch, swatchAlpha).
     fg: {swatchAlpha: 0.4},
@@ -34,11 +34,11 @@ export const common: ThemePaletteBase = {
     },
     bg: [
       {c: 0.065, Lc: 8},
-      {c: 0.065, Lc: 8},
+      {c: 0.065, Lc: -8},
     ],
     fg: [
       {c: 0.25, Lc: 65},
-      {c: 0.12, Lc: 65},
+      {c: 0.12, Lc: -65},
     ],
     overrides: {
       grey: {

package/src/palettes/diff-colors.test.ts

@@ -8,15 +8,18 @@ import {join} from "node:path";
 
 import {
   computeColorReport,
+  estimateConsoleTableWidth,
   extractColorOrThrow,
   extractLcLabel,
+  fitColorReportToColumns,
   findTestAnchor,
   readSnapshotBaseline,
+  renderLc,
   swatch,
   withColorDiff,
 } from "./diff-colors";
 
-// oxlint-disable-next-line no-control-regex
+// eslint-disable-next-line no-control-regex
 const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
 
 describe("extractColorOrThrow", () => {
@@ -57,6 +60,28 @@ describe("extractColorOrThrow", () => {
   });
 });
 
+describe("renderLc", () => {
+  test("formats negative Lc without duplicate minus", () => {
+    expect(renderLc(-36.94)).toBe("Lc-36.9");
+  });
+
+  test("formats Lc below 10 with two fractional digits", () => {
+    expect(renderLc(4.24)).toBe("Lc+4.24");
+  });
+
+  test("formats Lc below 100 with one fractional digit", () => {
+    expect(renderLc(83.36)).toBe("Lc+83.4");
+  });
+
+  test("formats Lc from 100 without fractional digits", () => {
+    expect(renderLc(105.7)).toBe("Lc+106");
+  });
+
+  test("formats zero Lc with fixed width", () => {
+    expect(renderLc(0)).toBe("Lc=0.00");
+  });
+});
+
 describe("extractLcLabel", () => {
   test("single bgLc=N; prefix", () => {
     expect(extractLcLabel("bgLc=6;         #3F3B3A   | hsl(  12   4%  24%) | oklch(0.36 0.01  34 )"))
@@ -92,6 +117,30 @@ describe("extractLcLabel", () => {
   test("missing semicolon stops parsing", () => {
     expect(extractLcLabel("bgLc=6 #3F3B3A")).toEqual({});
   });
+
+  test("Lc suffix parses contrast and reference label", () => {
+    expect(extractLcLabel("#D9D9D9 | hsl(...) | oklch(...) | Lc+19.9 over #FFFFFF panelBg")).toMatchInlineSnapshot(`
+      {
+        "contrast": "panelBg+19.9",
+      }
+    `);
+  });
+
+  test("Lc suffix falls back to reference color when label is missing", () => {
+    expect(extractLcLabel("#D9D9D9 | hsl(...) | oklch(...) | Lc-2.00 over #171717")).toMatchInlineSnapshot(`
+      {
+        "contrast": "#171717-2.00",
+      }
+    `);
+  });
+
+  test("Lc suffix still parses previous vs spelling", () => {
+    expect(extractLcLabel("#D9D9D9 | hsl(...) | oklch(...) | Lc+19.9 vs #FFFFFF panelBg")).toMatchInlineSnapshot(`
+      {
+        "contrast": "panelBg+19.9",
+      }
+    `);
+  });
 });
 
 describe("swatch", () => {
@@ -132,6 +181,20 @@ describe("computeColorReport", () => {
     expect(read(row.apca)).toBe("42");
   });
 
+  test("Lc suffix produces a diffable over column", () => {
+    const report = computeColorReport(
+      {a: "#574226 | hsl(...) | oklch(...) | Lc-7.30 over #171717 panelBg"},
+      {a: "#574226 | hsl(...) | oklch(...) | Lc-31.2 over #FBA32F card"}
+    );
+    expect(report.length).toBe(1);
+    const row = report[0] as Record<string, {[k: symbol]: () => string}>;
+    const read = (col: object) =>
+      Object.getOwnPropertySymbols(col)
+        .map((s) => (col as Record<symbol, () => string>)[s]())
+        .join("");
+    expect(read(row.contrast)).toBe("card-31.2→panelBg-7.30");
+  });
+
   test("'none' values are skipped", () => {
     const consoleErr = vi.spyOn(console, "error").mockImplementation(() => {});
     expect(computeColorReport({a: "none"}, {a: "#ff0000"})).toEqual([]);
@@ -248,6 +311,77 @@ describe("computeColorReport", () => {
   });
 });
 
+describe("fitColorReportToColumns", () => {
+  const row = {
+    path: "swatches[14] aka Swatch.Yellow.bg",
+    diff: "#574226      #574226",
+    light: " 0.000 =",
+    chroma: " 0.000 =",
+    "hue°": " 0.000 =",
+    "L×C×H": " 0.000 =",
+    "H×C": " 0.000 =",
+    HyAB: " 0.000 =",
+    CIEDE2000: " 0.000 =",
+    contrast: "pek+32.1→card+12.1",
+  };
+  const rows = [row];
+  const omit = (...columns: string[]) => {
+    const hidden = new Set(columns);
+    return [Object.fromEntries(Object.entries(row).filter(([key]) => !hidden.has(key)))];
+  };
+  const keys = (value: readonly object[]) => Object.keys(value[0] ?? {});
+
+  test("does nothing without numeric stdout width", () => {
+    expect(fitColorReportToColumns(rows, 0)).toBe(rows);
+  });
+
+  test("keeps all columns when they already fit", () => {
+    expect(fitColorReportToColumns(rows, estimateConsoleTableWidth(rows))).toBe(rows);
+  });
+
+  test("cuts L×C×H, H×C, and HyAB first", () => {
+    const fitted = fitColorReportToColumns(rows, estimateConsoleTableWidth(omit("L×C×H", "H×C", "HyAB")));
+    expect(keys(fitted)).not.toEqual(expect.arrayContaining(["L×C×H", "H×C", "HyAB"]));
+    expect(keys(fitted)).toEqual(expect.arrayContaining(["light", "chroma", "hue°", "contrast", "CIEDE2000"]));
+  });
+
+  test("cuts light, chroma, and hue after perceptual helper metrics", () => {
+    const fitted = fitColorReportToColumns(
+      rows,
+      estimateConsoleTableWidth(omit("L×C×H", "H×C", "HyAB", "light", "chroma", "hue°"))
+    );
+    expect(keys(fitted)).not.toEqual(expect.arrayContaining(["L×C×H", "H×C", "HyAB", "light", "chroma", "hue°"]));
+    expect(keys(fitted)).toEqual(expect.arrayContaining(["contrast", "CIEDE2000"]));
+  });
+
+  test("cuts CIEDE2000 after the metric groups", () => {
+    const fitted = fitColorReportToColumns(
+      rows,
+      estimateConsoleTableWidth(omit("L×C×H", "H×C", "HyAB", "light", "chroma", "hue°", "CIEDE2000"))
+    );
+    expect(keys(fitted)).not.toEqual(
+      expect.arrayContaining(["L×C×H", "H×C", "HyAB", "light", "chroma", "hue°", "CIEDE2000"])
+    );
+    expect(keys(fitted)).toEqual(expect.arrayContaining(["contrast"]));
+  });
+
+  test("cuts contrast last", () => {
+    const fitted = fitColorReportToColumns(
+      rows,
+      estimateConsoleTableWidth(omit("L×C×H", "H×C", "HyAB", "light", "chroma", "hue°", "contrast", "CIEDE2000"))
+    );
+    expect(keys(fitted)).not.toEqual(
+      expect.arrayContaining(["L×C×H", "H×C", "HyAB", "light", "chroma", "hue°", "contrast", "CIEDE2000"])
+    );
+    expect(keys(fitted)).toEqual(["path", "diff"]);
+  });
+
+  test("leaves the full table when no cut can fit the width", () => {
+    const minimum = omit("L×C×H", "H×C", "HyAB", "light", "chroma", "hue°", "contrast", "CIEDE2000");
+    expect(fitColorReportToColumns(rows, estimateConsoleTableWidth(minimum) - 1)).toBe(rows);
+  });
+});
+
 describe("findTestAnchor", () => {
   test("top-level test", () => {
     const src = `test("foo", () => { expect(1).toBe(1); });\n`;