@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

package/mobile/src/components/ComparisonTable/TableColumn.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { TitleProps } from '../../model/HeadlineType';
-import type { IconProps } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
-import { CellData } from './ComparisonTableContent';
+import type { CellData, ColumnHeader } from './ComparisonTableContent';
 import { GRADIENT } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
@@ -14,13 +12,11 @@ export interface TableColumnData {
   cell: CellData[];
 }
 
-export type TableColumnHeader = TitleProps & IconProps;
-
 export interface TableColumnProps extends UniBlockProps {
-  header: TableColumnHeader;
-  columnData: TableColumnData[];
-  visibleRowLength: number;
-  isFillGradient: boolean;
+  header?: ColumnHeader;
+  columnData?: TableColumnData[];
+  visibleRowLength?: number;
+  isFillGradient?: boolean;
   showRow: boolean;
   onToggleColumn: () => void;
 }
@@ -48,31 +44,33 @@ export const TableColumn = JSX<TableColumnProps>(
             ))
           : null}
 
-        {showRow ? renderButton({ header, buttonVersion }) : null}
+        {showRow && header?.link ? (
+          <Button
+            href={header.link.href}
+            target={header.link.target}
+            version={buttonVersion}
+            className="text-s font-medium mt-4 py-[11px]"
+          >
+            {header.link.text}
+          </Button>
+        ) : null}
         {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
       </div>
     );
   },
 );
 
-const renderButton = ({ header, buttonVersion }) => {
-  if (!header.link) {
-    return null;
-  }
-
-  return (
-    <Button
-      href={header.link.href}
-      target={header.link.target}
-      version={buttonVersion}
-      className="text-s font-medium mt-4 py-[11px]"
-    >
-      {header.link.text}
-    </Button>
-  );
-};
+interface RenderToggleButtonProps {
+  onToggleColumn: () => void;
+  isFillGradient?: boolean;
+  showRow: boolean;
+}
 
