@redneckz/wildless-cms-uni-blocks 0.2.99 → 0.2.103

package/src/icons/UserTickIcon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="24" height="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="#1C1C1C" 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="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m16.44 18 .99.99 2.13-1.97" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/VisaIcon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="52" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.37 16.407 21 .729h4.206l-2.632 15.678h-4.205ZM37.77 1.067C36.939.75 35.633.41 34 .41c-4.156 0-7.084 2.126-7.109 5.173-.023 2.253 2.09 3.51 3.686 4.26 1.638.768 2.188 1.258 2.18 1.944-.01 1.051-1.307 1.531-2.516 1.531-1.684 0-2.579-.238-3.96-.823l-.542-.249-.59 3.51c.982.437 2.799.816 4.685.836 4.422 0 7.293-2.102 7.325-5.356.016-1.784-1.105-3.14-3.532-4.26-1.47-.725-2.37-1.209-2.36-1.943 0-.652.762-1.349 2.408-1.349a7.655 7.655 0 0 1 3.149.601l.377.18.57-3.397ZM48.595.729h-3.25c-1.007 0-1.761.28-2.203 1.3l-6.248 14.367h4.418s.722-1.932.885-2.356l5.388.007c.126.549.511 2.35.511 2.35H52L48.595.728Zm-5.157 10.123c.348-.903 1.676-4.382 1.676-4.382-.025.041.345-.908.558-1.497l.284 1.352.974 4.527h-3.492ZM.054.73 0 1.055c1.663.409 3.148 1 4.448 1.737l3.733 13.589 4.45-.005L19.255.729h-4.456L10.68 11.42l-.439-2.172a7.126 7.126 0 0 0-.066-.202L8.744 2.053C8.489 1.06 7.75.764 6.837.729H.054Z" fill="#0E4595"/></svg>

package/src/icons/WalletAdd2Icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="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="#1C1C1C" 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="#1C1C1C" 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="#42AB44" 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="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/WalletAddIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="#42AB44" 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="#1C1C1C" 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="#1C1C1C" 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="#1C1C1C" 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="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/WalletWithMoneyIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="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="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="#42AB44" 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="#1C1C1C" stroke-width="2" stroke-linecap="round"/></svg>

package/src/index.ts

@@ -18,9 +18,9 @@ export { ContentPageHead } from './components/ContentPage/ContentPageHead';
 export { toMobilePage } from './components/ContentPage/toMobilePage';
 export { MobileBlocks } from './components/MobileBlocks';
 export type { Img, ImgSource, Picture } from './model/Picture';
-export type { SitemapProps as SitemapContent } from './model/SitemapProps';
 export { projectSettings } from './ProjectSettings';
 export type { ProjectSettings } from './ProjectSettings';
+export type { SitemapProps as SitemapContent } from './services/sitemap/SitemapProps';
 export type { BlockDef, ContentPageDef, ContentPageMeta, UniBlockProps } from './types';
 export { joinList } from './utils/joinList';
 export * as url from './utils/url';

package/src/model/BgColorVersion.ts

@@ -0,0 +1,8 @@
+/**
+ * @title Цвет фона
+ * @enumNames [
+ *    "Прозрачный",
+ *    "Белый"
+ * ]
+ */
+export type BgColorVersion = 'transparent' | 'bg-white';

package/src/services/sitemap/SitemapProps.ts

@@ -0,0 +1,15 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+/**
+ * @title Ссылка
+ * @required ["text", "href"]
+ */
+export interface TopMenuItem extends LinkProps {
+  /** @hidden */
+  items?: LinkProps[];
+}
+
+export interface SitemapProps {
+  /** @title Дополнительное меню */
+  topItems?: TopMenuItem[];
+}

package/src/services/sitemap/findActiveSubItem.ts

@@ -0,0 +1,14 @@
+import type { Router } from '../../components/ContentPage/ContentPageContext';
+import type { LinkProps } from '../../model/LinkProps';
+import { maxBy } from '../../utils/maxBy';
+import { isSubItemActive } from './isSubItemActive';
+
+export const findActiveSubItem =
+  (router: Router) =>
+  <T extends LinkProps>(items: T[] = []): T | null => {
+    const possibleActiveSubItems = items?.filter(isSubItemActive(router));
+    const activeSubItem = possibleActiveSubItems?.length
+      ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
+      : null;
+    return activeSubItem;
+  };

package/src/services/sitemap/isHrefActive.ts

