@pushwoosh/smart-components-kit 1.0.89 → 1.1.0

package/CampaignsConfigurationDrawer/CampaignsConfigurationDrawer.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { type CampaignsConfigurationDrawerProps } from './types';
-export declare function CampaignsConfigurationDrawer(props: CampaignsConfigurationDrawerProps): React.JSX.Element;
+export declare function CampaignsConfigurationDrawer(props: CampaignsConfigurationDrawerProps): import("react").JSX.Element;

package/CampaignsConfigurationDrawer/CampaignsConfigurationDrawer.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer, DrawerBody, DrawerHeader } from '@pushwoosh/dumb-components';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon, EmailIcon, MobileIcon, PushIcon, SmsIcon, WhatsappIcon } from '@pushwoosh/kit-icons';
 import { H1, H3 } from '@pushwoosh/kit-typography';
 import { Card } from './components/Card';
+import { useLang } from './polyglot';
 import { CloseButtonWrap } from './styled';
 export function CampaignsConfigurationDrawer(props) {
   const {
@@ -13,61 +14,109 @@ export function CampaignsConfigurationDrawer(props) {
     segmentTitle = '',
     onClose
   } = props;
-  return React.createElement(Drawer, {
+  const lang = useLang();
+  return _jsxs(Drawer, {
     size: "medium",
     isOpen: isOpen,
-    onClose: onClose
-  }, React.createElement(DrawerHeader, null, React.createElement(Horizontal, {
-    "$justifyContent": "space-between",
-    "$alignItems": "center",
-    "$margin": "0 0 4px"
-  }, React.createElement(H1, null, "Create campaign"), React.createElement(CloseButtonWrap, {
-    onClick: onClose
-  }, React.createElement(CloseIcon, {
-    size: "medium"
-  })))), React.createElement(DrawerBody, null, React.createElement(Vertical, {
-    "$gap": "32px"
-  }, React.createElement(Horizontal, {
-    "$gap": "6px"
-  }, React.createElement(Card, {
-    title: "One-time push notification",
-    description: "Select or create content, adjust notifications, and choose the best time to send.",
-    icon: PushIcon,
-    href: `/applications/${applicationCode}/one-time-messages/send?type=push&segment=${segmentCode}`
-  }), React.createElement(Card, {
-    title: "One-time email",
-    description: "Select content, set a subject, personalize sender info, and choose a send time.",
-    icon: EmailIcon,
-    href: `/applications/${applicationCode}/one-time-messages/send?type=email&segment=${segmentCode}`
-  })), React.createElement(Vertical, {
-    "$gap": "8px"
-  }, React.createElement(H3, null, "Advanced campaign based by channel"), React.createElement(Columns, {
-    "$sizes": "1fr 1fr",
-    "$gap": "6px"
-  }, React.createElement(Card, {
-    title: "Push notification based",
-    description: "Create a targeted campaign for users and plan follow-up for unopened messages.",
-    icon: PushIcon,
-    href: `/journeys/${applicationCode}/create?channel=push&segment=${segmentCode}&segment_title=${segmentTitle}`
-  }), React.createElement(Card, {
-    title: "Email campaign",
-    description: "Create tailored communication strategies with follow-ups based on user actions.",
-    icon: EmailIcon,
-    href: `/journeys/${applicationCode}/create?channel=email&segment=${segmentCode}&segment_title=${segmentTitle}`
-  }), React.createElement(Card, {
-    title: "In-app campaign",
-    description: "Display the banner to the intended users and monitor their subsequent actions.",
-    icon: MobileIcon,
-    href: `/journeys/${applicationCode}/create?channel=inapp&segment=${segmentCode}&segment_title=${segmentTitle}`
-  }), React.createElement(Card, {
-    title: "SMS campaign",
-    description: "Automate SMS delivery for quick, reliable messaging.",
-    icon: SmsIcon,
-    href: `/journeys/${applicationCode}/create?channel=sms&segment=${segmentCode}&segment_title=${segmentTitle}`
-  }), React.createElement(Card, {
-    title: "WhatsApp campaign",
-    description: "Engage your audience on WhatsApp with rich, personalized messages.",
-    icon: WhatsappIcon,
-    href: `/journeys/${applicationCode}/create?channel=whatsapp&segment=${segmentCode}&segment_title=${segmentTitle}`
-  }))))));
+    onClose: onClose,
+    children: [_jsx(DrawerHeader, {
+      children: _jsxs(Horizontal, {
+        "$justifyContent": "space-between",
+        "$alignItems": "center",
+        "$margin": "0 0 4px",
+        children: [_jsx(H1, {
+          children: lang({
+            message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.HEADING'
+          })
+        }), _jsx(CloseButtonWrap, {
+          onClick: onClose,
+          children: _jsx(CloseIcon, {
+            size: "medium"
+          })
+        })]
+      })
+    }), _jsx(DrawerBody, {
+      children: _jsxs(Vertical, {
+        "$gap": "32px",
+        children: [_jsxs(Horizontal, {
+          "$gap": "6px",
+          children: [_jsx(Card, {
+            title: lang({
+              message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.TITLE'
+            }),
+            description: lang({
+              message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.DESC'
+            }),
+            icon: PushIcon,
+            href: `/applications/${applicationCode}/one-time-messages/send?type=push&segment=${segmentCode}`
+          }), _jsx(Card, {
+            title: lang({
+              message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.TITLE'
+            }),
+            description: lang({
+              message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.DESC'
+            }),
+            icon: EmailIcon,
+            href: `/applications/${applicationCode}/one-time-messages/send?type=email&segment=${segmentCode}`
+          })]
+        }), _jsxs(Vertical, {
+          "$gap": "8px",
+          children: [_jsx(H3, {
+            children: lang({
+              message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.ADVANCED_HEADING'
+            })
+          }), _jsxs(Columns, {
+            "$sizes": "1fr 1fr",
+            "$gap": "6px",
+            children: [_jsx(Card, {
+              title: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.TITLE'
+              }),
+              description: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.DESC'
+              }),
+              icon: PushIcon,
+              href: `/journeys/${applicationCode}/create?channel=push&segment=${segmentCode}&segment_title=${segmentTitle}`
+            }), _jsx(Card, {
+              title: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.TITLE'
+              }),
+              description: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.DESC'
+              }),
+              icon: EmailIcon,
+              href: `/journeys/${applicationCode}/create?channel=email&segment=${segmentCode}&segment_title=${segmentTitle}`
+            }), _jsx(Card, {
+              title: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.TITLE'
+              }),
+              description: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.DESC'
+              }),
+              icon: MobileIcon,
+              href: `/journeys/${applicationCode}/create?channel=inapp&segment=${segmentCode}&segment_title=${segmentTitle}`
+            }), _jsx(Card, {
+              title: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.TITLE'
+              }),
+              description: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.DESC'
+              }),
+              icon: SmsIcon,
+              href: `/journeys/${applicationCode}/create?channel=sms&segment=${segmentCode}&segment_title=${segmentTitle}`
+            }), _jsx(Card, {
+              title: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.TITLE'
+              }),
+              description: lang({
+                message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.DESC'
+              }),
+              icon: WhatsappIcon,
+              href: `/journeys/${applicationCode}/create?channel=whatsapp&segment=${segmentCode}&segment_title=${segmentTitle}`
+            })]
+          })]
+        })]
+      })
+    })]
+  });
 }

