@sendbird/uikit-react 3.15.4 → 3.15.5

package/chunks/{bundle-zxooGkqM.js → bundle-KNrNIKZQ.js}

@@ -1,4 +1,4 @@
-import React__default, { createContext, useState, useCallback, useContext, useRef, useMemo, useEffect } from 'react';
+import React__default, { createContext, useState, useCallback, useContext, useRef, useMemo, useLayoutEffect, useEffect } from 'react';
 
 var ComponentType;
 (function (ComponentType) {
@@ -7,15 +7,156 @@ var ComponentType;
     ComponentType["Image"] = "image";
     ComponentType["TextButton"] = "textButton";
     ComponentType["ImageButton"] = "imageButton";
+    ComponentType["Carousel"] = "carouselView";
 })(ComponentType || (ComponentType = {}));
-var CompositeComponentType;
-(function (CompositeComponentType) {
-    CompositeComponentType["Carousel"] = "carouselView";
-})(CompositeComponentType || (CompositeComponentType = {}));
+
+const outSingle$1 = (key, obj) => {
+    if (typeof obj[key] !== 'string')
+        return {};
+    return { [key]: argbToRgba(obj[key]) };
+};
+function argbToRgba(string) {
+    if (!string.startsWith('#')) {
+        return string;
+    }
+    if (string.length === 9) {
+        return `#${string.slice(3)}${string[1]}${string[2]}`;
+    }
+    if (string.length === 5) {
+        return `#${string.slice(2)}${string[1]}`;
+    }
+    return string;
+}
+const outViewStyle$1 = (viewStyle) => {
+    if (!viewStyle)
+        return {};
+    return {
+        viewStyle: Object.assign(Object.assign(Object.assign({}, viewStyle), outSingle$1('backgroundColor', viewStyle)), outSingle$1('borderColor', viewStyle)),
+    };
+};
+const outTextStyle$1 = (textStyle) => {
+    if (!textStyle)
+        return {};
+    return {
+        textStyle: Object.assign(Object.assign({}, textStyle), outSingle$1('color', textStyle)),
+    };
+};
+const outImageStyle = (imageStyle) => {
+    if (!imageStyle)
+        return {};
+    return {
+        imageStyle: Object.assign(Object.assign({}, imageStyle), outSingle$1('tintColor', imageStyle)),
+    };
+};
+const colorTransform = {
+    run(prop) {
+        if (prop.type === ComponentType.Text || prop.type === ComponentType.TextButton) {
+            return Object.assign(Object.assign(Object.assign({}, prop), outViewStyle$1(prop.viewStyle)), outTextStyle$1(prop.textStyle));
+        }
+        if (prop.type === ComponentType.ImageButton || prop.type === ComponentType.Image) {
+            return Object.assign(Object.assign(Object.assign({}, prop), outViewStyle$1(prop.viewStyle)), outImageStyle(prop.imageStyle));
+        }
+        return Object.assign(Object.assign({}, prop), outViewStyle$1(prop.viewStyle));
+    },
+};
+
+const isNumber = (val) => {
+    if (typeof val === 'string') {
+        return !Number.isNaN(Number(val));
+    }
+    return typeof val === 'number' && !Number.isNaN(val);
+};
+const outSingle = (key, obj) => {
+    if (obj[key] === undefined || obj[key] === null)
+        return {};
+    return isNumber(obj[key]) ? { [key]: Number(obj[key]) } : {};
+};
+const outSpacing = (key, spacing) => {
+    if (!spacing)
+        return {};
+    return {
+        [key]: {
+            left: isNumber(spacing.left) ? Number(spacing.left) : spacing.left,
+            right: isNumber(spacing.right) ? Number(spacing.right) : spacing.right,
+            top: isNumber(spacing.top) ? Number(spacing.top) : spacing.top,
+            bottom: isNumber(spacing.bottom) ? Number(spacing.bottom) : spacing.bottom,
+        },
+    };
+};
+const outSize = (key, size) => {
+    if (!size)
+        return {};
+    return {
+        [key]: {
+            type: size.type,
+            value: isNumber(size.value) ? Number(size.value) : size.value,
+        },
+    };
+};
+const outMetadata = (metaData) => {
+    if (!metaData)
+        return {};
+    return {
+        metaData: {
+            pixelWidth: isNumber(metaData.pixelWidth) ? Number(metaData.pixelWidth) : metaData.pixelWidth,
+            pixelHeight: isNumber(metaData.pixelHeight) ? Number(metaData.pixelHeight) : metaData.pixelHeight,
+        },
+    };
+};
+const outViewStyle = (viewStyle) => {
+    if (!viewStyle)
+        return {};
+    return {
+        viewStyle: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, viewStyle), outSingle('borderWidth', viewStyle)), outSingle('radius', viewStyle)), outSpacing('margin', viewStyle.margin)), outSpacing('padding', viewStyle.padding)),
+    };
+};
+const outTextStyle = (textStyle) => {
+    if (!textStyle)
+        return {};
+    return {
+        textStyle: Object.assign(Object.assign(Object.assign({}, textStyle), outSingle('size', textStyle)), outSingle('weight', textStyle)),
+    };
+};
+const outCarouselStyle = (carouselstyle) => {
+    if (!carouselstyle)
+        return {};
+    return {
+        carouselStyle: Object.assign(Object.assign({}, carouselstyle), outSingle('spacing', carouselstyle)),
+    };
+};
+const outViewProps = (view) => {
+    return Object.assign(Object.assign(Object.assign({}, outSize('width', view.width)), outSize('height', view.height)), outViewStyle(view.viewStyle));
+};
+const outTextProps = (text) => {
+    return Object.assign(Object.assign(Object.assign({}, outViewProps(text)), outTextStyle(text.textStyle)), outSingle('maxTextLines', text));
+};
+const outImageProps = (image) => {
+    return Object.assign(Object.assign({}, outViewProps(image)), outMetadata(image.metaData));
+};
+const outCarouselProps = (carousel) => {
+    return Object.assign(Object.assign(Object.assign({}, outViewProps(carousel)), outCarouselStyle(carousel.carouselStyle)), { 
+        // Convert only top-level items to find has fill width values.
+        items: carousel.items.map((item) => (Object.assign(Object.assign({}, item), { body: Object.assign(Object.assign({}, item.body), { items: item.body.items.map((it) => numberTransform.run(it)) }) }))) });
+};
+const numberTransform = {
+    run(prop) {
+        if (prop.type === ComponentType.Text || prop.type === ComponentType.TextButton) {
+            return Object.assign(Object.assign({}, prop), outTextProps(prop));
+        }
+        if (prop.type === ComponentType.ImageButton || prop.type === ComponentType.Image) {
+            return Object.assign(Object.assign({}, prop), outImageProps(prop));
+        }
+        if (prop.type === ComponentType.Carousel) {
+            return Object.assign(Object.assign({}, prop), outCarouselProps(prop));
+        }
+        return Object.assign(Object.assign({}, prop), outViewProps(prop));
+    },
+};
 
 // -------- Set property mapper
 const MAPPER = () => undefined;
 const createParser = (params) => {
+    var _a;
     const defaultMapper = (params === null || params === void 0 ? void 0 : params.defaultMapper) || MAPPER;
     const mapper = {
         defaultMapper,
@@ -26,31 +167,51 @@ const createParser = (params) => {
         mapImageButtonProps: (params === null || params === void 0 ? void 0 : params.mapImageButtonProps) || defaultMapper,
         mapCarouselProps: (params === null || params === void 0 ? void 0 : params.mapCarouselProps) || defaultMapper,
     };
-    const transforms = (params === null || params === void 0 ? void 0 : params.transforms) || [];
+    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) {
-            const item = transforms.reduce((it, transform) => transform(it), rawItem);
+            // 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: {
-                    return { properties: mapper.mapBoxProps(item, options) };
+                    return { transformed: item, properties: mapper.mapBoxProps(item, options) };
                 }
                 case ComponentType.Text: {
-                    return { properties: mapper.mapTextProps(item, options) };
+                    return { transformed: item, properties: mapper.mapTextProps(item, options) };
                 }
                 case ComponentType.Image: {
-                    return { properties: mapper.mapImageProps(item, options) };
+                    return { transformed: item, properties: mapper.mapImageProps(item, options) };
                 }
                 case ComponentType.TextButton: {
-                    return { properties: mapper.mapTextButtonProps(item, options) };
+                    return { transformed: item, properties: mapper.mapTextButtonProps(item, options) };
                 }
                 case ComponentType.ImageButton: {
-                    return { properties: mapper.mapImageButtonProps(item, options) };
+                    return { transformed: item, properties: mapper.mapImageButtonProps(item, options) };
                 }
-                case CompositeComponentType.Carousel: {
-                    return { properties: mapper.mapCarouselProps(item, options) };
+                case ComponentType.Carousel: {
+                    return { transformed: item, properties: mapper.mapCarouselProps(item, options) };
                 }
                 default:
-                    return { properties: undefined };
+                    return { transformed: item, properties: undefined };
             }
         },
     };
