@pushwoosh/dumb-components 1.0.68 → 1.0.70

package/package.json

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

package/polyglot/liquid/render.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
-import { Text } from '@pushwoosh/kit-typography';
+import { variants } from '@pushwoosh/kit-typography/map';
 import { filters } from './filters';
 import { stringifyScalarOrVariable, unpackScalarOrValue } from './helpers';
 import { ifOperatorFns } from './parser';
@@ -77,14 +78,29 @@ export function renderToString(ast, context) {
   const outArr = renderNodesToArray(ast, context, (tagNode, children) => [`<${tagNode.name} ${Object.entries(tagNode.params).map(([key, value]) => `${key}=${stringifyScalarOrVariable(value)}`).join(' ')}>`, ...children, `</${tagNode.name}>`]);
   return outArr.join('');
 }
+function getColor(color) {
+  const colorValue = Color[color];
+  if (colorValue) {
+    return colorValue;
+  }
+  return color;
+}
+const Txt = styled.span.withConfig({
+  displayName: "Txt",
+  componentId: "sc-nm71u5-0"
+})(["", " ", ""], ({
+  $color
+}) => $color && `color: ${$color};`, ({
+  $variant
+}) => $variant && variants[$variant]);
 export function renderToReact(ast, context) {
   return renderNodesToArray(ast, context, (tagNode, children, key) => {
     const TagName = tagNode.name;
     const props = Object.fromEntries(Object.entries(tagNode.params).map(([key, value]) => [key, unpackScalarOrValue(value, context)]));
     if (TagName === 'text') {
-      return [React.createElement(Text, {
+      return [React.createElement(Txt, {
         "$variant": props.variant,
-        "$color": props.color && (Color[props.color] ?? props.color),
+        "$color": getColor(props.color),
         key: key
       }, children)];
     }