package/CampaignsConfigurationDrawer/components/Card/Card.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { type CardProps } from './types';
-export declare function Card(props: CardProps): React.JSX.Element;
+export declare function Card(props: CardProps): import("react").JSX.Element;

package/CampaignsConfigurationDrawer/components/Card/Card.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { Text } from '@pushwoosh/kit-typography';
 import { Container, IconWrap, Title } from './styled';
@@ -9,16 +9,22 @@ export function Card(props) {
     icon: Icon,
     href
   } = props;
-  return React.createElement(Container, {
-    href: href
-  }, React.createElement(IconWrap, null, React.createElement(Icon, {
-    color: Color.PRIMARY,
-    size: "medium",
-    view: "lined",
-    type: "mobile",
-    direction: "right"
-  })), React.createElement(Title, null, title), React.createElement(Text, {
-    "$variant": "footnote",
-    "$color": Color.LOCKED
-  }, description));
+  return _jsxs(Container, {
+    href: href,
+    children: [_jsx(IconWrap, {
+      children: _jsx(Icon, {
+        color: Color.PRIMARY,
+        size: "medium",
+        view: "lined",
+        type: "mobile",
+        direction: "right"
+      })
+    }), _jsx(Title, {
+      children: title
+    }), _jsx(Text, {
+      "$variant": "footnote",
+      "$color": Color.LOCKED,
+      children: description
+    })]
+  });
 }

