@redneckz/wildless-cms-uni-blocks 0.10.10 → 0.11.1

package/mobile/src/ui-kit/SearchBar/SearchBar.tsx

@@ -1,6 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SearchBarInner, SearchBarInnerProps } from './SearchBarInner';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { CloseButton } from '../Dialog/CloseButton';
+import { useDialog } from '../Dialog/useDialog';
+import { useDialogHandlers } from '../Dialog/useDialogHandlers';
+import { SEARCH_DIALOG_ID } from '../SearchDialog/SearchDialog';
+import { SearchInput } from '../SearchDialog/SearchInput';
 
-export const SearchBar = JSX<SearchBarInnerProps>((props) => (
-  <SearchBarInner {...props} isMobile={true} />
-));
+interface SearchBarProps {
+  className?: string;
+}
+
+const MIN_QUERY_LEN = 3;
+
+export const SearchBar = JSX<SearchBarProps>(({ className }) => {
+  const [value, setValue] = useState('');
+
+  const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
+  useDialogHandlers({ onClose: resetQueryOnDialogClose });
+
+  const { open } = useDialog(SEARCH_DIALOG_ID);
+
+  const handleInitialInputChange = useCallback((_: string) => {
+    setValue(_);
+    if (isQueryLongEnough(_)) {
+      open(_);
+    }
+  }, []);
+
+  return (
+    <div className={className}>
+      <SearchInput value={value} onChange={handleInitialInputChange} />
+      <CloseButton className="absolute top-2 right-3 sm:hidden" onClick={resetQueryOnDialogClose} />
+    </div>
+  );
+});
+
+const isQueryLongEnough = (_: string) => _ && _.length >= MIN_QUERY_LEN;

