@sendbird/uikit-react 3.14.0-beta.2 → 3.14.1

package/chunks/{bundle-BH5rbsxO.js → bundle-vcCWiyPL.js}

@@ -1,13 +1,18 @@
 import React__default, { createContext, useState, useCallback, useContext, useRef, useMemo, useEffect } from 'react';
+import './bundle-DRWNB6So.js';
 
-var ComponentType;
+var ComponentType$1;
 (function (ComponentType) {
     ComponentType["Box"] = "box";
     ComponentType["Text"] = "text";
     ComponentType["Image"] = "image";
     ComponentType["TextButton"] = "textButton";
     ComponentType["ImageButton"] = "imageButton";
-})(ComponentType || (ComponentType = {}));
+})(ComponentType$1 || (ComponentType$1 = {}));
+var CompositeComponentType$1;
+(function (CompositeComponentType) {
+    CompositeComponentType["Carousel"] = "carouselView";
+})(CompositeComponentType$1 || (CompositeComponentType$1 = {}));
 
 // -------- Set property mapper
 const MAPPER = () => undefined;
@@ -20,25 +25,29 @@ const createParser = (params) => {
         mapImageProps: (params === null || params === void 0 ? void 0 : params.mapImageProps) || defaultMapper,
         mapTextButtonProps: (params === null || params === void 0 ? void 0 : params.mapTextButtonProps) || defaultMapper,
         mapImageButtonProps: (params === null || params === void 0 ? void 0 : params.mapImageButtonProps) || defaultMapper,
+        mapCarouselProps: (params === null || params === void 0 ? void 0 : params.mapCarouselProps) || defaultMapper,
     };
     return {
         parse(item, options) {
             switch (item.type) {
-                case ComponentType.Box: {
+                case ComponentType$1.Box: {
                     return { properties: mapper.mapBoxProps(item, options) };
                 }
-                case ComponentType.Text: {
+                case ComponentType$1.Text: {
                     return { properties: mapper.mapTextProps(item, options) };
                 }
-                case ComponentType.Image: {
+                case ComponentType$1.Image: {
                     return { properties: mapper.mapImageProps(item, options) };
                 }
-                case ComponentType.TextButton: {
+                case ComponentType$1.TextButton: {
                     return { properties: mapper.mapTextButtonProps(item, options) };
                 }
-                case ComponentType.ImageButton: {
+                case ComponentType$1.ImageButton: {
                     return { properties: mapper.mapImageButtonProps(item, options) };
                 }
+                case CompositeComponentType$1.Carousel: {
+                    return { properties: mapper.mapCarouselProps(item, options) };
+                }
                 default:
                     return { properties: undefined };
             }
@@ -48,16 +57,952 @@ const createParser = (params) => {
 
 const FRAGMENT = ({ children }) => React__default.createElement(React__default.Fragment, null, children);
 function createRenderer(params) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     return {
         box: ((_a = params === null || params === void 0 ? void 0 : params.views) === null || _a === void 0 ? void 0 : _a.box) || FRAGMENT,
         text: ((_b = params === null || params === void 0 ? void 0 : params.views) === null || _b === void 0 ? void 0 : _b.text) || FRAGMENT,
         image: ((_c = params === null || params === void 0 ? void 0 : params.views) === null || _c === void 0 ? void 0 : _c.image) || FRAGMENT,
         imageButton: ((_d = params === null || params === void 0 ? void 0 : params.views) === null || _d === void 0 ? void 0 : _d.imageButton) || FRAGMENT,
         textButton: ((_e = params === null || params === void 0 ? void 0 : params.views) === null || _e === void 0 ? void 0 : _e.textButton) || FRAGMENT,
+        carouselView: ((_f = params === null || params === void 0 ? void 0 : params.views) === null || _f === void 0 ? void 0 : _f.carouselView) || FRAGMENT,
     };
 }
 
+var ComponentType;
+(function (ComponentType) {
+    ComponentType["Box"] = "box";
+    ComponentType["Text"] = "text";
+    ComponentType["Image"] = "image";
+    ComponentType["TextButton"] = "textButton";
+    ComponentType["ImageButton"] = "imageButton";
+})(ComponentType || (ComponentType = {}));
+var CompositeComponentType;
+(function (CompositeComponentType) {
+    CompositeComponentType["Carousel"] = "carouselView";
+})(CompositeComponentType || (CompositeComponentType = {}));
+
+createContext({
+    sizes: {},
+    updateSize: function () { },
+});
+
+var Layout$1;
+(function (Layout) {
+    Layout["Row"] = "row";
+    Layout["Column"] = "column";
+})(Layout$1 || (Layout$1 = {}));
+var AlignValue$1;
+(function (AlignValue) {
+    AlignValue["Center"] = "center";
+    AlignValue["Left"] = "left";
+    AlignValue["Right"] = "right";
+    AlignValue["Top"] = "top";
+    AlignValue["Bottom"] = "bottom";
+})(AlignValue$1 || (AlignValue$1 = {}));
+/**
+ * @description
+ * Caution: Numbers are passed as string types in the message template builder.
+ * Use `==` comparison instead of `===` comparison when using a regular enum instead of a string enum.
+ */
+var FlexSizeSpecValue$1;
+(function (FlexSizeSpecValue) {
+    FlexSizeSpecValue[FlexSizeSpecValue["FillParent"] = 0] = "FillParent";
+    FlexSizeSpecValue[FlexSizeSpecValue["WrapContent"] = 1] = "WrapContent";
+})(FlexSizeSpecValue$1 || (FlexSizeSpecValue$1 = {}));
+var FontWeight$1;
+(function (FontWeight) {
+    FontWeight["Normal"] = "normal";
+    FontWeight["Bold"] = "bold";
+})(FontWeight$1 || (FontWeight$1 = {}));
+var MediaContentMode$1;
+(function (MediaContentMode) {
+    MediaContentMode["AspectFit"] = "aspectFit";
+    MediaContentMode["AspectFill"] = "aspectFill";
+    MediaContentMode["ScalesToFill"] = "scalesToFill";
+})(MediaContentMode$1 || (MediaContentMode$1 = {}));
+
+({
+    rootLayout: Layout$1.Column,
+    view: {
+        size: {
+            width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+            height: { type: 'flex', value: FlexSizeSpecValue$1.WrapContent },
+        },
+    },
+    box: {
+        layout: Layout$1.Row,
+        align: { vertical: AlignValue$1.Top, horizontal: AlignValue$1.Left },
+    },
+});
+
+var ActionType$1;
+(function (ActionType) {
+    ActionType["Web"] = "web";
+    ActionType["Custom"] = "custom";
+    ActionType["UIKit"] = "uikit";
+})(ActionType$1 || (ActionType$1 = {}));
+
+var SUPPORTED_TEMPLATE_VERSIONS = [
+    1,
+    2, // Composite templates: Carousel
+];
+var isTemplateVersionSupported = function (templateVersion) {
+    if (!templateVersion)
+        return true;
+    return SUPPORTED_TEMPLATE_VERSIONS.includes(templateVersion);
+};
+
+({
+    version: 1,
+    body: {
+        items: [
+            {
+                type: ComponentType.Image,
+                action: { type: ActionType$1.Web, data: 'https://docs.sendbird.com' },
+                height: { type: 'fixed', value: 236 },
+                viewStyle: {
+                    padding: {
+                        left: 4,
+                        right: 4,
+                        top: 4,
+                        bottom: 4,
+                    },
+                },
+                imageUrl: 'https://cdn.pixabay.com/photo/2022/10/12/10/45/bird-7516219_1280.jpg',
+                imageStyle: { contentMode: MediaContentMode$1.AspectFill },
+            },
+            {
+                type: ComponentType.Box,
+                layout: Layout$1.Column,
+                width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                height: { type: 'fixed', value: 200 },
+                items: [
+                    {
+                        type: ComponentType.Box,
+                        width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        height: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        viewStyle: { backgroundColor: '#fa6464' },
+                    },
+                    {
+                        type: ComponentType.Box,
+                        layout: Layout$1.Column,
+                        width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        height: { type: 'flex', value: FlexSizeSpecValue$1.WrapContent },
+                        viewStyle: { backgroundColor: '#ffaf5c' },
+                        items: [
+                            {
+                                type: ComponentType.Text,
+                                text: 'Message',
+                                align: { horizontal: AlignValue$1.Center, vertical: AlignValue$1.Center },
+                                width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                                height: { type: 'fixed', value: 50 },
+                            },
+                            {
+                                type: ComponentType.Image,
+                                action: { type: ActionType$1.Web, data: 'https://docs.sendbird.com' },
+                                width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                                height: { type: 'fixed', value: 50 },
+                                imageUrl: 'https://cdn.pixabay.com/photo/2022/10/12/10/45/bird-7516219_1280.jpg',
+                                imageStyle: { contentMode: MediaContentMode$1.AspectFill },
+                            },
+                        ],
+                    },
+                    {
+                        type: ComponentType.Box,
+                        width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        height: { type: 'fixed', value: 20 },
+                        viewStyle: { backgroundColor: '#ffe450' },
+                    },
+                    {
+                        type: ComponentType.Box,
+                        width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        height: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        viewStyle: { backgroundColor: '#329a1b' },
+                    },
+                ],
+            },
+            {
+                type: ComponentType.Box,
+                viewStyle: { padding: { top: 12, bottom: 12, left: 12, right: 12 } },
+                layout: Layout$1.Column,
+                items: [
+                    {
+                        type: ComponentType.Box,
+                        align: { horizontal: AlignValue$1.Left, vertical: AlignValue$1.Center },
+                        layout: Layout$1.Row,
+                        viewStyle: {
+                            borderWidth: 1,
+                            borderColor: '#72723f',
+                        },
+                        width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        height: { type: 'fixed', value: 150 },
+                        items: [
+                            {
+                                type: ComponentType.Text,
+                                width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                                height: { type: 'fixed', value: 50 },
+                                text: 'Sample1 text',
+                                maxTextLines: 1,
+                                align: { vertical: AlignValue$1.Center, horizontal: AlignValue$1.Left },
+                                viewStyle: {
+                                    backgroundColor: '#cc4400',
+                                },
+                                textStyle: {
+                                    size: 16,
+                                    color: '#f8f8f8',
+                                    weight: FontWeight$1.Bold,
+                                },
+                            },
+                            {
+                                type: ComponentType.ImageButton,
+                                action: { type: ActionType$1.UIKit, data: 'uikit://delete' },
+                                width: { type: 'fixed', value: 20 },
+                                height: { type: 'fixed', value: 20 },
+                                imageUrl: 'https://file-ap-1.sendbird.com/5b5379aa73fd460da22ffaf9a61d0d7f.png',
+                                imageStyle: { contentMode: MediaContentMode$1.AspectFit },
+                            },
+                        ],
+                    },
+                    {
+                        type: ComponentType.Text,
+                        viewStyle: { padding: { top: 6, bottom: 12, left: 0, right: 0 } },
+                        text: 'Esse eu esse duis ipsum et dolor eu ut sit amet consectetur cillum velit officia. Ex adipisicing elit quis ea sit. Occaecat in eu aliqua nulla magna id ut excepteur minim.',
+                        maxTextLines: 2,
+                        textStyle: { size: 14, color: '#e10000' },
+                        width: { type: 'fixed', value: 200 },
+                        height: { type: 'fixed', value: 50 },
+                    },
+                    {
+                        type: ComponentType.TextButton,
+                        action: { type: ActionType$1.Web, data: 'https://www.daum.net' },
+                        text: 'Button 3',
+                        textStyle: { size: 14, color: '#742ddd', weight: FontWeight$1.Bold },
+                    },
+                ],
+            },
+        ],
+    },
+});
+({
+    'version': 1,
+    'body': {
+        'items': [
+            {
+                'type': ComponentType.Image,
+                'action': { 'type': ActionType$1.Web, 'data': 'https://www.naver.com/' },
+                'height': { 'type': 'fixed', 'value': 136 },
+                'imageUrl': 'https://cdn.pixabay.com/photo/2022/10/12/10/45/bird-7516219_1280.jpg',
+                'imageStyle': { 'contentMode': MediaContentMode$1.AspectFill },
+            },
+            {
+                'type': ComponentType.Box,
+                'viewStyle': { 'padding': { 'top': 12, 'bottom': 12, 'left': 12, 'right': 12 }, backgroundColor: '#cccccc' },
+                'layout': Layout$1.Column,
+                width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                'items': [
+                    {
+                        'type': ComponentType.Box,
+                        width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        'layout': Layout$1.Row,
+                        'items': [
+                            {
+                                'type': ComponentType.TextButton,
+                                'action': { 'type': ActionType$1.Web, 'data': 'https://www.daum.net' },
+                                width: { type: 'fixed', value: 150 },
+                                'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 0, 'right': 4 } },
+                                'text': 'Button 2',
+                                'textStyle': { 'size': 14, 'weight': FontWeight$1.Bold },
+                            },
+                            {
+                                'type': ComponentType.TextButton,
+                                'action': { 'type': ActionType$1.Web, 'data': 'https://www.daum.net' },
+                                width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                                'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 4, 'right': 0 } },
+                                'text': 'Button 3',
+                                'textStyle': { 'size': 14, 'weight': FontWeight$1.Bold },
+                            },
+                        ],
+                    },
+                    {
+                        'type': ComponentType.Box,
+                        width: { type: 'flex', value: FlexSizeSpecValue$1.FillParent },
+                        'layout': Layout$1.Row,
+                        'items': [
+                            {
+                                'type': ComponentType.Text,
+                                'text': 'Sample2 text',
+                                'width': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                                'maxTextLines': 1,
+                                'textStyle': { 'size': 16, 'weight': FontWeight$1.Bold },
+                            },
+                            {
+                                'type': ComponentType.ImageButton,
+                                'action': { 'type': ActionType$1.UIKit, 'data': 'uikit://delete' },
+                                'width': { 'type': 'fixed', 'value': 20 },
+                                'height': { 'type': 'fixed', 'value': 20 },
+                                'imageUrl': 'https://file-ap-1.sendbird.com/5b5379aa73fd460da22ffaf9a61d0d7f.png',
+                                'imageStyle': { 'contentMode': MediaContentMode$1.AspectFit },
+                            },
+                        ],
+                    },
+                    {
+                        'type': ComponentType.Text,
+                        'viewStyle': { 'padding': { 'top': 6, 'bottom': 12, 'left': 0, 'right': 0 } },
+                        'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aui',
+                        'textStyle': { 'size': 14 },
+                    },
+                ],
+            },
+        ],
+    },
+});
+({
+    'version': 1,
+    'body': {
+        'items': [
+            {
+                'type': ComponentType.Box,
+                'viewStyle': { 'backgroundColor': '#ffffff', 'borderWidth': 1, 'borderColor': '#eeeeee', 'radius': 16 },
+                'layout': Layout$1.Column,
+                'items': [
+                    {
+                        'type': ComponentType.Image,
+                        'height': { 'type': 'fixed', 'value': 200 },
+                        'imageUrl': 'https://img.freepik.com/free-vector/cartoon-happy-hours-background_52683-81243.jpg?w=2000&t=st=1666689198~exp=1666689798~hmac=23109d44ba03deee7aee069cbeebfcb48fa27f85e53c1cafc5d5d7345f1a2041',
+                        'imageStyle': { 'contentMode': MediaContentMode$1.AspectFill },
+                    },
+                    {
+                        'type': ComponentType.Box,
+                        'viewStyle': { 'padding': { 'top': 15, 'bottom': 15, 'left': 15, 'right': 15 } },
+                        'layout': Layout$1.Column,
+                        'items': [
+                            {
+                                'type': ComponentType.Text,
+                                'text': "Don't miss these deals today",
+                                'maxTextLines': 1,
+                                'textStyle': { 'size': 20, 'color': '#e10000', 'weight': FontWeight$1.Bold },
+                            },
+                            {
+                                'type': ComponentType.Text,
+                                'viewStyle': { 'margin': { 'top': 5, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                'text': 'Pay with Maya and get cashback!',
+                                'maxTextLines': 1,
+                                'textStyle': { 'size': 14, 'color': '#e10000' },
+                            },
+                            {
+                                'type': ComponentType.Box,
+                                'align': { 'horizontal': AlignValue$1.Left, 'vertical': AlignValue$1.Center },
+                                'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                'layout': Layout$1.Row,
+                                'items': [
+                                    {
+                                        'type': ComponentType.Image,
+                                        'width': { 'type': 'fixed', 'value': 50 },
+                                        'height': { 'type': 'fixed', 'value': 50 },
+                                        'viewStyle': {
+                                            'backgroundColor': '#ffffff',
+                                            'borderWidth': 1,
+                                            'borderColor': '#eeeeee',
+                                            'radius': 25,
+                                        },
+                                        'imageUrl': 'https://yt3.ggpht.com/ytc/AMLnZu8Kg89ymE7qt5bsS9vMqi9h2aHiN6m9ID-IgxR6-Q=s900-c-k-c0x00ffffff-no-rj',
+                                        'imageStyle': { 'contentMode': MediaContentMode$1.AspectFill },
+                                    },
+                                    {
+                                        'type': ComponentType.Box,
+                                        'align': { 'horizontal': AlignValue$1.Left, 'vertical': AlignValue$1.Center },
+                                        'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
+                                        'layout': Layout$1.Column,
+                                        'items': [
+                                            {
+                                                'type': ComponentType.Text,
+                                                'text': 'Meralco',
+                                                'maxTextLines': 1,
+                                                'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight$1.Bold },
+                                            },
+                                            {
+                                                'type': ComponentType.Text,
+                                                'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                                'text': '30% cashback, P300 min spend',
+                                                'maxTextLines': 1,
+                                                'textStyle': { 'size': 12, 'color': '#610000', 'weight': FontWeight$1.Bold },
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                            {
+                                'type': ComponentType.Box,
+                                'align': { 'horizontal': AlignValue$1.Left, 'vertical': AlignValue$1.Center },
+                                'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                'layout': Layout$1.Row,
+                                'items': [
+                                    {
+                                        'type': ComponentType.Image,
+                                        'width': { 'type': 'fixed', 'value': 50 },
+                                        'height': { 'type': 'fixed', 'value': 50 },
+                                        'viewStyle': {
+                                            'backgroundColor': '#ffffff',
+                                            'borderWidth': 1,
+                                            'borderColor': '#eeeeee',
+                                            'radius': 25,
+                                        },
+                                        'imageUrl': 'https://1000logos.net/wp-content/uploads/2021/12/Globe-Telecom-logo.png',
+                                        'imageStyle': { 'contentMode': MediaContentMode$1.AspectFill, tintColor: '#a49a9a' },
+                                    },
+                                    {
+                                        'type': ComponentType.Box,
+                                        'align': { 'horizontal': AlignValue$1.Left, 'vertical': AlignValue$1.Center },
+                                        'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
+                                        'layout': Layout$1.Column,
+                                        'items': [
+                                            {
+                                                'type': ComponentType.Text,
+                                                'text': 'Globe',
+                                                'maxTextLines': 1,
+                                                'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight$1.Bold },
+                                            },
+                                            {
+                                                'type': ComponentType.Text,
+                                                'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                                'text': '30% cashback, P300 min spend',
+                                                'maxTextLines': 1,
+                                                'textStyle': { 'size': 12, 'color': '#610000', 'weight': FontWeight$1.Bold },
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                            {
+                                'type': ComponentType.Box,
+                                'align': { 'horizontal': AlignValue$1.Left, 'vertical': AlignValue$1.Center },
+                                'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                'layout': Layout$1.Row,
+                                'items': [
+                                    {
+                                        'type': ComponentType.Image,
+                                        'width': { 'type': 'fixed', 'value': 50 },
+                                        'height': { 'type': 'fixed', 'value': 50 },
+                                        'viewStyle': {
+                                            'backgroundColor': '#ffffff',
+                                            'borderWidth': 1,
+                                            'borderColor': '#eeeeee',
+                                            'radius': 25,
+                                        },
+                                        'imageUrl': 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Cignal.svg/640px-Cignal.svg.png',
+                                        'imageStyle': { 'contentMode': MediaContentMode$1.AspectFill },
+                                    },
+                                    {
+                                        'type': ComponentType.Box,
+                                        'align': { 'horizontal': AlignValue$1.Left, 'vertical': AlignValue$1.Center },
+                                        'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
+                                        'layout': Layout$1.Column,
+                                        'items': [
+                                            {
+                                                'type': ComponentType.Text,
+                                                'text': 'Cignal',
+                                                'maxTextLines': 1,
+                                                'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight$1.Bold },
+                                            },
+                                            {
+                                                'type': ComponentType.Text,
+                                                'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                                'text': '30% cashback, P300 min spend',
+                                                'maxTextLines': 1,
+                                                'textStyle': { 'size': 12, 'color': '#610000', 'weight': FontWeight$1.Bold },
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                            {
+                                'type': ComponentType.Box,
+                                'align': { 'horizontal': AlignValue$1.Left, 'vertical': AlignValue$1.Center },
+                                'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
+                                'layout': Layout$1.Row,
+                                'items': [
+                                    {
+                                        'type': ComponentType.TextButton,
+                                        'action': { 'type': ActionType$1.Web, 'data': 'https://www.daum.net' },
+                                        'viewStyle': {
+                                            'backgroundColor': '#e0e0e0',
+                                            'radius': 16,
+                                            'margin': { 'top': 0, 'bottom': 0, 'left': 0, 'right': 4 },
+                                            'padding': { 'top': 12, 'bottom': 12, 'left': 12, 'right': 12 },
+                                        },
+                                        'text': 'Learn more',
+                                        'textStyle': { 'size': 15, 'color': '#e10000', 'weight': FontWeight$1.Bold },
+                                    },
+                                    {
+                                        'type': ComponentType.TextButton,
+                                        'action': { 'type': ActionType$1.Web, 'data': 'https://www.daum.net' },
+                                        'viewStyle': {
+                                            'backgroundColor': '#e10000',
+                                            'radius': 16,
+                                            'margin': { 'top': 0, 'bottom': 0, 'left': 4, 'right': 0 },
+                                            'padding': { 'top': 12, 'bottom': 12, 'left': 12, 'right': 12 },
+                                        },
+                                        'text': 'Pay now',
+                                        'textStyle': { 'size': 15, 'color': '#ffffff', 'weight': FontWeight$1.Bold },
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+});
+({
+    'version': 1,
+    'body': {
+        'items': [
+            {
+                'type': ComponentType.Box,
+                'layout': Layout$1.Column,
+                'items': [
+                    {
+                        'type': ComponentType.Image,
+                        'imageUrl': 'https://static.sendbird.com/sample/profiles/profile_40_512px.png',
+                        'metaData': {
+                            'pixelWidth': 512,
+                            'pixelHeight': 512,
+                        },
+                        'imageStyle': {
+                            'tintColor': '#44ff1188',
+                        },
+                        viewStyle: {
+                            'padding': {
+                                'top': 12,
+                                'right': 12,
+                                'bottom': 12,
+                                'left': 12,
+                            },
+                        },
+                    },
+                    {
+                        'type': ComponentType.Box,
+                        'viewStyle': {
+                            'padding': {
+                                'top': 12,
+                                'right': 12,
+                                'bottom': 12,
+                                'left': 12,
+                            },
+                        },
+                        'layout': Layout$1.Column,
+                        'items': [
+                            {
+                                'type': ComponentType.Box,
+                                'layout': Layout$1.Row,
+                                'items': [
+                                    {
+                                        'type': ComponentType.Box,
+                                        'layout': Layout$1.Column,
+                                        'items': [
+                                            {
+                                                'type': ComponentType.Text,
+                                                'text': 'hi',
+                                                'maxTextLines': 3,
+                                                'viewStyle': {
+                                                    'padding': {
+                                                        'top': 0,
+                                                        'bottom': 6,
+                                                        'left': 0,
+                                                        'right': 0,
+                                                    },
+                                                },
+                                                'textStyle': {
+                                                    'size': 16,
+                                                    'weight': FontWeight$1.Bold,
+                                                },
+                                            },
+                                            {
+                                                'type': ComponentType.Text,
+                                                'text': 'bye',
+                                                'maxTextLines': 10,
+                                                'textStyle': {
+                                                    'size': 14,
+                                                },
+                                            },
+                                        ],
+                                    },
+                                    {
+                                        'type': ComponentType.ImageButton,
+                                        'action': {
+                                            'type': ActionType$1.UIKit,
+                                            'data': 'sendbirduikit://delete',
+                                        },
+                                        'width': {
+                                            'type': 'fixed',
+                                            'value': 20,
+                                        },
+                                        'height': {
+                                            'type': 'fixed',
+                                            'value': 20,
+                                        },
+                                        'metaData': {
+                                            'pixelWidth': 60,
+                                            'pixelHeight': 60,
+                                        },
+                                        'imageUrl': 'https://dxstmhyqfqr1o.cloudfront.net/sendbird-message-builder/icon-more.png',
+                                        'imageStyle': {
+                                            'tintColor': '#ff8d5a',
+                                        },
+                                    },
+                                ],
+                            },
+                            {
+                                'type': ComponentType.Box,
+                                'layout': Layout$1.Column,
+                                'items': [
+                                    {
+                                        'type': ComponentType.Box,
+                                        'viewStyle': {
+                                            'margin': {
+                                                'top': 16,
+                                                'bottom': 0,
+                                                'left': 0,
+                                                'right': 0,
+                                            },
+                                        },
+                                        'align': {
+                                            'horizontal': AlignValue$1.Left,
+                                            'vertical': AlignValue$1.Center,
+                                        },
+                                        'layout': Layout$1.Row,
+                                        'items': [
+                                            {
+                                                'type': ComponentType.Image,
+                                                'imageUrl': 'https://ca.slack-edge.com/T0ADCTNEL-ULE240VNV-83fd5776e78e-512',
+                                                'width': {
+                                                    'type': 'fixed',
+                                                    'value': 40,
+                                                },
+                                                'height': {
+                                                    'type': 'fixed',
+                                                    'value': 40,
+                                                },
+                                                'metaData': {
+                                                    'pixelWidth': 512,
+                                                    'pixelHeight': 512,
+                                                },
+                                                'viewStyle': {
+                                                    'backgroundColor': '#BDBDBD',
+                                                    'radius': 20,
+                                                },
+                                                'imageStyle': {
+                                                    'contentMode': MediaContentMode$1.AspectFill,
+                                                },
+                                            },
+                                            {
+                                                'type': ComponentType.Box,
+                                                'viewStyle': {
+                                                    'margin': {
+                                                        'top': 0,
+                                                        'bottom': 0,
+                                                        'left': 12,
+                                                        'right': 0,
+                                                    },
+                                                },
+                                                'layout': Layout$1.Column,
+                                                'items': [
+                                                    {
+                                                        'type': ComponentType.Text,
+                                                        'text': 'Chongbu',
+                                                        'maxTextLines': 1,
+                                                        'textStyle': {
+                                                            'size': 16,
+                                                            'weight': FontWeight$1.Bold,
+                                                        },
+                                                    },
+                                                    {
+                                                        'type': ComponentType.Text,
+                                                        'viewStyle': {
+                                                            'margin': {
+                                                                'top': 4,
+                                                                'bottom': 0,
+                                                                'left': 0,
+                                                                'right': 0,
+                                                            },
+                                                        },
+                                                        'text': ' ',
+                                                        'maxTextLines': 1,
+                                                        'textStyle': {
+                                                            'size': 14,
+                                                        },
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                    {
+                                        'type': ComponentType.Box,
+                                        'viewStyle': {
+                                            'margin': {
+                                                'top': 16,
+                                                'bottom': 0,
+                                                'left': 0,
+                                                'right': 0,
+                                            },
+                                        },
+                                        'align': {
+                                            'horizontal': AlignValue$1.Left,
+                                            'vertical': AlignValue$1.Center,
+                                        },
+                                        'layout': Layout$1.Row,
+                                        'items': [
+                                            {
+                                                'type': ComponentType.Image,
+                                                'imageUrl': 'https://ca.slack-edge.com/T0ADCTNEL-U02LA25KY8J-d41a3e8c7554-512',
+                                                'width': {
+                                                    'type': 'fixed',
+                                                    'value': 40,
+                                                },
+                                                'height': {
+                                                    'type': 'fixed',
+                                                    'value': 40,
+                                                },
+                                                'metaData': {
+                                                    'pixelWidth': 512,
+                                                    'pixelHeight': 512,
+                                                },
+                                                'viewStyle': {
+                                                    'backgroundColor': '#BDBDBD',
+                                                    'radius': 20,
+                                                },
+                                                'imageStyle': {
+                                                    'contentMode': MediaContentMode$1.AspectFill,
+                                                },
+                                            },
+                                            {
+                                                'type': ComponentType.Box,
+                                                'viewStyle': {
+                                                    'margin': {
+                                                        'top': 0,
+                                                        'bottom': 0,
+                                                        'left': 12,
+                                                        'right': 0,
+                                                    },
+                                                },
+                                                'layout': Layout$1.Column,
+                                                'items': [
+                                                    {
+                                                        'type': ComponentType.Text,
+                                                        'text': 'Amanda',
+                                                        'maxTextLines': 1,
+                                                        'textStyle': {
+                                                            'size': 16,
+                                                            'weight': FontWeight$1.Bold,
+                                                        },
+                                                    },
+                                                    {
+                                                        'type': ComponentType.Text,
+                                                        'viewStyle': {
+                                                            'margin': {
+                                                                'top': 4,
+                                                                'bottom': 0,
+                                                                'left': 0,
+                                                                'right': 0,
+                                                            },
+                                                        },
+                                                        'text': 'This is title message',
+                                                        'maxTextLines': 1,
+                                                        'textStyle': {
+                                                            'size': 14,
+                                                        },
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+});
+({
+    'version': '1',
+    'body': {
+        'items': [
+            {
+                'type': 'box',
+                'layout': 'column',
+                height: { type: 'fixed', value: 600 },
+                'items': [
+                    {
+                        'type': 'box',
+                        'layout': 'column',
+                        'viewStyle': { 'radius': '8', 'padding': { 'top': '12', 'bottom': '12', 'left': '12', 'right': '12' } },
+                        'items': [
+                            {
+                                'type': 'text',
+                                'text': 'Title text',
+                                'textStyle': { 'color': '#E0000000', 'size': '16', 'weight': 'bold' },
+                                'maxTextLines': '5',
+                                'viewStyle': {},
+                                'action': { 'data': 'www.naver.com' },
+                            },
+                            {
+                                'type': 'text',
+                                'viewStyle': { 'margin': { 'top': '8', 'right': '0', 'bottom': '0', 'left': '0' } },
+                                'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aui',
+                                'textStyle': { 'color': '#E0000000', 'size': '14', 'weight': 'normal' },
+                                'maxTextLines': '5',
+                                'action': { 'data': 'https://www.naver.com' },
+                            },
+                            {
+                                'type': 'box',
+                                'layout': 'row',
+                                'viewStyle': { 'margin': { 'top': '12', 'right': '0', 'bottom': '0', 'left': '0' } },
+                                'items': [
+                                    {
+                                        'type': 'textButton',
+                                        'viewStyle': {
+                                            'backgroundColor': '#E0E0E0',
+                                            'padding': { 'top': '10', 'bottom': '10', 'left': '20', 'right': '20' },
+                                        },
+                                        'text': 'Button 1',
+                                        'textStyle': { 'color': '#742DDD', 'size': '14', 'weight': 'bold' },
+                                        'maxTextLines': '5',
+                                        'action': { 'data': 'www.naver.com' },
+                                    },
+                                    {
+                                        'type': 'textButton',
+                                        'viewStyle': {
+                                            'backgroundColor': '#E0E0E0',
+                                            'padding': { 'top': '10', 'bottom': '10', 'left': '20', 'right': '20' },
+                                            'margin': { 'left': '8', 'right': '0', 'top': '0', 'bottom': '0' },
+                                        },
+                                        'text': 'Button 2',
+                                        'textStyle': { 'color': '#742DDD', 'size': '14', 'weight': 'bold' },
+                                        'maxTextLines': '5',
+                                        'action': { 'data': 'https://www.naver.com' },
+                                    },
+                                ],
+                            },
+                        ],
+                        'action': { 'data': 'https://www.naver.com' },
+                    },
+                    {
+                        'type': 'image',
+                        'viewStyle': {},
+                        'width': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                        'height': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                        'imageStyle': { 'contentMode': 'aspectFill' },
+                        'imageUrl': 'https://file-preprod.sendbird.com/d03c08bb3f9041a88c1207b6bbf15ab8.png',
+                        'metaData': { 'pixelWidth': '1062', 'pixelHeight': '1070' },
+                    },
+                    {
+                        'type': 'textButton',
+                        'viewStyle': {
+                            'backgroundColor': '#E0E0E0',
+                            'padding': { 'top': '10', 'bottom': '10', 'left': '20', 'right': '20' },
+                        },
+                        'width': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                        'height': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                        'text': 'Button',
+                        'textStyle': { 'color': '#742DDD', 'size': '16', 'weight': 'normal' },
+                        'maxTextLines': '5',
+                        'action': { 'data': 'www.naver.com' },
+                    },
+                    {
+                        'type': 'imageButton',
+                        'viewStyle': {},
+                        'width': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                        'height': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                        'imageUrl': 'https://file-preprod.sendbird.com/38fdf5c1056f42b89a44b38155cc4b49.jpg',
+                        'imageStyle': { 'contentMode': 'aspectFill' },
+                        'metaData': { 'pixelWidth': '1080', 'pixelHeight': '2640' },
+                        'action': { 'data': 'www.naver.com' },
+                    },
+                ],
+                'viewStyle': {},
+            },
+        ],
+    },
+});
+({
+    'version': 1,
+    'body': {
+        'items': [
+            {
+                'elementId': 'root',
+                'type': 'box',
+                'layout': 'column',
+                'width': {
+                    'type': 'flex',
+                    'value': FlexSizeSpecValue$1.FillParent,
+                },
+                'height': {
+                    'type': 'flex',
+                    'value': FlexSizeSpecValue$1.WrapContent,
+                },
+                'items': [
+                    {
+                        'type': 'text',
+                        'viewStyle': {
+                            'backgroundColor': '#a0c0ffff',
+                            'margin': {
+                                'top': 16,
+                                'bottom': 16,
+                                'left': 16,
+                                'right': 16,
+                            },
+                            'padding': {
+                                'top': 16,
+                                'bottom': 16,
+                                'left': 16,
+                                'right': 16,
+                            },
+                        },
+                        'text': 'Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap ',
+                        'textStyle': {
+                            'size': 14,
+                            'color': '#222121e0',
+                            'weight': 'normal',
+                        },
+                        'maxTextLines': 5,
+                        'width': {
+                            'type': 'flex',
+                            'value': FlexSizeSpecValue$1.FillParent,
+                        },
+                        'height': {
+                            'type': 'flex',
+                            'value': 1,
+                        },
+                        'align': {
+                            'horizontal': 'left',
+                            'vertical': 'top',
+                        },
+                        'elementId': 'c0e15878-4984-408d-abaa-4b495c2e3872',
+                    },
+                    {
+                        'type': 'imageButton',
+                        'viewStyle': {
+                            margin: {
+                                left: 24,
+                                right: 12,
+                            },
+                        },
+                        'width': { 'type': 'flex', 'value': FlexSizeSpecValue$1.FillParent },
+                        'height': { 'type': 'fixed', 'value': 250 },
+                        'imageUrl': 'https://cdn.pixabay.com/photo/2022/10/12/10/45/bird-7516219_1280.jpg',
+                        'imageStyle': { 'contentMode': 'aspectFill' },
+                        'metaData': { 'pixelWidth': '1080', 'pixelHeight': '2640' },
+                        'action': { 'data': 'www.naver.com' },
+                    },
+                ],
+            },
+        ],
+    },
+});
+
 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)
@@ -168,10 +1113,8 @@ const createMessageTemplate = (opts) => {
     const UnknownMessage = opts.UnknownMessage || (() => null);
     const parser = opts.parser || createParser();
     const renderer = opts.renderer || createRenderer();
-    const MessageTemplateBase = (props) => {
-        var _a;
-        const renderItems = props.templateItems;
-        const parentLayout = (_a = props.parentLayout) !== null && _a !== void 0 ? _a : defaultProperties.box.layout;
+    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 = {
@@ -181,20 +1124,30 @@ const createMessageTemplate = (opts) => {
                 siblings,
             };
             switch (item.type) {
-                case ComponentType.Box: {
+                // CompositeComponent should be top level component
+                case CompositeComponentType$1.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) {
+                        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 })))));
+                }
+                case ComponentType$1.Box: {
                     return (React__default.createElement(renderer.box, Object.assign({}, item, props),
                         React__default.createElement(MessageTemplateBase, { templateItems: item.items || [], parentLayout: item.layout })));
                 }
-                case ComponentType.Text: {
+                case ComponentType$1.Text: {
                     return React__default.createElement(renderer.text, Object.assign({}, item, props));
                 }
-                case ComponentType.Image: {
+                case ComponentType$1.Image: {
                     return React__default.createElement(renderer.image, Object.assign({}, item, props));
                 }
-                case ComponentType.TextButton: {
+                case ComponentType$1.TextButton: {
                     return React__default.createElement(renderer.textButton, Object.assign({}, item, props));
                 }
-                case ComponentType.ImageButton: {
+                case ComponentType$1.ImageButton: {
                     return React__default.createElement(renderer.imageButton, Object.assign({}, item, props));
                 }
                 default: {
@@ -205,11 +1158,21 @@ const createMessageTemplate = (opts) => {
         })));
     };
     return {
-        MessageTemplate: ({ parentLayout = defaultProperties.rootLayout, templateItems }) => {
+        MessageTemplate: ({ parentLayout = defaultProperties.rootLayout, templateVersion, templateItems, }) => {
             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$1.Carousel;
+            }
             return (React__default.createElement(SizeContextProvider, null,
-                React__default.createElement(Container, null,
-                    React__default.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items }))));
+                React__default.createElement(Container, { className: isCarousel ? 'sb-message-template__parent_for_carousel' : '' },
+                    React__default.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items, isRoot: true }))));
         },
         MessageTemplateBase,
     };
@@ -241,7 +1204,7 @@ const alignInFlex = (align) => {
     body: {
         items: [
             {
-                type: ComponentType.Image,
+                type: ComponentType$1.Image,
                 action: { type: ActionType.Web, data: 'https://docs.sendbird.com' },
                 height: { type: 'fixed', value: 236 },
                 viewStyle: {
@@ -256,33 +1219,33 @@ const alignInFlex = (align) => {
                 imageStyle: { contentMode: MediaContentMode.AspectFill },
             },
             {
-                type: ComponentType.Box,
+                type: ComponentType$1.Box,
                 layout: Layout.Column,
                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                 height: { type: 'fixed', value: 200 },
                 items: [
                     {
-                        type: ComponentType.Box,
+                        type: ComponentType$1.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         viewStyle: { backgroundColor: '#fa6464' },
                     },
                     {
-                        type: ComponentType.Box,
+                        type: ComponentType$1.Box,
                         layout: Layout.Column,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'flex', value: FlexSizeSpecValue.WrapContent },
                         viewStyle: { backgroundColor: '#ffaf5c' },
                         items: [
                             {
-                                type: ComponentType.Text,
+                                type: ComponentType$1.Text,
                                 text: 'Message',
                                 align: { horizontal: AlignValue.Center, vertical: AlignValue.Center },
                                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                                 height: { type: 'fixed', value: 50 },
                             },
                             {
-                                type: ComponentType.Image,
+                                type: ComponentType$1.Image,
                                 action: { type: ActionType.Web, data: 'https://docs.sendbird.com' },
                                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                                 height: { type: 'fixed', value: 50 },
@@ -292,13 +1255,13 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        type: ComponentType.Box,
+                        type: ComponentType$1.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'fixed', value: 20 },
                         viewStyle: { backgroundColor: '#ffe450' },
                     },
                     {
-                        type: ComponentType.Box,
+                        type: ComponentType$1.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         viewStyle: { backgroundColor: '#329a1b' },
@@ -306,12 +1269,12 @@ const alignInFlex = (align) => {
                 ],
             },
             {
-                type: ComponentType.Box,
+                type: ComponentType$1.Box,
                 viewStyle: { padding: { top: 12, bottom: 12, left: 12, right: 12 } },
                 layout: Layout.Column,
                 items: [
                     {
-                        type: ComponentType.Box,
+                        type: ComponentType$1.Box,
                         align: { horizontal: AlignValue.Left, vertical: AlignValue.Center },
                         layout: Layout.Row,
                         viewStyle: {
@@ -322,7 +1285,7 @@ const alignInFlex = (align) => {
                         height: { type: 'fixed', value: 150 },
                         items: [
                             {
-                                type: ComponentType.Text,
+                                type: ComponentType$1.Text,
                                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                                 height: { type: 'fixed', value: 50 },
                                 text: 'Sample1 text',
@@ -338,7 +1301,7 @@ const alignInFlex = (align) => {
                                 },
                             },
                             {
-                                type: ComponentType.ImageButton,
+                                type: ComponentType$1.ImageButton,
                                 action: { type: ActionType.UIKit, data: 'uikit://delete' },
                                 width: { type: 'fixed', value: 20 },
                                 height: { type: 'fixed', value: 20 },
@@ -348,7 +1311,7 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        type: ComponentType.Text,
+                        type: ComponentType$1.Text,
                         viewStyle: { padding: { top: 6, bottom: 12, left: 0, right: 0 } },
                         text: 'Esse eu esse duis ipsum et dolor eu ut sit amet consectetur cillum velit officia. Ex adipisicing elit quis ea sit. Occaecat in eu aliqua nulla magna id ut excepteur minim.',
                         maxTextLines: 2,
@@ -357,7 +1320,7 @@ const alignInFlex = (align) => {
                         height: { type: 'fixed', value: 50 },
                     },
                     {
-                        type: ComponentType.TextButton,
+                        type: ComponentType$1.TextButton,
                         action: { type: ActionType.Web, data: 'https://www.daum.net' },
                         text: 'Button 3',
                         textStyle: { size: 14, color: '#742ddd', weight: FontWeight.Bold },
@@ -372,25 +1335,25 @@ const alignInFlex = (align) => {
     'body': {
         'items': [
             {
-                'type': ComponentType.Image,
+                'type': ComponentType$1.Image,
                 'action': { 'type': ActionType.Web, 'data': 'https://www.naver.com/' },
                 'height': { 'type': 'fixed', 'value': 136 },
                 'imageUrl': 'https://cdn.pixabay.com/photo/2022/10/12/10/45/bird-7516219_1280.jpg',
                 'imageStyle': { 'contentMode': MediaContentMode.AspectFill },
             },
             {
-                'type': ComponentType.Box,
+                'type': ComponentType$1.Box,
                 'viewStyle': { 'padding': { 'top': 12, 'bottom': 12, 'left': 12, 'right': 12 }, backgroundColor: '#cccccc' },
                 'layout': Layout.Column,
                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                 'items': [
                     {
-                        'type': ComponentType.Box,
+                        'type': ComponentType$1.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         'layout': Layout.Row,
                         'items': [
                             {
-                                'type': ComponentType.TextButton,
+                                'type': ComponentType$1.TextButton,
                                 'action': { 'type': ActionType.Web, 'data': 'https://www.daum.net' },
                                 width: { type: 'fixed', value: 150 },
                                 'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 0, 'right': 4 } },
@@ -398,7 +1361,7 @@ const alignInFlex = (align) => {
                                 'textStyle': { 'size': 14, 'weight': FontWeight.Bold },
                             },
                             {
-                                'type': ComponentType.TextButton,
+                                'type': ComponentType$1.TextButton,
                                 'action': { 'type': ActionType.Web, 'data': 'https://www.daum.net' },
                                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                                 'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 4, 'right': 0 } },
@@ -408,19 +1371,19 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        'type': ComponentType.Box,
+                        'type': ComponentType$1.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         'layout': Layout.Row,
                         'items': [
                             {
-                                'type': ComponentType.Text,
+                                'type': ComponentType$1.Text,
                                 'text': 'Sample2 text',
                                 'width': { 'type': 'flex', 'value': FlexSizeSpecValue.FillParent },
                                 'maxTextLines': 1,
                                 'textStyle': { 'size': 16, 'weight': FontWeight.Bold },
                             },
                             {
-                                'type': ComponentType.ImageButton,
+                                'type': ComponentType$1.ImageButton,
                                 'action': { 'type': ActionType.UIKit, 'data': 'uikit://delete' },
                                 'width': { 'type': 'fixed', 'value': 20 },
                                 'height': { 'type': 'fixed', 'value': 20 },
@@ -430,7 +1393,7 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        'type': ComponentType.Text,
+                        'type': ComponentType$1.Text,
                         'viewStyle': { 'padding': { 'top': 6, 'bottom': 12, 'left': 0, 'right': 0 } },
                         'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aui',
                         'textStyle': { 'size': 14 },
@@ -445,42 +1408,42 @@ const alignInFlex = (align) => {
     'body': {
         'items': [
             {
-                'type': ComponentType.Box,
+                'type': ComponentType$1.Box,
                 'viewStyle': { 'backgroundColor': '#ffffff', 'borderWidth': 1, 'borderColor': '#eeeeee', 'radius': 16 },
                 'layout': Layout.Column,
                 'items': [
                     {
-                        'type': ComponentType.Image,
+                        'type': ComponentType$1.Image,
                         'height': { 'type': 'fixed', 'value': 200 },
                         'imageUrl': 'https://img.freepik.com/free-vector/cartoon-happy-hours-background_52683-81243.jpg?w=2000&t=st=1666689198~exp=1666689798~hmac=23109d44ba03deee7aee069cbeebfcb48fa27f85e53c1cafc5d5d7345f1a2041',
                         'imageStyle': { 'contentMode': MediaContentMode.AspectFill },
                     },
                     {
-                        'type': ComponentType.Box,
+                        'type': ComponentType$1.Box,
                         'viewStyle': { 'padding': { 'top': 15, 'bottom': 15, 'left': 15, 'right': 15 } },
                         'layout': Layout.Column,
                         'items': [
                             {
-                                'type': ComponentType.Text,
+                                'type': ComponentType$1.Text,
                                 'text': "Don't miss these deals today",
                                 'maxTextLines': 1,
                                 'textStyle': { 'size': 20, 'color': '#e10000', 'weight': FontWeight.Bold },
                             },
                             {
-                                'type': ComponentType.Text,
+                                'type': ComponentType$1.Text,
                                 'viewStyle': { 'margin': { 'top': 5, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'text': 'Pay with Maya and get cashback!',
                                 'maxTextLines': 1,
                                 'textStyle': { 'size': 14, 'color': '#e10000' },
                             },
                             {
-                                'type': ComponentType.Box,
+                                'type': ComponentType$1.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType.Image,
+                                        'type': ComponentType$1.Image,
                                         'width': { 'type': 'fixed', 'value': 50 },
                                         'height': { 'type': 'fixed', 'value': 50 },
                                         'viewStyle': {
@@ -493,19 +1456,19 @@ const alignInFlex = (align) => {
                                         'imageStyle': { 'contentMode': MediaContentMode.AspectFill },
                                     },
                                     {
-                                        'type': ComponentType.Box,
+                                        'type': ComponentType$1.Box,
                                         'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                         'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'text': 'Meralco',
                                                 'maxTextLines': 1,
                                                 'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight.Bold },
                                             },
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
                                                 'text': '30% cashback, P300 min spend',
                                                 'maxTextLines': 1,
@@ -516,13 +1479,13 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType.Box,
+                                'type': ComponentType$1.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType.Image,
+                                        'type': ComponentType$1.Image,
                                         'width': { 'type': 'fixed', 'value': 50 },
                                         'height': { 'type': 'fixed', 'value': 50 },
                                         'viewStyle': {
@@ -535,19 +1498,19 @@ const alignInFlex = (align) => {
                                         'imageStyle': { 'contentMode': MediaContentMode.AspectFill, tintColor: '#a49a9a' },
                                     },
                                     {
-                                        'type': ComponentType.Box,
+                                        'type': ComponentType$1.Box,
                                         'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                         'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'text': 'Globe',
                                                 'maxTextLines': 1,
                                                 'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight.Bold },
                                             },
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
                                                 'text': '30% cashback, P300 min spend',
                                                 'maxTextLines': 1,
@@ -558,13 +1521,13 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType.Box,
+                                'type': ComponentType$1.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType.Image,
+                                        'type': ComponentType$1.Image,
                                         'width': { 'type': 'fixed', 'value': 50 },
                                         'height': { 'type': 'fixed', 'value': 50 },
                                         'viewStyle': {
@@ -577,19 +1540,19 @@ const alignInFlex = (align) => {
                                         'imageStyle': { 'contentMode': MediaContentMode.AspectFill },
                                     },
                                     {
-                                        'type': ComponentType.Box,
+                                        'type': ComponentType$1.Box,
                                         'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                         'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'text': 'Cignal',
                                                 'maxTextLines': 1,
                                                 'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight.Bold },
                                             },
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
                                                 'text': '30% cashback, P300 min spend',
                                                 'maxTextLines': 1,
@@ -600,13 +1563,13 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType.Box,
+                                'type': ComponentType$1.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType.TextButton,
+                                        'type': ComponentType$1.TextButton,
                                         'action': { 'type': ActionType.Web, 'data': 'https://www.daum.net' },
                                         'viewStyle': {
                                             'backgroundColor': '#e0e0e0',
@@ -618,7 +1581,7 @@ const alignInFlex = (align) => {
                                         'textStyle': { 'size': 15, 'color': '#e10000', 'weight': FontWeight.Bold },
                                     },
                                     {
-                                        'type': ComponentType.TextButton,
+                                        'type': ComponentType$1.TextButton,
                                         'action': { 'type': ActionType.Web, 'data': 'https://www.daum.net' },
                                         'viewStyle': {
                                             'backgroundColor': '#e10000',
@@ -643,11 +1606,11 @@ const alignInFlex = (align) => {
     'body': {
         'items': [
             {
-                'type': ComponentType.Box,
+                'type': ComponentType$1.Box,
                 'layout': Layout.Column,
                 'items': [
                     {
-                        'type': ComponentType.Image,
+                        'type': ComponentType$1.Image,
                         'imageUrl': 'https://static.sendbird.com/sample/profiles/profile_40_512px.png',
                         'metaData': {
                             'pixelWidth': 512,
@@ -666,7 +1629,7 @@ const alignInFlex = (align) => {
                         },
                     },
                     {
-                        'type': ComponentType.Box,
+                        'type': ComponentType$1.Box,
                         'viewStyle': {
                             'padding': {
                                 'top': 12,
@@ -678,15 +1641,15 @@ const alignInFlex = (align) => {
                         'layout': Layout.Column,
                         'items': [
                             {
-                                'type': ComponentType.Box,
+                                'type': ComponentType$1.Box,
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType.Box,
+                                        'type': ComponentType$1.Box,
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'text': 'hi',
                                                 'maxTextLines': 3,
                                                 'viewStyle': {
@@ -703,7 +1666,7 @@ const alignInFlex = (align) => {
                                                 },
                                             },
                                             {
-                                                'type': ComponentType.Text,
+                                                'type': ComponentType$1.Text,
                                                 'text': 'bye',
                                                 'maxTextLines': 10,
                                                 'textStyle': {
@@ -713,7 +1676,7 @@ const alignInFlex = (align) => {
                                         ],
                                     },
                                     {
-                                        'type': ComponentType.ImageButton,
+                                        'type': ComponentType$1.ImageButton,
                                         'action': {
                                             'type': ActionType.UIKit,
                                             'data': 'sendbirduikit://delete',
@@ -738,11 +1701,11 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType.Box,
+                                'type': ComponentType$1.Box,
                                 'layout': Layout.Column,
                                 'items': [
                                     {
-                                        'type': ComponentType.Box,
+                                        'type': ComponentType$1.Box,
                                         'viewStyle': {
                                             'margin': {
                                                 'top': 16,
@@ -758,7 +1721,7 @@ const alignInFlex = (align) => {
                                         'layout': Layout.Row,
                                         'items': [
                                             {
-                                                'type': ComponentType.Image,
+                                                'type': ComponentType$1.Image,
                                                 'imageUrl': 'https://ca.slack-edge.com/T0ADCTNEL-ULE240VNV-83fd5776e78e-512',
                                                 'width': {
                                                     'type': 'fixed',
@@ -781,7 +1744,7 @@ const alignInFlex = (align) => {
                                                 },
                                             },
                                             {
-                                                'type': ComponentType.Box,
+                                                'type': ComponentType$1.Box,
                                                 'viewStyle': {
                                                     'margin': {
                                                         'top': 0,
@@ -793,7 +1756,7 @@ const alignInFlex = (align) => {
                                                 'layout': Layout.Column,
                                                 'items': [
                                                     {
-                                                        'type': ComponentType.Text,
+                                                        'type': ComponentType$1.Text,
                                                         'text': 'Chongbu',
                                                         'maxTextLines': 1,
                                                         'textStyle': {
@@ -802,7 +1765,7 @@ const alignInFlex = (align) => {
                                                         },
                                                     },
                                                     {
-                                                        'type': ComponentType.Text,
+                                                        'type': ComponentType$1.Text,
                                                         'viewStyle': {
                                                             'margin': {
                                                                 'top': 4,
@@ -822,7 +1785,7 @@ const alignInFlex = (align) => {
                                         ],
                                     },
                                     {
-                                        'type': ComponentType.Box,
+                                        'type': ComponentType$1.Box,
                                         'viewStyle': {
                                             'margin': {
                                                 'top': 16,
@@ -838,7 +1801,7 @@ const alignInFlex = (align) => {
                                         'layout': Layout.Row,
                                         'items': [
                                             {
-                                                'type': ComponentType.Image,
+                                                'type': ComponentType$1.Image,
                                                 'imageUrl': 'https://ca.slack-edge.com/T0ADCTNEL-U02LA25KY8J-d41a3e8c7554-512',
                                                 'width': {
                                                     'type': 'fixed',
@@ -861,7 +1824,7 @@ const alignInFlex = (align) => {
                                                 },
                                             },
                                             {
-                                                'type': ComponentType.Box,
+                                                'type': ComponentType$1.Box,
                                                 'viewStyle': {
                                                     'margin': {
                                                         'top': 0,
@@ -873,7 +1836,7 @@ const alignInFlex = (align) => {
                                                 'layout': Layout.Column,
                                                 'items': [
                                                     {
-                                                        'type': ComponentType.Text,
+                                                        'type': ComponentType$1.Text,
                                                         'text': 'Amanda',
                                                         'maxTextLines': 1,
                                                         'textStyle': {
@@ -882,7 +1845,7 @@ const alignInFlex = (align) => {
                                                         },
                                                     },
                                                     {
-                                                        'type': ComponentType.Text,
+                                                        'type': ComponentType$1.Text,
                                                         'viewStyle': {
                                                             'margin': {
                                                                 'top': 4,
@@ -1011,6 +1974,285 @@ const alignInFlex = (align) => {
         ],
     },
 });
+({
+    'version': 1,
+    'body': {
+        'items': [
+            {
+                'elementId': 'root',
+                'type': 'box',
+                'layout': 'column',
+                'width': {
+                    'type': 'flex',
+                    'value': FlexSizeSpecValue.FillParent,
+                },
+                'height': {
+                    'type': 'flex',
+                    'value': FlexSizeSpecValue.WrapContent,
+                },
+                'items': [
+                    {
+                        'type': 'text',
+                        'viewStyle': {
+                            'backgroundColor': '#a0c0ffff',
+                            'margin': {
+                                'top': 16,
+                                'bottom': 16,
+                                'left': 16,
+                                'right': 16,
+                            },
+                            'padding': {
+                                'top': 16,
+                                'bottom': 16,
+                                'left': 16,
+                                'right': 16,
+                            },
+                        },
+                        'text': 'Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap ',
+                        'textStyle': {
+                            'size': 14,
+                            'color': '#222121e0',
+                            'weight': 'normal',
+                        },
+                        'maxTextLines': 5,
+                        'width': {
+                            'type': 'flex',
+                            'value': FlexSizeSpecValue.FillParent,
+                        },
+                        'height': {
+                            'type': 'flex',
+                            'value': 1,
+                        },
+                        'align': {
+                            'horizontal': 'left',
+                            'vertical': 'top',
+                        },
+                        'elementId': 'c0e15878-4984-408d-abaa-4b495c2e3872',
+                    },
+                    {
+                        'type': 'imageButton',
+                        'viewStyle': {
+                            margin: {
+                                left: 24,
+                                right: 12,
+                            },
+                        },
+                        'width': { 'type': 'flex', 'value': FlexSizeSpecValue.FillParent },
+                        'height': { 'type': 'fixed', 'value': 250 },
+                        'imageUrl': 'https://cdn.pixabay.com/photo/2022/10/12/10/45/bird-7516219_1280.jpg',
+                        'imageStyle': { 'contentMode': 'aspectFill' },
+                        'metaData': { 'pixelWidth': '1080', 'pixelHeight': '2640' },
+                        'action': { 'data': 'www.naver.com' },
+                    },
+                ],
+            },
+        ],
+    },
+});
+
+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 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,
+        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)
+            return;
+        const currentX = event.clientX;
+        const newOffset = currentX - draggingInfo.startPos.x;
+        setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { offset: newOffset }));
+    };
+    const handleMouseUp = () => {
+        if (!draggingInfo.dragging)
+            return;
+        handleDragEnd();
+        unblockScroll();
+    };
+    const blockScroll = () => {
+        if (carouselRef.current) {
+            carouselRef.current.style.touchAction = 'pan-x';
+        }
+    };
+    const unblockScroll = () => {
+        if (carouselRef.current) {
+            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 handleTouchMove = (event) => {
+        if (!draggingInfo.startPos || draggingInfo.scrolling)
+            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 })));
+            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 })));
+        }
+    };
+    const handleTouchEnd = () => {
+        if (!draggingInfo.dragging)
+            return;
+        handleDragEnd();
+        unblockScroll();
+    };
+    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 handleDragEnd = () => {
+        const { offset, currentIndex } = draggingInfo;
+        const absOffset = Math.abs(offset);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo((props) => getNewDraggingInfo(props));
+            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 })));
+        }
+        else {
+            setDraggingInfo((props) => getNewDraggingInfo(props));
+        }
+    };
+    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 })))));
+});
+
+function isWrappedText(view) {
+    var _a;
+    return view.type === ComponentType$1.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 = {};
@@ -1118,7 +2360,7 @@ const ReactMessageTemplateImage = (_a) => {
     if (hasError) {
         return React__default.createElement(PlaceholderReactMessageTemplateImage, Object.assign({}, props));
     }
-    else if (tintColor) {
+    else if (tintColor && !isGif(props.src)) {
         return React__default.createElement(CanvasReactMessageTemplateImage, Object.assign({}, props, { onError: onError, tintColor: tintColor, metaData: metaData }));
     }
     else {
@@ -1149,21 +2391,6 @@ const MessageProvider = (props) => {
 };
 const useMessageContext = () => React__default.useContext(MessageContext);
 
-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';
-};
-
 /**
  * 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.
@@ -1376,7 +2603,7 @@ function setBorderStyle(styles, borderWidth, borderColor, radius) {
     }
 }
 function setViewStyle(styles, props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const { viewStyle } = props;
     if ((_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _a === void 0 ? void 0 : _a.top)
         styles['marginTop'] = Number(viewStyle.margin.top);
@@ -1386,6 +2613,9 @@ function setViewStyle(styles, props) {
         styles['marginLeft'] = Number(viewStyle.margin.left);
     if ((_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _d === void 0 ? void 0 : _d.right)
         styles['marginRight'] = Number(viewStyle.margin.right);
+    const marginHorizontal = Number((_e = styles.marginLeft) !== null && _e !== void 0 ? _e : '0') + Number((_f = styles.marginRight) !== null && _f !== void 0 ? _f : '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
@@ -1489,7 +2719,7 @@ function setTextStyle(styles, props, options) {
     if ((width === null || width === void 0 ? void 0 : width.value) == FlexSizeSpecValue.WrapContent) {
         styles['maxWidth'] = '100%';
     }
-    if (props.type === ComponentType.Text) {
+    if (props.type === ComponentType$1.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
@@ -1533,19 +2763,24 @@ const ActionHandler = ({ className = '', style, children, props }) => {
     const { recalculatedStyle, elemRef } = useRecalculateWidth({ style, props });
     const { message, handleWebAction, handleCustomAction, handlePredefinedAction } = useMessageContext();
     const onClick = (e) => {
-        var _a, _b, _c, _d, _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 (handleWebAction) {
-                handleWebAction === null || handleWebAction === void 0 ? void 0 : handleWebAction(e, props.action, message);
+                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();
             }
         }
         if (((_d = props === null || props === void 0 ? void 0 : props.action) === null || _d === void 0 ? void 0 : _d.type) === 'custom') {
-            handleCustomAction === null || handleCustomAction === void 0 ? void 0 : handleCustomAction(e, props.action, message);
+            if (handleCustomAction) {
+                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();
+            }
         }
-        if (((_e = props === null || props === void 0 ? void 0 : props.action) === null || _e === void 0 ? void 0 : _e.type) === 'uikit') {
+        if (((_g = props === null || props === void 0 ? void 0 : props.action) === null || _g === void 0 ? void 0 : _g.type) === 'uikit') {
             handlePredefinedAction === null || handlePredefinedAction === void 0 ? void 0 : handlePredefinedAction(e, props.action, message);
         }
     };
@@ -1582,15 +2817,21 @@ function isFixedOrFill(view) {
         (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 isMultiLine = maxTextLines != null && 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) }, text) : text));
+        return (React__default.createElement("div", { style: wrapperStyling }, isMultiLine ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText));
     }
-    return text;
+    return isMultiLine ? React__default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText;
 }
 const renderer = createRenderer({
     views: {
@@ -1607,13 +2848,16 @@ 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(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))));
         },
         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 })));
         },
+        carouselView(props) {
+            return React__default.createElement(Carousel, { gap: props.spacing }, props.children);
+        },
     },
 });
 const parser = createParser({
@@ -1653,18 +2897,21 @@ const parser = createParser({
         setImageAspectRatio(styles, props);
         return styles;
     },
+    mapCarouselProps(props, options) {
+        const styles = getDefaultStyles();
+        setViewProps(styles, props, options);
+        return styles;
+    },
 });
 createMessageTemplate({
     renderer,
     parser,
-    Container: ({ children }) => {
-        return (React__default.createElement("div", { className: "sb-message-template__parent", style: {
+    Container: ({ children, className }) => {
+        return (React__default.createElement("div", { className: `sb-message-template__parent ${className}`, style: {
                 display: 'flex',
                 flexDirection: 'column',
                 maxWidth: 400,
-                backgroundColor: '#cecece',
                 marginBottom: 24,
-                borderRadius: '8px',
             } }, children));
     },
 });
@@ -1673,17 +2920,17 @@ var CustomTemplate = createMessageTemplate({
     parser: parser,
     renderer: renderer,
     Container: function (_a) {
-        var children = _a.children;
+        var children = _a.children, className = _a.className;
         return (React__default.createElement("div", { className: [
-                'sb-message-template__parent',
+                "sb-message-template__parent ".concat(className),
                 'sendbird-message-template__root',
             ].join(' ') }, children));
     },
 }).MessageTemplate;
 function MessageTemplate(_a) {
-    var templateItems = _a.templateItems;
-    return React__default.createElement(CustomTemplate, { templateItems: templateItems });
+    var templateItems = _a.templateItems, templateVersion = _a.templateVersion;
+    return React__default.createElement(CustomTemplate, { templateItems: templateItems, templateVersion: templateVersion });
 }
 
-export { MessageProvider as M, MessageTemplate as a };
-//# sourceMappingURL=bundle-BH5rbsxO.js.map
+export { CompositeComponentType$1 as C, MessageProvider as M, MessageTemplate as a };
+//# sourceMappingURL=bundle-vcCWiyPL.js.map