@pushwoosh/dumb-components 1.0.41 → 1.0.42

package/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.js

@@ -1,20 +1,24 @@
 import React from 'react';
-import { Spacing } from '@pushwoosh/kit-constants';
+import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
 import Email from './assets/email.svg?url';
 import { Container, PreviewMock } from './styles';
-import { LockedText, LockedTitle } from '../../../common';
 export function NoEmailTemplatePreview() {
   return React.createElement(Container, {
-    "$gap": Spacing.S4,
-    "$padding": `${Spacing.S4} ${Spacing.S4} ${Spacing.S7}`
+    "$padding": "12px 12px 24px",
+    "$gap": 12
   }, React.createElement(PreviewMock, {
     "$alignItems": "center",
     "$justifyContent": "center"
   }, React.createElement("img", {
     src: Email,
     alt: "Email envelop icon"
-  })), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
-    "$small": true
+  })), React.createElement(Vertical, null, React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
+  }, "Content missed..."), React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
   }, "Might be old data or deleted presets")));
 }

package/FieldBox/FieldBox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Color, Spacing, Tag } from '@pushwoosh/kit-constants';
+import { Color, Tag } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { OpenIcon, InfoRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
@@ -19,8 +19,8 @@ export function FieldBox(props) {
     children
   } = props;
   return React.createElement(Vertical, {
-    "$gap": Spacing.S1,
-    ref: boxRef
+    ref: boxRef,
+    "$gap": 4
   }, title && React.createElement(Horizontal, {
     "$alignItems": "center",
     "$justifyContent": "space-between"
@@ -45,9 +45,9 @@ export function FieldBox(props) {
     size: "small",
     view: "lined"
   }))), actions && React.createElement(Horizontal, {
+    ref: actionsRef,
     "$alignItems": "center",
-    "$gap": Spacing.S1,
-    ref: actionsRef
+    "$gap": 4
   }, actions)), children, description && !error && React.createElement(Text, {
     "$variant": "footnote",
     "$color": Color.LOCKED

package/PushPreview/PushPreview.js

@@ -1,34 +1,47 @@
 import React from 'react';
-import { Columns } from '@pushwoosh/kit-helpers';
-import { Spinner } from '../Spinner';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { NoPushPreview } from './components/NoPushPreview';
+import { SilentPushPreview } from './components/SilentPushPreview';
 import { PREVIEW_ICON_URL } from './constants';
 import { getLocalizedContent } from './helpers';
-import { LoadingBox, PushBox, AppIcon, PushContent, PushTitleBox, PushTitleText, PushDate, PushDescription } from './styles';
+import { PushBox, PushIcon, PushTitle, PushDescription } from './styles';
 export function PushPreview(props) {
   const {
     pushPreset,
     language,
-    isLoading,
-    appTitle,
-    appIcon,
+    view = 'compact',
+    appTitle = '',
+    appIcon = PREVIEW_ICON_URL,
+    isLoading = false,
     width
   } = props;
   const title = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.title, language) || appTitle;
-  const subTitle = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.subTitle, language);
   const content = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.content, language);
-  const renderIcon = content ? (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.icon) || appIcon || PREVIEW_ICON_URL : PREVIEW_ICON_URL;
+  const icon = content ? (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.icon) || appIcon : PREVIEW_ICON_URL;
+  const isLocked = !pushPreset || !content || view === 'silent';
+  if (isLoading) {
+    return React.createElement(PushBox, {
+      view: view,
+      "$loading": true
+    });
+  }
+  if (view === 'silent') {
+    return React.createElement(SilentPushPreview, null);
+  }
+  if (!pushPreset && !isLoading) {
+    return React.createElement(NoPushPreview, null);
+  }
   return React.createElement(PushBox, {
-    "$width": width
-  }, isLoading && React.createElement(LoadingBox, null, React.createElement(Spinner, {
-    size: "medium"
-  })), !isLoading && React.createElement(Columns, {
-    "$sizes": "30px 1fr",
-    "$alignItems": "center",
-    "$gap": 10
-  }, React.createElement(AppIcon, {
-    alt: appTitle,
-    src: renderIcon
-  }), React.createElement(PushContent, null, React.createElement(PushTitleBox, null, React.createElement(PushTitleText, null, title), React.createElement(PushDate, null, "5m\u00A0ago")), subTitle && React.createElement(PushTitleText, null, subTitle), React.createElement(PushDescription, {
-    "$isLocked": !content
-  }, content || 'Please, create or select push content'))));
+    view: view,
+    "$width": width,
+    "$loading": isLoading
+  }, React.createElement(PushIcon, {
+    alt: title,
+    src: icon
+  }), React.createElement(Vertical, null, React.createElement(PushTitle, {
+    locked: isLocked
+  }, title), React.createElement(PushDescription, {
+    view: view,
+    locked: !content
+  }, !content ? 'Message is empty…' : content)));
 }

