@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.12

package/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -21,8 +21,8 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex justify-between gap-4 mb-6">
-      <div className="max-w-[396px] w-1/2">
+    <div className="flex flex-col sm:flex-row gap-m order-1">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}
           fieldValue="code"
@@ -32,7 +32,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
           label="Регион"
         />
       </div>
-      <div className="max-w-[396px] w-1/2">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={branches}
           fieldValue="branchCode"

package/src/components/SafeDepositRental/RentalPeriod.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
 
 const ITEMS = ['От 1 дня', 'До 365 дней'];
 const MIN = 1;
@@ -11,8 +12,10 @@ interface RentalPeriodProps {
 }
 
 export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
-  <div className="mb-6">
-    <span className="block text-m font-light mb-1">Срок аренды</span>
+  <div className="order-1">
+    <Text size="text-m" font="font-light">
+      Срок аренды
+    </Text>
     <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
   </div>
 ));

package/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -21,8 +21,8 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex justify-between mb-6">
-        <div className="mr-4 w-full">
+      <div className="flex flex-col sm:flex-row gap-4 order-1">
+        <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}
             fieldLabel="volume"
@@ -32,7 +32,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
             placeholder="Выберите размер"
           />
         </div>
-        <div className="w-full">
+        <div className="flex-1 min-w-0">
           <WrapperSelect
             data={safeBoxCases}
             fieldLabel="safeBoxCasesSize"

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

@@ -0,0 +1,15 @@
+import '../../setup-fixture';
+
+import { SafeDepositRental } from './SafeDepositRental';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 mb-1">
+      <SafeDepositRental
+        className="col-span-12"
+        footnote="Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
+          или процедуры ипотечной сделки"
+      />
+    </div>
+  ),
+};

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -43,13 +43,13 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
 
     return (
       <BlockWrapper className={className} defaultPadding="" {...rest}>
-        <div className="px-8 py-12">
+        <div className="p-4xl">
           {title ? (
             <Heading
               title={title}
               headingType="h3"
               as="h2"
-              className="text-primary-text mb-2.5 text-center"
+              className="text-primary-text mb-s text-center"
             />
           ) : null}
           <SafeDepositRentalForm

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { RegionsAndBranches } from './RegionsAndBranches';
-import { RenderRadioButtons } from './RenderRadioButtons';
+import { RadioButtons } from './RadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
 import { Text } from '../../ui-kit/Text/Text';
@@ -33,7 +33,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     onClick,
   }) => {
     return (
-      <div className="flex-1 mr-9">
+      <div className="contents sm:block flex-1 space-y-xl">
         <RegionsAndBranches
           regions={regions}
           selectedRegion={selectedRegion}
@@ -51,12 +51,14 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
           selectedBoxSize={selectedBoxSize}
           onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
         />
-        <Text size="text-l" font="font-light" color="text-secondary-text">
-          Тип договора
-        </Text>
-        <div className="flex justify-between items-center mt-5">
-          <RenderRadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={onClick} />
+        <div className="order-4">
+          <Text size="text-l" font="font-light" color="text-secondary-text">
+            Тип договора
+          </Text>
+        </div>
+        <div className="contents sm:flex justify-between items-center">
+          <RadioButtons className="mb-4 sm:mb-0" />
+          <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
         </div>
       </div>
     );

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -37,7 +37,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
   const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
-    <div className="flex justify-between align-top mb-6">
+    <div className="flex flex-col sm:flex-row gap-x-9 align-top mb-6">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -9,29 +9,32 @@ export interface SafeDepositRentalTotalProps {
 
 export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days, tariffs = [] }) => {
   const price = calculatePrice(days, tariffs);
+  const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
 
   return (
-    <div className="flex flex-col justify-between">
-      <div className="flex">
-        {renderTotal('Аренда за', days, 'mr-11')}
+    <div className="contents sm:flex flex-col justify-between order-2">
+      <div className="flex flex-col sm:flex-row gap-x-11 gap-y-7 order-5 sm:order-none py-7 sm:py-0 border-t border-main-divider sm:border-none">
+        {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
-        <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" />
-
-        <span className="text-s font-light text-white opacity-80 mt-2 inline-block">
-          На рисунки изображена пачка<br></br> листов формата А4
+      <span className="sm:hidden order-3 mb-2 text-s-light text-secondary-text">
+        {imageDescription}
+      </span>
+      <div className="flex flex-col items-center gap-3 order-3 sm:order-none mb-6 sm:mb-0 bg-primary-main py-3 sm:p-8 text-center">
+        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-[246px]" />
+        <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
+          {imageDescription}
         </span>
       </div>
     </div>
   );
 });
 
