@redneckz/wildless-cms-uni-blocks 0.7.6 → 0.7.7

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

@@ -1,4 +1,4 @@
-import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
@@ -14,10 +14,25 @@ const image: Picture = {
   title: 'product-basket',
 };
 
-const socialMedia: LinkProps[] = [
-  { href: 'https://t.me' },
-  { href: 'https://vk.com' },
-  { href: 'https://ok.ru' },
+const socialMedia: ButtonWithIconProps[] = [
+  {
+    href: 'https://t.me',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
+  {
+    href: 'https://vk.com',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
+  {
+    href: 'https://ok.ru',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
 ];
 
 const items = ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'];

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -21,6 +21,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     items = [],
     socialMedia = [],
     title,
+    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -39,6 +40,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
+        version={version}
         {...rest}
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.ui.json

@@ -3,6 +3,13 @@
     "items": {
       "image": {
         "ui:field": "picture"
+      }, 
+      "socialMedia": {
+        "items": {
+          "icon": {
+            "ui:field": "picture"
+          }
+        }
       }
     }
   }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,7 +1,7 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
@@ -10,14 +10,9 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 export interface CarouselRecommendationCardContent extends HeadlineCommonProps, ListContent {
   /**
    * @title Соц сети
-   * @minItems 3
-   * @default [
-   * { "href": "https://t.me" },
-   * { "href": "https://vk.com" },
-   * { "href": "https://ok.ru" },
-   * ]
+   * @minItems 1
    */
-  socialMedia?: LinkCommonProps[];
+  socialMedia?: ButtonWithIconProps[];
   /**
    * @default {
    *   "format": "webp",
@@ -40,4 +35,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
+  version?: BlockVersion;
 }

package/src/components/Footer/Footer.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { Button } from '../../ui-kit/Button/Button';

package/src/components/Footer/Footer.tsx

@@ -20,7 +20,7 @@ export interface FooterProps extends FooterContent, UniBlockProps {}
 export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
-  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } =
+  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
@@ -37,7 +37,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
             Мобильное приложение
           </SocialMedia>
         </div>
-        <Sitemap className="pt-[3px]" items={topItems} fallback={fallback} />
+        <Sitemap className="pt-[3px]" fallback={fallback} />
       </div>
       <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} />
       <TextInformation links={documents} />

package/src/components/Footer/MediaButton.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { Picture } from '../../model/Picture';
 import type { IconVersion } from '../../model/IconVersion';
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -45,11 +46,9 @@ const ICONS_MAP: Array<{
 
 export type ButtonSize = 'default' | 'small';
 
-interface MediaButtonProps {
-  href?: string;
-  isRounded?: boolean;
-  buttonSize?: ButtonSize;
+interface MediaButtonProps extends ButtonProps {
   iconVersion?: IconVersion;
+  buttonSize?: ButtonSize;
 }
 
 const buttonSizeStyles = {
@@ -58,29 +57,32 @@ const buttonSizeStyles = {
 };
 
 export const MediaButton = JSX<MediaButtonProps>(
-  ({ isRounded = false, buttonSize = 'default', iconVersion = 'color', ...rest }) => {
-    const link = useLink();
-    const { href, onClick } = link(rest);
+  ({ iconVersion = 'color', buttonSize = 'default', rounded = false, ...rest }) => {
+    const { href, version } = rest;
 
     const { icon, label } =
       ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
     const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
 
-    return icon ? (
-      <a
+    return (
+      <Button
         className={style(
           'group/media flex items-center justify-center box-border',
           buttonSizeStyles[buttonSize],
-          isRounded ? 'rounded-full' : 'rounded-md',
-          'border-solid border border-main-divider hover:border-transparent',
+          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 group-data-secondary:hover:bg-secondary-hover',
+          'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
+          'group-data-gray:border-green',
+
+          buttonSizeStyles[buttonSize],
         )}
-        href={href}
         aria-label={label}
         target="_blank"
         rel="noopener noreferrer"
-        onClick={onClick}
+        version={version}
+        {...rest}
       >
         {iconWithVersion ? (
           <Img
@@ -91,7 +93,7 @@ export const MediaButton = JSX<MediaButtonProps>(
             asSVG
           />
         ) : null}
-      </a>
-    ) : null;
+      </Button>
+    );
   },
 );

package/src/components/Footer/SocialMedia.tsx

@@ -1,20 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { MediaButton, type ButtonSize } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
-  media?: LinkProps[];
-  isRounded?: boolean;
+  media?: ButtonProps[];
   buttonSize?: ButtonSize;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, isRounded = false, buttonSize, children }) => (
+  ({ className = '', media, children, buttonSize }) => (
     <div className="font-sans">
       <div className={`flex gap-2.5 ${className}`}>
         {media?.map((_, index) => (
-          <MediaButton key={String(index)} isRounded={isRounded} buttonSize={buttonSize} {..._} />
+          <MediaButton key={String(index)} buttonSize={buttonSize} version={_.version} {..._} />
         ))}
       </div>
       <span className="text-s-light text-secondary-text">{children}</span>

package/src/components/Header/DropdownMenu.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 interface DropdownMenuProps {
   className?: string;
@@ -21,7 +22,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
 
   return (
     <div
-      className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+      className={style(visible ? 'bg-white rounded-md shadow-blue-gray' : '', className)}
       ref={ref}
     >
       <button
@@ -39,15 +40,16 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
           ))}
       </button>
       <div
-        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+        className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
         aria-hidden={!visible}
       >
         {items?.map((item, i) => (
           <a
             key={item.href || String(i)}
-            className={`text-l-light pb-4 hover:text-primary-main ${
-              item === activeItem ? 'text-primary-main' : ''
-            }`}
+            className={style(
+              'text-l-light pb-4 hover:text-primary-main',
+              item === activeItem ? 'text-primary-main' : '',
+            )}
             {...link(item)}
           >
             {item.text}

package/src/components/Header/Header.fixture.tsx

@@ -2,7 +2,7 @@ import '../../setup-fixture';
 import { Header } from './Header';
 
 export default {
-  default: <Header />,
-  transparent: <Header bgColor="transparent" />,
-  'no submenu': <Header showSubMenu={false} />,
+  default: <Header chat="personal" />,
+  transparent: <Header bgColor="transparent" chat="personal" />,
+  'no submenu': <Header showSubMenu={false} chat="personal" />,
 };

package/src/components/Header/Header.tsx

@@ -10,6 +10,7 @@ import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { style } from '../../utils/style';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
@@ -24,9 +25,10 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 export const Header = JSX<HeaderProps>(
   ({
     bgColor = 'bg-white',
-    className = '',
+    className,
     showSubMenu = true,
     version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
+    chat,
     ...rest
   }) => {
     const router = useRouter();
@@ -46,9 +48,11 @@ export const Header = JSX<HeaderProps>(
     return (
       <BlockWrapper
         tag="header"
-        className={`pt-6 px-20 ${className} ${
-          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'
-        }`}
+        className={style(
+          'pt-6 px-20',
+          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5',
+          className,
+        )}
         version={version}
         {...rest}
       >
@@ -62,10 +66,14 @@ export const Header = JSX<HeaderProps>(
               foreignOffices={foreignOffices}
               defaultLocation={defaultLocation}
               officesLink={officesLink}
+              chat={chat}
             />
           </div>
           <div
-            className={`mt-6 h-px bg-main-divider${version === 'transparent' ? ' opacity-30' : ''}`}
+            className={style(
+              'mt-6 h-px bg-main-divider',
+              version === 'transparent' ? 'opacity-30' : '',
+            )}
           />
           {showSubMenu && activeTopItem?.items?.length ? (
             <HeaderSubMenu subItems={activeTopItem.items} />

package/src/components/Header/HeaderChatBotButton.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '../../hooks/useBool';
+import type { IconVersion } from '../../model/IconVersion';
+import { style } from '../../utils/style';
+import type { ChatBot as ChatBotWithEmptyOption } from './HeaderContent';
+import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+import { useChatBot } from './useChatBot';
+
+export type ChatBot = Exclude<ChatBotWithEmptyOption, ''>;
+
+interface HeaderChatBotButtonProps {
+  className?: string;
+  iconVersion?: IconVersion;
+  chat?: ChatBot;
+  onClick?: () => void;
+}
+
+const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+
+export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>((props) => {
+  const [loadRequested, { setTrue: load }] = useBool();
+
+  return loadRequested ? (
+    <HeaderChatBotButtonWithLoader {...props} />
+  ) : (
+    renderChatBotButton({ ...props, onClick: load })
+  );
+});
+
+const HeaderChatBotButtonWithLoader = JSX<HeaderChatBotButtonProps>(
+  ({ chat = 'personal', ...rest }) => {
+    useChatBot(chat);
+
+    return renderChatBotButton(rest);
+  },
+);
+
+const renderChatBotButton = ({ className, iconVersion, onClick }: HeaderChatBotButtonProps) => (
+  <HeaderSecondaryMenuButton
+    className={style(CHAT_BUTTON_EXTERNAL_NAME, className)}
+    image={{ icon: 'HeadphonesIcon', iconVersion }}
+    ariaLabel="Чат"
+    onClick={onClick}
+  />
+);

package/src/components/Header/HeaderContent.ts

@@ -7,6 +7,12 @@ import type { IconProps, Picture } from '../../model/Picture';
  */
 export type SubMenuItem = LinkProps & IconProps;
 
+/**
+ * @title Чат-бот
+ * @enumNames ["", "Для физических лиц", "Для юридических лиц"]
+ */
+export type ChatBot = '' | 'personal' | 'business';
+
 /**
  * @title Ссылка дополнительного меню
  * @required ["text", "href"]
@@ -28,11 +34,11 @@ export interface Logo {
 
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
- * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */
   bgColor?: BgColorVersion;
+  chat?: ChatBot;
 }

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,12 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
 import { useLocation } from '../../hooks/useLocation';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Location } from '../../ui-kit/Location/Location';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { style } from '../../utils/style';
+import { HeaderChatBotButton } from './HeaderChatBotButton';
+import type { ChatBot } from './HeaderContent';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
@@ -14,6 +16,7 @@ interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
   officesLink?: string;
   foreignOffices?: ForeignOffice[];
+  chat?: ChatBot;
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -21,22 +24,16 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
 }
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
-    const [isShowLocationModal, setShowLocationModal] = useState<boolean>(false);
+  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices, chat }) => {
+    const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] =
+      useBool();
 
     const [location, onChangeLocation] = useLocation(defaultLocation);
 
