@redneckz/wildless-cms-uni-blocks 0.2.100 → 0.2.104

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

@@ -18,25 +18,38 @@
           "type": "Header",
           "style": ["-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
           "content": {
-            "defaultLocation": "Москва",
-            "topItems": [
-              {
-                "href": "https://rshb.ru/",
-                "text": "Бизнес клиентам",
-                "target": "_blank"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Частным клиентам",
-                "target": "_blank"
-              }
-            ]
+            "defaultLocation": "Москва"
           }
         }
       ]
     }
   },
   "blocks": [
+    {
+      "type": "Navigation",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Потребительский кредит наличными",
+        "buttons": [
+          {
+            "href": "/credits",
+            "text": "Оформить"
+          },
+          {
+            "href": "/tariffs",
+            "text": "Тарифы"
+          },
+          {
+            "href": "/harvest",
+            "text": "Урожай"
+          },
+          {
+            "href": "/faq",
+            "text": "Частые вопросы"
+          }
+        ]
+      }
+    },
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -1838,12 +1851,12 @@
           {
             "label": "Кредит по одному документу",
             "description": "До 300 тыс ₽ по упрощённой процедуре получения кредита",
-            "icon": "DocumentText"
+            "icon": "DocumentTextIcon"
           },
           {
             "label": "Кредит на общих условиях",
             "description": "До 5 млн ₽ на общих условиях получения кредита",
-            "icon": "DiscountShape"
+            "icon": "DiscountShapeIcon"
           }
         ],
         "image": {

package/src/components/Footer/FooterContent.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { SitemapProps } from '../../model/SitemapProps';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Тип контакта

package/src/components/Footer/Sitemap.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { useSitemap } from '../../hooks/useSitemap';
-import { mergeTopItems } from '../../mergeTopItems';
 import type { LinkProps } from '../../model/LinkProps';
-import type { TopMenuItem } from '../../model/SitemapProps';
+import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
+import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
 }

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

@@ -1,21 +1,7 @@
 import { context } from '../../setup-fixture';
 import { Header } from './Header';
 
-export default (
-  <Header
-    context={context}
-    defaultLocation="Москва"
-    topItems={[
-      {
-        href: 'https://rshb.ru/',
-        text: 'Бизнес клиентам',
-        target: '_blank',
-      },
-      {
-        href: 'https://rshb.ru/',
-        text: 'Частным клиентам',
-        target: '_blank',
-      },
-    ]}
-  />
-);
+export default {
+  default: <Header context={context} defaultLocation="Москва" />,
+  transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
+};

package/src/components/Header/Header.tsx

