@redneckz/wildless-cms-uni-blocks 0.3.28 → 0.3.31

package/src/components/ExchangeRateTile/ExchangeRateTile.fixture.tsx

@@ -5,7 +5,7 @@ import { ExchangeRateTile } from './ExchangeRateTile';
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ExchangeRateTile context={context} className="col-span-12" />
+      <ExchangeRateTile context={context} className="col-span-8" />
     </div>
   ),
 };

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -32,7 +32,7 @@ const DEFAULT_LOCATION = {
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
-  ({ className = '', context, title = 'Курсы обмена валют' }) => {
+  ({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
     const data = useExchangeRates(context.useAsyncData);
     const exchangeCurrencyItems =
       data?.exchangeRate?.currencies?.filter((item) => {
@@ -40,21 +40,27 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
       }) || DEFAULT_CURRENCY_ITEMS;
 
     return (
-      <section className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}>
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}
+        id={anchor}
+      >
         <BaseTile
           context={context}
           title={
             <Heading
               headingType={getTileHeadingType(className)}
               title={title}
-              className="whitespace-pre-wrap mb-3"
+              className="whitespace-pre-wrap"
             />
           }
         >
           <div className="flex">
-            <div className="mr-20 pt-3">
+            <div className="mr-[43px] pt-4">
               {exchangeCurrencyItems ? (
-                <CurrencyTable className="mb-7" exchangeCurrencyItems={exchangeCurrencyItems} />
+                <CurrencyTable
+                  className="mb-[31px]"
+                  exchangeCurrencyItems={exchangeCurrencyItems}
+                />
               ) : null}
               <CurrentLocation {...DEFAULT_LOCATION} />
             </div>

package/src/components/Footer/Footer.tsx

@@ -15,9 +15,18 @@ const LEFT_COL_WIDTH_SMALL_DESKTOP = 'xl:w-[220px]';
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
 export const Footer = JSX<FooterProps>(
-  ({ className, documents, relatedEnterprises, contacts, socialMedia, topItems, context }) => {
+  ({
+    className,
+    documents,
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    topItems,
+    context,
+    anchor = null,
+  }) => {
     return (
-      <footer className={`px-9 py-10 bg-white ${className || ''}`}>
+      <footer className={`px-9 py-10 bg-white ${className || ''}`} id={anchor}>
         <div className="flex items-stretch gap-[54px] pb-8 xl:gap-8">
           <Logo className={`${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}`} />
           <SearchBar context={context} className="grow" />

package/src/components/Footer/MediaButton.tsx

@@ -32,7 +32,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main"
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main"
       href={href}
       aria-label={label}
       target="_blank"

package/src/components/Gallery/GalleryInner.tsx

@@ -11,7 +11,7 @@ export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className = '', version = 'normal', ...rest }) => {
+  ({ context, cards = [], className = '', version = 'normal', anchor = null, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -28,6 +28,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
     return (
       <section
         className={`relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`}
+        id={anchor}
       >
         <GalleryContainer
           context={context}

package/src/components/Header/Header.example.json

@@ -0,0 +1,3 @@
+{
+  "defaultLocation": "Москва"
+}

package/src/components/Header/Header.tsx

@@ -20,7 +20,14 @@ const BORDER_COLORS: Record<BgColorVersion, string> = {
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+  ({
+    className,
+    defaultLocation = 'Москва',
+    bgColor = 'bg-white',
+    context,
+    topItems,
+    anchor = null,
+  }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
     const { handlerDecorator } = context;
@@ -51,7 +58,7 @@ export const Header = JSX<HeaderProps>(
     ));
 
     return (
-      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`}>
+      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`} id={anchor}>
         <div className="container">
           <div className="flex items-center">
             <Logo className="mr-8" bgColor={bgColor} />

package/src/components/Headline/Headline.tsx

@@ -8,10 +8,17 @@ import type { HeadlineContent } from './HeadlineContent';
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
+  ({
+    bgColorHeadline = 'transparent',
+    align = 'left',
+    className = '',
+    title,
+    description,
+    anchor = null,
+  }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`}>
+      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`} id={anchor}>
         {title && (
           <Heading
             headingType="h2"

package/src/components/LikeControl/LikeControl.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LikeButton } from '../../ui-kit/Button/LikeButton';
 import type { UniBlockProps } from '../../types';
+import { LikeButton } from '../../ui-kit/Button/LikeButton';
 
-export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
+export const LikeControl = JSX<UniBlockProps>(({ className, context, anchor = null }) => {
   const likeService = context.useLikeService();
 
   return (
@@ -10,6 +10,7 @@ export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
       className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
         className || ''
       }`}
+      id={anchor}
     >
       <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
       <LikeButton

package/src/components/LinkDocs/LinkDocs.tsx

@@ -32,9 +32,10 @@ export const LinkDocs = JSX<LinkDocsProps>(
     documents,
     icon = 'DocIcon',
     columnsMode = 'double',
+    anchor = null,
   }) => {
     return (
-      <section className={`font-sans text-primary-text p-12 bg-white ${className}`}>
+      <section className={`font-sans text-primary-text p-12 bg-white ${className}`} id={anchor}>
         {title ? (
           <Heading
             headingType="h2"

package/src/components/LinkList/LinkList.tsx

@@ -4,9 +4,9 @@ import type { LinkListContent } from './LinkListContent';
 
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
-export const LinkList = JSX<LinkListProps>(({ className = '', documents }) => {
+export const LinkList = JSX<LinkListProps>(({ className = '', documents, anchor = null }) => {
   return (
-    <section className={`font-sans bg-white mt-[10px] ${className}`}>
+    <section className={`font-sans bg-white mt-[10px] ${className}`} id={anchor}>
       <ul className="flex flex-col text-sm text-secondary-text p-0">
         {documents?.length ? renderLinkListItem(documents) : null}
       </ul>

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -11,12 +11,20 @@ import type { MobileAppTileContent } from './MobileAppTileContent';
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className = '', context, title = 'Мобильное приложение', qr, buttons = [] }) => {
+  ({
+    className = '',
+    context,
+    title = 'Мобильное приложение',
+    qr,
+    buttons = [],
+    anchor = null,
+  }) => {
     return (
       <section
         className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
           className,
         )} ${getTileMinHeight(className)} `}
+        id={anchor}
       >
         <BaseTile
           context={context}

package/src/components/Navigation/Navigation.tsx

@@ -7,33 +7,36 @@ import { NavigationItem } from './NavigationItem';
 
 export interface NavigationProps extends NavigationContent, UniBlockProps {}
 
-export const Navigation = JSX<NavigationProps>(({ className, context, title, buttons }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
+export const Navigation = JSX<NavigationProps>(
+  ({ className, context, title, buttons, anchor = null }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
 
-  const activeButton = findActiveSubItem(router)(buttons);
+    const activeButton = findActiveSubItem(router)(buttons);
 
-  return (
-    <section
-      className={`font-sans text-primary-text rounded-[40px] flex items-center justify-between ${
-        className || ''
-      }`}
-    >
-      <h2 className="font-medium text-xl m-0">{title}</h2>
-      {buttons?.length ? (
-        <div className="flex rounded-md overflow-hidden bg-white">
-          {buttons
-            .filter(({ text }) => text)
-            .map((button, i) => (
-              <NavigationItem
-                key={String(i)}
-                className="first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md"
-                isActive={button === activeButton}
-                {...useLink({ router, handlerDecorator }, button)}
-              />
-            ))}
-        </div>
-      ) : null}
-    </section>
-  );
-});
+    return (
+      <section
+        className={`font-sans text-primary-text rounded-[40px] flex items-center justify-between ${
+          className || ''
+        }`}
+        id={anchor}
+      >
+        <h2 className="font-medium text-xl m-0">{title}</h2>
+        {buttons?.length ? (
+          <div className="flex rounded-md overflow-hidden bg-white">
+            {buttons
+              .filter(({ text }) => text)
+              .map((button, i) => (
+                <NavigationItem
+                  key={String(i)}
+                  className="first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md"
+                  isActive={button === activeButton}
+                  {...useLink({ router, handlerDecorator }, button)}
+                />
+              ))}
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { NavigatorTab } from './NavigatorTabsContent';
+
+export interface NavigatorTabItemProps extends NavigatorTab {
+  active?: boolean;
+  className?: string;
+  onClick?: (ev: MouseEvent) => void;
+}
+
+const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const LINK_CLASSES = 'flex-1 flex items-center justify-center';
+
+export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
+  ({ className = '', label, active, children, onClick, anchor }) => (
+    <a className={getLinkClasses(className, active)} href={`#${anchor}`} onClick={onClick}>
+      <span className={getTextClasses(active)}>{label || children}</span>
+    </a>
+  ),
+);
+
+const getLinkClasses = (className: string, active?: boolean) => {
+  const classes = active ? 'bg-primary-main' : 'bg-white';
+  return `${classes} ${LINK_CLASSES} ${className}`;
+};
+
+const getTextClasses = (active?: boolean) => {
+  const classes = active ? 'text-white' : 'text-secondary-text hover:text-primary-main';
+  return `${classes} ${TEXT_CLASSES}`;
+};

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

@@ -0,0 +1,7 @@
+{
+  "navigatorTabs": [
+    { "label": "Tab1", "anchor": "tab1" },
+    { "label": "Tab2", "anchor": "tab2" },
+    { "label": "Tab3", "anchor": "tab3" }
+  ]
+}

package/src/components/NavigatorTabs/NavigatorTabs.fixture.tsx

@@ -0,0 +1,11 @@
+import { context } from '../../setup-fixture';
+import { NavigatorTabs } from './NavigatorTabs';
+import tabsExample from './NavigatorTabs.example.json';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <NavigatorTabs context={context} className="col-span-12" {...tabsExample} />
+    </div>
+  ),
+};

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { getHash } from '../../utils/url';
+import type { Router } from '../ContentPage/ContentPageContext';
+import { NavigatorTabItem } from './NavigatorTabItem';
+import type { NavigatorTab, NavigatorTabsContent } from './NavigatorTabsContent';
+
+export interface TabsBlockProps extends NavigatorTabsContent, UniBlockProps {}
+
+export const NavigatorTabs = JSX<TabsBlockProps>(
+  ({ className = '', navigatorTabs, context, anchor = null }) => {
+    const router = context.useRouter();
+    const hash = getHash(router.href);
+    return (
+      <section
+        className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
+        id={anchor}
+      >
+        {navigatorTabs ? navigatorTabs.map(renderTab(hash, router)) : null}
+      </section>
+    );
+  },
+);
+
+const renderTab = (hash?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+  const anchorHash = `#${tab.anchor}`;
+  const active = hash ? anchorHash === hash : i === 0;
+  return (
+    <NavigatorTabItem
+      key={tab.anchor}
+      active={active}
+      onClick={() => router?.replace(anchorHash)}
+      {...tab}
+    />
+  );
+};

package/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -0,0 +1,20 @@
+/**
+ * @title Таб
+ */
+export interface NavigatorTab {
+  /** @title Название */
+  label?: string;
+  /** @title Якорь */
+  anchor?: string;
+}
+
+/**
+ * @title Блок табов
+ */
+export interface NavigatorTabsContent {
+  /**
+   * @title Список табов
+   * @minItems 3
+   */
+  navigatorTabs?: NavigatorTab[];
+}

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -3,13 +3,24 @@ import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
 import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
-import type { OtherProductsProps } from './OtherProducts';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import { OtherProducts } from './OtherProducts';
+import type { OtherProductsProps } from './OtherProducts';
+
 import type {
   ProductBlockBlockListDef,
   ProductTileBlockListDef,
   TextBlockBlockListDef,
   TileBlockListDef,
+  GalleryBlockListDef,
+  HeadlineBlockListDef,
+  LinkDocsBlockListDef,
+  MiniGalleryBlockListDef,
+  PictureTextBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
 
 const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
@@ -42,11 +53,36 @@ const PRODUCT_PENSION_TILES__OTHER_BLOCK: ProductTileBlockListDef = {
   ...PRODUCT_PENSION_TILE,
 };
 
+const HEADLINE_OTHER_BLOCK: HeadlineBlockListDef = {
+  blockListType: 'Headline',
+  ...HEADLINE,
+};
+
+const PICTURE_TEXT_OTHER_BLOCK: PictureTextBlockListDef = {
+  blockListType: 'PictureText',
+  ...PICTURE_TEXT,
+};
+
+const LINK_DOCS_OTHER_BLOCK: LinkDocsBlockListDef = {
+  blockListType: 'LinkDocs',
+  ...linkDocsContentExample,
+};
+
+const GALLERY_OTHER_BLOCK: GalleryBlockListDef = {
+  blockListType: 'Gallery',
+  ...GALLERY,
+};
+
+const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
+  blockListType: 'MiniGallery',
+  ...MINI_GALLERY,
+};
+
 const propsBlock: OtherProductsProps = {
   context,
   blockItems: [
     {
-      label: 'Другие кредитные карты Россельхозбанка 1',
+      label: 'OtherProducts №1 Tiles',
       blocks: [
         TILES_PREMIUM_OTHER_BLOCK,
         TILES_PREMIUM_OTHER_BLOCK,
@@ -55,7 +91,7 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 2',
+      label: 'OtherProducts №2 Product_Tiles',
       blocks: [
         PRODUCT_TILES_OTHER_BLOCK,
         PRODUCT_TILES_OTHER_BLOCK,
@@ -64,12 +100,11 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 3',
+      label: 'OtherProducts №3 Product_Block',
       blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
     },
-
     {
-      label: 'Другие кредитные карты Россельхозбанка 4',
+      label: 'OtherProducts №4 Text_Block',
       blocks: [
         TEXT_BLOCK_OTHER_BLOCK,
         TEXT_BLOCK_OTHER_BLOCK,
@@ -77,6 +112,26 @@ const propsBlock: OtherProductsProps = {
         TEXT_BLOCK_OTHER_BLOCK,
       ],
     },
+    {
+      label: 'OtherProducts №5 Picture_Text',
+      blocks: [PICTURE_TEXT_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №6 Headline',
+      blocks: [HEADLINE_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №7 Link_Docs',
+      blocks: [LINK_DOCS_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №8 Gallery',
+      blocks: [GALLERY_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №9 Mini_Gallery',
+      blocks: [MINI_GALLERY_OTHER_BLOCK],
+    },
   ],
 };
 

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -15,11 +15,6 @@ export interface blockItemCommonProps {
   isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
-  /**
-   * @title Отображать/скрывать обводку элемента
-   * @default false
-   */
-  bordered?: boolean; // TODO: только для мобильной версии
   columns?: ColumnsCount;
 }
 
@@ -29,13 +24,9 @@ export interface blockItemCommonProps {
 export interface OtherProductsContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Список */
-  blockItems?: blockItemCommonProps[];
-  /** @title Подзаголовок */
-  description?: string; // TODO: только для мобильной версии
   /**
-   * @title Отображать/скрывать обводку у элемента списка
-   * @default false
+   * @title Список
+   * @maxItems 10
    */
-  bordered?: boolean; // TODO: только для мобильной версии
+  blockItems?: blockItemCommonProps[];
 }

package/src/components/PictureText/PictureText.tsx

@@ -9,19 +9,24 @@ import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
-export const PictureText = JSX<PictureTextProps>(({ className = '', title, image, benefits }) => {
-  return (
-    <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
-      <Heading headingType="h2" className="text-center" title={title} />
-      <div className={'flex justify-center mt-9'}>
-        {image?.src && <Img className="mr-6" image={image} />}
-        {benefits?.length ? (
-          <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
-        ) : null}
-      </div>
-    </section>
-  );
-});
+export const PictureText = JSX<PictureTextProps>(
+  ({ className = '', title, image, benefits, anchor = null }) => {
+    return (
+      <section
+        className={`relative font-sans text-primary-text bg-white p-14 ${className}`}
+        id={anchor}
+      >
+        <Heading headingType="h2" className="text-center" title={title} />
+        <div className={'flex justify-center mt-9'}>
+          {image?.src && <Img className="mr-6" image={image} />}
+          {benefits?.length ? (
+            <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);
 
 function renderBenefit(benefit: Benefit, i: number) {
   return (

package/src/components/Placeholder/Placeholder.tsx

@@ -15,12 +15,13 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, context, title, description = 'Блок в разработке...' }) => {
+  ({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
     return (
       <section
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
           className,
         )} ${getTileMinHeight(className)} `}
+        id={anchor}
       >
         <BaseTile
           context={context}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -20,14 +20,23 @@ const breadcrumbsStyleMap: Record<BlockVersion, string> = {
 };
 
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
-  const { context, version = 'primary', breadcrumbs, className, ...otherProps } = props;
+  const {
+    context,
+    className,
+    breadcrumbs,
+    version = 'primary',
+    anchor = null,
+    ...otherProps
+  } = props;
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <section
       className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${
         className || ''
       } ${productBlockStyleMap[version]}`}
+      id={anchor}
     >
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">

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

@@ -86,7 +86,9 @@ const labelStyleMap: Record<BlockVersion, string> = {
 };
 
 const renderLabel = (label: string, version: BlockVersion) => (
-  <div className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 w-fit ${labelStyleMap[version]}`}>
+  <div
+    className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`}
+  >
     {label}
   </div>
 );

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -45,7 +45,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5"
+                className="mt-5 text-m-base"
                 items={items}
                 itemClassName="mb-[10px]"
                 version={version}