-const renderTotal = (label: string, total: string | number, className = '') => {
+const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className={className}>
-      <div className="text-m font-light text-secondary-text mb-1">{label}</div>
-      <span className="text-h3 text-primary-text">{total}</span>
+    <div className="flex justify-between items-center gap-y-1 sm:flex-col sm:items-start">
+      <div className="text-l font-light text-secondary-text">{label}</div>
+      <span className="text-l sm:text-h3 text-primary-text">{total}</span>
     </div>
   );
 };

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -8,11 +8,11 @@ import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
 import type { DefaultStep, Step } from './StepsBlockContent';
+import { StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 import { style } from '../../utils/style';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { StepsBlockContent } from './StepsBlockContent';
 import { UniBlockProps } from '../../model/JSXBlock';
 
 type StepIconVersion = Record<'icon' | 'image', string>;
@@ -24,7 +24,7 @@ const STEPS_SIZE_MAP: Record<SizeVersion, StepIconVersion> = {
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   normal: '',
-  small: 'min-h-12',
+  small: 'min-h-6xl',
 };
 
 const styleMap = STEPS_BLOCK_STYLE;
@@ -43,8 +43,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={style('box-border flex flex-col gap-2', className)}
-      defaultPadding="p-default"
+      className={style('box-border flex flex-col gap-xs', className)}
+      defaultPadding="p-6xl"
       version={version}
       {...rest}
     >
@@ -125,7 +125,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       className={style(
         iconAreaSize,
         containerStyle,
-        'z-10 mr-3 flex justify-center content-center',
+        'z-10 mr-s flex justify-center content-center',
       )}
     >
       <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">

package/src/components/StepsBlock/StepsBlock.tsx

@@ -17,7 +17,7 @@ export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 const getLineOpacity = (showLines: boolean) => (showLines ? '' : 'opacity-0');
 
-const getPaddingX = (steps: number) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
+const getPaddingX = (steps: number) => (steps < 5 ? 'px-24' : 'px-16');
 
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
@@ -42,32 +42,28 @@ export const StepsBlock = JSX<StepsBlockProps>(
 
     return (
       <BlockWrapper
-        className={style('box-border flex flex-col items-center overflow-hidden', className)}
-        defaultPadding="p-default"
+        className={style(
+          'box-border flex flex-col items-center overflow-hidden gap-y-3xl',
+          className,
+        )}
+        defaultPadding="p-6xl"
         version={version}
         {...rest}
       >
-        {title ? (
-          <Heading headingType="h4" className="max-w-[752px] text-center mb-9" title={title} />
-        ) : null}
+        {title ? <Heading headingType="h4" className="text-center" title={title} /> : null}
         {steps?.length ? (
-          <div className="box-border">
+          <div className="box-border space-y-lg">
             <div className={style('flex items-center', paddingX)}>
               {joinList(
                 <div className={style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity)} />,
               )(steps.map(renderStepIcon(styleMap, size, stepVersion)))}
             </div>
-            <div
-              className={style(
-                'flex justify-between mt-4',
-                shortGaps ? 'gap-x-3' : 'gap-x-[101px]',
-              )}
-            >
+            <div className={style('flex justify-between', shortGaps ? 'gap-x-3' : 'gap-x-20')}>
               {steps.map(renderStep({ styleMap, isMainButton, version }))}
             </div>
           </div>
         ) : null}
-        {renderButtonsSection(buttons, { className: 'mt-8' })}
+        {renderButtonsSection(buttons)}
       </BlockWrapper>
     );
   },
