@fibery/ui-kit 1.37.0 → 1.38.1

package/src/icons/svg/home-filled.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="M14.5898 18.285C16.1974 18.285 17.4999 16.9825 17.5 15.3749V7.54091C17.5 7.04106 17.2954 6.56467 16.9385 6.22157L16.7764 6.0829L11.1074 1.77431C10.4939 1.30732 9.65953 1.27952 9.01855 1.68739L8.89258 1.77431L3.22363 6.0829C2.76783 6.42887 2.5 6.96839 2.5 7.54091V15.3749C2.50006 16.9825 3.80258 18.285 5.41016 18.285H14.5898ZM13.3947 12.5787C13.1202 12.3041 12.6854 12.2868 12.3908 12.5269L12.3342 12.5787C11.0862 13.8266 9.08525 13.8658 7.79025 12.6959L7.6672 12.5787L7.61056 12.5269C7.31598 12.2866 6.88126 12.3041 6.60665 12.5787C6.33205 12.8533 6.31459 13.288 6.55489 13.5826L6.60665 13.6392L6.78536 13.8091C8.66919 15.5114 11.5792 15.4548 13.3947 13.6392L13.4455 13.5826C13.6861 13.288 13.6693 12.8534 13.3947 12.5787Z" />
+</svg>

package/src/icons/svg/keyboard-hide-down.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m12.0192 16.0902c.318-.265.7914-.222 1.0567.0957.2651.3181.2223.7914-.0957 1.0566l-2.98051 2.4834-2.98046-2.4834c-.31772-.2652-.36073-.7386-.09571-1.0566.26511-.3179.73851-.3605 1.05664-.0957l2.01953 1.6826z"/><path d="m5.00848 9.25034c.41401.00024.75.33593.75.74996-.00018.4139-.3361.7498-.75.75h-.00879c-.41396-.0001-.74981-.336-.75-.75 0-.41408.33593-.7498.75-.74996z"/><path d="m11.6667 9.25034c.4141.00016.75.33588.75.74996-.0002.414-.3361.7499-.75.75h-3.33302c-.4141 0-.74982-.3359-.75-.75 0-.41418.33579-.74996.75-.74996z"/><path d="m15.0085 9.25034c.414.00024.75.33593.75.74996-.0002.4139-.3361.7498-.75.75h-.0088c-.414-.0001-.7498-.336-.75-.75 0-.41408.3359-.7498.75-.74996z"/><path d="m5.00848 5.91635c.4139.00025.74983.33609.75.75 0 .41406-.33599.74976-.75.75h-.00879c-.41407-.00016-.75-.33589-.75-.75.00018-.41396.33604-.74983.75-.75z"/><path d="m8.34247 5.91635c.41376.00041.74983.33619.75.75 0 .41396-.33614.74959-.75.75h-.00879c-.41421 0-.75-.33579-.75-.75.00017-.41406.33589-.75.75-.75z"/><path d="m11.6755 5.91635c.4139.00025.7498.33609.75.75 0 .41406-.336.74976-.75.75h-.0088c-.4142 0-.75-.33579-.75-.75.0002-.41406.3359-.75.75-.75z"/><path d="m15.0085 5.91635c.4139.00025.7498.33609.75.75 0 .41406-.336.74976-.75.75h-.0088c-.4141-.00016-.75-.33589-.75-.75.0002-.41396.336-.74983.75-.75z"/><path clip-rule="evenodd" d="m16.6667 2.58334c1.3347 0 2.417 1.08231 2.417 2.417v6.66606c0 1.3347-1.0823 2.4169-2.417 2.4169h-13.33302c-1.33468 0-2.416993-1.0822-2.416993-2.4169v-6.66606c0-1.33469 1.082303-2.417 2.416993-2.417zm-13.33302 1.5c-.50626 0-.91699.41073-.91699.917v6.66606c0 .5062.41072.9169.91699.9169h13.33302c.5063 0 .917-.4107.917-.9169v-6.66606c0-.50627-.4107-.917-.917-.917z" fill-rule="evenodd"/></svg>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 4.25624C12 2.8936 13.3696 2.05149 14.4463 2.75233L17.2158 4.55604C17.7021 4.87287 17.9999 5.44337 18 6.05897V15.7435C18 17.1062 16.6304 17.9484 15.5537 17.2474L13 15.5844V15.7435C13 17.1062 11.6304 17.9484 10.5537 17.2474L8 15.5844V15.7435C8 17.1062 6.63038 17.9484 5.55371 17.2474L2.78418 15.4447C2.29763 15.1279 2.00002 14.5566 2 13.9408V4.25624C2 2.8936 3.36963 2.05149 4.44629 2.75233L7 4.41542V4.25624C7 2.8936 8.36963 2.05149 9.44629 2.75233L12 4.41542V4.25624ZM3.73438 4.04139C3.58056 3.94123 3.38477 4.06156 3.38477 4.25624V13.9408C3.38479 14.0286 3.42687 14.1103 3.49609 14.1557L6.26562 15.9594C6.41942 16.0594 6.61523 15.9382 6.61523 15.7435V6.05897C6.61514 5.97125 6.57313 5.88938 6.50391 5.84413L3.73438 4.04139ZM8.73438 4.04139C8.58056 3.94123 8.38477 4.06156 8.38477 4.25624V13.9408C8.38479 14.0286 8.42687 14.1103 8.49609 14.1557L11.2656 15.9594C11.4194 16.0594 11.6152 15.9382 11.6152 15.7435V6.05897C11.6151 5.97125 11.5731 5.88938 11.5039 5.84413L8.73438 4.04139ZM13.7344 4.04139C13.5806 3.94123 13.3848 4.06156 13.3848 4.25624V13.9408C13.3848 14.0286 13.4269 14.1103 13.4961 14.1557L16.2656 15.9594C16.4194 16.0594 16.6152 15.9382 16.6152 15.7435V6.05897C16.6151 5.97125 16.5731 5.88938 16.5039 5.84413L13.7344 4.04139Z" />
+</svg>

