@redneckz/wildless-cms-uni-blocks 0.11.1 → 0.11.3

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,23 +1,24 @@
+import type { CarouselCardContent } from './CarouselCardContent';
+import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { SizeVersion } from '../../model/SizeVersion';
+import { getCardWidth } from './getCardWidth';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Headline } from '../Headline/Headline';
-import type { CarouselCardContent } from './CarouselCardContent';
+import { style } from '../../utils/style';
+import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
-
-const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
-  normal: 'min-w-[970px]',
-  small: 'min-w-[355px]',
-};
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
     <section
-      className={`flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
+      className={style(
+        'flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]',
+        getCardWidth(className, carouselVersion),
+        className,
+      )}
     >
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
@@ -28,11 +29,14 @@ export const CarouselCard = JSX<CarouselCardProps>(
             className="!p-0"
             title={title}
             description={description}
-            headlineVersion="L"
+            headlineVersion={titleSize}
             align="text-left"
             version={version}
           />
-          {renderButtonsSection([button], { className: 'mt-14' })}
+          {renderButtonsSection([button], {
+            className: 'mt-14 sm:justify-center',
+            isVertical: true,
+          })}
         </div>
       </div>
     </section>

package/src/components/CarouselCard/getCardWidth.tsx

@@ -0,0 +1,16 @@
+import type { SizeVersion } from '../../model/SizeVersion';
+import { getColSpan } from '../../utils/getColSpan';
+
+const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
+  normal: 'min-w-[970px]',
+  small: 'min-w-[355px]',
+};
+
+export function getCardWidth(className = '', carouselVersion = 'normal') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 4) {
+    return 'w-[375px]';
+  } else {
+    return CARD_WIDTH_MAP[carouselVersion] as string;
+  }
+}

package/src/components/CarouselCard/titleSize.mobile.tsx

@@ -0,0 +1 @@
+export const titleSize = 'XS';

package/src/components/CarouselCard/titleSize.tsx

@@ -0,0 +1 @@
+export const titleSize = 'L';

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -63,9 +63,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
 const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
-    {image?.icon ? (
-      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} />
-    ) : null}
+    {image?.icon ? <Img className={`w-8 h-8 min-w-8 mb-5`} image={image} /> : null}
   </div>
 );
 

package/src/components/Footer/Contacts.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ContactInfo } from './FooterContent';
+import { Text } from '../../ui-kit/Text/Text';
+import type { ContactGroup, ContactInfo } from './FooterContent';
 
 export interface ContactsProps {
   className?: string;
-  items?: ContactInfo[];
+  items?: ContactGroup[];
   hasButton?: boolean;
 }
 
 export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
   <div className={className}>
-    {items?.length ? items.map(renderContact) : null}
+    {items?.length ? items.map(renderContactsGroup) : null}
     {hasButton ? (
       <Button
         version="primary"
@@ -24,16 +25,23 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
   </div>
 ));
 
-const renderContact = (item: ContactInfo, index: number) => {
-  const { type, text, description } = item;
-
-  return (
-    <div className="mb-4" key={String(index)}>
-      <div>{renderText(type, text)}</div>
-      <div className="mt-1 text-s-light text-secondary-text">{description}</div>
+const renderContactsGroup = (item: ContactGroup, i: number) => (
+  <div className="mb-6" key={String(i)}>
+    <div className="mb-4">
+      <Text size="text-l" font="font-medium">
+        {item?.title}
+      </Text>
     </div>
-  );
-};
+    <div>{item.items?.map(renderContact)}</div>
+  </div>
+);
+
+const renderContact = (item: ContactInfo, index: number) => (
+  <div className="mb-4" key={String(index)}>
+    <div>{renderText(item.type, item.text)}</div>
+    <div className="mt-1 text-s-light text-secondary-text">{item.description}</div>
+  </div>
+);
 
 const renderText = (type: ContactInfo['type'], text = '') => {
   switch (type) {

package/src/components/Footer/FooterContent.ts

@@ -1,7 +1,7 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Тип контакта
@@ -21,6 +21,15 @@ export type ContactInfo = DescriptionProps & {
   type?: ContactType;
 };
 
+/**
+ * @title Группа контактов
+ */
+export type ContactGroup = {
+  /** @title Имя */
+  title?: string;
+  items?: ContactInfo[];
+};
+
 /**
  * @title Пункт подменю
  */

package/src/components/Footer/FooterDataProps.ts

@@ -1,12 +1,12 @@
 import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactInfo, SubMenuItem } from './FooterContent';
+import type { ContactGroup, SubMenuItem } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
-  contacts?: ContactInfo[];
+  contacts?: ContactGroup[];
   socialMedia?: LinkCommonProps[];
   mobileApps?: LinkCommonProps[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии

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

@@ -5,4 +5,8 @@ import { Header } from './Header.mobile';
 export default {
   default: <Header />,
   transparent: <Header bgColor="transparent" />,
+  withTitle: <Header mobileHeaderType="withTitle" mobileTitle="Все кредитные карты" />,
+  backButton: (
+    <Header mobileHeaderType="backwardButton" mobileBackwardButtonTitle="Кредитные карты" />
+  ),
 };

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

@@ -1,78 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useRouter } from '../../hooks/useRouter';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
-import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
-import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { LinkList } from '../../ui-kit/LinkList/LinkList';
-import { RollupItem } from '../RollupItem/RollupItem';
-import { HeaderBurger } from './HeaderBurger';
-import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
+import type { HeaderContent } from './HeaderContent';
 
-export interface HeaderProps extends HeaderContent, UniBlockProps {}
+export interface HeaderMobileProps extends HeaderContent, UniBlockProps {}
 
 const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
   'bg-white': 'primary',
   transparent: 'transparent',
 };
 
-export const Header = JSX<HeaderProps>(
-  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-    const router = useRouter();
-
+export const Header = JSX<HeaderMobileProps>(
+  ({
+    bgColor = 'bg-white',
+    version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
+    mobileHeaderType = 'none',
+    ...rest
+  }) => {
     const fallback: Fallback | undefined = rest.options?.page?.fallback;
-    const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapData>(
+    const { logo, internetBankUrl } = useSWRResource<SitemapData>(
       projectSettings.SITEMAP || 'sitemap',
       fallback,
     );
 
-    const activeTopItem = topItems?.find(isTopItemActive(router));
-    const subItems = activeTopItem?.items;
-    const activeSubItem = findActiveSubItem(router)(subItems);
-    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-    const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
-
     return (
       <BlockWrapper tag="header" version={version} {...rest}>
-        <div className="container px-4 py-0 box-border">
-          <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
-          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
-            <div className="flex no-scrollbar horizontal-list h-full items-center">
-              {subItems?.map((_, i) => (
-                <HeaderItem
-                  key={String(i)}
-                  className="mr-8 whitespace-nowrap text-s"
-                  active={_ === activeSubItem}
-                  {..._}
-                />
-              ))}
-            </div>
-          </nav>
+        <div className="container px-4 py-1 box-border">
+          <HeaderTop
+            bgColor={bgColor}
+            logo={logo}
+            internetBankUrl={internetBankUrl}
+            version={version}
+            mobileHeaderType={mobileHeaderType}
+            {...rest}
+          />
         </div>
-        {burgerMenuShow ? (
-          <HeaderBurger
-            onClick={handleBurgerMenuShow}
-            burgerSubMenu={dispositions}
-            defaultLocation={defaultLocation}
-          >
-            <div className="list-none m-0 p-0">
-              {topItems?.map((item, i) => (
-                <RollupItem key={String(i)} label={item.text}>
-                  <LinkList className="mt-2.5" items={item.items} />
-                </RollupItem>
-              ))}
-            </div>
-          </HeaderBurger>
-        ) : null}
       </BlockWrapper>
     );
   },

package/src/components/Header/HeaderContent.ts

@@ -25,10 +25,24 @@ export type Logo = ImageContent & {
   title?: string;
 };
 
+/**
+ * @title Мобильный тип шапки
+ * @enumNames ["Не выбрано", "Название", "Кнопка возврата"]
+ */
+export type MobileHeaderType = 'none' | 'withTitle' | 'backwardButton';
+
+export interface MobileHeaderProps {
+  mobileHeaderType?: MobileHeaderType;
+  /** @title Название (мобильная версия) */
+  mobileTitle?: string;
+  /** @title Кнопка возврата (мобильная версия) */
+  mobileBackwardButtonTitle?: string;
+}
+
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
-export interface HeaderContent {
+export interface HeaderContent extends MobileHeaderProps {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */

package/src/components/Header/HeaderTop.tsx

@@ -1,34 +1,71 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LogoType } from '../../model/LogoType';
-import { Img } from '../../ui-kit/Img/Img';
 import { Logo } from '../../ui-kit/Logo/Logo';
+import { Button } from '../../ui-kit/Button/Button';
+import { style } from '../../utils/style';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { MobileHeaderProps, MobileHeaderType } from './HeaderContent';
+import { Img } from '../../ui-kit/Img/Img';
 
-export interface HeaderTopProps {
-  onClick: () => void;
+export interface HeaderTopProps extends MobileHeaderProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
+  internetBankUrl?: string;
+  version?: BlockVersion;
+  mobileHeaderType?: MobileHeaderType;
 }
 
-export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
-  <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
-    <div className="flex items-center">
-      <button
-        className="pl-0 pr-4 border-0 bg-transparent cursor-pointer"
-        onClick={onClick}
-        aria-label="Открыть меню"
-      >
-        <Img
-          image={{ icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }}
-          className="text-primary-text w-6 h-6"
-          width="24"
-          height="24"
-        />
-      </button>
-      <Logo className="mr-8" bgColor={bgColor} logo={logo} />
-    </div>
-    <button className="text-primary-main group-data-transparent:text-white group-data-transparent:hover:text-primary-hover text-s border-0 bg-transparent">
-      Войти
-    </button>
-  </div>
-));
+const BUTTON_STYLE = {
+  default: 'px-5 bg-main-divider rounded hover:text-primary-main',
+  transparent: 'text-white hover:text-primary-hover',
+};
+
+export const HeaderTop = JSX<HeaderTopProps>(
+  ({
+    bgColor,
+    logo,
+    internetBankUrl,
+    version,
+    mobileHeaderType,
+    mobileTitle,
+    mobileBackwardButtonTitle,
+  }) => {
+    const isTypeNone = mobileHeaderType === 'none';
+    const isTypeWithTitle = mobileHeaderType === 'withTitle';
+
+    return (
+      <div className="flex items-center justify-between w-full">
+        {isTypeNone || isTypeWithTitle ? (
+          <Logo bgColor={bgColor} logo={logo} showTitle={isTypeNone} />
+        ) : null}
+        {isTypeWithTitle ? mobileTitle : null}
+        {mobileHeaderType === 'backwardButton' ? (
+          <Button className="flex items-center text-l">
+            <Img
+              className="w-6 h-6"
+              image={{
+                icon: 'ChevronLeft',
+                iconVersion: 'black',
+              }}
+            />
+            {mobileBackwardButtonTitle}
+          </Button>
+        ) : null}
+        {internetBankUrl ? (
+          <Button
+            href={internetBankUrl}
+            ariaLabel="Войти"
+            target="_blank"
+            className={style(
+              'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+              BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+            )}
+          >
+            Войти
+          </Button>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/Headline/headlineVersionStyles.ts

@@ -13,32 +13,32 @@ export const headlineVersionStyles: Record<
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
-    descriptionStyle: 'mt-5',
+    descriptionStyle: 'mt-headline-xxl',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-4',
+    descriptionStyle: 'mt-headline-l',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-4',
+    descriptionStyle: 'mt-headline-l',
   },
   M: {
     title: { headingType: 'h3', as: 'h3' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-3',
+    descriptionStyle: 'mt-headline-m',
   },
   S: {
     title: { headingType: 'h4', as: 'h4' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-2',
+    descriptionStyle: 'mt-headline-s',
   },
   XS: {
     title: { headingType: 'h5', as: 'h5' },
     descriptionSize: 'text-l-light',
-    descriptionStyle: 'mt-2',
+    descriptionStyle: 'mt-headline-s',
   },
 };
 

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

@@ -0,0 +1,122 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { PictureText } from './PictureText';
+import type { PictureTextContent } from './PictureTextContent';
+
+const imageInsurance: Picture = {
+  src: 'insurance.png',
+  format: 'webp',
+  alt: 'Страховые риски и продукты',
+  size: {
+    width: 335,
+  },
+  sources: [
+    {
+      src: 'insurance.png',
+      format: 'png',
+    },
+  ],
+};
+
+const imageMonitor: Picture = {
+  src: 'monitor.png',
+  format: 'webp',
+  alt: 'Управление несколькими счетами',
+  size: {
+    width: 420,
+  },
+};
+export const PICTURE_TEXT: PictureTextContent = {
+  title: 'Страховые риски и продукты',
+  description: 'Покрываемые риски программы «Страхование от потери работы»',
+  benefits: [
+    {
+      type: 'default',
+      label: 'Кредит по одному документу',
+      description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
+      icon: { icon: 'DocumentTextIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Кредит на общих условиях',
+      description: 'До 5 млн ₽ на общих условиях получения кредита',
+      icon: { icon: 'DocumentTextIcon', iconVersion: 'white' },
+    },
+  ],
+};
+
+export const INSURANCE_TEXT: PictureTextContent = {
+  title: 'Страховые риски и продукты',
+  description: 'Покрываемые риски программы «Защита вас и ваших близких»',
+  benefits: [
+    {
+      type: 'default',
+      label: 'Телесное повреждение',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Госпитализация застрахованного',
+      description: 'Описание',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Сокращение численности работников организации и другой текст для теста длинны текста',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Смерть застрахованного',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+  ],
+  image: imageInsurance,
+  sum: 500000,
+};
+
+export const BENEFITS_HTML_TEXT: PictureTextContent = {
+  title: '',
+  benefits: [
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты  контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+  ],
+
+  image: imageMonitor,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...PICTURE_TEXT} />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...PICTURE_TEXT} version="secondary" />
+    </div>
+  ),
+  'insurance sum': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...INSURANCE_TEXT} />
+    </div>
+  ),
+  'insurance monthPay': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...INSURANCE_TEXT} monthLimit={25000} />
+    </div>
+  ),
+  'benefits as html': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...BENEFITS_HTML_TEXT} />
+    </div>
+  ),
+};

package/src/components/PictureText/PictureText.tsx

@@ -2,10 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
 import { renderBenefit } from './renderBenefit';
+import { style } from '../../utils/style';
+import { positionStyle } from './positionStyle';
+import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -22,11 +24,17 @@ export const PictureText = JSX<PictureTextProps>(
     version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper className={`relative py-12 px-24 ${className}`} version={version} {...rest}>
-      <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-      <div className={'flex justify-center gap-[122px] mt-[30px]'}>
+    <BlockWrapper className={style('relative p-default', className)} version={version} {...rest}>
+      <Headline
+        className="!p-0"
+        title={title}
+        description={description}
+        headlineVersion="M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
+        align="text-left"
+      />
+      <div className={style('flex mt-6', positionStyle)}>
         {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
-        <div className="w-[558px] m-auto">
+        <div>
           {benefits?.length ? (
             <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
           ) : null}
@@ -36,25 +44,3 @@ export const PictureText = JSX<PictureTextProps>(
     </BlockWrapper>
   ),
 );
-
-function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
-  return sum || monthLimit ? (
-    <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">
-      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {Number(monthLimit) > 0
-        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-        : null}
-    </div>
-  ) : null;
-}
-
-function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
-  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-
-  return (
-    <div className={`flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`}>
-      <span className="text-secondary-text text-l-light">{title}</span>
-      <span className="text-primary-main text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
-    </div>
-  );
-}

package/src/components/PictureText/positionStyle.mobile.tsx

@@ -0,0 +1 @@
+export const positionStyle = 'justify-end flex-col-reverse gap-4';

package/src/components/PictureText/positionStyle.tsx

@@ -0,0 +1 @@
+export const positionStyle = 'justify-center items-center gap-32';