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

package/src/components/GracePeriod/GracePeriod.tsx

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

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

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

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

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

package/src/components/NavigatorTabs/NavigatorTabs.tsx

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

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -4,7 +4,7 @@ import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListP
 /**
  * @title Элемент списка
  */
-export interface blockItemCommonProps {
+export interface BlockItemCommonProps {
   /**
    * @title Название
    * @default Список
@@ -29,6 +29,6 @@ export interface OtherProductsContent {
    * @title Список
    * @maxItems 10
    */
-  blockItems?: blockItemCommonProps[];
+  blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;
 }

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useActiveHandler } from './useActiveHandler';
 import type { UniBlockProps } from '../../types';
-import type { blockItemCommonProps } from './OtherProductsContent';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import type { BlockItemCommonProps } from './OtherProductsContent';
 import { OtherProductsItemInner } from './OtherProductsItemInner';
+import { useActiveHandler } from './useActiveHandler';
 
-export interface BlockItemProps extends blockItemCommonProps, UniBlockProps {}
+export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {}
 
 export const OtherProductsItem = JSX<BlockItemProps>(
   ({ label, isExpanded, blocks, columns, context }) => {

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

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

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

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

package/src/components/ProductBlock/ProductBlockContent.ts

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

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

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

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -19,6 +19,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     headingType = 'h2',
     description,
     benefits,
+    benefitsVersion = 'normal',
     buttons,
     image,
     items,
@@ -43,7 +44,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             )}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">
-                {benefits.map((_, i) => renderBenefit(_, i, version))}
+                {benefits.map((benefit, i) =>
+                  renderBenefit({ benefit, version, benefitsVersion }, i),
+                )}
               </div>
             ) : null}
             {items?.length ? (

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

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { BenefitItemProps } from './ProductBlockContent';
 
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
   primary: 'text-primary-text',
@@ -11,13 +11,14 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white',
 };
 
-export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion) {
+export function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps, i: number) {
+  const isIconWhite = version === 'secondary';
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon ? (
         <Img
-          className="w-6 h-6 rounded-full box-border"
-          image={benefit.icon}
+          className={renderBenefitIconBgStyle(version)}
+          image={{ ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
           width="24"
           height="24"
           asSVG
@@ -34,3 +35,13 @@ export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion
     </div>
   );
 }
+
+function renderBenefitIconBgStyle(version) {
+  let bgColorStyle = 'text-primary-main';
+
+  if (version === 'secondary') {
+    bgColorStyle = 'text-black';
+  }
+
+  return `w-6 h-6 rounded-full box-border ${bgColorStyle}`;
+}

package/src/components/ProductBlock/renderBenefit.tsx

@@ -1,11 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { BenefitItemProps } from './ProductBlockContent';
 
-const benefitIconBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white/30',
-};
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
   primary: 'text-primary-text',
   secondary: 'text-white',
@@ -15,13 +11,17 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white',
 };
 
