@redneckz/wildless-cms-uni-blocks 0.2.59 → 0.2.62

package/src/ContentPage.page.json

@@ -16,6 +16,7 @@
       "type": "Header",
       "style": ["col-span-12", "-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
       "content": {
+        "defaultLocation": "Москва",
         "topItems": [
           {
             "href": "https://rshb.ru/",
@@ -387,7 +388,23 @@
         "qr": {
           "href": "https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true",
           "src": "data:image/png;base64,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"
-        }
+        },
+        "buttons": [
+          {
+            "aboveText": "Загрузите в",
+            "text": "App Store",
+            "icon": "AppleIcon",
+            "href": "#",
+            "version": "secondary"
+          },
+          {
+            "aboveText": "Доступно в",
+            "text": "Google Play",
+            "icon": "PlayMarketIcon",
+            "href": "#",
+            "version": "secondary"
+          }
+        ]
       },
       "mobile": {
         "style": ["col-span-12"]
@@ -687,6 +704,17 @@
         ]
       }
     },
+    {
+      "type": "TextBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Все карты Россельхозбанка работают",
+        "description": "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
+        "blockVersion": "primary",
+        "iconVersion": "small"
+      }
+    },
+
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/ContentPage.tsx

@@ -37,7 +37,7 @@ export const ContentPage = JSX<ContentPageProps>(
   }) => {
     return (
       <section className="relative" data-theme={colorPalette}>
-        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className}`}>
+        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
           {blocks?.length ? blocks.map(renderBlock) : null}
         </div>
         {likeControl && (

package/src/ExchangeRateTile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { DollarIcon, EuroIcon } from './Icons/index';
 import { Tile } from './Tile';
 import type { UniBlockProps } from './types';
 import { ButtonProps } from './ui-kit/Button';
+import { Icon } from './ui-kit/Icon';
 
 export interface ExchangeRateTileContent {
   title?: string;
@@ -14,8 +14,8 @@ const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
 
 const CURRENCY_CODES = ['USD', 'EUR'];
 const CURRENCY_ICONS_MAP = {
-  USD: DollarIcon,
-  EUR: EuroIcon,
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
 };
 
 const buttons: ButtonProps[] = [
@@ -48,7 +48,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context
               <tr key={code}>
                 <CurrencyTD className="pt-4">
                   <div className="flex items-center">
-                    {CURRENCY_ICONS_MAP[code] ? CURRENCY_ICONS_MAP[code]() : null}
+                    <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
                     <span className="ml-2">{code}</span>
                   </div>
                 </CurrencyTD>

package/src/Footer/Footer.tsx

@@ -24,8 +24,8 @@ export interface FooterProps extends FooterContent, UniBlockProps {}
 export const Footer = JSX<FooterProps>(
   ({ className, documents, relatedEnterprises, contacts, socialMedia, topItems, context }) => {
     return (
-      <footer className={`${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`}>
-        <div className="flex items-stretch gap-32 py-8 xl:gap-8">
+      <footer className={`${className} px-9 py-10 bg-white`}>
+        <div className="flex items-stretch gap-32 pb-8 xl:gap-8">
           <Logo className={`${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}`} />
           <SearchBar context={context} className="grow" />
         </div>

package/src/Footer/HorizontalNavigation.tsx

@@ -10,7 +10,7 @@ export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context
   return (
     <div className={`${className || ''}`}>
       {links?.length ? (
-        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y-1 border-y-main-divider">
+        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
           {links.map((_, i) => (
             <HorizontalNavigationLink
               key={String(i)}

package/src/Footer/Sitemap.tsx

@@ -48,7 +48,7 @@ interface ColumnItemProps extends LinkContent {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-text no-underline"
+    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/src/Footer/SocialMedia.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { LinkContent, UniBlockProps } from '../types';
-import { TelegramIcon, VKIcon, OkIcon } from '../Icons/index';
+import { Icon, IconName } from '../ui-kit/Icon';
 import { useLink } from '../useLink';
 
-const ICONS_MAP = [
-  { origins: ['t.me', 'telegram.org'], icon: TelegramIcon, label: 'Телеграм' },
-  { origins: ['vk.com'], icon: VKIcon, label: 'ВКонтакте' },
-  { origins: ['ok.ru'], icon: OkIcon, label: 'Одноклассники' },
+const ICONS_MAP: Array<{ origins: string[]; icon: IconName; label: string }> = [
+  { origins: ['t.me', 'telegram.org'], icon: 'TelegramIcon', label: 'Телеграм' },
+  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте' },
+  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники' },
 ];
 
 export interface SocialMediaProps extends UniBlockProps {
@@ -17,7 +17,7 @@ export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context })
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <div className={`flex items-end justify-end gap-2 py-6 ${className || ''}`}>
+    <div className={`flex items-end justify-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
       {media?.map((_, index) => (
         <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
       ))}
@@ -30,17 +30,17 @@ interface MediaButtonProps {
 }
 
 const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon: Icon, label } =
+  const { icon, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
   return (
     <a
-      className="flex items-center justify-center border-solid border-1 border-main-divider rounded-full no-underline outline-none w-8 h-8"
+      className="flex items-center justify-center border-solid border border-main-divider rounded-full no-underline outline-none w-9 h-9"
       href={href}
       target="_blank"
       rel="noopener noreferrer"
       aria-label={label}
     >
-      {Icon && <Icon className="block" />}
+      {icon && <Icon className="block" name={icon} /> /* TODO width & height */}
     </a>
   );
 });

