@pushwoosh/dumb-components 1.1.186 → 1.1.187

package/NativeRichMediaPreview/components/NativeRichMediaButtonList/NativeRichMediaButtonList.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Vertical } from '@pushwoosh/kit-helpers';
+import { DynamicContentText } from '../../../shared/dynamicContent';
 import { ButtonRow } from '../../styles';
 export function NativeRichMediaButtonList(props) {
   const {
@@ -18,7 +19,10 @@ export function NativeRichMediaButtonList(props) {
       "$background": b.background,
       "$color": b.text.color,
       "$border": `1px solid ${b.border.color}`,
-      children: b.text.text
+      children: _jsx(DynamicContentText, {
+        tone: "subtle",
+        children: b.text.text
+      })
     }, `btn-${i}`))
   });
 }

package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/NativeRichMediaRewardPanel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CodeBox, CodeText, RewardMessage, RewardTitle } from './styles';
+import { DynamicContentText } from '../../../shared/dynamicContent';
 import { SECONDARY_LABEL, asButtonValue, asText, asTextValue, contrastOn, isLightHex, withAlpha } from '../../helpers';
 import { CopyIcon } from '../../icons';
 import { ButtonRow } from '../../styles';
@@ -50,7 +51,10 @@ export function NativeRichMediaRewardPanel(props) {
       "$background": button.background,
       "$color": button.text.color,
       "$border": `1px solid ${button.border.color}`,
-      children: button.text.text
+      children: _jsx(DynamicContentText, {
+        tone: "subtle",
+        children: button.text.text
+      })
     })]
   });
 }

package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/styles.d.ts

@@ -1,3 +1,5 @@
+import { NativeRichMediaText } from '../NativeRichMediaText';
+import { NativeRichMediaTitle } from '../NativeRichMediaTitle';
 export declare const CodeBox: import("styled-components").StyledComponent<"div", any, {
     $background: string;
     $border: string;
@@ -11,26 +13,9 @@ export declare const CodeText: import("styled-components").StyledComponent<"span
 } & {
     $variant: string;
 }, "$variant">;
