@redneckz/wildless-cms-uni-blocks 0.3.49 → 0.3.50

package/mobile/src/icons/SafeIcon.svg

@@ -1,7 +1 @@
-<svg title="Сейф" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 12.83V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M8 19h8c2 0 3-1 3-3V8c0-2-1-3-3-3H8C6 5 5 6 5 8v8c0 2 1 3 3 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M5 9.5h2.48a2.5 2.5 0 0 1 0 5H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M19 9.99h-3M19 14h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M7.2 12h.1" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Сейф" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 12.83V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 19h8c2 0 3-1 3-3V8c0-2-1-3-3-3H8C6 5 5 6 5 8v8c0 2 1 3 3 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 9.5h2.48a2.5 2.5 0 0 1 0 5H5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 9.99h-3M19 14h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.2 12h.1" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/ShieldTickIcon.svg

@@ -1,4 +1 @@
-<svg title="Безопасность" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="m9.05 11.87 1.61 1.61 4.3-4.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M20.59 7.12c0-1.23-.94-2.59-2.09-3.02l-4.99-1.87c-.83-.31-2.19-.31-3.02 0L5.5 4.11c-1.15.43-2.09 1.79-2.09 3.01v7.43c0 1.18.78 2.73 1.73 3.44l4.3 3.21c1.41 1.06 3.73 1.06 5.14 0l4.3-3.21c.95-.71 1.73-2.26 1.73-3.44v-3.52" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Безопасность" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9.05 11.87 1.61 1.61 4.3-4.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.59 7.12c0-1.23-.94-2.59-2.09-3.02l-4.99-1.87c-.83-.31-2.19-.31-3.02 0L5.5 4.11c-1.15.43-2.09 1.79-2.09 3.01v7.43c0 1.18.78 2.73 1.73 3.44l4.3 3.21c1.41 1.06 3.73 1.06 5.14 0l4.3-3.21c.95-.71 1.73-2.26 1.73-3.44v-3.52" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/SmallClockIcon.svg

@@ -1,4 +1 @@
-<svg title="Маленькие часы" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="m15.71 15.18-3.1-1.85c-.54-.32-.98-1.09-.98-1.72v-4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M4 6c-1.25 1.67-2 3.75-2 6 0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2c-1.43 0-2.8.3-4.03.85" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Маленькие часы" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m15.71 15.18-3.1-1.85c-.54-.32-.98-1.09-.98-1.72v-4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 6c-1.25 1.67-2 3.75-2 6 0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2c-1.43 0-2.8.3-4.03.85" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/UserTickIcon.svg

@@ -1,5 +1 @@
-<svg title="Пользователь" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15.02 3.01A4.944 4.944 0 0 0 12 2C9.24 2 7 4.24 7 7s2.24 5 5 5 5-2.24 5-5M3.41 22c0-3.87 3.85-7 8.59-7 .96 0 1.89.13 2.76.37" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M22 18c0 .75-.21 1.46-.58 2.06-.21.36-.48.68-.79.94-.7.63-1.62 1-2.63 1a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 14 18c0-1.26.58-2.39 1.5-3.12A3.999 3.999 0 0 1 22 18Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m16.44 18 .99.99 2.13-1.97" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Пользователь" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.02 3.01A4.944 4.944 0 0 0 12 2C9.24 2 7 4.24 7 7s2.24 5 5 5 5-2.24 5-5M3.41 22c0-3.87 3.85-7 8.59-7 .96 0 1.89.13 2.76.37" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 18c0 .75-.21 1.46-.58 2.06-.21.36-.48.68-.79.94-.7.63-1.62 1-2.63 1a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 14 18c0-1.26.58-2.39 1.5-3.12A3.999 3.999 0 0 1 22 18Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m16.44 18 .99.99 2.13-1.97" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletAdd2Icon.svg

@@ -1,6 +1 @@
-<svg title="Пополнение карты" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Пополнение карты" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletAddIcon.svg

@@ -1,7 +1 @@
-<svg title="Кошелёк с плюсом" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14.5 15.44h-5M12 13v5" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Кошелёк с плюсом" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletIcon.svg

@@ -1,7 +1 @@
-<svg title="Кошелёк" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Кошелёк" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletWithMoneyIcon.svg

@@ -1,5 +1 @@
-<svg title="Кошелёк с деньгами" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-</svg>
+<svg title="Кошелёк с деньгами" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="#000000" stroke-width="2" stroke-linecap="round"/></svg>

package/mobile/src/model/IconVersion.ts

@@ -0,0 +1 @@
+export type IconVersion = 'normal' | 'white';

package/mobile/src/model/Picture.ts

@@ -1,4 +1,5 @@
 import type { IconName } from '../icons/IconName';