-    const showLocationModal = useCallback(() => {
-      setShowLocationModal(true);
-    }, []);
-    const hideLocationModal = useCallback(() => {
-      setShowLocationModal(false);
-    }, []);
-
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
     return (
-      <div className={`flex items-center ${className || ''}`}>
+      <div className={style('flex items-center', className)}>
         <TopItem
           className="mr-5"
           flat={true}
@@ -54,28 +51,21 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             ariaLabel="Список всех доступных офисов и банкоматов"
           />
         ) : null}
+        {chat ? (
+          <HeaderChatBotButton className="mr-5" iconVersion={iconVersion} chat={chat} />
+        ) : null}
         <HeaderSecondaryMenuButton
-          className="mr-5 group/btn text-primary-text hover:text-primary-main group-data-transparent:text-white"
+          className="mr-5"
+          image={{ icon: 'LoupeIcon', iconVersion }}
           ariaLabel="Поиск по сайту"
-        >
-          <Img
-            image={{ icon: 'LoupeIcon', iconVersion }}
-            className="h-full pointer-events-none"
-            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0 pointer-events-none"
-            asSVG
-          />
-        </HeaderSecondaryMenuButton>
+          disabled={true}
+        />
         <HeaderSecondaryMenuButton
-          className="group/btn min-w-8 min-h-8 text-secondary-light hover:text-secondary-hover group-data-transparent:text-white"
+          image={{ icon: 'GridIcon', iconVersion }}
           ariaLabel="Дополнительные ссылки"
