@redneckz/wildless-cms-uni-blocks 0.2.115 → 0.2.116

package/lib/ui-kit/SwipeListControl/SwipeListControlDots.d.ts

@@ -0,0 +1,6 @@
+export interface SwipeListControlDotsProps {
+    activeIndex: number;
+    indexFraction: number;
+    showDots?: boolean;
+}
+export declare const SwipeListControlDots: (props: import("@redneckz/uni-jsx").PropsWithChildren<SwipeListControlDotsProps, any>, context?: any) => any;

package/lib/ui-kit/SwipeListControl/SwipeListControlDots.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
+const BASE_DOT_WIDTH = 6;
+const ACTIVE_DOT_WIDTH_CHANGE = 16;
+const BASE_DOT_OPACITY = 0.3;
+const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+export const SwipeListControlDots = JSX(({ children, activeIndex, indexFraction, showDots }) => {
+    return showDots && children?.length ? (_jsx("div", { className: "flex gap-2 mx-auto mt-[22px] w-fit", children: children?.map((_, idx) => (_jsx("div", { className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
+});
+const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
+    if (currentIdx < activeIndex || currentIdx > activeIndex + 1)
+        return null;
+    const leftIndexMod = 1 - indexFraction;
+    const rightIndexMod = indexFraction;
+    return currentIdx === activeIndex
+        ? {
+            opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
+            width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
+        }
+        : {
+            opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
+            width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
+        };
+};
+//# sourceMappingURL=SwipeListControlDots.js.map

package/lib/ui-kit/SwipeListControl/SwipeListControlDots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeListControlDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,MAAM,UAAU,GAAG,yEAAyE,CAAC;AAC7F,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAQtC,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrD,OAAO,QAAQ,IAAI,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CACpC,cAAK,SAAS,EAAC,oCAAoC,YAChD,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzB,cAEE,SAAS,EAAE,GAAG,UAAU,EAAE,EAC1B,KAAK,EAAE,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,aAAa,CAAC,yBAF/C,MAAM,CAAC,GAAG,CAAC,CAIhB,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,UAAkB,EAClB,WAAmB,EACnB,aAAqB,EACU,EAAE;IACjC,IAAI,UAAU,GAAG,WAAW,IAAI,UAAU,GAAG,WAAW,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAE1E,MAAM,YAAY,GAAG,CAAC,GAAG,aAAa,CAAC;IACvC,MAAM,aAAa,GAAG,aAAa,CAAC;IAEpC,OAAO,UAAU,KAAK,WAAW;QAC/B,CAAC,CAAC;YACE,OAAO,EAAE,GAAG,gBAAgB,GAAG,yBAAyB,GAAG,YAAY,EAAE;YACzE,KAAK,EAAE,GAAG,cAAc,GAAG,uBAAuB,GAAG,YAAY,IAAI;SACtE;QACH,CAAC,CAAC;YACE,OAAO,EAAE,GAAG,gBAAgB,GAAG,yBAAyB,GAAG,aAAa,EAAE;YAC1E,KAAK,EAAE,GAAG,cAAc,GAAG,uBAAuB,GAAG,aAAa,IAAI;SACvE,CAAC;AACR,CAAC,CAAC"}

package/lib/ui-kit/SwipeListControl/SwipeListControlItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @title Элемент списка
+ */
+export interface SwipeListControlItemProps {
+    className?: string;
+    style?: Record<string, string>;
+    'aria-current'?: boolean;
+}
+export declare const SwipeListControlItem: (props: import("@redneckz/uni-jsx").PropsWithChildren<SwipeListControlItemProps, any>, context?: any) => any;

package/lib/ui-kit/SwipeListControl/SwipeListControlItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const SwipeListControlItem = JSX(({ className = '', children, ...rest }) => {
+    return (_jsx("div", { className: `snap-center snap-always min-w-full ${className}`, role: "listitem", ...rest, children: children }));
+});
+//# sourceMappingURL=SwipeListControlItem.js.map

package/lib/ui-kit/SwipeListControl/SwipeListControlItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeListControlItem.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAWxC,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACxC,OAAO,CACL,cAAK,SAAS,EAAE,sCAAsC,SAAS,EAAE,EAAE,IAAI,EAAC,UAAU,KAAK,IAAI,YACxF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/SwipeListControl/SwipeListControlList.d.ts

@@ -0,0 +1,10 @@
+import { SwipeContainer } from './SwipeListControlProps';
+/**
+ * @title Список
+ */
+export interface SwipeListControlListProps extends SwipeContainer {
+    className?: string;
+    activeIndex: number;
+    onScroll?: (e: UIEvent) => void;
+}
+export declare const SwipeListControlList: (props: import("@redneckz/uni-jsx").PropsWithChildren<SwipeListControlListProps, any>, context?: any) => any;

package/lib/ui-kit/SwipeListControl/SwipeListControlList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListControlItem } from './SwipeListControlItem.js';
+import { getContainerStyle } from './utils/getContainerStyle.js';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants.js';
+export const SwipeListControlList = JSX(({ className = '', children, activeIndex, onScroll, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, }) => {
+    return (_jsx("div", { className: `overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", onScroll: onScroll, children: children?.length ? (children?.map((child, idx) => (_jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": Boolean(activeIndex === idx), children: child }, String(idx))))) : (_jsx(SwipeListControlItem, { children: children })) }));
+});
+//# sourceMappingURL=SwipeListControlList.js.map

package/lib/ui-kit/SwipeListControl/SwipeListControlList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeListControlList.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAY3D,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EACC,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,GAAG,WAAW,EACjB,OAAO,GAAG,eAAe,GAC1B,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,mDAAmD,SAAS,EAAE,EACzE,KAAK,EAAE,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,EACzD,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAClB,QAAQ,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,KAAC,oBAAoB,IAEnB,KAAK,EAAE,iBAAiB,CAAC,OAAO,GAAG,CAAC,CAAC,kBACvB,OAAO,CAAC,WAAW,KAAK,GAAG,CAAC,YAEzC,KAAK,IAJD,MAAM,CAAC,GAAG,CAAC,CAKK,CACxB,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,cAAE,QAAQ,GAAwB,CACxD,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/SwipeListControl/SwipeListControlProps.d.ts

@@ -0,0 +1,17 @@
+import type { UniBlockProps } from '../../types';
+/**
+ * @title Контейнер
+ */
+export interface SwipeContainer {
+    /** @title Расстояние между элементами */
+    gap?: number;
+    /** @title Отступы */
+    padding?: number;
+}
+/**
+ * @title Swipe-контроллер
+ */
+export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
+    /** @title Точки-индикаторы */
+    showDots?: boolean;
+}

package/lib/ui-kit/SwipeListControl/SwipeListControlProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SwipeListControlProps.js.map

package/lib/ui-kit/SwipeListControl/SwipeListControlProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeListControlProps.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlProps.ts"],"names":[],"mappings":""}

package/lib/ui-kit/SwipeListControl/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_GAP = 14;
+export declare const DEFAULT_PADDING = 16;

package/lib/ui-kit/SwipeListControl/constants.js

@@ -0,0 +1,10 @@
+// column-gap between children of SwipeListControl container
+export const DEFAULT_GAP = 14;
+/*
+  Horizontal padding used on a container above SwipeListControl.
+  Same value used on a SwipeListControlChildren container to compensate it
+  and get rid of a clipping effect caused by overflow: hidden.
+ */
+export const DEFAULT_PADDING = 16;
+// Classes used to compensate outer container padding, so that child elements won't be clipped
+//# sourceMappingURL=constants.js.map

package/lib/ui-kit/SwipeListControl/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/constants.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;AAC9B;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,CAAC;AAElC,8FAA8F"}

package/lib/ui-kit/SwipeListControl/utils/getContainerStyle.d.ts

@@ -0,0 +1 @@
+export declare const getContainerStyle: (padding: number) => Record<string, string>;

package/lib/ui-kit/SwipeListControl/utils/getContainerStyle.js

@@ -0,0 +1,10 @@
+// styles used to compensate outer container padding to get rid of clipping effect
+export const getContainerStyle = (padding) => {
+    return {
+        marginLeft: `${-padding}px`,
+        marginRight: `${-padding}px`,
+        paddingLeft: `${padding}px`,
+        paddingRight: `${padding}px`,
+    };
+};
+//# sourceMappingURL=getContainerStyle.js.map

package/lib/ui-kit/SwipeListControl/utils/getContainerStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getContainerStyle.js","sourceRoot":"","sources":["../../../../src/ui-kit/SwipeListControl/utils/getContainerStyle.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAA0B,EAAE;IAC3E,OAAO;QACL,UAAU,EAAE,GAAG,CAAC,OAAO,IAAI;QAC3B,WAAW,EAAE,GAAG,CAAC,OAAO,IAAI;QAC5B,WAAW,EAAE,GAAG,OAAO,IAAI;QAC3B,YAAY,EAAE,GAAG,OAAO,IAAI;KAC7B,CAAC;AACJ,CAAC,CAAC"}

package/lib/ui-kit/SwipeListControl/utils/getIndexParts.d.ts

@@ -0,0 +1,7 @@
+export declare const getIndexParts: (scrollLeft: number, scrollPoints: [
+    number,
+    number
+][]) => {
+    index: number;
+    fraction: number;
+};

package/lib/ui-kit/SwipeListControl/utils/getIndexParts.js

@@ -0,0 +1,15 @@
+/*
+  Returns object containing whole index part, and it's decimal part for a given
+  scrollLeft value of a container and an array of tuple containing values of a
+  start and end boundaries of a scrollable child, right boundary non-inclusive.
+  Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
+ */
+export const getIndexParts = (scrollLeft, scrollPoints) => {
+    const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
+    if (index < 0)
+        return { index, fraction: 0 };
+    const [start, end] = scrollPoints[index];
+    const fraction = (scrollLeft - start) / (end - start);
+    return { index, fraction };
+};
+//# sourceMappingURL=getIndexParts.js.map

package/lib/ui-kit/SwipeListControl/utils/getIndexParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getIndexParts.js","sourceRoot":"","sources":["../../../../src/ui-kit/SwipeListControl/utils/getIndexParts.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,UAAkB,EAClB,YAAgC,EAIhC,EAAE;IACF,MAAM,KAAK,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,UAAU,IAAI,UAAU,GAAG,GAAG,CAAC,CAAC;IAChG,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;IAE7C,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC;IACtD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC7B,CAAC,CAAC"}

package/lib/ui-kit/SwipeListControl/utils/getScrollPoints.d.ts

@@ -0,0 +1,8 @@
+export declare const getScrollPoints: ({ gap, padding, clientWidth, scrollWidth, childElementCount, itemWidth, }: {
+    gap: number;
+    padding: number;
+    clientWidth: number;
+    scrollWidth: number;
+    childElementCount: number;
+    itemWidth: number;
+}) => [number, number][];

package/lib/ui-kit/SwipeListControl/utils/getScrollPoints.js

@@ -0,0 +1,24 @@
+/*
+ Calculates array of breakpoints for each scrollable element in container.
+ Returns array of tuples consisting of [start, end] boundary scrollLeft values.
+*/
+export const getScrollPoints = ({ gap, padding, clientWidth, scrollWidth, childElementCount, itemWidth, }) => {
+    const scrollItemWidth = itemWidth + gap;
+    const scrollableDistance = scrollWidth - clientWidth;
+    const edgeScrollDistance = clientWidth - gap - padding;
+    const lastScrollableIdx = childElementCount - 2;
+    const scrollPoints = new Array(childElementCount)
+        .fill(0)
+        .map((_, idx) => idx === 0 || idx === lastScrollableIdx
+        ? [
+            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
+            idx > 0 ? scrollableDistance : edgeScrollDistance,
+        ]
+        : [
+            (idx - 1) * scrollItemWidth + edgeScrollDistance,
+            idx * scrollItemWidth + edgeScrollDistance,
+        ]);
+    scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
+    return scrollPoints;
+};
+//# sourceMappingURL=getScrollPoints.js.map

package/lib/ui-kit/SwipeListControl/utils/getScrollPoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScrollPoints.js","sourceRoot":"","sources":["../../../../src/ui-kit/SwipeListControl/utils/getScrollPoints.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,GAAG,EACH,OAAO,EACP,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,SAAS,GAQV,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,SAAS,GAAG,GAAG,CAAC;IACxC,MAAM,kBAAkB,GAAG,WAAW,GAAG,WAAW,CAAC;IACrD,MAAM,kBAAkB,GAAG,WAAW,GAAG,GAAG,GAAG,OAAO,CAAC;IAEvD,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,CAAC,CAAC;IAChD,MAAM,YAAY,GAAuB,IAAI,KAAK,CAAC,iBAAiB,CAAC;SAClE,IAAI,CAAC,CAAC,CAAC;SACP,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CACd,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,iBAAiB;QACpC,CAAC,CAAC;YACE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;YACrD,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB;SAClD;QACH,CAAC,CAAC;YACE,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,eAAe,GAAG,kBAAkB;YAChD,GAAG,GAAG,eAAe,GAAG,kBAAkB;SAC3C,CACN,CAAC;IACJ,YAAY,CAAC,iBAAiB,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;IAExE,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC"}

package/mobile/bundle/bundle.umd.js

@@ -231,19 +231,19 @@
       return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
   };
 
-  const SizeTableClass = {
-      XL: 'text-m-title',
-      L: 'text-m-title',
-      M: 'text-m-title-md',
-      S: 'text-m-title-xs',
-      '2XS': 'text-m-title-xs',
-      '3XS': 'text-m-title-xs',
+  const HeadingClass = {
+      h1: 'text-m-title',
+      h2: 'text-m-title',
+      h3: 'text-m-title-md',
+      h4: 'text-m-title-xs',
+      h5: 'text-m-title-xs',
+      h6: 'text-m-title-xs',
   };
-  const Title = JSX(({ size = 'L', className, children, ...rest }) => {
-      const Tag = size === 'XL' || size === 'L' ? 'h1' : 'h2';
-      return (jsx(Tag, { className: getClasses(SizeTableClass[size], className), ...rest, children: children }));
+  const Heading = JSX((props) => {
+      const { className, type, text } = props;
+      const Tag = type;
+      return (jsx(Tag, { className: `font-sans font-medium ${HeadingClass[type]} ${className || ''}`, children: text }));
   });
-  const getClasses = (...classes) => classes.filter(Boolean).join(' ');
 
   const isURL = (href) => href?.includes('//');
   const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
@@ -347,11 +347,11 @@
   const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
   const TEXT_STYLE_MAP = {
       primary: 'text-primary-text',
-      secondary: 'text-secondary-text',
+      secondary: '',
   };
   const LIST_STYLE_MAP = {
       primary: 'bg-primary-main',
-      secondary: 'bg-secondary-text',
+      secondary: 'bg-white',
   };
   const BlockItem = JSX(({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
       return (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version, white) }), jsx("span", { className: white ? 'text-white' : TEXT_STYLE_MAP[version], children: text || children })] }));
@@ -374,16 +374,16 @@
       return (jsxs("div", { children: [description && jsx("div", { className: `font-normal text-base mt-3`, children: description }), children, items?.length && renderItems$1(items, version), buttons?.length && (jsx("div", { className: "mt-[18px]", children: buttons.map((button, index) => renderButton(useLink({ router, handlerDecorator }, button), index)) })), image?.src && jsx(Img, { className: "mt-auto ml-7", image: image })] }));
   });
 
-  function getTitleSizeByClassName(className = '') {
+  function getHeadingType(className = '') {
       const colSpan = getColSpan(className);
       if (colSpan <= 4) {
-          return 'S';
+          return 'h4';
       }
       else if (colSpan <= 8) {
-          return 'M';
+          return 'h3';
       }
       else {
-          return 'L';
+          return 'h2';
       }
   }
 
@@ -393,8 +393,8 @@
       right: 'items-end',
   };
   const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
-  const BaseTile = JSX(({ className, context, title, titleSize, description, children, buttons, image, items, version = 'primary', align = 'left', }) => {
-      return (jsxs("div", { className: `font-sans flex flex-col grow h-full ${alignBlock[align]}`, children: [title && (jsx(Title, { size: titleSize || getTitleSizeByClassName(className), className: `${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`, children: title })), jsx(BaseTileInner, { context: context, buttons: buttons, image: image, children: children, description: description, items: items })] }));
+  const BaseTile = JSX(({ className, context, title, headingType, description, children, buttons, image, items, version = 'primary', align = 'left', }) => {
+      return (jsxs("div", { className: `font-sans flex flex-col grow h-full ${alignBlock[align]}`, children: [title && (jsx(Heading, { type: headingType || getHeadingType(className), className: `${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`, text: title })), jsx(BaseTileInner, { context: context, buttons: buttons, image: image, children: children, description: description, items: items })] }));
   });
 
   const tileStyleMap = {
@@ -460,47 +460,160 @@
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
   const Headline = JSX(({ bgColor = 'transparent', className = '', title, description, image }) => {
-      return (jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && (jsx(Title, { size: "L", className: "text-primary-text mt-0 font-medium", children: title })), description && (jsx("p", { className: `font-normal text-m-md ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+      return (jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && jsx(Heading, { type: "h2", className: "text-primary-text", text: title }), description && (jsx("p", { className: `font-normal text-m-md ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
   });
 
-  const titleAlignStyleMap = {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-  };
-  const titleMarginsStyleMap = {
-      double: 'mb-8',
-      single: 'mb-[26px]',
-  };
-  const linkColumnsModeStyleMap = {
-      double: 'gap-x-5 gap-y-[26px] flex-wrap',
-      single: 'gap-3.5 flex-col',
-  };
-  const LinkDocs = JSX(({ className = '', title, align, documents, icon, columnsMode = 'single' }) => {
-      const containerClasses = linkColumnsModeStyleMap[columnsMode];
-      return (jsxs("section", { className: `font-sans p-[50px] bg-white ${className}`, children: [title && (jsx(Title, { className: `font-medium mt-0 ${titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, children: title })), jsx("div", { className: `flex ${containerClasses}`, role: "list", children: documents?.length
-                      ? documents.map(({ text, fileSize, ...linkProps }, i) => (jsxs("a", { className: `group flex text-sm align-middle h-fit
-                   text-primary-text no-underline hover:text-primary-main
-                   ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`, role: "listitem", ...linkProps, children: [icon && jsx(Icon, { className: "mr-2.5 h-fit", name: icon, width: "24px", height: "24px" }), jsxs("span", { className: "self-center", children: [text, jsx("span", { className: "text-secondary-text group-hover:text-primary-main", children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })] }, String(i))))
-                      : null })] }));
+  const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
+      const { text, fileSize, ...linkProps } = doc;
+      return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Icon, { className: iconClassName, name: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
   });
-  const getExtFromHref = (href) => {
-      if (!href)
-          return '';
-      const lastChunk = href.split('.').pop();
-      if (!lastChunk || lastChunk.includes('/'))
-          return '';
-      return lastChunk;
-  };
   const formatSuffix = (ext, fileSize) => {
       const prefix = ext || fileSize ? ',' : '';
       const extension = ext ? ` ${ext}` : '';
       const size = fileSize ? ` (${fileSize})` : '';
       return prefix + extension + size;
   };
+  const getExtFromHref = (href) => {
+      if (!href)
+          return '';
+      const index = href.lastIndexOf('.');
+      return index !== -1 ? href.substring(index + 1) : '';
+  };
+
+  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6", doc: doc, icon: icon })));
+
+  const LinkDocsVerticalList = JSX(({ hasBorder = true, documents, icon }) => {
+      return (jsx("div", { className: `text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
+              ? documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border p-4' : '', doc: doc, icon: icon }) }, String(i))))
+              : null }));
+  });
+
+  /*
+   Calculates array of breakpoints for each scrollable element in container.
+   Returns array of tuples consisting of [start, end] boundary scrollLeft values.
+  */
+  const getScrollPoints = ({ gap, padding, clientWidth, scrollWidth, childElementCount, itemWidth, }) => {
+      const scrollItemWidth = itemWidth + gap;
+      const scrollableDistance = scrollWidth - clientWidth;
+      const edgeScrollDistance = clientWidth - gap - padding;
+      const lastScrollableIdx = childElementCount - 2;
+      const scrollPoints = new Array(childElementCount)
+          .fill(0)
+          .map((_, idx) => idx === 0 || idx === lastScrollableIdx
+          ? [
+              idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
+              idx > 0 ? scrollableDistance : edgeScrollDistance,
+          ]
+          : [
+              (idx - 1) * scrollItemWidth + edgeScrollDistance,
+              idx * scrollItemWidth + edgeScrollDistance,
+          ]);
+      scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
+      return scrollPoints;
+  };
+
+  /*
+    Returns object containing whole index part, and it's decimal part for a given
+    scrollLeft value of a container and an array of tuple containing values of a
+    start and end boundaries of a scrollable child, right boundary non-inclusive.
+    Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
+   */
+  const getIndexParts = (scrollLeft, scrollPoints) => {
+      const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
+      if (index < 0)
+          return { index, fraction: 0 };
+      const [start, end] = scrollPoints[index];
+      const fraction = (scrollLeft - start) / (end - start);
+      return { index, fraction };
+  };
+
+  const SwipeListControlItem = JSX(({ className = '', children, ...rest }) => {
+      return (jsx("div", { className: `snap-center snap-always min-w-full ${className}`, role: "listitem", ...rest, children: children }));
+  });
+
+  // styles used to compensate outer container padding to get rid of clipping effect
+  const getContainerStyle = (padding) => {
+      return {
+          marginLeft: `${-padding}px`,
+          marginRight: `${-padding}px`,
+          paddingLeft: `${padding}px`,
+          paddingRight: `${padding}px`,
+      };
+  };
+
+  // column-gap between children of SwipeListControl container
+  const DEFAULT_GAP = 14;
+  /*
+    Horizontal padding used on a container above SwipeListControl.
+    Same value used on a SwipeListControlChildren container to compensate it
+    and get rid of a clipping effect caused by overflow: hidden.
+   */
+  const DEFAULT_PADDING = 16;
+  // Classes used to compensate outer container padding, so that child elements won't be clipped
+
+  const SwipeListControlList = JSX(({ className = '', children, activeIndex, onScroll, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, }) => {
+      return (jsx("div", { className: `overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", onScroll: onScroll, children: children?.length ? (children?.map((child, idx) => (jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": Boolean(activeIndex === idx), children: child }, String(idx))))) : (jsx(SwipeListControlItem, { children: children })) }));
+  });
+
+  const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
+  const BASE_DOT_WIDTH = 6;
+  const ACTIVE_DOT_WIDTH_CHANGE = 16;
+  const BASE_DOT_OPACITY = 0.3;
+  const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+  const SwipeListControlDots = JSX(({ children, activeIndex, indexFraction, showDots }) => {
+      return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-[22px] w-fit", children: children?.map((_, idx) => (jsx("div", { className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
+  });
+  const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
+      if (currentIdx < activeIndex || currentIdx > activeIndex + 1)
+          return null;
+      const leftIndexMod = 1 - indexFraction;
+      const rightIndexMod = indexFraction;
+      return currentIdx === activeIndex
+          ? {
+              opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
+              width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
+          }
+          : {
+              opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
+              width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
+          };
+  };
+
+  const SwipeListControl = JSX(({ className, context, children, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, }) => {
+      const [activeIndex, setActiveIndex] = context.useState(0);
+      const [indexFraction, setIndexFraction] = context.useState(0);
+      const handleScroll = (e) => {
+          const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } = e.currentTarget;
+          // horizontal PADDING / 2 to compensate padding-margin combo of child container
+          // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
+          const itemWidth = children[0].offsetWidth - padding / 2;
+          const scrollPoints = getScrollPoints({
+              gap,
+              padding,
+              clientWidth,
+              scrollWidth,
+              childElementCount,
+              itemWidth,
+          });
+          const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+          setActiveIndex(index);
+          setIndexFraction(fraction);
+      };
+      return (jsxs("div", { className: className, children: [jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }), jsx(SwipeListControlDots, { activeIndex: activeIndex, indexFraction: indexFraction, showDots: showDots, children: children })] }));
+  });
+
+  const LinkDocsHorizontalList = JSX(({ context, hasBorder = true, documents, icon }) => {
+      return (jsx(SwipeListControl, { context: context, className: "text-m-sm text-primary-main", children: documents?.length
+              ? documents.map((doc, i) => (jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border p-4' : '', doc: doc, icon: icon }, String(i))))
+              : null }));
+  });
+
+  const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = 'DocIcon', documents, listMode = 'vertical', hasBorder = true, }) => {
+      return (jsxs("section", { className: `py-6 px-4 bg-white ${className}`, children: [title ? (jsx(Heading, { type: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, text: title })) : null, subtitle ? jsx("h3", { className: "mb-5 text-center text-m-base", children: subtitle }) : null, listMode === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+  });
 
   const PictureText = JSX(({ className, title, image, benefits }) => {
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, children: [jsx(Title, { className: "font-medium m-0 text-center", children: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, children: [jsx(Heading, { type: "h2", className: "text-center", text: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
   });
   function renderBenefit$1(benefit, i) {
       return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon && (jsx(Icon, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", name: benefit.icon, width: "48", height: "48" })), jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: "font-medium text-primary-text text-xl m-0", children: benefit.label })), benefit.description && (jsx("div", { className: "font-normal text-sm text-secondary-text", children: benefit.description }))] })] }, String(i)));
@@ -587,7 +700,7 @@
   });
 
   const Accordion = JSX(({ title, description, accordionItems, context, className = '', bordered }) => {
-      return (jsxs("section", { className: `py-6 font-sans bg-white text-primary-text ${bordered ? 'px-4' : ''} ${className}`, children: [title ? (jsx(Title, { className: "m-0 mb-2 font-medium text-center", size: "M", children: title })) : null, description ? jsx("div", { className: "mb-5 text-m-md text-center", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context, bordered: bordered }, `AccordionItem${i}`))) })) : null] }));
+      return (jsxs("section", { className: `py-6 font-sans bg-white text-primary-text ${bordered ? 'px-4' : ''} ${className}`, children: [title ? jsx(Heading, { type: "h3", className: "mb-2 text-center", text: title }) : null, description ? jsx("div", { className: "mb-5 text-m-md text-center", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context, bordered: bordered }, `AccordionItem${i}`))) })) : null] }));
   });
 
   const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -610,7 +723,7 @@
       transparent: 'text-white',
   };
   const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
-      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
+      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
   });
 
   const MobileAppTile = JSX(({ className, title = 'Мобильное приложение', description, href = '#' }) => {
@@ -661,10 +774,10 @@
       { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
   ];
   const MediaButton = JSX(({ href }) => {
-      const { icon, width, height } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+      const { icon, width, height, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
       if (!icon)
           return null;
-      return (jsx("a", { className: "flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main", href: href, target: "_blank", rel: "noopener noreferrer", children: Icon && jsx(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block" }) }));
+      return (jsx("a", { className: "flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: Icon && jsx(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block" }) }));
   });
 
   const SocialMedia = JSX(({ className, media, context }) => {
@@ -726,7 +839,11 @@
       return activeSubItem;
   };
 
-  const isTopItemActive = (router) => (topItem) => topItem.items?.some(isSubItemActive(router)) || isHrefActive(topItem.href, router);
+  const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
+
+  const isTopItemActive = (router) => (topItem) => topItem.items?.some(isSubItemActive(router)) ||
+      isHrefActive(topItem.href, router) ||
+      checkIsHrefSameOrigin(topItem.href, router);
 
   const cmp = (a) => (b) => a?.href === b?.href;
   const substitute = (items, substitution) => (items || []).map((_) => substitution?.find(cmp(_)) || _);
@@ -773,7 +890,7 @@
       return (jsxs(Button, { href: href, className: "flex text-sm mb-4", children: [icon ? jsx(Icon, { className: "pr-1", name: icon, width: "24", height: "24", asSVG: true }) : null, jsx("span", { className: "pl-0.5 font-medium", children: text })] }, `headerSubMenu-${i}`));
   };
 
-  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pr-4", onClick: onClick, children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
+  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pr-4", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
   const Header = JSX(({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
       const router = context.useRouter();
@@ -812,11 +929,11 @@
       secondary: 'text-white',
   };
   function renderBenefit(benefit, i, version) {
-      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon && (jsx(Icon, { className: "w-[25px] h-[25px] rounded-full box-border", name: benefit.icon, width: "24", height: "24" })), jsx("h4", { className: `font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-m-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] }, String(i)));
+      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon && (jsx(Icon, { className: "w-[25px] h-[25px] rounded-full box-border", name: benefit.icon, width: "24", height: "24" })), jsx("div", { className: `font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-m-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] }, String(i)));
   }
 
-  const ProductBlockInner = JSX(({ className, context, title, titleSize, description, benefits, buttons, image, items, version = 'primary', }) => {
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { children: jsx(BaseTile, { context: context, title: title, titleSize: titleSize || 'XL', description: description, items: items, buttons: buttons, children: benefits?.length ? (jsx("div", { className: "mt-[19px]", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null }) }), image?.src && (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) }))] }));
+  const ProductBlockInner = JSX(({ className, context, title, headingType, description, benefits, buttons, image, items, version = 'primary', }) => {
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { children: jsx(BaseTile, { context: context, title: title, headingType: headingType || 'h2', description: description, items: items, buttons: buttons, children: benefits?.length ? (jsx("div", { className: "mt-[19px]", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null }) }), image?.src && (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) }))] }));
   });
 
   const ProductBlock = JSX(
@@ -826,28 +943,29 @@
       return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${className || ''}`, children: jsx(ProductBlockInner, { ...props }) }));
   });
 
-  const ProductGalleryBlock = JSX(({ block, titleSize, context }) => {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 py-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, titleSize: titleSize, ...block }) }) }));
+  const ProductGalleryBlock = JSX(({ block, headingType, context }) => {
+      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 py-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType, ...block }) }) }));
   });
 
   const ProductGallery = JSX(({ className, context, duration = 0, slides = [] }) => {
       const galleryBlocks = slides.map((s) => s.productBlock);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
       return (jsxs("section", { className: `font-sans bg-white overflow-hidden w-100 ${className || ''}`, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((block, i) => (jsx(ProductGalleryBlock, { block: block, context: context }, String(i)))) }), jsx("div", { className: "flex px-4 py-6", children: slides.map((_, i) => renderNavButton({
+                      slide: _.productBlock,
                       i,
                       activeSlideIndex,
                       onClick: () => setActiveSlideIndex(i),
                       duration,
                   })) })] }));
   });
-  function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
+  function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       const isActiveBtn = i === activeSlideIndex;
       const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
-      return (jsx("button", { type: "button", onClick: onClick, className: `relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`, children: jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } }) }, String(i)));
+      return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`, children: jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } }) }, String(i)));
   }
 
   const StepsBlock = JSX(({ className, title, description, steps, size = 'normal' }) => {
-      return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && (jsx(Title, { size: "M", className: "font-medium m-0 text-center", children: title })), description && jsx("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : null] }));
+      return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && jsx(Heading, { type: "h3", className: "text-center", text: title }), description && jsx("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : null] }));
   });
   const renderStepTitle = (params) => {
       const { step, size, i, length } = params;
@@ -869,6 +987,7 @@
       Footer,
       Header,
       Headline,
+      LinkDocs,
       Placeholder,
       ProductBlock,
       ProductGallery,