package/PushPreview/components/NoPushPreview/NoPushPreview.js

@@ -1,14 +1,13 @@
 import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
-import { Container, IconMock } from './styles';
-import { LockedText, LockedTitle } from '../../../common';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { PushBox, IconContainer, PushTitle, PushDescription } from '../../styles';
 export function NoPushPreview() {
-  return React.createElement(Container, {
-    "$gap": "10px",
-    "$padding": "10px",
-    "$alignItems": "center",
-    "$justifyContent": "start"
-  }, React.createElement(IconMock, null), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
-    "$small": true
-  }, "Might be old data or deleted presets")));
+  return React.createElement(PushBox, {
+    view: "compact"
+  }, React.createElement(IconContainer, null, React.createElement(CloseIcon, {
+    size: "small",
+    color: Color.CLEAR
+  })), React.createElement(Vertical, null, React.createElement(PushTitle, null, "Content missed"), React.createElement(PushDescription, null, "Might be old data or deleted presets")));
 }

package/PushPreview/components/SilentPushPreview/SilentPushPreview.js

@@ -1,20 +1,19 @@
 import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
-import { Container, IconContainer } from './styles';
-import { LockedText, LockedTitle } from '../../../common';
+import { PushBox, IconContainer, PushTitle, PushDescription } from '../../styles';
 export function SilentPushPreview() {
-  return React.createElement(Container, {
-    "$gap": "10px",
-    "$padding": "10px",
-    "$alignItems": "center",
-    "$justifyContent": "start"
+  return React.createElement(PushBox, {
+    view: "silent"
   }, React.createElement(IconContainer, null, React.createElement(NotificationIcon, {
-    size: "medium",
-    type: "disabled",
+    size: "small",
     view: "lined",
-    color: "#FFD600"
-  })), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Silent push"), React.createElement(LockedText, {
-    "$small": true
+    type: "disabled",
+    color: Color.CLEAR
+  })), React.createElement(Vertical, null, React.createElement(PushTitle, {
+    locked: true
+  }, "Silent push notification"), React.createElement(PushDescription, {
+    locked: true
   }, "There is no content to preview")));
 }

package/PushPreview/constants.d.ts

@@ -1 +1 @@
-export declare const PREVIEW_ICON_URL = "/img/tmp.icon.png";
+export declare const PREVIEW_ICON_URL = "https://app.pushwoosh.com/img/tmp.icon.png";

package/PushPreview/constants.js

@@ -1 +1 @@
-export const PREVIEW_ICON_URL = '/img/tmp.icon.png';
+export const PREVIEW_ICON_URL = 'https://app.pushwoosh.com/img/tmp.icon.png';

package/PushPreview/index.d.ts

@@ -1,3 +1 @@
 export { PushPreview } from './PushPreview';
-export { NoPushPreview } from './components/NoPushPreview';
-export { SilentPushPreview } from './components/SilentPushPreview';

package/PushPreview/index.js

@@ -1,3 +1 @@
-export { PushPreview } from './PushPreview';
-export { NoPushPreview } from './components/NoPushPreview';
-export { SilentPushPreview } from './components/SilentPushPreview';
+export { PushPreview } from './PushPreview';

package/PushPreview/styles.d.ts

@@ -1,8 +1,5 @@
+import type { PushPreviewView } from './types';
 export declare const PushBox: import("styled-components").StyledComponent<"div", any, {
-    $width?: string;
-}, never>;
-export declare const AppIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const PushContent: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $bgColor?: string | undefined;
@@ -57,11 +54,22 @@ export declare const PushContent: import("styled-components").StyledComponent<"d
     $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
 } & {
     $gridAutoFlow: string;
-}, "$gridAutoFlow">;
-export declare const PushTitleBox: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const PushTitleText: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const PushDate: import("styled-components").StyledComponent<"span", any, {}, never>;
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $padding: number;
+    $gap: number;
+} & {
+    view: PushPreviewView;
+    $width?: string | number;
+    $loading?: boolean;
+}, "$gridAutoFlow" | "$alignItems" | "$gap" | "$justifyContent" | "$padding">;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PushIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const PushTitle: import("styled-components").StyledComponent<"div", any, {
+    locked?: boolean;
+}, never>;
 export declare const PushDescription: import("styled-components").StyledComponent<"div", any, {
-    $isLocked: boolean;
+    view?: PushPreviewView;
+    locked?: boolean;
 }, never>;
-export declare const LoadingBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/PushPreview/styles.js

