@redneckz/wildless-cms-uni-blocks 0.6.45 → 0.6.47

package/src/common.css

@@ -152,30 +152,47 @@ html {
 }
 
 @layer components {
-  .md-container .h1 {
+  [data-theme='eo'] .md-container ul {
+    @apply list-none;
+  }
+
+  [data-theme='eo'] .md-container ul > li::before {
+    @apply text-primary-main mr-3 font-bold;
+    content: '🗸';
+  }
+
+  .md-container {
+    @apply text-l font-sans;
+  }
+
+  .md-container p.h1 {
     @apply text-h1;
   }
 
-  .md-container .h2 {
+  .md-container p.h2 {
     @apply text-h2;
   }
 
-  .md-container .h3 {
+  .md-container p.h3 {
     @apply text-h3;
   }
 
-  .md-container .h4 {
+  .md-container p.h4 {
     @apply text-h4;
   }
 
-  .md-container .h5 {
+  .md-container p.h5 {
     @apply text-h5;
   }
 
-  .md-container .h6 {
+  .md-container p.h6 {
     @apply text-h6;
   }
 
+  .md-container p {
+    @apply text-l font-light;
+  }
+
   .md-container ul {
     @apply list-inside list-disc;
   }
@@ -184,10 +201,6 @@ html {
     @apply list-inside list-decimal;
   }
 
-  .md-container p {
-    @apply text-l font-light;
-  }
-
   .md-container li {
     @apply text-l font-light;
   }
@@ -199,6 +212,10 @@ html {
   .md-container a {
     @apply text-primary-main;
   }
+
+  .md-container strong {
+    @apply font-bold;
+  }
 }
 
 /*

package/src/components/AccordionItem/AccordionItem.tsx

@@ -47,6 +47,12 @@ const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
     <Text size="text-xl" font="font-medium">
       {label}
     </Text>
-    <Img image={icon} className="text-primary-main flex-shrink-0" width="24" height="24" asSVG />
+    <Img
+      image={{ icon }}
+      className="text-primary-main flex-shrink-0"
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 ));

package/src/components/Blocks.ts

@@ -15,6 +15,7 @@ import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestm
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -26,6 +27,7 @@ import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { HorizontalLayout } from './HorizontalLayout/HorizontalLayout';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
 import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
@@ -43,8 +45,8 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { Recommendation } from './Recommendation/Recommendation';
+import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
@@ -59,12 +61,12 @@ export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
   BenefitsBlock,
-  BusinessBlock,
-  ButtonBlock,
   Bonus,
   BonusBenefitsBlock,
-  CardTransfer,
+  BusinessBlock,
+  ButtonBlock,
   Calculator,
+  CardTransfer,
   Carousel,
   CarouselCard,
   CarouselCatalogCard,
@@ -72,10 +74,11 @@ export const Blocks: BlocksRegistry = {
   CarouselLinks,
   CarouselProductCard,
   CarouselProgramsCard,
+  CarouselRecommendationCard,
   CarouselTariffsCard,
   Catalog,
-  ContactsBlock,
   ComparisonTable,
+  ContactsBlock,
   ErrorBlock,
   ExchangeRateTile,
   Footer,
@@ -83,12 +86,17 @@ export const Blocks: BlocksRegistry = {
   GracePeriod,
   Header,
   Headline,
+  HorizontalLayout,
   ImgBlock,
   InsuranceAmountBlock,
   InvestmentInfo,
   LinkDocs,
   MiniGallery,
   MobileAppTile,
+  OfficeMap,
+  OfficeServicesBlock,
+  OtherProducts,
+  OtherProductsItem,
   ParagraphBlock,
   PictureText,
   Placeholder,
@@ -96,10 +104,8 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
-  OfficeServicesBlock,
-  OtherProducts,
-  OtherProductsItem,
-  CarouselRecommendationCard,
+  Recommendation,
+  RichTextBlock,
   RollupItem,
   SafeDepositRental,
   StepsBlock,
@@ -109,6 +115,4 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
-  Recommendation,
-  OfficeMap,
 };

package/src/components/Bonus/Bonus.tsx

@@ -19,7 +19,6 @@ export const Bonus = JSX<BonusProps>((props) => {
           title={title}
           description={description}
           headlineVersion="M"
-          align="center"
           {...rest}
         />
         <div className="flex flex-wrap w-full mt-9">

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -31,7 +31,6 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         title={title}
         description={subtitle}
         headlineVersion="M"
-        align="center"
         {...rest}
       />
       {bonusBenefits?.length ? (

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -28,13 +28,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img
-          className={`w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider`}
-          image={icon.icon}
-          asSVG
-        />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" asSVG />
       ) : null}
-      {icon?.src ? <Img image={icon.icon} /> : null}
+      {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>
     </li>
   );

package/src/components/Carousel/Carousel.tsx

@@ -57,9 +57,11 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 Carousel.childrenTypes = [
   'CarouselCard',
   'CarouselCatalogCard',
-  'CarouselTariffsCard',
+  'CarouselInvestmentCard',
   'CarouselProductCard',
   'CarouselProgramsCard',
+  'CarouselRecommendationCard',
+  'CarouselTariffsCard',
   'CarouselInvestmentCard',
 ];
 

package/src/components/CarouselCard/CarouselCard.tsx

@@ -22,13 +22,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
         <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
-          <Headline
-            className="!p-0"
-            title={title}
-            description={description}
-            headlineVersion="M"
-            align="center"
-          />
+          <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
           {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
         </div>
       </div>

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -24,7 +24,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             title={title}
             as="h1"
             description={description}
-            align="left"
+            align="text-left"
             className="p-0"
             bgColorHeadline="secondary"
           />

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -10,7 +10,7 @@ import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}

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

@@ -44,4 +44,13 @@ export default {
       />
     </div>
   ),
+  gray: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-4"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -7,7 +7,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { List } from '../../ui-kit/List/List';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { SocialMedia } from '../Footer/SocialMedia';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { BlockVersion, BlockVersionWithGray } from '../../model/BlockVersion';
+import { VersionWithGrayStyleMap } from '../../model/BlockVersion';
+
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 import type { UniBlockProps } from '../../model/JSXBlock';
 
@@ -35,8 +37,8 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={`relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[version]}
-        ${VersionStyleMap[version]}
+        ${BorderVersionStyleMap[getOmitVersion(version)]}
+        ${VersionWithGrayStyleMap[version]}
         ${className}`}
         {...rest}
       >
@@ -51,7 +53,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               />
             ) : null}
             {socialMedia.length ? (
-              <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={getOmitVersion(version)}
+              />
             ) : null}
             {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
           </div>
@@ -60,3 +66,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     );
   },
 );
+
+const getOmitVersion = (version: BlockVersionWithGray): BlockVersion =>
+  version === 'gray' ? 'primary' : version;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,4 +1,4 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersionWithGray } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
@@ -41,5 +41,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
-  version?: BlockVersion;
+  version?: BlockVersionWithGray;
 }

package/src/components/Catalog/Catalog.tsx

@@ -30,7 +30,6 @@ export const Catalog = JSX<CatalogProps>(
           title={title}
           description={description}
           headlineVersion="M"
-          align="center"
           {...rest}
         />
         <div

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -41,7 +41,7 @@ const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProp
             title={title}
             description={description}
             headlineVersion="XS"
-            align="left"
+            align="text-left"
             bgColorHeadline={version}
           />
           {additionalDescription ? (

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -4,6 +4,7 @@ import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
+const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -20,8 +21,8 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
     <thead>
       <tr>
         <th className={TABLE_HEAD_STYLE}>Валюта</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Купить</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Продать</th>
       </tr>
     </thead>
     <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>

package/src/components/Gallery/GalleryCardInner.tsx

@@ -7,7 +7,7 @@ import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(

package/src/components/Gallery/GalleryContainer.tsx

@@ -19,7 +19,7 @@ export interface GalleryCardData {
 export const GalleryContainer = JSX<GalleryContainerProps>(
   ({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (
     <div>
-      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
+      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} />
       <div
         className={`flex mt-8 ${
           cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''

package/src/components/GracePeriod/GracePeriod.tsx

@@ -19,7 +19,6 @@ export const GracePeriod = JSX<GracePeriodProps>(
         title={title}
         description={description}
         headlineVersion="M"
-        align="center"
         {...rest}
       />
       {calendar ? renderCalendar(calendar) : null}

package/src/components/Header/HeaderBurger.tsx

@@ -23,11 +23,11 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Img image="CloseIcon" width="24" height="24" asSVG />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" asSVG />
         </button>
         <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
-            image="GeolocationIcon"
+            image={{ icon: 'GeolocationIcon' }}
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"

package/src/components/Headline/Headline.fixture.mobile.tsx

@@ -7,7 +7,7 @@ import type { HeadlineContent } from './HeadlineContent';
 export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
-  align: 'center',
+  align: 'text-center',
   bgColorHeadline: 'transparent',
 };
 
@@ -40,33 +40,33 @@ const secondaryProps: HeadlineContent = {
 export default {
   'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...defaultProps} align="left" />
+      <Headline className="col-span-12" {...defaultProps} align="text-left" />
     </div>
   ),
   'default center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...defaultProps} align="center" />
+      <Headline className="col-span-12" {...defaultProps} align="text-center" />
     </div>
   ),
   'default right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...defaultProps} align="right" />
+      <Headline className="col-span-12" {...defaultProps} align="text-right" />
     </div>
   ),
 
   'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...primaryProps} align="left" />
+      <Headline className="col-span-12" {...primaryProps} align="text-left" />
     </div>
   ),
   'primary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...primaryProps} align="center" />
+      <Headline className="col-span-12" {...primaryProps} align="text-center" />
     </div>
   ),
   'primary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...primaryProps} align="right" />
+      <Headline className="col-span-12" {...primaryProps} align="text-right" />
     </div>
   ),
   'primary without description': (
@@ -92,17 +92,17 @@ export default {
 
   'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...secondaryProps} align="left" />
+      <Headline className="col-span-12" {...secondaryProps} align="text-left" />
     </div>
   ),
   'secondary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...secondaryProps} align="center" />
+      <Headline className="col-span-12" {...secondaryProps} align="text-center" />
     </div>
   ),
   'secondary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...secondaryProps} align="right" />
+      <Headline className="col-span-12" {...secondaryProps} align="text-right" />
     </div>
   ),
   'secondary without description': (

package/src/components/Headline/Headline.fixture.tsx

@@ -6,7 +6,7 @@ import type { HeadlineContent } from './HeadlineContent';
 export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
-  align: 'center',
+  align: 'text-center',
 };
 
 export const HEADLINE_PRIMARY: HeadlineContent = {
@@ -27,12 +27,12 @@ export default {
   ),
   'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE} align="left" />
+      <Headline className="col-span-12" {...HEADLINE} align="text-left" />
     </div>
   ),
   'default right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE} align="right" />
+      <Headline className="col-span-12" {...HEADLINE} align="text-right" />
     </div>
   ),
   'default difficult XXL': (
@@ -62,7 +62,7 @@ export default {
   ),
   'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="left" />
+      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-left" />
     </div>
   ),
   'primary center alignment': (
@@ -72,12 +72,12 @@ export default {
   ),
   'primary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="right" />
+      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-right" />
     </div>
   ),
   'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="left" />
+      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-left" />
     </div>
   ),
   'secondary center alignment': (
@@ -87,7 +87,7 @@ export default {
   ),
   'secondary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="right" />
+      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-right" />
     </div>
   ),
 };

package/src/components/Headline/Headline.mobile.tsx

@@ -1,36 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
-
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { HEADLINE_BLOCK_STYLE_MAPS } from './constants';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineStyles } from './headlineStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
-    bgColorHeadline = 'transparent',
     className = '',
     title,
     description,
     image,
-    align = 'left',
+    bgColorHeadline = 'transparent',
+    align = 'text-left',
   }) => {
-    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+    const style = headlineStyles[bgColorHeadline];
 
     return (
-      <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
+      <section className={`px-4 py-6 flex flex-col gap-2.5 ${style.wrapper} ${className}`}>
         {title ? (
-          <Heading
-            headingType="h2"
-            className={`${STYLE_MAPS.text} ${AlignText[align]}`}
-            title={title}
-          />
+          <Heading headingType="h2" className={`${style.titleColor} ${align}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m ${STYLE_MAPS.description} ${AlignText[align]}`}>{description}</p>
+          <Paragraph color={style.descriptionColor || style.titleColor} size="text-m" align={align}>
+            {description}
+          </Paragraph>
         ) : null}
         {image?.src && (
           <div className="mt-2.5 mx-auto flex justify-center">

package/src/components/Headline/Headline.tsx

@@ -1,44 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { HEADLINE_BLOCK_STYLE_MAPS, HEADLINE_VERSION } from './constants';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineStyles } from './headlineStyles';
+import { headlineVersionStyles } from './headlineVersionStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
     className = '',
-    bgColorHeadline = 'transparent',
-    align = 'center',
     title,
     description,
     headlineVersion = 'XL',
+    bgColorHeadline = 'transparent',
+    align = 'text-center',
     as,
     ...rest
   }) => {
-    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-    const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
+    const style = headlineStyles[bgColorHeadline];
+    const specificStyle = headlineVersionStyles[headlineVersion];
 
     return (
       <BlockWrapper
-        className={`font-sans flex flex-col p-12 ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`}
+        className={`flex flex-col p-12 ${specificStyle.wrapper} ${style.wrapper} ${className}`}
         {...rest}
       >
         {title ? (
           <Heading
-            headingType={SIZE_MAPS?.headingType}
-            as={as || SIZE_MAPS?.as}
-            className={`whitespace-pre-wrap ${STYLE_MAPS.text} ${AlignText[align]}`}
+            className={`whitespace-pre-wrap ${style.titleColor} ${align}`}
+            {...specificStyle?.title}
+            as={as || specificStyle?.title.as}
             title={title}
           />
         ) : null}
         {description ? (
-          <p className={`${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`}>
+          <Paragraph
+            color={style.descriptionColor || style.titleColor}
+            size={specificStyle.descriptionSize as TextSize}
+            align={align}
+          >
             {description}
-          </p>
+          </Paragraph>
         ) : null}
       </BlockWrapper>
     );