@pushwoosh/smart-components-kit 1.25.0 → 2.1.0

package/CampaignsConfigurationDrawer/CampaignsConfigurationDrawer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Drawer, DrawerBody, DrawerHeader } from '@pushwoosh/dumb-components';
+import { Drawer, DrawerBody, DrawerHeader, DrawerTitle } 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 { H2 } from '@pushwoosh/kit-typography';
 import { Card } from './components/Card';
 import { useCanSendMessages } from './hooks';
 import { useLang } from './polyglot';
@@ -29,7 +29,7 @@ export function CampaignsConfigurationDrawer(props) {
         "$justifyContent": "space-between",
         "$alignItems": "center",
         "$margin": "0 0 4px",
-        children: [_jsx(H1, {
+        children: [_jsx(DrawerTitle, {
           children: lang({
             message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.HEADING'
           })
@@ -66,7 +66,7 @@ export function CampaignsConfigurationDrawer(props) {
           })]
         }), _jsxs(Vertical, {
           "$gap": "8px",
-          children: [_jsx(H3, {
+          children: [_jsx(H2, {
             children: lang({
               message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.ADVANCED_HEADING'
             })

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

@@ -1,4 +1,4 @@
-import { H4 } from '@pushwoosh/kit-typography';
+import { H3 } from '@pushwoosh/kit-typography';
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -8,6 +8,7 @@ export declare const IconWrap: import("styled-components/dist/types").IStyledCom
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
     readonly children: import("react").ReactNode;
+    readonly $textTransform?: import("react").CSSProperties["textTransform"];
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string & Omit<typeof H4, keyof import("react").Component<any, {}, any>>;
+}> & string & Omit<typeof H3, keyof import("react").Component<any, {}, any>>;

package/CampaignsConfigurationDrawer/components/Card/styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Color, ShapeRadius, Shadow } from '@pushwoosh/kit-constants';
-import { H4 } from '@pushwoosh/kit-typography';
+import { H3 } from '@pushwoosh/kit-typography';
 export const Container = styled.a.withConfig({
   displayName: "Container",
   componentId: "sc-1r8stxq-0"
@@ -9,7 +9,7 @@ export const IconWrap = styled.div.withConfig({
   displayName: "IconWrap",
   componentId: "sc-1r8stxq-1"
 })(["padding:4px;border-radius:", ";background-color:", ";margin-bottom:8px;width:fit-content;"], ShapeRadius.CONTROL, Color.BRIGHT_LIGHT);
-export const Title = styled(H4).withConfig({
+export const Title = styled(H3).withConfig({
   displayName: "Title",
   componentId: "sc-1r8stxq-2"
 })(["margin-bottom:2px;color:", ";"], Color.MAIN);

package/DynamicContentPicker/DynamicContentPicker.js

@@ -89,7 +89,7 @@ export const DynamicContentPicker = ({
           "$alignItems": "center",
           "$gap": 8,
           children: [icon && icon, _jsx(Text, {
-            "$variant": "h4",
+            "$variant": "h3",
             children: title
           })]
         }), error && _jsxs(Horizontal, {

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.js

@@ -131,7 +131,7 @@ export const ExportCsvBanner = ({
       percentValue: progress,
       rightSlot: _jsx(Text, {
         "$color": Color.WARNING,
-        "$variant": "h5",
+        "$variant": "h4",
         "$textTransform": "uppercase",
         children: lang({
           message: 'SMART.EXPORT_CSV.KEEP_PAGE_OPEN'

package/LanguagesSelector/LanguagesSelector.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useMemo, useState } from 'react';
 import { Button, Modal, DropdownMenu, DropdownMenuItem, DropdownMenuSection } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { ArrowIcon, ChevronIcon, LanguageIcon, PlusIcon } from '@pushwoosh/kit-icons';
+import { ArrowIcon, LanguageIcon, PlusIcon } from '@pushwoosh/kit-icons';
 import { LanguagesModal } from './LanguagesModal';
 import { useLang } from './polyglot';
 import { ButtonGroup } from './styles';
@@ -38,10 +38,7 @@ export const LanguagesSelector = ({
           size: "medium",
           view: "lined"
         }),
-        rightIcon: _jsx(ChevronIcon, {
-          size: "medium",
-          direction: "down"
-        }),
+        hasChevron: true,
         onClick: handlerProps.onClick,
         boxRef: handlerProps.ref,
         isOpen: handlerProps.isOpen,

package/MediaStorage/MediaStorage.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import { Button, Checkbox, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, Tab, TabBar, TabPanel, Tabs, useToast } from '@pushwoosh/dumb-components';
 import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
-import { CheckIcon, DropdownIcon, EditIcon, OpenIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
+import { CheckIcon, EditIcon, OpenIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { addStyleRefs, STYLE_REFS_MAX, visibleSources } from './aiGallery';
@@ -360,10 +360,7 @@ export const MediaStorage = ({
           label: lang({
             message: 'SMART.MEDIA_STORAGE.CANVA.CREATE'
           }),
-          rightIcon: _jsx(DropdownIcon, {
-            direction: "down",
-            size: "small"
-          }),
+          hasChevron: true,
           isLoading: canvaEdit.isSaving,
           menuPlacement: "bottom-end",
           children: _jsx(DropdownMenuSection, {

package/ModalCloningJourney/ModalCloningJourney.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
-import { FieldBox, Modal, ModalBody, ModalHeader, ModalFooter, NativeInput, Select, Button, Banner } from '@pushwoosh/dumb-components';
+import { FieldBox, Modal, ModalBody, ModalHeader, ModalTitle, ModalFooter, NativeInput, Select, Button, Banner } from '@pushwoosh/dumb-components';
 import { Horizontal, trackEvent, useAsync, Vertical } from '@pushwoosh/kit-helpers';
-import { H3, Paragraph } from '@pushwoosh/kit-typography';
+import { Paragraph } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { useLang } from './polyglot';
 export function ModalCloningJourney({
@@ -188,7 +188,7 @@ export function ModalCloningJourney({
     size: "medium",
     isOpen: isOpen,
     children: [_jsx(ModalHeader, {
-      children: _jsx(H3, {
+      children: _jsx(ModalTitle, {
         children: lang({
           message: 'SMART.MODAL_CLONING_JOURNEY.HEADING'
         })

package/OpenActions/components/OpenActionsSummary/OpenActionsSummary.js

@@ -75,7 +75,7 @@ export const OpenActionsSummary = ({
           type: icon,
           color: Color.LOCKED
         }), _jsxs(Text, {
-          "$variant": "h4",
+          "$variant": "h3",
           "$color": Color.LOCKED,
           "$textTransform": "uppercase",
           children: [labelText, ' ', label]

package/PlatformsConfigurationDrawer/components/DesktopPage/DesktopPage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@pushwoosh/dumb-components';
+import { Button, DrawerTitle } from '@pushwoosh/dumb-components';
 import { Color, AllPlatforms } from '@pushwoosh/kit-constants';
 import { Vertical, Columns } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
-import { H2, H4, Text } from '@pushwoosh/kit-typography';
+import { H3, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
 import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styles';
 export function DesktopPage(props) {
@@ -31,7 +31,7 @@ export function DesktopPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H2, {
+          }), _jsx(DrawerTitle, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.DESKTOP.HEADING'
             })
@@ -89,7 +89,7 @@ export function DesktopPage(props) {
     }), _jsxs(Vertical, {
       "$padding": "12px 0 0",
       "$gap": 8,
-      children: [_jsx(H4, {
+      children: [_jsx(H3, {
         children: lang({
           message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.PLATFORM_QUESTION'
         })
@@ -104,7 +104,7 @@ export function DesktopPage(props) {
               type: "windows",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.WINDOWS'
             })
@@ -117,7 +117,7 @@ export function DesktopPage(props) {
               type: "macos",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.MACOS'
             })

package/PlatformsConfigurationDrawer/components/MainPage/MainPage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@pushwoosh/dumb-components';
+import { Button, DrawerTitle } from '@pushwoosh/dumb-components';
 import { Color, AllPlatforms } from '@pushwoosh/kit-constants';
 import { Vertical, Columns } from '@pushwoosh/kit-helpers';
 import { CloseIcon, DeviceIcon, EmailIcon, WhatsappIcon, SmsIcon } from '@pushwoosh/kit-icons';
-import { H2, Paragraph, H4, Text } from '@pushwoosh/kit-typography';
+import { Paragraph, H3, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
 import { Header, Close, Card, CardIcon } from '../../styles';
 export function MainPage(props) {
@@ -19,7 +19,7 @@ export function MainPage(props) {
     children: [_jsxs(Header, {
       children: [_jsxs(Vertical, {
         "$gap": 4,
-        children: [_jsx(H2, {
+        children: [_jsx(DrawerTitle, {
           children: lang({
             message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.MAIN.HEADING'
           })
@@ -76,7 +76,7 @@ export function MainPage(props) {
     }), _jsxs(Vertical, {
       "$padding": "12px 0 0",
       "$gap": 8,
-      children: [_jsx(H4, {
+      children: [_jsx(H3, {
         children: lang({
           message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.MAIN.QUESTION'
         })
@@ -92,7 +92,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.MOBILE'
             })
@@ -106,7 +106,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.DESKTOP'
             })
@@ -120,7 +120,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.WEBSITE'
             })
@@ -133,7 +133,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.EMAILS'
             })
@@ -146,7 +146,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.WHATSAPP'
             })
@@ -160,7 +160,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.SMS'
             })

package/PlatformsConfigurationDrawer/components/MobilePage/MobilePage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@pushwoosh/dumb-components';
+import { Button, DrawerTitle } from '@pushwoosh/dumb-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
-import { H2, H4, Text } from '@pushwoosh/kit-typography';
+import { H3, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
 import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styles';
 export function MobilePage(props) {
@@ -29,7 +29,7 @@ export function MobilePage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H2, {
+          }), _jsx(DrawerTitle, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.MOBILE.HEADING'
             })
@@ -87,7 +87,7 @@ export function MobilePage(props) {
     }), _jsxs(Vertical, {
       "$padding": "12px 0 0",
       "$gap": 8,
-      children: [_jsx(H4, {
+      children: [_jsx(H3, {
         children: lang({
           message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.PLATFORM_QUESTION'
         })
@@ -102,7 +102,7 @@ export function MobilePage(props) {
               type: "apple",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.IOS'
             })
@@ -115,7 +115,7 @@ export function MobilePage(props) {
               type: "android",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.ANDROID'
             })
@@ -128,7 +128,7 @@ export function MobilePage(props) {
               type: "huawei",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.HUAWEI'
             })
@@ -141,7 +141,7 @@ export function MobilePage(props) {
               type: "amazon",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.AMAZON'
             })

package/ProductUpdates/ProductUpdateCard.js

@@ -56,7 +56,7 @@ export function ProductUpdateCard({
           })]
         }), _jsxs(Vertical, {
           children: [_jsx(Text, {
-            "$variant": "h4",
+            "$variant": "h3",
             children: update.title
           }), update.content && renderContent(update.content)]
         })]

package/Table/styles.js

@@ -36,7 +36,7 @@ export const Tr = styled(Horizontal).attrs({
 export const Th = styled(Td).withConfig({
   displayName: "Th",
   componentId: "sc-1vdjaze-4"
-})(["padding:8px 12px;color:", ";font-weight:", ";font-size:", ";line-height:", ";text-transform:uppercase;"], Color.LOCKED, FontWeight.MEDIUM, FontSize.HEADING5, LineHeight.HEADING5);
+})(["padding:8px 12px;color:", ";font-weight:", ";font-size:", ";line-height:", ";text-transform:uppercase;"], Color.LOCKED, FontWeight.MEDIUM, FontSize.HEADING4, LineHeight.HEADING4);
 export const ItemName = styled.div.withConfig({
   displayName: "ItemName",
   componentId: "sc-1vdjaze-5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.25.0",
+  "version": "2.1.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,17 +17,17 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^3.4.0",
-    "@pushwoosh/kit-constants": "^2.1.1",
+    "@pushwoosh/dumb-components": "^4.2.0",
+    "@pushwoosh/kit-constants": "^3.0.0",
     "@pushwoosh/kit-helpers": "^4.16.0",
     "@pushwoosh/kit-icons": "^2.3.10",
-    "@pushwoosh/kit-typography": "^1.13.0",
+    "@pushwoosh/kit-typography": "^2.0.0",
     "@pushwoosh/rpc-v2-http-api-data": "^0.2.409",
     "jwt-decode": "^4.0.0",
     "react-hook-form": "^7.68.0"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.1.6",
+    "@pushwoosh/frontend-builder-engine": "^4.0.0",
     "@pushwoosh/spa-context": "^3.3.0",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.19.1",