package/src/Footer/TextInformation.tsx

@@ -8,9 +8,9 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   const { handlerDecorator } = context;
   return (
     <div className={`${className || ''}`}>
-      <div className="py-[5px]">
+      <div className="pt-5 pb-[5px]">
         <span className="font-sans font-normal text-xs text-secondary-text">
-          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00AB;Россельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
       {links?.length ? (

package/src/Header/HeaderSecondaryMenu.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { GridIcon, LoupeIcon, ProfileIcon } from '../Icons/index';
+import type { UniBlockProps } from '../types';
+import { Icon } from '../ui-kit/Icon';
 import { TopItem } from '../ui-kit/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
-import type { UniBlockProps } from '../types';
 
 interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
@@ -36,19 +36,19 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className="mr-5 text-primary-text hover:text-primary-main"
           ariaLabel="Поиск по сайту"
         >
-          {LoupeIcon({ 'aria-hidden': true })}
+          <Icon name="LoupeIcon" aria-hidden="true" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className="mr-5 text-primary-text hover:text-primary-main"
           ariaLabel="Профиль"
         >
-          {ProfileIcon({ 'aria-hidden': true })}
+          <Icon name="ProfileIcon" aria-hidden="true" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
           ariaLabel="Дополнительные ссылки"
         >
-          {GridIcon({ 'aria-hidden': true })}
+          <Icon name="GridIcon" aria-hidden="true" />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/MobileAppTile.fixture.tsx

@@ -12,6 +12,22 @@ export default {
           href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
           src: 'data:image/png;base64,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',
         }}
+        buttons={[
+          {
+            aboveText: 'Загрузите в',
+            text: 'App Store',
+            icon: 'AppleIcon',
+            href: '#',
+            version: 'secondary',
+          },
+          {
+            aboveText: 'Доступно в',
+            text: 'Google Play',
+            icon: 'PlayMarketIcon',
+            href: '#',
+            version: 'secondary',
+          },
+        ]}
       />
     </div>
   ),

package/src/MobileBlocks.ts

@@ -8,6 +8,7 @@ import { ProductBlock } from './ProductBlock';
 import { ProductGallery } from './ProductGallery';
 import { ProductTile } from './ProductTile';
 import { StepsBlock } from './StepsBlock';
+import { TextBlock } from './TextBlock';
 import { Tile } from './Tile';
 
 export const MobileBlocks = {
@@ -18,6 +19,7 @@ export const MobileBlocks = {
   ProductTile,
   ProductBlock,
   StepsBlock,
+  TextBlock,
   BenefitsBlock,
   ProductGallery,
   ExchangeRateTile,

package/src/ProductBlockInner.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon } from './Icons/index';
-import type { UniBlockProps, Benefit } from './types';
-import { BaseTile } from './BaseTile';
 import type { BaseTileContent } from './BaseTile';
+import { BaseTile } from './BaseTile';
+import type { Benefit } from './BenefitsBlock';
 import { Img } from './Img';
-
-const ICONS = { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon };
+import type { UniBlockProps } from './types';
+import { Icon } from './ui-kit/Icon';
+import { Title } from './ui-kit/Title';
 
 export interface ProductBlockInnerContent extends BaseTileContent {
   benefits?: Benefit[];
@@ -19,9 +19,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
       <div className={`flex grow justify-between items-stretch ${className || ''}`}>
         <div className={'flex flex-col'}>
           {title && (
-            <h1 className="font-medium text-title-lg m-0 mb-4 whitespace-pre-wrap max-w-[600px]">
+            <Title size="XL" className="font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]">
               {title}
-            </h1>
+            </Title>
           )}
           <BaseTile context={context} description={description} items={items} buttons={buttons}>
             {benefits?.length ? (
@@ -39,9 +39,12 @@ function renderBenefit(benefit: Benefit, i: number) {
   return (
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon && (
-        <div className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border">
-          {ICONS[benefit.icon as keyof typeof ICONS]?.()}
-        </div>
+        <Icon
+          className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border"
+          name={benefit.icon}
+          width="24"
+          height="24"
+        />
       )}
       <div className="flex gap-1 flex-col h-full">
         <h4 className="font-medium text-xl m-0">{benefit.label}</h4>

package/src/ProductTile.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps, Benefit } from './types';
-import { BlockVersion } from './types';
-import { Tile } from './Tile';
 import type { BaseTileContent } from './BaseTile';
+import type { Benefit } from './BenefitsBlock';
+import { Tile } from './Tile';
+import type { UniBlockProps } from './types';
+import { BlockVersion } from './types';
 
 export interface ProductTileContent extends BaseTileContent {
   benefits?: Benefit[];

package/src/ProjectSettings.ts

@@ -5,6 +5,7 @@ export interface ProjectSettings {
   FORCED_DRAFT_FLOW: boolean;
   ENABLE_ASSIST?: boolean;
   SITEMAP?: string;
+  CDN?: string; // Should ends with "/"
 }
 
 export const projectSettings = new (class implements ProjectSettings {
@@ -35,4 +36,7 @@ export const projectSettings = new (class implements ProjectSettings {
   get SITEMAP() {
     return this._.SITEMAP;
   }
+  get CDN() {
+    return this._.CDN;
+  }
 })();

package/src/StepsBlock.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { NewDocIcon, PassSendIcon, ActualBalanceIcon } from './Icons/index';
 import type { UniBlockProps } from './types';
+import { Icon, IconName } from './ui-kit/Icon';
+import { Title } from './ui-kit/Title';
 import { joinList } from './utils/joinList';
 
-const ICONS = { NewDocIcon, PassSendIcon, ActualBalanceIcon };
 export interface Step {
   label: string;
   description?: string;
-  icon?: keyof typeof ICONS;
+  icon?: IconName;
 }
 
 export interface StepsBlockContent {
@@ -24,7 +24,7 @@ export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) =>
         className || ''
       }`}
     >
-      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
+      <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title>
       {steps?.length ? (
         <div>
           <div className="flex mt-9 items-center px-[88px]">
@@ -43,7 +43,7 @@ const renderStepIcon = (step: Step, i: number) => {
   return (
     <div key={String(i)} className="flex flex-col items-center text-center relative">
       <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
-        {(step.icon && ICONS[step.icon]?.({ width: 48, height: 48 })) || (
+        {(step.icon && <Icon name={step.icon} width="48" height="48" />) || (
           <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
         )}
       </div>

package/src/TextBlock.fixture.tsx

@@ -0,0 +1,116 @@
+import { context } from './setup-fixture';
+import { TextBlock } from './TextBlock';
+import { Picture } from './types';
+
+const image: Picture = {
+  src: 'bank-card.png',
+  format: 'webp',
+  size: {
+    width: 48,
+    height: 48,
+  },
+};
+
+export default (
+  <div className="font-sans overflow-hidden">
+    <div>
+      <p>Private clients</p>
+      <div className="flex flex-col gap-6" data-theme="pc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="big"
+          image={image}
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="none"
+        />
+        <TextBlock
+          context={context}
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Business clients</p>
+      <div className="flex flex-col gap-6" data-theme="bc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Ecosystem own</p>
+      <div className="flex flex-col gap-6" data-theme="eo">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/TextBlock.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps, Picture } from './types';
+import { Img } from './Img';
+
+type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
+type TextBlockIconVersion = 'none' | 'small' | 'big';
+
+export interface TextBlockContent {
+  title?: string;
+  description?: string;
+  blockVersion?: TextBlockVersion;
+  iconVersion?: TextBlockIconVersion;
+  image?: Picture;
+}
+
+export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
+
+const textBlockStyleMaps: Record<
+  TextBlockVersion,
+  { background: string; icon: string; title: string; description: string }
+> = {
+  primary: {
+    background: 'bg-white',
+    icon: 'bg-primary-main text-white',
+    title: 'text-base',
+    description: 'text-secondary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    icon: 'bg-white text-primary-main',
+    title: 'text-white',
+    description: 'text-white',
+  },
+  'secondary-light': {
+    background: 'bg-primary-main/10',
+    icon: 'bg-primary-main text-white',
+    title: 'text-base',
+    description: 'text-secondary-text',
+  },
+};
+
+export const TextBlock = JSX<TextBlockProps>(
+  ({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    return (
+      <section
+        className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+      >
+        {iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion && iconVersion === 'big' ? renderImage(image) : null}
+        <div className="py-0.5">
+          {title && <div className={`font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>}
+          {description && (
+            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderIcon(className: string) {
+  return (
+    <div className={`pt-1.5 pr-4`}>
+      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+    </div>
+  );
+}
+
+function renderImage(image?: Picture) {
+  return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
+}

package/src/Tile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion, Picture, UniBlockProps } from './types';
+import type { BlockVersion, UniBlockProps } from './types';
 import { BaseTile } from './BaseTile';
 import type { BaseTileContent } from './BaseTile';
 import { getColSpan } from './utils/getColSpan';

package/src/common.css

@@ -2,27 +2,27 @@
 
 /* Private clients | Green */
 [data-theme='pc'] {
-  --color-primary-main: #42ab44;
-  --color-primary-hover: #248341;
-  --color-primary-active: #245f34;
-  --color-secondary-hover: #c5e2c6;
-  --color-secondary-active: #d8f2d9;
+  --color-primary-main: 66, 171, 68;
+  --color-primary-hover: 36, 131, 65;
+  --color-primary-active: 36, 95, 52;
+  --color-secondary-hover: 216, 242, 217;
+  --color-secondary-active: 197, 226, 198;
 }
 /* Business clients | Light-Green */
 [data-theme='bc'] {
-  --color-primary-main: #83b83e;
-  --color-primary-hover: #5c921d;
-  --color-primary-active: #3c5e10;
-  --color-secondary-hover: #e8f4d9;
-  --color-secondary-active: #d8e3ca;
+  --color-primary-main: 131, 184, 62;
+  --color-primary-hover: 92, 146, 29;
+  --color-primary-active: 60, 94, 16;
+  --color-secondary-hover: 232, 244, 217;
+  --color-secondary-active: 216, 227, 202;
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
-  --color-primary-main: #ddb63d;
-  --color-primary-hover: #bb9727;
-  --color-primary-active: #7e630c;
-  --color-secondary-hover: #f1ecdd;
-  --color-secondary-active: #e5dec7;
+  --color-primary-main: 221, 182, 61;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
 }
 
 @tailwind components;