@redneckz/wildless-cms-uni-blocks 0.13.22 → 0.13.24

package/src/components/Calculator/useRefinancingCalculatorParams.ts

@@ -12,6 +12,7 @@ export interface CommonRefinancingParams {
   isInsurance: boolean;
   isExtraMoney: boolean;
 }
+
 export interface RefinancingCalculatorSourceBookRateParams extends CommonRefinancingParams {
   minSum: number;
   maxSum: number;
@@ -78,12 +79,6 @@ export const useRefinancingCalculatorParams = (
     rateRows,
   );
 
-  const { minSumOld, maxSumOld } = getLimitRangeByKeys(
-    ['minSumOld', 'maxSumOld'],
-    sourceBookLimitParams,
-    rateRows,
-  );
-
   const { minMonths, maxMonths } = getLimitRangeByKeys(
     ['minMonths', 'maxMonths'],
     sourceBookLimitParams,
@@ -110,8 +105,6 @@ export const useRefinancingCalculatorParams = (
       ...userInputParams,
       minSum,
       maxSum,
-      minSumOld,
-      maxSumOld,
       minMonths,
       maxMonths,
       moneyValue,

package/src/components/Carousel/Carousel.example.json

@@ -1,5 +1,4 @@
 {
-  "visibleItemCount": 1,
   "isBlur": false,
   "arrowsPadded": true,
   "isCycle": false,

package/src/components/Carousel/Carousel.fixture.tsx

@@ -57,6 +57,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        visibleItemCount={0}
         noCardBorder={true}
         block={{
           type: 'Carousel',
@@ -171,6 +172,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -221,6 +223,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({

package/src/components/Carousel/Carousel.tsx

@@ -10,6 +10,7 @@ import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
 import { renderCarouselCards } from './renderCarouselCards';
+import { VISIBLE_ITEM_COUNT } from './visibleItemCount';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -19,7 +20,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className,
     itemCount,
-    visibleItemCount = 0,
+    visibleItemCount = VISIBLE_ITEM_COUNT,
     noCardBorder,
     isAlignCenter,
     arrowsPadded = true,

package/src/components/Carousel/visibleItemCount.mobile.ts

@@ -0,0 +1 @@
+export const VISIBLE_ITEM_COUNT = 0;

package/src/components/Carousel/visibleItemCount.ts

@@ -0,0 +1 @@
+export const VISIBLE_ITEM_COUNT = 1;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile.tsx

@@ -1,11 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
+import type { SocialMediaLink } from '../Footer/FooterContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
-import type {
-  CarouselRecommendationCardContent,
-  RecommendationSocialMedia,
-} from './CarouselRecommendationCardContent';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -17,42 +15,30 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const commonProps: RecommendationSocialMedia = {
-  target: '_blank',
-  version: 'gray',
-  rounded: false,
-};
-
-const socialMediaWithText: RecommendationSocialMedia[] = [
+const socialMediaWithText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
     text: 'Telegram',
-    ...commonProps,
   },
 ];
 
-const socialMediaWithoutText: RecommendationSocialMedia[] = [
+const socialMediaWithoutText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
-    ...commonProps,
   },
 ];
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,11 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
+import type { SocialMediaLink } from '../Footer/FooterContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
-import type {
-  CarouselRecommendationCardContent,
-  RecommendationSocialMedia,
-} from './CarouselRecommendationCardContent';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -17,42 +15,30 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const commonProps: RecommendationSocialMedia = {
-  target: '_blank',
-  version: 'gray',
-  rounded: false,
-};
-
-const socialMediaWithText: RecommendationSocialMedia[] = [
+const socialMediaWithText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
     text: 'Telegram',
-    ...commonProps,
   },
 ];
 
-const socialMediaWithoutText: RecommendationSocialMedia[] = [
+const socialMediaWithoutText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
-    ...commonProps,
   },
 ];
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
@@ -7,8 +9,6 @@ import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -12,6 +12,7 @@ import type { CarouselRecommendationCardContent } from './CarouselRecommendation
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
+//TODO: replace SocialMedia with renderButtonSection
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   ({
     className,

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,10 +2,8 @@ import type { AlignProps, HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-
-export type RecommendationSocialMedia = LinkCommonProps & IconProps & ButtonContent;
+import type { SocialMediaLink } from '../Footer/FooterContent';
 
 /**
  * @title Карточка рекомендаций
@@ -17,5 +15,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps &
   AlignProps & {
     /** @title Соц сети */
-    socialMedia?: RecommendationSocialMedia[];
+    socialMedia?: SocialMediaLink[];
   };

package/src/components/Footer/Footer.tsx

@@ -6,6 +6,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { Sitemap } from '../../ui-kit/Sitemap/Sitemap';
+import { style } from '../../utils/style';
 import { Contacts } from './Contacts';
 import type { FooterDataProps } from './FooterDataProps';
 import type { FooterProps } from './FooterProps';
@@ -16,8 +17,8 @@ import { TextInformation } from './TextInformation';
 const LEFT_COL_WIDTH = 'w-52';
 
 export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
-  const { topItems } = useSitemap(rest.options?.page?.fallback);
-  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } =
+  const { topItems, logo } = useSitemap(rest.options?.page?.fallback);
+  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', {
       fallback: rest.options?.page?.fallback,
     });
@@ -29,7 +30,7 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
         <SearchBar className="grow" />
       </div>
       <div className="flex items-stretch gap-6xl">
-        <div className={`${LEFT_COL_WIDTH} flex flex-col shrink-0 overflow-hidden space-y-xl`}>
+        <div className={style(LEFT_COL_WIDTH, 'flex flex-col shrink-0 overflow-hidden space-y-xl')}>
           <Contacts items={contacts} />
           <SocialMedia media={socialMedia}>Соцсети</SocialMedia>
           <SocialMedia media={mobileApps}>Мобильное приложение</SocialMedia>

package/src/components/Footer/FooterContent.ts

@@ -1,7 +1,11 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
+
+export interface SocialMediaLink extends LinkProps {
+  icon?: Picture;
+}
 
 /**
  * @title Тип контакта

package/src/components/Footer/FooterDataProps.ts

@@ -1,18 +1,12 @@
-import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
-import type { Picture } from '../../model/Picture';
+import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactGroup, SubMenuItem } from './FooterContent';
+import type { ContactGroup, SocialMediaLink } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
   contacts?: ContactGroup[];
-  socialMedia?: LinkCommonProps[];
-  mobileApps?: LinkCommonProps[];
+  socialMedia?: SocialMediaLink[];
+  mobileApps?: SocialMediaLink[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
-  subMenu?: SubMenuItem[]; // TODO: для мобильной версии
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
 }

package/src/components/Footer/MediaButton.tsx

@@ -1,55 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconProps, Picture } from '../../model/Picture';
+import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
-import { buttonStylesWithText } from './buttonStylesWithText';
+import { buttonSizeStyle } from './buttonSizeStyle';
 import { findIconByHref } from './findIconByHref';
 
 export type ButtonSize = 'default' | 'stretched';
 
-interface MediaButtonProps extends ButtonProps, IconProps {
+interface MediaButtonProps extends ButtonContent {
   buttonSize?: ButtonSize;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(
-  ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
-    const { href, version, text = '' } = rest;
+//TODO: Refactor this.
+export const MediaButton = JSX<MediaButtonProps>(({ buttonSize = 'default', icon, ...rest }) => {
+  const { href } = rest;
 
-    const { iconMapped, label } = findIconByHref(href);
+  const { iconMapped, label } = findIconByHref(href);
 
-    const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+  const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 
-    return (
-      <Button
-        className={style(
-          rounded ? 'rounded-full' : 'rounded-md',
-          'border border-solid hover:border-transparent',
-          'group-data-primary:border-main-divider',
-          'hover:bg-primary-main hover:text-black',
-          'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
-          'group-data-gray:border-green',
-          buttonStylesWithText(text, buttonSize),
-        )}
-        aria-label={label}
-        rel="noopener noreferrer"
-        target="_blank"
-        text={text}
-        version={version}
-        {...rest}
-      >
-        {iconCustom && !text ? (
-          <Img
-            image={iconCustom}
-            imageClassName="group-hover/media:text-white"
-            width="24"
-            height="24"
-          />
-        ) : null}
-      </Button>
-    );
-  },
-);
+  return (
+    <Button
+      className={style(
+        'border border-solid hover:border-transparent',
+        'group-data-primary:border-main-divider',
+        'hover:bg-primary-main hover:text-black',
+        'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
+        'group-data-gray:border-green',
+        'py-m group/media flex items-center justify-center box-border',
+        buttonSizeStyle[buttonSize],
+      )}
+      aria-label={label}
+      rel="noopener noreferrer"
+      target="_blank"
+      {...rest}
+    >
+      <Img
+        image={iconCustom}
+        imageClassName="group-hover/media:text-white"
+        width="24"
+        height="24"
+      />
+    </Button>
+  );
+});
 
 const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

package/src/components/Footer/SocialMedia.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { Text } from '../../ui-kit/Text/Text';
-import { MediaButton } from './MediaButton';
-import type { ButtonSize } from './MediaButton';
 import { style } from '../../utils/style';
+import type { ButtonSize } from './MediaButton';
+import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;

package/src/components/Footer/{buttonSizeStyles.ts → buttonSizeStyle.ts}

@@ -1,6 +1,6 @@
 import { ButtonSize } from './MediaButton';
 
-export const buttonSizeStyles: { [key in ButtonSize]: string } = {
+export const buttonSizeStyle: { [key in ButtonSize]: string } = {
   default: 'w-14 h-14',
   stretched: 'flex-1 h-14',
 };

package/src/components/ProductBlock/ProductBlock.tsx

@@ -32,7 +32,6 @@ export const ProductBlock = JSX<ProductBlockProps>(
               handleClick,
             )
           : null}
-
         <BaseProductTile className="grow h-full" {...rest} />
       </BlockWrapper>
     );

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -6,6 +6,6 @@ import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BasePr
  */
 export type ProductBlockContent = UniBlockContent &
   BaseProductTileContent & {
-    /** @title Отображать кнопку возврата */
+    /** @title Отображать кнопку возврата (только для десктопной версии) */
     backwardButton?: boolean;
   };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -9,7 +9,7 @@ export function renderBackwardButton(version: ButtonVersion, handleClick: () =>
   const text = 'Вернуться назад';
 
   return (
-    <div className="flex items-center gap-s">
+    <div className="hidden sm:flex items-center gap-s">
       <div
         className={getRegularButtonClasses({ className, version, rounded: true })}
         onClick={handleClick}

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.example.json

@@ -1,6 +1,8 @@
 {
   "title": "Заголовок",
+  "description": "Описание",
   "__html": "<p>Описание</p>",
+  "richVersion": "",
   "button": {
     "text": "Информация о регионе",
     "version": "link",

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -7,8 +7,8 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 const BUTTON: ButtonContent = {
   text: 'Информация о регионе',
   target: '_blank',
-  version: 'secondary',
-  icon: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
+  version: 'link',
+  iconRight: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
 };
 
 const ICON: Picture = {
@@ -32,7 +32,7 @@ export default {
   default: (
     <div className="container grid grid-cols-12">
       <RepresentativeOfficeInfo
-        className="col-span-12"
+        className="col-span-6"
         title="Представительство в Республике Беларусь"
         __html={DESCRIPTION}
         address="Республика Беларусь, 220004, г. Минск, ул. Немига, д. 40"

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -11,6 +11,7 @@ import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
 
 export interface RepresentativeOfficeInfoProps
   extends RepresentativeOfficeInfoContent,
@@ -36,13 +37,22 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     >
       <div className="w-full flex justify-between flex-row-reverse">
         {renderIconBlock(icon)}
-        {title ? <Heading headingType="h4" as="h3" title={title} /> : null}
+        {title ? <Heading headingType="h3" as="h3" title={title} /> : null}
       </div>
       <div className="w-full space-y-m">
         {__html ? renderDescriptionBlock(__html) : null}
-        {renderBlock('Адрес', address, 'GeolocationIcon')}
-        {renderBlock('Телефон', telephone, 'PhoneIcon')}
-        {renderBlock('E-mail', email, 'MailIcon')}
+        {renderBlock({
+          label: 'Адрес',
+          data: address,
+          iconName: 'GeolocationIcon',
+        })}
+        {renderBlock({ label: 'Телефон(факс)', data: telephone, iconName: 'PhoneIcon' })}
+        {renderBlock({
+          label: 'E-mail',
+          data: email,
+          iconName: 'MailIcon',
+          dataColor: 'text-primary-main',
+        })}
         {button?.text ? renderButtonsSection([button]) : null}
       </div>
     </BlockWrapper>
@@ -56,23 +66,29 @@ const renderIconBlock = (icon?: Picture) => (
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider">
+  <div className="border-b border-main-divider pb-lg">
     <RichText __html={__html} />
   </div>
 );
 
-const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
-  <div className="flex gap-m">
-    <Icon iconVersion="black" name={iconName} width="24" height="24" />
-    <div className="flex flex-col">
-      <Text size="text-m" font="font-light">
-        {blockName}
-      </Text>
-      {data ? (
-        <Text size="text-h6" color="text-green">
+interface renderBlockProps {
+  label?: string;
+  data?: string;
+  iconName?: IconName | undefined;
+  dataColor?: TextColor;
+}
+
+const renderBlock = ({ label, data, iconName, dataColor = '' }: renderBlockProps) =>
+  data ? (
+    <div className="flex gap-s">
+      <Icon iconVersion="black" name={iconName} width="24" height="24" />
+      <div className="flex flex-col gap-2xs">
+        <Text size="text-m" font="font-light" color="text-secondary-text">
+          {label}
+        </Text>
+        <Text size="text-xl" color={dataColor}>
           {data}
         </Text>
-      ) : null}
+      </div>
     </div>
-  </div>
-);
+  ) : null;

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -128,10 +128,11 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
         'z-10 mr-s flex justify-center content-center',
       )}
     >
-      <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">
+      <span className="flex max-w-full max-h-full self-center text-h4 text-secondary-text group-data-secondary:text-white">
         {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+            imageClassName="max-w-full max-h-full"
             width={iconSize}
             height={iconSize}
           />

package/src/components/Tile/Tile.fixture.mobile.tsx

@@ -0,0 +1,48 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { Tile } from './Tile';
+import type { TileContent } from './TileContent';
+
+const image: Picture = {
+  src: 'from-5-5-percent.svg',
+  format: 'webp',
+  size: {
+    width: 145,
+  },
+};
+
+export const TILE: TileContent = {
+  title: 'Кредиты',
+  isDotted: true,
+  listItemSize: 'L',
+  items: ['До 3 млн ₽', 'до 5 лет'],
+  __html: undefined,
+  buttons: [
+    {
+      text: 'Подробнее',
+      href: '/credit-cards',
+      version: 'secondary',
+    },
+  ],
+  image,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Tile className="col-span-12" {...TILE} />
+    </div>
+  ),
+  rightImage: (
+    <div className="container grid grid-cols-12">
+      <Tile
+        className="col-span-12"
+        {...TILE}
+        imageOptions={{
+          isImageAlwaysOnRight: true,
+        }}
+      />
+    </div>
+  ),
+};

package/src/icons/IconName.ts

@@ -29,7 +29,6 @@ export const IconsWithoutInversion = new Set([
   'HuaweiIcon',
   'InterestGrowthIcon',
   'JCBIcon',
-  'MailIcon',
   'MapMarkerClusterIcon',
   'MapMarkerSingleIcon',
   'MapOpenedIcon',
@@ -41,7 +40,6 @@ export const IconsWithoutInversion = new Set([
   'PackA4Icon',
   'PassSendIcon',
   'PercentIcon',
-  'PhoneIcon',
   'PowerIcon',
   'PumpkinIcon',
   'ResponseFailIcon',

package/src/icons/MailIcon.svg

@@ -1 +1,4 @@
-<svg title="E-mail" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path stroke="#7D7E7F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M22 12.98v2.52c0 3.5-2 5-5 5H7c-3 0-5-1.5-5-5v-7c0-3.5 2-5 5-5h10c3 0 5 1.5 5 5"/><path stroke="#7D7E7F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m17 9-3.13 2.5c-1.03.82-2.72.82-3.75 0L7 9"/></svg>
+<svg title="E-mail" isInverse="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M22 12.98v2.52c0 3.5-2 5-5 5H7c-3 0-5-1.5-5-5v-7c0-3.5 2-5 5-5h10c3 0 5 1.5 5 5"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m17 9-3.13 2.5c-1.03.82-2.72.82-3.75 0L7 9"/>
+</svg>