@@ -1,61 +1,72 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { useSitemap } from '../../hooks/useSitemap';
-import { mergeTopItems } from '../../mergeTopItems';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
+import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
-import { isSubItemActive } from './isSubItemActive';
-import { isTopItemActive } from './isTopItemActive';
+
+const BORDER_COLORS: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-main-divider',
+  transparent: 'bg-main-divider opacity-30',
+};
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, topItems }) => {
-  const router = context.useRouter();
-  const sitemap = useSitemap(context.useAsyncData);
-  const { handlerDecorator } = context;
+export const Header = JSX<HeaderProps>(
+  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+    const router = context.useRouter();
+    const sitemap = useSitemap(context.useAsyncData);
+    const { handlerDecorator } = context;
 
-  const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-  const activeTopItem = mergedItems.find(isTopItemActive(router));
-  const subItems = activeTopItem?.items;
-  const activeSubItem = subItems?.find(isSubItemActive(router));
+    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
+    const activeTopItem = mergedItems.find(isTopItemActive(router));
+    const subItems = activeTopItem?.items;
+    const activeSubItem = findActiveSubItem(router)(subItems);
 
-  const topMenu = mergedItems.map((_, i) => (
-    <TopItem
-      key={String(i)}
-      active={_ === activeTopItem}
-      {...useLink({ router, handlerDecorator }, _)}
-      ariaLabel={_.text}
-    />
-  ));
+    const topMenu = mergedItems.map((_, i) => (
+      <TopItem
+        key={String(i)}
+        active={_ === activeTopItem}
+        {...useLink({ router, handlerDecorator }, _)}
+        ariaLabel={_.text}
+        bgColor={bgColor}
+      />
+    ));
 
-  const subMenu = subItems?.map((_) => (
-    <HeaderItem
-      key={_.href}
-      className="mr-8"
-      active={_ === activeSubItem}
-      {...useLink({ router, handlerDecorator }, _)}
-    />
-  ));
+    const subMenu = subItems?.map((_) => (
+      <HeaderItem
+        key={_.href}
+        className="mr-8"
+        active={_ === activeSubItem}
+        {...useLink({ router, handlerDecorator }, _)}
+        bgColor={bgColor}
+      />
+    ));
 
-  return (
-    <header className={`pt-5 pb-8 px-20 bg-white ${className || ''}`}>
-      <div className="container">
-        <div className="flex items-center">
-          <Logo className="mr-8" />
-          {topMenu}
-          <HeaderSecondaryMenu
-            context={context}
-            className="ml-auto"
-            defaultLocation={defaultLocation}
-          />
+    return (
+      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`}>
+        <div className="container">
+          <div className="flex items-center">
+            <Logo className="mr-8" bgColor={bgColor} />
+            {topMenu}
+            <HeaderSecondaryMenu
+              context={context}
+              className="ml-auto"
+              defaultLocation={defaultLocation}
+              bgColor={bgColor}
+            />
+          </div>
+          <div className={`mt-5 h-[1px] ${BORDER_COLORS[bgColor]}`} />
+          <nav className="mt-5">{subMenu}</nav>
         </div>
-        <div className="mt-5 h-[1px] bg-main-divider" />
-        <nav className="mt-5">{subMenu}</nav>
-      </div>
-    </header>
-  );
-});
+      </header>
+    );
+  },
+);

package/src/components/Header/HeaderContent.ts

@@ -1,4 +1,5 @@
-import type { SitemapProps } from '../../model/SitemapProps';
+import { BgColorVersion } from '../../model/BgColorVersion';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Шапка
@@ -10,4 +11,10 @@ export interface HeaderContent extends SitemapProps {
    * @default Москва
    */
   defaultLocation?: string;
+  /**
+   * @title Фон элемента
+   * @hidden
+   * @default white
+   */
+  bgColor?: BgColorVersion;
 }

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,20 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
-  className?: string;
+  bgColor?: BgColorVersion;
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent, UniBlockProps {}
 
+const COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-text hover:text-primary-main',
+  transparent: 'text-white',
+};
+const DOP_LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'text-secondary-light hover:text-secondary-hover',
+  transparent: 'text-white',
+};
+const DOP_LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
+  'bg-white': 'GridIcon',
+  transparent: 'GridIconWhite',
+};
+
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ context, className, defaultLocation = '' }) => {
+  ({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
-
     return (
       <div className={`flex items-center ${className || ''}`}>
         <TopItem
@@ -24,6 +38,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           text={city}
           ariaLabel="Местоположение"
           onClick={getCity}
+          bgColor={bgColor}
         />
         <TopItem
           className="mr-7"
@@ -31,24 +46,22 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           href="#"
           text="Офисы и банкоматы"
           ariaLabel="Список всех доступных офисов и банкоматов"
+          bgColor={bgColor}
         />
         <HeaderSecondaryMenuButton
-          className="mr-5 text-primary-text hover:text-primary-main"
+          className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Icon name="LoupeIcon" aria-hidden="true" className="h-full" asSVG />
+          <Icon name="LoupeIcon" className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
-        <HeaderSecondaryMenuButton
-          className="mr-5 text-primary-text hover:text-primary-main"
-          ariaLabel="Профиль"
-        >
-          <Icon name="ProfileIcon" aria-hidden="true" className="h-full" asSVG />
+        <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
+          <Icon name="ProfileIcon" className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className="min-w-[32px] min-h-[32px] fill-secondary-light hover:fill-secondary-hover"
+          className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Icon name="GridIcon" aria-hidden="true" className="h-full" asSVG />
+          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -6,12 +6,10 @@ interface HeaderSecondaryMenuButtonProps {
 }
 
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className, children, ariaLabel }) => (
+  ({ className = '', children, ariaLabel }) => (
     <button
       type="button"
-      className={`border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${
-        className || ''
-      }`}
+      className={`border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className}`}
       disabled={true}
       aria-label={ariaLabel}
     >

package/src/components/Headline/HeadlineContent.ts

@@ -1,18 +1,10 @@
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 
-/**
- * @title Цвет фона
- * @enumNames [
- *    "Прозрачный",
- *    "Белый"
- * ]
- */
-export type HeadlineBgColor = 'transparent' | 'bg-white';
-
 /**
  * @title Заголовок
  */
 export interface HeadlineContent
   extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align'> {
-  bgColor?: HeadlineBgColor;
+  bgColor?: BgColorVersion;
 }

package/src/components/MobileBlocks.ts

@@ -4,6 +4,7 @@ import { Gallery } from './Gallery/Gallery.mobile';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock.mobile';
@@ -24,4 +25,5 @@ export const MobileBlocks = {
   ProductTile,
   TextBlock,
   Tile,
+  Navigation,
 };

package/src/components/Navigation/Navigation.fixture.tsx

@@ -0,0 +1,28 @@
+import { context } from '../../setup-fixture';
+
+import { Navigation } from './Navigation';
+
+export default () => (
+  <Navigation
+    title="Потребительский кредит наличными"
+    buttons={[
+      {
+        href: '/credits',
+        text: 'Оформить',
+      },
+      {
+        href: '/tariffs',
+        text: 'Тарифы',
+      },
+      {
+        href: '/harvest',
+        text: 'Урожай',
+      },
+      {
+        href: '/faq',
+        text: 'Частые вопросы',
+      },
+    ]}
+    context={context}
+  />
+);

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import type { UniBlockProps } from '../../types';
+import { NavigationContent } from './NavigationContent';
+import { NavigationItem } from './NavigationItem';
+
+export interface NavigationProps extends NavigationContent, UniBlockProps {}
+
+export const Navigation = JSX<NavigationProps>(({ className, context, title, buttons }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  const activeButton = findActiveSubItem(router)(buttons);
+
+  return (
+    <section
+      className={`font-sans text-primary-text rounded-[40px] flex items-center justify-between ${
+        className || ''
+      }`}
+    >
+      <h2 className="font-medium text-xl m-0">{title}</h2>
+      {buttons?.length ? (
+        <div className="flex rounded-md overflow-hidden bg-white">
+          {buttons
+            .filter(({ text }) => text)
+            .map((button, i) => (
+              <NavigationItem
+                key={String(i)}
+                className="first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md"
+                isActive={button === activeButton}
+                {...useLink({ router, handlerDecorator }, button)}
+              />
+            ))}
+        </div>
+      ) : null}
+    </section>
+  );
+});

package/src/components/Navigation/NavigationContent.ts

@@ -0,0 +1,11 @@
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Навигация
+ */
+export interface NavigationContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список ссылок */
+  buttons?: ButtonProps[];
+}

package/src/components/Navigation/NavigationItem.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+export const NavigationItem = JSX<ButtonProps & { isActive: boolean }>(
+  ({ className, text, onClick, href, target, isActive }) => (
+    <a
+      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${
+        className || ''
+      } ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`}
+      onClick={onClick}
+      href={href}
+      target={target}
+    >
+      {text}
+    </a>
+  ),
+);