-        >
-          <Img
-            image={{ icon: 'GridIcon', iconVersion }}
-            className="h-full bg-main-divider/20 rounded-full pointer-events-none"
-            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-            asSVG
-          />
-        </HeaderSecondaryMenuButton>
+          isRounded={true}
+          disabled={true}
+        />
         {isShowLocationModal ? (
           <Location
             currentLocation={location}

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,19 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { style } from '../../utils/style';
 
-interface HeaderSecondaryMenuButtonProps {
+export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   className?: string;
+  isRounded?: boolean;
+  disabled?: boolean;
   ariaLabel?: string;
+  onClick?: (ev?: { preventDefault: () => void }) => void;
 }
 
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className = '', children, ariaLabel }) => (
+  ({ className, isRounded, disabled, ariaLabel, image, onClick }) => (
     <button
+      className={style(
+        'group/btn border-0 p-0 flex items-center bg-inherit',
+        isRounded
+          ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
+          : 'w-6 h-6 text-primary-text hover:text-primary-main',
+        'group-data-transparent:text-white',
+        className,
+      )}
       type="button"
-      className={`border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`}
-      disabled={true}
+      disabled={disabled}
       aria-label={ariaLabel}
+      onClick={onClick}
     >
-      {children}
+      <Img
+        image={image}
+        className={style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : '')}
+        imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
+        asSVG
+      />
     </button>
   ),
 );

