@redneckz/wildless-cms-uni-blocks 0.12.5 → 0.12.6

package/lib/ui-kit/CookiePopup/CookiePopup.js

@@ -2,18 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style.js';
+import { useDebouncedEffect } from '../../utils/useDebouncedEffect.js';
 import { CloseButton } from '../Dialog/CloseButton.js';
 import { useDialogProps } from '../Dialog/useDialogProps.js';
 import { LinkWrapper } from '../LinkWrapper/LinkWrapper.js';
 import { Paragraph } from '../Paragraph/Paragraph.js';
-export const COOKIE_DIALOG_ID = 'cookie';
-export const LOCAL_STORAGE_NAME = 'cookieClose';
+const COOKIE_DIALOG_ID = 'cookie';
+const DIALOG_INITIAL_DELAY = 3 * 1000;
 export const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
-    const { isOpened, onClose } = useDialogProps(COOKIE_DIALOG_ID, !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME));
+    const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+    useDebouncedEffect(() => {
+        if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
+            open();
+        }
+    }, [], DIALOG_INITIAL_DELAY);
     const handleClose = useCallback(() => {
-        globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
-        onClose && onClose();
-    }, [onClose]);
+        globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
+        close();
+    }, [close]);
     return isOpened ? (_jsx("div", { className: "container z-40 fixed bottom-0 left-0 right-0 pointer-events-none", children: _jsxs("div", { className: "bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [_jsx("div", { className: "flex-1", children: _jsxs(Paragraph, { size: "text-s-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", _jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(termLink?.href)), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", _jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(personalDataPolicyLink?.href)), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), _jsx("div", { className: "w-24 flex justify-end", children: _jsx(CloseButton, { className: "bg-main-gray rounded-md", onClick: handleClose }) })] }) })) : null;
 });
 const getStyleLinkWrapper = (href) => ['inline mx-1', href ? 'text-green-dark' : ''];

package/lib/ui-kit/CookiePopup/CookiePopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CookiePopup.js","sourceRoot":"","sources":["../../../src/ui-kit/CookiePopup/CookiePopup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AACzC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,EAAE,EAAE;IACxF,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,cAAc,CAC1C,gBAAgB,EAChB,CAAC,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAAC,CACtD,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;QAE7D,OAAO,IAAI,OAAO,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAC,kEAAkE,YAC/E,eAAK,SAAS,EAAC,wGAAwG,aACrH,cAAK,SAAS,EAAC,QAAQ,YACrB,MAAC,SAAS,IAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,mBAAmB,2LAEtD,KAAC,WAAW,IACV,QAAQ,QACR,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,KACjD,QAAQ,uBAGA,+0BAGd,KAAC,WAAW,IACV,QAAQ,QACR,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC,KAC/D,sBAAsB,oNAGd,2gBAGJ,GACR,EACN,cAAK,SAAS,EAAC,uBAAuB,YACpC,KAAC,WAAW,IAAC,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,WAAW,GAAI,GACrE,IACF,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"CookiePopup.js","sourceRoot":"","sources":["../../../src/ui-kit/CookiePopup/CookiePopup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOnD,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AAClC,MAAM,oBAAoB,GAAG,CAAC,GAAG,IAAI,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,EAAE,EAAE;IACxF,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAEnE,kBAAkB,CAChB,GAAG,EAAE;QACH,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAE;YACvD,IAAI,EAAE,CAAC;SACR;IACH,CAAC,EACD,EAAE,EACF,oBAAoB,CACrB,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAE3D,KAAK,EAAE,CAAC;IACV,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAC,kEAAkE,YAC/E,eAAK,SAAS,EAAC,wGAAwG,aACrH,cAAK,SAAS,EAAC,QAAQ,YACrB,MAAC,SAAS,IAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,mBAAmB,2LAEtD,KAAC,WAAW,IACV,QAAQ,QACR,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,KACjD,QAAQ,uBAGA,+0BAGd,KAAC,WAAW,IACV,QAAQ,QACR,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC,KAC/D,sBAAsB,oNAGd,2gBAGJ,GACR,EACN,cAAK,SAAS,EAAC,uBAAuB,YACpC,KAAC,WAAW,IAAC,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,WAAW,GAAI,GACrE,IACF,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC"}

