@redneckz/wildless-cms-uni-blocks 0.3.22 → 0.3.25

package/lib/ui-kit/List/ListProps.d.ts

@@ -1,6 +1,7 @@
 import type { ListContent } from './ListContent';
 /**
  * @title Версия списка
+ * @enumNames ["Основной", "Второстепенный", "Серый"]
  */
 export declare type ListItemVersion = 'primary' | 'secondary' | 'gray';
 /**
@@ -8,6 +9,7 @@ export declare type ListItemVersion = 'primary' | 'secondary' | 'gray';
  */
 export interface ListProps extends ListContent {
     className?: string;
+    /** @title Буллиты */
     isDotted?: boolean;
     version?: ListItemVersion;
     itemClassName?: string;

package/lib/ui-kit/SearchBar/SearchBar.mobile.js

@@ -3,7 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../Icon/Icon.js';
 export const SearchBar = JSX(({ className, context }) => {
     const { term, setTerm } = context.useSearch();
-    return (_jsxs("form", { className: `relative ${className || ''}`, children: [_jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [_jsx("div", { className: "w-[20px] h-[20px]", children: _jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (_jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), _jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: "some search" }), _jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer", onClick: (e) => {
+    return (_jsxs("form", { className: `relative ${className || ''}`, children: [_jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [_jsx("div", { className: "w-[20px] h-[20px]", children: _jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (_jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), _jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: "some search" }), _jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                     e.preventDefault();
                     setTerm('');
                 }, children: _jsx(Icon, { name: "CloseIcon", width: "24", height: "24" }) })] }));

package/lib/ui-kit/SearchBar/SearchBar.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mobile.js","sourceRoot":"","sources":["../../../src/ui-kit/SearchBar/SearchBar.mobile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAgB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAC9C,OAAO,CACL,gBAAM,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,aAC5C,eAAK,SAAS,EAAC,yGAAyG,aACtH,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC5C,EACL,CAAC,IAAI,IAAI,CACR,gBACE,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAC,mDAAmD,2FAGvD,CACT,IACG,EACN,gBACE,EAAE,EAAC,kBAAkB,EACrB,SAAS,EACP,qMAAqM,EAEvM,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,aAAa,GACzB,EACF,iBACE,SAAS,EAAC,2GAA2G,EACrH,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,EAAE,CAAC,CAAC;gBACd,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GACzC,IACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"SearchBar.mobile.js","sourceRoot":"","sources":["../../../src/ui-kit/SearchBar/SearchBar.mobile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAgB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAC9C,OAAO,CACL,gBAAM,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,aAC5C,eAAK,SAAS,EAAC,yGAAyG,aACtH,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC5C,EACL,CAAC,IAAI,IAAI,CACR,gBACE,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAC,mDAAmD,2FAGvD,CACT,IACG,EACN,gBACE,EAAE,EAAC,kBAAkB,EACrB,SAAS,EACP,qMAAqM,EAEvM,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,aAAa,GACzB,EACF,iBACE,SAAS,EAAC,uHAAuH,EACjI,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,EAAE,CAAC,CAAC;gBACd,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GACzC,IACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/bundle/bundle.umd.js

@@ -396,11 +396,12 @@
   const svgColorsMap = {
       none: '',
       primary: 'text-primary-main',
+      secondary: 'text-primary-text',
   };
   const Icon = JSX(({ className = '', name, alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
       if (asSVG) {
-          return (jsxs("svg", { className: `${svgColorsMap[color]} ${className}`, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
+          return (jsxs("svg", { className: `${svgColorsMap[color]} ${className}`, ...imgProps, "aria-hidden": "true", style: color === 'secondary' ? { filter: 'invert(1)' } : null, children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
       }
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
@@ -617,7 +618,7 @@
   });
 
   const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = 'DocIconMonoColor', documents, listMode = 'vertical', hasBorder = true, }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, title: title })) : null, subtitle ? (jsx("h3", { className: "mt-0 font-normal mb-5 text-center text-m-md", children: subtitle })) : null, listMode === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+      return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, title: title })) : null, subtitle ? (jsx("h3", { className: "mt-0 font-normal mb-5 text-center text-m-md", 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 }) => {
@@ -737,28 +738,28 @@
       return jsx("div", { className: `font-normal text-base ${className}`, children: description });
   });
 
-  const LIST_STYLE_CLASSES$1 = 'rounded-full inline-block mr-3 mt-2';
-  const TEXT_STYLE_MAP$1 = {
-      primary: 'text-primary-text',
-      secondary: 'text-white',
-      gray: 'text-secondary-text',
-  };
-  const LIST_STYLE_MAP$1 = {
+  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+  const LIST_DOT_STYLE_MAP = {
       primary: 'bg-primary-main',
       secondary: 'bg-white',
       gray: 'bg-secondary-text',
   };
   const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
-      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle$1(version) }), jsx("span", { className: `text-m-md ${TEXT_STYLE_MAP$1[version]}`, children: children })] }));
+      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { children: children })] }));
   });