-export function renderBenefit(benefit: Benefit, i: number, version: string) {
+export function renderBenefit(
+  { benefit, version = 'primary', benefitsVersion = 'normal' }: BenefitItemProps,
+  i: number,
+) {
+  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   return (
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon ? (
         <Img
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-primary-text ${benefitIconBgStyleMap[version]}`}
-          image={benefit.icon}
+          className={renderBenefitIconBgStyle(version, benefitsVersion)}
+          image={{ ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
           width="24"
           height="24"
           asSVG
@@ -38,3 +38,15 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
     </div>
   );
 }
+
+function renderBenefitIconBgStyle(version, benefitsVersion) {
+  let bgColorStyle = 'bg-primary-main text-black';
+
+  if (version === 'secondary') {
+    bgColorStyle = 'bg-white/30 text-black';
+  } else if (benefitsVersion === 'normal') {
+    bgColorStyle = 'bg-secondary-light text-primary-main';
+  }
+
+  return `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+}

package/src/components/Recommendation/Recommendation.example.json

@@ -12,9 +12,9 @@
       "title": "Заголовок 1",
       "description": "Описание 1",
       "socialMedia": [
-        { "href":  "https://t.me" },
-        { "href":  "https://vk.com" },
-        { "href":  "https://ok.ru" }
+        { "href": "https://t.me" },
+        { "href": "https://vk.com" },
+        { "href": "https://ok.ru" }
       ]
     },
     {
@@ -28,9 +28,9 @@
       "title": "Заголовок 2",
       "description": "Описание 2",
       "socialMedia": [
-        { "href":  "https://t.me" },
-        { "href":  "https://vk.com" },
-        { "href":  "https://ok.ru" }
+        { "href": "https://t.me" },
+        { "href": "https://vk.com" },
+        { "href": "https://ok.ru" }
       ]
     },
     {
@@ -44,10 +44,11 @@
       "title": "Заголовок 3",
       "description": "Описание 3",
       "socialMedia": [
-        { "href":  "https://t.me" },
-        { "href":  "https://vk.com" },
-        { "href":  "https://ok.ru" }
+        { "href": "https://t.me" },
+        { "href": "https://vk.com" },
+        { "href": "https://ok.ru" }
       ]
     }
-  ]
+  ],
+  "version": "primary"
 }

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -1,5 +1,5 @@
-import type { Picture } from '../../model/Picture';
 import type { LinkProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { Recommendation, RecommendationProps } from './Recommendation';
 
@@ -68,11 +68,11 @@ export default {
   default: (
     <div>
       <div className="container grid grid-cols-12" data-theme="pc">
-        <Recommendation className="col-span-12 mb-1" version="secondary" {...defaultProps} />
+        <Recommendation className="col-span-12 mb-1" {...defaultProps} version="secondary" />
       </div>
 
       <div className="container grid grid-cols-12" data-theme="bc">
-        <Recommendation className="col-span-12 mb-1" version="secondary" {...defaultProps} />
+        <Recommendation className="col-span-12 mb-1" {...defaultProps} version="secondary" />
       </div>
 
       <div className="container grid grid-cols-12 mb-1">

package/src/components/Recommendation/RecommendationCard.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,13 +9,15 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
 import type { RecommendationCardTypes } from './RecommendationContent';
 
-export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
+export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {
+  version?: BlockVersion;
+}
 
 export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
     return (
       <section
-        className={`border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`}
+        className={`border border-solid box-border p-[30px] w-[524px] ${className}`}
         role="listitem"
       >
         <BaseTile
@@ -30,7 +33,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           {description ? <Description className="text-left" description={description} /> : null}
           {items?.length ? (
             <List
-              className="text-md font-light flex flex-col gap-2"
+              className="text-md text-left font-light flex flex-col flex-1 gap-2"
               items={items}
               version={version}
             />

package/src/components/Recommendation/RecommendationContent.ts

@@ -5,11 +5,18 @@ import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
-export type RecommendationCardTypes = HeadingContent &
-  DescriptionContent &
-  ListContent &
-  ImageContent &
-  RecommendationContent;
+export interface RecommendationCardTypes
+  extends HeadingContent,
+    DescriptionContent,
+    ListContent,
+    ImageContent {
+  /**
+   * @title Соц сети
+   * @minItems 3
+   */
+  socialMedia?: LinkProps[];
+}
+
 /**
  * @title Рекомендации
  */
@@ -17,9 +24,4 @@ export interface RecommendationContent extends HeadingContent {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;
-  /**
-   * @title Ссылка
-   * @minItems 3
-   */
-  socialMedia?: LinkProps[];
 }

package/src/icons/AppleIcon.svg

@@ -1 +1,3 @@
-<svg title="Лого «Apple»" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="currentColor"/></svg>
+<svg title="Лого «Apple»" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24">
+  <path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="currentColor"/>
+</svg>

package/src/icons/BurgerIcon.svg

@@ -1,6 +1,6 @@
 <svg title="Бургер" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-<path d="M9.49023 12H21.0002" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-<path d="M3 12H5.99" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-<path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 6H21" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+  <path d="M9.49023 12H21.0002" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 12H5.99" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 18H21" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
 </svg>

package/src/icons/Calendar2Icon.svg

@@ -1 +1,6 @@
-<svg title="Календарь 2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 9.09h17" stroke="currentColor" 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="currentColor" 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 2v3M16 2v3" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Календарь 2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.5 9.09h17" stroke="currentColor" 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="#000000" 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 2v3M16 2v3" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/CalendarCircleIcon.svg

@@ -1,4 +1 @@
-<svg title="Скруглённый календарь" fill="none" viewBox="0 0 24 24" 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="currentColor" 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Скруглённый календарь" fill="none" viewBox="0 0 24 24" 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="currentColor" 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="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/CalendarIcon.svg

@@ -1,6 +1,6 @@
 <svg title="Календарь" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
   <path
-    stroke="currentColor"
+    stroke="#000000"
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-miterlimit="10"

package/src/icons/CalendarTickIcon.svg

@@ -1,6 +1 @@
-<svg title="Календарь с галочкой" viewBox="0 0 24 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="currentColor" 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="currentColor" 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="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m16.44 19 .99.99 2.13-1.97" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Календарь с галочкой" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="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="#000000" 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="#000000" 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="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m16.44 19 .99.99 2.13-1.97" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/CalendarWhiteIcon.svg

@@ -1,6 +1,6 @@
 <svg title="Календарь белый" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
-    stroke="currentColor"
+    stroke="#fff"
     stroke-width="2"
     stroke-miterlimit="10"
     stroke-linecap="round"
@@ -8,7 +8,7 @@
     d="M8 2v3M16 2v3M3.5 9.09h17M3 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"
   />
   <path
-    stroke="currentColor"
+    stroke="#fff"
     stroke-width="3"
     stroke-linecap="round"
     stroke-linejoin="round"

package/src/icons/CardIcon.svg

@@ -1,5 +1 @@
-<svg title="Кред. карта" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 8.5h20" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M6 16.5h2M10.5 16.5h4" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M22 14.99v1.12c0 3.51-.89 4.39-4.44 4.39H6.44C2.89 20.5 2 19.62 2 16.11V7.89c0-3.51.89-4.39 4.44-4.39h11.11c3.56 0 4.45.88 4.45 4.39v3.09" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg title="Кред. карта" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.5h20" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 16.5h2M10.5 16.5h4" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 14.99v1.12c0 3.51-.89 4.39-4.44 4.39H6.44C2.89 20.5 2 19.62 2 16.11V7.89c0-3.51.89-4.39 4.44-4.39h11.11c3.56 0 4.45.88 4.45 4.39v3.09" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>