-export declare const RewardTitle: import("styled-components").StyledComponent<"span", any, {
-    $color?: string | undefined;
-    $uppercase?: boolean | undefined;
-    $ellipsis?: boolean | undefined;
-    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
-} & {
-    $color?: string;
-    $align?: "center";
-    $marginTop?: number;
-    $size?: "h3" | "h4";
-    $truncate?: boolean;
-    $clamp?: number;
-} & {
-    $align: string;
+export declare const RewardTitle: import("styled-components").StyledComponent<typeof NativeRichMediaTitle, any, {
+    $align: "center";
 }, "$align">;
-export declare const RewardMessage: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
-    $color?: string;
-    $align?: "center";
-    $clamp?: number;
-    $marginTop?: number;
-} & {
-    $align: string;
+export declare const RewardMessage: import("styled-components").StyledComponent<typeof NativeRichMediaText, any, {
+    $align: "center";
 }, "$align">;

package/NativeRichMediaPreview/components/NativeRichMediaText/NativeRichMediaText.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaTextProps } from './types';
+/** Preview body text; dynamic-content tokens are highlighted as chips. */
+export declare function NativeRichMediaText(props: NativeRichMediaTextProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaText/NativeRichMediaText.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextRoot } from './styles';
+import { DynamicContentText } from '../../../shared/dynamicContent';
+/** Preview body text; dynamic-content tokens are highlighted as chips. */
+export function NativeRichMediaText(props) {
+  const {
+    children,
+    ...rest
+  } = props;
+  return _jsx(TextRoot, {
+    ...rest,
+    children: _jsx(DynamicContentText, {
+      tone: "subtle",
+      children: children
+    })
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaText/index.d.ts

@@ -1 +1,2 @@
-export { NativeRichMediaText } from './styles';
+export { NativeRichMediaText } from './NativeRichMediaText';
+export type { NativeRichMediaTextProps } from './types';

package/NativeRichMediaPreview/components/NativeRichMediaText/index.js

@@ -1 +1 @@
-export { NativeRichMediaText } from './styles';
+export { NativeRichMediaText } from './NativeRichMediaText';

package/NativeRichMediaPreview/components/NativeRichMediaText/styles.d.ts

@@ -1,5 +1,5 @@
 import { Footnote } from '@pushwoosh/kit-typography';
-export declare const NativeRichMediaText: import("styled-components").StyledComponent<typeof Footnote, any, {
+export declare const TextRoot: import("styled-components").StyledComponent<typeof Footnote, any, {
     $color?: string;
     $align?: "center";
     $clamp?: number;

package/NativeRichMediaPreview/components/NativeRichMediaText/styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Footnote } from '@pushwoosh/kit-typography';
-export const NativeRichMediaText = styled(Footnote).withConfig({
-  displayName: "NativeRichMediaText",
+export const TextRoot = styled(Footnote).withConfig({
+  displayName: "TextRoot",
   componentId: "sc-1e1cjl8-0"
 })(["display:block;color:", ";", " ", " ", ""], ({
   $color

package/NativeRichMediaPreview/components/NativeRichMediaText/types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type NativeRichMediaTextProps = {
+    children?: ReactNode;
+    className?: string;
+    $color?: string;
+    $align?: 'center';
+    $clamp?: number;
+    $marginTop?: number;
+};

package/NativeRichMediaPreview/components/NativeRichMediaText/types.js

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

package/NativeRichMediaPreview/components/NativeRichMediaTitle/NativeRichMediaTitle.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaTitleProps } from './types';
+/** Preview title text; dynamic-content tokens are highlighted as chips. */
+export declare function NativeRichMediaTitle(props: NativeRichMediaTitleProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaTitle/NativeRichMediaTitle.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TitleRoot } from './styles';
+import { DynamicContentText } from '../../../shared/dynamicContent';
+/** Preview title text; dynamic-content tokens are highlighted as chips. */
+export function NativeRichMediaTitle(props) {
+  const {
+    children,
+    ...rest
+  } = props;
+  return _jsx(TitleRoot, {
+    ...rest,
+    children: _jsx(DynamicContentText, {
+      tone: "subtle",
+      children: children
+    })
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaTitle/index.d.ts

@@ -1 +1,2 @@
-export { NativeRichMediaTitle } from './styles';
+export { NativeRichMediaTitle } from './NativeRichMediaTitle';
+export type { NativeRichMediaTitleProps } from './types';

package/NativeRichMediaPreview/components/NativeRichMediaTitle/index.js

@@ -1 +1 @@
-export { NativeRichMediaTitle } from './styles';
+export { NativeRichMediaTitle } from './NativeRichMediaTitle';

package/NativeRichMediaPreview/components/NativeRichMediaTitle/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const NativeRichMediaTitle: import("styled-components").StyledComponent<"span", any, {
+export declare const TitleRoot: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;
     $ellipsis?: boolean | undefined;

package/NativeRichMediaPreview/components/NativeRichMediaTitle/styles.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 import { Text } from '@pushwoosh/kit-typography';
-export const NativeRichMediaTitle = styled(Text).attrs(({
+export const TitleRoot = styled(Text).attrs(({
   $size
 }) => ({
   $variant: $size === 'h4' ? 'h4' : 'h3'
 })).withConfig({
-  displayName: "NativeRichMediaTitle",
+  displayName: "TitleRoot",
   componentId: "sc-1oklc22-0"
 })(["display:block;color:", ";", " ", " ", " ", ""], ({
   $color

package/NativeRichMediaPreview/components/NativeRichMediaTitle/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type NativeRichMediaTitleProps = {
+    children?: ReactNode;
+    className?: string;
+    $color?: string;
+    $align?: 'center';
+    $marginTop?: number;
+    $size?: 'h3' | 'h4';
+    $truncate?: boolean;
+    $clamp?: number;
+};

package/NativeRichMediaPreview/components/NativeRichMediaTitle/types.js

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

package/NativeRichMediaPreview/views/NativeRichMediaInvalidView/styles.d.ts

@@ -1,10 +1,6 @@
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 export declare const Placeholder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PlaceholderText: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
-    $color?: string;
-    $align?: "center";
-    $clamp?: number;
-    $marginTop?: number;
-} & {
-    $color: string;
-    $align: string;
+export declare const PlaceholderText: import("styled-components").StyledComponent<typeof NativeRichMediaText, any, {
+    $color: "rgba(60,60,67,0.6)";
+    $align: "center";
 }, "$color" | "$align">;

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.d.ts

@@ -1,3 +1,4 @@
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 export declare const Card: import("styled-components").StyledComponent<"div", any, {
     $background: string;
     $padding: string;
@@ -10,20 +11,10 @@ export declare const RewardSlot: import("styled-components").StyledComponent<"di
 export declare const HintOverlay: import("styled-components").StyledComponent<"div", any, {
     $coverBase: string;
 }, never>;
-export declare const HintText: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
-    $color?: string;
-    $align?: "center";
-    $clamp?: number;
-    $marginTop?: number;
-}, never>;
-export declare const RevealButtonText: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
-    $color?: string;
-    $align?: "center";
-    $clamp?: number;
-    $marginTop?: number;
-} & {
-    $align: string;
-    $marginTop: number;
+export declare const HintText: import("styled-components").StyledComponent<typeof NativeRichMediaText, any, {}, never>;
+export declare const RevealButtonText: import("styled-components").StyledComponent<typeof NativeRichMediaText, any, {
+    $align: "center";
+    $marginTop: 14;
 } & {
     $background: string;
     $radius: number;

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/NativeRichMediaSpinwheelView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Card, Hub, Pointer, Ring, SegmentLabel, Tick, Wheel } from './styles';
+import { DynamicContentText } from '../../../shared/dynamicContent';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
@@ -48,7 +49,10 @@ export function NativeRichMediaSpinwheelView(props) {
         "$background": spinButton?.background,
         "$color": spinButton?.text.color,
         "$borderColor": spinButton?.border.color,
-        children: spinButton?.text.text || 'SPIN'
+        children: _jsx(DynamicContentText, {
+          tone: "subtle",
+          children: spinButton?.text.text || 'SPIN'
+        })
       })]
     }), block.showClose && _jsx(NativeRichMediaCloseChip, {
       top: 16,

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/styles.d.ts

@@ -1,3 +1,4 @@
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 export declare const Card: import("styled-components").StyledComponent<"div", any, {
     $background: string;
     $padding: string;
@@ -11,12 +12,7 @@ export declare const Ring: import("styled-components").StyledComponent<"div", an
 export declare const Tick: import("styled-components").StyledComponent<"div", any, {
     $rotate: number;
 }, never>;
-export declare const SegmentLabel: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
-    $color?: string;
-    $align?: "center";
-    $clamp?: number;
-    $marginTop?: number;
-} & {
+export declare const SegmentLabel: import("styled-components").StyledComponent<typeof NativeRichMediaText, any, {
     $rotate: number;
 }, never>;
 export declare const Pointer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/RichMessageEditor/RichMessageViewer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useMemo } from 'react';
-import { DynamicContentBracket, DynamicContentRoot, Paragraph } from './RichMessageViewer.styled';
 import { isElement, string2content } from './slate/helpers';
+import { DynamicContentChip, Paragraph } from '../shared/dynamicContent';
 /**
  * Read-only renderer for {@link RichMessageEditor} output, displaying text and
  * personalization tokens. Accepts structured content or a serialized string.
@@ -19,12 +19,8 @@ export const RichMessageViewer = ({
   return content.map((node, index) => {
     const children = node.children.map((child, idx) => {
       if (isElement(child) && child.type === 'dc') {
-        return _jsxs(DynamicContentRoot, {
-          children: [_jsx(DynamicContentBracket, {
-            children: '{'
-          }), "\u00A0", child.dc.tagName, "\u00A0", _jsx(DynamicContentBracket, {
-            children: '}'
-          })]
+        return _jsx(DynamicContentChip, {
+          dc: child.dc
         }, idx);
       }
       return child.text;

package/RichMessageEditor/slate/helpers.d.ts

@@ -1,5 +1,6 @@
 import type { Descendant } from 'slate';
-import { type CustomElement, type DynamicContent, type DynamicContentElement, type SlateEditorContent } from './types';
+import { type CustomElement, type DynamicContentElement, type SlateEditorContent } from './types';
+import { parseDc, stringifyDc } from '../../shared/dynamicContent';
 /**
  * Checks if a Slate node is a custom element
  * @param x - The node to check
@@ -26,18 +27,7 @@ export declare function findAllDc(value: SlateEditorContent): DynamicContentElem
  * @returns Array of indices representing the path to the element, empty if not found
  */
 export declare function findPath(value: SlateEditorContent, elToFind: Descendant): number[];
-/**
- * Parses a dynamic content string into a DynamicContent object
- * @param value - String in format "{tagName|modifier|defaultValue}"
- * @returns DynamicContent object with parsed components
- */
-export declare function parseDc(value: string): DynamicContent;
-/**
- * Converts a DynamicContent object to its string representation
- * @param dc - The DynamicContent object
- * @returns String representation in format "{tagName|modifier|defaultValue}"
- */
-export declare function stringifyDc(dc: DynamicContent): string;
+export { parseDc, stringifyDc };
 /**
  * Converts a string to Slate editor content, parsing dynamic content tags
  * @param value - The input string to convert

package/RichMessageEditor/slate/helpers.js

@@ -1,3 +1,4 @@
+import { parseDc, splitDynamicContent, stringifyDc } from '../../shared/dynamicContent';
 /**
  * Checks if a Slate node is a custom element
  * @param x - The node to check
@@ -68,60 +69,44 @@ export function findPath(value, elToFind) {
   }
   return [];
 }
-/**
- * Parses a dynamic content string into a DynamicContent object
- * @param value - String in format "{tagName|modifier|defaultValue}"
- * @returns DynamicContent object with parsed components
- */
-export function parseDc(value) {
-  const [tagName, modifier, defaultValue = ''] = value.slice(1, -1).split('|');
-  return {
-    tagName,
-    modifier,
-    defaultValue
-  };
-}
-/**
- * Converts a DynamicContent object to its string representation
- * @param dc - The DynamicContent object
- * @returns String representation in format "{tagName|modifier|defaultValue}"
- */
-export function stringifyDc(dc) {
-  const {
-    tagName,
-    modifier,
-    defaultValue
-  } = dc;
-  return `{${tagName}|${modifier}${defaultValue ? `|${defaultValue}` : ''}}`;
-}
-// Regular expression to match dynamic content tags in the format "{tagName|modifier|defaultValue}"
-// The regex captures the entire tag, including the curly braces and pipe characters
-// It uses a positive lookahead to ensure that there is at least one pipe character in the tag
-// This allows for the presence of a default value, but does not require it
-const DynamicContentRegex = /(\{(?=[^}]*\|).*?})/;
+// Re-exported so existing import paths keep working; the token format itself
+// now lives in shared/dynamicContent, shared with the read-only renderers.
+export { parseDc, stringifyDc };
 /**
  * Converts a string to Slate editor content, parsing dynamic content tags
  * @param value - The input string to convert
  * @returns SlateEditorContent with properly structured paragraphs and dynamic content
  */
 export function string2content(value) {
-  return value.split('\n').map(line => ({
-    type: 'paragraph',
-    children: line.split(DynamicContentRegex).map((text, index) => {
-      if (index % 2 === 1) {
-        return {
-          type: 'dc',
-          dc: parseDc(text),
-          children: [{
-            text: ''
-          }]
-        };
-      }
+  return value.split('\n').map(line => {
+    const parts = splitDynamicContent(line);
+    // Slate rejects a paragraph with no children, so an empty line keeps one empty text node.
+    if (parts.length === 0) {
       return {
-        text
+        type: 'paragraph',
+        children: [{
+          text: ''
+        }]
       };
-    })
-  }));
+    }
+    return {
+      type: 'paragraph',
+      children: parts.map(part => {
+        if (part.isToken) {
+          return {
+            type: 'dc',
+            dc: parseDc(part.text),
+            children: [{
+              text: ''
+            }]
+          };
+        }
+        return {
+          text: part.text
+        };
+      })
+    };
+  });
 }
 /**
  * Converts Slate editor content to a string, including dynamic content tags

package/RichMessageEditor/slate/types.d.ts

@@ -1,15 +1,9 @@
 import type { Descendant } from 'slate';
+import type { DynamicContent } from '../../shared/dynamicContent';
 /** Editor document model — an array of Slate nodes (exported publicly as `RichMessageEditorContent`). */
 export type SlateEditorContent = Descendant[];
 /** A dynamic-content (personalization) token embedded in the message. */
-export type DynamicContent = {
-    /** Personalization tag name (e.g. a tag or attribute key). */
-    tagName: string;
-    /** Optional value modifier/formatter. */
-    modifier: string;
-    /** Fallback value used when the tag resolves to nothing. */
-    defaultValue: string;
-};
+export type { DynamicContent };
 export type ParagraphElement = {
     type: 'paragraph';
     children: SlateEditorContent;

package/package.json

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

package/shared/dynamicContent/DynamicContentChip.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import { type DynamicContent, type DynamicContentTone } from './types';
+/** Props of {@link DynamicContentChip}. */
+export type DynamicContentChipProps = {
+    /** Token to display; only its tag name is shown. */
+    dc: DynamicContent;
+    /** `solid` for opaque surfaces, `subtle` over author-chosen backgrounds. */
+    tone?: DynamicContentTone;
+};
+/** Renders one dynamic-content token as `{ tagName }`. */
+export declare function DynamicContentChip(props: DynamicContentChipProps): ReactElement;

package/shared/dynamicContent/DynamicContentChip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bracket, Chip } from './styles';
+/** Renders one dynamic-content token as `{ tagName }`. */
+export function DynamicContentChip(props) {
+  const {
+    dc,
+    tone = 'solid'
+  } = props;
+  return _jsxs(Chip, {
+    "$tone": tone,
+    "data-dc-token": true,
+    children: [_jsx(Bracket, {
+      "$tone": tone,
+      children: '{'
+    }), "\u00A0", dc.tagName, "\u00A0", _jsx(Bracket, {
+      "$tone": tone,
+      children: '}'
+    })]
+  });
+}

package/shared/dynamicContent/DynamicContentText.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type DynamicContentTone } from './types';
+/** Props of {@link DynamicContentText}. */
+export type DynamicContentTextProps = {
+    /** Text to render; dynamic-content tokens inside it become chips. Non-string children pass through. */
+    children?: ReactNode;
+    /** Chip appearance. */
+    tone?: DynamicContentTone;
+};
+/** Renders text with every dynamic-content token displayed as a chip. */
+export declare function DynamicContentText(props: DynamicContentTextProps): ReactElement;

package/shared/dynamicContent/DynamicContentText.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DynamicContentChip } from './DynamicContentChip';
+import { parseDc, splitDynamicContent } from './token';
+/** Renders text with every dynamic-content token displayed as a chip. */
+export function DynamicContentText(props) {
+  const {
+    children,
+    tone
+  } = props;
+  if (typeof children !== 'string') {
+    return _jsx(_Fragment, {
+      children: children
+    });
+  }
+  const parts = splitDynamicContent(children);
+  return _jsx(_Fragment, {
+    children: parts.map((part, index) => part.isToken ? _jsx(DynamicContentChip, {
+      dc: parseDc(part.text),
+      tone: tone
+    }, index) : part.text)
+  });
+}

package/shared/dynamicContent/index.d.ts

@@ -0,0 +1,5 @@
+export { DynamicContentChip, type DynamicContentChipProps } from './DynamicContentChip';
+export { DynamicContentText, type DynamicContentTextProps } from './DynamicContentText';
+export { parseDc, splitDynamicContent, stringifyDc } from './token';
+export { Paragraph } from './styles';
+export type { DynamicContent, DynamicContentPart, DynamicContentTone } from './types';

package/shared/dynamicContent/index.js

@@ -0,0 +1,4 @@
+export { DynamicContentChip } from './DynamicContentChip';
+export { DynamicContentText } from './DynamicContentText';
+export { parseDc, splitDynamicContent, stringifyDc } from './token';
+export { Paragraph } from './styles';

package/shared/dynamicContent/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const Chip: import("styled-components").StyledComponent<"span", any, {
+    $tone: "solid" | "subtle";
+}, never>;
+export declare const Bracket: import("styled-components").StyledComponent<"span", any, {
+    $tone: "solid" | "subtle";
+}, never>;
+export declare const Paragraph: import("styled-components").StyledComponent<"div", any, {}, never>;

package/shared/dynamicContent/styles.js

@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components';
+import { Color, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+// `subtle` exists because the native rich media preview draws text over
+// author-chosen backgrounds, where the opaque kit tokens can swallow the label.
+export const Chip = styled.span.withConfig({
+  displayName: "Chip",
+  componentId: "sc-1p4g9n3-0"
+})(["border-radius:", ";white-space:nowrap;font-weight:", ";padding:0 2px;", ""], ShapeRadius.CONTROL, FontWeight.MEDIUM, ({
+  $tone
+}) => $tone === 'solid' ? css(["background-color:", ";"], Color.EXCEPTIONAL_LIGHT) : css(["background-color:rgba(88,86,214,0.16);box-shadow:inset 0 0 0 1px rgba(88,86,214,0.32);color:inherit;"]));
+export const Bracket = styled.span.withConfig({
+  displayName: "Bracket",
+  componentId: "sc-1p4g9n3-1"
+})(["", ""], ({
+  $tone
+}) => $tone === 'solid' ? css(["color:", ";"], Color.EXCEPTIONAL) : css(["color:inherit;opacity:0.7;"]));
+export const Paragraph = styled.div.withConfig({
+  displayName: "Paragraph",
+  componentId: "sc-1p4g9n3-2"
+})(["min-height:1em;"]);

package/shared/dynamicContent/token.d.ts

@@ -0,0 +1,20 @@
+/** A run of text: either literal text or a dynamic-content token. */
+export type DynamicContentPart = {
+    text: string;
+    isToken: boolean;
+};
+/** A dynamic-content (personalization) token embedded in a message. */
+export type DynamicContent = {
+    /** Personalization tag name (e.g. a tag or attribute key). */
+    tagName: string;
+    /** Optional value modifier/formatter. */
+    modifier: string;
+    /** Fallback value used when the tag resolves to nothing. */
+    defaultValue: string;
+};
+/** Splits text into literal runs and dynamic-content tokens. */
+export declare function splitDynamicContent(text: string): DynamicContentPart[];
+/** Parses `{tagName|modifier|defaultValue}` into its parts. */
+export declare function parseDc(value: string): DynamicContent;
+/** Serializes a token back to `{tagName|modifier|defaultValue}`. */
+export declare function stringifyDc(dc: DynamicContent): string;

package/shared/dynamicContent/token.js

@@ -0,0 +1,45 @@
+// Localization placeholders (`{{key|text}}`) contain a token-shaped substring,
+// so they are matched first and kept literal.
+const PART_REGEX = /(\{\{[^{}]*\}\}|\{(?=[^{}]*\|)[^{}]*\})/;
+/** Splits text into literal runs and dynamic-content tokens. */
+export function splitDynamicContent(text) {
+  if (!text) {
+    return [];
+  }
+  const parts = [];
+  text.split(PART_REGEX).forEach((part, index) => {
+    if (part === '') {
+      return;
+    }
+    // Odd indices are the captured separators; a token is one not starting with `{{`.
+    const isToken = index % 2 === 1 && !part.startsWith('{{');
+    const previous = parts[parts.length - 1];
+    if (!isToken && previous && !previous.isToken) {
+      previous.text += part;
+      return;
+    }
+    parts.push({
+      text: part,
+      isToken
+    });
+  });
+  return parts;
+}
+/** Parses `{tagName|modifier|defaultValue}` into its parts. */
+export function parseDc(value) {
+  const [tagName, modifier, defaultValue = ''] = value.slice(1, -1).split('|');
+  return {
+    tagName,
+    modifier,
+    defaultValue
+  };
+}
+/** Serializes a token back to `{tagName|modifier|defaultValue}`. */
+export function stringifyDc(dc) {
+  const {
+    tagName,
+    modifier,
+    defaultValue
+  } = dc;
+  return `{${tagName}|${modifier}${defaultValue ? `|${defaultValue}` : ''}}`;
+}

package/shared/dynamicContent/types.d.ts

@@ -0,0 +1,3 @@
+export type { DynamicContent, DynamicContentPart } from './token';
+/** Chip appearance: `solid` on flat surfaces, `subtle` over arbitrary backgrounds. */
+export type DynamicContentTone = 'solid' | 'subtle';

package/shared/dynamicContent/types.js

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

package/RichMessageEditor/RichMessageViewer.styled.d.ts

@@ -1,3 +0,0 @@
-export declare const DynamicContentRoot: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DynamicContentBracket: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Paragraph: import("styled-components").StyledComponent<"div", any, {}, never>;

package/RichMessageEditor/RichMessageViewer.styled.js

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-import { Color, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
-export const DynamicContentRoot = styled.span.withConfig({
-  displayName: "DynamicContentRoot",
-  componentId: "sc-f10jz5-0"
-})(["background-color:", ";border-radius:", ";white-space:nowrap;font-weight:", ";padding:0 2px;"], Color.EXCEPTIONAL_LIGHT, ShapeRadius.CONTROL, FontWeight.MEDIUM);
-export const DynamicContentBracket = styled.span.withConfig({
-  displayName: "DynamicContentBracket",
-  componentId: "sc-f10jz5-1"
-})(["color:", ";"], Color.EXCEPTIONAL);
-export const Paragraph = styled.div.withConfig({
-  displayName: "Paragraph",
-  componentId: "sc-f10jz5-2"
-})(["min-height:1em;"]);