@sendbird/uikit-react 3.14.10 → 3.14.11-rc-0

package/cjs/chunks/{bundle-DyVsDCif.js → bundle-BplDq0mq.js}

@@ -72,4 +72,4 @@ var useMediaQueryContext = function () { return React.useContext(MediaQueryConte
 
 exports.MediaQueryProvider = MediaQueryProvider;
 exports.useMediaQueryContext = useMediaQueryContext;
-//# sourceMappingURL=bundle-DyVsDCif.js.map
+//# sourceMappingURL=bundle-BplDq0mq.js.map

package/cjs/chunks/bundle-BplDq0mq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-BplDq0mq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-yeLmdqBe.js → bundle-BtSKhSvX.js}

@@ -49,4 +49,4 @@ function useThrottleCallback(callback, delay, options) {
 }
 
 exports.useThrottleCallback = useThrottleCallback;
-//# sourceMappingURL=bundle-yeLmdqBe.js.map
+//# sourceMappingURL=bundle-BtSKhSvX.js.map

package/cjs/chunks/bundle-BtSKhSvX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-BtSKhSvX.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-D6QZU38i.js → bundle-Bx2NBJSG.js}

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var message = require('@sendbird/chat/message');
-var utils = require('./bundle-CV-TUbyq.js');
-var actionTypes = require('./bundle--thJgTNM.js');
-require('./bundle-adWpPN7T.js');
-var consts = require('./bundle-Bbf2DLSP.js');
+var utils = require('./bundle-C4uNbRfV.js');
+var actionTypes = require('./bundle-CSf78qge.js');
+require('./bundle-CVg_YIhP.js');
+var consts = require('./bundle-vMl-hjKf.js');
 
 // For legacy
 // These are not used for collections(GroupChannel)