-  const getListStyle$1 = (version) => {
-      const size = version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
-      return `${LIST_STYLE_CLASSES$1} ${LIST_STYLE_MAP$1[version]} ${size}`;
+  const getListStyle = (version) => {
+      const size = version === 'gray' ? 'w-1.5 h-1.5 min-w-1.5 min-h-1.5' : 'w-2 h-2 min-w-2 min-h-2';
+      return `${LIST_STYLE_CLASSES} ${LIST_DOT_STYLE_MAP[version]} ${size}`;
   };
 
+  const TEXT_STYLE_MAP = {
+      primary: 'text-primary-text',
+      secondary: 'text-white',
+      gray: 'text-secondary-text',
+  };
   const List = JSX((props) => {
-      const { className = '', itemClassName, isDotted, items, version } = props;
-      return (jsx("section", { className: `${className}`, role: "list", children: items?.length
+      const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
+      return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${className}`, role: "list", children: items?.length
               ? items.map((_, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, version: version, children: _ }, String(i))))
               : null }));
   });
@@ -776,21 +777,28 @@
       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-6 h-6 rounded-full box-border", name: benefit.icon, width: "24", height: "24", asSVG: true })), jsx("div", { className: `font-medium text-m-title-xs 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-6 h-6 rounded-full box-border", name: benefit.icon, width: "24", height: "24", asSVG: true, color: version })), jsx("div", { className: `font-medium text-m-title-xs 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, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', }) => {
-      return (jsxs("div", { className: `w-full text-primary-text ${className}`, children: [jsx("div", { children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? (jsx(Description, { className: "mt-3 text-m-md", description: description })) : null, benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? jsx(List, { className: "mt-3", items: items }) : null] }) }), renderImage$1(image)] }));
+  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', isDotted = true, label, }) => {
+      return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? (jsx(Description, { className: "mt-3 text-m-md", description: description })) : null, benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m-md", items: items, version: version, isDotted: isDotted })) : null] })] }), renderImage$1(image)] }));
   });
   function renderImage$1(image) {
-      return image?.src ? (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) })) : null;
+      return image?.src ? (jsx(Img, { imageClassName: "mt-5 mx-auto block", image: { className: 'block', ...image } })) : null;
   }
+  const labelStyleMap = {
+      primary: 'text-primary-main border-secondary-hover',
+      secondary: 'text-white/80',
+  };
+  const renderLabel = (label, version) => (jsx("div", { className: `m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 w-fit ${labelStyleMap[version]}`, children: label }));
 