package/src/components/PictureText/PictureText.example.json

@@ -10,11 +10,11 @@
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "DocumentText"
+      "icon": "DocumentTextIcon"
     },
     {
       "label": "Преимущество №2",
-      "icon": "DiscountShape"
+      "icon": "DiscountShapeIcon"
     }
   ]
 }

package/src/components/PictureText/PictureText.fixture.tsx

@@ -20,12 +20,12 @@ export const PICTURE_TEXT: PictureTextContent = {
     {
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: 'DocumentText',
+      icon: 'DocumentTextIcon',
     },
     {
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: 'DiscountShape',
+      icon: 'DiscountShapeIcon',
     },
   ],
   image,

package/src/components/StepsBlock/StepsBlock.example.json

@@ -1,8 +1,10 @@
 {
   "title": "Шаги",
+  "showLines": true,
   "steps": [
     {
       "label": "Шаг №1",
+      "description": "Описание шага №1",
       "icon": "NewDocIcon"
     },
     {
@@ -10,7 +12,7 @@
       "icon": "PassSendIcon"
     },
     {
-      "label": "Шаг №3",
+      "description": "Шаг №3 без заголовка",
       "icon": "ActualBalanceIcon"
     }
   ]

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,28 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Title } from '../../ui-kit/Title/Title';
 import { joinList } from '../../utils/joinList';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