package/src/icons/svg/richeditor/history/redo.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="M15.05 11.225C13.5986 9.80981 11.6485 9.0226 9.62138 9.03351C7.59423 9.04443 5.65279 9.85259 4.21667 11.2833C3.50854 11.9851 2.94262 12.817 2.55 13.7333L2.45 14H0.666666C0.766666 13.6917 0.874998 13.3833 0.999998 13.0833C1.59463 11.6717 2.52608 10.4273 3.7129 9.45892C4.89971 8.49054 6.30572 7.82772 7.80795 7.52843C9.31017 7.22913 10.8629 7.30248 12.3302 7.74206C13.7975 8.18164 15.1348 8.97406 16.225 10.05L19 7.275V14H12.275L15.05 11.225Z" class="richEditorIcons"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.64001 11.3477C4.64001 8.94531 6.26302 7.28711 8.91152 7.28711H12.3861L13.7279 7.3457L12.7669 6.54883L11.4369 5.24805C11.2962 5.11328 11.2025 4.94922 11.2025 4.7207C11.2025 4.30469 11.4955 4 11.9349 4C12.1283 4 12.3275 4.08203 12.4798 4.22852L15.7728 7.48633C15.9193 7.62695 16.0013 7.83789 16.0013 8.03711C16.0013 8.24219 15.9193 8.45312 15.7728 8.59375L12.4798 11.8457C12.3275 11.9922 12.1283 12.0801 11.9349 12.0801C11.4955 12.0801 11.2025 11.7695 11.2025 11.3535C11.2025 11.125 11.2962 10.9609 11.4369 10.8262L12.7669 9.52539L13.7279 8.72852L12.3861 8.79297H8.92321C7.14781 8.79297 6.12242 9.83008 6.12242 11.3125C6.12242 12.7891 7.14781 13.8555 8.92321 13.8555H10.3119C10.7513 13.8555 11.0736 14.1953 11.0736 14.6113C11.0736 15.0215 10.7513 15.3613 10.3119 15.3613H8.84702C6.23962 15.3613 4.64001 13.7793 4.64001 11.3477Z" />
+</svg>

