@sendbird/uikit-react 3.16.8 → 3.16.9

package/chunks/{bundle-CSJ53xaT.js → bundle-CdILp5Ht.js}

@@ -121,7 +121,7 @@ const outCarouselStyle = (carouselstyle) => {
     if (!carouselstyle)
         return {};
     return {
-        carouselStyle: Object.assign(Object.assign({}, carouselstyle), outSingle('spacing', carouselstyle)),
+        carouselStyle: Object.assign(Object.assign(Object.assign({}, carouselstyle), outSingle('spacing', carouselstyle)), outSingle('maxChildWidth', carouselstyle)),
     };
 };
 const outViewProps = (view) => {
@@ -168,28 +168,15 @@ const createParser = (params) => {
         mapCarouselProps: (params === null || params === void 0 ? void 0 : params.mapCarouselProps) || defaultMapper,
     };
     const transforms = [colorTransform, numberTransform, ...((_a = params === null || params === void 0 ? void 0 : params.transforms) !== null && _a !== void 0 ? _a : [])];
-    const transformDirty = new Set();
     return {
         setTransforms(newTransforms) {
             transforms.length = 0;
             transforms.push(...newTransforms);
-            transformDirty.clear();
         },
         addTransforms(newTransforms) {
             transforms.push(...newTransforms);
         },
         parse(rawItem, options) {
-            // Note: it is for mutable transforms
-            // const uniqId =
-            //   typeof options.depth === 'number' && typeof options.elemIdx === 'number'
-            //     ? `id-${options.depth}-${options.elemIdx}`
-            //     : rawItem.id ?? rawItem.elementId ?? JSON.stringify(rawItem);
-            //
-            // let item = rawItem;
-            // if (!transformDirty.has(uniqId)) {
-            //   item = transforms.reduce((it, transform) => transform(it), rawItem);
-            //   transformDirty.add(uniqId);
-            // }
             const item = transforms.reduce((it, transform) => transform.run(it), rawItem);
             switch (item.type) {
                 case ComponentType.Box: {
@@ -376,14 +363,15 @@ const createMessageTemplate = (opts) => {
         if (!isTemplateVersionSupported(templateVersion)) {
             throw new Error(`Cannot parse template item due to unsupported template version: ${templateVersion}, ${SUPPORTED_TEMPLATE_VERSIONS}`);
         }
-        return (React__default.createElement(React__default.Fragment, null, templateItems.map((rawItem, index, siblings) => {
-            const result = parser.parse(rawItem, { parentLayout, depth, elemIdx: index, siblings });
+        return (React__default.createElement(React__default.Fragment, null, templateItems.map((rawProperties, index, siblings) => {
+            const result = parser.parse(rawProperties, { parentLayout, depth, elemIdx: index, siblings });
             const item = result.transformed;
             const rendererProps = {
                 key: index,
                 siblings,
                 parentLayout,
                 parsedProperties: result.properties,
+                rawProperties,
             };
             switch (item.type) {
                 case ComponentType.Carousel: {
@@ -419,7 +407,7 @@ const createMessageTemplate = (opts) => {
         MessageTemplate: ({ templateVersion, templateItems, parentLayout = defaultProperties.rootLayout, }) => {
             const items = setTemplateItemId(templateItems);
             return (React__default.createElement(SizeContextProvider, null,
-                React__default.createElement(Container, null,
+                React__default.createElement(Container, { className: 'sb-message-template__parent' },
                     React__default.createElement(MessageTemplateBase, { isRoot: true, parentLayout: parentLayout, templateItems: items, templateVersion: templateVersion }))));
         },
         MessageTemplateBase,
@@ -1284,11 +1272,276 @@ var ActionType;
     },
 });
 
+function isWrappedText(view) {
+    var _a;
+    return view.type === ComponentType.Text && ((_a = view.width) === null || _a === void 0 ? void 0 : _a.value) == FlexSizeSpecValue.WrapContent;
+}
+// Compares the size spec to the option and returns whether they are equal or not.
+const isSizeCompatibleWithOption = ({ size, option, }) => {
+    if (option === 'wrap') {
+        return size.type === 'flex' && size.value == FlexSizeSpecValue.WrapContent;
+    }
+    if (option === 'fill') {
+        return size.type === 'flex' && size.value == FlexSizeSpecValue.FillParent;
+    }
+    return size.type === 'fixed';
+};
+const isGif = (url) => {
+    var _a;
+    if (typeof url !== 'string')
+        return false;
+    const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return extension === 'gif';
+};
+const clx = (...names) => {
+    return names.filter((it) => !!it).join(' ');
+};
+const hasValidURLProtocol = (url = '') => {
+    return ['http://', 'https://', 'ftp://'].some((protocol) => url.startsWith(protocol));
+};
+/**
+ * @param url - url to be checked
+ * @returns url with http:// protocol if it doesn't have any protocol
+ * @example
+ * returnUrl('www.sendbird.com') // returns 'http://www.sendbird.com'
+ * returnUrl('https://www.sendbird.com') // returns 'https://www.sendbird.com'
+ * returnUrl('ftp://www.sendbird.com') // returns 'ftp://www.sendbird.com'
+ * returnUrl('sendbird.com') // returns 'https://sendbird.com'
+ **/
+const getValidURL = (url = '') => {
+    if (hasValidURLProtocol(url))
+        return url;
+    return `https://${url}`;
+};
+
+function getDefaultStyles(overrides) {
+    return Object.assign({ display: 'flex', overflow: 'hidden', boxSizing: 'border-box' }, overrides);
+}
+function setViewProps(styles, props, options) {
+    setViewSize(styles, props, options);
+    setViewStyle(styles, props);
+}
+function setBorderStyle(styles, borderWidth, borderColor, radius) {
+    if (borderWidth) {
+        styles['--border-width'] = `${borderWidth}px`;
+        styles['--border-color'] = borderColor || 'transparent';
+    }
+    if (radius) {
+        styles['borderRadius'] = radius;
+        styles['--border-radius'] = `${radius}px`;
+    }
+}
+function setViewStyle(styles, props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { viewStyle } = props;
+    styles['marginBlockStart'] = (_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _a === void 0 ? void 0 : _a.top;
+    styles['marginBlockEnd'] = (_b = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _b === void 0 ? void 0 : _b.bottom;
+    styles['marginInlineStart'] = (_c = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _c === void 0 ? void 0 : _c.left;
+    styles['marginInlineEnd'] = (_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _d === void 0 ? void 0 : _d.right;
+    const marginHorizontal = ((_f = (_e = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _e === void 0 ? void 0 : _e.left) !== null && _f !== void 0 ? _f : 0) + ((_h = (_g = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _g === void 0 ? void 0 : _g.right) !== null && _h !== void 0 ? _h : 0);
+    if (marginHorizontal > 0 && styles.width === '100%')
+        styles.width = `calc(100% - ${marginHorizontal}px)`;
+    if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor)
+        styles['backgroundColor'] = viewStyle.backgroundColor;
+    // use JSON.stringify to escape special characters in image URL
+    if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundImageUrl) {
+        styles['backgroundImage'] = `url(${JSON.stringify(viewStyle.backgroundImageUrl)})`;
+        styles['backgroundSize'] = '100% 100%';
+        styles['backgroundPosition'] = 'center';
+    }
+    setBorderStyle(styles, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderWidth, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderColor, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.radius);
+}
+function getViewSizeStyle(width, height, parentLayout) {
+    const style = {};
+    if (width.type === 'flex' && width.value == FlexSizeSpecValue.FillParent) {
+        style['width'] = '100%';
+        if (parentLayout === Layout.Row) {
+            style['flex'] = 1;
+        }
+    }
+    else if (width.type === 'flex' && width.value == FlexSizeSpecValue.WrapContent) {
+        style['width'] = 'fit-content';
+        if (parentLayout === Layout.Row) {
+            style['flexShrink'] = 0;
+        }
+    }
+    else if (width.type === 'fixed' && width.value >= 0) {
+        style['width'] = width.value;
+        if (parentLayout === Layout.Row) {
+            style['flexShrink'] = 0;
+        }
+    }
+    if (height.type === 'flex' && height.value == FlexSizeSpecValue.FillParent) {
+        style['height'] = '100%';
+        if (parentLayout === Layout.Column) {
+            style['flex'] = 1;
+        }
+    }
+    else if (height.type === 'flex' && height.value == FlexSizeSpecValue.WrapContent) {
+        style['height'] = 'fit-content';
+        if (parentLayout === Layout.Column) {
+            style['flexShrink'] = 0;
+        }
+    }
+    else if (height.type === 'fixed' && height.value >= 0) {
+        style['height'] = height.value;
+        if (parentLayout === Layout.Column) {
+            style['flexShrink'] = 0;
+        }
+    }
+    return style;
+}
+function setViewSize(styles, props, options) {
+    var _a, _b;
+    const { width: defaultWidth, height: defaultHeight } = defaultProperties.view.size;
+    const { parentLayout } = options;
+    const sizeStyle = getViewSizeStyle((_a = props.width) !== null && _a !== void 0 ? _a : defaultWidth, (_b = props.height) !== null && _b !== void 0 ? _b : defaultHeight, parentLayout);
+    Object.assign(styles, sizeStyle);
+}
+function setAlign(styles, layout = defaultProperties.box.layout, align = defaultProperties.box.align) {
+    if (layout === Layout.Row) {
+        styles['flexDirection'] = 'row';
+        styles['alignItems'] = alignInFlex(align.vertical);
+        styles['justifyContent'] = alignInFlex(align.horizontal);
+    }
+    if (layout === Layout.Column) {
+        styles['flexDirection'] = 'column';
+        styles['alignItems'] = alignInFlex(align.horizontal);
+        styles['justifyContent'] = alignInFlex(align.vertical);
+    }
+}
+function setTextAlign(styles, align = defaultProperties.box.align.horizontal) {
+    switch (align) {
+        case AlignValue.Left:
+            styles.textAlign = 'start';
+            break;
+        case AlignValue.Right:
+            styles.textAlign = 'end';
+            break;
+        case AlignValue.Center:
+            styles.textAlign = 'center';
+            break;
+        default:
+            styles.textAlign = 'start';
+            break;
+    }
+}
+function setImageStyle(styles, imageStyle) {
+    const { contentMode = MediaContentMode.AspectFit } = imageStyle || {};
+    if (contentMode) {
+        switch (contentMode) {
+            case MediaContentMode.AspectFill:
+                styles['objectFit'] = 'cover';
+                break;
+            case MediaContentMode.AspectFit:
+                styles['objectFit'] = 'contain';
+                break;
+            case MediaContentMode.ScalesToFill:
+                styles['objectFit'] = 'fill';
+                break;
+        }
+    }
+}
+// uses image meta-data to render images that doesn't break the UI
+// https://sendbird.atlassian.net/wiki/spaces/UK/pages/2008220608/Message+template+-+Image+policy
+function setImageAspectRatio(styles, props) {
+    var _a, _b, _c, _d;
+    const imageMetaData = props === null || props === void 0 ? void 0 : props.metaData;
+    if (!(imageMetaData === null || imageMetaData === void 0 ? void 0 : imageMetaData.pixelHeight) || !(imageMetaData === null || imageMetaData === void 0 ? void 0 : imageMetaData.pixelWidth)) {
+        return;
+    }
+    if (((_a = props === null || props === void 0 ? void 0 : props.width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed' || ((_b = props === null || props === void 0 ? void 0 : props.height) === null || _b === void 0 ? void 0 : _b.type) === 'fixed') {
+        return;
+    }
+    styles['aspectRatio'] = `${(_c = props === null || props === void 0 ? void 0 : props.metaData) === null || _c === void 0 ? void 0 : _c.pixelWidth} / ${(_d = props === null || props === void 0 ? void 0 : props.metaData) === null || _d === void 0 ? void 0 : _d.pixelHeight}`;
+}
+function webkitLineClampStyles(numberOfLines) {
+    return {
+        WebkitLineClamp: numberOfLines,
+        WebkitBoxOrient: 'vertical',
+        display: '-webkit-box',
+        overflow: 'hidden',
+        overflowWrap: 'anywhere',
+        flex: 1,
+    };
+}
+function setTextStyle(styles, props, options) {
+    const { textStyle, width } = props;
+    // TODO: Change default as design
+    const { size, color, weight } = textStyle || {};
+    if (size)
+        styles['fontSize'] = size;
+    if (color)
+        styles['color'] = color;
+    if (weight)
+        styles['fontWeight'] = weight;
+    if ((width === null || width === void 0 ? void 0 : width.type) === 'flex' && (width === null || width === void 0 ? void 0 : width.value) == FlexSizeSpecValue.WrapContent) {
+        styles['width'] = 'fit-content';
+        styles['maxWidth'] = '100%';
+    }
+    if (props.type === ComponentType.Text) {
+        const { siblings, elemIdx } = options;
+        // To push out any subsequent components from the container,
+        // if a prior one is long enough to occupy an entire line
+        // @link https://sendbird.atlassian.net/browse/NOTI-709
+        if (siblings != null && siblings.length >= 2 && siblings.every(isWrappedText)) {
+            styles.flexShrink = siblings.length - 1 === elemIdx ? 1 : 0;
+        }
+    }
+}
+
+const parser = createParser({
+    mapBoxProps(props, options) {
+        const styles = getDefaultStyles();
+        setViewProps(styles, props, options);
+        setAlign(styles, props.layout, props.align);
+        return styles;
+    },
+    mapTextProps(props, options) {
+        var _a;
+        const styles = getDefaultStyles({ whiteSpace: 'pre-line', wordBreak: 'break-word' });
+        // Better not set flex 1 to text
+        setViewProps(styles, props, options);
+        setTextStyle(styles, props, options);
+        setAlign(styles, Layout.Row, props.align);
+        setTextAlign(styles, (_a = props.align) === null || _a === void 0 ? void 0 : _a.horizontal);
+        return styles;
+    },
+    mapImageProps(props, options) {
+        const styles = getDefaultStyles();
+        setViewProps(styles, props, options);
+        setImageStyle(styles, props.imageStyle);
+        setImageAspectRatio(styles, props);
+        return styles;
+    },
+    mapTextButtonProps(props, options) {
+        const styles = getDefaultStyles({ whiteSpace: 'pre-line', alignItems: 'center', justifyContent: 'center' });
+        setViewProps(styles, props, options);
+        setTextStyle(styles, props, options);
+        return styles;
+    },
+    mapImageButtonProps(props, options) {
+        const styles = getDefaultStyles();
+        setViewProps(styles, props, options);
+        setImageStyle(styles, props.imageStyle);
+        setImageAspectRatio(styles, props);
+        return styles;
+    },
+    mapCarouselProps(props, options) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const styles = getDefaultStyles();
+        setViewProps(styles, props, options);
+        styles['paddingBlockStart'] = (_b = (_a = props.viewStyle) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.top;
+        styles['paddingBlockEnd'] = (_d = (_c = props.viewStyle) === null || _c === void 0 ? void 0 : _c.padding) === null || _d === void 0 ? void 0 : _d.bottom;
+        styles['paddingInlineStart'] = (_f = (_e = props.viewStyle) === null || _e === void 0 ? void 0 : _e.padding) === null || _f === void 0 ? void 0 : _f.left;
+        styles['paddingInlineEnd'] = (_h = (_g = props.viewStyle) === null || _g === void 0 ? void 0 : _g.padding) === null || _h === void 0 ? void 0 : _h.right;
+        return styles;
+    },
+});
+
 const SWIPE_THRESHOLD = 24;
+const CLICK_THRESHOLD = 5;
 function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlineEnd }) {
-    // TODO: RTL support
-    const paddingStart = paddingInlineStart;
-    const paddingEnd = paddingInlineEnd;
     const carouselRef = useRef(null);
     const childrenRefs = useRef(Array.from({ length: childrenLength }, () => React__default.createRef()));
     const isDragging = useRef(false);
@@ -1300,22 +1553,32 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
         offset: 0,
         translateX: 0,
         currentIndex: 0,
+        didMove: false,
     });
     const [childWidths, setChildWidths] = useState(() => childrenRefs.current.map(() => 0));
+    const [isRTL, setIsRTL] = useState(false);
+    const directionMultiplier = isRTL ? -1 : 1;
     const itemPositions = useMemo(() => {
-        let currentPosition = paddingStart;
+        let currentPosition = paddingInlineStart;
         return childWidths.map((width, i) => {
-            const start = currentPosition - (i > 0 ? spacing : 0);
+            const spacingOffset = i > 0 ? spacing : 0;
+            const start = currentPosition - spacingOffset;
             const end = start - width;
             currentPosition = end;
             return { start, end };
         });
-    }, [childWidths, spacing, paddingStart]);
+    }, [childWidths, spacing, paddingInlineStart]);
     const totalContentWidth = useMemo(() => {
         const totalItemWidth = childWidths.reduce((acc, width) => acc + width, 0);
         const totalSpacing = spacing * (childrenLength - 1);
         return totalItemWidth + totalSpacing;
     }, [childWidths, spacing, childrenLength]);
+    useLayoutEffect(() => {
+        if (carouselRef.current) {
+            const dir = getComputedStyle(carouselRef.current).direction;
+            setIsRTL(dir === 'rtl');
+        }
+    }, []);
     useLayoutEffect(() => {
         setChildWidths(childrenRefs.current.map((ref) => { var _a, _b; return (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0; }));
     }, [childrenLength]);
@@ -1359,9 +1622,9 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
         function clampTranslateX(translateX) {
             var _a, _b;
             const containerWidth = (_b = (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
-            const start = paddingStart;
-            const end = Math.min(0, containerWidth - totalContentWidth) - paddingEnd;
-            return Math.min(start, Math.max(end, translateX));
+            const start = paddingInlineStart;
+            const end = Math.min(0, containerWidth - totalContentWidth) - paddingInlineEnd;
+            return Math.min(start, Math.max(translateX, end));
         }
         drag.current.currentIndex = newIndex;
         drag.current.translateX = clampTranslateX(itemPositions[newIndex].start);
@@ -1375,7 +1638,8 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
     };
     const animate = () => {
         if (carouselRef.current) {
-            carouselRef.current.style.transform = `translateX(${drag.current.translateX + drag.current.offset}px)`;
+            const tx = (drag.current.translateX + drag.current.offset) * directionMultiplier;
+            carouselRef.current.style.transform = `translateX(${tx}px)`;
         }
         if (animationFrame.current) {
             animationFrame.current = requestAnimationFrame(animate);
@@ -1397,26 +1661,38 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
         drag.current.sx = event.clientX;
         drag.current.sy = event.clientY;
         drag.current.offset = 0;
+        drag.current.didMove = false;
         animationFrame.current = requestAnimationFrame(animate);
     };
     const onMouseMove = (event) => {
         if (!isDragging.current || drag.current.sx === null)
             return;
-        drag.current.offset = event.clientX - drag.current.sx;
+        drag.current.offset = (event.clientX - drag.current.sx) * directionMultiplier;
+        if (Math.abs(drag.current.offset) > CLICK_THRESHOLD) {
+            drag.current.didMove = true;
+        }
     };
-    const onMouseUp = () => {
+    const onMouseUp = (event) => {
         if (!isDragging.current)
             return;
         scrollStop();
         dragRelease();
         dragStop();
+        if (drag.current.didMove) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
-    const onMouseLeave = () => {
+    const onMouseLeave = (event) => {
         if (!isDragging.current)
             return;
         scrollStop();
         dragRelease();
         dragStop();
+        if (drag.current.didMove) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
     const onTouchStart = (event) => {
         scrollStop();
@@ -1425,6 +1701,7 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
         drag.current.sx = touch.clientX;
         drag.current.sy = touch.clientY;
         drag.current.offset = 0;
+        drag.current.didMove = false;
         animationFrame.current = requestAnimationFrame(animate);
     };
     const onTouchMove = (event) => {
@@ -1433,7 +1710,10 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
         const { clientX, clientY } = event.touches[0];
         const { sx, sy } = drag.current;
         if (isDragging.current) {
-            drag.current.offset = clientX - sx;
+            drag.current.offset = (clientX - sx) * directionMultiplier;
+            if (Math.abs(drag.current.offset) > CLICK_THRESHOLD) {
+                drag.current.didMove = true;
+            }
             return;
         }
         const isVerticalScroll = Math.abs(clientY - sy) > Math.abs(clientX - sx);
@@ -1441,16 +1721,26 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
             scrollStart();
         }
         else {
-            drag.current.offset = clientX - sx;
+            drag.current.offset = (clientX - sx) * directionMultiplier;
             blockScroll();
             dragStart();
         }
     };
-    const onTouchEnd = () => {
+    const onTouchEnd = (event) => {
         unblockScroll();
         scrollStop();
         dragRelease();
         dragStop();
+        if (drag.current.didMove) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    const onClickCapture = (event) => {
+        if (drag.current.didMove) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
     return {
         carouselRef,
@@ -1463,6 +1753,7 @@ function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlin
             onTouchStart,
             onTouchMove,
             onTouchEnd,
+            onClickCapture,
         },
     };
 }
@@ -1478,52 +1769,32 @@ var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const Carousel = ({ children, style, spacing = defaultProperties.carousel.style.spacing, maxChildWidth = defaultProperties.carousel.style.maxChildWidth, }) => {
-    const _a = style !== null && style !== void 0 ? style : {}, { paddingInlineStart = 0, paddingInlineEnd = 0 } = _a, restStyle = __rest$4(_a, ["paddingInlineStart", "paddingInlineEnd"]);
+const RMTCarousel = (_a) => {
+    var { children, style, spacing = defaultProperties.carousel.style.spacing, maxChildWidth = defaultProperties.carousel.style.maxChildWidth, inlineStyle } = _a, props = __rest$4(_a, ["children", "style", "spacing", "maxChildWidth", "inlineStyle"]);
+    const _b = style !== null && style !== void 0 ? style : {}, { paddingInlineStart = 0, paddingInlineEnd = 0 } = _b, restStyle = __rest$4(_b, ["paddingInlineStart", "paddingInlineEnd"]);
     const { carouselRef, childrenRefs, handlers } = useCarousel({
         spacing,
         childrenLength: children.length,
         paddingInlineStart: Number(paddingInlineStart),
         paddingInlineEnd: Number(paddingInlineEnd),
     });
-    return (React__default.createElement("div", Object.assign({}, handlers, { ref: carouselRef, className: 'sb-message-template__carousel', style: Object.assign(Object.assign({}, restStyle), { gap: spacing, width: '100%', overflow: 'visible' }) }), children.map((item, index) => (React__default.createElement(CarouselChild, { ref: childrenRefs.current[index], key: index, maxChildWidth: maxChildWidth }, item)))));
+    return (React__default.createElement("div", Object.assign({}, handlers, { ref: carouselRef, style: Object.assign(Object.assign(Object.assign({}, restStyle), { gap: spacing, width: '100%', overflow: 'visible' }), inlineStyle) }, props), children.map((item, index) => (React__default.createElement(RMTCarouselChild, { ref: childrenRefs.current[index], key: index, maxChildWidth: maxChildWidth }, item)))));
 };
-const CarouselChild = React__default.forwardRef(function CarouselChild({ maxChildWidth, children }, ref) {
+const RMTCarouselChild = React__default.forwardRef(function CarouselChild({ maxChildWidth, children }, ref) {
     const maxWidth = shouldSetMaxChildWidth(children.props, maxChildWidth) ? maxChildWidth : 'fit-content';
     return (React__default.createElement("div", { ref: ref, style: { maxWidth, width: '100%', flexShrink: 0, overflow: 'hidden', userSelect: 'none' } }, children));
 });
 // Note: Set the maxChildWidth because it's impossible to determine the maximum width of items in the Carousel Child template when they have FillParent
 function shouldSetMaxChildWidth(props, maxChildWidth) {
     return !!props.templateItems.find((it) => {
-        var _a, _b, _c, _d;
-        const hasFillWidth = ((_a = it.width) === null || _a === void 0 ? void 0 : _a.type) === 'flex' && ((_b = it.width) === null || _b === void 0 ? void 0 : _b.value) === FlexSizeSpecValue.FillParent;
-        const overMaxChildWidth = ((_c = it.width) === null || _c === void 0 ? void 0 : _c.type) === 'fixed' && ((_d = it.width) === null || _d === void 0 ? void 0 : _d.value) >= maxChildWidth;
+        var _a;
+        const width = (_a = it.width) !== null && _a !== void 0 ? _a : defaultProperties.view.size.width;
+        const hasFillWidth = width.type === 'flex' && width.value === FlexSizeSpecValue.FillParent;
+        const overMaxChildWidth = width.type === 'fixed' && width.value >= maxChildWidth;
         return hasFillWidth || overMaxChildWidth;
     });
 }
 
-function isWrappedText(view) {
-    var _a;
-    return view.type === ComponentType.Text && ((_a = view.width) === null || _a === void 0 ? void 0 : _a.value) == FlexSizeSpecValue.WrapContent;
-}
-// Compares the size spec to the option and returns whether they are equal or not.
-const isSizeCompatibleWithOption = ({ size, option, }) => {
-    if (option === 'wrap') {
-        return size.type === 'flex' && size.value == FlexSizeSpecValue.WrapContent;
-    }
-    if (option === 'fill') {
-        return size.type === 'flex' && size.value == FlexSizeSpecValue.FillParent;
-    }
-    return size.type === 'fixed';
-};
-const isGif = (url) => {
-    var _a;
-    if (typeof url !== 'string')
-        return false;
-    const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    return extension === 'gif';
-};
-
 var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -1535,7 +1806,7 @@ var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const CanvasReactMessageTemplateImage = (props) => {
+const RMTImageCanvas = (props) => {
     const { imageSize, canvasRef, canvasProps } = useCanvasMessageTemplateImage(props);
     return (React__default.createElement("canvas", Object.assign({}, canvasProps, { ref: canvasRef, width: imageSize === null || imageSize === void 0 ? void 0 : imageSize.width, height: imageSize === null || imageSize === void 0 ? void 0 : imageSize.height, onError: props.onError })));
 };
@@ -1551,7 +1822,6 @@ const useCanvasMessageTemplateImage = (_a) => {
     }, [fallbackImageSize, metaData === null || metaData === void 0 ? void 0 : metaData.pixelHeight, metaData === null || metaData === void 0 ? void 0 : metaData.pixelWidth]);
     useEffect(() => {
         if (imageSize == null) {
-            console.log('Canvas_ReactMessageTemplateImage: no metaData, render fit to container');
             if (canvasRef.current) {
                 canvasRef.current.style.width = '100%';
                 canvasRef.current.style.height = '100%';
@@ -1574,234 +1844,89 @@ const useCanvasMessageTemplateImage = (_a) => {
                         ctx.globalCompositeOperation = 'source-over';
                         ctx.fillStyle = '#000';
                         // draw
-                        ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
-                        ctx.globalCompositeOperation = 'source-atop';
-                        ctx.fillStyle = tintColor;
-                        ctx.fillRect(0, 0, imageWidth, imageHeight);
-                    }
-                }
-            };
-            const onImageError = (event) => {
-                var _a;
-                // @ts-ignore
-                (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, event);
-            };
-            img.addEventListener('load', onImageLoad);
-            img.addEventListener('error', onImageError);
-            img.src = props.src;
-            return () => {
-                img.removeEventListener('load', onImageLoad);
-                img.removeEventListener('error', onImageError);
-            };
-        }
-        return;
-    }, [props.src, imageSize, tintColor]);
-    return {
-        canvasRef,
-        canvasProps: props,
-        imageSize,
-    };
-};
-
-const ImgReactMessageTemplateImage = (props) => {
-    return React__default.createElement("img", Object.assign({}, props, { onError: props.onError, referrerPolicy: "no-referrer" }));
-};
-
-const PlaceholderReactMessageTemplateImage = (props) => {
-    return React__default.createElement("div", { style: Object.assign(Object.assign({}, props.style), { backgroundColor: 'transparent' }) });
-};
-
-var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const ReactMessageTemplateImage = (_a) => {
-    var { tintColor, metaData } = _a, props = __rest$2(_a, ["tintColor", "metaData"]);
-    const { hasError, onError } = useImageLoadError(props.src);
-    if (props.onError)
-        console.warn('`onError` is intercepted and not executed in the ReactMessageTemplateImage.');
-    if (hasError) {
-        return React__default.createElement(PlaceholderReactMessageTemplateImage, Object.assign({}, props));
-    }
-    else if (tintColor && !isGif(props.src)) {
-        return React__default.createElement(CanvasReactMessageTemplateImage, Object.assign({}, props, { onError: onError, tintColor: tintColor, metaData: metaData }));
-    }
-    else {
-        return React__default.createElement(ImgReactMessageTemplateImage, Object.assign({}, props, { onError: onError }));
-    }
-};
-const useImageLoadError = (source) => {
-    const [hasError, setHasError] = useState(false);
-    useEffect(() => setHasError(false), [source]);
-    return {
-        hasError,
-        onError: useCallback(() => setHasError(true), []),
-    };
-};
-
-function getDefaultStyles(overrides) {
-    return Object.assign({ display: 'flex', overflow: 'hidden', boxSizing: 'border-box' }, overrides);
-}
-function setViewProps(styles, props, options) {
-    setViewSize(styles, props, options);
-    setViewStyle(styles, props);
-}
-function setBorderStyle(styles, borderWidth, borderColor, radius) {
-    if (borderWidth) {
-        styles['--border-width'] = `${borderWidth}px`;
-        styles['--border-color'] = borderColor || 'transparent';
-    }
-    if (radius) {
-        styles['borderRadius'] = radius;
-        styles['--border-radius'] = `${radius}px`;
-    }
-}
-function setViewStyle(styles, props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { viewStyle } = props;
-    styles['marginBlockStart'] = (_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _a === void 0 ? void 0 : _a.top;
-    styles['marginBlockEnd'] = (_b = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _b === void 0 ? void 0 : _b.bottom;
-    styles['marginInlineStart'] = (_c = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _c === void 0 ? void 0 : _c.left;
-    styles['marginInlineEnd'] = (_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _d === void 0 ? void 0 : _d.right;
-    const marginHorizontal = ((_f = (_e = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _e === void 0 ? void 0 : _e.left) !== null && _f !== void 0 ? _f : 0) + ((_h = (_g = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _g === void 0 ? void 0 : _g.right) !== null && _h !== void 0 ? _h : 0);
-    if (marginHorizontal > 0 && styles.width === '100%')
-        styles.width = `calc(100% - ${marginHorizontal}px)`;
-    if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor)
-        styles['backgroundColor'] = viewStyle.backgroundColor;
-    // use JSON.stringify to escape special characters in image URL
-    if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundImageUrl) {
-        styles['backgroundImage'] = `url(${JSON.stringify(viewStyle.backgroundImageUrl)})`;
-        styles['backgroundSize'] = '100% 100%';
-        styles['backgroundPosition'] = 'center';
-    }
-    setBorderStyle(styles, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderWidth, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderColor, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.radius);
-}
-function getViewSizeStyle(width, height, parentLayout) {
-    const style = {};
-    if (width.type === 'flex' && width.value == FlexSizeSpecValue.FillParent) {
-        style['width'] = '100%';
-        if (parentLayout === Layout.Row) {
-            style['flex'] = 1;
-        }
-    }
-    else if (width.type === 'fixed' && width.value >= 0) {
-        style['width'] = width.value;
-    }
-    if (height.type === 'flex' && height.value == FlexSizeSpecValue.FillParent) {
-        style['height'] = '100%';
-        if (parentLayout === Layout.Column) {
-            style['flex'] = 1;
+                        ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
+                        ctx.globalCompositeOperation = 'source-atop';
+                        ctx.fillStyle = tintColor;
+                        ctx.fillRect(0, 0, imageWidth, imageHeight);
+                    }
+                }
+            };
+            const onImageError = (event) => {
+                var _a;
+                // @ts-ignore
+                (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            };
+            img.addEventListener('load', onImageLoad);
+            img.addEventListener('error', onImageError);
+            img.src = props.src;
+            return () => {
+                img.removeEventListener('load', onImageLoad);
+                img.removeEventListener('error', onImageError);
+            };
         }
-    }
-    else if (height.type === 'fixed' && height.value >= 0) {
-        style['height'] = height.value;
-    }
-    return style;
-}
-function setViewSize(styles, props, options) {
-    var _a, _b;
-    const { width: defaultWidth, height: defaultHeight } = defaultProperties.view.size;
-    const { parentLayout } = options;
-    const sizeStyle = getViewSizeStyle((_a = props.width) !== null && _a !== void 0 ? _a : defaultWidth, (_b = props.height) !== null && _b !== void 0 ? _b : defaultHeight, parentLayout);
-    Object.assign(styles, sizeStyle);
-}
-function setAlign(styles, layout = defaultProperties.box.layout, align = defaultProperties.box.align) {
-    if (layout === Layout.Row) {
-        styles['flexDirection'] = 'row';
-        styles['alignItems'] = alignInFlex(align.vertical);
-        styles['justifyContent'] = alignInFlex(align.horizontal);
-    }
-    if (layout === Layout.Column) {
-        styles['flexDirection'] = 'column';
-        styles['alignItems'] = alignInFlex(align.horizontal);
-        styles['justifyContent'] = alignInFlex(align.vertical);
-    }
-}
-function setTextAlign(styles, align = defaultProperties.box.align.horizontal) {
-    styles.textAlign = align;
-}
-function setImageStyle(styles, imageStyle) {
-    const { contentMode = MediaContentMode.AspectFit } = imageStyle || {};
-    if (contentMode) {
-        switch (contentMode) {
-            case MediaContentMode.AspectFill:
-                styles['objectFit'] = 'cover';
-                break;
-            case MediaContentMode.AspectFit:
-                styles['objectFit'] = 'contain';
-                break;
-            case MediaContentMode.ScalesToFill:
-                styles['objectFit'] = 'fill';
-                break;
+        return;
+    }, [props.src, imageSize, tintColor]);
+    return {
+        canvasRef,
+        canvasProps: props,
+        imageSize,
+    };
+};
+
+const RMTImageDefault = (props) => {
+    return React__default.createElement("img", Object.assign({}, props, { onError: props.onError, draggable: false, referrerPolicy: "no-referrer" }));
+};
+
+const RMTImagePlaceholder = (props) => {
+    return React__default.createElement("div", { style: Object.assign(Object.assign({}, props.style), { backgroundColor: 'transparent' }) });
+};
+
+var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
         }
+    return t;
+};
+const RMTImage = (_a) => {
+    var { tintColor, metaData } = _a, props = __rest$2(_a, ["tintColor", "metaData"]);
+    const { hasError, onError } = useImageLoadError(props.src);
+    if (props.onError)
+        console.warn('`onError` is intercepted and not executed in the ReactMessageTemplateImage.');
+    if (hasError) {
+        return React__default.createElement(RMTImagePlaceholder, Object.assign({}, props));
     }
-}
-// uses image meta-data to render images that doesn't break the UI
-// https://sendbird.atlassian.net/wiki/spaces/UK/pages/2008220608/Message+template+-+Image+policy
-function setImageAspectRatio(styles, props) {
-    var _a, _b, _c, _d;
-    const imageMetaData = props === null || props === void 0 ? void 0 : props.metaData;
-    if (!(imageMetaData === null || imageMetaData === void 0 ? void 0 : imageMetaData.pixelHeight) || !(imageMetaData === null || imageMetaData === void 0 ? void 0 : imageMetaData.pixelWidth)) {
-        return;
+    else if (tintColor && !isGif(props.src)) {
+        return React__default.createElement(RMTImageCanvas, Object.assign({}, props, { onError: onError, tintColor: tintColor, metaData: metaData }));
     }
-    if (((_a = props === null || props === void 0 ? void 0 : props.width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed' || ((_b = props === null || props === void 0 ? void 0 : props.height) === null || _b === void 0 ? void 0 : _b.type) === 'fixed') {
-        return;
+    else {
+        return React__default.createElement(RMTImageDefault, Object.assign({}, props, { onError: onError }));
     }
-    styles['aspectRatio'] = `${(_c = props === null || props === void 0 ? void 0 : props.metaData) === null || _c === void 0 ? void 0 : _c.pixelWidth} / ${(_d = props === null || props === void 0 ? void 0 : props.metaData) === null || _d === void 0 ? void 0 : _d.pixelHeight}`;
-}
-function webkitLineClampStyles(numberOfLines) {
+};
+const useImageLoadError = (source) => {
+    const [hasError, setHasError] = useState(false);
+    useEffect(() => setHasError(false), [source]);
     return {
-        WebkitLineClamp: numberOfLines,
-        WebkitBoxOrient: 'vertical',
-        display: '-webkit-box',
-        overflow: 'hidden',
-        overflowWrap: 'anywhere',
-        flex: 1,
+        hasError,
+        onError: useCallback(() => setHasError(true), []),
     };
-}
-function setTextStyle(styles, props, options) {
-    const { textStyle, width } = props;
-    // TODO: Change default as design
-    const { size, color, weight } = textStyle || {};
-    if (size)
-        styles['fontSize'] = size;
-    if (color)
-        styles['color'] = color;
-    if (weight)
-        styles['fontWeight'] = weight;
-    if ((width === null || width === void 0 ? void 0 : width.type) === 'flex' && (width === null || width === void 0 ? void 0 : width.value) == FlexSizeSpecValue.WrapContent) {
-        styles['width'] = 'fit-content';
-        styles['maxWidth'] = '100%';
-    }
-    if (props.type === ComponentType.Text) {
-        const { siblings, elemIdx } = options;
-        // To push out any subsequent components from the container,
-        // if a prior one is long enough to occupy an entire line
-        // @link https://sendbird.atlassian.net/browse/NOTI-709
-        if (siblings != null && siblings.length >= 2 && siblings.every(isWrappedText)) {
-            styles.flexShrink = siblings.length - 1 === elemIdx ? 1 : 0;
-        }
-    }
-}
+};
 
 // create a context provider for MessageComponent
 //  - this is a wrapper for MessageComponent
 const MessageContext = React__default.createContext(null);
-const MessageProvider = (props) => {
-    const { message, handleWebAction, handleCustomAction, handlePredefinedAction, children } = props;
+const MessageProvider = ({ message, handleWebAction, handleCustomAction, handlePredefinedAction, highlight, children, }) => {
     const value = React__default.useMemo(() => ({
         message,
         handleWebAction,
         handleCustomAction,
         handlePredefinedAction,
-    }), [message === null || message === void 0 ? void 0 : message.updatedAt]);
+        highlight,
+    }), [message === null || message === void 0 ? void 0 : message.updatedAt, highlight === null || highlight === void 0 ? void 0 : highlight.getContainerClassName, highlight === null || highlight === void 0 ? void 0 : highlight.getContainerInlineStyle, highlight === null || highlight === void 0 ? void 0 : highlight.renderText]);
     return React__default.createElement(MessageContext.Provider, { value: value }, children);
 };
 const useMessageContext = () => {
@@ -1812,6 +1937,18 @@ const useMessageContext = () => {
     return context;
 };
 
+/**
+ * This hook is used to highlight each item in the message template by extending its style.
+ * */
+function useHighlightStyle(raw) {
+    const { highlight } = useMessageContext();
+    return {
+        className: (highlight === null || highlight === void 0 ? void 0 : highlight.getContainerClassName) ? highlight.getContainerClassName(raw) : undefined,
+        style: (highlight === null || highlight === void 0 ? void 0 : highlight.getContainerInlineStyle) ? highlight.getContainerInlineStyle(raw) : undefined,
+        renderText: (highlight === null || highlight === void 0 ? void 0 : highlight.renderText) ? highlight.renderText : (it) => it,
+    };
+}
+
 /**
  * Preserves a reference to the given callback function as an argument while the component is mounted.
  * Wraps the given callback in React's Ref to preserve the reference.
@@ -2017,28 +2154,13 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const hasValidUrlProtocol = (url = '') => ['http://', 'https://', 'ftp://'].some((protocol) => url.startsWith(protocol));
-/**
- * @param url - url to be checked
- * @returns url with http:// protocol if it doesn't have any protocol
- * @example
- * returnUrl('www.sendbird.com') // returns 'http://www.sendbird.com'
- * returnUrl('https://www.sendbird.com') // returns 'https://www.sendbird.com'
- * returnUrl('ftp://www.sendbird.com') // returns 'ftp://www.sendbird.com'
- * returnUrl('sendbird.com') // returns 'https://sendbird.com'
- **/
-const returnUrl = (url = '') => {
-    if (hasValidUrlProtocol(url)) {
-        return url;
-    }
-    return `https://${url}`;
-};
 // todo: semantic html here is not perfect, need to revisit. Same for Button
-const ActionHandler = ({ children, props, className, style }) => {
+const ActionHandler = ({ children, props, className, style, inlineStyle }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { recalculatedStyle, elemRef } = useRecalculateWidth({ style, props });
     const { message, handleWebAction, handleCustomAction, handlePredefinedAction } = useMessageContext();
     const borderClass = ((_a = props.viewStyle) === null || _a === void 0 ? void 0 : _a.borderWidth) ? 'sb-message-template__border' : '';
+    const actionClass = props.action ? 'sb-message-template__action' : '';
     const paddingStyles = {
         paddingBlockStart: (_c = (_b = props.viewStyle) === null || _b === void 0 ? void 0 : _b.padding) === null || _c === void 0 ? void 0 : _c.top,
         paddingBlockEnd: (_e = (_d = props.viewStyle) === null || _d === void 0 ? void 0 : _d.padding) === null || _e === void 0 ? void 0 : _e.bottom,
@@ -2052,7 +2174,7 @@ const ActionHandler = ({ children, props, className, style }) => {
                 handleWebAction(e, props.action, message);
             }
             else {
-                (_c = window === null || window === void 0 ? void 0 : window.open(returnUrl((_b = props === null || props === void 0 ? void 0 : props.action) === null || _b === void 0 ? void 0 : _b.data), '_blank', 'noopener noreferrer')) === null || _c === void 0 ? void 0 : _c.focus();
+                (_c = window === null || window === void 0 ? void 0 : window.open(getValidURL((_b = props === null || props === void 0 ? void 0 : props.action) === null || _b === void 0 ? void 0 : _b.data), '_blank', 'noopener noreferrer')) === null || _c === void 0 ? void 0 : _c.focus();
             }
         }
         else if (((_d = props.action) === null || _d === void 0 ? void 0 : _d.type) === 'custom') {
@@ -2060,7 +2182,7 @@ const ActionHandler = ({ children, props, className, style }) => {
                 handleCustomAction(e, props.action, message);
             }
             else {
-                (_f = window === null || window === void 0 ? void 0 : window.open(returnUrl((_e = props === null || props === void 0 ? void 0 : props.action) === null || _e === void 0 ? void 0 : _e.data), '_blank', 'noopener noreferrer')) === null || _f === void 0 ? void 0 : _f.focus();
+                (_f = window === null || window === void 0 ? void 0 : window.open(getValidURL((_e = props === null || props === void 0 ? void 0 : props.action) === null || _e === void 0 ? void 0 : _e.data), '_blank', 'noopener noreferrer')) === null || _f === void 0 ? void 0 : _f.focus();
             }
         }
         else if (((_g = props.action) === null || _g === void 0 ? void 0 : _g.type) === 'uikit') {
@@ -2068,135 +2190,86 @@ const ActionHandler = ({ children, props, className, style }) => {
         }
     };
     if (props.type === ComponentType.TextButton) {
-        return (React__default.createElement("button", { className: clx(className, borderClass), "data-sb-template-id": props.elementId, style: Object.assign(Object.assign({}, style), paddingStyles), onClick: onClick }, children));
+        return (React__default.createElement("button", { className: clx(className, borderClass, actionClass), "data-sb-template-id": props.elementId, style: Object.assign(Object.assign(Object.assign({}, style), paddingStyles), inlineStyle), onClick: onClick }, children));
     }
     const { display, flexDirection, justifyContent, alignItems, objectFit } = recalculatedStyle, wrapperStyles = __rest(recalculatedStyle, ["display", "flexDirection", "justifyContent", "alignItems", "objectFit"]);
-    return (React__default.createElement("div", { ref: elemRef, className: clx(className, borderClass, props.action && 'sb-message-template__action'), "data-sb-template-id": props.elementId, style: wrapperStyles, onClick: onClick },
+    return (React__default.createElement("div", { ref: elemRef, className: clx(className, borderClass, actionClass), "data-sb-template-id": props.elementId, style: Object.assign(Object.assign({}, wrapperStyles), inlineStyle), onClick: onClick },
         React__default.createElement("div", { style: Object.assign({ display,
                 flexDirection,
                 justifyContent,
                 alignItems,
                 objectFit, width: '100%', height: '100%' }, paddingStyles) }, children)));
 };
-function clx(...names) {
-    return names.filter((it) => !!it).join(' ');
-}
 
-/**
- * Text that is fixed or fill parent should be wrapped in a div with max-width: 100% and max-height: 100%
- * This is to prevent text from overflowing the padding of the container
- */
-function isFixedOrFill(view) {
-    var _a, _b, _c, _d;
-    const heightType = (_a = view === null || view === void 0 ? void 0 : view.height) === null || _a === void 0 ? void 0 : _a.type;
-    const widthType = (_b = view === null || view === void 0 ? void 0 : view.width) === null || _b === void 0 ? void 0 : _b.type;
-    const isFixedDiamension = heightType === 'fixed' || widthType === 'fixed';
-    const isFill = (heightType === 'flex' && ((_c = view === null || view === void 0 ? void 0 : view.height) === null || _c === void 0 ? void 0 : _c.value) === FlexSizeSpecValue.FillParent) ||
-        (widthType === 'flex' && ((_d = view === null || view === void 0 ? void 0 : view.width) === null || _d === void 0 ? void 0 : _d.value) === FlexSizeSpecValue.FillParent);
-    return isFixedDiamension || isFill;
-}
-function convertNewlinesToBr(text) {
-    return text.split('\n').map((line, index) => (React__default.createElement(React__default.Fragment, { key: index },
-        line,
-        React__default.createElement("br", null))));
-}
-function renderText(view) {
-    const { text, maxTextLines } = view;
-    const isToBeWrapped = isFixedOrFill(view);
-    const hasMaxLines = typeof maxTextLines === 'number' && maxTextLines > 0;
-    const convertedText = convertNewlinesToBr(text);
-    if (hasMaxLines || isToBeWrapped) {
-        const wrapperStyling = Object.assign(Object.assign({}, ((hasMaxLines || isToBeWrapped) && { maxWidth: '100%' })), (isToBeWrapped && { maxHeight: '100%', overflow: 'hidden' }));
-        return (React__default.createElement("div", { style: wrapperStyling }, hasMaxLines ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText));
-    }
-    return hasMaxLines ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText;
-}
 const renderer = createRenderer({
     views: {
         box(props) {
-            return (React__default.createElement(ActionHandler, { className: "sb-message-template__box", elementId: props.elementId, style: props.parsedProperties, props: props }, props.children));
+            const highlight = useHighlightStyle(props.rawProperties);
+            return (React__default.createElement(ActionHandler, { className: clx('sb-message-template__box', highlight.className), inlineStyle: highlight.style, elementId: props.elementId, style: props.parsedProperties, props: props }, props.children));
         },
         text(props) {
-            return (React__default.createElement(ActionHandler, { className: "sb-message-template__text", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(props)));
+            const highlight = useHighlightStyle(props.rawProperties);
+            return (React__default.createElement(ActionHandler, { className: clx('sb-message-template__text', highlight.className), inlineStyle: highlight.style, elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(props, highlight.renderText)));
         },
         image(props) {
             var _a;
+            const highlight = useHighlightStyle(props.rawProperties);
             // todo: add image backup
-            return (React__default.createElement(ActionHandler, { className: "sb-message-template__image-container", elementId: props.elementId, style: props.parsedProperties, props: props },
-                React__default.createElement(ReactMessageTemplateImage, { className: "sb-message-template__image", alt: "image", src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
+            return (React__default.createElement(ActionHandler, { className: clx('sb-message-template__image-container', highlight.className), inlineStyle: highlight.style, elementId: props.elementId, style: props.parsedProperties, props: props },
+                React__default.createElement(RMTImage, { className: 'sb-message-template__image', alt: 'image', src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
         },
         textButton(props) {
-            return (React__default.createElement(ActionHandler, { className: "sb-message-template__text-button", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(Object.assign({ maxTextLines: defaultProperties.textButton.maxTextLines }, props))));
+            const highlight = useHighlightStyle(props.rawProperties);
+            return (React__default.createElement(ActionHandler, { className: clx('sb-message-template__text-button', highlight.className), inlineStyle: highlight.style, elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(Object.assign({ maxTextLines: defaultProperties.textButton.maxTextLines }, props), highlight.renderText)));
         },
         imageButton(props) {
             var _a;
-            return (React__default.createElement(ActionHandler, { className: "sb-message-template__image-container sb-message-template__image-button", elementId: props.elementId, style: props.parsedProperties, props: props },
-                React__default.createElement(ReactMessageTemplateImage, { className: "sb-message-template__image", alt: "image-button", src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
+            const highlight = useHighlightStyle(props.rawProperties);
+            return (React__default.createElement(ActionHandler, { className: clx('sb-message-template__image-container', 'sb-message-template__image-button', highlight.className), inlineStyle: highlight.style, elementId: props.elementId, style: props.parsedProperties, props: props },
+                React__default.createElement(RMTImage, { className: 'sb-message-template__image', alt: 'image-button', src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
         },
         carouselView(props) {
             var _a, _b;
-            return (React__default.createElement(Carousel, { maxChildWidth: (_a = props.carouselStyle) === null || _a === void 0 ? void 0 : _a.maxChildWidth, spacing: (_b = props.carouselStyle) === null || _b === void 0 ? void 0 : _b.spacing, style: props.parsedProperties }, props.children));
+            const highlight = useHighlightStyle(props.rawProperties);
+            return (React__default.createElement(RMTCarousel, { className: clx('sb-message-template__carousel', highlight.className), inlineStyle: highlight.style, maxChildWidth: (_a = props.carouselStyle) === null || _a === void 0 ? void 0 : _a.maxChildWidth, spacing: (_b = props.carouselStyle) === null || _b === void 0 ? void 0 : _b.spacing, style: props.parsedProperties }, props.children));
         },
     },
 });
-const parser = createParser({
-    mapBoxProps(props, options) {
-        const styles = getDefaultStyles();
-        setViewProps(styles, props, options);
-        setAlign(styles, props.layout, props.align);
-        return styles;
-    },
-    mapTextProps(props, options) {
-        var _a;
-        const styles = getDefaultStyles({ whiteSpace: 'pre-line', wordBreak: 'break-word' });
-        // Better not set flex 1 to text
-        setViewProps(styles, props, options);
-        setTextStyle(styles, props, options);
-        setAlign(styles, Layout.Row, props.align);
-        setTextAlign(styles, (_a = props.align) === null || _a === void 0 ? void 0 : _a.horizontal);
-        return styles;
-    },
-    mapImageProps(props, options) {
-        const styles = getDefaultStyles();
-        setViewProps(styles, props, options);
-        setImageStyle(styles, props.imageStyle);
-        setImageAspectRatio(styles, props);
-        return styles;
-    },
-    mapTextButtonProps(props, options) {
-        const styles = getDefaultStyles({ whiteSpace: 'pre-line', alignItems: 'center', justifyContent: 'center' });
-        setViewProps(styles, props, options);
-        setTextStyle(styles, props, options);
-        return styles;
-    },
-    mapImageButtonProps(props, options) {
-        const styles = getDefaultStyles();
-        setViewProps(styles, props, options);
-        setImageStyle(styles, props.imageStyle);
-        setImageAspectRatio(styles, props);
-        return styles;
-    },
-    mapCarouselProps(props, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const styles = getDefaultStyles();
-        setViewProps(styles, props, options);
-        styles['paddingBlockStart'] = (_b = (_a = props.viewStyle) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.top;
-        styles['paddingBlockEnd'] = (_d = (_c = props.viewStyle) === null || _c === void 0 ? void 0 : _c.padding) === null || _d === void 0 ? void 0 : _d.bottom;
-        styles['paddingInlineStart'] = (_f = (_e = props.viewStyle) === null || _e === void 0 ? void 0 : _e.padding) === null || _f === void 0 ? void 0 : _f.left;
-        styles['paddingInlineEnd'] = (_h = (_g = props.viewStyle) === null || _g === void 0 ? void 0 : _g.padding) === null || _h === void 0 ? void 0 : _h.right;
-        return styles;
-    },
-});
+function convertNewlinesToBr(text, highlightText) {
+    return text.split('\n').map((line, index) => (React__default.createElement(React__default.Fragment, { key: index },
+        highlightText(line),
+        React__default.createElement("br", null))));
+}
+function renderText(view, highlightText) {
+    const { text, maxTextLines } = view;
+    const isToBeWrapped = isFixedOrFill(view);
+    const hasMaxLines = typeof maxTextLines === 'number' && maxTextLines > 0;
+    const convertedText = convertNewlinesToBr(text, highlightText);
+    if (hasMaxLines || isToBeWrapped) {
+        const wrapperStyling = Object.assign(Object.assign({}, ((hasMaxLines || isToBeWrapped) && { maxWidth: '100%' })), (isToBeWrapped && { maxHeight: '100%', overflow: 'hidden' }));
+        return (React__default.createElement("div", { style: wrapperStyling }, hasMaxLines ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText));
+    }
+    return hasMaxLines ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText;
+}
+/**
+ * Text that is fixed or fill parent should be wrapped in a div with max-width: 100% and max-height: 100%
+ * This is to prevent text from overflowing the padding of the container
+ */
+function isFixedOrFill(view) {
+    var _a, _b, _c, _d;
+    const heightType = (_a = view === null || view === void 0 ? void 0 : view.height) === null || _a === void 0 ? void 0 : _a.type;
+    const widthType = (_b = view === null || view === void 0 ? void 0 : view.width) === null || _b === void 0 ? void 0 : _b.type;
+    const isFixedDimension = heightType === 'fixed' || widthType === 'fixed';
+    const isFill = (heightType === 'flex' && ((_c = view === null || view === void 0 ? void 0 : view.height) === null || _c === void 0 ? void 0 : _c.value) === FlexSizeSpecValue.FillParent) ||
+        (widthType === 'flex' && ((_d = view === null || view === void 0 ? void 0 : view.width) === null || _d === void 0 ? void 0 : _d.value) === FlexSizeSpecValue.FillParent);
+    return isFixedDimension || isFill;
+}
+
 createMessageTemplate({
     renderer,
     parser,
     Container: ({ children, className }) => {
-        return (React__default.createElement("div", { className: `sb-message-template__parent ${className}`, style: {
-                display: 'flex',
-                flexDirection: 'column',
-                maxWidth: 400,
-                marginBlockEnd: 24,
-            } }, children));
+        return (React__default.createElement("div", { className: `sb-message-template__parent ${className}`, style: { display: 'flex', flexDirection: 'column', maxWidth: 400, marginBlockEnd: 24 } }, children));
     },
 });
 
@@ -2217,4 +2290,4 @@ function MessageTemplate(_a) {
 }
 
 export { MessageProvider as M, MessageTemplate as a };
-//# sourceMappingURL=bundle-CSJ53xaT.js.map
+//# sourceMappingURL=bundle-CdILp5Ht.js.map