package/src/components/Header/useChatBot.ts

@@ -0,0 +1,16 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useExternalNS } from '../../hooks/useExternalNS';
+import { ChatBot } from './HeaderChatBotButton';
+
+const CHATBOT_NAMESPACE = 'chatbot';
+
+const CHATBOT_URL: Record<ChatBot, string> = {
+  personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
+  business: '', //TODO: add url business chat
+};
+
+export const useChatBot = (chat: ChatBot) => {
+  useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
+
+  return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+};

package/src/hooks/useBool.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useBool(defaultValue = false): [
+  boolean,
+  {
+    setValue: (_: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+  },
+] {
+  const [value, setValue] = useState<boolean>(defaultValue);
+
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  const toggle = useCallback(() => setValue((_) => !_), []);
+
+  return [value, { setValue, setTrue, setFalse, toggle }];
+}

package/src/icons/HeadphonesIcon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" name="Наушники" fill="none" viewBox="0 0 24 23">
+  <path fill="currentColor" fill-rule="evenodd"
+    d="M2.002 19.612a3.025 3.025 0 0 1-2-2.965V13.48a2.948 2.948 0 0 1 1.53-2.561v-.272C1.504 5.437 5.237.98 10.334.14c5.098-.841 10.044 2.182 11.664 7.128.124.34.058.718-.17.995a.997.997 0 0 1-1.71-.299 8.484 8.484 0 0 0-3.999-4.85 8.505 8.505 0 0 0-8.417.215 8.657 8.657 0 0 0-4.17 7.378v1.009c0 .557-.448 1.008-1 1.008-.17 0-.5.393-.5.767v3.267c0 .557.447 1.008 1 1.008.552 0 1-.451 1-1.008v-2.26c0-.556.447-1.007 1-1.007.551 0 .999.45.999 1.008v2.259c.004.99-.472 1.92-1.276 2.488a2.978 2.978 0 0 1-2.753.366Zm19.876.222a3.022 3.022 0 0 0 2.12-2.885v-2.924a3.025 3.025 0 0 0-2-2.965 2.978 2.978 0 0 0-2.74.388 3.034 3.034 0 0 0-1.259 2.486v2.017c0 .557.448 1.008 1 1.008s1-.451 1-1.008v-2.017c0-.557.447-1.008 1-1.008.552 0 1 .451 1 1.008v3.025c0 .557-.448 1.009-1 1.009a.996.996 0 0 0-.73.316c-.189.203-.287.475-.27.753a2.008 2.008 0 0 1-2 1.956h-4v-.716c0-.557-.447-1.008-1-1.008-.551 0-.999.451-.999 1.008v1.715c0 .556.448 1.008 1 1.008h4.999a4.007 4.007 0 0 0 3.91-3.166h-.03Z"
+    clip-rule="evenodd" />
+</svg>