package/src/icons/svg/richeditor/history/undo.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="M4.95 11.225C6.40144 9.80981 8.35147 9.0226 10.3786 9.03351C12.4058 9.04443 14.3472 9.85259 15.7833 11.2833C16.4915 11.9851 17.0574 12.817 17.45 13.7333L17.55 14H19.3333C19.2333 13.6917 19.125 13.3833 19 13.0833C18.4054 11.6717 17.4739 10.4273 16.2871 9.45892C15.1003 8.49054 13.6943 7.82772 12.1921 7.52843C10.6898 7.22913 9.13715 7.30248 7.66982 7.74206C6.2025 8.18164 4.86524 8.97406 3.775 10.05L1 7.275V14H7.725L4.95 11.225Z" class="richEditorIcons"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3613 11.3477C15.3613 8.94531 13.7383 7.28711 11.0898 7.28711H7.61523L6.27344 7.3457L7.23438 6.54883L8.56445 5.24805C8.70508 5.11328 8.79883 4.94922 8.79883 4.7207C8.79883 4.30469 8.50586 4 8.06641 4C7.87305 4 7.67383 4.08203 7.52148 4.22852L4.22852 7.48633C4.08203 7.62695 4 7.83789 4 8.03711C4 8.24219 4.08203 8.45312 4.22852 8.59375L7.52148 11.8457C7.67383 11.9922 7.87305 12.0801 8.06641 12.0801C8.50586 12.0801 8.79883 11.7695 8.79883 11.3535C8.79883 11.125 8.70508 10.9609 8.56445 10.8262L7.23438 9.52539L6.27344 8.72852L7.61523 8.79297H11.0781C12.8535 8.79297 13.8789 9.83008 13.8789 11.3125C13.8789 12.7891 12.8535 13.8555 11.0781 13.8555H9.68945C9.25 13.8555 8.92773 14.1953 8.92773 14.6113C8.92773 15.0215 9.25 15.3613 9.68945 15.3613H11.1543C13.7617 15.3613 15.3613 13.7793 15.3613 11.3477Z" />
+</svg>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.875 8.75C13.875 5.91954 11.5805 3.625 8.75 3.625C5.91954 3.625 3.625 5.91954 3.625 8.75C3.625 11.5805 5.91954 13.875 8.75 13.875C10.1655 13.875 11.4453 13.3027 12.374 12.374C13.3026 11.4454 13.875 10.1654 13.875 8.75ZM16.125 8.75C16.125 10.3801 15.5937 11.8867 14.6982 13.1074L18.2959 16.7041C18.7352 17.1435 18.7352 17.8566 18.2959 18.2959C17.8565 18.7352 17.1434 18.7352 16.7041 18.2959L13.1074 14.6982C11.8867 15.5937 10.3801 16.125 8.75 16.125C4.6769 16.125 1.375 12.8231 1.375 8.75C1.375 4.6769 4.6769 1.375 8.75 1.375C12.8231 1.375 16.125 4.6769 16.125 8.75Z" />
+</svg>

package/src/icons/svg/settings-filled.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.5 1.34961C10.8958 1.35078 11.2824 1.47186 11.6084 1.69629C11.9343 1.92065 12.1847 2.23836 12.3272 2.60742L12.7539 3.70898L14.0703 4.4668L15.2568 4.28613C15.6429 4.23378 16.036 4.29728 16.3858 4.46875C16.7355 4.64028 17.0266 4.91185 17.2217 5.24902L17.2236 5.25293L17.707 6.09961C17.9066 6.44122 17.9986 6.83577 17.9707 7.23047C17.9427 7.62564 17.7961 8.0032 17.5498 8.31348L16.8242 9.23828V10.7559L17.5723 11.6836C17.8198 11.9944 17.967 12.3732 17.9951 12.7695C18.0231 13.1642 17.931 13.5588 17.7315 13.9004L17.2481 14.7471L17.2461 14.751C17.0511 15.0881 16.7599 15.3597 16.4102 15.5312C16.0604 15.7027 15.6672 15.7662 15.2813 15.7139L15.2686 15.7129L14.0947 15.5332L12.7783 16.291L12.3516 17.3916C12.2091 17.7609 11.9589 18.0792 11.6328 18.3037C11.3068 18.5282 10.9203 18.6492 10.5244 18.6504H9.50001C9.10419 18.6492 8.71765 18.5281 8.39161 18.3037C8.06583 18.0794 7.81537 17.7615 7.67286 17.3926L7.24611 16.291L5.9297 15.5332L4.74318 15.7139C4.35716 15.7662 3.96405 15.7027 3.61427 15.5312C3.26453 15.3597 2.97339 15.0882 2.77833 14.751L2.77638 14.7471L2.29298 13.9004C2.09345 13.5588 2.00138 13.1642 2.02931 12.7695C2.05734 12.3744 2.20395 11.9968 2.45021 11.6865L3.17579 10.7617V9.24414L2.42775 8.31641C2.18022 8.00564 2.03301 7.62676 2.0049 7.23047C1.97697 6.83577 2.06903 6.44122 2.26857 6.09961L2.75392 5.24902C2.94895 4.91188 3.24016 4.64028 3.58986 4.46875C3.93974 4.29723 4.33361 4.2337 4.71974 4.28613L4.73146 4.28711L5.90822 4.4668L7.24708 3.70703L7.67286 2.6084C7.81537 2.23947 8.06583 1.92059 8.39161 1.69629C8.71765 1.47185 9.10418 1.35078 9.50001 1.34961H10.5ZM10 7.25C8.48124 7.25001 7.25001 8.48122 7.25001 10C7.25001 11.5188 8.48124 12.75 10 12.75C11.5188 12.75 12.75 11.5188 12.75 10C12.75 8.48122 11.5188 7.25 10 7.25Z" />
+</svg>