package/CampaignsConfigurationDrawer/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type CampaignsConfigurationDrawerMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<CampaignsConfigurationDrawerMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<CampaignsConfigurationDrawerMessages>) => string;

package/CampaignsConfigurationDrawer/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/CampaignsConfigurationDrawer/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type CampaignsConfigurationDrawerMessages } from './types';
+export declare const messages: LangMessages<CampaignsConfigurationDrawerMessages>;

package/CampaignsConfigurationDrawer/polyglot/messages_en.js

@@ -0,0 +1,18 @@
+export const messages = {
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.HEADING': 'Create campaign',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.ADVANCED_HEADING': 'Advanced campaign based by channel',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.TITLE': 'One-time push notification',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.DESC': 'Select or create content, adjust notifications, and choose the best time to send.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.TITLE': 'One-time email',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.DESC': 'Select content, set a subject, personalize sender info, and choose a send time.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.TITLE': 'Push notification based',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.DESC': 'Create a targeted campaign for users and plan follow-up for unopened messages.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.TITLE': 'Email campaign',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.DESC': 'Create tailored communication strategies with follow-ups based on user actions.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.TITLE': 'In-app campaign',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.DESC': 'Display the banner to the intended users and monitor their subsequent actions.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.TITLE': 'SMS campaign',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.DESC': 'Automate SMS delivery for quick, reliable messaging.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.TITLE': 'WhatsApp campaign',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.DESC': 'Engage your audience on WhatsApp with rich, personalized messages.'
+};

package/CampaignsConfigurationDrawer/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type CampaignsConfigurationDrawerMessages } from './types';
+export declare const messages: LangMessages<CampaignsConfigurationDrawerMessages>;

package/CampaignsConfigurationDrawer/polyglot/messages_ru.js

@@ -0,0 +1,18 @@
+export const messages = {
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.HEADING': 'Создать кампанию',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.ADVANCED_HEADING': 'Расширенная кампания по каналу',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.TITLE': 'Разовое push-уведомление',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.DESC': 'Выберите или создайте контент, настройте уведомления и выберите лучшее время отправки.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.TITLE': 'Разовое письмо',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.DESC': 'Выберите контент, задайте тему, настройте данные отправителя и выберите время отправки.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.TITLE': 'На основе push-уведомлений',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.DESC': 'Создайте таргетированную кампанию и спланируйте дополнительные сообщения для тех, кто не открыл.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.TITLE': 'Email-кампания',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.DESC': 'Создавайте индивидуальные коммуникационные стратегии с дополнительными сообщениями на основе действий пользователей.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.TITLE': 'In-app кампания',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.DESC': 'Показывайте баннер нужным пользователям и отслеживайте их дальнейшие действия.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.TITLE': 'SMS-кампания',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.DESC': 'Автоматизируйте отправку SMS для быстрых и надёжных сообщений.',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.TITLE': 'WhatsApp-кампания',
+  'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.DESC': 'Взаимодействуйте с аудиторией в WhatsApp с помощью насыщенных персонализированных сообщений.'
+};

package/CampaignsConfigurationDrawer/polyglot/types.d.ts

@@ -0,0 +1,19 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type CampaignsConfigurationDrawerMessages = {
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.HEADING': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.ADVANCED_HEADING': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.TITLE': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_PUSH.DESC': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.TITLE': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.ONE_TIME_EMAIL.DESC': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.TITLE': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.PUSH.DESC': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.TITLE': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.EMAIL.DESC': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.TITLE': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.INAPP.DESC': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.TITLE': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.SMS.DESC': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.TITLE': NoParams;
+    'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.CARD.WHATSAPP.DESC': NoParams;
+};

package/CampaignsConfigurationDrawer/polyglot/types.js

@@ -0,0 +1 @@
+export {};

package/DocsButton/DocsButton.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import type { DocsButtonProps } from './types';
-export declare function DocsButton(props: DocsButtonProps): React.JSX.Element | null;
+export declare function DocsButton(props: DocsButtonProps): import("react").JSX.Element | null;

package/DocsButton/DocsButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, DrawerDocs, useDocs } from '@pushwoosh/dumb-components';
 import { DocsIcon } from '@pushwoosh/kit-icons';
 import { useDocsButtonUrl } from './hooks';
@@ -29,21 +29,24 @@ export function DocsButton(props) {
     }
     openDocsDrawer();
   };
