@sendbird/uikit-react 3.14.3 → 3.14.4

package/chunks/{bundle-CllFAkeZ.js → bundle-IGQYX_K1.js}

@@ -1,18 +1,17 @@
 import React__default, { createContext, useState, useCallback, useContext, useRef, useMemo, useEffect } from 'react';
-import './bundle-DZcgZWKq.js';
 
-var ComponentType$1;
+var ComponentType;
 (function (ComponentType) {
     ComponentType["Box"] = "box";
     ComponentType["Text"] = "text";
     ComponentType["Image"] = "image";
     ComponentType["TextButton"] = "textButton";
     ComponentType["ImageButton"] = "imageButton";
-})(ComponentType$1 || (ComponentType$1 = {}));
-var CompositeComponentType$1;
+})(ComponentType || (ComponentType = {}));
+var CompositeComponentType;
 (function (CompositeComponentType) {
     CompositeComponentType["Carousel"] = "carouselView";
-})(CompositeComponentType$1 || (CompositeComponentType$1 = {}));
+})(CompositeComponentType || (CompositeComponentType = {}));
 
 // -------- Set property mapper
 const MAPPER = () => undefined;
@@ -30,22 +29,22 @@ const createParser = (params) => {
     return {
         parse(item, options) {
             switch (item.type) {
-                case ComponentType$1.Box: {
+                case ComponentType.Box: {
                     return { properties: mapper.mapBoxProps(item, options) };
                 }
-                case ComponentType$1.Text: {
+                case ComponentType.Text: {
                     return { properties: mapper.mapTextProps(item, options) };
                 }
-                case ComponentType$1.Image: {
+                case ComponentType.Image: {
                     return { properties: mapper.mapImageProps(item, options) };
                 }
-                case ComponentType$1.TextButton: {
+                case ComponentType.TextButton: {
                     return { properties: mapper.mapTextButtonProps(item, options) };
                 }
-                case ComponentType$1.ImageButton: {
+                case ComponentType.ImageButton: {
                     return { properties: mapper.mapImageButtonProps(item, options) };
                 }
-                case CompositeComponentType$1.Carousel: {
+                case CompositeComponentType.Carousel: {
                     return { properties: mapper.mapCarouselProps(item, options) };
                 }
                 default:
@@ -68,941 +67,6 @@ function createRenderer(params) {
     };
 }
 
-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)
@@ -1030,35 +94,6 @@ const SizeContextProvider = ({ children }) => {
 };
 const useSizeContext = () => useContext(SizeContext);
 
-const memoize = (fn) => {
-    const cache = new Map();
-    const cached = function (val) {
-        return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
-    };
-    cached.cache = cache;
-    return cached;
-};
-/**
- * Generate each item's id by each item's array depth
- */
-const setTemplateItemId = memoize((data) => {
-    const addIdRecursively = (item, id) => {
-        if ('items' in item && (item === null || item === void 0 ? void 0 : item.items) != null) {
-            item.items.forEach((subItem, subIdx) => {
-                const subId = `${id}-${subIdx}`;
-                subItem.id = subId;
-                addIdRecursively(subItem, subId);
-            });
-        }
-    };
-    data.forEach((item, idx) => {
-        const id = `${idx}`;
-        item.id = id;
-        addIdRecursively(item, id);
-    });
-    return data;
-});
-
 var Layout;
 (function (Layout) {
     Layout["Row"] = "row";
@@ -1094,6 +129,58 @@ var MediaContentMode;
     MediaContentMode["ScalesToFill"] = "scalesToFill";
 })(MediaContentMode || (MediaContentMode = {}));
 
+const SUPPORTED_TEMPLATE_VERSIONS = [
+    1,
+    2, // Composite templates: Carousel
+];
+const alignInFlex = (align) => {
+    switch (align) {
+        case AlignValue.Right:
+        case AlignValue.Bottom:
+            return 'flex-end';
+        case AlignValue.Center:
+            return 'center';
+        case AlignValue.Left:
+        case AlignValue.Top:
+        default:
+            return 'flex-start';
+    }
+};
+const isTemplateVersionSupported = (templateVersion) => {
+    if (!templateVersion)
+        return true;
+    return SUPPORTED_TEMPLATE_VERSIONS.includes(templateVersion);
+};
+
+const memoize = (fn) => {
+    const cache = new Map();
+    const cached = function (val) {
+        return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
+    };
+    cached.cache = cache;
+    return cached;
+};
+/**
+ * Generate each item's id by each item's array depth
+ */
+const setTemplateItemId = memoize((data) => {
+    const addIdRecursively = (item, id) => {
+        if ('items' in item && (item === null || item === void 0 ? void 0 : item.items) != null) {
+            item.items.forEach((subItem, subIdx) => {
+                const subId = `${id}-${subIdx}`;
+                subItem.id = subId;
+                addIdRecursively(subItem, subId);
+            });
+        }
+    };
+    data.forEach((item, idx) => {
+        const id = `${idx}`;
+        item.id = id;
+        addIdRecursively(item, id);
+    });
+    return data;
+});
+
 const defaultProperties = {
     rootLayout: Layout.Column,
     view: {
@@ -1125,7 +212,7 @@ const createMessageTemplate = (opts) => {
             };
             switch (item.type) {
                 // CompositeComponent should be top level component
-                case CompositeComponentType$1.Carousel: {
+                case CompositeComponentType.Carousel: {
                     if (!isRoot) {
                         throw new Error('Cannot parse template item as Carousel if the template item is not the root.');
                     }
@@ -1134,20 +221,20 @@ const createMessageTemplate = (opts) => {
                     }
                     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: {
+                case ComponentType.Box: {
                     return (React__default.createElement(renderer.box, Object.assign({}, item, props),
                         React__default.createElement(MessageTemplateBase, { templateItems: item.items || [], parentLayout: item.layout })));
                 }
-                case ComponentType$1.Text: {
+                case ComponentType.Text: {
                     return React__default.createElement(renderer.text, Object.assign({}, item, props));
                 }
-                case ComponentType$1.Image: {
+                case ComponentType.Image: {
                     return React__default.createElement(renderer.image, Object.assign({}, item, props));
                 }
-                case ComponentType$1.TextButton: {
+                case ComponentType.TextButton: {
                     return React__default.createElement(renderer.textButton, Object.assign({}, item, props));
                 }
-                case ComponentType$1.ImageButton: {
+                case ComponentType.ImageButton: {
                     return React__default.createElement(renderer.imageButton, Object.assign({}, item, props));
                 }
                 default: {
@@ -1168,7 +255,7 @@ const createMessageTemplate = (opts) => {
             }
             let isCarousel = false;
             if (Array.isArray(items) && items.length > 0) {
-                isCarousel = items[0].type === CompositeComponentType$1.Carousel;
+                isCarousel = items[0].type === CompositeComponentType.Carousel;
             }
             return (React__default.createElement(SizeContextProvider, null,
                 React__default.createElement(Container, { className: isCarousel ? 'sb-message-template__parent_for_carousel' : '' },
@@ -1185,26 +272,12 @@ var ActionType;
     ActionType["UIKit"] = "uikit";
 })(ActionType || (ActionType = {}));
 
-const alignInFlex = (align) => {
-    switch (align) {
-        case AlignValue.Right:
-        case AlignValue.Bottom:
-            return 'flex-end';
-        case AlignValue.Center:
-            return 'center';
-        case AlignValue.Left:
-        case AlignValue.Top:
-        default:
-            return 'flex-start';
-    }
-};
-
 ({
     version: 1,
     body: {
         items: [
             {
-                type: ComponentType$1.Image,
+                type: ComponentType.Image,
                 action: { type: ActionType.Web, data: 'https://docs.sendbird.com' },
                 height: { type: 'fixed', value: 236 },
                 viewStyle: {
@@ -1219,33 +292,33 @@ const alignInFlex = (align) => {
                 imageStyle: { contentMode: MediaContentMode.AspectFill },
             },
             {
-                type: ComponentType$1.Box,
+                type: ComponentType.Box,
                 layout: Layout.Column,
                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                 height: { type: 'fixed', value: 200 },
                 items: [
                     {
-                        type: ComponentType$1.Box,
+                        type: ComponentType.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         viewStyle: { backgroundColor: '#fa6464' },
                     },
                     {
-                        type: ComponentType$1.Box,
+                        type: ComponentType.Box,
                         layout: Layout.Column,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'flex', value: FlexSizeSpecValue.WrapContent },
                         viewStyle: { backgroundColor: '#ffaf5c' },
                         items: [
                             {
-                                type: ComponentType$1.Text,
+                                type: ComponentType.Text,
                                 text: 'Message',
                                 align: { horizontal: AlignValue.Center, vertical: AlignValue.Center },
                                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                                 height: { type: 'fixed', value: 50 },
                             },
                             {
-                                type: ComponentType$1.Image,
+                                type: ComponentType.Image,
                                 action: { type: ActionType.Web, data: 'https://docs.sendbird.com' },
                                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                                 height: { type: 'fixed', value: 50 },
@@ -1255,13 +328,13 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        type: ComponentType$1.Box,
+                        type: ComponentType.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'fixed', value: 20 },
                         viewStyle: { backgroundColor: '#ffe450' },
                     },
                     {
-                        type: ComponentType$1.Box,
+                        type: ComponentType.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         height: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         viewStyle: { backgroundColor: '#329a1b' },
@@ -1269,12 +342,12 @@ const alignInFlex = (align) => {
                 ],
             },
             {
-                type: ComponentType$1.Box,
+                type: ComponentType.Box,
                 viewStyle: { padding: { top: 12, bottom: 12, left: 12, right: 12 } },
                 layout: Layout.Column,
                 items: [
                     {
-                        type: ComponentType$1.Box,
+                        type: ComponentType.Box,
                         align: { horizontal: AlignValue.Left, vertical: AlignValue.Center },
                         layout: Layout.Row,
                         viewStyle: {
@@ -1285,7 +358,7 @@ const alignInFlex = (align) => {
                         height: { type: 'fixed', value: 150 },
                         items: [
                             {
-                                type: ComponentType$1.Text,
+                                type: ComponentType.Text,
                                 width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                                 height: { type: 'fixed', value: 50 },
                                 text: 'Sample1 text',
@@ -1301,7 +374,7 @@ const alignInFlex = (align) => {
                                 },
                             },
                             {
-                                type: ComponentType$1.ImageButton,
+                                type: ComponentType.ImageButton,
                                 action: { type: ActionType.UIKit, data: 'uikit://delete' },
                                 width: { type: 'fixed', value: 20 },
                                 height: { type: 'fixed', value: 20 },
@@ -1311,7 +384,7 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        type: ComponentType$1.Text,
+                        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,
@@ -1320,7 +393,7 @@ const alignInFlex = (align) => {
                         height: { type: 'fixed', value: 50 },
                     },
                     {
-                        type: ComponentType$1.TextButton,
+                        type: ComponentType.TextButton,
                         action: { type: ActionType.Web, data: 'https://www.daum.net' },
                         text: 'Button 3',
                         textStyle: { size: 14, color: '#742ddd', weight: FontWeight.Bold },
@@ -1335,25 +408,25 @@ const alignInFlex = (align) => {
     'body': {
         'items': [
             {
-                'type': ComponentType$1.Image,
+                'type': ComponentType.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$1.Box,
+                'type': ComponentType.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$1.Box,
+                        'type': ComponentType.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         'layout': Layout.Row,
                         'items': [
                             {
-                                'type': ComponentType$1.TextButton,
+                                'type': ComponentType.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 } },
@@ -1361,7 +434,7 @@ const alignInFlex = (align) => {
                                 'textStyle': { 'size': 14, 'weight': FontWeight.Bold },
                             },
                             {
-                                'type': ComponentType$1.TextButton,
+                                'type': ComponentType.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 } },
@@ -1371,19 +444,19 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        'type': ComponentType$1.Box,
+                        'type': ComponentType.Box,
                         width: { type: 'flex', value: FlexSizeSpecValue.FillParent },
                         'layout': Layout.Row,
                         'items': [
                             {
-                                'type': ComponentType$1.Text,
+                                'type': ComponentType.Text,
                                 'text': 'Sample2 text',
                                 'width': { 'type': 'flex', 'value': FlexSizeSpecValue.FillParent },
                                 'maxTextLines': 1,
                                 'textStyle': { 'size': 16, 'weight': FontWeight.Bold },
                             },
                             {
-                                'type': ComponentType$1.ImageButton,
+                                'type': ComponentType.ImageButton,
                                 'action': { 'type': ActionType.UIKit, 'data': 'uikit://delete' },
                                 'width': { 'type': 'fixed', 'value': 20 },
                                 'height': { 'type': 'fixed', 'value': 20 },
@@ -1393,7 +466,7 @@ const alignInFlex = (align) => {
                         ],
                     },
                     {
-                        'type': ComponentType$1.Text,
+                        '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 },
@@ -1408,42 +481,42 @@ const alignInFlex = (align) => {
     'body': {
         'items': [
             {
-                'type': ComponentType$1.Box,
+                'type': ComponentType.Box,
                 'viewStyle': { 'backgroundColor': '#ffffff', 'borderWidth': 1, 'borderColor': '#eeeeee', 'radius': 16 },
                 'layout': Layout.Column,
                 'items': [
                     {
-                        'type': ComponentType$1.Image,
+                        '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.AspectFill },
                     },
                     {
-                        'type': ComponentType$1.Box,
+                        'type': ComponentType.Box,
                         'viewStyle': { 'padding': { 'top': 15, 'bottom': 15, 'left': 15, 'right': 15 } },
                         'layout': Layout.Column,
                         'items': [
                             {
-                                'type': ComponentType$1.Text,
+                                'type': ComponentType.Text,
                                 'text': "Don't miss these deals today",
                                 'maxTextLines': 1,
                                 'textStyle': { 'size': 20, 'color': '#e10000', 'weight': FontWeight.Bold },
                             },
                             {
-                                'type': ComponentType$1.Text,
+                                '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$1.Box,
+                                'type': ComponentType.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType$1.Image,
+                                        'type': ComponentType.Image,
                                         'width': { 'type': 'fixed', 'value': 50 },
                                         'height': { 'type': 'fixed', 'value': 50 },
                                         'viewStyle': {
@@ -1456,19 +529,19 @@ const alignInFlex = (align) => {
                                         'imageStyle': { 'contentMode': MediaContentMode.AspectFill },
                                     },
                                     {
-                                        'type': ComponentType$1.Box,
+                                        'type': ComponentType.Box,
                                         'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                         'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'text': 'Meralco',
                                                 'maxTextLines': 1,
                                                 'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight.Bold },
                                             },
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
                                                 'text': '30% cashback, P300 min spend',
                                                 'maxTextLines': 1,
@@ -1479,13 +552,13 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType$1.Box,
+                                'type': ComponentType.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType$1.Image,
+                                        'type': ComponentType.Image,
                                         'width': { 'type': 'fixed', 'value': 50 },
                                         'height': { 'type': 'fixed', 'value': 50 },
                                         'viewStyle': {
@@ -1498,19 +571,19 @@ const alignInFlex = (align) => {
                                         'imageStyle': { 'contentMode': MediaContentMode.AspectFill, tintColor: '#a49a9a' },
                                     },
                                     {
-                                        'type': ComponentType$1.Box,
+                                        'type': ComponentType.Box,
                                         'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                         'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'text': 'Globe',
                                                 'maxTextLines': 1,
                                                 'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight.Bold },
                                             },
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
                                                 'text': '30% cashback, P300 min spend',
                                                 'maxTextLines': 1,
@@ -1521,13 +594,13 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType$1.Box,
+                                'type': ComponentType.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType$1.Image,
+                                        'type': ComponentType.Image,
                                         'width': { 'type': 'fixed', 'value': 50 },
                                         'height': { 'type': 'fixed', 'value': 50 },
                                         'viewStyle': {
@@ -1540,19 +613,19 @@ const alignInFlex = (align) => {
                                         'imageStyle': { 'contentMode': MediaContentMode.AspectFill },
                                     },
                                     {
-                                        'type': ComponentType$1.Box,
+                                        'type': ComponentType.Box,
                                         'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                         'viewStyle': { 'margin': { 'top': 0, 'bottom': 0, 'left': 15, 'right': 0 } },
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'text': 'Cignal',
                                                 'maxTextLines': 1,
                                                 'textStyle': { 'size': 16, 'color': '#e10000', 'weight': FontWeight.Bold },
                                             },
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'viewStyle': { 'margin': { 'top': 3, 'bottom': 0, 'left': 0, 'right': 0 } },
                                                 'text': '30% cashback, P300 min spend',
                                                 'maxTextLines': 1,
@@ -1563,13 +636,13 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType$1.Box,
+                                'type': ComponentType.Box,
                                 'align': { 'horizontal': AlignValue.Left, 'vertical': AlignValue.Center },
                                 'viewStyle': { 'margin': { 'top': 10, 'bottom': 0, 'left': 0, 'right': 0 } },
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType$1.TextButton,
+                                        'type': ComponentType.TextButton,
                                         'action': { 'type': ActionType.Web, 'data': 'https://www.daum.net' },
                                         'viewStyle': {
                                             'backgroundColor': '#e0e0e0',
@@ -1581,7 +654,7 @@ const alignInFlex = (align) => {
                                         'textStyle': { 'size': 15, 'color': '#e10000', 'weight': FontWeight.Bold },
                                     },
                                     {
-                                        'type': ComponentType$1.TextButton,
+                                        'type': ComponentType.TextButton,
                                         'action': { 'type': ActionType.Web, 'data': 'https://www.daum.net' },
                                         'viewStyle': {
                                             'backgroundColor': '#e10000',
@@ -1606,11 +679,11 @@ const alignInFlex = (align) => {
     'body': {
         'items': [
             {
-                'type': ComponentType$1.Box,
+                'type': ComponentType.Box,
                 'layout': Layout.Column,
                 'items': [
                     {
-                        'type': ComponentType$1.Image,
+                        'type': ComponentType.Image,
                         'imageUrl': 'https://static.sendbird.com/sample/profiles/profile_40_512px.png',
                         'metaData': {
                             'pixelWidth': 512,
@@ -1629,7 +702,7 @@ const alignInFlex = (align) => {
                         },
                     },
                     {
-                        'type': ComponentType$1.Box,
+                        'type': ComponentType.Box,
                         'viewStyle': {
                             'padding': {
                                 'top': 12,
@@ -1641,15 +714,15 @@ const alignInFlex = (align) => {
                         'layout': Layout.Column,
                         'items': [
                             {
-                                'type': ComponentType$1.Box,
+                                'type': ComponentType.Box,
                                 'layout': Layout.Row,
                                 'items': [
                                     {
-                                        'type': ComponentType$1.Box,
+                                        'type': ComponentType.Box,
                                         'layout': Layout.Column,
                                         'items': [
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'text': 'hi',
                                                 'maxTextLines': 3,
                                                 'viewStyle': {
@@ -1666,7 +739,7 @@ const alignInFlex = (align) => {
                                                 },
                                             },
                                             {
-                                                'type': ComponentType$1.Text,
+                                                'type': ComponentType.Text,
                                                 'text': 'bye',
                                                 'maxTextLines': 10,
                                                 'textStyle': {
@@ -1676,7 +749,7 @@ const alignInFlex = (align) => {
                                         ],
                                     },
                                     {
-                                        'type': ComponentType$1.ImageButton,
+                                        'type': ComponentType.ImageButton,
                                         'action': {
                                             'type': ActionType.UIKit,
                                             'data': 'sendbirduikit://delete',
@@ -1701,11 +774,11 @@ const alignInFlex = (align) => {
                                 ],
                             },
                             {
-                                'type': ComponentType$1.Box,
+                                'type': ComponentType.Box,
                                 'layout': Layout.Column,
                                 'items': [
                                     {
-                                        'type': ComponentType$1.Box,
+                                        'type': ComponentType.Box,
                                         'viewStyle': {
                                             'margin': {
                                                 'top': 16,
@@ -1721,7 +794,7 @@ const alignInFlex = (align) => {
                                         'layout': Layout.Row,
                                         'items': [
                                             {
-                                                'type': ComponentType$1.Image,
+                                                'type': ComponentType.Image,
                                                 'imageUrl': 'https://ca.slack-edge.com/T0ADCTNEL-ULE240VNV-83fd5776e78e-512',
                                                 'width': {
                                                     'type': 'fixed',
@@ -1744,7 +817,7 @@ const alignInFlex = (align) => {
                                                 },
                                             },
                                             {
-                                                'type': ComponentType$1.Box,
+                                                'type': ComponentType.Box,
                                                 'viewStyle': {
                                                     'margin': {
                                                         'top': 0,
@@ -1756,7 +829,7 @@ const alignInFlex = (align) => {
                                                 'layout': Layout.Column,
                                                 'items': [
                                                     {
-                                                        'type': ComponentType$1.Text,
+                                                        'type': ComponentType.Text,
                                                         'text': 'Chongbu',
                                                         'maxTextLines': 1,
                                                         'textStyle': {
@@ -1765,7 +838,7 @@ const alignInFlex = (align) => {
                                                         },
                                                     },
                                                     {
-                                                        'type': ComponentType$1.Text,
+                                                        'type': ComponentType.Text,
                                                         'viewStyle': {
                                                             'margin': {
                                                                 'top': 4,
@@ -1785,7 +858,7 @@ const alignInFlex = (align) => {
                                         ],
                                     },
                                     {
-                                        'type': ComponentType$1.Box,
+                                        'type': ComponentType.Box,
                                         'viewStyle': {
                                             'margin': {
                                                 'top': 16,
@@ -1801,7 +874,7 @@ const alignInFlex = (align) => {
                                         'layout': Layout.Row,
                                         'items': [
                                             {
-                                                'type': ComponentType$1.Image,
+                                                'type': ComponentType.Image,
                                                 'imageUrl': 'https://ca.slack-edge.com/T0ADCTNEL-U02LA25KY8J-d41a3e8c7554-512',
                                                 'width': {
                                                     'type': 'fixed',
@@ -1824,7 +897,7 @@ const alignInFlex = (align) => {
                                                 },
                                             },
                                             {
-                                                'type': ComponentType$1.Box,
+                                                'type': ComponentType.Box,
                                                 'viewStyle': {
                                                     'margin': {
                                                         'top': 0,
@@ -1836,7 +909,7 @@ const alignInFlex = (align) => {
                                                 'layout': Layout.Column,
                                                 'items': [
                                                     {
-                                                        'type': ComponentType$1.Text,
+                                                        'type': ComponentType.Text,
                                                         'text': 'Amanda',
                                                         'maxTextLines': 1,
                                                         'textStyle': {
@@ -1845,7 +918,7 @@ const alignInFlex = (align) => {
                                                         },
                                                     },
                                                     {
-                                                        'type': ComponentType$1.Text,
+                                                        'type': ComponentType.Text,
                                                         'viewStyle': {
                                                             'margin': {
                                                                 'top': 4,
@@ -2234,7 +1307,7 @@ const Carousel = React__default.memo(({ children, gap = GAP_DEFAULT }) => {
 
 function isWrappedText(view) {
     var _a;
-    return view.type === ComponentType$1.Text && ((_a = view.width) === null || _a === void 0 ? void 0 : _a.value) == FlexSizeSpecValue.WrapContent;
+    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, }) => {
@@ -2719,7 +1792,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$1.Text) {
+    if (props.type === ComponentType.Text) {
         const { siblings, elemIdx } = options;
         // To push out any subsequent components from the container,
         // if a prior one is long enough to occupy an entire line
@@ -2916,21 +1989,21 @@ createMessageTemplate({
     },
 });
 
-var CustomTemplate = createMessageTemplate({
-    parser: parser,
-    renderer: renderer,
-    Container: function (_a) {
-        var children = _a.children, className = _a.className;
-        return (React__default.createElement("div", { className: [
-                "sb-message-template__parent ".concat(className),
-                'sendbird-message-template__root',
-            ].join(' ') }, children));
-    },
-}).MessageTemplate;
-function MessageTemplate(_a) {
-    var templateItems = _a.templateItems, templateVersion = _a.templateVersion;
-    return React__default.createElement(CustomTemplate, { templateItems: templateItems, templateVersion: templateVersion });
+var CustomTemplate = createMessageTemplate({
+    parser: parser,
+    renderer: renderer,
+    Container: function (_a) {
+        var children = _a.children, className = _a.className;
+        return (React__default.createElement("div", { className: [
+                "sb-message-template__parent ".concat(className),
+                'sendbird-message-template__root',
+            ].join(' ') }, children));
+    },
+}).MessageTemplate;
+function MessageTemplate(_a) {
+    var templateItems = _a.templateItems, templateVersion = _a.templateVersion;
+    return React__default.createElement(CustomTemplate, { templateItems: templateItems, templateVersion: templateVersion });
 }
 
-export { CompositeComponentType$1 as C, MessageProvider as M, MessageTemplate as a };
-//# sourceMappingURL=bundle-CllFAkeZ.js.map
+export { CompositeComponentType as C, MessageProvider as M, MessageTemplate as a };
+//# sourceMappingURL=bundle-IGQYX_K1.js.map