package/src/icons/svg/slide-menu-filled.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18 5.75c0-1.51878-1.2312-2.75-2.75-2.75h-10.5c-1.51878 0-2.75 1.23122-2.75 2.75v8.5c0 1.5188 1.23122 2.75 2.75 2.75h10.5c1.5188 0 2.75-1.2312 2.75-2.75zm-11-1.25c.69036 0 1.25.55964 1.25 1.25v8.5c0 .6904-.55964 1.25-1.25 1.25h-2.25c-.69036 0-1.25-.5596-1.25-1.25v-8.5c0-.69036.55964-1.25 1.25-1.25z" fill-rule="evenodd"/></svg>

package/src/icons/svg/switch-to-mention.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 12.75C2 13.9926 3.00736 15 4.25 15H15.75C16.9926 15 18 13.9926 18 12.75V7.25C18 6.0074 16.9926 5 15.75 5H4.25C3.00736 5 2 6.0074 2 7.25V12.75ZM3.5 12.75C3.5 13.1642 3.83579 13.5 4.25 13.5H15.75C16.1642 13.5 16.5 13.1642 16.5 12.75V7.25C16.5 6.8358 16.1642 6.5 15.75 6.5H4.25C3.83579 6.5 3.5 6.8358 3.5 7.25V12.75ZM10.25 9.25C9.83579 9.25 9.5 9.58579 9.5 10C9.5 10.4142 9.83579 10.75 10.25 10.75H13.75C14.1642 10.75 14.5 10.4142 14.5 10C14.5 9.58579 14.1642 9.25 13.75 9.25H10.25ZM6 8.5C5.44772 8.5 5 8.94771 5 9.5V10.5C5 11.0523 5.44772 11.5 6 11.5H7C7.55228 11.5 8 11.0523 8 10.5V9.5C8 8.94772 7.55228 8.5 7 8.5H6Z" />
+</svg>

package/src/icons/svg/switch-to-text.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75046 7.25C7.05549 7.25019 7.33096 7.43515 7.44578 7.71777L10.6958 15.7178C10.8514 16.1013 10.6661 16.5393 10.2827 16.6953C9.89904 16.851 9.46108 16.6658 9.30515 16.2822L8.68308 14.75H4.31785L3.69578 16.2822C3.53996 16.6658 3.10185 16.8508 2.71824 16.6953C2.33455 16.5394 2.1494 16.1015 2.30515 15.7178L5.55515 7.71777C5.67006 7.4351 5.94531 7.25 6.25046 7.25H6.75046ZM4.92722 13.25H8.07371L6.50046 9.37793L4.92722 13.25Z" />
+<path d="M12.1401 2.2002C12.5346 2.20031 12.8423 2.51397 12.8423 2.91309C12.8423 3.12364 12.7451 3.30551 12.6177 3.4209L11.6704 4.35059L11.5532 4.44434L11.8686 4.43359H14.3579C15.3076 4.43359 16.1443 4.73128 16.7456 5.28516C17.3487 5.84076 17.6996 6.64028 17.6997 7.61133C17.6997 8.57822 17.3463 9.38055 16.7427 9.93945C16.1408 10.4969 15.3038 10.7998 14.3579 10.7998H13.2436C13.0535 10.7997 12.8677 10.7476 12.7261 10.626C12.5804 10.5009 12.5025 10.3197 12.5024 10.1074C12.5024 9.8956 12.5796 9.71381 12.7192 9.58691C12.8564 9.46221 13.0379 9.4043 13.2241 9.4043H14.3579C14.9329 9.4043 15.4106 9.22123 15.7427 8.90723C16.0732 8.59459 16.2758 8.13679 16.2759 7.55176C16.2759 6.99074 16.0721 6.56373 15.7417 6.27539C15.4079 5.98422 14.9278 5.81934 14.3579 5.81934H11.8628L11.5698 5.80957L12.6284 6.83203C12.7765 6.96762 12.8422 7.16542 12.8423 7.33984C12.8423 7.73634 12.5371 8.05273 12.1499 8.05273C11.9478 8.05273 11.776 7.9829 11.6372 7.84375L11.6352 7.8418L9.54832 5.69922C9.39856 5.54868 9.30038 5.35992 9.30027 5.12695C9.30027 4.89706 9.39542 4.69649 9.54832 4.54297L11.6333 2.42383C11.7702 2.27437 11.9334 2.2002 12.1401 2.2002Z" />
+</svg>

package/src/icons/svg/switch-to-widget.svg