package/lib/ui-kit/Dialog/Dialog.js

@@ -15,6 +15,6 @@ export const Dialog = JSX(({ className, isOpened, head, children, onClose }) =>
             globalThis.document?.removeEventListener('keydown', handleEscape);
         };
     }, [onClose]);
-    return isOpened ? (_jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: _jsxs("div", { className: "relative container pb-12 min-h-full", children: [_jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [_jsx(CloseButton, { className: "absolute top-10 -right-12", onClick: onClose }), head] }), children] }) })) : null;
+    return isOpened ? (_jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: _jsxs("div", { className: "relative container pb-12 min-h-full", children: [_jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [_jsx(CloseButton, { className: "absolute top-0 -right-12", onClick: onClose }), head] }), children] }) })) : null;
 });
 //# sourceMappingURL=Dialog.js.map

package/lib/ui-kit/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/ui-kit/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1F,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;YAChD,IAAI,GAAG,KAAK,QAAQ,EAAE;gBACpB,OAAO,IAAI,OAAO,EAAE,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,UAAU,CAAC,QAAQ,EAAE,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAE/D,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,QAAQ,EAAE,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACpE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cACE,SAAS,EAAE,KAAK,CACd,2FAA2F,EAC3F,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,YAEb,eAAK,SAAS,EAAC,qCAAqC,aAClD,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,WAAW,IAAC,SAAS,EAAC,2BAA2B,EAAC,OAAO,EAAE,OAAO,GAAI,EACtE,IAAI,IACD,EACL,QAAQ,IACL,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/ui-kit/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1F,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;YAChD,IAAI,GAAG,KAAK,QAAQ,EAAE;gBACpB,OAAO,IAAI,OAAO,EAAE,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,UAAU,CAAC,QAAQ,EAAE,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAE/D,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,QAAQ,EAAE,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACpE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cACE,SAAS,EAAE,KAAK,CACd,2FAA2F,EAC3F,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,YAEb,eAAK,SAAS,EAAC,qCAAqC,aAClD,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,WAAW,IAAC,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,OAAO,GAAI,EACrE,IAAI,IACD,EACL,QAAQ,IACL,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC"}

package/lib/ui-kit/Dialog/useDialogProps.d.ts

@@ -1,5 +1,7 @@
 import type { DialogProps } from './Dialog';
 import type { DialogInitialParams } from './DialogAction';
-export declare function useDialogProps(id: string, initOpen?: boolean): DialogProps & DialogInitialParams & {
+export declare function useDialogProps(id: string, isOpenedOnInit?: boolean): DialogProps & DialogInitialParams & {
     wasOpened: boolean;
+    open: () => void;
+    close: () => void;
 };

package/lib/ui-kit/Dialog/useDialogProps.js

@@ -2,8 +2,8 @@ import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus.js';
 import { useBool } from '../../hooks/useBool.js';
 import { useDialogHandlers } from './useDialogHandlers.js';
-export function useDialogProps(id, initOpen = false) {
-    const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
+export function useDialogProps(id, isOpenedOnInit = false) {
+    const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
     const [params, setParams] = useState({ id });
     const wasOpened = useRef(isOpened);
     wasOpened.current ||= isOpened;
@@ -16,19 +16,21 @@ export function useDialogProps(id, initOpen = false) {
             close();
         }
     }, [id]);
+    const handleClose = useCallback(() => {
+        close();
+        defaultEventBus.fire('dialog', { type: 'close' });
+    }, []);
     useDialogHandlers({
         onOpen: handleOpen,
         onClose: close,
     });
-    const handleCloseAsEventSource = useCallback(() => {
-        close();
-        defaultEventBus.fire('dialog', { type: 'close' });
-    }, []);
     return {
         ...params,
         isOpened,
         wasOpened: wasOpened.current,
-        onClose: handleCloseAsEventSource,
+        open,
+        close,
+        onClose: handleClose,
     };
 }
 //# sourceMappingURL=useDialogProps.js.map