@@ -0,0 +1,13 @@
+import { isURL, withoutQuery } from '../../utils/url';
+import { withoutMobilePath } from '../../utils/withoutMobilePath';
+
+export const isHrefActive = (
+  href: string | undefined,
+  router: { pathname?: string; href?: string },
+  cmp: (href: string, baseHref: string) => boolean = (href, baseHref) => baseHref.startsWith(href),
+) => {
+  return cmp(
+    withoutQuery(href),
+    withoutMobilePath(withoutQuery(isURL(href) ? router.href : router.pathname)),
+  );
+};

package/src/services/sitemap/isSubItemActive.ts

@@ -0,0 +1,8 @@
+import type { Router } from '../../components/ContentPage/ContentPageContext';
+import type { LinkProps } from '../../model/LinkProps';
+import { isHrefActive } from './isHrefActive';
+
+export const isSubItemActive =
+  (router: Router) =>
+  (subItem: LinkProps): boolean =>
+    isHrefActive(subItem.href, router);

package/src/services/sitemap/isTopItemActive.ts

@@ -0,0 +1,9 @@
+import type { Router } from '../../components/ContentPage/ContentPageContext';
+import { isHrefActive } from './isHrefActive';
+import { isSubItemActive } from './isSubItemActive';
+import { TopMenuItem } from './SitemapProps';
+
+export const isTopItemActive =
+  (router: Router) =>
+  (topItem: TopMenuItem): boolean =>
+    topItem.items?.some(isSubItemActive(router)) || isHrefActive(topItem.href, router);

package/src/{mergeTopItems.ts → services/sitemap/mergeTopItems.ts}

@@ -1,4 +1,4 @@
-import type { LinkProps } from './model/LinkProps';
+import type { LinkProps } from '../../model/LinkProps';
 
 const cmp = (a?: LinkProps) => (b?: LinkProps) => a?.href === b?.href;
 