-  return React.createElement(React.Fragment, null, React.createElement(Button, {
-    "aria-label": lang({
-      message: 'SMART.DOCS_BUTTON.ARIA_LABEL'
-    }),
-    color: color,
-    view: view,
-    size: size,
-    icon: React.createElement(DocsIcon, {
-      size: "medium",
-      view: "lined"
-    }),
-    onClick: handleClick
-  }, children), !openInNewWindow && React.createElement(DrawerDocs, {
-    url: url,
-    isOpen: docsOpen,
-    onClose: closeDocsDrawer
-  }));
+  return _jsxs(_Fragment, {
+    children: [_jsx(Button, {
+      "aria-label": lang({
+        message: 'SMART.DOCS_BUTTON.ARIA_LABEL'
+      }),
+      color: color,
+      view: view,
+      size: size,
+      icon: _jsx(DocsIcon, {
+        size: "medium",
+        view: "lined"
+      }),
+      onClick: handleClick,
+      children: children
+    }), !openInNewWindow && _jsx(DrawerDocs, {
+      url: url,
+      isOpen: docsOpen,
+      onClose: closeDocsDrawer
+    })]
+  });
 }

package/DynamicContentPicker/DynamicContentPicker.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { arrow, autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
-import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
@@ -79,66 +80,78 @@ export const DynamicContentPicker = ({
       }
     });
   }, [clickAwayHandler, activeVar, refs.reference, refs.floating]);