package/lib/ui-kit/Dialog/useDialogProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Dialog/useDialogProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAG9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,UAAU,cAAc,CAC5B,EAAU,EACV,QAAQ,GAAG,KAAK;IAEhB,MAAM,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAsB,EAAE,EAAE,EAAE,CAAC,CAAC;IAElE,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACnC,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC;IAE/B,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YACf,SAAS,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,EAAE,CAAC;SACR;aAAM;YACL,KAAK,EAAE,CAAC;SACT;IACH,CAAC,EACD,CAAC,EAAE,CAAC,CACL,CAAC;IAEF,iBAAiB,CAAC;QAChB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,EAAE;QAChD,KAAK,EAAE,CAAC;QACR,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,GAAG,MAAM;QACT,QAAQ;QACR,SAAS,EAAE,SAAS,CAAC,OAAO;QAC5B,OAAO,EAAE,wBAAwB;KAClC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useDialogProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Dialog/useDialogProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAG9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,UAAU,cAAc,CAC5B,EAAU,EACV,cAAc,GAAG,KAAK;IAEtB,MAAM,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAsB,EAAE,EAAE,EAAE,CAAC,CAAC;IAElE,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACnC,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC;IAE/B,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YACf,SAAS,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,EAAE,CAAC;SACR;aAAM;YACL,KAAK,EAAE,CAAC;SACT;IACH,CAAC,EACD,CAAC,EAAE,CAAC,CACL,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,KAAK,EAAE,CAAC;QACR,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iBAAiB,CAAC;QAChB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,OAAO;QACL,GAAG,MAAM;QACT,QAAQ;QACR,SAAS,EAAE,SAAS,CAAC,OAAO;QAC5B,IAAI;QACJ,KAAK;QACL,OAAO,EAAE,WAAW;KACrB,CAAC;AACJ,CAAC"}

package/lib/ui-kit/Paragraph/Paragraph.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-export const Paragraph = JSX(({ children, ...style }) => (_jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+import { style } from '../../utils/style.js';
+export const Paragraph = JSX(({ children, ...styleProps }) => (_jsx("p", { className: style('font-sans', Object.values(styleProps)), children: children })));
 //# sourceMappingURL=Paragraph.js.map

package/lib/ui-kit/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../src/ui-kit/Paragraph/Paragraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAiB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACvE,YAAG,SAAS,EAAE,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAAG,QAAQ,GAAK,CAC/E,CAAC,CAAC"}
+{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../src/ui-kit/Paragraph/Paragraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAiB,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,CAAC,CAC5E,YAAG,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,YAAG,QAAQ,GAAK,CAC5E,CAAC,CAAC"}

package/lib/ui-kit/Text/Text.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-export const Text = JSX(({ children, ...style }) => (_jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+import { style } from '../../utils/style.js';
+export const Text = JSX(({ children, ...styleProps }) => (_jsx("span", { className: style('font-sans', Object.values(styleProps)), children: children })));
 //# sourceMappingURL=Text.js.map

package/lib/ui-kit/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/ui-kit/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAUxC,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAC7D,eAAM,SAAS,EAAE,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAAG,QAAQ,GAAQ,CACrF,CAAC,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/ui-kit/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAS1C,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,CAAC,CAClE,eAAM,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,YAAG,QAAQ,GAAQ,CAClF,CAAC,CAAC"}

package/lib/ui-kit/Text/TextProps.d.ts

@@ -6,7 +6,7 @@ export declare type TextSize = '' | 'text-xs' | 'text-xs-light' | 'text-s-light'
 /**
  * @title Размер текста
  */
-export declare type TitleSize = '' | 'text-h6' | 'text-h5' | 'text-h5-light' | 'text-h4' | 'text-h3' | 'text-h2' | 'text-h1' | 'text-h0' | 'text-m-title' | 'text-m-title-xs' | 'title-extra' | 'title-huge';
+export declare type TitleSize = '' | 'text-h6' | 'text-h5' | 'text-h5-light' | 'text-h4' | 'text-h3' | 'text-h2' | 'text-h1' | 'text-h0' | 'title-extra' | 'title-huge';
 /**
  * @title Цвет текста
  */

package/mobile/bundle/bundle.umd.js

@@ -351,7 +351,7 @@
         return (jsx(Tag, { className: style('font-sans m-0', styles[headingType], className), children: title || children }));
     });
 
-    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+    const Paragraph = JSX(({ children, ...styleProps }) => (jsx("p", { className: style('font-sans', Object.values(styleProps)), children: children })));
 
     const headlineVersionStyles = {
         XXL: {
@@ -651,7 +651,7 @@
         return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, pathPrefix: pathPrefix }));
     });
 