@@ -8,6 +8,5 @@ const substitute = <L extends LinkProps>(items?: L[], substitution?: L[]): L[] =
 const subtract = <L extends LinkProps>(minuend?: L[], subtrahend?: L[]): L[] =>
   (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
 
-export function mergeTopItems<L extends LinkProps>(left?: L[], right?: L[]): L[] {
-  return substitute(left, right).concat(subtract(right, left));
-}
+export const mergeTopItems = <L extends LinkProps>(left?: L[], right?: L[]): L[] =>
+  substitute(left, right).concat(subtract(right, left));

package/src/{hooks → services/sitemap}/useSitemap.ts

@@ -1,6 +1,6 @@
-import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
-import type { HeaderContent } from '../components/Header/HeaderContent';
-import { projectSettings } from '../ProjectSettings';
+import type { AsyncDataHook } from '../../components/ContentPage/ContentPageContext';
+import type { HeaderContent } from '../../components/Header/HeaderContent';
+import { projectSettings } from '../../ProjectSettings';
 
 export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {
   const { data } = useAsyncData(sitemapURL(), fetchSitemap);

package/src/ui-kit/Button/ButtonProps.ts

@@ -26,7 +26,7 @@ export interface ButtonWithIconProps extends ButtonProps {
   aboveText?: string;
   /** @hidden */
   appendLeft?: any;
-  /** @hidden */
+  /** @title Закругленные углы */
   rounded?: boolean;
   /** @hidden */
   asSVG?: boolean;

package/src/ui-kit/HeaderItem/HeaderItem.tsx

@@ -1,25 +1,39 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BgColorVersion } from '../../model/BgColorVersion';
 import type { TopItemProps } from '../TopItem/TopItem';
 
 export type HeaderItemProps = TopItemProps;
 
+const TEXT_CLASSES = 'font-sans font-normal text-base';
+const BORDER_CLASSES = 'absolute left-0 -bottom-2 w-full h-[2px]';
+
 export const HeaderItem = JSX<HeaderItemProps>(
-  ({ className, text, href, target, active, onClick, children }) => {
-    const textStyle = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
-    return (
-      <a
-        className={`relative inline-block bg-transparent text-center no-underline ${
-          className || ''
-        }`}
-        href={href}
-        target={target}
-        onClick={onClick}
-      >
-        <span className={`font-sans font-normal text-base ${textStyle}`}>{text || children}</span>
-        {active ? (
-          <div className="absolute left-0 -bottom-2 w-full h-[2px] bg-primary-main" />
-        ) : null}
-      </a>
-    );
-  },
+  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => (
+    <a
+      className={`relative inline-block bg-transparent text-center no-underline ${className || ''}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      <span className={getTextClasses(bgColor, active)}>{text || children}</span>
+      {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+    </a>
+  ),
 );
+
+const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
+  let classes = 'text-white';
+  if (bgColor === 'bg-white') {
+    classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
+  }
+
+  return `${classes} ${TEXT_CLASSES}`;
+};
+
+const getBorderClasses = (bgColor: BgColorVersion, active?: boolean) => {
+  if (!active) {
+    return BORDER_CLASSES;
+  }
+
+  return `${bgColor === 'bg-white' ? bgColor : 'bg-primary-main'} ${BORDER_CLASSES}`;
+};

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

@@ -2,101 +2,139 @@
  * Icons sorted by name
  */
 export enum IconMap {
-  '',
   'ActualBalanceIcon',
   'AppleIcon',
+  'Calendar2Icon',
   'CalendarCircleIcon',
   'CalendarIcon',
+  'CalendarTickIcon',
   'CalendarWhiteIcon',
+  'CardWithGemIcon',
+  'ChartSquareIcon',
   'CardIcon',
   'CardPosIcon',
   'CardTickIcon',
   'ClockIcon',
   'ComfortableCompIcon',
-  'DiscountShape',
+  'CreditCardsIcon',
+  'DiscountShapeIcon',
   'DocIcon',
-  'DocumentText',
+  'DocumentTextIcon',
   'DollarIcon',
+  'EarthIcon',
   'EmptyWalletChangeIcon',
   'EmptyWalletIcon',
   'EmptyWalletWhiteIcon',
   'EuroIcon',
   'GlassIcon',
+  'GlobalIcon',
   'GridIcon',
+  'GridIconWhite',
+  'InterestGrowthIcon',
+  'InterestIcon',
   'JCBIcon',
   'LoupeIcon',
   'MasterCardIcon',
   'MinusIcon',
   'MirIcon',
   'MoneyIcon',
+  'MoneyInsuranceIcon',
   'MonitorMobileIcon',
   'NewDocIcon',
+  'OfficeIcon',
   'OkIcon',
   'PassSendIcon',
+  'PercentageRoundIcon',
   'PercentageSquareIcon',
   'PercentageSquareWhiteIcon',
+  'PersonalCardIcon',
   'PlayMarketIcon',
   'PlusIcon',
   'Profile2UserIcon',
   'ProfileIcon',
+  'RoundRubleIcon',
+  'SafeIcon',
   'ShieldTickIcon',
   'SignDocsIcon',
+  'SmallClockIcon',
   'TelegramIcon',
   'UnionPayIcon',
-  'UserIcon',
+  'UserTickIcon',
   'VisaIcon',
   'VKIcon',
+  'WalletAdd',
+  'WalletAdd2',
   'WalletIcon',
+  'WalletWithMoneyIcon',
 }
 
 /**
  * @title Иконка
  * @enumNames [
- *    "",
  *    "Деньги",
  *    "Лого «Apple»",
+ *    "Календарь 2",
  *    "Скруглённый календарь",
  *    "Календарь",
+ *    "Календарь с галочкой",
  *    "Календарь белый",
+ *    "Карта с драгоценностями",
+ *    "Деньги внутри кошелька",
  *    "Кред. карта",
  *    "Кред. карта под наклоном",
  *    "Кред. карта с галочкой",
  *    "Часы",
  *    "Кресло",
  *    "Скидка",
+ *    "Кредитные карты",
+ *    "Огромная скидка",
  *    "Документ",
  *    "Документ с текстом",
  *    "Доллар",
  *    "Пустой кошелёк с возвратом",
  *    "Пустой кошелёк",
- *    "Пустой кошелёк белый",
+ *    "Пустой кошелёк (белый)",
  *    "Евро",
  *    "Зеркало",
+ *    "Глобус",
  *    "Сетка",
+ *    "Сетка (белая)",
+ *    "Диаграмма роста",
+ *    "Скидка",
  *    "JCB",
  *    "Лупа",
  *    "MasterCard",
  *    "Минус",
  *    "МИР",
  *    "Деньги",
+ *    "Денежное страхование",
  *    "Монитор и мобильный",
  *    "Новый документ",
+ *    "Офис",
  *    "Лого «Одноклассники»",
  *    "Бизнес",
+ *    "Проценты (круг.)",
  *    "Проценты",
  *    "Проценты белые",
+ *    "Персональная карта",
  *    "Лого «PlayMarket»",
  *    "Плюс",
  *    "Профиль, 2 персоны",
  *    "Профиль",
+ *    "Рубль (круг.)",
+ *    "Сейф",
  *    "Безопасность",
  *    "Подписанные документы",
+ *    "Маленькие часы",
  *    "Лого «Telegram»",
  *    "UnionPay",
  *    "Пользователь",
  *    "Visa",
  *    "Лого «VK»",
+ *    "Пополнение карты",
+ *    "Кошелёк с плюсом",
  *    "Кошелёк",
+ *    "Кошелёк с деньгами",
  *  ]
  */
 export type IconName = keyof typeof IconMap;

package/src/ui-kit/Logo/Logo.tsx

@@ -1,10 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BgColorVersion } from '../../model/BgColorVersion';
 import { SVG } from '../SVG';
 
 export interface LogoProps {
   className: string;
   href: string;
   targetBlank: boolean;
+  bgColor?: string;
 }
 
 const LOGO_PATHS = [
@@ -14,22 +16,32 @@ const LOGO_PATHS = [
   'M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z',
   'M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z',
 ];
+const SVG_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-main',
+  transparent: 'text-white',
+};
+const TEXT_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-black',
+  transparent: 'text-white',
+};
 
-export const Logo = JSX<Partial<LogoProps>>(({ className, href, children, targetBlank }) => {
-  return (
-    <a
-      className={`inline-flex items-center font-sans no-underline ${className || ''}`}
-      href={href || 'https://rshb.ru/'}
-      target={targetBlank ? '_blank' : '_self'}
-    >
-      <SVG
-        className="text-primary-main w-10"
-        viewBox="0 0 40 45"
-        paths={LOGO_PATHS.map((d) => ({ d }))}
-      />
-      <span className="text-black text-base font-medium ml-2.5">
-        {children || 'Россельхозбанк'}
-      </span>
-    </a>
-  );
-});
+export const Logo = JSX<Partial<LogoProps>>(
+  ({ className, href, children, targetBlank, bgColor = 'bg-white' }) => {
+    return (
+      <a
+        className={`inline-flex items-center font-sans no-underline ${className || ''}`}
+        href={href || 'https://rshb.ru/'}
+        target={targetBlank ? '_blank' : '_self'}
+      >
+        <SVG
+          className={`${SVG_COLOR[bgColor]} w-10`}
+          viewBox="0 0 40 45"
+          paths={LOGO_PATHS.map((d) => ({ d }))}
+        />
+        <span className={`${TEXT_COLOR[bgColor]} text-base font-medium ml-2.5`}>
+          {children || 'Россельхозбанк'}
+        </span>
+      </a>
+    );
+  },
+);

package/src/ui-kit/TopItem/TopItem.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 
 export interface TopItemContent extends LinkProps {
@@ -10,28 +11,54 @@ export interface TopItemProps extends TopItemContent {
   flat?: boolean;
   ariaLabel?: string;
   onClick?: (ev: MouseEvent) => any;
+  bgColor?: BgColorVersion;
 }
 
+const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const LINK_CLASSES = 'inline-block border border-solid bg-transparent text-center no-underline';
+
 export const TopItem = JSX<TopItemProps>(
-  ({ className, text, href, target, active, flat, onClick, children, ariaLabel }) => {
-    const linkStyle = active ? 'border-primary-main rounded-md' : 'border-transparent';
-    const textStyle = active
+  ({
+    className = '',
+    text,
+    href,
+    target,
+    active,
+    flat,
+    onClick,
+    children,
+    ariaLabel,
+    bgColor = 'bg-white',
+  }) => (
+    <a
+      className={`${getLinkClasses(bgColor, active, flat)} ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+      rel="noopener noreferrer"
+      aria-label={ariaLabel}
+    >
+      <span className={getTextClasses(bgColor, active, flat)}>{text || children}</span>
+    </a>
+  ),
+);
+
+const getLinkClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolean) => {
+  let classes = 'border-transparent';
+  if (active) {
+    classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
+  }
+
+  return `${classes} ${LINK_CLASSES} ${flat ? '' : 'px-4 py-2'}`;
+};
+
+const getTextClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolean) => {
+  let classes = 'text-white';
+  if (bgColor === 'bg-white') {
+    classes = active
       ? 'text-primary-main'
       : `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
+  }
 
-    return (
-      <a
-        className={`inline-block border border-solid bg-transparent text-center no-underline ${
-          flat ? '' : 'px-4 py-2'
-        } ${linkStyle} ${className || ''}`}
-        href={href}
-        target={target}
-        onClick={onClick}
-        rel="noopener noreferrer"
-        aria-label={ariaLabel}
-      >
-        <span className={`font-sans font-normal text-sm ${textStyle}`}>{text || children}</span>
-      </a>
-    );
-  },
-);
+  return `${classes} ${TEXT_CLASSES}`;
+};

package/src/utils/adjustHref.spec.ts

@@ -0,0 +1,25 @@
+import { adjustHref } from './adjustHref';
+
+describe('adjustHref', () => {
+  it('should compute URL relative to some base URL', () => {
+    expect(
+      adjustHref('http://foo.ru/other/path', {
+        pathname: '/some/path',
+        href: 'http://foo.ru/some/path',
+      }),
+    ).toBe('/other/path');
+  });
+
+  it('should compute mobile URL for mobile pages', () => {
+    expect(
+      adjustHref('http://foo.ru/other/path', {
+        pathname: '/mobile/some/path',
+        href: 'http://foo.ru/mobile/some/path',
+      }),
+    ).toBe('/mobile/other/path');
+  });
+
+  it('should return nothing if nothing provided', () => {
+    expect(adjustHref(undefined, { pathname: '/mobile/some/path' })).toBe(undefined);
+  });
+});

package/src/utils/adjustHref.ts

@@ -0,0 +1,24 @@
+import { getOrigin, isURL } from './url';
+import { MOBILE_URL_PATH } from './withoutMobilePath';
+
+export const adjustHref = (
+  href: string | undefined,
+  router: { pathname: string; href?: string },
+) => {
+  if (!href) {
+    return href;
+  }
+
+  const relativeHref = toRelativeHref(href, router) || '';
+  const isMobilePage = router?.pathname.startsWith(MOBILE_URL_PATH);
+  return isMobilePage && !isURL(relativeHref) ? `${MOBILE_URL_PATH}${relativeHref}` : relativeHref;
+};
+
+const toRelativeHref = (href: string | undefined, router: { href?: string }) => {
+  if (!href) {
+    return href;
+  }
+
+  const origin = getOrigin(router?.href);
+  return origin ? href.replace(origin, '') || '/' : href;
+};

package/src/utils/maxBy.spec.ts

@@ -0,0 +1,11 @@
+import { maxBy } from './maxBy';
+
+describe('maxBy', () => {
+  it('should return max value', () => {
+    expect(maxBy((_: number) => _)([1, 3, 2])).toBe(3);
+  });
+
+  it('should return max value with respect to discriminator', () => {
+    expect(maxBy((_: string) => _.length)(['123', '123456789', '123456'])).toBe('123456789');
+  });
+});

package/src/utils/maxBy.ts

@@ -0,0 +1,7 @@
+export const maxBy =
+  <Item, Value>(discriminator: (item: Item) => Value) =>
+  (list: Item[]): Item =>
+    list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+
+export const minBy = <Item, Value>(discriminator: (item: Item) => Value) =>
+  maxBy((_: Item) => -discriminator(_));

package/src/utils/url.spec.ts

@@ -1,4 +1,4 @@
-import { adjustHref, getOrigin, toRelativeHref, withoutQuery } from './url';
+import { getOrigin, withoutQuery } from './url';
 
 describe('url', () => {
   describe('withoutQuery', () => {
@@ -14,40 +14,4 @@ describe('url', () => {
       expect(getOrigin('http://foo.ru/other/path?first=1&second=2')).toBe('http://foo.ru');
     });
   });
-
-  describe('adjustHref', () => {
-    it('should compute URL relative to some base URL', () => {
-      expect(
-        adjustHref('http://foo.ru/other/path', {
-          pathname: '/some/path',
-          href: 'http://foo.ru/some/path',
-        }),
-      ).toBe('/other/path');
-    });
-
-    it('should compute mobile URL for mobile pages', () => {
-      expect(
-        adjustHref('http://foo.ru/other/path', {
-          pathname: '/mobile/some/path',
-          href: 'http://foo.ru/mobile/some/path',
-        }),
-      ).toBe('/mobile/other/path');
-    });
-
-    it('should return nothing if nothing provided', () => {
-      expect(adjustHref(undefined, { pathname: '/mobile/some/path' })).toBe(undefined);
-    });
-  });
-
-  describe('toRelativeHref', () => {
-    it('should compute URL relative to some base URL', () => {
-      expect(toRelativeHref('http://foo.ru/other/path', { href: 'http://foo.ru/some/path' })).toBe(
-        '/other/path',
-      );
-    });
-
-    it('should return nothing if nothing provided', () => {
-      expect(toRelativeHref(undefined, {})).toBe(undefined);
-    });
-  });
 });