+import type { IconVersion } from './IconVersion';
 
 export interface Img {
   /** @title Картинка */
@@ -12,6 +13,8 @@ export interface Img {
 export interface ImgSource {
   /** @title Иконка */
   icon?: IconName;
+  /** @hidden */
+  iconVersion?: IconVersion;
   /** @title Картинка */
   src?: string;
   /** @title Формат */

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -9,17 +9,19 @@ export const Icon = JSX<IconProps>(
     name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
+    iconVersion,
     asSVG,
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+    const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : '';
 
     if (asSVG) {
       return (
         <svg className={className} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
-          <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />
+          <use className={svgUseStyle} href={`${href}#icon`} xlinkHref={`${href}#icon`} />
         </svg>
       );
     }

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -1,4 +1,5 @@
 import type { IconName } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
 
@@ -18,4 +19,6 @@ export interface IconCompatibilityFields {
 export type IconProps = IconCompatibilityFields & {
   className?: string;
   name?: IconName;
+  /** @hidden */
+  iconVersion?: IconVersion;
 };

package/mobile/src/ui-kit/Img/Img.tsx

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource, Picture } from '../../model/Picture';
 import { Icon } from '../Icon/Icon';
+import { getIconVersion } from './getIconVersion';
+import type { ImgSource, Picture } from '../../model/Picture';
+
 import type { Image, ImageProps } from './ImgProps';
 
 export const Img = JSX<ImageProps<Image>>(
@@ -8,7 +10,14 @@ export const Img = JSX<ImageProps<Image>>(
     // backwards compatibility with existing icons in usage
     const icon = typeof image === 'string' ? image : image?.icon;
     if (icon || icon === '') {
-      return <Icon className={className} name={icon} {...iconProps} />;
+      return (
+        <Icon
+          className={className}
+          iconVersion={getIconVersion(image)}
+          name={icon}
+          {...iconProps}
+        />
+      );
     }
 
     return (

package/mobile/src/ui-kit/Img/getIconVersion.tsx

@@ -0,0 +1,3 @@
+export function getIconVersion(image) {
+  return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
+}

package/mobile/src/ui-kit/Select/SelectOption.tsx

@@ -3,12 +3,15 @@ import { JSX } from '@redneckz/uni-jsx';
 export interface SelectOptionProps {
   className?: string;
   value?: string;
+  selected?: boolean;
 }
 
-export const SelectOption = JSX<SelectOptionProps>(({ className = '', value, children }) => {
-  return (
-    <option className={className} value={`${value}`}>
-      {children}
-    </option>
-  );
-});
+export const SelectOption = JSX<SelectOptionProps>(
+  ({ className = '', value, selected, children }) => {
+    return (
+      <option className={className} value={`${value}`} selected={selected}>
+        {children}
+      </option>
+    );
+  },
+);

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -42,7 +42,7 @@ const renderTab =
 const renderIcon = (tab: Tab, isActive: boolean) => (
   <div className="h-full mt-1">
     <Img
-      className={`w-5 h-5 mr-3 ${isActive ? 'invert-full' : ''}`}
+      className={`w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`}
       image={tab?.icon || 'CardIcon'}
       asSVG={!isActive}
     />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.49",
+  "version": "0.3.50",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -40,10 +40,6 @@ html {
 @tailwind utilities;
 
 @layer utilities {
-  .invert-full {
-    filter: invert(1);
-  }
-
   .rotate-180 {
     transform: rotate(180deg);
   }

package/src/components/Bonus/Bonus.tsx

@@ -9,11 +9,11 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, anchor = null } = props;
 
   return (
-    <section className={`bg-white p-12 ${className}`} id={anchor}>
+    <section className={`font-sans bg-white p-[50px] pb-9 ${className}`} id={anchor}>
       <div className="container">
-        {title ? <Heading headingType="h2" className="text-center" title={title} /> : null}
+        {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
         {description ? (
-          <div className="text-md font-light text-center mt-2">{description}</div>
+          <div className="text-md font-light text-center mt-[10px]">{description}</div>
         ) : null}
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems
@@ -21,16 +21,18 @@ export const Bonus = JSX<BonusProps>((props) => {
                 return (
                   <div
                     key={String(i)}
-                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-4 mx-2 even:mr-0 odd:ml-0 last:odd:w-full last:odd:mx-0"
+                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0"
                   >
                     <div className="flex justify-between w-full">
                       <div className="mr-4">
                         <div className="text-title-sm">{_.name}</div>
-                        <div className="text-md font-light mt-3 max-w-[488px]">{_.description}</div>
+                        <div className="text-md font-light mt-[14px] max-w-[488px]">
+                          {_.description}
+                        </div>
                       </div>
                       {_.bonusCount ? (
                         <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
-                          <span className="font-mohave -tracking-wider text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
+                          <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
                             {_.bonusCount}
                           </span>
                           <span className="text-[44px] bg-clip-text text-transparent bg-green-to-yellow">

package/src/components/Bonus/BonusContent.ts

@@ -1,9 +1,9 @@
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
-/** @title Список плиток */
+/** @title Плитка */
 interface BonusItems {
-  /** @title Заголовок плитки */
+  /** @title Бонусы */
   name?: string;
   /** @title Описание плитки */
   description?: string;
@@ -14,9 +14,10 @@ interface BonusItems {
 }
 
 /**
- * @title Плитка
+ * @title Блок Бонусы
  */
 export type BonusContent = HeadingContent &
   DescriptionContent & {
+    /** @title Список плиток */
     bonusItems?: BonusItems[];
   };

package/src/components/ContentPage/ContentPage.page.json

@@ -486,6 +486,12 @@
       "content": {
         "title": "Потребительский кредит наличными",
         "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
+        "headingType": "h2",
+        "backwardButton": {
+          "href": "https://rshb.ru",
+          "text": "Кнопка возврата",
+          "icon": { "icon": "ArrowLeftIcon" }
+        },
         "breadcrumbs": [
           {
             "text": "Главная",

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -10,7 +10,7 @@ interface CurrentLocationProps {
 export const CurrentLocation = JSX<CurrentLocationProps>(
   ({ className = '', address, distance }) => (
     <div className={`flex text-sm ${className}`}>
-      <Img className="min-w-fit" image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
+      <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
       <div className="ml-3 font-light">
         {address ? <p className="m-0 mb-[3px]">{address}</p> : null}
         {distance ? (

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -16,7 +16,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     return (
       <div className={`grid gap-3.5 ${className}`}>
         {renderInput('Хочу продать', codes)}
-        {renderInput('Получу', codes)}
+        {renderInput('Получу', codes, 'USD')}
         <Button className="box-border mt-3.5 py-3 h-12 w-full" version="primary" href="#">
           Купить валюту
         </Button>
@@ -25,7 +25,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
   },
 );
 
-function renderInput(placeholder: string, codes: string[]) {
+function renderInput(placeholder: string, codes: string[], selected?: string) {
   return (
     <div className="relative flex items-center">
       <Input
@@ -36,7 +36,7 @@ function renderInput(placeholder: string, codes: string[]) {
       {codes.length ? (
         <Select className="h-9 -translate-x-4">
           {codes.map((code, i) => (
-            <SelectOption key={String(i)} value={code}>
+            <SelectOption key={String(i)} value={code} selected={code === selected}>
               {code}
             </SelectOption>
           ))}

package/src/components/Footer/SocialMedia.tsx

@@ -16,7 +16,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
     const { handlerDecorator } = context;
     return (
       <div>
-        <div className={`flex gap-2.5 mb-1.5 ${className}`}>
+        <div className={`flex gap-2.5 ${className}`}>
           {media?.map((_, index) => (
             <MediaButton
               key={String(index)}

package/src/components/GracePeriod/GracePeriod.tsx

@@ -10,8 +10,8 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, anchor = null }) => {
     return (
-      <section className={`bg-white p-16 pt-12 ${className}`} id={anchor}>
-        <Heading headingType="h2" className="text-center" title={title} />
+      <section className={`font-sans bg-white p-[50px] ${className}`} id={anchor}>
+        <Heading headingType="h3" className="text-center" title={title} />
         <div className="font-light text-base-md text-center mt-3">{description}</div>
         {calendar ? renderCalendar(calendar) : null}
       </section>
@@ -36,7 +36,7 @@ const renderCalendar = (calendar) => {
     }));
 
   return (
-    <div className="w-full flex flex-col justify-center mt-14">
+    <div className="w-full flex flex-col justify-center mt-[54px]">
       <div className="flex w-full mb-3 font-light text-m-title-md text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
@@ -44,7 +44,7 @@ const renderCalendar = (calendar) => {
         {mappedCalendar.map((_, ind) => (
           <div
             key={`monthItem-${ind}`}
-            className="pr-3 mr-3 border-r border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+            className="pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0"
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
@@ -70,7 +70,7 @@ const renderMonthImages = (item) =>
     _.image?.src ? (
       <div
         key={`monthImage-${_.image.src}`}
-        className="max-h-[207px] border-r-[1px] pr-3 mr-3 border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+        className="h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
       >
         <Img image={_.image} className="flex" />
       </div>

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -7,7 +7,7 @@ export interface NavigatorTabItemProps extends LinkProps {
   onClick?: (ev: MouseEvent) => void;
 }
 
-const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const TEXT_CLASSES = 'font-sans font-normal text-m-md';
 const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(

package/src/components/NavigatorTabs/NavigatorTabs.example.json

@@ -1,7 +1,7 @@
 {
   "navigatorTabs": [
-    { "text": "Таб 1", "href": "#tab1", "target": "_self" },
-    { "text": "Таб 2", "href": "#tab2", "target": "_self" },
-    { "text": "Ссылка", "href": "https://rshb.ru", "target": "_blank" }
+    { "text": "Таб 1", "href": "", "target": "_self" },
+    { "text": "Таб 2", "href": "", "target": "_self" },
+    { "text": "Таб 3", "href": "", "target": "_self" }
   ]
 }

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -15,7 +15,7 @@ export const NavigatorTabs = JSX<TabsBlockProps>(
 
     return (
       <section
-        className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
+        className={`sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`}
         id={anchor}
       >
         {navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null}

package/src/components/ProductBlock/ProductBlock.example.json

@@ -1,6 +1,12 @@
 {
   "title": "Продукт",
   "description": "Описание",
+  "headingType": "h2",
+  "backwardButton": {
+    "href": "https://rshb.ru",
+    "text": "Кнопка возврата",
+    "icon": { "icon": "ArrowLeftIcon" }
+  },
   "image": {
     "format": "webp",
     "size": {

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -19,7 +19,7 @@ const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: { icon: 'EmptyWalletIcon' },
+    icon: { icon: 'EmptyWalletIcon', iconVersion: 'white' },
   },
   {
     label: 'От 16,9%',
@@ -48,6 +48,15 @@ const buttons: ButtonWithIconProps[] = [
   },
 ];
 
+const buttonsSecond: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
 const items = [
   'Совершайте любые личные покупки',
   'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
@@ -70,6 +79,18 @@ export const PRODUCT_BLOCK: ProductBlockContent = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        backwardButton={backwardButton}
+        headingType="h1"
+        title="Потребительский кредит наличными"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        buttons={buttons}
+        image={image}
+      />
+
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -77,6 +98,18 @@ export default {
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
+        benefitsVersion="white"
+        buttons={buttons}
+        image={image}
+      />
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title="Потребительский кредит наличными"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
         buttons={buttons}
         image={image}
       />
@@ -85,48 +118,52 @@ export default {
   secondary: (
     <div className="container grid grid-cols-12">
       <ProductBlock
+        className="col-span-12"
         context={context}
+        backwardButton={backwardButton}
+        headingType="h1"
+        title="Потребительский кредит наличными"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        buttons={buttonsSecond}
+        image={image}
+        version="secondary"
+      />
+
+      <ProductBlock
         className="col-span-12"
+        context={context}
         title="Потребительский кредит наличными"
         headingType="h2"
-        version="secondary"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
-        items={items}
+        benefitsVersion="white"
+        buttons={buttonsSecond}
         image={image}
+        version="secondary"
+      />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...PRODUCT_BLOCK}
+        image={image}
+        version="secondary"
+      />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...PRODUCT_BLOCK}
+        version="secondary"
       />
-    </div>
-  ),
-  'with items': (
-    <div className="container grid grid-cols-12">
-      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
-    </div>
-  ),
-  'without image': (
-    <div className="container grid grid-cols-12">
-      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
-    </div>
-  ),
-  'default-h1': (
-    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
         title="Потребительский кредит наличными"
-        headingType="h1"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
-        buttons={buttons}
+        buttons={buttonsSecond}
         image={image}
-        backwardButton={backwardButton}
+        version="secondary"
       />
     </div>
   ),

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -5,8 +5,15 @@ import type { DescriptionContent } from '../../ui-kit/Description/DescriptionCon
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { IconVersion } from '../../model/IconVersion';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
+export type BenefitItemProps = {
+  benefit: Benefit;
+  version?: BlockVersion;
+  benefitsVersion?: IconVersion;
+};
+
 export type ProductBlockInnerContent = HeadingContent &
   HeadingTypeContent &
   DescriptionContent &
@@ -19,6 +26,7 @@ export type ProductBlockInnerContent = HeadingContent &
      * @maxItems 3
      */
     benefits?: Benefit[];
+    benefitsVersion?: IconVersion;
     version?: BlockVersion;
     /**
      *  @title Буллиты

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -20,6 +20,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     headingType = 'h2',
     description,
     benefits,
+    benefitsVersion = 'normal',
     buttons,
     image,
     items,
@@ -56,7 +57,11 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               <Description className="mt-3 text-m-md" description={description} />
             ) : null}
             {benefits?.filter((items) => items.label)?.length ? (
-              <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
+              <div className="mt-3">
+                {benefits.map((benefit, i) =>
+                  renderBenefit({ benefit, version, benefitsVersion }, i),
+                )}
+              </div>
             ) : null}
             {items?.length ? (
               <List