@redneckz/wildless-cms-uni-blocks 0.13.2 → 0.13.4

package/src/components/ButtonsBlock/ButtonsBlock.fixture.tsx

@@ -19,7 +19,7 @@ const buttons: ButtonContent[] = [
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 p-4">
+    <div className="container grid grid-cols-12">
       <ButtonsBlock className="col-span-12" buttons={buttons} />
     </div>
   ),

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -25,8 +25,8 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
       useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма покупок в категории путешествия, ₽',
             min: minSumTravel,
@@ -37,7 +37,6 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
           })}
           {renderWantedSumInput({
             title: 'Сумма покупок в остальных категориях, ₽',
-            className: 'mt-7',
             min: minSumOther,
             max: maxSumOther,
             step: 500,
@@ -45,19 +44,17 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
             ...field('restExpenseValue'),
           })}
         </div>
-        <div>
-          {monthBonus >= 0 ? (
-            <Rate
-              title="Баллов за месяц"
-              rate={monthBonus}
-              rateBlockClassName="tracking-[-14px]"
-              fractionDigits={0}
-            />
-          ) : null}
-        </div>
-        <div className="w-96">
+        {monthBonus >= 0 ? (
+          <Rate
+            title="Баллов за месяц"
+            rate={monthBonus}
+            rateBlockClassName="tracking-[-14px]"
+            fractionDigits={0}
+          />
+        ) : null}
+        <div className="flex flex-col gap-2xl sm:w-96">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
-          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -15,6 +15,7 @@ import { renderInterestPayment } from './renderInterestPayment';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { renderRate } from './renderRate';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { style } from '../../utils/style';
 
 export interface BusinessDepositCalculatorProp extends BusinessDepositCalculatorProps {
   className?: string;
@@ -35,47 +36,43 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     const { income, finalSum, rate, isShowUnknownRate, depositeName } = calculatorParams;
 
     return (
-      <section className={className}>
-        <div className="flex flex-col justify-between sm:flex-row">
-          <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
-            {renderWantedSumInput({
-              title: 'Сумма, ₽',
-              min: calculatorParams.minSum,
-              max: calculatorParams.maxSum,
-              ...field('moneyValue'),
-              value: calculatorParams.moneyValue,
-            })}
-            {renderDaysInput({
-              title: 'Срок, дней',
-              min: calculatorParams.minDays,
-              max: calculatorParams.maxDays,
-              ...field('daysValue'),
-              value: calculatorParams.daysValue,
-            })}
-            <div className="flex flex-col gap-xl justify-between sm:flex-row sm:gap-0">
-              {renderBusinessDepositParamsForm(calculatorParams, field)}
-              {renderInterestPayment({
-                title: 'Выплата процентов',
-                orientation: 'vertical',
-                ...field('isMonthlyInterestPayment'),
-                radioGroupClassName: 'sm:flex-col',
-              })}
-            </div>
-          </div>
-          <div className="border-b border-main-divider my-xl sm:hidden"></div>
-          {renderRate({
-            rate,
-            depositeName,
-            isShowDepositeName,
-            isShowUnknownRate,
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+          {renderWantedSumInput({
+            title: 'Сумма, ₽',
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
           })}
-          <div className="flex flex-col gap-y-xl mt-3xl sm:gap-0 sm:w-96 sm:mt-0">
-            {renderDepositResults(finalSum, income)}
-            {renderButtonsSection(buttons, { isVertical: true })}
-            <div className="sm:mt-2xl">{renderFootnote(footnote)}</div>
-          </div>
+          {renderDaysInput({
+            title: 'Срок, дней',
+            min: calculatorParams.minDays,
+            max: calculatorParams.maxDays,
+            ...field('daysValue'),
+            value: calculatorParams.daysValue,
+          })}
+          {renderBusinessDepositParamsForm(calculatorParams, field)}
+          {renderInterestPayment({
+            title: 'Выплата процентов',
+            orientation: 'vertical',
+            ...field('isMonthlyInterestPayment'),
+            radioGroupClassName: 'sm:flex-col',
+          })}
+        </div>
+        <div className="border-b border-main-divider md:hidden"></div>
+        {renderRate({
+          rate,
+          depositeName,
+          isShowDepositeName,
+          isShowUnknownRate,
+        })}
+        <div className="flex flex-col gap-2xl sm:w-96">
+          {renderDepositResults(finalSum, income)}
+          {renderButtonsSection(buttons, { isVertical: true })}
+          {renderFootnote(footnote)}
+          {renderFootnote(bottomFootnote)}
         </div>
-        <div className="mt-lg">{renderFootnote(bottomFootnote)}</div>
       </section>
     );
   },

package/src/components/Calculator/Calculator.tsx

@@ -53,7 +53,7 @@ export const Calculator = JSX<CalculatorProps>(
           {renderArrows({
             ...controls,
             btnClass: ['left-3', 'right-3'],
-            className: 'top-8',
+            className: 'top-10',
           })}
         </div>
         <div
@@ -70,8 +70,8 @@ export const Calculator = JSX<CalculatorProps>(
 
 function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
-    ? 'h-20 w-96 p-xl border-none bg-primary-main text-white'
-    : `h-20 w-96 px-lg ease-in duration-300 bg-white text-primary-text`;
+    ? 'w-96 p-m border-none bg-primary-main text-white'
+    : `w-96 p-s ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActive ? 'text-xl mb-xs' : `text-l mb-2xs`;
   const btnDescClassName = isActive
     ? 'text-l font-light text-white'
@@ -87,7 +87,7 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
       onClick={onClick}
       aria-label={tab?.title}
       className={style(
-        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-20 space-x-m',
+        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex space-x-m min-h-20',
         btnClassName,
       )}
     >

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 
-const calculatorValueBlockStyle = 'flex justify-between md:mb-7 md:flex-col';
+const calculatorValueBlockStyle = 'flex justify-between md:flex-col';
 
 export interface CalculatorValueBlockProps {
   title?: string;

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -47,8 +47,8 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     });
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма кредита, ₽',
             step: 500,
@@ -65,20 +65,20 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             value: calculatorParams.monthsValue,
           })}
           {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          <div className="mt-s sm:hidden">{paymentTypeElement}</div>
+          <div className="sm:hidden">{paymentTypeElement}</div>
         </div>
-        <div className="border-b border-main-divider mt-xl mb-3xl sm:hidden"></div>
+        <div className="border-b border-main-divider md:hidden"></div>
         {renderRate({
           rate: calculatorParams.rate,
         })}
-        <div className="mt-6xl flex flex-col gap-lg sm:w-96 sm:mt-0 sm:gap-0">
+        <div className="flex flex-col gap-2xl sm:w-96">
           <CalculatorValueBlock
             title="Ежемесячный платеж"
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
           <div className="hidden sm:block">{paymentTypeElement}</div>
-          {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>
@@ -90,7 +90,7 @@ const renderCreditParamsForm = (
   params: CreditCalculatorParams & CreditCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div className="gap-xl flex flex-col sm:gap-s">
+  <div className="flex flex-col gap-y-2xl">
     {params.isShowSalaryClient ? (
       <Checkbox
         text={`Получаю зарплату на счёт\nв Россельхозбанке`}

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -44,8 +44,8 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     }, [defaultMonth]);
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
-        <div className="flex flex-col gap-lg sm:w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,
@@ -61,15 +61,13 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="flex flex-col gap-y-2xl">
-            {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          </div>
+          {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
         </div>
-        <div className="border-b border-main-divider mt-lg mb-2xl md:hidden"></div>
+        <div className="border-b border-main-divider md:hidden"></div>
         {renderRate({
           rate,
         })}
-        <div className="mt-2xl flex flex-col gap-y-2xl sm:w-96 sm:gap-y-0 sm:mt-0">
+        <div className="flex flex-col gap-2xl sm:w-96">
           <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           {renderButtonsSection(buttons, { isVertical: true })}

package/src/components/Calculator/Rate.tsx

@@ -28,7 +28,7 @@ export const Rate = JSX<RateProps>(
       </Text>
       <div className="relative">
         <div className="flex justify-start gradient-color-text">
-          <span className={style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName)}>
+          <span className={style('font-mohave text-title-huge pr-xl -mt-m', rateBlockClassName)}>
             {String(rate.toFixed(fractionDigits)).replace('.', ',')}
           </span>
           {unit ? <span className="text-7xl">{unit}</span> : null}

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -48,8 +48,8 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
     );
 
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Остаток долга в других банках, ₽ ',
             step: 500,
@@ -73,11 +73,8 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             max: calculatorParams.maxMonths,
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
-            className: 'mt-2xl',
           })}
-          <div className={style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : '')}>
-            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          </div>
+          {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           {calculatorParams.isExtraMoney
             ? renderWantedSumInput({
                 title: 'Дополнительная сумма, ₽ ',
@@ -96,7 +93,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
           rateBlockClassName="tracking-[-25px]"
           unit="%"
         />
-        <div className="w-96">
+        <div className="flex flex-col gap-2xl sm:w-96">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
@@ -110,7 +107,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             />
           ) : null}
           {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
-          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>
@@ -122,7 +119,7 @@ const renderCreditParamsForm = (
   params: RefinancingCalculatorParams & RefinancingCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div>
+  <div className="space-y-s">
     {params.isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"
@@ -132,7 +129,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowInsurance ? (
       <Checkbox
-        className="mt-3"
         text="Комплексная страховая защита"
         {...field('isInsurance')}
         value={params.isInsurance}
@@ -140,7 +136,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowExtraMoney ? (
       <Checkbox
-        className="mt-3"
         text="Получить дополнительную сумму"
         {...field('isExtraMoney')}
         value={params.isExtraMoney}

package/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -20,9 +20,9 @@ export const renderBinaryRadioButtonGroup = ({
   radioGroupClassName,
   onChange,
 }: BinaryRadioButtonGroupProps) => (
-  <div>
+  <div className="space-y-s">
     {title ? (
-      <div className="mb-3">
+      <div>
         <Text color="text-secondary-text" font="font-light">
           {title}
         </Text>

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -15,8 +15,8 @@ export const renderCalculatorBlock = (block: CalculatorBlockDef, i: number) => {
       className="box-border relative bg-white flex shrink-0 self-start basis-full"
       role="listitem"
     >
-      <div className="box-border p-9 w-full">
-        {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
+      <div className="box-border p-4xl w-full space-y-xl">
+        {block?.title ? <Heading className="text-center" title={block.title} /> : null}
         <EmbeddedBlock {...block} />
       </div>
     </section>

package/src/components/Calculator/renderInitialFeeInput.tsx

@@ -21,7 +21,6 @@ export function renderInitialFeeInput(
 
   return (
     <InputRange
-      className="mt-7"
       title={title}
       items={[
         `От ${toLocalNumberFormat(0)(minSum)} рублей`,

package/src/components/CardTransfer/CardTransfer.example.json

@@ -8,6 +8,7 @@
       "text": "Далее",
       "target": "_blank",
       "version": "primary"
-    }
+    },
+    "formType": "private"
   }
 }

package/src/components/CardTransfer/CardTransfer.tsx

@@ -14,10 +14,14 @@ const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
 
-const FORM_URL = 'https://www.rshb.ru/p2p/';
-const AMOUNT_KEY = 'amount';
+const FORM_URL_MAP = {
+  private: 'https://old.rshb.ru/p2p/',
+  business: 'https://old.rshb.ru/smallbusiness/p2p/',
+};
+
 const INITIAL_FORM_STATE = {
-  [AMOUNT_KEY]: 1500,
+  amount: 1500,
+  _amount: 1500,
 };
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
@@ -29,9 +33,10 @@ export const CardTransfer = JSX<CardTransferProps>(
     label = DEFAULT_LABEL,
     placeholder = DEFAULT_PLACEHOLDER,
     button,
+    formType = 'private',
     ...rest
   }) => {
-    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+    const [{ amount, _amount }, { field }] = useForm(INITIAL_FORM_STATE);
 
     const isDisabled = amount <= 0;
 
@@ -49,23 +54,24 @@ export const CardTransfer = JSX<CardTransferProps>(
       >
         {title ? (
           <Heading
-            className="pb-5 xl:pb-9 self-start xl:self-center"
+            className="pb-lg xl:pb-4xl self-start xl:self-center"
             headingType="h2"
             title={title}
           />
         ) : null}
-        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL}>
+        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
           <CurrencyInput
-            name={AMOUNT_KEY}
+            name="_amount"
             valid={!isDisabled}
             placeholder={placeholder}
             label={label}
-            {...field(AMOUNT_KEY, { parse: Number, format: String })}
+            {...field('_amount', { parse: Number, format: String })}
           />
+          <input type="hidden" name="amount" value={_amount} />
           {button?.text ? (
             <button
               type="submit"
-              className={style('w-full p-4 mt-5 xl:mt-6', buttonStyle)}
+              className={style('w-full p-m mt-lg', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

package/src/components/CardTransfer/CardTransferContent.ts

@@ -11,4 +11,9 @@ export type CardTransferContent = UniBlockContent &
     /** @title Плейсхолдер */
     placeholder?: string;
     button?: ButtonContent;
+    /**
+     * @title Тип формы
+     * @enumNames ['Частные клиенты', 'Бизнес-клиенты']
+     */
+    formType?: 'private' | 'business';
   };

package/src/components/Carousel/Carousel.tsx

@@ -1,18 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderBlock } from '../../BlockRenderer/renderBlock';
-import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
+import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
-import type { CarouselContent } from './CarouselContent';
-import type { BlockDef } from '../../model/ContentPageDef';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { renderCarouselCards } from './renderCarouselCards';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -58,20 +55,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderChildren({
-              ...rest,
-              renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) =>
-                renderBlock(block, options, {
-                  className: style(
-                    'h-full min-w-80 sm:min-w-96',
-                    noCardBorder
-                      ? ''
-                      : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
-                  ),
-                  blockIndex,
-                  isActive: activeIndex === blockIndex,
-                }),
-            })}
+            {renderCarouselCards({ noCardBorder, activeIndex, ...rest })}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}
@@ -109,3 +93,10 @@ Carousel.childrenTypes = [
   'CarouselInvestmentCard',
   'CarouselEventCard',
 ];
+
+Carousel.childSchema = () => ({
+  isHighlighting: {
+    title: 'Выделить карточку',
+    type: 'boolean',
+  },
+});

package/src/components/Carousel/renderCardHighlight.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { style } from '../../utils/style';
+
+interface CardHighlightProps {
+  className?: string;
+  text?: string;
+}
+
+export const renderCardHighlight = ({ className, text = 'ХИТ' }: CardHighlightProps = {}) => (
+  <div
+    className={style(
+      'w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+      className,
+    )}
+  >
+    <Icon iconVersion="black" name="HeartIcon" width="24" height="24" />
+    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
+      {text}
+    </Paragraph>
+  </div>
+);

package/src/components/Carousel/renderCarouselCards.tsx

@@ -0,0 +1,58 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import type { BlockDef } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
+import { renderCardHighlight } from './renderCardHighlight';
+
+const cardBaseStyle = 'relative h-full';
+
+export const renderCarouselCards = ({
+  noCardBorder,
+  activeIndex,
+  ...rest
+}: UniBlockProps & { noCardBorder?: boolean; activeIndex?: number }) => {
+  const { blocks: childBlocks } = rest.block || {};
+  const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+
+  return renderChildren({
+    ...rest,
+    renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) => (
+      <div className={cardWrapperStyle(block, { someCardsHighlighted })}>
+        {renderBlock(block, options, {
+          className: cardStyle(block, { someCardsHighlighted, showBorder: !noCardBorder }),
+          blockIndex,
+          isActive: blockIndex === activeIndex,
+        })}
+        {isCardHighlighted(block)
+          ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
+          : null}
+      </div>
+    ),
+  });
+};
+
+const cardWrapperStyle = (
+  _: BlockDef | undefined,
+  { someCardsHighlighted }: { someCardsHighlighted?: boolean },
+) =>
+  style(
+    cardBaseStyle,
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'),
+  );
+
+const cardStyle = (
+  _: BlockDef | undefined,
+  { someCardsHighlighted, showBorder }: { someCardsHighlighted?: boolean; showBorder?: boolean },
+) =>
+  style(
+    cardBaseStyle,
+    'min-w-80 sm:min-w-96',
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
+    showBorder &&
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+  );
+
+const isCardHighlighted = (_: BlockDef | undefined) =>
+  _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;

package/src/components/Carousel/visibleItemCountStyle.mobile.tsx

@@ -0,0 +1 @@
+export const visibleItemCountStyle = 'auto';

package/src/components/Carousel/visibleItemCountStyle.tsx

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

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.mobile.tsx

@@ -15,7 +15,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
         description={description}
         align="text-left"
         className="text-primary-text"
-        isPadding={false}
+        isEmbedded={true}
       />
     </BlockWrapper>
   ),

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -32,7 +32,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
             className="h-96 text-white shadow-dark-blue"
           />
         ) : (
-          <div className="h-[300px] flex justify-center items-center font-mohave text-title-large tracking-[-0.03em]">
+          <div className="h-[300px] flex justify-center items-center font-mohave text-title-large">
             <span className={getTextColor(blockIndex)}>{title}</span>
           </div>
         )}