@antscorp/antsomi-ui 1.3.5-beta.30 → 1.3.5-beta.31

package/es/components/atoms/MobileFrame/MobileFrame.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     size?: 'large' | 'medium';
+    backgroundColor?: string;
 }
 export declare const MobileFrame: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -16,7 +16,7 @@ import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
 export const MobileFrame = (_a) => {
     var { children } = _a, restOfProps = __rest(_a, ["children"]);
     return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, { size: restOfProps.size },
+        React.createElement(MobileInner, { backgroundColor: restOfProps.backgroundColor, size: restOfProps.size },
             children,
             React.createElement(MobileBottomLine, null))));
 };

package/es/components/atoms/MobileFrame/styled.js

@@ -1,5 +1,5 @@
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Assets
 import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/iphone.png';
 export const MobileWrapper = styled.div `
@@ -18,6 +18,11 @@ export const MobileInner = styled.div `
   border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
   border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
   overflow: hidden;
+
+  ${props => props.backgroundColor &&
+    css `
+      background-color: ${props.backgroundColor};
+    `}
 `;
 export const MobileBottomLine = styled.div `
   width: 145px;

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.d.ts

@@ -10,6 +10,7 @@ interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
     size?: 'large' | 'medium';
+    backgroundColor?: string;
     reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -22,7 +22,7 @@ import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
 import { Image, Message, MessageBox, MessageWrapper, Profile, MobileContent, RichMenuWrapper, TopBar, } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, messagePreview, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "messagePreview", "size"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, messagePreview, backgroundColor, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "messagePreview", "backgroundColor", "size"]);
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -31,7 +31,7 @@ export const RichMenuMobileView = props => {
     });
     // Variables
     const { showRichMenu, showTypingChat } = state;
-    return (React.createElement(MobileFrame, Object.assign({ size: size, className: `ants-mx-auto ${className}` }, restOfProps),
+    return (React.createElement(MobileFrame, Object.assign({ size: size, backgroundColor: backgroundColor, className: `ants-mx-auto ${className}` }, restOfProps),
         isPreview && (React.createElement(React.Fragment, null,
             React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
             (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.show) && (React.createElement(MessageBox, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.30",
+  "version": "1.3.5-beta.31",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",