-    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+    const Text = JSX(({ children, ...styleProps }) => (jsx("span", { className: style('font-sans', Object.values(styleProps)), children: children })));
 
     const bonusBenefitAlign = 'text-left';
 
@@ -1297,7 +1297,7 @@
 
     const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
 
-    const labelSize$1 = 'text-l';
+    const labelSize = 'text-l';
 
     const iconBgStyles = {
         primary: 'bg-main-divider',
@@ -1340,7 +1340,7 @@
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
     const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: labelSize$1, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContactsGroup) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
@@ -1485,7 +1485,7 @@
 
     const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-        return (jsx(BlockWrapper, { className: style('min-h-80', className), defaultPadding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
     });
 
     const sum = (list = []) => list.reduce((a, b) => a + b, 0);
@@ -1494,48 +1494,51 @@
 
     const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
 
-    const labelSize = 'text-l';
-
-    const BenefitItem = JSX(({ className, icon, label, description, benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-s', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
-    function getBenefitIconBgStyle(benefitsVersion) {
-        const bgColorStyle = benefitsVersion === 'normal'
+    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
             ? 'bg-secondary-light text-primary-main'
-            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
-        return style('w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon', bgColorStyle);
-    }
+            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const renderBenefit$1 = (benefitsVersion) => ({ type, ...benefit }, i) => {
-        if (type === 'rte' && '__html' in benefit) {
-            return jsx(RichText, { __html: benefit.__html });
-        }
-        return jsx(BenefitItem, { benefitsVersion: benefitsVersion, ...benefit }, String(i));
-    };
+    const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
+
+    const renderBenefitLabel = (label, i) => label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: "text-h6", children: label }, `label-${i}`)) : null;
+
+    const renderBenefitText = (_, i) => _.type === 'rte' && '__html' in _ && _.__html ? (jsx(RichText, { ..._ }, `rte-${i}`)) : ([
+        'label' in _ ? renderBenefitLabel(_.label, i) : null,
+        'description' in _ ? renderBenefitDescription(_.description, i) : null,
+    ]);
+
+    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-s', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
 
     const MAX_BENEFITS_LEN_DEVIATION = 16;
     const benefitLength = (_) => _.type === 'rte'
         ? _.__html?.length || 0
         : Math.max(_.label?.length || 0, _.description?.length || 0);
     const isDistortedBenefits = (benefits) => deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
-    const BenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map(renderBenefit$1(benefitsVersion)) })) : null);
+    const DefaultBenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map((_, i) => (jsx(BenefitItem, { benefitsVersion: benefitsVersion, ..._ }, String(i)))) })) : null);
+
+    const TabularBenefitsList = JSX(({ className, benefits }) => benefits?.length ? (jsx("div", { className: style('grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs', className), children: benefits.flatMap(renderBenefitText) })) : null);
+
+    const BenefitsList = JSX(({ isTabularBenefits, ...rest }) => isTabularBenefits ? jsx(TabularBenefitsList, { ...rest }) : jsx(DefaultBenefitsList, { ...rest }));
 
     const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
     const renderTag = (tag, key) => (jsx("div", { className: "py-2 px-2.5 border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m-light", children: tag }) }, String(key)));
 