package/mobile/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -5,7 +5,6 @@ import { Img } from '../Img/Img';
 
 export interface SearchInputProps {
   className?: string;
-  isMobile?: boolean;
   value?: string;
   autoFocus?: boolean;
   onChange?: (value: string) => void;
@@ -13,7 +12,7 @@ export interface SearchInputProps {
 }
 
 export const SearchInput = JSX<SearchInputProps>(
-  ({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+  ({ className, value, autoFocus, onChange, onFocus }) => {
     const handleChange = useCallback(
       (ev: { target?: { value?: string } }) => {
         onChange && onChange(ev.target?.value || '');
@@ -30,7 +29,6 @@ export const SearchInput = JSX<SearchInputProps>(
           className={style(
             'h-12 pl-12 w-full text-l text-black outline-none box-border',
             'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
-            isMobile ? '' : 'h-full',
           )}
           value={value}
           type="text"

package/mobile/src/utils/isEmpty.ts

@@ -0,0 +1,6 @@
+export const isEmpty = <T>(v: T): v is NonNullable<T> =>
+  v === null ||
+  v === undefined ||
+  v === '' ||
+  (Array.isArray(v) && v.length === 0) ||
+  (typeof v === 'object' && Object.keys(v).length === 0);

package/mobile/src/utils/joinList.ts

@@ -1,7 +1,7 @@
-export function joinList<E>(sep: E): (list: E[]) => E[] {
-  return (list) =>
+export const joinList =
+  <E>(sep: E) =>
+  (list: E[]): E[] =>
     list.reduce(
-      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]),
+      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]),
       [] as E[],
     );
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.10",
+  "version": "0.11.1",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/BaseTile/BaseTile.tsx

@@ -1,16 +1,39 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BaseTileCommonProps } from './BaseTileProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
 
-export const BaseTile = JSX<BaseTileCommonProps>(
-  ({ className = '', title = '', buttons, image, children }) => (
-    <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
+interface BaseTileProps extends UniBlockProps {
+  title?: VNode;
+  insetTitle?: VNode;
+  leftImage?: VNode;
+  rightImage?: VNode;
+  backImage?: VNode;
+  buttons?: VNode;
+}
+
+export const BaseTile = JSX<BaseTileProps>(
+  ({
+    className,
+    title = '',
+    insetTitle = '',
+    buttons,
+    leftImage,
+    rightImage,
+    backImage,
+    children,
+  }) => (
+    <div className={style('relative flex flex-col font-sans', className)}>
+      {backImage ? <div className="absolute bottom-0 right-0 z-0">{backImage}</div> : null}
       {title}
-      <div className="flex grow w-full justify-between">
-        <div className="flex flex-col justify-between w-full">
-          <div className="h-full">{children}</div>
-          {buttons ? <div className="mt-auto pt-8">{buttons}</div> : null}
+      <div className="grow relative flex flex-wrap md:flex-nowrap justify-between items-stretch gap-8">
+        {leftImage}
+        <div className={style('flex flex-col gap-8', leftImage ? '' : 'grow')}>
+          {insetTitle}
+          <div className="grow">{children}</div>
+          {buttons}
         </div>
-        {image}
+        {rightImage ? <div className="-order-1 lg:order-1">{rightImage}</div> : null}
       </div>
     </div>
   ),

package/src/components/Blocks.mobile.ts

@@ -8,7 +8,6 @@ import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
-import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -28,7 +27,6 @@ export const Blocks: BlocksRegistry = {
   Headline,
   ImgBlock,
   LinkDocs,
-  LinkList,
   MobileAppTile,
   Placeholder,
   ProductBlock,

package/src/components/Blocks.ts

@@ -21,10 +21,10 @@ import { CarouselRichTextCard } from './CarouselRichTextCard/CarouselRichTextCar
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
+import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateOffice } from './ExchangeRateOffice/ExchangeRateOffice';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
-import { Filtration } from './Filtration/Filtration';
 import { Footer } from './Footer/Footer';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
@@ -35,6 +35,7 @@ import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBloc
 import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
 import { OfficeMap } from './OfficeMap/OfficeMap';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
@@ -44,6 +45,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
+import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo/RepresentativeOfficeInfo';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -55,7 +57,6 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
-import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo/RepresentativeOfficeInfo';
 
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
@@ -80,9 +81,9 @@ export const Blocks: BlocksRegistry = {
   CarouselTariffsCard,
   ComparisonTable,
   ContactsBlock,
+  DepositFiltration,
   ErrorBlock,
   ExchangeRateTile,
-  Filtration,
   Footer,
   GracePeriod,
   Header,
@@ -93,6 +94,7 @@ export const Blocks: BlocksRegistry = {
   InvestmentInfo,
   LinkDocs,
   MobileAppTile,
+  MortgageFiltration,
   OfficeMap,
   OfficeServicesBlock,
   ParagraphBlock,
@@ -102,6 +104,7 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
+  RepresentativeOfficeInfo,
   RichTextBlock,
   RollupItem,
   SafeDepositRental,
@@ -114,5 +117,4 @@ export const Blocks: BlocksRegistry = {
   VerticalLayout,
   Video,
   ExchangeRateOffice,
-  RepresentativeOfficeInfo,
 };

package/src/components/Calculator/checkCreditSourceBookRowCommonParams.ts

@@ -0,0 +1,47 @@
+import { CreditCalculatorParamsViewSettings } from './CalculatorContent';
+import { CommonCreditParams, CreditCalculatorUserInputParams } from './useCreditCalculatorParams';
+
+interface CheckSourceBookRowProps {
+  row: CommonCreditParams;
+  userInputParams: CreditCalculatorUserInputParams;
+  paramsViewSettings?: CreditCalculatorParamsViewSettings;
+}
+
+interface CheckSourceBookRowFieldProps extends CheckSourceBookRowProps {
+  fieldKey: string;
+  viewSettingFieldKey: string;
+}
+
+export const checkCreditSourceBookRowCommonParams = (props: CheckSourceBookRowProps) =>
+  checkRowParam({
+    ...props,
+    fieldKey: 'isSalaryClient',
+    viewSettingFieldKey: 'isShowSalaryClient',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isStateEmployee',
+    viewSettingFieldKey: 'isShowStateEmployee',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isPensionClient',
+    viewSettingFieldKey: 'isShowPensionClient',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isInsurance',
+    viewSettingFieldKey: 'isShowInsurance',
+  });
+
+const checkRowParam = ({
+  row,
+  userInputParams,
+  paramsViewSettings,
+  fieldKey,
+  viewSettingFieldKey,
+}: CheckSourceBookRowFieldProps) => {
+  const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+
+  return isExclude || userInputParams[fieldKey] === row[fieldKey];
+};

package/src/components/Calculator/getCreditCalculatorLimitParams.ts

@@ -0,0 +1,24 @@
+import { CreditCalculatorParamsViewSettings } from './CalculatorContent';
+import { checkCreditSourceBookRowCommonParams } from './checkCreditSourceBookRowCommonParams';
+import {
+  CreditCalculatorSourceBookLimitParams,
+  CreditCalculatorUserInputParams,
+} from './useCreditCalculatorParams';
+
+interface GetCreditCalculatorLimitParamsProps {
+  limitRows: CreditCalculatorSourceBookLimitParams[];
+  userInputParams: CreditCalculatorUserInputParams;
+  paramsViewSettings?: CreditCalculatorParamsViewSettings;
+}
+export const getCreditCalculatorLimitParams = ({
+  limitRows,
+  userInputParams,
+  paramsViewSettings,
+}: GetCreditCalculatorLimitParamsProps) =>
+  limitRows?.find((row) =>
+    checkCreditSourceBookRowCommonParams({
+      row,
+      userInputParams,
+      paramsViewSettings,
+    }),
+  );

package/src/components/Calculator/getCreditCalculatorRateParams.ts

@@ -0,0 +1,33 @@
+import { CreditCalculatorParamsViewSettings } from './CalculatorContent';
+import { checkCreditSourceBookRowCommonParams } from './checkCreditSourceBookRowCommonParams';
+import { DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
+import { checkRangeByKeys } from './rangeHelpers';
+import {
+  CreditCalculatorSourceBookRateParams,
+  CreditCalculatorUserInputParams,
+} from './useCreditCalculatorParams';
+
+interface GetCreditCalculatorRateParamsProps {
+  rateRows: CreditCalculatorSourceBookRateParams[];
+  userInputParams: CreditCalculatorUserInputParams;
+  paramsViewSettings?: CreditCalculatorParamsViewSettings;
+  moneyValue: number;
+  monthsValue: number;
+}
+export const getCreditCalculatorRateParams = ({
+  rateRows = [],
+  userInputParams,
+  paramsViewSettings,
+  moneyValue,
+  monthsValue,
+}: GetCreditCalculatorRateParamsProps) =>
+  rateRows?.find(
+    (row) =>
+      checkCreditSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+      }) &&
+      checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+      checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),
+  ) || DEFAULT_CREDIT_CALCULATOR_PARAMS;

package/src/components/Calculator/rangeHelpers.ts

@@ -1,6 +1,6 @@
-import { maxBy } from '../../utils/maxBy';
+import { max } from '../../utils/maxBy';
 import { mergeIntervals } from '../../utils/mergeIntervals';
-import { minBy } from '../../utils/minBy';
+import { min } from '../../utils/minBy';
 
 export const getLimitRangeByKeys = <
   MinKey extends string,
@@ -26,8 +26,8 @@ export const getRangeByKeys = <
   [minKey, maxKey]: [MinKey, MaxKey],
   rows: T[] = [],
 ) => ({
-  [minKey]: rows.length ? minBy()(rows.filter((row) => row[minKey]).map((row) => row[minKey])) : 0,
-  [maxKey]: rows.length ? maxBy()(rows.filter((row) => row[maxKey]).map((row) => row[maxKey])) : 0,
+  [minKey]: rows.length ? min(rows.filter((row) => row[minKey]).map((row) => row[minKey])) : 0,
+  [maxKey]: rows.length ? max(rows.filter((row) => row[maxKey]).map((row) => row[maxKey])) : 0,
 });
 
 export const getMergeRangesByKeys = <

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,8 +1,11 @@
 import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { clamp } from '../../utils/clamp';
 import type { CreditCalculatorParamsViewSettings } from './CalculatorContent';
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
+import { getCreditCalculatorLimitParams } from './getCreditCalculatorLimitParams';
+import { getCreditCalculatorRateParams } from './getCreditCalculatorRateParams';
 import { getMonthlyPayment } from './getMonthlyPayment';
-import { checkRangeByKeys, getLimitRangeByKeys } from './rangeHelpers';
+import { getLimitRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonCreditParams {
@@ -48,90 +51,52 @@ export const useCreditCalculatorParams = (
   sourceBookDir?: string,
   paramsViewSettings?: CreditCalculatorParamsViewSettings,
 ): CreditCalculatorParams => {
-  const { moneyValue, monthsValue } = userInputParams;
+  let { moneyValue, monthsValue } = userInputParams;
   const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
+  const rateRows = data?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
+  const limitRows = data?.limitRows || [];
+  const creditCalculatorSourceBookLimitParams = getCreditCalculatorLimitParams({
+    limitRows,
+    userInputParams,
+    paramsViewSettings,
+  });
 
-  const creditCalculatorSourceBookLimitParams = data?.limitRows?.find((row) =>
-    checkRowCommonParams({
-      row,
-      userInputParams,
-      paramsViewSettings,
-    }),
+  const { minSum, maxSum } = getLimitRangeByKeys(
+    ['minSum', 'maxSum'],
+    creditCalculatorSourceBookLimitParams,
+    rateRows,
+  );
+  const { minMonths, maxMonths } = getLimitRangeByKeys(
+    ['minMonths', 'maxMonths'],
+    creditCalculatorSourceBookLimitParams,
+    rateRows,
   );
 
-  const creditCalculatorSourceBookRateParams =
-    data?.rateRows?.find(
-      (row) =>
-        checkRowCommonParams({
-          row,
-          userInputParams,
-          paramsViewSettings,
-        }) &&
-        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
-        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),
-    ) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
+  moneyValue = clamp(moneyValue, minSum, maxSum);
+  monthsValue = clamp(monthsValue, minMonths, maxMonths);
 
-  const { rate } = creditCalculatorSourceBookRateParams;
+  const creditCalculatorRateParams = getCreditCalculatorRateParams({
+    rateRows,
+    userInputParams,
+    paramsViewSettings,
+    moneyValue,
+    monthsValue,
+  });
+  const { rate } = creditCalculatorRateParams;
   const monthlyPayment = getMonthlyPayment(rate, userInputParams);
-  const rateRows = data?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
 
   return useMemo(
     () => ({
-      ...creditCalculatorSourceBookRateParams,
-      ...getLimitRangeByKeys(['minSum', 'maxSum'], creditCalculatorSourceBookLimitParams, rateRows),
-      ...getLimitRangeByKeys(
-        ['minMonths', 'maxMonths'],
-        creditCalculatorSourceBookLimitParams,
-        rateRows,
-      ),
+      ...creditCalculatorRateParams,
       ...userInputParams,
+      minSum,
+      maxSum,
+      minMonths,
+      maxMonths,
+      moneyValue,
+      monthsValue,
       monthlyPayment,
     }),
     [userInputParams, data],
   );
 };
-
-interface CheckSourceBookRowProps {
-  row: CommonCreditParams;
-  userInputParams: CreditCalculatorUserInputParams;
-  paramsViewSettings?: CreditCalculatorParamsViewSettings;
-}
-
-interface CheckSourceBookRowFieldProps extends CheckSourceBookRowProps {
-  fieldKey: string;
-  viewSettingFieldKey: string;
-}
-
-const checkRowCommonParams = (props: CheckSourceBookRowProps) =>
-  checkRowParam({
-    ...props,
-    fieldKey: 'isSalaryClient',
-    viewSettingFieldKey: 'isShowSalaryClient',
-  }) &&
-  checkRowParam({
-    ...props,
-    fieldKey: 'isStateEmployee',
-    viewSettingFieldKey: 'isShowStateEmployee',
-  }) &&
-  checkRowParam({
-    ...props,
-    fieldKey: 'isPensionClient',
-    viewSettingFieldKey: 'isShowPensionClient',
-  }) &&
-  checkRowParam({
-    ...props,
-    fieldKey: 'isInsurance',
-    viewSettingFieldKey: 'isShowInsurance',
-  });
-
-const checkRowParam = ({
-  row,
-  userInputParams,
-  paramsViewSettings,
-  fieldKey,
-  viewSettingFieldKey,
-}: CheckSourceBookRowFieldProps) => {
-  const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
-
-  return isExclude || userInputParams[fieldKey] === row[fieldKey];
-};

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -4,6 +4,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
@@ -30,48 +31,46 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     image,
     title,
     ...rest
-  }) => {
-    const tileTitle = title ? (
-      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
-    ) : null;
-
-    const tileImage = image?.src ? (
-      <Img className="absolute bottom-0 right-0 m-0" image={image} />
-    ) : null;
-
-    return (
-      <BlockWrapper
-        className={[
-          'relative box-border text-left p-9 w-[697px]',
-          'border border-solid border-gray group-data-secondary:border-white/50',
-          className,
-        ].join(' ')}
-        {...rest}
+  }) => (
+    <BlockWrapper
+      className={style(
+        'box-border text-left p-9 w-[697px]',
+        'border border-solid border-gray group-data-secondary:border-white/50',
+        className,
+      )}
+      {...rest}
+    >
+      <BaseTile
+        title={
+          title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
+        }
+        backImage={image?.src ? <Img className="m-0" image={image} /> : null}
       >
-        <BaseTile title={tileTitle} image={tileImage}>
-          <div className="flex justify-between mb-4">
-            {description ? (
-              <div className="w-1/3">
-                <Text size="text-h6">{description}</Text>
-              </div>
-            ) : null}
-            {additionalDescription ? (
-              <Text size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
-                {additionalDescription}
-              </Text>
-            ) : null}
-          </div>
-          {cardsList.length ? (
-            <ul
-              className={`list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`}
-            >
-              {renderCardList(cardsList, columnsMode)}
-            </ul>
+        <div className="flex justify-between mb-4">
+          {description ? (
+            <div className="w-1/3">
+              <Text size="text-h6">{description}</Text>
+            </div>
           ) : null}
-        </BaseTile>
-      </BlockWrapper>
-    );
-  },
+          {additionalDescription ? (
+            <Text size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
+              {additionalDescription}
+            </Text>
+          ) : null}
+        </div>
+        {cardsList.length ? (
+          <ul
+            className={style(
+              'list-none m-0 p-0 flex gap-y-2',
+              cardColumnsModeStyleMap[columnsMode],
+            )}
+          >
+            {renderCardList(cardsList, columnsMode)}
+          </ul>
+        ) : null}
+      </BaseTile>
+    </BlockWrapper>
+  ),
 );
 
 const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -99,8 +99,10 @@ const renderAdditionalDescription = (additionalDescription?: string) =>
 const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
   items?.length ? (
     <List
-      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
-      itemClassName="text-left"
+      className={style(
+        'max-w-[308px] mt-2 text-s',
+        version === 'primary' ? '!text-secondary-text' : '',
+      )}
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
     />

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -47,9 +47,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             align={align}
           />
           <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
-            {items.length ? (
-              <List className="flex flex-col gap-2" itemClassName="text-l-light" items={items} />
-            ) : null}
+            {items.length ? <List items={items} listItemSize="S" /> : null}
             {socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
           </div>
           {renderIconBlock(icon)}