-  const ProductBlock = JSX(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (props /* Get rid of image and benefits */) => {
-      const { className } = props;
-      return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${className || ''}`, children: jsx(ProductBlockInner, { ...props }) }));
+  const productBlockStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const ProductBlock = JSX((props /* Get rid of image and benefits */) => {
+      const { className = '', version = 'primary' } = props;
+      return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${productBlockStyleMap[version]} ${className}`, children: jsx(ProductBlockInner, { ...props }) }));
   });
 
   const textBlockStyleMaps = {
@@ -815,7 +823,7 @@
   };
   const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items, isDotted = true, }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? (jsx(List, { className: "mt-1", items: items, isDotted: isDotted, version: blockVersion.indexOf('secondary') !== -1 ? 'secondary' : 'gray' })) : null] })] }));
+      return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? (jsx(List, { className: "mt-1 text-m-md", items: items, isDotted: isDotted, version: blockVersion === 'secondary' ? 'secondary' : 'gray' })) : null] })] }));
   });
   function renderIcon(className) {
       return (jsx("div", { className: "mb-3", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
@@ -876,10 +884,10 @@
   const Tile = JSX((props) => {
       const { context, title, description, items, children, buttons, image, className = '', version = 'primary', role, } = props;
       return (jsx("section", { className: `overflow-hidden font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), children, renderList(items, version)] }) }));
+              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), children, renderList$1(items, version)] }) }));
   });
-  function renderList(items, version) {
-      return items?.length ? jsx(List, { items: items, version: version }) : null;
+  function renderList$1(items, version) {
+      return items?.length ? (jsx(List, { items: items, itemClassName: "mt-2.5 first:mt-0", version: version })) : null;
   }
 
   const productTileStyleMap = {
@@ -904,11 +912,11 @@
       primary: 'bg-white',
       secondary: 'bg-primary-main text-white',
   };
-  const Gallery = JSX(({ context, title, description, cards = [], className, isScroll = true }) => {
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? (jsx("div", { className: "font-normal text-m-md max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(isScroll, cards, context)] }));
+  const Gallery = JSX(({ context, title, description, cards = [], className, useSwiper = 'horizontal' }) => {
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? (jsx("div", { className: "font-normal text-m-md max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(useSwiper, cards, context)] }));
   });
-  function renderCardsLayout(isScroll, cards, context) {
-      return isScroll ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard$1) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard$1) }));
+  function renderCardsLayout(useSwiper, cards, context) {
+      return useSwiper === 'horizontal' ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard$1) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard$1) }));
   }
   function renderCard$1(card, key) {
       return (jsxs("div", { className: `h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
@@ -961,28 +969,9 @@
       mini: 276,
   };
 
-  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
-  const TEXT_STYLE_MAP = {
-      primary: 'text-secondary-text',
-      secondary: 'text-white',
-      gray: 'text-secondary-text',
-  };
-  const LIST_STYLE_MAP = {
-      primary: 'bg-primary-main',
-      secondary: 'bg-white',
-      gray: 'bg-secondary-text',
-  };
-  const BlockItem = JSX(({ className = '', isDotted = true, text, children, version = 'primary' }) => {
-      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { className: TEXT_STYLE_MAP[version], children: text || children })] }));
-  });
-  const getListStyle = (version) => {
-      const size = version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
-      return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
-  };
-
   const GalleryCardInner = JSX(({ title, description, image, items, button, version }) => {
       const titleStyleClasses = getTitleStyle(version, description, items);
-      return (jsxs("div", { children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
+      return (jsxs("div", { className: "h-full flex flex-col justify-between", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
   });
   function renderButton$1(button) {
       return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Icon, { name: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
@@ -990,13 +979,8 @@
   function renderCardTitle(title, className) {
       return jsx("div", { className: `font-medium text-xl m-0 ${className}`, children: title });
   }
-  function renderItems(items, version) {
-      return (jsx("section", { className: `max-w-[308px] mt-2`, role: "list", children: items
-              .filter((item) => item?.text)
-              .map((item, i) => renderItem(item.text, i, version)) }));
-  }
-  function renderItem(item, i, version) {
-      return (jsx(BlockItem, { version: version ?? 'primary', children: jsx("span", { className: "text-sm", children: item }) }, String(i)));
+  function renderItems(items, version = 'primary') {
+      return (jsx(List, { className: `max-w-[308px] mt-2 text-sm ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), version: version }));
   }
   function getTitleStyle(version, description, items) {
       return `font-medium text-xl m-0
@@ -1049,25 +1033,25 @@
       LinkList,
   };
 
-  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns })) : null;
-  const renderBlock$1 = ({ context, columns, className }) => (block, i) => {
+  const renderBlocksList = ({ blocks, context, className, columns, version, }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns, version })) : null;
+  const renderBlock$1 = ({ context, columns, className, version }) => (block, i) => {
       const type = block?.blockListType;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
       const columnsCountClass = columns === 2 ? 'w-1/2' : '';
       const EmbeddedBlock = EmbeddableBlocks[type];
-      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
+      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, blockVersion: version, className: "!p-0" }) }, `block_${i}`));
   };
 
-  const AccordionItemInner = JSX(({ blocks, context }) => {
+  const AccordionItemInner = JSX(({ blocks, context, version = 'primary' }) => {
       const className = 'mb-5 last:mb-0 first:mt-2';
       const columns = 1;
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0", children: renderBlocksList({ context, className, columns, blocks }) }));
+      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0", children: renderBlocksList({ context, className, columns, blocks, version }) }));
   });
 
-  const useActiveHandler = ({ context, blocks }) => {
-      const [isActive, setIsActive] = context.useState(false);
+  const useActiveHandler = ({ context, blocks, initialState = false }) => {
+      const [isActive, setIsActive] = context.useState(initialState);
       const hasContent = blocks?.length;
       const icon = isActive ? 'MinusIcon' : 'PlusIcon';
       const getContentBlock = ({ currentTarget }) => currentTarget.nextSibling;
@@ -1121,7 +1105,7 @@
   const renderButton = ({ header, buttonVersion }) => (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "font-medium text-m-sm mt-4 py-[11px]", children: header.link.text }));
   const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (jsx("div", { className: "mt-5", role: "cell", children: jsx("a", { role: "link", onClick: onToggleColumn, className: `font-medium text-m-sm cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
 
-  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, useSwiper = false, }) => {
+  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, useSwiper = 'horizontal', }) => {
       const tableData = columns?.map(({ data, header }) => ({
           header,
           column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
@@ -1142,19 +1126,31 @@
                   setColumnsViewState,
               })] }));
   });
-  const renderColumns = ({ context, tableData, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn, useSwiper, setColumnsViewState, }) => (jsx("div", { role: "table", children: tableData?.length ? (useSwiper ? (jsx(SwipeListControl, { context: context, onSlideChange: onSlideChange(columnsViewState, setColumnsViewState), children: tableData.map(renderColumn({
+  const renderColumns = ({ context, tableData, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn, useSwiper = 'horizontal', setColumnsViewState, }) => (jsx("div", { role: "table", children: tableData?.length
+          ? renderInnerTable({
+              useSwiper,
               context,
+              columnsViewState,
+              setColumnsViewState,
+              tableData,
               visibleRowLength,
               isColoredFirstColumn,
-              columnsViewState,
               handleToggleColumn,
-          })) })) : (tableData.map(renderColumn({
+          })
+          : null }));
+  const renderInnerTable = ({ useSwiper, context, columnsViewState, setColumnsViewState, tableData, visibleRowLength, isColoredFirstColumn, handleToggleColumn, }) => useSwiper === 'horizontal' ? (tableData.map(renderColumn({
+      context,
+      visibleRowLength,
+      isColoredFirstColumn,
+      columnsViewState,
+      handleToggleColumn,
+  }))) : (jsx(SwipeListControl, { context: context, onSlideChange: onSlideChange(columnsViewState, setColumnsViewState), children: tableData.map(renderColumn({
           context,
           visibleRowLength,
           isColoredFirstColumn,
           columnsViewState,
           handleToggleColumn,
-      })))) : null }));
+      })) }));
   const renderColumn = ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) => (columnData, i) => (jsx(TableColumn, { context: context, visibleRowLength: visibleRowLength, showRow: columnsViewState[i], header: columnData.header, columnData: columnData.column, isFillGradient: i === 0 && isColoredFirstColumn, onToggleColumn: () => handleToggleColumn(i) }, String(i)));
   const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
       setColumnsViewState(new Array(columnsViewState.length).fill(false));
@@ -1338,7 +1334,7 @@
 
   const SearchBar = JSX(({ className, context }) => {
       const { term, setTerm } = context.useSearch();
-      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[20px] h-[20px]", children: jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: "some search" }), jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer", onClick: (e) => {
+      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[20px] h-[20px]", children: jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: "some search" }), jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                       e.preventDefault();
                       setTerm('');
                   }, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24" }) })] }));
@@ -1496,7 +1492,9 @@
   const TariffsTableTileCell = JSX(({ header, data }) => {
       return (jsxs("div", { className: "rounded-md border-main-stroke h-full box-border border p-4", children: [jsx(TableTileHeader, { ...header }), data?.length ? data.map(renderCellInner) : null] }));
   });
-  const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-2" })), label ? jsx("div", { className: "text-m-sm m-0", children: label }) : null, description ? (jsx("div", { className: "text-m-sm text-secondary-text mt-[3px]", children: description })) : null, list?.items?.length ? (jsx("div", { className: "flex flex-col justify-between items-start", children: jsx("div", { role: "list", children: list.items.map((text, idx) => (jsx(BlockItem, { className: "text-m-sm", text: text, version: "gray", isDotted: list.isDotted ?? true }, String(idx)))) }) })) : null, image && jsx(Img, { image: { ...image, className: 'm-0' } }), buttons?.length ? (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`, rounded: rounded, appendLeft: icon && jsx(Icon, { name: icon, width: "24px", height: "24px", asSVG: true }), ...buttonProps, "aria-label": icon }, String(idx)))) })) : null] }, String(i)));
+  const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-2" })), label ? jsx("div", { className: "text-m-sm m-0", children: label }) : null, description ? (jsx("div", { className: "text-m-sm text-secondary-text mt-[3px]", children: description })) : null, list?.items?.length ? renderList(list) : null, image && jsx(Img, { image: { ...image, className: 'm-0' } }), buttons?.length ? renderButtons(buttons) : null] }, String(i)));
+  const renderList = (list) => (jsx(List, { className: "flex flex-col justify-between items-start text-m-sm", version: "gray", items: list.items, isDotted: list.isDotted ?? true }));
+  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`, rounded: rounded, appendLeft: icon && jsx(Icon, { name: icon, width: "24px", height: "24px", asSVG: true }), ...buttonProps, "aria-label": icon }, String(idx)))) }));
 
   const TariffsTableVertical = JSX(({ tiles }) => (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { ...tile }, String(i)))) })));
 
@@ -1505,7 +1503,7 @@
   const TariffsTable = JSX(({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
       const colData = getColData(columns);
       const tiles = getTiles(rowHeaders, colData);
-      return (jsxs("section", { className: `px-4 py-6 bg-white font-sans text-primary-text ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? jsx("div", { className: "mb-5 text-center text-m-md", children: description }) : null, tiles?.length ? renderOrientationTable(orientation, tiles, context) : null] }));
+      return (jsxs("section", { className: `px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? jsx("div", { className: "mb-5 text-center text-m-md", children: description }) : null, tiles?.length ? renderOrientationTable(orientation, tiles, context) : null] }));
   });
   function renderOrientationTable(orientation, tiles, context) {
       return orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles })) : (jsx(TariffsTableHorizontal, { context: context, tiles: tiles }));