-const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+const renderToggleButton = ({
+  onToggleColumn,
+  isFillGradient,
+  showRow,
+}: RenderToggleButtonProps) => (
   <div className="mt-5" role="cell">
     <a
       role="link"

package/mobile/src/components/ContentPage/ContentPageContext.tsx

@@ -1,5 +1,3 @@
-import { VNode } from '../../model/VNode';
-
 export interface Router {
   pathname: string;
   query: Record<string, string | string[] | undefined>;
@@ -16,19 +14,7 @@ export interface Search {
   setTerm: (t: string) => void;
 }
 
-export interface IntersectionObserverTagProps {
-  tag: keyof HTMLElementTagNameMap;
-  className?: string;
-  anchor?: string;
-  children?: VNode;
-  observerCallback: IntersectionObserverCallback;
-  observerOptions?: IntersectionObserverInit;
-}
-
-export type IntersectionObserverComponent = (props: IntersectionObserverTagProps) => VNode;
-
 export interface ContentPageContext {
   useRouter: () => Router;
   handlerDecorator?: HandlerDecorator;
-  IntersectionObserverTag: IntersectionObserverComponent;
 }

package/mobile/src/components/ContentPage/filterBlocks.ts

@@ -1,13 +1,11 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef } from '../../model/ContentPageDef';
-import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export const filterBlocks = (blocks: BlockDef[], blocksRegistry: BlocksRegistry) =>
   blocks
     ?.filter(
       (block) =>
-        isBlockInRegistry(block?.type || block?.mobile?.type, blocksRegistry) &&
-        !block.mobile?.hidden,
+        (block?.type || block?.mobile?.type || '') in blocksRegistry && !block.mobile?.hidden,
     )
     .map(normalizeBlock);

package/mobile/src/components/ContentPage/renderBlock.tsx

@@ -1,4 +1,4 @@
-import { BlockAncestors, BlockDecorator, DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
+import { BlockAncestors, BlockDecorator, DEFAULT_ANCESTORS } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
 import { style2className } from '../../utils/style2className';
@@ -15,7 +15,7 @@ interface RenderBlockOptions {
 export function renderBlock(
   block: BlockDef,
   options: RenderBlockOptions,
-  ancestors: BlockAncestors = [DEFAULT_SLOT_NAME], // Recursion context
+  ancestors: BlockAncestors = DEFAULT_ANCESTORS, // Recursion context
 ) {
   const { key, page, blockDecorator, blocksRegistry, context } = options;
   const { type } = block;

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -33,9 +33,7 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
         <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
         {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
         {subtitle ? (
-          <div className="font-sans text-xl-light text-left mb-7 max-w-[613px] text-center">
-            {subtitle}
-          </div>
+          <div className="font-sans text-xl-light mb-7 max-w-[613px] text-center">{subtitle}</div>
         ) : null}
         {button?.text ? (
           <Button

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.ui.json

@@ -1 +1,8 @@
-{}
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
+  }
+}

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -21,7 +21,7 @@ export function renderInput(props: InputProps) {
   return (
     <div className="relative flex">
       <Input
-        className="shrink-0 h-14 pl-4 pt-4 pb-4 text-l w-full appearance-none mr-[-90px]"
+        className="shrink-0 text-l w-full appearance-none mr-[-90px]"
         placeholder={placeholder}
         type="text"
         value={value}

package/mobile/src/components/Footer/Contacts.tsx

@@ -28,6 +28,7 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton,
               target: '_blank',
             },
           )}
+          ariaLabel="Обратная связь"
         />
       ) : null}
     </div>

package/mobile/src/components/Footer/Footer.tsx

@@ -1,6 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import { Accordion } from '../Accordion/Accordion';
+import type { Fallback } from '../../model/Fallback';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
 import type { FooterContent, SubMenuItem } from './FooterContent';
@@ -8,13 +15,6 @@ import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
-import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
-import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
-import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
 export const Footer = JSX<FooterProps>(
@@ -35,11 +35,13 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion
-          context={context}
-          className="!p-0 mb-4"
-          accordionItems={getAccordionItems(sitemap.topItems)}
-        />
+        <AccordionItemsList>
+          {sitemap.topItems?.map((item, i) => (
+            <AccordionItem key={String(i)} context={context} label={item.text}>
+              <LinkList context={context} documents={item.items} />
+            </AccordionItem>
+          ))}
+        </AccordionItemsList>
         <div>{dispositions?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}

package/mobile/src/components/Footer/FooterContent.ts

@@ -1,7 +1,7 @@
-import type { LinkProps } from '../../model/LinkProps';
-import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconProps } from '../../model/Picture';
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
+import type { IconProps } from '../../model/Picture';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Тип контакта
@@ -21,11 +21,6 @@ export type ContactInfo = DescriptionProps & {
   type?: ContactType;
 };
 
-/**
- * @required ["href"]
- */
-export type SocialMedia = Omit<LinkProps, 'text'>;
-
 /**
  * @title Пункт подменю
  */
@@ -43,9 +38,9 @@ export interface FooterContent extends SitemapProps {
   /** @title Контакты */
   contacts?: ContactInfo[];
   /** @title Социальные сети */
-  socialMedia?: SocialMedia[];
+  socialMedia?: LinkCommonProps[];
   /** @title Мобильные приложения */
-  mobileApps?: SocialMedia[];
+  mobileApps?: LinkCommonProps[];
   /** @title Заголовок для меню */
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
   /** @title Подменю */

package/mobile/src/components/Gallery/Gallery.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
-import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
-import type { GalleryProps } from './GalleryProps';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getListStyle } from '../../ui-kit/List/ListItem';
+import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
+import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
@@ -84,12 +84,22 @@ function renderDescription(card: GalleryCardProps) {
   );
 }
 
+const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'bg-primary-text',
+  secondary: 'bg-white',
+  gray: 'bg-secondary-text',
+};
+
 function renderItems(items: GalleryItemProps[], isDotted, version: BlockVersion = 'primary') {
   return (
     <section className="mt-3">
       {items.map((item, i) => (
         <div key={String(i)}>
-          {isDotted ? <div className={getListStyle(version)} /> : null}
+          {isDotted ? (
+            <div
+              className={`rounded-full inline-block mr-3 mt-2 w-2 h-2 min-w-2 min-h-2 ${LIST_DOT_STYLE_MAP[version]}`}
+            />
+          ) : null}
           <span className="text-m font-medium">{item.title}</span>
           <span className={`text-s pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`}>
             {item.text}

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -1,64 +1,80 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { AlignType } from '../../model/AlignType';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
-export const GalleryCardInner = JSX<GalleryCardProps>(
-  ({ title, description, image, items, button, version, isDotted = true }) => {
-    const titleStyleClasses = getTitleStyle(version);
+const ALIGN_TITLE: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
 
+export const GalleryCardInner = JSX<GalleryCardProps>(
+  ({
+    title,
+    headlineSmallVersion = 'XL_L',
+    description,
+    additionalDescription,
+    image,
+    items,
+    button,
+    version,
+    isDotted = true,
+    align = 'center',
+  }) => {
     return (
-      <div className="h-full flex flex-col justify-between text-center">
-        <div>
-          {image?.src ? (
-            <div className="flex justify-center">
-              <Img className="mb-6" image={image} />
-            </div>
-          ) : null}
-          {title ? renderCardTitle(title, titleStyleClasses) : null}
-          {description ? <div className={`text-m${title ? 'mt-2' : ''}`}>{description}</div> : null}
+      <div className={`h-full flex flex-col justify-between ${ALIGN_TITLE[align]}`}>
+        <div className="flex flex-col h-full">
+          {renderImage(image)}
+          {renderCardTitle(headlineSmallVersion, title)}
+          {renderDescription(description, title)}
+          {renderAdditionalDescription(additionalDescription)}
           {items?.length ? renderItems(items, isDotted, version) : null}
         </div>
-        {button?.text ? renderButton(button) : null}
+        {button ? renderButton(button) : null}
       </div>
     );
   },
 );
 
-function renderButton(button) {
-  return (
-    <Button
-      className="mt-6 w-full"
-      appendLeft={button.icon && <Img image={button.icon} width="24px" height="24px" asSVG />}
-      {...button}
-    />
-  );
-}
+const renderImage = (image?: Picture) =>
+  image?.src ? (
+    <div className="flex justify-center">
+      <Img className="mb-6" image={image} />
+    </div>
+  ) : null;
+
+const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
+  title ? <div className={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</div> : null;
 
-function renderCardTitle(title: string, className: string) {
-  return <div className={`text-xl-light m-0 ${className}`}>{title}</div>;
-}
+const renderDescription = (description?: string, title?: string) =>
+  description ? <div className={`text-base ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
-function renderItems(
+const renderAdditionalDescription = (additionalDescription?: string) =>
+  additionalDescription ? (
+    <div className="text-m-light text-secondary-text mt-auto">{additionalDescription}</div>
+  ) : null;
+
+const renderButton = (button: ButtonWithIconProps) => (
+  <Button className="mt-6 w-full" {...button} />
+);
+
+const renderItems = (
   items: GalleryItemProps[],
   isDotted: boolean,
   version: BlockVersion = 'primary',
-) {
-  return (
-    <List
-      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
-      itemClassName="mt-1 text-left first:mt-0"
-      items={items.filter((item) => item?.text).map((item) => item.text as string)}
-      isDotted={isDotted}
-      version={version}
-    />
-  );
-}
-
-function getTitleStyle(version) {
-  return `text-xl-light m-0
-        ${version !== 'secondary' ? 'text-primary-text' : ''}
-      `;
-}
+) => (
+  <List
+    className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+    itemClassName="mt-1 text-left first:mt-0"
+    items={items.filter((item) => item?.text).map((item) => item.text as string)}
+    isDotted={isDotted}
+    version={version}
+  />
+);

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -19,7 +19,15 @@ export interface GalleryCardData {
 }
 
 export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
+  ({
+    context,
+    title,
+    headlineVersion = 'L',
+    description,
+    cards = [],
+    version = 'normal',
+    activeCardIndex,
+  }) => {
     return (
       <div>
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
@@ -28,7 +36,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
           className="!p-0"
           title={title}
           description={description}
-          headlineVersion="L"
+          headlineVersion={headlineVersion}
           align="center"
         />
         <div

package/mobile/src/components/Gallery/GalleryContent.ts

@@ -1,8 +1,9 @@
+import { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineProps, HeadlineSmallProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Элемент списка
@@ -16,8 +17,10 @@ export interface GalleryItemProps {
 
 /**
  * @title Карточка
+ * @default {"headlineSmallVersion": "XL_L"}
  */
-export type GalleryCardProps = HeadlineCommonProps & {
+export type GalleryCardProps = HeadlineSmallProps & {
+  additionalDescription?: string;
   /**
    * @default {
    *   "format": "webp",
@@ -43,12 +46,17 @@ export type GalleryCardProps = HeadlineCommonProps & {
   /** @title Список */
   items?: GalleryItemProps[];
   version?: BlockVersion;
+  /**
+   * @title Выравнивание
+   * @default center
+   */
+  align?: AlignType;
 };
 
 /**
  * @title Галерея
  */
-export type GalleryContent = HeadlineCommonProps & {
+export type GalleryContent = HeadlineProps & {
   /**
    * @title Карточки
    * @minItems 3

package/mobile/src/components/GracePeriod/GracePeriod.ui.json

@@ -11,5 +11,10 @@
         }
       }
     }
+  },
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
   }
 }

package/mobile/src/components/Header/Header.tsx

@@ -2,15 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Fallback } from '../../model/Fallback';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-import { Accordion } from '../Accordion/Accordion';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
@@ -19,17 +20,19 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
+    const { handlerDecorator } = context;
     const router = context.useRouter();
+
     const fallback: Fallback | undefined = page?.fallback;
     const sitemap = useSitemap(fallback);
-    const dispositions = sitemap?.dispositions;
-    const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
     const activeTopItem = mergedItems.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
+
     const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+
     const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     return (
@@ -55,14 +58,16 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={dispositions}
+            burgerSubMenu={sitemap?.dispositions}
             defaultLocation={defaultLocation}
           >
-            <Accordion
-              context={context}
-              accordionItems={getAccordionItems(sitemap.topItems)}
-              className="!p-0 mb-4"
-            />
+            <AccordionItemsList>
+              {sitemap.topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} context={context} label={item.text}>
+                  <LinkList context={context} documents={item.items} />
+                </AccordionItem>
+              ))}
+            </AccordionItemsList>
           </HeaderBurger>
         ) : null}
       </header>

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -5,6 +5,7 @@ import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import { IntersectionObserverTag } from '../../ui-kit/IntersectionObserverTag';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { DropdownMenu } from './DropdownMenu';
 
@@ -17,7 +18,7 @@ export interface HeaderSubMenuProps {
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
   const [menuVisible, setMenuVisible] = useState(false);
   const router = context.useRouter();
-  const { handlerDecorator, IntersectionObserverTag } = context;
+  const { handlerDecorator } = context;
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
   const dropDownMenuItems = subItems.slice(visibleItemsCount);

package/mobile/src/components/Headline/constants.ts

@@ -1,6 +1,6 @@
 import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
-import type { HeadlineVersion } from '../../model/HeadlineType';
+import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
 import type { HeadingTagType, HeadingType } from '../../ui-kit/Heading/HeadingProps';
 
 export const ALIGN_TEXT: Record<AlignType, string> = {
@@ -72,3 +72,13 @@ export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
     as: 'h4',
   },
 };
+
+export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
+  XL_L: 'text-xl-light',
+  XL_R: 'text-xl',
+  L_L: 'text-l-light',
+  L_R: 'text-l',
+  M: 'text-m-light',
+  S: 'text-s-light',
+  XS: 'text-xs-light',
+};