@@ -76,16 +72,15 @@ export const StepsBlock = JSX<StepsBlockProps>(
 const renderStepIcon =
   (styleMap: StyleType, size: string, stepVersion: BlockVersion) =>
   ({ icon }: Step, i: number) => {
-    const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
-    const stepVersionIconTextStyles =
-      stepVersion === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
-
     const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
 
     return (
       <BlockWrapper
         key={String(i)}
-        className={`${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`}
+        defaultPadding=""
+        className={`${getIconSizeStyle(
+          size,
+        )} flex justify-center items-center text-center rounded-full box-border z-10`}
         version={stepVersion}
       >
         {checkCanRenderIcon(icon) ? (
@@ -98,7 +93,7 @@ const renderStepIcon =
           <span
             className={style(
               'text-h4',
-              stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles,
+              stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion),
             )}
           >
             {i + 1}
@@ -107,3 +102,8 @@ const renderStepIcon =
       </BlockWrapper>
     );
   };
+
+const getIconSizeStyle = (size: string) => (size === 'normal' ? 'h-24 w-24' : 'h-16 w-16');
+
+const getIconTextStyle = (version: BlockVersion) =>
+  version === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';

package/src/components/StepsBlock/renderStep.tsx

@@ -48,20 +48,20 @@ const renderDefaultStep =
       <div
         key={String(i)}
         className={style(
-          'relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden',
+          'relative flex flex-col items-center text-center justify-between whitespace-pre-line overflow-hidden space-y-3xl',
           getContainerWidth(arr.length),
         )}
       >
-        <div className={style(button?.text ? 'mb-8' : '', 'text-center')}>
+        <div className="text-center space-y-xs">
           {label ? (
-            <div className="mb-2">
+            <div>
               <Text size="text-h6">{label}</Text>
             </div>
           ) : null}
-          <div className="flex flex-col items-center">
+          <div className="flex flex-col items-center gap-3xs">
             {description ? <div className={styleMap.description}>{description}</div> : null}
             <List
-              className={style(description ? `${styleMap.description} mt-0.5` : 'text-h6')}
+              className={styleMap.description}
               items={items}
               listItemSize="M"
               isDotted={isDotted}
@@ -70,7 +70,7 @@ const renderDefaultStep =
         </div>
         {button?.text && !isMainButton ? (
           <Button
-            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            className="box-border py-s w-full max-w-60 mt-auto"
             version={version as ButtonVersion}
             {...button}
           >
@@ -81,4 +81,4 @@ const renderDefaultStep =
     );
   };
 
-const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[210px]');
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[200px]');

package/src/components/Tabs/ScrollableTabs.tsx

@@ -19,7 +19,6 @@ export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: tabs?.length || 0,
-    isCyclic: false,
   });
 
   return (

package/src/components/Tabs/renderGroupTab.tsx

@@ -4,7 +4,7 @@ import { getTabClassName } from './tabItemClasses';
 import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
-  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-xs flex justify-center items-center';
 const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
 const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 

package/src/components/TariffsTable/EmbeddableCellData.mobile.tsx

@@ -20,7 +20,7 @@ const renderButtonsCellData = ({ buttons }: ButtonContent) =>
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
   <div>
-    {label ? <div className="mb-2">{label}</div> : null}
+    {label ? <div className="mb-xs">{label}</div> : null}
     {description ? <div className="text-s text-secondary-text">{description}</div> : null}
   </div>
 );

package/src/components/TariffsTable/TableTileHeader.tsx

@@ -4,7 +4,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import type { TariffsTableRowHeader } from './TariffsTableContent';
 
 export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