-    const BaseProductTile = JSX(({ className, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefits, benefitsVersion, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign, directionRight = true } = {}, children, }) => {
+    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefitsVersion, isTabularBenefits, benefits, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
-        return (jsx(BaseTile, { className: className, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(directionRight ? { rightImage: img } : { leftImage: img }), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
     });
+    const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
 
     const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
     const renderValueBlock = (title, value = 0) => (jsxs("div", { className: "basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: "text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
-    const PictureText = JSX(({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsx(BaseProductTile, { className: "h-full", headlineVersion: headlineVersion, align: align, isInsetTitle: false, ...rest, imageOptions: { directionRight: false, imageAlign: 'center', ...rest.imageOptions }, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
+    const PictureText = JSX(({ className, padding, headlineVersion = 'M', align = 'text-center', sum, monthLimit, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-default", padding: padding, headlineVersion: headlineVersion, align: align, isInsetTitle: false, imageOptions: { directionRight: false, imageAlign: 'center', ...imageOptions }, ...rest, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
 
     const GOLDEN_RATIO = 1.618;
     const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isPadding: false }), jsx("figure", { className: "m-0 mt-m min-w-[80%]", children: renderShimmer() })] })));
@@ -1555,11 +1558,11 @@
                         } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", ...rest, children: [backwardButton?.text
+    const ProductBlock = JSX(({ className, padding, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", padding: padding, ...rest, children: [backwardButton?.text
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
                 : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] })));
 
-    const ProductGallery = JSX(({ className, slides = [], ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden relative', className), defaultPadding: "p-m", ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: slides
+    const ProductGallery = JSX(({ className, padding, slides = [], ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden relative', className), padding: padding, ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: slides
                 .map((s) => s.productBlock)
                 .map((_, i) => (jsx("div", { className: "box-border h-full", role: "listitem", children: jsx(BaseProductTile, { className: "px-5 h-full", headlineVersion: "L", ..._, ...rest }) }, String(i)))) }) })));
 
@@ -1583,44 +1586,41 @@
     };
 
     const STEPS_SIZE_MAP = {
-        normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-        small: 'h-12 w-12 min-w-12 min-h-12',
+        normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
+        small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
     };
     const STEPS_TILE_DESCRIPTION_HEIGHT_MAP = {
-        normal: 'min-h-[70px]',
+        normal: '',
         small: 'min-h-12',
     };
     const styleMap = STEPS_BLOCK_STYLE;
-    const StepsBlock = JSX(({ className = '', title, description, showLines = true, steps, size = 'normal', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `box-border flex flex-col ${className}`, defaultPadding: "px-4 py-6", version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("p", { className: `text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`, children: description })) : null, 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(renderStep(size, version, showLines)) }) })) : null] })));
+    const StepsBlock = JSX(({ className = '', title, description, steps, buttons, size = 'normal', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border flex flex-col gap-2', className), defaultPadding: "p-default", version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "text-left", title: title }) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", children: jsx("span", { className: styleMap.description, children: description }) })) : null, steps?.length ? (jsx("div", { className: "box-border", children: jsx("div", { className: "flex flex-col justify-between", children: steps.map(renderStep(size, version)) }) })) : null, renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })] })));
     // TODO: Create universal function for this case
-    const renderStep = (size, version, showLines) => 
+    const renderStep = (size, version) => 
     // Linter doesn't understand that switch processes all cases
     // eslint-disable-next-line consistent-return
-    (step, i, steps) => {
+    (step, i) => {
         const { type } = step;
         if (!(type === 'default' || type === 'rte')) {
             return null;
         }
         switch (type) {
             case 'default':
-                return renderDefaultStep(size, version, showLines)(step, i, steps);
+                return renderDefaultStep(size, version)(step, i);
             case 'rte':
                 return jsx(RichText, { __html: step.__html });
             default:
                 assertUnreachable(step);
         }
     };
-    const renderDefaultStep = (size, version, showLines) => (step, i, steps) => {
-        const isLastStep = steps.length - 1 === i;
-        const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-        return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden flex-shrink-0", children: [renderIconArea(size, version)(step, i), isLastStep ? null : (jsx("div", { className: `min-h-8 h-full w-0.5 ${showLines ? styleMap.iconConnector : ''} ${margin}` }))] }), jsxs("div", { className: `flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`, children: [step.label ? (jsx("div", { className: "text-m-title-xs font-medium m-0 text-left mb-1", children: step.label })) : null, step.description ? (jsx("div", { className: `text-s ${styleMap.description} text-left`, children: step.description })) : null] })] }) }, String(i)));
-    };
+    const renderDefaultStep = (size, version) => (step, i) => (jsx("div", { className: "contents", children: jsxs("div", { className: "flex flex-row text-center relative py-3", children: [jsx("div", { className: "overflow-hidden flex flex-shrink-0 items-center", children: renderIconArea(size, version)(step, i) }), jsxs("div", { className: style('flex flex-col justify-center h-fit', STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]), children: [step.label ? jsx("div", { className: "text-l m-0 text-left", children: step.label }) : null, step.description ? (jsx("div", { className: style('text-s font-light text-left', styleMap.description), children: step.description })) : null] })] }) }, String(i)));
     const renderIconArea = (size, version) => (step, i) => {
-        const iconAreaSize = STEPS_SIZE_MAP[size];
-        const iconSize = size === 'normal' ? '38' : '27';
-        const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
+        const iconSize = size === 'normal' ? '38' : '24';
         const iconVersion = version === 'secondary' ? 'white' : 'color';
-        return (jsx("div", { className: `${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium flex self-center ${iconTextSize}`, children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
+        const isImg = Boolean(step?.icon?.src);
+        const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+        const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
+        return (jsx("div", { className: style(iconAreaSize, containerStyle, 'z-10 mr-3 flex justify-center content-center'), children: jsx("span", { className: "flex self-center text-h4 text-secondary-text group-data-secondary:text-white", children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
     };
 
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
@@ -1945,6 +1945,13 @@
         }, [scrollTarget]);
     }
 
+    const useDebouncedEffect = (effect, deps, delay = 300) => useEffect(() => {
+        const timerId = setTimeout(effect, delay);
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, deps);
+
     const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
     function useDialogHandlers({ onOpen, onClose } = {}) {
@@ -1962,8 +1969,8 @@
         }), [onOpen, onClose]);
     }
 
-    function useDialogProps(id, initOpen = false) {
-        const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
+    function useDialogProps(id, isOpenedOnInit = false) {
+        const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
         const [params, setParams] = useState({ id });
         const wasOpened = useRef(isOpened);
         wasOpened.current ||= isOpened;
@@ -1976,30 +1983,37 @@
                 close();
             }
         }, [id]);
+        const handleClose = useCallback(() => {
+            close();
+            defaultEventBus.fire('dialog', { type: 'close' });
+        }, []);
         useDialogHandlers({
             onOpen: handleOpen,
             onClose: close,
         });
-        const handleCloseAsEventSource = useCallback(() => {
-            close();
-            defaultEventBus.fire('dialog', { type: 'close' });
-        }, []);
         return {
             ...params,
             isOpened,
             wasOpened: wasOpened.current,
-            onClose: handleCloseAsEventSource,
+            open,
+            close,
+            onClose: handleClose,
         };
     }
 
     const COOKIE_DIALOG_ID = 'cookie';
-    const LOCAL_STORAGE_NAME = 'cookieClose';
+    const DIALOG_INITIAL_DELAY = 3 * 1000;
     const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
-        const { isOpened, onClose } = useDialogProps(COOKIE_DIALOG_ID, !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME));
+        const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+        useDebouncedEffect(() => {
+            if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
+                open();
+            }
+        }, [], DIALOG_INITIAL_DELAY);
         const handleClose = useCallback(() => {
-            globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
-            onClose && onClose();
-        }, [onClose]);
+            globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
+            close();
+        }, [close]);
         return isOpened ? (jsx("div", { className: "container z-40 fixed bottom-0 left-0 right-0 pointer-events-none", children: jsxs("div", { className: "bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx("div", { className: "flex-1", children: jsxs(Paragraph, { size: "text-s-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(termLink?.href)), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(personalDataPolicyLink?.href)), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClick: handleClose }) })] }) })) : null;
     });
     const getStyleLinkWrapper = (href) => ['inline mx-1', href ? 'text-green-dark' : ''];
@@ -2079,7 +2093,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.12.5";
+    const packageVersion = "0.12.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;