@@ -0,0 +1,4 @@
+<svg iewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.166 5.63857C14.5801 5.63857 14.9158 5.9745 14.916 6.38857V9.72157C14.916 10.1358 14.5802 10.4716 14.166 10.4716H5.83301C5.41894 10.4714 5.08301 10.1357 5.08301 9.72157V6.38857C5.08318 5.97461 5.41905 5.63874 5.83301 5.63857H14.166Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2773 2.30556C16.9189 2.30556 18.25 3.6367 18.25 5.27821V14.7225C18.2498 16.3639 16.9187 17.6942 15.2773 17.6942H4.72266C3.13235 17.6942 1.83337 16.4455 1.75391 14.8749L1.75 14.7225V5.27821C1.75 3.6367 3.08114 2.30556 4.72266 2.30556H15.2773ZM4.72266 3.80556C3.90957 3.80556 3.25 4.46513 3.25 5.27821V14.7225L3.25781 14.8729C3.3333 15.6152 3.96046 16.1942 4.72266 16.1942H15.2773C16.0903 16.1942 16.7498 15.5355 16.75 14.7225V5.27821C16.75 4.46513 16.0904 3.80556 15.2773 3.80556H4.72266Z" />
+</svg>

package/src/icons/svg/type/date.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="M15.6 3.6H14V2.8C14 2.58783 13.9157 2.38434 13.7657 2.23431C13.6157 2.08429 13.4122 2 13.2 2C12.9878 2 12.7843 2.08429 12.6343 2.23431C12.4843 2.38434 12.4 2.58783 12.4 2.8V3.6H7.6V2.8C7.6 2.58783 7.51571 2.38434 7.36569 2.23431C7.21566 2.08429 7.01217 2 6.8 2C6.58783 2 6.38434 2.08429 6.23431 2.23431C6.08429 2.38434 6 2.58783 6 2.8V3.6H4.4C3.76348 3.6 3.15303 3.85286 2.70294 4.30294C2.25286 4.75303 2 5.36348 2 6V15.6C2 16.2365 2.25286 16.847 2.70294 17.2971C3.15303 17.7471 3.76348 18 4.4 18H15.6C16.2365 18 16.847 17.7471 17.2971 17.2971C17.7471 16.847 18 16.2365 18 15.6V6C18 5.36348 17.7471 4.75303 17.2971 4.30294C16.847 3.85286 16.2365 3.6 15.6 3.6ZM16.4 15.6C16.4 15.8122 16.3157 16.0157 16.1657 16.1657C16.0157 16.3157 15.8122 16.4 15.6 16.4H4.4C4.18783 16.4 3.98434 16.3157 3.83431 16.1657C3.68429 16.0157 3.6 15.8122 3.6 15.6V10H16.4V15.6ZM16.4 8.4H3.6V6C3.6 5.78783 3.68429 5.58434 3.83431 5.43431C3.98434 5.28429 4.18783 5.2 4.4 5.2H6V6C6 6.21217 6.08429 6.41566 6.23431 6.56569C6.38434 6.71571 6.58783 6.8 6.8 6.8C7.01217 6.8 7.21566 6.71571 7.36569 6.56569C7.51571 6.41566 7.6 6.21217 7.6 6V5.2H12.4V6C12.4 6.21217 12.4843 6.41566 12.6343 6.56569C12.7843 6.71571 12.9878 6.8 13.2 6.8C13.4122 6.8 13.6157 6.71571 13.7657 6.56569C13.9157 6.41566 14 6.21217 14 6V5.2H15.6C15.8122 5.2 16.0157 5.28429 16.1657 5.43431C16.3157 5.58434 16.4 5.78783 16.4 6V8.4Z" class="typeIcons"></path></svg>
+<svg height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 3H14V1.80391C14 1.59174 13.9157 1.38825 13.7657 1.23822C13.6157 1.0882 13.4122 1.00391 13.2 1.00391C12.9878 1.00391 12.7843 1.0882 12.6343 1.23822C12.4843 1.38825 12.4 1.59174 12.4 1.80391V3H7.6V1.80391C7.6 1.59174 7.51571 1.38825 7.36569 1.23822C7.21566 1.0882 7.01217 1.00391 6.8 1.00391C6.58783 1.00391 6.38434 1.0882 6.23431 1.23822C6.08429 1.38825 6 1.59174 6 1.80391V3H4.4C3.76348 3 3.15303 3.25286 2.70294 3.70294C2.25286 4.15303 2 4.76348 2 5.4V14.6C2 15.2365 2.25286 15.847 2.70294 16.2971C3.15303 16.7471 3.76348 17 4.4 17H15.6C16.2365 17 16.847 16.7471 17.2971 16.2971C17.7471 15.847 18 15.2365 18 14.6V5.4C18 4.76348 17.7471 4.15303 17.2971 3.70294C16.847 3.25286 16.2365 3 15.6 3ZM16.1657 15.1657C16.3157 15.0157 16.4 14.8122 16.4 14.6V9H3.6V14.6C3.6 14.8122 3.68429 15.0157 3.83431 15.1657C3.98434 15.3157 4.18783 15.4 4.4 15.4H15.6C15.8122 15.4 16.0157 15.3157 16.1657 15.1657ZM3.6 7.4H16.4V5.4C16.4 5.18783 16.3157 4.98434 16.1657 4.83431C16.0157 4.68429 15.8122 4.6 15.6 4.6H4.4C4.18783 4.6 3.98434 4.68429 3.83431 4.83431C3.68429 4.98434 3.6 5.18783 3.6 5.4V7.4Z" />
+</svg>

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

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.5 11C8.3284 11 9 11.6716 9 12.5V14.5C9 15.3284 8.3284 16 7.5 16H5.5C4.67157 16 4 15.3285 4 14.5V12.5C4 11.6716 4.67157 11 5.5 11H7.5ZM14.5 11C15.3284 11 16 11.6716 16 12.5V14.5C16 15.3284 15.3284 16 14.5 16H12.5C11.6716 16 11 15.3285 11 14.5V12.5C11 11.6716 11.6716 11 12.5 11H14.5ZM7.5 4C8.3284 4 9 4.67157 9 5.5V7.5C9 8.3284 8.3284 9 7.5 9H5.5C4.67157 9 4 8.3285 4 7.5V5.5C4 4.67157 4.67157 4 5.5 4H7.5ZM14.5 4C15.3284 4 16 4.67157 16 5.5V7.5C16 8.3284 15.3284 9 14.5 9H12.5C11.6716 9 11 8.3285 11 7.5V5.5C11 4.67157 11.6716 4 12.5 4H14.5Z" />
+</svg>

