@redneckz/wildless-cms-uni-blocks 0.3.75 → 0.3.76

package/mobile/lib/components/ProductTile/ProductTile.js

@@ -4,7 +4,6 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection.js';
 import { Description } from '../../ui-kit/Description/Description.js';
 import { Heading } from '../../ui-kit/Heading/Heading.js';
 import { Img } from '../../ui-kit/Img/Img.js';
-import { BaseTile } from '../BaseTile/BaseTile.js';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight.js';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding.js';
 const productTileStyleMap = {
@@ -12,28 +11,28 @@ const productTileStyleMap = {
     secondary: 'bg-primary-main text-white',
 };
 export const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, additionalDescription, benefits, buttons, image, version = 'primary', anchor = null, }) => {
-    return (_jsx("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: _jsxs(BaseTile, { context: context, title: title ? (_jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, 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 })) : null, renderBenefits(benefits || [], version), additionalDescription
-                    ? renderAdditionalDescription(additionalDescription, version)
-                    : null] }) }));
+    return (_jsxs("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: [_jsxs("div", { className: "z-[1]", children: [title ? (_jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap text-h4` })) : null, description ? (_jsx(Description, { className: "mt-2 text-md font-light", description: description })) : null, renderBenefits(benefits || [], version), additionalDescription
+                        ? renderAdditionalDescription(additionalDescription, version)
+                        : null] }), buttons?.length ? (_jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-[1]" })) : null, image?.src ? _jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
 });
 function renderBenefits(benefits, version) {
-    return (_jsxs("div", { className: "flex mt-5 mb-1", children: [benefits.length ? _jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) }) : null, benefits.length ? (_jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
+    return (_jsxs("div", { className: "flex mt-4", children: [benefits.length ? (_jsx("div", { className: "mr-6 gap-2.5 text-title-2xs", children: benefits.map(renderBenefitLabel) })) : null, benefits.length ? (_jsx("div", { className: "pt-1 text-m", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
 }
 function renderBenefitLabel(benefit, i) {
-    return (_jsx("div", { className: `text-xl font-medium ${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
+    return (_jsx("div", { className: `${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
 }
 function renderBenefitDescription(benefit, i, version = 'primary') {
     const labelStyleMap = {
         primary: 'text-secondary-text',
         secondary: 'text-white',
     };
-    return (_jsx("div", { className: `text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
+    return (_jsx("div", { className: `${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
 }
 function renderAdditionalDescription(additionalDescription, version = 'primary') {
     const descStyleMap = {
         primary: 'text-secondary-text',
         secondary: 'text-white',
     };
-    return _jsx("div", { className: `text-sm mt-2.5 ${descStyleMap[version]}`, children: additionalDescription });
+    return _jsx("div", { className: `text-m mt-2.5 ${descStyleMap[version]}`, children: additionalDescription });
 }
 //# sourceMappingURL=ProductTile.js.map

package/mobile/lib/components/ProductTile/ProductTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductTile.js","sourceRoot":"","sources":["../../../src/components/ProductTile/ProductTile.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductTile.js","sourceRoot":"","sources":["../../../src/components/ProductTile/ProductTile.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/ui-kit/Button/ButtonInner.js

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 export const ButtonInner = JSX((props) => {
     const { text, aboveText, appendLeft, appendRight } = props;
-    return (_jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (_jsxs("div", { children: [_jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), _jsx("div", { className: "text-button text-left", children: text })] })) : null, appendRight ? appendRight : null] }));
+    return (_jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (_jsxs("div", { children: [_jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), _jsx("div", { className: "text-base text-left", children: text })] })) : null, appendRight ? appendRight : null] }));
 });
 const getButtonStyle = (props) => {
     const { version, aboveText, rounded } = props;
     if (version === 'link') {
         return '';
     }
-    const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
+    const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
     return [
         'flex items-center justify-center',
         isWithText(props) ? withTextStyle : 'h-12 w-12',

package/mobile/lib/ui-kit/Button/ButtonInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonInner.js","sourceRoot":"","sources":["../../../src/ui-kit/Button/ButtonInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE3D,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,aAClC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EAC9B,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,0BACE,cAAK,SAAS,EAAC,iCAAiC,YAAE,SAAS,GAAO,EAClE,cAAK,SAAS,EAAC,uBAAuB,YAAE,IAAI,GAAO,IAC/C,CACP,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,IAC7B,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;IACjD,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE9C,IAAI,OAAO,KAAK,MAAM,EAAE;QACtB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,aAAa,GAAG,cAAc,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAEvE,OAAO;QACL,kCAAkC;QAClC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;QAC/C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KAC9B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAoB,EAAE,EAAE,CACvE,OAAO,CAAC,IAAI,IAAI,SAAS,IAAI,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"ButtonInner.js","sourceRoot":"","sources":["../../../src/ui-kit/Button/ButtonInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE3D,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,aAClC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EAC9B,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,0BACE,cAAK,SAAS,EAAC,iCAAiC,YAAE,SAAS,GAAO,EAClE,cAAK,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAO,IAC7C,CACP,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,IAC7B,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;IACjD,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE9C,IAAI,OAAO,KAAK,MAAM,EAAE;QACtB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,aAAa,GAAG,cAAc,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;IAElE,OAAO;QACL,kCAAkC;QAClC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;QAC/C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KAC9B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAoB,EAAE,EAAE,CACvE,OAAO,CAAC,IAAI,IAAI,SAAS,IAAI,CAAC,UAAU,CAAC,CAAC"}

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

@@ -10,7 +10,7 @@ export const Foldable = JSX(({ blocks = [], context, hiddenBlocksNum = 0, foldBu
         initialState: isUnfolded,
     });
     return blocks ? (_jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (_jsxs("button", { className: foldButtonClasses ||
-                    'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer', "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [_jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : foldButtonLabel }), icon && _jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true })] })) : null] })) : null;
+                    'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer', "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [_jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : foldButtonLabel }), icon ? _jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true }) : null] })) : null] })) : null;
 });
 const renderBlocks = (blocks, render, { blocksToHide, isActive, containerClasses }) => {
     const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);

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

@@ -1 +1 @@
-{"version":3,"file":"Foldable.js","sourceRoot":"","sources":["../../../src/ui-kit/Foldable/Foldable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAuB/E,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,MAAM,GAAG,EAAE,EACX,OAAO,EACP,eAAe,GAAG,CAAC,EACnB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,UAAU,EACV,gBAAgB,EAChB,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAClB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAE9D,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,CAAC;QACxD,OAAO;QACP,YAAY,EAAE,UAAU;KACzB,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,0BACG,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC,EAC1E,eAAe,CAAC,CAAC,CAAC,CACjB,kBACE,SAAS,EACP,iBAAiB;oBACjB,8HAA8H,gBAEpH,mBAAmB,EAC/B,OAAO,EAAE,YAAY,aAErB,eAAM,SAAS,EAAC,MAAM,YAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAQ,EACpE,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAC,OAAO,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,SAAG,IACvE,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,MAAsB,EACtB,MAAc,EACd,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAsB,EAChE,EAAE;IACF,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;IAEjD,OAAO,MAAM,CACX,0BACG,aAAa,EACd,cAAK,SAAS,EAAE,GAAG,uBAAuB,IAAI,gBAAgB,EAAE,YAAG,YAAY,GAAO,IAClF,EACN,QAAQ,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Foldable.js","sourceRoot":"","sources":["../../../src/ui-kit/Foldable/Foldable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAuB/E,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,MAAM,GAAG,EAAE,EACX,OAAO,EACP,eAAe,GAAG,CAAC,EACnB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,UAAU,EACV,gBAAgB,EAChB,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAClB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAE9D,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,CAAC;QACxD,OAAO;QACP,YAAY,EAAE,UAAU;KACzB,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,0BACG,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC,EAC1E,eAAe,CAAC,CAAC,CAAC,CACjB,kBACE,SAAS,EACP,iBAAiB;oBACjB,8HAA8H,gBAEpH,mBAAmB,EAC/B,OAAO,EAAE,YAAY,aAErB,eAAM,SAAS,EAAC,MAAM,YAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAQ,EACpE,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAC,OAAO,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,IAC7E,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,MAAsB,EACtB,MAAc,EACd,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAsB,EAChE,EAAE;IACF,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;IAEjD,OAAO,MAAM,CACX,0BACG,aAAa,EACd,cAAK,SAAS,EAAE,GAAG,uBAAuB,IAAI,gBAAgB,EAAE,YAAG,YAAY,GAAO,IAClF,EACN,QAAQ,CACT,CAAC;AACJ,CAAC,CAAC"}

package/mobile/src/components/Calculator/renderRate.tsx

@@ -12,9 +12,7 @@ export function renderRate({ rate, title, sup, className = '' }: rateType) {
     <div>
       <div className="text-sm font-light ml-3">{title}</div>
       <div className="flex justify-start">
-        <span
-          className={`calc-rate-text font-mohave text-[200px] leading-[250px] pr-4 mt-[-16px] ${className}`}
-        >
+        <span className={`calc-rate-text font-mohave text-title-huge pr-4 mt-[-16px] ${className}`}>
           {rateFormat}
         </span>
         {sup ? <span className="calc-rate-text text-[65px] leading-[75px]">{sup}</span> : ''}

package/mobile/src/components/Catalog/Catalog.tsx

@@ -14,12 +14,13 @@ const CARD_FULL_VIEW_COUNT = 3;
 const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
-  ({ context, cards = [], className = '', title, description }) => {
+  ({ context, cards = [], className = '', title, description, anchor = null }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     return (
       <section
         className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
+        id={anchor}
       >
         {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
         {description ? <Description className="mb-6" description={description} /> : null}

package/mobile/src/components/Catalog/CatalogContent.ts

@@ -22,5 +22,6 @@ export interface CatalogCardType extends HeadingContent, DescriptionContent, Ima
  */
 export type CatalogContent = HeadingContent &
   DescriptionContent & {
+    /** @title Список карточек */
     cards?: CatalogCardType[];
   };

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -5,7 +5,6 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ProductTileContent, TextBenefit } from './ProductTileContent';
@@ -33,39 +32,36 @@ export const ProductTile = JSX<ProductTileProps>(
   }) => {
     return (
       <section
-        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${
+        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         id={anchor}
       >
-        <BaseTile
-          context={context}
-          title={
-            title ? (
-              <Heading
-                headingType={headingType}
-                as="h3"
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
-              />
-            ) : null
-          }
-          buttons={
-            buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-            ) : null
-          }
-          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
-        >
+        <div className="z-[1]">
+          {title ? (
+            <Heading
+              headingType={headingType}
+              as="h3"
+              title={title}
+              className={`whitespace-pre-wrap text-h4`}
+            />
+          ) : null}
           {description ? (
-            <Description className="mt-4 max-w-[600px]" description={description} />
+            <Description className="mt-2 text-md font-light" description={description} />
           ) : null}
           {renderBenefits(benefits || [], version)}
-
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
             : null}
-        </BaseTile>
+        </div>
+        {buttons?.length ? (
+          <ButtonSection
+            context={context}
+            buttons={buttons}
+            className="flex self-end mt-5 gap-4 z-[1]"
+          />
+        ) : null}
+        {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
       </section>
     );
   },
@@ -73,10 +69,12 @@ export const ProductTile = JSX<ProductTileProps>(
 
 function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
-    <div className="flex mt-5 mb-1">
-      {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
+    <div className="flex mt-4">
+      {benefits.length ? (
+        <div className="mr-6 gap-2.5 text-title-2xs">{benefits.map(renderBenefitLabel)}</div>
+      ) : null}
       {benefits.length ? (
-        <div className="pt-1">
+        <div className="pt-1 text-m">
           {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
         </div>
       ) : null}
@@ -86,7 +84,7 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
 
 function renderBenefitLabel(benefit: TextBenefit, i: number) {
   return (
-    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+    <div key={String(i)} className={`${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
     </div>
   );
@@ -99,7 +97,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -111,5 +109,5 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     secondary: 'text-white',
   };
 
-  return <div className={`text-sm mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
 }

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -15,7 +15,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button text-left">{text}</div>
+          <div className="text-base text-left">{text}</div>
         </div>
       ) : null}
       {appendRight ? appendRight : null}
@@ -30,7 +30,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
+  const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
 
   return [
     'flex items-center justify-center',

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -59,7 +59,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            {icon && <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />}
+            {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
           </button>
         ) : null}
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.75",
+  "version": "0.3.76",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -149,7 +149,7 @@
     "size-limit": "^7.0.8",
     "style-loader": "^3.3.1",
     "svgo": "^2.8.0",
-    "tailwindcss": "^3.1.1",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.6",
     "ts-json-schema-generator": "^1.0.0",
     "ts-loader": "^9.3.0",

package/src/components/Calculator/renderRate.tsx

@@ -12,9 +12,7 @@ export function renderRate({ rate, title, sup, className = '' }: rateType) {
     <div>
       <div className="text-sm font-light ml-3">{title}</div>
       <div className="flex justify-start">
-        <span
-          className={`calc-rate-text font-mohave text-[200px] leading-[250px] pr-4 mt-[-16px] ${className}`}
-        >
+        <span className={`calc-rate-text font-mohave text-title-huge pr-4 mt-[-16px] ${className}`}>
           {rateFormat}
         </span>
         {sup ? <span className="calc-rate-text text-[65px] leading-[75px]">{sup}</span> : ''}

package/src/components/Catalog/Catalog.tsx

@@ -14,12 +14,13 @@ const CARD_FULL_VIEW_COUNT = 3;
 const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
-  ({ context, cards = [], className = '', title, description }) => {
+  ({ context, cards = [], className = '', title, description, anchor = null }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     return (
       <section
         className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
+        id={anchor}
       >
         {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
         {description ? <Description className="mb-6" description={description} /> : null}

package/src/components/Catalog/CatalogContent.ts

@@ -22,5 +22,6 @@ export interface CatalogCardType extends HeadingContent, DescriptionContent, Ima
  */
 export type CatalogContent = HeadingContent &
   DescriptionContent & {
+    /** @title Список карточек */
     cards?: CatalogCardType[];
   };

package/src/components/ProductTile/ProductTile.tsx

@@ -5,7 +5,6 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ProductTileContent, TextBenefit } from './ProductTileContent';
@@ -33,39 +32,36 @@ export const ProductTile = JSX<ProductTileProps>(
   }) => {
     return (
       <section
-        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${
+        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         id={anchor}
       >
-        <BaseTile
-          context={context}
-          title={
-            title ? (
-              <Heading
-                headingType={headingType}
-                as="h3"
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
-              />
-            ) : null
-          }
-          buttons={
-            buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-            ) : null
-          }
-          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
-        >
+        <div className="z-[1]">
+          {title ? (
+            <Heading
+              headingType={headingType}
+              as="h3"
+              title={title}
+              className={`whitespace-pre-wrap text-h4`}
+            />
+          ) : null}
           {description ? (
-            <Description className="mt-4 max-w-[600px]" description={description} />
+            <Description className="mt-2 text-md font-light" description={description} />
           ) : null}
           {renderBenefits(benefits || [], version)}
-
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
             : null}
-        </BaseTile>
+        </div>
+        {buttons?.length ? (
+          <ButtonSection
+            context={context}
+            buttons={buttons}
+            className="flex self-end mt-5 gap-4 z-[1]"
+          />
+        ) : null}
+        {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
       </section>
     );
   },
@@ -73,10 +69,12 @@ export const ProductTile = JSX<ProductTileProps>(
 
 function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
-    <div className="flex mt-5 mb-1">
-      {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
+    <div className="flex mt-4">
+      {benefits.length ? (
+        <div className="mr-6 gap-2.5 text-title-2xs">{benefits.map(renderBenefitLabel)}</div>
+      ) : null}
       {benefits.length ? (
-        <div className="pt-1">
+        <div className="pt-1 text-m">
           {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
         </div>
       ) : null}
@@ -86,7 +84,7 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
 
 function renderBenefitLabel(benefit: TextBenefit, i: number) {
   return (
-    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+    <div key={String(i)} className={`${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
     </div>
   );
@@ -99,7 +97,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -111,5 +109,5 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     secondary: 'text-white',
   };
 
-  return <div className={`text-sm mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
 }

package/src/ui-kit/Button/ButtonInner.tsx

@@ -15,7 +15,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button text-left">{text}</div>
+          <div className="text-base text-left">{text}</div>
         </div>
       ) : null}
       {appendRight ? appendRight : null}
@@ -30,7 +30,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
+  const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
 
   return [
     'flex items-center justify-center',

package/src/ui-kit/Foldable/Foldable.tsx

@@ -59,7 +59,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            {icon && <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />}
+            {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
           </button>
         ) : null}
       </div>