@@ -1,39 +1,42 @@
 import styled from 'styled-components';
-import { Color, FontWeight, FontSize, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
-export const PushBox = styled.div.withConfig({
+import { Color, FontSize, FontWeight, LineHeight, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal, toCssValue } from '@pushwoosh/kit-helpers';
+export const PushBox = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'start',
+  $padding: 12,
+  $gap: 12
+}).withConfig({
   displayName: "PushBox",
   componentId: "sc-185rvhg-0"
-})(["display:grid;width:", ";min-height:50px;padding:10px;background:", ";box-shadow:", ";border-radius:10px;"], ({
+})(["display:grid;width:", ";min-width:240px;max-width:350px;min-height:50px;padding:12px;border-radius:", ";border:", ";box-shadow:", ";background:", ";"], ({
   $width
-}) => $width || '100%', Color.CLEAR, Shadow.LARGE);
-export const AppIcon = styled.img.withConfig({
-  displayName: "AppIcon",
+}) => $width ? toCssValue($width) : '100%', ShapeRadius.SECTION, ({
+  $loading
+}) => $loading ? 'none' : `1px solid ${Color.DIVIDER}`, ({
+  view
+}) => view === 'extended' ? Shadow.LARGE : 'none', ({
+  $loading
+}) => $loading ? Color.SOFT_LIGHT : Color.CLEAR);
+export const IconContainer = styled.div.withConfig({
+  displayName: "IconContainer",
   componentId: "sc-185rvhg-1"
-})(["width:30px;height:30px;border-radius:", ";"], ShapeRadius.CONTROL);
-export const PushContent = styled(Vertical).withConfig({
-  displayName: "PushContent",
+})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:", ";border-radius:", ";"], Color.PHANTOM, ShapeRadius.CONTROL);
+export const PushIcon = styled.img.withConfig({
+  displayName: "PushIcon",
   componentId: "sc-185rvhg-2"
-})(["max-width:240px;"]);
-export const PushTitleBox = styled.span.withConfig({
-  displayName: "PushTitleBox",
+})(["width:24px;height:24px;background:", ";border-radius:", ";"], Color.PHANTOM, ShapeRadius.CONTROL);
+export const PushTitle = styled.div.withConfig({
+  displayName: "PushTitle",
   componentId: "sc-185rvhg-3"
-})(["display:grid;grid-template-columns:1fr min-content;grid-gap:", ";"], Spacing.S3);
-export const PushTitleText = styled.span.withConfig({
-  displayName: "PushTitleText",
-  componentId: "sc-185rvhg-4"
-})(["font-weight:", ";font-size:13px;line-height:140%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], FontWeight.MEDIUM);
-export const PushDate = styled.span.withConfig({
-  displayName: "PushDate",
-  componentId: "sc-185rvhg-5"
-})(["color:#555;font-weight:", ";font-size:", ";letter-spacing:0;"], FontWeight.REGULAR, FontSize.SMALL);
+})(["color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], ({
+  locked
+}) => locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.MEDIUM, LineHeight.SMALL);
 export const PushDescription = styled.div.withConfig({
   displayName: "PushDescription",
-  componentId: "sc-185rvhg-6"
-})(["color:", ";font-weight:", ";font-size:13px;line-height:140%;"], ({
-  $isLocked
-}) => $isLocked ? Color.LOCKED : Color.MAIN, FontWeight.REGULAR);
-export const LoadingBox = styled.div.withConfig({
-  displayName: "LoadingBox",
-  componentId: "sc-185rvhg-7"
-})(["display:flex;align-items:center;justify-content:center;flex:1;"]);
+  componentId: "sc-185rvhg-4"
+})(["color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:", ";text-overflow:ellipsis;overflow:hidden;"], ({
+  locked
+}) => locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL, ({
+  view
+}) => view === 'extended' ? 'normal' : 'nowrap');

package/PushPreview/types.d.ts