package/src/images-gallery/images-gallery-fall-through-provider.tsx

@@ -0,0 +1,11 @@
+import React, {PropsWithChildren, useContext} from "react";
+import {ImagesGalleryProvider, ImagesGalleryStateContext} from "./images-gallery";
+
+export function ImagesGalleryFallThroughProvider(props: PropsWithChildren) {
+  const context = useContext(ImagesGalleryStateContext);
+  if (context === undefined) {
+    return <ImagesGalleryProvider>{props.children}</ImagesGalleryProvider>;
+  }
+
+  return <>{props.children}</>;
+}

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

@@ -0,0 +1,257 @@
+import {ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";
+import _ from "lodash";
+import {createContext} from "@fibery/react/src/create-context";
+import {useIsPhone} from "../use-is-phone";
+import {safeAreaInsetBottomVar} from "../mobile-styles";
+import {buttonGroup, ButtonGroup} from "../button/button-group";
+import {IconButton} from "../button/icon-button";
+import ArrowRight from "../icons/react/ArrowRight";
+import ArrowLeft from "../icons/react/ArrowLeft";
+import {css} from "@linaria/core";
+import cx from "classnames";
+
+type Registry = Map<string, {zoomed: boolean; setZoomed: (zoomed: boolean) => void; src: string}>;
+
+const [ImagesGalleryRegistryProvider, useImagesGalleryRegistry] = createContext(
+  "ImagesGalleryRegistryContext",
+  new Map()
+);
+
+export {ImagesGalleryRegistryProvider, useImagesGalleryRegistry};
+
+type Methods = {
+  setVisible: (visible: boolean) => void;
+  setActivated: (activated: boolean) => void;
+  update: () => void;
+  nextImage: () => void;
+  prevImage: () => void;
+};
+const [ImagesGalleryMethodsProvider, useImagesGalleryMethods] = createContext<Methods>("ImagesGalleryMethodsProvider", {
+  setVisible: _.noop,
+  setActivated: _.noop,
+  update: _.noop,
+  nextImage: _.noop,
+  prevImage: _.noop,
+});
+type State = {version: "1" | "2"; visible: boolean; activated: boolean; _inc: number};
+
+const [ImagesGalleryStateProvider, useImagesGalleryState, ImagesGalleryStateContext] =
+  createContext<State>("ImagesGalleryStateContext");
+
+export {
+  ImagesGalleryMethodsProvider,
+  useImagesGalleryMethods,
+  ImagesGalleryStateProvider,
+  useImagesGalleryState,
+  ImagesGalleryStateContext,
+};
+
+type Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
+
+function initialState(): State {
+  return {version: "1", visible: false, activated: false, _inc: 0};
+}
+
+function imagesGalleryReducer(state: State, action: Actions) {
+  if (action.type === "set-visible") {
+    return {...state, visible: action.payload};
+  }
+  if (action.type === "set-activated") {
+    return {...state, activated: action.payload};
+  }
+  if (action.type === "inc") {
+    return {...state, _inc: state._inc + 1};
+  }
+  return state;
+}
+
+const controlsGroupStyle = css`
+  &.${buttonGroup} {
+    display: none;
+  }
+`;
+
+export function Controls() {
+  const imagesRegistry = useImagesGalleryRegistry();
+  const {visible} = useImagesGalleryState();
+  const isPhone = useIsPhone();
+  const {prevImage, nextImage, setVisible} = useImagesGalleryMethods();
+  // Determine if there is a zoomed image and its position in the registry
+  let activeNext = true;
+  let activePrev = true;
+  let i = 0;
+  for (const image of imagesRegistry.values()) {
+    if (image.zoomed) {
+      if (i === 0) {
+        activePrev = false;
+      }
+      if (i === imagesRegistry.size - 1) {
+        activeNext = false;
+      }
+      break;
+    }
+    i++;
+  }
+  const visibleState = visible || isPhone;
+  if (imagesRegistry.size > 1) {
+    const size = isPhone ? "xLarge" : "small";
+    return (
+      <div
+        className={css`
+          position: fixed;
+          bottom: max(var(${safeAreaInsetBottomVar}), 12px);
+          left: 0;
+          right: 0;
+          display: grid;
+          align-items: center;
+          justify-content: center;
+          &:hover .${controlsGroupStyle}.${buttonGroup} {
+            display: flex;
+          }
+        `}
+      >
+        <ButtonGroup
+          className={cx(
+            controlsGroupStyle,
+            visibleState &&
+              css`
+                &.${controlsGroupStyle}.${buttonGroup} {
+                  display: flex;
+                }
+              `
+          )}
+        >
+          <IconButton
+            variant={"outline"}
+            size={size}
+            onClick={() => {
+              prevImage();
+              setVisible(true);
+            }}
+            disabled={!activePrev}
+          >
+            <ArrowLeft />
+          </IconButton>
+          <IconButton
+            variant={"outline"}
+            size={size}
+            onClick={() => {
+              nextImage();
+              setVisible(true);
+            }}
+            disabled={!activeNext}
+          >
+            <ArrowRight />
+          </IconButton>
+        </ButtonGroup>
+      </div>
+    );
+  }
+  return null;
+}
+
+export function ImagesGalleryProvider({children}: {children: ReactNode}) {
+  const [imagesRegistry] = useState<Registry>(() => new Map());
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const [galleryState, dispatchState] = useReducer(imagesGalleryReducer, [], initialState);
+  const setVisible = useCallback((visible: boolean) => dispatchState({type: "set-visible", payload: visible}), []);
+  const setActivated = useCallback(
+    (activated: boolean) => dispatchState({type: "set-activated", payload: activated}),
+    []
+  );
+  const update = useCallback(() => dispatchState({type: "inc"}), []);
+  const {visible} = galleryState;
+  const timeout = 3000;
+  useEffect(() => {
+    if (visible) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        setVisible(false);
+      }, timeout);
+    }
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, [setVisible, visible]);
+  const nextImage = useCallback(() => {
+    let i = 0;
+    for (const image of imagesRegistry.values()) {
+      if (image.zoomed) {
+        if (i === imagesRegistry.size - 1) {
+          break;
+        }
+        image.setZoomed(false);
+        const nextImage = Array.from(imagesRegistry.values())[i + 1];
+        nextImage.setZoomed(true);
+        break;
+      }
+      i++;
+    }
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+    }, timeout);
+  }, [imagesRegistry, setVisible]);
+
+  const prevImage = useCallback(() => {
+    let i = 0;
+    for (const image of imagesRegistry.values()) {
+      if (image.zoomed) {
+        if (i === 0) {
+          break;
+        }
+        image.setZoomed(false);
+        const prevImage = Array.from(imagesRegistry.values())[i - 1];
+        prevImage.setZoomed(true);
+        break;
+      }
+      i++;
+    }
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+    }, timeout);
+  }, [imagesRegistry, setVisible]);
+
+  const methods = useMemo(
+    () => ({setVisible, setActivated, update, nextImage, prevImage}),
+    [setVisible, setActivated, update, nextImage, prevImage]
+  );
+
+  useEffect(() => {
+    const listener = (evt: KeyboardEvent) => {
+      const hasActive = Array.from(imagesRegistry.values()).some((image) => image.zoomed);
+      if (!hasActive) {
+        return;
+      }
+      if (evt.key === "Escape") {
+        for (const image of imagesRegistry.values()) {
+          if (image.zoomed) {
+            image.setZoomed(false);
+            break;
+          }
+        }
+      }
+      if (evt.key === "ArrowRight") {
+        nextImage();
+      }
+      if (evt.key === "ArrowLeft") {
+        prevImage();
+      }
+    };
+    document.addEventListener("keydown", listener, {capture: true});
+    return () => {
+      document.removeEventListener("keydown", listener, {capture: true});
+    };
+  }, [imagesRegistry, nextImage, prevImage]);
+
+  return (
+    <>
+      <ImagesGalleryRegistryProvider value={imagesRegistry}>
+        <ImagesGalleryMethodsProvider value={methods}>
+          <ImagesGalleryStateProvider value={galleryState}>{children}</ImagesGalleryStateProvider>
+        </ImagesGalleryMethodsProvider>
+      </ImagesGalleryRegistryProvider>
+    </>
+  );
+}

