@redneckz/wildless-cms-uni-blocks 0.14.895 → 0.14.896

package/mobile/lib/ui-kit/SnowplowPopupDialog/SnowplowPopupDialog.d.ts

@@ -0,0 +1,20 @@
+import { type HandleAspectsProps } from '../../hooks/useAspects/handleAspects';
+import { type Aspects } from '../../hooks/useAspects/useAspects';
+import { type AspectsDef } from '../../model/AspectsProps';
+import { type HeadlineCommonProps } from '../../model/HeadlineType';
+import { type Picture } from '../../model/Picture';
+import { type LinkButtonContent } from '../LinkButton/LinkButtonContent';
+import { type RichTextProps } from '../RichText/RichTextProps';
+export interface SnowplowPopupDialogContent extends HeadlineCommonProps, RichTextProps {
+    img?: Picture;
+    buttons?: LinkButtonContent[];
+    dataShow?: AspectsDef[];
+    dataClose?: AspectsDef[];
+    delay?: number;
+}
+export interface SnowplowPopupDialogProps extends SnowplowPopupDialogContent {
+    onClose?: () => void;
+    aspects: Aspects;
+    handleAspects: (props: HandleAspectsProps) => void;
+}
+export declare const SnowplowPopupDialog: import("@redneckz/uni-jsx").UNIComponent<SnowplowPopupDialogProps, any, any>;

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