-  return React.createElement(React.Fragment, null, React.createElement(FieldPlace, {
-    ref: refs.setReference
-  }, React.createElement(Horizontal, {
-    "$padding": "8px 16px",
-    "$justifyContent": "space-between"
-  }, React.createElement(Horizontal, {
-    "$alignItems": "center",
-    "$gap": 8
-  }, icon && icon, React.createElement(Text, {
-    "$variant": "h4"
-  }, title)), error && React.createElement(Horizontal, {
-    "$alignItems": "center",
-    "$gap": 8
-  }, React.createElement(WarningRoundIcon, {
-    size: "small",
-    view: "lined",
-    color: Color.WARNING
-  }), React.createElement(Text, {
-    "$variant": "footnote",
-    "$color": Color.WARNING
-  }, error)), !error && hintText && React.createElement(Text, {
-    "$variant": "footnote",
-    "$color": Color.LOCKED
-  }, hintText)), React.createElement(Horizontal, {
-    "$padding": "12px 16px"
-  }, React.createElement(TextPlace, null, parsedLines.map((line, index) => React.createElement(Line, {
-    key: index /* eslint-disable-line react/no-array-index-key */,
-    activeVar: activeVar,
-    line: line,
-    state: state,
-    onClickVar: setActiveVar
-  }))))), !!activeVar && React.createElement("div", {
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, renderDynamicContent ? renderDynamicContent({
-    activeVar,
-    onChange: newDC => dispatch({
-      type: 'set',
-      key: activeVar,
-      value: newDC
-    }),
-    onClose,
-    update
-  }) : React.createElement(VariedDynamicContentPickerFormSmart, {
-    key: activeVar,
-    applicationCode: applicationCode,
-    initialDc: state[activeVar],
-    onChange: newDc => dispatch({
-      type: 'set',
-      key: activeVar,
-      value: newDc
-    }),
-    onClose: () => setActiveVar(undefined),
-    update: update
-  }), React.createElement(Arrow, {
-    "$direction": placementToDirection(placement),
-    ref: arrowRef,
-    style: {
-      left: (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x,
-      top: (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y
-    }
-  }, React.createElement(ArrowIcon, null))));
+  return _jsxs(_Fragment, {
+    children: [_jsxs(FieldPlace, {
+      ref: refs.setReference,
+      children: [_jsxs(Horizontal, {
+        "$padding": "8px 16px",
+        "$justifyContent": "space-between",
+        children: [_jsxs(Horizontal, {
+          "$alignItems": "center",
+          "$gap": 8,
+          children: [icon && icon, _jsx(Text, {
+            "$variant": "h4",
+            children: title
+          })]
+        }), error && _jsxs(Horizontal, {
+          "$alignItems": "center",
+          "$gap": 8,
+          children: [_jsx(WarningRoundIcon, {
+            size: "small",
+            view: "lined",
+            color: Color.WARNING
+          }), _jsx(Text, {
+            "$variant": "footnote",
+            "$color": Color.WARNING,
+            children: error
+          })]
+        }), !error && hintText && _jsx(Text, {
+          "$variant": "footnote",
+          "$color": Color.LOCKED,
+          children: hintText
+        })]
+      }), _jsx(Horizontal, {
+        "$padding": "12px 16px",
+        children: _jsx(TextPlace, {
+          children: parsedLines.map((line, index) => _jsx(Line, {
+            activeVar: activeVar,
+            line: line,
+            state: state,
+            onClickVar: setActiveVar
+          }, index /* eslint-disable-line react/no-array-index-key */))
+        })
+      })]
+    }), !!activeVar && _jsxs("div", {
+      ref: refs.setFloating,
+      style: floatingStyles,
+      children: [renderDynamicContent ? renderDynamicContent({
+        activeVar,
+        onChange: newDC => dispatch({
+          type: 'set',
+          key: activeVar,
+          value: newDC
+        }),
+        onClose,
+        update
+      }) : _jsx(VariedDynamicContentPickerFormSmart, {
+        applicationCode: applicationCode,
+        initialDc: state[activeVar],
+        onChange: newDc => dispatch({
+          type: 'set',
+          key: activeVar,
+          value: newDc
+        }),
+        onClose: () => setActiveVar(undefined),
+        update: update
+      }, activeVar), _jsx(Arrow, {
+        "$direction": placementToDirection(placement),
+        ref: arrowRef,
+        style: {
+          left: (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x,
+          top: (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y
+        },
+        children: _jsx(ArrowIcon, {})
+      })]
+    })]
+  });
 };

package/DynamicContentPicker/Line.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip } from '@pushwoosh/dumb-components';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
 import { dc2text } from './helpers';
@@ -8,26 +8,28 @@ export const Line = ({
   state,
   onClickVar
 }) => {
-  return React.createElement("p", null, line.map((item, index) => {
-    if (typeof item === 'string') {
-      // eslint-disable-next-line react/no-array-index-key
-      return React.createElement("span", {
-        key: index
-      }, item);
-    }
-    return React.createElement(Chip, {
-      key: index /* eslint-disable-line react/no-array-index-key */,
-      as: "span",
-      "$variant": state[item.varname] ? 'primary' : 'warning',
-      "$selected": activeVar === item.varname,
-      onClick: () => {
-        onClickVar(item.varname);
+  return _jsx("p", {
+    children: line.map((item, index) => {
+      if (typeof item === 'string') {
+        // eslint-disable-next-line react/no-array-index-key
+        return _jsx("span", {
+          children: item
+        }, index);
       }
-    }, state[item.varname] ? dc2text(state[item.varname]) : React.createElement(WarningRoundIcon, {
-      size: "small",
-      view: "lined",
-      as: "span",
-      onClick: () => onClickVar(item.varname)
-    }));
-  }));
+      return _jsx(Chip, {
+        as: "span",
+        "$variant": state[item.varname] ? 'primary' : 'warning',
+        "$selected": activeVar === item.varname,
+        onClick: () => {
+          onClickVar(item.varname);
+        },
+        children: state[item.varname] ? dc2text(state[item.varname]) : _jsx(WarningRoundIcon, {
+          size: "small",
+          view: "lined",
+          as: "span",
+          onClick: () => onClickVar(item.varname)
+        })
+      }, index /* eslint-disable-line react/no-array-index-key */);
+    })
+  });
 };

package/DynamicContentPickerForm/DynamicContentCustomPickerForm.js

@@ -1,22 +1,27 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { NativeTextarea } from '@pushwoosh/dumb-components';
 import { Vertical } from '@pushwoosh/kit-helpers';
+import { useLang } from './polyglot';
 export const DynamicContentCustomPickerForm = ({
   dc,
   onChange
 }) => {
-  return React.createElement(Vertical, {
-    "$gap": 16
-  }, React.createElement(NativeTextarea, {
-    value: dc.text,
-    onChange: e => {
-      onChange({
-        text: e.target.value
-      });
-    },
-    placeholder: "Enter custom text",
-    style: {
-      minHeight: 200
-    }
-  }));
+  const lang = useLang();
+  return _jsx(Vertical, {
+    "$gap": 16,
+    children: _jsx(NativeTextarea, {
+      value: dc.text,
+      onChange: e => {
+        onChange({
+          text: e.target.value
+        });
+      },
+      placeholder: lang({
+        message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.CUSTOM.PLACEHOLDER'
+      }),
+      style: {
+        minHeight: 200
+      }
+    })
+  });
 };