package/src/images-gallery/zoom.tsx

@@ -0,0 +1,123 @@
+import {css} from "@linaria/core";
+import React, {ReactNode, useCallback} from "react";
+import {Controlled} from "react-medium-image-zoom";
+import "react-medium-image-zoom/dist/styles.css";
+import {themeVars} from "../design-system";
+import {IconButton} from "../button/icon-button";
+import Close from "../icons/react/Close";
+import {Controls, useImagesGalleryMethods, useImagesGalleryState} from "./images-gallery";
+import {useIsPhone} from "../use-is-phone";
+import {ZoomV2} from "../images-gallery-2/zoom";
+
+const dialogCss = css`
+  :global() {
+    [data-rmiz-modal-overlay="hidden"] {
+      background-color: transparent;
+    }
+    [data-rmiz-modal-overlay="visible"] {
+      background-color: ${themeVars.colorBgEditorImageZoomed};
+    }
+    [data-rmiz-content="found"] > img {
+      cursor: auto;
+    }
+  }
+`;
+
+type ModalState = "LOADED" | "LOADING" | "UNLOADED" | "UNLOADING";
+
+const ZoomContent = ({
+  img,
+  modalState,
+  onUnzoom,
+}: {
+  img: React.ReactElement | null;
+  modalState: ModalState;
+  onUnzoom: (e: Event) => void;
+}) => {
+  const imagesGalleryMethods = useImagesGalleryMethods();
+  const isPhone = useIsPhone();
+
+  const button = modalState === "LOADED" && (
+    <IconButton
+      size={isPhone ? "xLarge" : "small"}
+      color="neutral"
+      variant="ghost"
+      className={css`
+        position: absolute;
+        inset: 20px 20px auto auto;
+        z-index: 1;
+      `}
+      onClick={onUnzoom as () => void}
+    >
+      <Close />
+    </IconButton>
+  );
+  return (
+    <>
+      <div
+        onMouseMove={() => {
+          imagesGalleryMethods.setVisible(true);
+        }}
+        className={css`
+          position: absolute;
+          inset: 0;
+        `}
+      >
+        {img}
+        {button}
+      </div>
+      <Controls />
+    </>
+  );
+};
+
+type Props = {
+  zoomed: boolean;
+  onZoomedChange: (value: boolean) => void;
+  children: ReactNode;
+  className?: string;
+  openOnClick?: boolean;
+  zoomImg?: {src: string; alt?: string};
+};
+
+export const ZoomV1 = (props: Props) => {
+  const {zoomed, onZoomedChange, children, className, openOnClick, zoomImg} = props;
+  const imagesGalleryMethods = useImagesGalleryMethods();
+  const onClick = useCallback(() => {
+    if (zoomed) {
+      onZoomedChange(false);
+    } else if (openOnClick) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange, openOnClick]);
+
+  const onDoubleClick = useCallback(() => {
+    if (!zoomed) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange]);
+
+  return (
+    <div className={className} onClick={onClick} onDoubleClick={openOnClick ? undefined : onDoubleClick}>
+      <Controlled
+        zoomImg={zoomImg}
+        onZoomChange={imagesGalleryMethods.update}
+        classDialog={dialogCss}
+        isZoomed={zoomed}
+        ZoomContent={ZoomContent}
+      >
+        {children}
+      </Controlled>
+    </div>
+  );
+};
+
+export const Zoom = (props: Props) => {
+  const {version} = useImagesGalleryState();
+
+  if (version === "1") {
+    return <ZoomV1 {...props} />;
+  }
+
+  return <ZoomV2 {...props} />;
+};