@@ -0,0 +1,22 @@
+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 { Headline } from '../../components/Headline/Headline.js';
+import { Dialog } from '../DialogManager/Dialog.js';
+import { Img } from '../Img/Img.js';
+import { renderButtonsSection } from '../LinkButton/renderButtonsSection.js';
+import { RichText } from '../RichText/RichText.js';
+export const SnowplowPopupDialog = JSX(({ title, description, buttons, img, dataClose, onClose, align, isDotted, __html, itemSize, richVersion, aspects, handleAspects, }) => {
+    const handleClose = useCallback(() => {
+        if (dataClose) {
+            handleAspects({
+                aspectsAttributes: dataClose,
+                aspects,
+                ev: {},
+            });
+        }
+        onClose?.();
+    }, [aspects, dataClose, onClose, handleAspects]);
+    return (_jsx(Dialog, { maxWidth: "sm", onClose: handleClose, children: _jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md", children: [_jsx(Img, { image: img }), title || description ? (_jsx(Headline, { align: align, className: "w-full", title: title, description: description, headlineVersion: "XS", isEmbedded: true })) : null, _jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: itemSize, richVersion: richVersion }), renderButtonsSection(buttons, { isVertical: true })] }) }));
+});
+//# sourceMappingURL=SnowplowPopupDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnowplowPopupDialog.js","sourceRoot":"","sources":["../../../src/ui-kit/SnowplowPopupDialog/SnowplowPopupDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAM9D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAgBhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CACpC,CAAC,EACC,KAAK,EACL,WAAW,EACX,OAAO,EACP,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,aAAa,GACd,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,SAAS,EAAE;YACb,aAAa,CAAC;gBACZ,iBAAiB,EAAE,SAAS;gBAC5B,OAAO;gBACP,EAAE,EAAE,EAAgC;aACrC,CAAC,CAAC;SACJ;QAED,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,KAAC,MAAM,IAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,YACxC,eAAK,SAAS,EAAC,8CAA8C,aAC3D,KAAC,GAAG,IAAC,KAAK,EAAE,GAAG,GAAI,EAClB,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,CACtB,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,eAAe,EAAC,IAAI,EACpB,UAAU,EAAE,IAAI,GAChB,CACH,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,QAAQ,IACP,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,EACD,oBAAoB,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,IAChD,GACC,CACV,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/src/components/CardTransfer/SubmitFailedDialog.tsx

@@ -18,7 +18,7 @@ export const SubmitFailedDialog = ({
   const description = errorCode ? `Код ошибки - ${errorCode}` : 'Пожалуйста, повторите позднее';
 
   return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+    <Dialog maxWidth="lg" onClose={onClose}>
       <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
         <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} width="136" height="136" />
         <Headline

package/mobile/src/retail/components/CaptchaDialog/CaptchaDialog.tsx

@@ -46,11 +46,7 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, o
   useEffect(handleCreateCaptcha, []);
 
   return (
-    <Dialog
-      className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg"
-      head={<Logo />}
-      onClose={closeAll}
-    >
+    <Dialog head={<Logo />} onClose={onClose}>
       <div className="flex flex-col gap-lg items-center">
         <div className="flex">
           <img className="grow" src={captcha}></img>

package/mobile/src/retail/components/ConsentBkiDialog/ConsentBkiDialog.tsx

@@ -49,10 +49,7 @@ export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
     const consentText = showRefuseContent ? refuseConsentText : defaultConsentText;
 
     return (
-      <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
-        onClose={onClose}
-      >
+      <Dialog onClose={onClose}>
         <div className="flex flex-col gap-xl items-center">
           <div role="button" onClick={openDocument}>
             <Heading

package/mobile/src/retail/components/DocumentDialog/DocumentDialog.tsx

@@ -13,7 +13,7 @@ export const DocumentDialog = JSX<DocumentDialogProps>(({ src, onClose, onDocume
   const isMobileMode = useMobileMode();
 
   return (
-    <Dialog className="mt-xl max-w-4xl mx-auto px-0 min-h-0 pb-0" onClose={onClose}>
+    <Dialog onClose={onClose}>
       {isMobileMode ? (
         <img src={src} />
       ) : (

package/mobile/src/retail/components/DraftDialog/DraftDialog.tsx

@@ -57,7 +57,7 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
   }, []);
 
   return (
-    <Dialog className="my-6xl max-w-4xl w-full min-h-fit mx-auto rounded-xl py-0" onClose={onClose}>
+    <Dialog onClose={onClose}>
       <div className="flex flex-col gap-lg items-center mt-xs mx-6xl">
         <Heading
           className="whitespace-pre-wrap text-center"

package/mobile/src/retail/components/DraftDialog/EmptyDraftDialog.tsx

@@ -26,10 +26,7 @@ export const EmptyDraftDialog = JSX<EmptyDraftDialogProps>(function ({ isDebit,
   }, []);
 
   return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
-      onClose={onClose}
-    >
+    <Dialog onClose={onClose}>
       <div className="flex flex-col gap-lg">
         <Heading className="text-center" title="Заявки не найдены" headingType="h3" />
         <Paragraph size="text-l" align="text-center">

package/mobile/src/retail/components/NoConsentDialog/NoConsentDialog.tsx

@@ -30,10 +30,7 @@ export const NoConsentDialog = JSX<NoConsentDialogProps>(({ attempts, onClose =
   }, [isMaxAttempts]);
 
   return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
-      onClose={handleClose}
-    >
+    <Dialog onClose={handleClose}>
       <div className="flex flex-col gap-xl items-center">
         <Paragraph align="text-center">Уважаемый клиент!</Paragraph>
         <Paragraph align="text-center">

package/mobile/src/retail/components/VerifyPhoneDialog/VerifyPhoneDialog.tsx

@@ -108,10 +108,7 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
     }, []);
 
     return (
-      <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl p-m"
-        onClose={onClose}
-      >
+      <Dialog maxWidth="lg" onClose={onClose}>
         <div className="flex flex-col gap-xl items-center rounded-md">
           <Headline
             className="w-full"

package/mobile/src/ui-kit/DialogManager/Dialog.tsx

@@ -1,26 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type ComponentType } from '../../model/ComponentType';
 import { type OnClickPreventableProps } from '../../model/OnClickProps';
 import type { OnCloseProps } from '../../model/OnCloseProps';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { CloseButton } from './CloseButton';
 
-export interface DialogProps extends ComponentType, OnCloseProps, OnClickPreventableProps {
+export interface DialogProps extends OnCloseProps, OnClickPreventableProps {
   head?: VNode;
+  maxWidth?: 'sm' | '4xl' | 'lg';
 }
 
-export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => (
+const MAX_WIDTH_STYLE = {
+  sm: 'max-w-sm top-1/3',
+  lg: 'max-w-lg',
+  '4xl': 'max-w-4xl',
+};
+
+export const Dialog = JSX<DialogProps>(({ head, maxWidth = '4xl', children, onClose, onClick }) => (
   <div
-    className={style('relative bg-white pt-0 p-lg', className)}
+    className={style(
+      'relative bg-white p-lg pb-6xl my-6xl mx-auto rounded-lg w-full',
+      MAX_WIDTH_STYLE[maxWidth],
+    )}
     role="dialog"
     title="Диалог"
     onClick={onClick}
   >
     <div className="sticky py-xl top-0 bg-white z-10">
-      <CloseButton className="absolute top-0 right-0" onClose={onClose} />
+      <CloseButton className="absolute top-0 right-0 z-10" onClose={onClose} />
       <div className="container">{head}</div>
     </div>
-    <div className="container pb-m mb-[74px] lg:mb-0">{children}</div>
+    <div className="container">{children}</div>
   </div>
 ));

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

@@ -45,19 +45,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 
   return (
-    <Dialog
-      className="pb-20"
-      head={
-        <div>
-          <Text size="text-h4" color="text-primary-text">
-            Выберите филиал
-          </Text>
-          <SelectedLocation defaultLocation={branches?.default} />
-          <SearchBar onSearch={setQuery} searchTerm={query} />
-        </div>
-      }
-      onClose={onClose}
-    >
+    <Dialog head={renderHead(query, setQuery, branches)} onClose={onClose}>
       {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
         <div>
           {regions
@@ -79,6 +67,16 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 });
 
+const renderHead = (query: string, setQuery: (_: string) => void, branches?: BranchesHeader) => (
+  <div>
+    <Text size="text-h4" color="text-primary-text">
+      Выберите филиал
+    </Text>
+    <SelectedLocation defaultLocation={branches?.default} />
+    <SearchBar onSearch={setQuery} searchTerm={query} />
+  </div>
+);
+
 const regionFirstLetter = (region: Region) => region.name?.charAt(0) ?? '';
 
 const cleanUpRegions = (regions: Region[]) =>

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

@@ -13,7 +13,7 @@ export interface ReportDialogProps extends LinkDoc, OnCloseProps {
 }
 
 export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target, onClose }) => (
-  <Dialog className="my-6xl min-h-fit w-fit mx-auto" onClose={onClose}>
+  <Dialog maxWidth="lg" onClose={onClose}>
     {__html ? <RichText __html={__html} /> : null}
     <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
       <Link

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

@@ -21,7 +21,7 @@ export const ResponseTypeDialog = JSX<ResponseNotificationProps>(({ ok, typeForm
       : 'Совсем скоро мы с вами свяжемся';
 
   return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+    <Dialog maxWidth="lg" onClose={onClose}>
       <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
         <Img image={{ icon: statusIcon, iconVersion: 'normal' }} width="136" height="136" />
         <Headline

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

@@ -28,7 +28,10 @@ export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationIt
   );
 
   return (
-    <Dialog head={<SearchInput autoFocus={true} {...searchInputProps} />} onClose={onClose}>
+    <Dialog
+      head={<SearchInput className="mt-s" autoFocus={true} {...searchInputProps} />}
+      onClose={onClose}
+    >
       <Sitemap navigationItems={searchItems} />
     </Dialog>
   );

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

@@ -0,0 +1,83 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Headline } from '../../components/Headline/Headline';
+import { type HandleAspectsProps } from '../../hooks/useAspects/handleAspects';
+import { type Aspects } from '../../hooks/useAspects/useAspects';
+import { type AspectsDef } from '../../model/AspectsProps';
+import { type HeadlineCommonProps } from '../../model/HeadlineType';
+import { type Picture } from '../../model/Picture';
+import { Dialog } from '../DialogManager/Dialog';
+import { Img } from '../Img/Img';
+import { type LinkButtonContent } from '../LinkButton/LinkButtonContent';
+import { renderButtonsSection } from '../LinkButton/renderButtonsSection';
+import { type PreventableEventWithTarget } from '../PreventableEvent';
+import { RichText } from '../RichText/RichText';
+import { type RichTextProps } from '../RichText/RichTextProps';
+export interface SnowplowPopupDialogContent extends HeadlineCommonProps, RichTextProps {
+  img?: Picture;
+  buttons?: LinkButtonContent[];
+  dataShow?: AspectsDef[];
+  dataClose?: AspectsDef[];
+  delay?: number;
+}
+
+export interface SnowplowPopupDialogProps extends SnowplowPopupDialogContent {
+  onClose?: () => void;
+  aspects: Aspects;
+  handleAspects: (props: HandleAspectsProps) => void;
+}
+
+export const SnowplowPopupDialog = JSX<SnowplowPopupDialogProps>(
+  ({
+    title,
+    description,
+    buttons,
+    img,
+    dataClose,
+    onClose,
+    align,
+    isDotted,
+    __html,
+    itemSize,
+    richVersion,
+    aspects,
+    handleAspects,
+  }) => {
+    const handleClose = useCallback(() => {
+      if (dataClose) {
+        handleAspects({
+          aspectsAttributes: dataClose,
+          aspects,
+          ev: {} as PreventableEventWithTarget,
+        });
+      }
+
+      onClose?.();
+    }, [aspects, dataClose, onClose, handleAspects]);
+
+    return (
+      <Dialog maxWidth="sm" onClose={handleClose}>
+        <div className="flex flex-col gap-lg items-center rounded-md">
+          <Img image={img} />
+          {title || description ? (
+            <Headline
+              align={align}
+              className="w-full"
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+            />
+          ) : null}
+          <RichText
+            __html={__html}
+            isDotted={isDotted}
+            itemSize={itemSize}
+            richVersion={richVersion}
+          />
+          {renderButtonsSection(buttons, { isVertical: true })}
+        </div>
+      </Dialog>
+    );
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.895",
+  "version": "0.14.896",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/CardTransfer/SubmitFailedDialog.tsx

@@ -18,7 +18,7 @@ export const SubmitFailedDialog = ({
   const description = errorCode ? `Код ошибки - ${errorCode}` : 'Пожалуйста, повторите позднее';
 
   return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+    <Dialog maxWidth="lg" onClose={onClose}>
       <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
         <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} width="136" height="136" />
         <Headline

package/src/retail/components/CaptchaDialog/CaptchaDialog.tsx

@@ -46,11 +46,7 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, o
   useEffect(handleCreateCaptcha, []);
 
   return (
-    <Dialog
-      className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg"
-      head={<Logo />}
-      onClose={closeAll}
-    >
+    <Dialog head={<Logo />} onClose={onClose}>
       <div className="flex flex-col gap-lg items-center">
         <div className="flex">
           <img className="grow" src={captcha}></img>

package/src/retail/components/ConsentBkiDialog/ConsentBkiDialog.tsx

@@ -49,10 +49,7 @@ export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
     const consentText = showRefuseContent ? refuseConsentText : defaultConsentText;
 
     return (
-      <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
-        onClose={onClose}
-      >
+      <Dialog onClose={onClose}>
         <div className="flex flex-col gap-xl items-center">
           <div role="button" onClick={openDocument}>
             <Heading

package/src/retail/components/DocumentDialog/DocumentDialog.tsx

@@ -13,7 +13,7 @@ export const DocumentDialog = JSX<DocumentDialogProps>(({ src, onClose, onDocume
   const isMobileMode = useMobileMode();
 
   return (
-    <Dialog className="mt-xl max-w-4xl mx-auto px-0 min-h-0 pb-0" onClose={onClose}>
+    <Dialog onClose={onClose}>
       {isMobileMode ? (
         <img src={src} />
       ) : (

package/src/retail/components/DraftDialog/DraftDialog.tsx

@@ -57,7 +57,7 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
   }, []);
 
   return (
-    <Dialog className="my-6xl max-w-4xl w-full min-h-fit mx-auto rounded-xl py-0" onClose={onClose}>
+    <Dialog onClose={onClose}>
       <div className="flex flex-col gap-lg items-center mt-xs mx-6xl">
         <Heading
           className="whitespace-pre-wrap text-center"

package/src/retail/components/DraftDialog/EmptyDraftDialog.tsx

@@ -26,10 +26,7 @@ export const EmptyDraftDialog = JSX<EmptyDraftDialogProps>(function ({ isDebit,
   }, []);
 
   return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
-      onClose={onClose}
-    >
+    <Dialog onClose={onClose}>
       <div className="flex flex-col gap-lg">
         <Heading className="text-center" title="Заявки не найдены" headingType="h3" />
         <Paragraph size="text-l" align="text-center">

package/src/retail/components/NoConsentDialog/NoConsentDialog.tsx

@@ -30,10 +30,7 @@ export const NoConsentDialog = JSX<NoConsentDialogProps>(({ attempts, onClose =
   }, [isMaxAttempts]);
 
   return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
-      onClose={handleClose}
-    >
+    <Dialog onClose={handleClose}>
       <div className="flex flex-col gap-xl items-center">
         <Paragraph align="text-center">Уважаемый клиент!</Paragraph>
         <Paragraph align="text-center">

package/src/retail/components/VerifyPhoneDialog/VerifyPhoneDialog.tsx

@@ -108,10 +108,7 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
     }, []);
 
     return (
-      <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl p-m"
-        onClose={onClose}
-      >
+      <Dialog maxWidth="lg" onClose={onClose}>
         <div className="flex flex-col gap-xl items-center rounded-md">
           <Headline
             className="w-full"

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -1,26 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type ComponentType } from '../../model/ComponentType';
 import { type OnClickPreventableProps } from '../../model/OnClickProps';
 import type { OnCloseProps } from '../../model/OnCloseProps';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { CloseButton } from './CloseButton';
 
-export interface DialogProps extends ComponentType, OnCloseProps, OnClickPreventableProps {
+export interface DialogProps extends OnCloseProps, OnClickPreventableProps {
   head?: VNode;
+  maxWidth?: 'sm' | '4xl' | 'lg';
 }
 
-export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => (
+const MAX_WIDTH_STYLE = {
+  sm: 'max-w-sm top-1/3',
+  lg: 'max-w-lg',
+  '4xl': 'max-w-4xl',
+};
+
+export const Dialog = JSX<DialogProps>(({ head, maxWidth = '4xl', children, onClose, onClick }) => (
   <div
-    className={style('relative bg-white pt-0 p-lg', className)}
+    className={style(
+      'relative bg-white p-lg pb-6xl my-6xl mx-auto rounded-lg w-full',
+      MAX_WIDTH_STYLE[maxWidth],
+    )}
     role="dialog"
     title="Диалог"
     onClick={onClick}
   >
     <div className="sticky py-xl top-0 bg-white z-10">
-      <CloseButton className="absolute top-0 right-0" onClose={onClose} />
+      <CloseButton className="absolute top-0 right-0 z-10" onClose={onClose} />
       <div className="container">{head}</div>
     </div>
-    <div className="container pb-m mb-[74px] lg:mb-0">{children}</div>
+    <div className="container">{children}</div>
   </div>
 ));

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

@@ -45,19 +45,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 
   return (
-    <Dialog
-      className="pb-20"
-      head={
-        <div>
-          <Text size="text-h4" color="text-primary-text">
-            Выберите филиал
-          </Text>
-          <SelectedLocation defaultLocation={branches?.default} />
-          <SearchBar onSearch={setQuery} searchTerm={query} />
-        </div>
-      }
-      onClose={onClose}
-    >
+    <Dialog head={renderHead(query, setQuery, branches)} onClose={onClose}>
       {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
         <div>
           {regions
@@ -79,6 +67,16 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 });
 
+const renderHead = (query: string, setQuery: (_: string) => void, branches?: BranchesHeader) => (
+  <div>
+    <Text size="text-h4" color="text-primary-text">
+      Выберите филиал
+    </Text>
+    <SelectedLocation defaultLocation={branches?.default} />
+    <SearchBar onSearch={setQuery} searchTerm={query} />
+  </div>
+);
+
 const regionFirstLetter = (region: Region) => region.name?.charAt(0) ?? '';
 
 const cleanUpRegions = (regions: Region[]) =>

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

@@ -13,7 +13,7 @@ export interface ReportDialogProps extends LinkDoc, OnCloseProps {
 }
 
 export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target, onClose }) => (
-  <Dialog className="my-6xl min-h-fit w-fit mx-auto" onClose={onClose}>
+  <Dialog maxWidth="lg" onClose={onClose}>
     {__html ? <RichText __html={__html} /> : null}
     <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
       <Link

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

@@ -21,7 +21,7 @@ export const ResponseTypeDialog = JSX<ResponseNotificationProps>(({ ok, typeForm
       : 'Совсем скоро мы с вами свяжемся';
 
   return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+    <Dialog maxWidth="lg" onClose={onClose}>
       <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
         <Img image={{ icon: statusIcon, iconVersion: 'normal' }} width="136" height="136" />
         <Headline

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

@@ -28,7 +28,10 @@ export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationIt
   );
 
   return (
-    <Dialog head={<SearchInput autoFocus={true} {...searchInputProps} />} onClose={onClose}>
+    <Dialog
+      head={<SearchInput className="mt-s" autoFocus={true} {...searchInputProps} />}
+      onClose={onClose}
+    >
       <Sitemap navigationItems={searchItems} />
     </Dialog>
   );

package/src/ui-kit/SnowplowPopupDialog/SnowplowPopupDialog.fixture.tsx

@@ -0,0 +1,32 @@
+import '../../setup-fixture';
+import { noop } from '../../utils/noop';
+
+import { SnowplowPopupDialog, type SnowplowPopupDialogProps } from './SnowplowPopupDialog';
+
+const PROPS: SnowplowPopupDialogProps = {
+  aspects: {},
+  onClose: () => noop(),
+  handleAspects: () => noop(),
+  title: 'Заголовок',
+  description:
+    'Описание, но не короткое, а длинное описание, так что бы много слов и в несколько строк',
+  align: 'text-center',
+  img: {
+    src: 'chair.png',
+    size: {
+      width: 180,
+      height: 80,
+    },
+  },
+  buttons: [
+    {
+      version: 'primary',
+      text: 'Подробнее',
+    },
+  ],
+  __html: '<ul><li>Список 1</li></ul>',
+};
+
+export default {
+  default: <SnowplowPopupDialog {...PROPS} />,
+};