@@ -1,3 +1,4 @@
+export type PushPreviewView = 'compact' | 'extended' | 'silent';
 export interface PushBasicData {
     title?: Record<string, string>;
     subTitle?: Record<string, string>;
@@ -5,10 +6,11 @@ export interface PushBasicData {
     icon?: string;
 }
 export interface PushPreviewProps<T> {
+    view?: PushPreviewView;
     pushPreset?: T | null;
     language?: string;
-    isLoading: boolean;
-    appTitle: string;
+    isLoading?: boolean;
+    appTitle?: string;
     appIcon?: string;
-    width?: string;
+    width?: string | number;
 }

package/StatisticCard/StatisticCard.js

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
 import { formatNumber, Horizontal } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
 import { Spinner } from '../Spinner';
 import { Container, RightSlotContainer, StatValue, Title } from './styles';
-import { LockedText } from '../common';
 export function StatisticCard(props) {
   const {
     title,
@@ -27,8 +28,9 @@ export function StatisticCard(props) {
       return React.createElement(Horizontal, {
         "$alignItems": "end",
         "$gap": 8
-      }, React.createElement(StatValue, null, formatNumber(value, 'spaced')), React.createElement(LockedText, {
-        "$small": true
+      }, React.createElement(StatValue, null, formatNumber(value, 'spaced')), React.createElement(Text, {
+        "$variant": "footnote",
+        "$color": Color.LOCKED
       }, valueSubtext));
     }
     return React.createElement(StatValue, null, formatNumber(value, 'spaced'));
@@ -41,7 +43,8 @@ export function StatisticCard(props) {
     ...rest
   }, React.createElement(Title, null, title), rightSlot && React.createElement(RightSlotContainer, {
     onClick: e => e.stopPropagation()
-  }, rightSlot), statisticValue, footer && React.createElement(LockedText, {
-    "$small": true
+  }, rightSlot), statisticValue, footer && React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
   }, footer));
 }

package/index.d.ts

@@ -24,7 +24,7 @@ export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
-export { PushPreview, NoPushPreview, SilentPushPreview } from './PushPreview';
+export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';

package/index.js

@@ -24,7 +24,7 @@ export { Tab, TabBar, TabPanel, Tabs } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
-export { PushPreview, NoPushPreview, SilentPushPreview } from './PushPreview';
+export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/PushPreview/components/NoPushPreview/styles.d.ts

@@ -1,57 +0,0 @@
-export declare const IconMock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-}, "$gridAutoFlow">;

package/PushPreview/components/NoPushPreview/styles.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
-import { Horizontal } from '@pushwoosh/kit-helpers';
-export const IconMock = styled.div.withConfig({
-  displayName: "IconMock",
-  componentId: "sc-mvf0fq-0"
-})(["width:36px;height:36px;border-radius:", ";border:1px dashed ", ";background:", ";"], ShapeRadius.CONTROL, Color.SOFT_LIGHT_HOVER, Color.BRIGHT_LIGHT);
-export const Container = styled(Horizontal).withConfig({
-  displayName: "Container",
-  componentId: "sc-mvf0fq-1"
-})(["background:", ";border-radius:", ";border:1px dashed ", ";max-width:350px;"], Color.CLEAR, ShapeRadius.SECTION, Color.SOFT_LIGHT_HOVER);

package/PushPreview/components/SilentPushPreview/styles.d.ts

@@ -1,57 +0,0 @@
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-}, "$gridAutoFlow">;

package/PushPreview/components/SilentPushPreview/styles.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
-import { Horizontal } from '@pushwoosh/kit-helpers';
-export const IconContainer = styled.div.withConfig({
-  displayName: "IconContainer",
-  componentId: "sc-fgx4rs-0"
-})(["width:36px;height:36px;padding:6px;border-radius:", ";opacity:0.5;background:", ";"], ShapeRadius.CONTROL, Color.MAIN);
-export const Container = styled(Horizontal).withConfig({
-  displayName: "Container",
-  componentId: "sc-fgx4rs-1"
-})(["background:", ";border-radius:", ";border:1px dashed ", ";max-width:350px;"], Color.CLEAR, ShapeRadius.SECTION, Color.SOFT_LIGHT_HOVER);

package/common.d.ts

@@ -1,8 +0,0 @@
-import { H5 } from '@pushwoosh/kit-typography';
-export declare const LockedTitle: import("styled-components").StyledComponent<typeof H5, any, {
-    $uppercase?: boolean;
-}, never>;
-export declare const LockedText: import("styled-components").StyledComponent<"div", any, {
-    $uppercase?: boolean;
-    $small?: boolean;
-}, never>;

package/common.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { Color, FontSize } from '@pushwoosh/kit-constants';
-import { H5 } from '@pushwoosh/kit-typography';
-export const LockedTitle = styled(H5).withConfig({
-  displayName: "LockedTitle",
-  componentId: "sc-88o871-0"
-})(["text-transform:", ";color:", ";text-overflow:ellipsis;"], ({
-  $uppercase
-}) => $uppercase ? 'uppercase' : 'initial', Color.LOCKED);
-export const LockedText = styled.div.withConfig({
-  displayName: "LockedText",
-  componentId: "sc-88o871-1"
-})(["text-transform:", ";font-size:", ";color:", ";"], ({
-  $uppercase
-}) => $uppercase ? 'uppercase' : 'initial', ({
-  $small
-}) => $small ? FontSize.SMALL : 'initial', Color.LOCKED);