-export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) => {
+export const StepsBlock = JSX<StepsBlockProps>(({ className, title, showLines = true, steps }) => {
   return (
     <section
-      className={`font-sans text-primary-text bg-white px-12 py-12 flex flex-col items-center ${
+      className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${
         className || ''
       }`}
     >
       <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title>
       {steps?.length ? (
-        <div>
-          <div className="flex mt-9 items-center px-[88px]">
-            {joinList(<div className="h-0.5 w-full bg-secondary-light"></div>)(
-              steps.map((step, i) => renderStepIcon(step, i)),
-            )}
+        <div className={`box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`}>
+          <div className="flex items-center px-[88px]">
+            {joinList(
+              <div
+                className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
+              />,
+            )(steps.map((step, i) => renderStepIcon(step, i)))}
           </div>
-          <div className="flex mt-9 justify-between gap-x-24">{steps.map(renderStepTitle)}</div>
+          <div className="flex justify-between gap-x-[101px]">{steps.map(renderStepTitle)}</div>
         </div>
       ) : null}
     </section>
@@ -43,13 +45,16 @@ const renderStepIcon = (step: Step, i: number) => {
 
 const renderStepTitle = (step: Step, i: number) => {
   return (
-    <div key={String(i)} className="flex flex-col items-center text-center relative w-[276px]">
-      <div className="max-w-min">
-        <h5 className="font-medium text-xl m-0 mt-4 whitespace-nowrap px-3">{step.label}</h5>
-        {step.description && (
-          <div className="font-normal text-sm text-secondary-text mt-2">{step.description}</div>
-        )}
-      </div>
+    <div
+      key={String(i)}
+      className="flex flex-col items-center text-center relative w-[276px] whitespace-pre-line overflow-hidden"
+    >
+      {step.label && <div className="font-medium text-xl m-0 mt-4">{step.label}</div>}
+      {step.description && (
+        <div className={`font-normal text-sm text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`}>
+          {step.description}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -5,7 +5,7 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
  */
 export interface Step {
   /** @title Название */
-  label: string;
+  label?: string;
   /** @title Описание */
   description?: string;
   icon?: IconName;
@@ -17,9 +17,12 @@ export interface Step {
 export interface StepsBlockContent {
   /** @title Заголовок */
   title?: string;
+  /** @title Линии */
+  showLines?: boolean;
   /**
    * @title Шаги
-   * @maxItems 6
+   * @minItems 2
+   * @maxItems 3
    */
   steps?: Step[];
 }

package/src/hooks/useLink.ts

@@ -1,6 +1,7 @@
 import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageContext';
 import type { LinkProps } from '../model/LinkProps';
-import { adjustHref, isURL } from '../utils/url';
+import { adjustHref } from '../utils/adjustHref';
+import { isURL } from '../utils/url';
 
 const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
 

package/src/icons/Calendar2Icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 9.09h17" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 13.01V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5V17c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.995 13.7h.01M8.294 13.7h.01M8.294 16.7h.01" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 2v3M16 2v3" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/CalendarCircleIcon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.89 5.83v2M14.11 5.83v2M7.53 10.14h8.94M13.5 17.67h-3c-2.5 0-4-1.8-4-4v-3c0-2.2 1.5-4 4-4h3c2.5 0 4 1.8 4 4v3c0 2.2-1.5 4-4 4Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" 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="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/CalendarTickIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2v3M16 2v3M3.5 9.09h17M3 13.1V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5v7.86c-.73-.83-1.8-1.36-3-1.36-2.21 0-4 1.79-4 4 0 .75.21 1.46.58 2.06.21.36.48.68.79.94H8c-3.5 0-5-2-5-5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.995 13.7h.01M8.294 13.7h.01M8.294 16.7h.01" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 18 23c-1.01 0-1.93-.37-2.63-1-.31-.26-.58-.58-.79-.94A3.92 3.92 0 0 1 14 19c0-2.21 1.79-4 4-4 1.2 0 2.27.53 3 1.36A4 4 0 0 1 22 19Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m16.44 19 .99.99 2.13-1.97" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>