-  <div className="mb-2">
+  <div className="mb-xs">
     {title ? (
       <Text size="text-l" font="font-light">
         {title}

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -27,7 +27,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <section
-        className={`p-default bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
+        className={`p-6xl space-3xl bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
       >
         <Headline
           title={title}
@@ -35,7 +35,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
           headlineVersion="M"
           align="text-left"
           isPadding={false}
-          className="mb-8"
         />
         {orientation === 'vertical' ? (
           <TariffsTableVertical tiles={tiles} {...rest} />

package/src/components/TariffsTable/TariffsTable.tsx

@@ -7,7 +7,7 @@ import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { Headline } from '../Headline/Headline';
 import { style } from '../../utils/style';
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import type { TariffsTableContent } from './TariffsTableContent';
@@ -47,12 +47,11 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={style('overflow-hidden relative', className)}
-        defaultPadding={style('p-default', itemCount > 1 ? 'pr-0' : '')}
+        className={style('overflow-hidden relative space-y-xl', className)}
+        defaultPadding="p-6xl"
         {...rest}
       >
-        {renderTitle({ title, description })}
-        {renderDescription(description)}
+        <Headline title={title} description={description} headlineVersion="M" isPadding={false} />
         {hiddenRowsNum > 0 ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
@@ -71,20 +70,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
   },
 );
 
-function renderTitle({ title, description }: { title?: string; description?: string }) {
-  return title ? (
-    <Heading
-      headingType="h3"
-      className={`text-center ${description ? 'mb-2.5' : 'mb-8'}`}
-      title={title}
-    />
-  ) : null;
-}
-
-function renderDescription(description?: string) {
-  return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
-}
-
 const Wrapper = JSX<WrapperProps>(({ children, controls }) => {
   const { isScrollAvailable } = controls;
 
@@ -94,12 +79,12 @@ const Wrapper = JSX<WrapperProps>(({ children, controls }) => {
         {children}
         {renderArrows({
           ...controls,
-          btnClass: ['top-[108px]', 'top-[44px]'],
+          btnClass: ['top-28', 'top-11'],
           className: 'right-7',
         })}
       </div>
       {isScrollAvailable ? (
-        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        <div className="absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" />
       ) : null}
     </div>
   );

package/src/components/TariffsTable/TariffsTableRenderCell.tsx

@@ -49,7 +49,7 @@ export const renderCellInner =
     return (
       <div
         key={String(i)}
-        className={cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`}
+        className={cell?.tableCellType === 'Table' ? 'ml-5xl' : `first:pt-lg last:pb-lg pl-5xl`}
       >
         {i > 0 ? <div className="h-5" /> : null}
         {renderCell({

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -35,10 +35,10 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         tableInner={tableInner}
         {...rest}
       >
-        <div className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
+        <div className={`text-s py-lg ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
-              <Img className="mr-3.5 max-w-6" image={header.icon} width="24" height="24" />
+              <Img className="mr-m max-w-6" image={header.icon} width="24" height="24" />
             ) : null}
             {header?.title ? <div className="text-m font-light">{header?.title}</div> : null}
           </div>

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -14,7 +14,7 @@ export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ tile, ...r
     <TableTileHeader title={tile?.header?.title} />
     {tile?.data?.length
       ? tile.data.map((cell, i) => (
-          <div key={String(i)} className="mb-2">
+          <div key={String(i)} className="mb-xs">
             {renderCell(cell, rest)}
           </div>
         ))

package/src/components/Tile/Tile.tsx

@@ -11,7 +11,7 @@ export const Tile = JSX<TileProps>(
     <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
-        defaultPadding="p-m"
+        defaultPadding="p-xl"
         padding={padding}
         headlineVersion={headlineVersion}
         listItemSize={listItemSize}

package/src/components/VerticalLayout/VerticalLayout.example.json

@@ -4,7 +4,6 @@
     "isTheme": false,
     "isPadding": false,
     "isInnerPadding": true,
-    "align": "stretch",
     "gap": ""
   },
   "style": ["col-span-12"],

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

@@ -45,7 +45,6 @@ export default {
       <VerticalLayout
         className="col-span-12"
         gap="XL"
-        align="left"
         version="secondary"
         isTheme={false}
         block={{
@@ -60,7 +59,6 @@ export default {
       <VerticalLayout
         className="col-span-12"
         gap="M"
-        align="left"
         version="primary"
         isPadding={true}
         isInnerPadding={false}
@@ -102,7 +100,6 @@ export default {
   rollup: (
     <div className="container grid grid-cols-12">
       <VerticalLayout
-        align="left"
         className="col-span-12"
         version="primary"
         isPadding={true}

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -24,7 +24,6 @@ const options = {
 const carouselProductCard = {
   content: {
     headlineSmallVersion: 'L_R',
-    align: 'left',
     isDotted: true,
     title: 'Новость 1',
     version: 'primary',
@@ -56,11 +55,10 @@ export default {
       />
     </div>
   ),
-  'white center': (
+  white: (
     <div className="container grid grid-cols-12">
       <VerticalLayout
         className="col-span-12"
-        align="center"
         version="primary"
         block={{
           type: 'VerticalLayout',
@@ -73,11 +71,10 @@ export default {
       />
     </div>
   ),
-  'secondary right': (
+  secondary: (
     <div className="container grid grid-cols-12">
       <VerticalLayout
         className="col-span-12"
-        align="right"
         version="secondary"
         isTheme={false}
         block={{
@@ -91,12 +88,11 @@ export default {
       />
     </div>
   ),
-  'secondary gap-XL': (
+  'secondary gap-5xl': (
     <div className="container grid grid-cols-12">
       <VerticalLayout
         className="col-span-12"
         gap="XL"
-        align="left"
         version="secondary"
         isTheme={false}
         block={{
@@ -113,7 +109,6 @@ export default {
   rollup: (
     <div className="container grid grid-cols-12">
       <VerticalLayout
-        align="left"
         className="col-span-12"
         version="primary"
         isPadding={true}
@@ -161,7 +156,6 @@ export default {
     <div className="container grid grid-cols-12">
       <VerticalLayout
         gap="XS"
-        align="left"
         version="transparent"
         className="col-span-12"
         block={{
@@ -202,7 +196,6 @@ export default {
   carousel: (
     <div className="container grid grid-cols-12">
       <VerticalLayout
-        align="center"
         className="col-span-12"
         version="primary"
         gap="XL"