@@ -69,7 +230,7 @@ function createRenderer(params) {
     };
 }
 
-var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$5 = (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];
@@ -87,7 +248,7 @@ const SizeContext = createContext({
 const SizeContextProvider = ({ children }) => {
     const [sizes, setSizes] = useState({});
     const updateSize = useCallback((_a) => {
-        var { id } = _a, rest = __rest$4(_a, ["id"]);
+        var { id } = _a, rest = __rest$5(_a, ["id"]);
         if (id) {
             setSizes((prevSizes) => (Object.assign(Object.assign({}, prevSizes), { [id]: rest })));
         }
@@ -151,7 +312,7 @@ const alignInFlex = (align) => {
 const isTemplateVersionSupported = (templateVersion) => {
     if (!templateVersion)
         return true;
-    return SUPPORTED_TEMPLATE_VERSIONS.includes(templateVersion);
+    return SUPPORTED_TEMPLATE_VERSIONS.includes(Number(templateVersion));
 };
 
 const memoize = (fn) => {
@@ -195,6 +356,15 @@ const defaultProperties = {
         layout: Layout.Row,
         align: { vertical: AlignValue.Top, horizontal: AlignValue.Left },
     },
+    textButton: {
+        maxTextLines: 1,
+    },
+    carousel: {
+        style: {
+            spacing: 10,
+            maxChildWidth: 240,
+        },
+    },
 };
 
 const createMessageTemplate = (opts) => {
@@ -202,42 +372,41 @@ const createMessageTemplate = (opts) => {
     const UnknownMessage = opts.UnknownMessage || (() => null);
     const parser = opts.parser || createParser();
     const renderer = opts.renderer || createRenderer();
-    const MessageTemplateBase = ({ templateItems, parentLayout = defaultProperties.box.layout, isRoot = false, }) => {
-        const renderItems = templateItems;
-        return (React__default.createElement(React__default.Fragment, null, renderItems.map((item, index, siblings) => {
-            const { properties } = parser.parse(item, { parentLayout, elemIdx: index, siblings });
-            const props = {
+    const MessageTemplateBase = ({ templateItems, templateVersion, parentLayout = defaultProperties.box.layout, depth = 0, }) => {
+        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 });
+            const item = result.transformed;
+            const rendererProps = {
                 key: index,
-                parentLayout,
-                parsedProperties: properties,
                 siblings,
+                parentLayout,
+                parsedProperties: result.properties,
             };
             switch (item.type) {
-                // CompositeComponent should be top level component
-                case CompositeComponentType.Carousel: {
-                    if (!isRoot) {
-                        throw new Error('Cannot parse template item as Carousel if the template item is not the root.');
-                    }
-                    if (!item.items || !Array.isArray(item.items) || item.items.length === 0) {
+                case ComponentType.Carousel: {
+                    if (!Array.isArray(item.items) || item.items.length === 0) {
                         throw new Error('Cannot parse template item as Carousel if carousel has no items.');
                     }
-                    return (React__default.createElement(renderer.carouselView, Object.assign({}, item, props), item.items.map((items, index) => (React__default.createElement(MessageTemplateBase, { key: index, templateItems: items || [], parentLayout: parentLayout })))));
+                    return (React__default.createElement(renderer.carouselView, Object.assign({}, item, rendererProps), item.items.map((template, index) => (React__default.createElement(MessageTemplateBase, { key: index, templateItems: template.body.items || [], depth: depth + 1, templateVersion: template.version })))));
                 }
                 case ComponentType.Box: {
-                    return (React__default.createElement(renderer.box, Object.assign({}, item, props),
-                        React__default.createElement(MessageTemplateBase, { templateItems: item.items || [], parentLayout: item.layout })));
+                    return (React__default.createElement(renderer.box, Object.assign({}, item, rendererProps),
+                        React__default.createElement(MessageTemplateBase, { templateItems: item.items || [], parentLayout: item.layout, depth: depth + 1, templateVersion: templateVersion })));
                 }
                 case ComponentType.Text: {
-                    return React__default.createElement(renderer.text, Object.assign({}, item, props));
+                    return React__default.createElement(renderer.text, Object.assign({}, item, rendererProps));
                 }
                 case ComponentType.Image: {
-                    return React__default.createElement(renderer.image, Object.assign({}, item, props));
+                    return React__default.createElement(renderer.image, Object.assign({}, item, rendererProps));
                 }
                 case ComponentType.TextButton: {
-                    return React__default.createElement(renderer.textButton, Object.assign({}, item, props));
+                    return React__default.createElement(renderer.textButton, Object.assign({}, item, rendererProps));
                 }
                 case ComponentType.ImageButton: {
-                    return React__default.createElement(renderer.imageButton, Object.assign({}, item, props));
+                    return React__default.createElement(renderer.imageButton, Object.assign({}, item, rendererProps));
                 }
                 default: {
                     // or throw new Error('Cannot parse template item')
@@ -247,21 +416,11 @@ const createMessageTemplate = (opts) => {
         })));
     };
     return {
-        MessageTemplate: ({ parentLayout = defaultProperties.rootLayout, templateVersion, templateItems, }) => {
+        MessageTemplate: ({ templateVersion, templateItems, parentLayout = defaultProperties.rootLayout, }) => {
             const items = setTemplateItemId(templateItems);
-            if (!isTemplateVersionSupported(templateVersion)) {
-                /**
-                 * I choose to throw instead of returning UnknownMessage because UnknownMessage syntax (required prop: item) is not what UIKit wants.
-                 */
-                throw new Error(`Cannot parse template item due to unsupported template version: ${templateVersion}, ${SUPPORTED_TEMPLATE_VERSIONS}`);
-            }
-            let isCarousel = false;
-            if (Array.isArray(items) && items.length > 0) {
-                isCarousel = items[0].type === CompositeComponentType.Carousel;
-            }
             return (React__default.createElement(SizeContextProvider, null,
-                React__default.createElement(Container, { className: isCarousel ? 'sb-message-template__parent_for_carousel' : '' },
-                    React__default.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items, isRoot: true }))));
+                React__default.createElement(Container, null,
+                    React__default.createElement(MessageTemplateBase, { isRoot: true, parentLayout: parentLayout, templateItems: items, templateVersion: templateVersion }))));
         },
         MessageTemplateBase,
     };
@@ -1125,67 +1284,102 @@ var ActionType;
     },
 });
 
-const PADDING_WIDTH = 24;
-const CONTENT_LEFT_WIDTH = 40;
-const SWIPE_THRESHOLD = 15;
-const GAP_DEFAULT = 8;
-/**
- * fixed sized template items should use its child width.
- * Whereas flex sized template items should use its parent's width.
- * @param item
- */
-function shouldRenderAsFixed(item) {
-    var _a;
-    return ((_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed';
-}
-function CarouselItem({ item, defaultWidth, marginRight }) {
-    const style = shouldRenderAsFixed(item)
-        ? { width: 'fit-content' }
-        : { minWidth: defaultWidth, width: '100%' };
-    if (marginRight) {
-        style['marginRight'] = marginRight;
-    }
-    return React__default.createElement("div", { style: style }, item);
-}
-const Carousel = React__default.memo(({ children, gap = GAP_DEFAULT }) => {
-    var _a, _b;
+const SWIPE_THRESHOLD = 24;
+function useCarousel({ spacing, childrenLength, paddingInlineStart, paddingInlineEnd }) {
+    // TODO: RTL support
+    const paddingStart = paddingInlineStart;
+    const paddingEnd = paddingInlineEnd;
     const carouselRef = useRef(null);
-    const screenWidth = window.innerWidth;
-    const defaultItemWidth = (_b = (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
-    const itemWidths = children.map((item) => {
-        var _a;
-        if (shouldRenderAsFixed(item)) {
-            return Number((_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.value);
-        }
-        return defaultItemWidth;
-    });
-    const itemPositions = getEachItemPositions();
-    const [draggingInfo, setDraggingInfo] = useState({
-        scrolling: false,
-        dragging: false,
-        startPos: null,
+    const childrenRefs = useRef(Array.from({ length: childrenLength }, () => React__default.createRef()));
+    const isDragging = useRef(false);
+    const isScrolling = useRef(false);
+    const animationFrame = useRef(null);
+    const drag = useRef({
+        sx: null,
+        sy: null,
         offset: 0,
         translateX: 0,
         currentIndex: 0,
     });
-    const handleMouseDown = (event) => {
-        setDraggingInfo((props) => (Object.assign(Object.assign({}, props), { scrolling: false, dragging: true, startPos: {
-                x: event.clientX,
-                y: event.clientY,
-            }, offset: 0 })));
-    };
-    const handleMouseMove = (event) => {
-        if (!draggingInfo.dragging || !draggingInfo.startPos)
+    const [childWidths, setChildWidths] = useState(() => childrenRefs.current.map(() => 0));
+    const itemPositions = useMemo(() => {
+        let currentPosition = paddingStart;
+        return childWidths.map((width, i) => {
+            const start = currentPosition - (i > 0 ? spacing : 0);
+            const end = start - width;
+            currentPosition = end;
+            return { start, end };
+        });
+    }, [childWidths, spacing, paddingStart]);
+    const totalContentWidth = useMemo(() => {
+        const totalItemWidth = childWidths.reduce((acc, width) => acc + width, 0);
+        const totalSpacing = spacing * (childrenLength - 1);
+        return totalItemWidth + totalSpacing;
+    }, [childWidths, spacing, childrenLength]);
+    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]);
+    useLayoutEffect(() => {
+        if (itemPositions.length > 0) {
+            drag.current.translateX = itemPositions[0].start;
+            animate();
+        }
+    }, [itemPositions]);
+    const dragStart = () => {
+        if (!carouselRef.current)
             return;
-        const currentX = event.clientX;
-        const newOffset = currentX - draggingInfo.startPos.x;
-        setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { offset: newOffset }));
+        isDragging.current = true;
+        carouselRef.current.style.cursor = 'grabbing';
+        carouselRef.current.style.transition = 'none';
+        animationFrame.current = requestAnimationFrame(animate);
     };
-    const handleMouseUp = () => {
-        if (!draggingInfo.dragging)
+    const dragStop = () => {
+        if (!carouselRef.current)
             return;
-        handleDragEnd();
-        unblockScroll();
+        isDragging.current = false;
+        carouselRef.current.style.cursor = 'grab';
+        carouselRef.current.style.transition = 'transform 0.5s ease';
+        if (animationFrame.current) {
+            cancelAnimationFrame(animationFrame.current);
+            animationFrame.current = null;
+        }
+    };
+    const dragRelease = () => {
+        const { offset, currentIndex } = drag.current;
+        const thresholdExceeded = Math.abs(offset) >= SWIPE_THRESHOLD;
+        const swipeToNext = offset < 0 && currentIndex < childrenLength - 1;
+        const swipeToPrev = offset > 0 && currentIndex > 0;
+        let newIndex = currentIndex;
+        if (thresholdExceeded && swipeToNext) {
+            newIndex = currentIndex + 1;
+        }
+        else if (thresholdExceeded && swipeToPrev) {
+            newIndex = currentIndex - 1;
+        }
+        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));
+        }
+        drag.current.currentIndex = newIndex;
+        drag.current.translateX = clampTranslateX(itemPositions[newIndex].start);
+        drag.current.offset = 0;
+    };
+    const scrollStart = () => {
+        isScrolling.current = true;
+    };
+    const scrollStop = () => {
+        isScrolling.current = false;
+    };
+    const animate = () => {
+        if (carouselRef.current) {
+            carouselRef.current.style.transform = `translateX(${drag.current.translateX + drag.current.offset}px)`;
+        }
+        if (animationFrame.current) {
+            animationFrame.current = requestAnimationFrame(animate);
+        }
     };
     const blockScroll = () => {
         if (carouselRef.current) {
@@ -1197,115 +1391,116 @@ const Carousel = React__default.memo(({ children, gap = GAP_DEFAULT }) => {
             carouselRef.current.style.touchAction = 'pan-y';
         }
     };
-    const handleTouchStart = (event) => {
-        setDraggingInfo((props) => (Object.assign(Object.assign({}, props), { scrolling: false, dragging: false, startPos: {
-                x: event.touches[0].clientX,
-                y: event.touches[0].clientY,
-            }, offset: 0 })));
+    const onMouseDown = (event) => {
+        dragStart();
+        scrollStop();
+        drag.current.sx = event.clientX;
+        drag.current.sy = event.clientY;
+        drag.current.offset = 0;
+        animationFrame.current = requestAnimationFrame(animate);
     };
-    const handleTouchMove = (event) => {
-        if (!draggingInfo.startPos || draggingInfo.scrolling)
+    const onMouseMove = (event) => {
+        if (!isDragging.current || drag.current.sx === null)
             return;
-        const startPos = draggingInfo.startPos;
-        const [touchMoveX, touchMoveY] = [event.touches[0].clientX, event.touches[0].clientY];
-        const [deltaX, deltaY] = [Math.abs(touchMoveX - startPos.x), Math.abs(touchMoveY - startPos.y)];
-        const newOffset = touchMoveX - startPos.x;
-        if (draggingInfo.dragging) {
-            if (newOffset === draggingInfo.offset)
-                return;
-            setDraggingInfo((props) => (Object.assign(Object.assign({}, props), { offset: newOffset })));
+        drag.current.offset = event.clientX - drag.current.sx;
+    };
+    const onMouseUp = () => {
+        if (!isDragging.current)
             return;
-        }
-        if (deltaY > deltaX) {
-            setDraggingInfo((props) => (Object.assign(Object.assign({}, props), { scrolling: true })));
-        }
-        else {
-            blockScroll();
-            setDraggingInfo((props) => (Object.assign(Object.assign({}, props), { dragging: true, offset: newOffset })));
-        }
+        scrollStop();
+        dragRelease();
+        dragStop();
     };
-    const handleTouchEnd = () => {
-        if (!draggingInfo.dragging)
+    const onMouseLeave = () => {
+        if (!isDragging.current)
             return;
-        handleDragEnd();
-        unblockScroll();
+        scrollStop();
+        dragRelease();
+        dragStop();
     };
-    const getNewDraggingInfo = ({ translateX, currentIndex, newTranslateX, nextIndex, }) => {
-        return {
-            scrolling: false,
-            dragging: false,
-            startPos: null,
-            offset: 0,
-            translateX: newTranslateX !== null && newTranslateX !== void 0 ? newTranslateX : translateX,
-            currentIndex: nextIndex !== null && nextIndex !== void 0 ? nextIndex : currentIndex,
-        };
+    const onTouchStart = (event) => {
+        scrollStop();
+        dragStop();
+        const touch = event.touches[0];
+        drag.current.sx = touch.clientX;
+        drag.current.sy = touch.clientY;
+        drag.current.offset = 0;
+        animationFrame.current = requestAnimationFrame(animate);
     };
-    const handleDragEnd = () => {
-        const { offset, currentIndex } = draggingInfo;
-        const absOffset = Math.abs(offset);
-        if (absOffset < SWIPE_THRESHOLD) {
-            setDraggingInfo((props) => getNewDraggingInfo(props));
+    const onTouchMove = (event) => {
+        if (drag.current.sx === null || drag.current.sy === null || isScrolling.current)
+            return;
+        const { clientX, clientY } = event.touches[0];
+        const { sx, sy } = drag.current;
+        if (isDragging.current) {
+            drag.current.offset = clientX - sx;
             return;
         }
-        // If dragged to left, next index should be to the right
-        if (offset < 0 && currentIndex < children.length - 1) {
-            if (isLastItemFitsScreen(currentIndex)) {
-                setDraggingInfo((props) => getNewDraggingInfo(props));
-                return;
-            }
-            const nextIndex = currentIndex + 1;
-            /**
-             * This is special logic for "더 보기" button for Socar use-case.
-             * The button will have a small width (less than 50px).
-             * We want to include this button in the view and snap to right padding wall IFF !isLastTwoItemsFitScreen.
-             */
-            if (nextIndex === children.length - 1 || isLastItemFitsScreen(nextIndex)) {
-                setDraggingInfo((props) => getNewDraggingInfo(Object.assign(Object.assign({}, props), { newTranslateX: itemPositions[children.length - 1].end - PADDING_WIDTH - CONTENT_LEFT_WIDTH + screenWidth, nextIndex: children.length - 1 })));
-            }
-            else {
-                setDraggingInfo((props) => getNewDraggingInfo(Object.assign(Object.assign({}, props), { newTranslateX: itemPositions[nextIndex].start, nextIndex })));
-            }
-            // If dragged to right, next index should be to the left
-        }
-        else if (offset > 0 && currentIndex > 0) {
-            let nextIndex = currentIndex - 1;
-            while (draggingInfo.translateX >= itemPositions[nextIndex].start) {
-                nextIndex--;
-            }
-            setDraggingInfo((props) => getNewDraggingInfo(Object.assign(Object.assign({}, props), { newTranslateX: itemPositions[nextIndex].start, nextIndex })));
+        const isVerticalScroll = Math.abs(clientY - sy) > Math.abs(clientX - sx);
+        if (isVerticalScroll) {
+            scrollStart();
         }
         else {
-            setDraggingInfo((props) => getNewDraggingInfo(props));
+            drag.current.offset = clientX - sx;
+            blockScroll();
+            dragStart();
         }
     };
-    function getCurrentTranslateX() {
-        return draggingInfo.translateX + draggingInfo.offset;
-    }
-    function isLastItemFitsScreen(nextIndex) {
-        const restItemsWidth = itemWidths.slice(nextIndex).reduce((prev, curr) => prev + gap + curr);
-        const restTotalWidth = PADDING_WIDTH + CONTENT_LEFT_WIDTH + restItemsWidth;
-        return restTotalWidth <= screenWidth;
-    }
-    function getEachItemPositions() {
-        let accumulator = 0;
-        return itemWidths.map((itemWidth, i) => {
-            if (i > 0) {
-                accumulator -= gap;
-            }
-            const itemPosition = {
-                start: accumulator,
-                end: accumulator - itemWidth,
-            };
-            accumulator -= itemWidth;
-            return itemPosition;
-        });
-    }
-    return (React__default.createElement("div", { ref: carouselRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: "sb-message-template__carousel", style: {
-            cursor: draggingInfo.dragging ? 'grabbing' : 'grab',
-            transition: draggingInfo.dragging ? 'none' : 'transform 0.5s ease',
-            transform: `translateX(${getCurrentTranslateX()}px)`,
-        } }, children.map((item, index) => (React__default.createElement(CarouselItem, { key: index + '', item: item, defaultWidth: defaultItemWidth + 'px', marginRight: index < children.length - 1 ? gap : undefined })))));
+    const onTouchEnd = () => {
+        unblockScroll();
+        scrollStop();
+        dragRelease();
+        dragStop();
+    };
+    return {
+        carouselRef,
+        childrenRefs,
+        handlers: {
+            onMouseDown,
+            onMouseMove,
+            onMouseUp,
+            onMouseLeave,
+            onTouchStart,
+            onTouchMove,
+            onTouchEnd,
+        },
+    };
+}
+
+var __rest$4 = (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 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 { 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)))));
+};
+const CarouselChild = 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;
+        return hasFillWidth || overMaxChildWidth;
+    });
+}
 
 function isWrappedText(view) {
     var _a;
@@ -1328,12 +1523,6 @@ const isGif = (url) => {
     const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     return extension === 'gif';
 };
-const isNumber = (val) => {
-    if (typeof val === 'string') {
-        return !Number.isNaN(Number(val));
-    }
-    return typeof val === 'number' && !Number.isNaN(val);
-};
 
 var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1457,6 +1646,151 @@ const useImageLoadError = (source) => {
     };
 };
 
+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;
+        }
+    }
+    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;
+        }
+    }
+}
+// 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;
+        }
+    }
+}
+
 // create a context provider for MessageComponent
 //  - this is a wrapper for MessageComponent
 const MessageContext = React__default.createContext(null);
@@ -1470,7 +1804,13 @@ const MessageProvider = (props) => {
     }), [message === null || message === void 0 ? void 0 : message.updatedAt]);
     return React__default.createElement(MessageContext.Provider, { value: value }, children);
 };
-const useMessageContext = () => React__default.useContext(MessageContext);
+const useMessageContext = () => {
+    const context = React__default.useContext(MessageContext);
+    if (!context) {
+        throw new Error('useMessageContext must be used within a MessageProvider');
+    }
+    return context;
+};
 
 /**
  * Preserves a reference to the given callback function as an argument while the component is mounted.
@@ -1666,167 +2006,6 @@ function useRecalculateWidth(params) {
     return { recalculatedStyle: currentStyle, elemRef };
 }
 
-function getDefaultStyles(overrides) {
-    return Object.assign({ display: 'flex', overflow: 'hidden', boxSizing: 'border-box' }, overrides);
-}
-function setViewProps(styles, props, options) {
-    var _a;
-    setViewSize(styles, props, options);
-    setViewStyle(styles, props);
-    // [Padding] Just parse the values as numbers; the actual value has been set in the ActionHandler.
-    if ((_a = props.viewStyle) === null || _a === void 0 ? void 0 : _a.padding) {
-        const padding = props.viewStyle.padding;
-        if (isNumber(padding.top))
-            padding.top = Number(padding.top);
-        if (isNumber(padding.bottom))
-            padding.bottom = Number(padding.bottom);
-        if (isNumber(padding.left))
-            padding.left = Number(padding.left);
-        if (isNumber(padding.right))
-            padding.right = Number(padding.right);
-    }
-}
-function setBorderStyle(styles, borderWidth, borderColor, radius) {
-    if (borderWidth) {
-        styles['--border-width'] = `${borderWidth}px`;
-        styles['--border-color'] = borderColor || 'transparent';
-    }
-    if (radius) {
-        styles['borderRadius'] = Number(radius);
-        styles['--border-radius'] = `${radius}px`;
-    }
-}
-function setViewStyle(styles, props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { viewStyle } = props;
-    if (isNumber((_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _a === void 0 ? void 0 : _a.top))
-        styles['marginTop'] = Number((_b = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _b === void 0 ? void 0 : _b.top);
-    if (isNumber((_c = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _c === void 0 ? void 0 : _c.bottom))
-        styles['marginBottom'] = Number((_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _d === void 0 ? void 0 : _d.bottom);
-    if (isNumber((_e = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _e === void 0 ? void 0 : _e.left))
-        styles['marginLeft'] = Number((_f = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _f === void 0 ? void 0 : _f.left);
-    if (isNumber((_g = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _g === void 0 ? void 0 : _g.right))
-        styles['marginRight'] = Number((_h = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _h === void 0 ? void 0 : _h.right);
-    const marginHorizontal = Number((_j = styles.marginLeft) !== null && _j !== void 0 ? _j : '0') + Number((_k = styles.marginRight) !== null && _k !== void 0 ? _k : '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%';
-        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'] = Number(width.value);
-    }
-    if (height.type === 'flex' && height.value == FlexSizeSpecValue.FillParent) {
-        style['height'] = '100%';
-        if (parentLayout === Layout.Column) {
-            style['flex'] = 1;
-        }
-    }
-    else if (height.type === 'fixed' && height.value >= 0) {
-        style['height'] = Number(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;
-        }
-    }
-}
-// 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 = 'normal' } = textStyle || {};
-    if (size)
-        styles['fontSize'] = Number(size);
-    if (color)
-        styles['color'] = color;
-    if (weight)
-        styles['fontWeight'] = weight;
-    if ((width === null || width === void 0 ? void 0 : width.value) == FlexSizeSpecValue.WrapContent) {
-        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;
-        }
-    }
-}
-
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -1855,13 +2034,20 @@ const returnUrl = (url = '') => {
     return `https://${url}`;
 };
 // todo: semantic html here is not perfect, need to revisit. Same for Button
-const ActionHandler = ({ className = '', style, children, props }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+const ActionHandler = ({ children, props, className, style }) => {
+    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 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,
+        paddingInlineStart: (_g = (_f = props.viewStyle) === null || _f === void 0 ? void 0 : _f.padding) === null || _g === void 0 ? void 0 : _g.left,
+        paddingInlineEnd: (_j = (_h = props.viewStyle) === null || _h === void 0 ? void 0 : _h.padding) === null || _j === void 0 ? void 0 : _j.right,
+    };
     const onClick = (e) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (((_a = props === null || props === void 0 ? void 0 : props.action) === null || _a === void 0 ? void 0 : _a.type) === 'web') {
+        if (((_a = props.action) === null || _a === void 0 ? void 0 : _a.type) === 'web') {
             if (handleWebAction) {
                 handleWebAction(e, props.action, message);
             }
@@ -1869,7 +2055,7 @@ const ActionHandler = ({ className = '', style, children, props }) => {
                 (_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();
             }
         }
-        if (((_d = props === null || props === void 0 ? void 0 : props.action) === null || _d === void 0 ? void 0 : _d.type) === 'custom') {
+        else if (((_d = props.action) === null || _d === void 0 ? void 0 : _d.type) === 'custom') {
             if (handleCustomAction) {
                 handleCustomAction(e, props.action, message);
             }
@@ -1877,30 +2063,25 @@ const ActionHandler = ({ className = '', style, children, props }) => {
                 (_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();
             }
         }
-        if (((_g = props === null || props === void 0 ? void 0 : props.action) === null || _g === void 0 ? void 0 : _g.type) === 'uikit') {
+        else if (((_g = props.action) === null || _g === void 0 ? void 0 : _g.type) === 'uikit') {
             handlePredefinedAction === null || handlePredefinedAction === void 0 ? void 0 : handlePredefinedAction(e, props.action, message);
         }
     };
-    const borderClass = ((_a = props.viewStyle) === null || _a === void 0 ? void 0 : _a.borderWidth) ? ' sb-message-template__border' : '';
-    if (className === 'sb-message-template__text-button') {
-        return (React__default.createElement("button", { className: `${className}${borderClass}`, "data-sb-template-id": props.elementId, style: Object.assign(Object.assign({}, style), { paddingTop: (_c = (_b = props.viewStyle) === null || _b === void 0 ? void 0 : _b.padding) === null || _c === void 0 ? void 0 : _c.top, paddingRight: (_e = (_d = props.viewStyle) === null || _d === void 0 ? void 0 : _d.padding) === null || _e === void 0 ? void 0 : _e.right, paddingBottom: (_g = (_f = props.viewStyle) === null || _f === void 0 ? void 0 : _f.padding) === null || _g === void 0 ? void 0 : _g.bottom, paddingLeft: (_j = (_h = props.viewStyle) === null || _h === void 0 ? void 0 : _h.padding) === null || _j === void 0 ? void 0 : _j.left }), onClick: onClick }, children));
+    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));
     }
     const { display, flexDirection, justifyContent, alignItems, objectFit } = recalculatedStyle, wrapperStyles = __rest(recalculatedStyle, ["display", "flexDirection", "justifyContent", "alignItems", "objectFit"]);
-    return (React__default.createElement("div", { ref: elemRef, className: `${className}${borderClass} ${(props === null || props === void 0 ? void 0 : props.action) ? 'sb-message-template__action' : ''}`, "data-sb-template-id": props.elementId, style: wrapperStyles, onClick: onClick },
-        React__default.createElement("div", { style: {
-                display,
+    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 },
+        React__default.createElement("div", { style: Object.assign({ display,
                 flexDirection,
                 justifyContent,
                 alignItems,
-                objectFit,
-                width: '100%',
-                height: '100%',
-                paddingTop: (_l = (_k = props.viewStyle) === null || _k === void 0 ? void 0 : _k.padding) === null || _l === void 0 ? void 0 : _l.top,
-                paddingRight: (_o = (_m = props.viewStyle) === null || _m === void 0 ? void 0 : _m.padding) === null || _o === void 0 ? void 0 : _o.right,
-                paddingBottom: (_q = (_p = props.viewStyle) === null || _p === void 0 ? void 0 : _p.padding) === null || _q === void 0 ? void 0 : _q.bottom,
-                paddingLeft: (_s = (_r = props.viewStyle) === null || _r === void 0 ? void 0 : _r.padding) === null || _s === void 0 ? void 0 : _s.left,
-            } }, children)));
+                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
@@ -1922,13 +2103,13 @@ function convertNewlinesToBr(text) {
 function renderText(view) {
     const { text, maxTextLines } = view;
     const isToBeWrapped = isFixedOrFill(view);
-    const isMultiLine = maxTextLines != null && maxTextLines > 0;
+    const hasMaxLines = typeof maxTextLines === 'number' && maxTextLines > 0;
     const convertedText = convertNewlinesToBr(text);
-    if (isMultiLine || isToBeWrapped) {
-        const wrapperStyling = Object.assign(Object.assign({}, ((isMultiLine || isToBeWrapped) && { maxWidth: '100%' })), (isToBeWrapped && { maxHeight: '100%', overflow: 'hidden' }));
-        return (React__default.createElement("div", { style: wrapperStyling }, isMultiLine ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText));
+    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 isMultiLine ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText;
+    return hasMaxLines ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText;
 }
 const renderer = createRenderer({
     views: {
@@ -1945,7 +2126,7 @@ const renderer = createRenderer({
                 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 })));
         },
         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: 1 }, 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))));
         },
         imageButton(props) {
             var _a;
@@ -1953,7 +2134,8 @@ const renderer = createRenderer({
                 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 })));
         },
         carouselView(props) {
-            return React__default.createElement(Carousel, { gap: props.spacing }, props.children);
+            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));
         },
     },
 });
@@ -1966,7 +2148,7 @@ const parser = createParser({
     },
     mapTextProps(props, options) {
         var _a;
-        const styles = getDefaultStyles({ whiteSpace: 'pre-line' });
+        const styles = getDefaultStyles({ whiteSpace: 'pre-line', wordBreak: 'break-word' });
         // Better not set flex 1 to text
         setViewProps(styles, props, options);
         setTextStyle(styles, props, options);
@@ -1984,7 +2166,7 @@ const parser = createParser({
     mapTextButtonProps(props, options) {
         const styles = getDefaultStyles({ whiteSpace: 'pre-line', alignItems: 'center', justifyContent: 'center' });
         setViewProps(styles, props, options);
-        setTextStyle(styles, Object.assign(Object.assign({}, props), { textStyle: Object.assign({ weight: 500 }, props.textStyle) }), options);
+        setTextStyle(styles, props, options);
         return styles;
     },
     mapImageButtonProps(props, options) {
@@ -1995,8 +2177,13 @@ const parser = createParser({
         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;
     },
 });
@@ -2008,7 +2195,7 @@ createMessageTemplate({
                 display: 'flex',
                 flexDirection: 'column',
                 maxWidth: 400,
-                marginBottom: 24,
+                marginBlockEnd: 24,
             } }, children));
     },
 });
@@ -2029,5 +2216,5 @@ function MessageTemplate(_a) {
     return React__default.createElement(CustomTemplate, { templateItems: templateItems, templateVersion: templateVersion });
 }
 
-export { CompositeComponentType as C, MessageProvider as M, MessageTemplate as a };
-//# sourceMappingURL=bundle-zxooGkqM.js.map
+export { MessageProvider as M, MessageTemplate as a };
+//# sourceMappingURL=bundle-KNrNIKZQ.js.map