@@ -104,4 +104,4 @@ function useInitialMessagesFetch(_a, _b) {
 exports.NEXT_RESULT_SIZE = NEXT_RESULT_SIZE;
 exports.PREV_RESULT_SIZE = PREV_RESULT_SIZE;
 exports.useInitialMessagesFetch = useInitialMessagesFetch;
-//# sourceMappingURL=bundle-D6QZU38i.js.map
+//# sourceMappingURL=bundle-Bx2NBJSG.js.map

package/{chunks/bundle-D4w7NQSK.js.map → cjs/chunks/bundle-Bx2NBJSG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-D4w7NQSK.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-Bx2NBJSG.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BgT1wVpf.js → bundle-Bzg43KEj.js}

@@ -5,7 +5,7 @@ var GroupChannelList_components_GroupChannelListHeader = require('../GroupChanne
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var EditUserProfile = require('../EditUserProfile.js');
 var ui_PlaceHolder = require('../ui/PlaceHolder.js');
-var index = require('./bundle-CxL5O87m.js');
+var index = require('./bundle-aMF7cjjX.js');
 
 var GroupChannelListUIView = function (_a) {
     var renderHeader = _a.renderHeader, renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading, renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList, onChangeTheme = _a.onChangeTheme, onUserProfileUpdated = _a.onUserProfileUpdated, allowProfileEdit = _a.allowProfileEdit, channels = _a.channels, onLoadMore = _a.onLoadMore, initialized = _a.initialized, renderChannel = _a.renderChannel, renderAddChannel = _a.renderAddChannel;
@@ -66,4 +66,4 @@ var ChannelListComponent = function (props) {
 };
 
 exports.GroupChannelListUIView = GroupChannelListUIView;
-//# sourceMappingURL=bundle-BgT1wVpf.js.map
+//# sourceMappingURL=bundle-Bzg43KEj.js.map

package/cjs/chunks/bundle-Bzg43KEj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-Bzg43KEj.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-CR9JOCdA.js → bundle-BzlnyS95.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-var _tslib = require('./bundle-Cj28CPZo.js');
+var _tslib = require('./bundle-CVwB8G1I.js');
 var React = require('react');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('./bundle-CzWWCBR5.js');
-var LocalizationContext = require('./bundle-C1_VEq6O.js');
-var MediaQueryContext = require('./bundle-DyVsDCif.js');
-var utils = require('./bundle-omkWL_yx.js');
-var index = require('./bundle-BY8BAZNm.js');
-var ui_MessageStatus = require('./bundle-DBpzudbn.js');
+var useLongPress = require('./bundle-DgmZoB_W.js');
+var LocalizationContext = require('./bundle-D47V4Obt.js');
+var MediaQueryContext = require('./bundle-BplDq0mq.js');
+var utils = require('./bundle-Ck6xvF19.js');
+var index = require('./bundle-BoVc1U1a.js');
+var ui_MessageStatus = require('./bundle-CDWSB7nU.js');
 var GroupChannel_components_TypingIndicator = require('../GroupChannel/components/TypingIndicator.js');
 var ui_Badge = require('../ui/Badge.js');
 var ui_ChannelAvatar = require('../ui/ChannelAvatar.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-Sd-aNKBP.js');
+var ui_Label = require('./bundle-DEPVIREe.js');
 var ui_MentionUserLabel = require('../ui/MentionUserLabel.js');
-var ui_Modal = require('./bundle-D5ESahgs.js');
+var ui_Modal = require('./bundle-COyzsE6d.js');
 var ui_TextButton = require('../ui/TextButton.js');
 
 var GroupChannelListItemView = function (_a) {
@@ -86,4 +86,4 @@ var GroupChannelListItemView = function (_a) {
 };
 
 exports.GroupChannelListItemView = GroupChannelListItemView;
-//# sourceMappingURL=bundle-CR9JOCdA.js.map
+//# sourceMappingURL=bundle-BzlnyS95.js.map

package/cjs/chunks/bundle-BzlnyS95.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-BzlnyS95.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-CV-TUbyq.js → bundle-C4uNbRfV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var _tslib = require('./bundle-Cj28CPZo.js');
+var _tslib = require('./bundle-CVwB8G1I.js');
 var message = require('@sendbird/chat/message');
 
 var scrollToRenderedMessage = function (scrollRef, initialTimeStamp, setIsScrolled) {
@@ -131,4 +131,4 @@ exports.mergeAndSortMessages = mergeAndSortMessages;
 exports.passUnsuccessfullMessages = passUnsuccessfullMessages;
 exports.scrollIntoLast = scrollIntoLast;
 exports.scrollToRenderedMessage = scrollToRenderedMessage;
-//# sourceMappingURL=bundle-CV-TUbyq.js.map
+//# sourceMappingURL=bundle-C4uNbRfV.js.map

package/cjs/chunks/bundle-C4uNbRfV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-C4uNbRfV.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-DBpzudbn.js → bundle-CDWSB7nU.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var _tslib = require('./bundle-Cj28CPZo.js');
+var _tslib = require('./bundle-CVwB8G1I.js');
 var React = require('react');
-var index$1 = require('./bundle-C_vVIDF8.js');
+var index$1 = require('./bundle-Bot6eEM6.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-Sd-aNKBP.js');
+var ui_Label = require('./bundle-DEPVIREe.js');
 var ui_Loader = require('../ui/Loader.js');
-var index$2 = require('./bundle-BY8BAZNm.js');
+var index$2 = require('./bundle-BoVc1U1a.js');
 var utils_message_getOutgoingMessageState = require('../utils/message/getOutgoingMessageState.js');
-var index = require('./bundle-Cgb-aH3c.js');
-var LocalizationContext = require('./bundle-C1_VEq6O.js');
-var utils = require('./bundle-omkWL_yx.js');
+var index = require('./bundle-Cj_Ehg89.js');
+var LocalizationContext = require('./bundle-D47V4Obt.js');
+var utils = require('./bundle-Ck6xvF19.js');
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
     var _a;
@@ -144,4 +144,4 @@ exports.getChannelUnreadMessageCount = getChannelUnreadMessageCount;
 exports.getLastMessage = getLastMessage;
 exports.getLastMessageCreatedAt = getLastMessageCreatedAt;
 exports.getTotalMembers = getTotalMembers;
-//# sourceMappingURL=bundle-DBpzudbn.js.map
+//# sourceMappingURL=bundle-CDWSB7nU.js.map

package/cjs/chunks/bundle-CDWSB7nU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-CDWSB7nU.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-bIXh7yeI.js → bundle-CDnHMUZu.js}

@@ -6,17 +6,17 @@ var ui_IconButton = require('../ui/IconButton.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
 var ChannelSettings_components_UserListItem = require('../ChannelSettings/components/UserListItem.js');
-var _tslib = require('./bundle-Cj28CPZo.js');
+var _tslib = require('./bundle-CVwB8G1I.js');
 var SendbirdChat = require('@sendbird/chat');
-var ui_Modal = require('./bundle-D5ESahgs.js');
+var ui_Modal = require('./bundle-COyzsE6d.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var utils = require('./bundle-omkWL_yx.js');
+var utils = require('./bundle-Ck6xvF19.js');
 var ChannelSettings_context = require('../ChannelSettings/context.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var LocalizationContext = require('./bundle-C1_VEq6O.js');
-var index = require('./bundle-CxL5O87m.js');
-require('./bundle-Sd-aNKBP.js');
-var uuid = require('./bundle-BlS2bdI-.js');
+var LocalizationContext = require('./bundle-D47V4Obt.js');
+var index = require('./bundle-aMF7cjjX.js');
+require('./bundle-DEPVIREe.js');
+var uuid = require('./bundle-Boc_dyK4.js');
 
 function MembersModal(_a) {
     var _this = this;
@@ -283,4 +283,4 @@ var MemberList = function () {
 };
 
 exports.MemberList = MemberList;
-//# sourceMappingURL=bundle-bIXh7yeI.js.map
+//# sourceMappingURL=bundle-CDnHMUZu.js.map

package/cjs/chunks/{bundle-bIXh7yeI.js.map → bundle-CDnHMUZu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-bIXh7yeI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-CDnHMUZu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/bundle-CIkfoqlq.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var utils = require('./bundle-Ck6xvF19.js');
+var ui_Label = require('./bundle-DEPVIREe.js');
+
+var MessageMenuContext = React.createContext(undefined);
+var MessageMenuProvider = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React.createElement(MessageMenuContext.Provider, { value: value }, children));
+};
+var useMessageMenuContext = function () {
+    var context = React.useContext(MessageMenuContext);
+    if (!context) {
+        throw new Error('useMessageMenuContext must be used within a MessageMenuProvider');
+    }
+    return context;
+};
+
+var MenuItem = function (_a) {
+    var className = _a.className, disabled = _a.disabled, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, testID = _a.testID, onClick = _a.onClick, children = _a.children;
+    var handleClickEvent = function (e) {
+        if (!disabled && onClick) {
+            onClick(e);
+        }
+    };
+    return (React.createElement("li", { className: utils.classnames('sendbird-menu-item', className), role: "menuitem", "aria-disabled": disabled, "data-testid": testID, tabIndex: tabIndex, onClick: handleClickEvent, onKeyDown: function (e) { if (e.code === 'Enter')
+            handleClickEvent(e); } },
+        React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_2, color: disabled ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1 }, children)));
+};
+var BottomSheetMenuItem = function (_a) {
+    var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.tabIndex, tabIndex = _c === void 0 ? 0 : _c, testID = _a.testID, onClick = _a.onClick, children = _a.children;
+    return (React.createElement("div", { className: utils.classnames('sendbird-message__bottomsheet--action', className), role: "menuitem", tabIndex: tabIndex, "aria-disabled": disabled, onClick: onClick, "data-testid": testID }, children));
+};
+
+exports.BottomSheetMenuItem = BottomSheetMenuItem;
+exports.MenuItem = MenuItem;
+exports.MessageMenuProvider = MessageMenuProvider;
+exports.useMessageMenuContext = useMessageMenuContext;
+//# sourceMappingURL=bundle-CIkfoqlq.js.map

package/cjs/chunks/bundle-CIkfoqlq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-CIkfoqlq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-CK0jTdKT.js → bundle-CJTaxunC.js}

@@ -2,8 +2,8 @@
 
 var SendbirdChat = require('@sendbird/chat');
 var React = require('react');
-var uuid = require('./bundle-BlS2bdI-.js');
-var _tslib = require('./bundle-Cj28CPZo.js');
+var uuid = require('./bundle-Boc_dyK4.js');
+var _tslib = require('./bundle-CVwB8G1I.js');
 
 function useOnlineStatus(sdk, logger) {
     var _a, _b;
@@ -199,4 +199,4 @@ exports.schedulerFactory = schedulerFactory;
 exports.useMarkAsDeliveredScheduler = useMarkAsDeliveredScheduler;
 exports.useOnlineStatus = useOnlineStatus;
 exports.useUnmount = useUnmount;
-//# sourceMappingURL=bundle-CK0jTdKT.js.map
+//# sourceMappingURL=bundle-CJTaxunC.js.map

package/cjs/chunks/bundle-CJTaxunC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-CJTaxunC.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-Cd3_oZtc.js → bundle-CL0YmYh3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var consts = require('./bundle-Bbf2DLSP.js');
+var consts = require('./bundle-vMl-hjKf.js');
 var lame_all = require('../lame.all.js');
 
 // Thanks to https://codesandbox.io/s/media-recorder-api-downsampling-16k-mp3-encode-using-lame-js-forked-n1pblw
@@ -129,4 +129,4 @@ function bufferToWav(abuffer, len) {
 
 exports.downsampleToWav = downsampleToWav;
 exports.encodeMp3 = encodeMp3;
-//# sourceMappingURL=bundle-Cd3_oZtc.js.map
+//# sourceMappingURL=bundle-CL0YmYh3.js.map

package/cjs/chunks/bundle-CL0YmYh3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-CL0YmYh3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BXZBnaOj.js → bundle-CMUxhnsA.js}

@@ -1328,6 +1328,12 @@ const isGif = (url) => {
     const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     return extension === 'gif';
 };
+const isNumber = (val) => {
+    if (typeof val === 'string') {
+        return !Number.isNaN(Number(val));
+    }
+    return typeof val === 'number' && !Number.isNaN(val);
+};
 
 var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1664,8 +1670,21 @@ function getDefaultStyles(overrides) {
     return Object.assign({ display: 'flex', overflow: 'hidden', boxSizing: 'border-box' }, overrides);
 }
 function setViewProps(styles, props, options) {
+    var _a;
     setViewSize(styles, props, options);
     setViewStyle(styles, props);
+    // [Padding] Just parse the values as numbers; the actual value has been set in the ActionHandler.
+    if ((_a = props.viewStyle) === null || _a === void 0 ? void 0 : _a.padding) {
+        const padding = props.viewStyle.padding;
+        if (isNumber(padding.top))
+            padding.top = Number(padding.top);
+        if (isNumber(padding.bottom))
+            padding.bottom = Number(padding.bottom);
+        if (isNumber(padding.left))
+            padding.left = Number(padding.left);
+        if (isNumber(padding.right))
+            padding.right = Number(padding.right);
+    }
 }
 function setBorderStyle(styles, borderWidth, borderColor, radius) {
     if (borderWidth) {
@@ -1678,24 +1697,27 @@ function setBorderStyle(styles, borderWidth, borderColor, radius) {
     }
 }
 function setViewStyle(styles, props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { viewStyle } = props;
-    if ((_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _a === void 0 ? void 0 : _a.top)
-        styles['marginTop'] = Number(viewStyle.margin.top);
-    if ((_b = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _b === void 0 ? void 0 : _b.bottom)
-        styles['marginBottom'] = Number(viewStyle.margin.bottom);
-    if ((_c = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _c === void 0 ? void 0 : _c.left)
-        styles['marginLeft'] = Number(viewStyle.margin.left);
-    if ((_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _d === void 0 ? void 0 : _d.right)
-        styles['marginRight'] = Number(viewStyle.margin.right);
-    const marginHorizontal = Number((_e = styles.marginLeft) !== null && _e !== void 0 ? _e : '0') + Number((_f = styles.marginRight) !== null && _f !== void 0 ? _f : '0');
+    if (isNumber((_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _a === void 0 ? void 0 : _a.top))
+        styles['marginTop'] = Number((_b = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _b === void 0 ? void 0 : _b.top);
+    if (isNumber((_c = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _c === void 0 ? void 0 : _c.bottom))
+        styles['marginBottom'] = Number((_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _d === void 0 ? void 0 : _d.bottom);
+    if (isNumber((_e = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _e === void 0 ? void 0 : _e.left))
+        styles['marginLeft'] = Number((_f = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _f === void 0 ? void 0 : _f.left);
+    if (isNumber((_g = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _g === void 0 ? void 0 : _g.right))
+        styles['marginRight'] = Number((_h = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _h === void 0 ? void 0 : _h.right);
+    const marginHorizontal = Number((_j = styles.marginLeft) !== null && _j !== void 0 ? _j : '0') + Number((_k = styles.marginRight) !== null && _k !== void 0 ? _k : '0');
     if (marginHorizontal > 0 && styles.width === '100%')
         styles.width = `calc(100% - ${marginHorizontal}px)`;
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor)
         styles['backgroundColor'] = viewStyle.backgroundColor;
     // use JSON.stringify to escape special characters in image URL
-    if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundImageUrl)
+    if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundImageUrl) {
         styles['backgroundImage'] = `url(${JSON.stringify(viewStyle.backgroundImageUrl)})`;
+        styles['backgroundSize'] = '100%';
+        styles['backgroundPosition'] = 'center';
+    }
     setBorderStyle(styles, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderWidth, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderColor, viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.radius);
 }
 function getViewSizeStyle(width, height, parentLayout) {
@@ -2009,4 +2031,4 @@ function MessageTemplate(_a) {
 
 exports.MessageProvider = MessageProvider;
 exports.MessageTemplate = MessageTemplate;
-//# sourceMappingURL=bundle-BXZBnaOj.js.map
+//# sourceMappingURL=bundle-CMUxhnsA.js.map