@zohodesk/dot 1.0.0-temp-50 → 1.0.0-temp-51

package/lib/list/ListLayout/ListLayout.module.css

@@ -5,16 +5,15 @@
   position: relative;
   composes: varClass;
 }
-.listHover:hover {
-  background-color: var(--zdt_listLayout_hover_border);
+.listHover:hover, .hoveredStyle{
+  background-color: var(--zdt_listLayout_hover_bg);
 }
 .active, .active:hover {
-  background-color: var(--zdt_listLayout_active_border);
+  background-color: var(--zdt_listLayout_active_bg);
 }
 .cursorPointer{
   cursor: pointer
 }
-
 /* View */
 .classic .innerContainer {
   min-height: var(--zd_size70);
@@ -31,3 +30,29 @@
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
+[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
+  border-left: var(--zd_size2) solid transparent;
+}
+[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
+  border-right: var(--zd_size2) solid transparent;
+}
+[dir=ltr] .keyboardActive, [dir=ltr] .active{
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+[dir=rtl] .keyboardActive, [dir=rtl] .active{
+  border-top-right-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+[dir=ltr] .keyboardActive{
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=rtl] .keyboardActive{
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=ltr] .active{
+  border-left-color: var(--zdt_listLayout_active_border);
+}
+[dir=rtl] .active{
+  border-right-color: var(--zdt_listLayout_active_border);
+}

package/lib/list/SecondaryText/index.js

@@ -3,40 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "AccountName", {
-  enumerable: true,
-  get: function get() {
-    return _AccountName["default"];
-  }
-});
 Object.defineProperty(exports, "ContactName", {
   enumerable: true,
   get: function get() {
     return _ContactName["default"];
   }
 });
-Object.defineProperty(exports, "DepartmentText", {
+Object.defineProperty(exports, "AccountName", {
   enumerable: true,
   get: function get() {
-    return _DepartmentText["default"];
+    return _AccountName["default"];
   }
 });
-Object.defineProperty(exports, "Email", {
+Object.defineProperty(exports, "TicketId", {
   enumerable: true,
   get: function get() {
-    return _Email["default"];
+    return _TicketId["default"];
   }
 });
-Object.defineProperty(exports, "HappinessRating", {
+Object.defineProperty(exports, "StatusText", {
   enumerable: true,
   get: function get() {
-    return _HappinessRating["default"];
+    return _StatusText["default"];
   }
 });
-Object.defineProperty(exports, "PhoneNumber", {
+Object.defineProperty(exports, "DepartmentText", {
   enumerable: true,
   get: function get() {
-    return _PhoneNumber["default"];
+    return _DepartmentText["default"];
   }
 });
 Object.defineProperty(exports, "PriorityText", {
@@ -45,28 +39,34 @@ Object.defineProperty(exports, "PriorityText", {
     return _PriorityText["default"];
   }
 });
-Object.defineProperty(exports, "SecondaryText", {
+Object.defineProperty(exports, "Email", {
   enumerable: true,
   get: function get() {
-    return _SecondaryText["default"];
+    return _Email["default"];
   }
 });
-Object.defineProperty(exports, "StatusText", {
+Object.defineProperty(exports, "PhoneNumber", {
   enumerable: true,
   get: function get() {
-    return _StatusText["default"];
+    return _PhoneNumber["default"];
   }
 });
-Object.defineProperty(exports, "TicketId", {
+Object.defineProperty(exports, "Website", {
   enumerable: true,
   get: function get() {
-    return _TicketId["default"];
+    return _Website["default"];
   }
 });
-Object.defineProperty(exports, "Website", {
+Object.defineProperty(exports, "SecondaryText", {
   enumerable: true,
   get: function get() {
-    return _Website["default"];
+    return _SecondaryText["default"];
+  }
+});
+Object.defineProperty(exports, "HappinessRating", {
+  enumerable: true,
+  get: function get() {
+    return _HappinessRating["default"];
   }
 });
 

package/lib/list/SecondryPanel/SecondryPanel.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SecondryPanelUL = exports.SecondryPanelLI = exports.SecondryPanelItem = void 0;
+exports.SecondryPanelItem = exports.SecondryPanelLI = exports.SecondryPanelUL = exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/lib/utils/ChannelIconMapping.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActivitiesIconObj = getActivitiesIconObj;
 exports.getChannelMappingObj = getChannelMappingObj;
+exports.getActivitiesIconObj = getActivitiesIconObj;
 
 function getChannelMappingObj() {
   return {

package/lib/utils/General.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatCurrency = formatCurrency;
-exports.formatPhoneUrl = formatPhoneUrl;
+exports.stopBubbling = stopBubbling;
 exports.getFullName = getFullName;
 exports.shallowDiff = shallowDiff;
-exports.stopBubbling = stopBubbling;
+exports.formatPhoneUrl = formatPhoneUrl;
+exports.formatCurrency = formatCurrency;
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 

package/lib/utils/KeyboardApi.js

@@ -289,9 +289,7 @@ function _shortRestrictionPlaces(e) {
   var keyCode = e.keyCode || e.charCode;
   var isContentEditable = _target.contentEditable === 'true';
 
-  if (['TEXTAREA', 'INPUT', 'SELECT'].indexOf(tagName) !== -1 || //!SupportUI.CurrentUser.getKBStatus() ||
-  //restrict_keyUI() ||
-  keyCode >= 112 && keyCode <= 123 || isContentEditable) {
+  if (['TEXTAREA', 'INPUT', 'SELECT'].indexOf(tagName) !== -1 || keyCode >= 112 && keyCode <= 123 || isContentEditable) {
     return true;
   }
 

package/lib/utils/editorUtils.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.bind = bind;
-exports.changeContent = void 0;
 exports.editorContentValidate = editorContentValidate;
-exports.encodeForHtml = encodeForHtml;
 exports.fixEncoding = fixEncoding;
-exports.getExtensionFromFileName = getExtensionFromFileName;
-exports.getRichEditorContent = getRichEditorContent;
+exports.encodeForHtml = encodeForHtml;
 exports.isFileNameSizeInvalid = isFileNameSizeInvalid;
 exports.isImageFormat = isImageFormat;
-exports.loadResource = loadResource;
+exports.getExtensionFromFileName = getExtensionFromFileName;
 exports.triggerKeyup = triggerKeyup;
+exports.getRichEditorContent = getRichEditorContent;
 exports.validateEditorContentOnInsertHtml = validateEditorContentOnInsertHtml;
+exports.loadResource = loadResource;
+exports.bind = bind;
+exports.changeContent = void 0;
 var ATTACHMENT_FILE_NAME_SIZE_LIMIT = 200; // editorUtils
 
 function editorContentValidate(editorObj) {

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -5,8 +5,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GlobalNotificationNew = GlobalNotificationNew;
 exports.GlobalNotificationUI = GlobalNotificationUI;
+exports.GlobalNotificationNew = GlobalNotificationNew;
 exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-50",
+  "version": "1.0.0-temp-51",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -30,21 +30,21 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "1.0.0-temp-1",
+    "@zohodesk/variables": "1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-temp-38",
+    "@zohodesk/components": "1.0.0-alpha-219",
     "@zohodesk/icons": "1.0.0-beta.85",
-    "@zohodesk/svg": "1.0.0-beta.34",
+    "@zohodesk/svg": "1.0.0-beta.37",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
   "peerDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "^1.0.0-beta.24",
+    "@zohodesk/variables": "^1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-209",
+    "@zohodesk/components": "1.0.0-alpha-219",
     "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/svg": "^1.0.0-beta.34"
+    "@zohodesk/svg": "^1.0.0-beta.37"
   },
   "react-cli": {
     "app": {

package/src/Appearance/dark/mode/dotDarkMode.module.css

@@ -114,8 +114,6 @@
   --zdt_commonEmptyState_default_description: #a8b0bd;
   --zdt_commonEmptyState_default_link: var(--zdt_cta_primary_text);
   --zdt_commonEmptyState_default_link_hover: var(--zdt_cta_primary_hover_text);
-  --zdt_commonEmptyState_dark_title: #fff;
-  --zdt_commonEmptyState_dark_description: #fff;
 
   /* edition page */
   --zdt_editionpage_footer_text: var(--zd_text_smoke5);
@@ -232,8 +230,10 @@
 
   /* list layout */
   --zdt_listLayout_border: var(--zdt_cta_grey_15_border);
-  --zdt_listLayout_hover_border: var(--dot_listItemHover);
-  --zdt_listLayout_active_border: var(--dot_listItemActive);
+  --zdt_listLayout_hover_bg: var(--dot_listItemHover);
+  --zdt_listLayout_active_bg: var(--dot_listItemActive);
+  --zdt_listLayout_active_border: var(--zdt_cta_primary_border);
+  --zdt_listLayout_keyboard_active_border:#828994;
 
   /* list stencils */
   --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);

package/src/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #479dff;
     --zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/src/Appearance/dark/themes/green/greenDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #45a159;
     --zdt_commonEmptyState_dark_link_hover: #0e7c1c;
 }

package/src/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #ff801f;
     --zdt_commonEmptyState_dark_link_hover: #a85100;
 }

package/src/Appearance/dark/themes/red/redDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #e94f4f;
     --zdt_commonEmptyState_dark_link_hover: #a81111;
 }

package/src/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #d79835;
     --zdt_commonEmptyState_dark_link_hover: #9b6808;
 }

package/src/Appearance/default/mode/dotDefaultMode.module.css

@@ -114,8 +114,6 @@
   --zdt_commonEmptyState_default_description: var(--dot_text_shuttleGrey);
   --zdt_commonEmptyState_default_link: var(--zdt_cta_primary_text);
   --zdt_commonEmptyState_default_link_hover: var(--zdt_cta_primary_hover_text);
-  --zdt_commonEmptyState_dark_title: #fff;
-  --zdt_commonEmptyState_dark_description: #fff;
 
   /* edition page */
   --zdt_editionpage_footer_text: var(--zd_text_smoke5);
@@ -232,8 +230,10 @@
 
   /* list layout */
   --zdt_listLayout_border: var(--zdt_cta_grey_15_border);
-  --zdt_listLayout_hover_border: var(--dot_listItemHover);
-  --zdt_listLayout_active_border: var(--dot_listItemActive);
+  --zdt_listLayout_hover_bg: var(--dot_listItemHover);
+  --zdt_listLayout_active_bg: var(--dot_listItemActive);
+  --zdt_listLayout_active_border: var(--zdt_cta_primary_border);
+  --zdt_listLayout_keyboard_active_border:var(--dot_border_slateGrey);
 
   /* list stencils */
   --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);

package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #6cbbfc;
     --zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/src/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #4ac064;
     --zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/src/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #e57717;
     --zdt_commonEmptyState_dark_link_hover: #b25900;
 }

package/src/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
     
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #ff6363;
     --zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

package/src/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #e8b923;
     --zdt_commonEmptyState_dark_link_hover: #b59100;
 }

package/src/Link/Link.js

@@ -64,7 +64,9 @@ export default class Link extends React.Component {
       'download',
       'rel',
       'dataId',
-      'hasReload'
+      'hasReload',
+      'customProps',
+      'option'
     ];
     let others = Object.keys(this.props)
       .filter(key => ignoreKeys.indexOf(key) == -1)

package/src/MessageBanner/MessageBanner.js

@@ -15,20 +15,22 @@ export default class MessageBanner extends React.Component {
       onClick,
       urlText,
       palette,
-      customClass
+      customClass,
+      dataId
     } = this.props;
 
     return (
       <Container
-        className={`${style[`type_${  type}`]} ${
-          style[`palette_${  palette}`]
+        className={`${style[`type_${type}`]} ${
+          style[`palette_${palette}`]
         } ${customClass}`}
         alignBox='row'
         isCover={false}
+        dataId={dataId}
       >
         <Box className={style.content} flexible>
           <Container alignBox='row' align='both'>
-            <Box className={style.message} adjust shrink>
+            <Box className={style.message} adjust shrink data-title={message}>
               {message}
             </Box>
             {href && (
@@ -59,7 +61,8 @@ export default class MessageBanner extends React.Component {
 MessageBanner.defaultProps = {
   type: 'primary',
   palette: 'default',
-  customClass: ''
+  customClass: '',
+  dataId:'MessageBanner'
 };
 MessageBanner.propTypes = {
   customClass: PropTypes.string,
@@ -69,7 +72,8 @@ MessageBanner.propTypes = {
   onClose: PropTypes.func,
   palette: PropTypes.oneOf(['default', 'blue', 'white']),
   type: PropTypes.oneOf(['primary', 'secondary']),
-  urlText: PropTypes.string
+  urlText: PropTypes.string,
+  dataId:PropTypes.string
 };
 
 if (__DOCS__) {

package/src/MessageBanner/MessageBanner.module.css

@@ -6,15 +6,16 @@
   margin: 0 auto;
 }
 .message {
-  padding: var(--zd_size10) var(--zd_size5) var(--zd_size10) 0;
+  padding: var(--zd_size10) 0;
   color: var(--zdt_messagebanner_text);
-  margin: 0 var(--zd_size10);
+  margin-left: var(--zd_size10);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .link {
   color: var(--zdt_messagebanner_link_text);
   margin-left: var(--zd_size5);
 }
+.message,.link{font-size:  var(--zd_font_size14);}
 .close {
   color: var(--zdt_messagebanner_close_text);
   cursor: pointer;

package/src/Provider.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { I18NProvider } from '@zohodesk/i18n';
 import { Container } from '@zohodesk/components/lib/Layout';
 import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
+import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit';
 import datetime from '@zohodesk/datetimejs';
 import i18n from './i18n';
 /* component pkg - default mode & themes */
@@ -134,6 +135,7 @@ export default class Provider extends React.Component {
         timeFormat={''}
         direction={'ltr'}
       >
+             <LibraryContext.Provider value={{isReducedMotion:false,direction:'ltr'}}>
         <AppContainer
           customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
         >
@@ -194,6 +196,7 @@ export default class Provider extends React.Component {
             </div>
           </div>
         </AppContainer>
+        </LibraryContext.Provider>
       </I18NProvider>
     );
   }

package/src/avatar/AvatarThread/AvatarThread.js

@@ -28,7 +28,8 @@ export default class AvatarThread extends React.Component {
       customTextClass,
       needTitle,
       customProps,
-      iconClass
+      iconClass,
+      getCustomThread
     } = this.props;
     let { AvatarThreadProps = {}, AvatarProps = {} } = customProps;
     let hoverEffect = showOnHover ? style.hover : '';
@@ -53,7 +54,7 @@ export default class AvatarThread extends React.Component {
           needTitle={needTitle}
           {...AvatarProps}
         />
-        {iconName && (
+        {(iconName || getCustomThread) && (
           <span
             className={`${style.thread} ${
               onIconClick ? style.pointer : style.defaultCursor
@@ -64,6 +65,7 @@ export default class AvatarThread extends React.Component {
             data-id={iconTitle === 'Remove Follower' && 'removeFollower'}
             onClick={onIconClick}
           >
+          {iconName &&
             <span className={style.icon}>
               <Icon
                 name={iconName}
@@ -75,6 +77,8 @@ export default class AvatarThread extends React.Component {
                 }
               />
             </span>
+            }
+            {getCustomThread && getCustomThread()}
           </span>
         )}
       </div>
@@ -121,7 +125,8 @@ AvatarThread.propTypes = {
     AvatarThreadProps: PropTypes.object,
     AvatarProps: PropTypes.object
   }),
-  iconClass: PropTypes.string
+  iconClass: PropTypes.string,
+  getCustomThread: PropTypes.func
 };
 
 if (__DOCS__) {

package/src/docs/setupDocs.js

@@ -9,8 +9,6 @@ export { default as HelpTitle__default } from '../setup/helptips/Title/docs/Titl
 export { default as HelpListGroup } from '../setup/helptips/ListGroup/ListGroup';
 export { default as HelpListGroup__default } from '../setup/helptips/ListGroup/docs/ListGroup__default.docs';
 
-// export { default as SelectDropdown } from '../setup/header/SelectDropdown/SelectDropdown';
-// export { default as SelectDropdown__default } from '../setup/header/SelectDropdown/docs/SelectDropdown__default.docs';
 export { default as SetupHeaderViews } from '../setup/header/Views/Views';
 export { default as SetupHeaderViews__default } from '../setup/header/Views/docs/Views__default.docs';
 export { default as SetupHeaderSearch } from '../setup/header/Search/Search';

package/src/form/fields/TextEditor/TextEditor.js

@@ -228,7 +228,7 @@ export default class TextEditor extends Component {
       }
 
       let customFonts= document.createElement('style');
-      customFonts.innerText= `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/3.5/zoho_puvi_regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`
+      customFonts.innerText= `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`
         iframeHead.appendChild(customFonts);
     }
   }

package/src/form/layout/Section/Section.js

@@ -14,18 +14,21 @@ export default class Section extends Component {
       titleClass,
       className,
       column,
-      formName
+      formName,
+      innerContainerClass
     } = this.props;
     return (
       <div data-id={dataId} className={containerClass ? containerClass : ''}>
-        {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
-        <div
-          className={`${className ? className : ''} ${
-            column == 'single' ? style.singleColumn : ''
-          }`}
-          data-id={formName && formName}
-        >
-          {this.props.children}
+        <div className={innerContainerClass ? innerContainerClass : '' }>
+          {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
+          <div
+            className={`${className ? className : ''} ${
+              column == 'single' ? style.singleColumn : ''
+            }`}
+            data-id={formName && formName}
+          >
+            {this.props.children}
+          </div>
         </div>
       </div>
     );
@@ -37,7 +40,8 @@ Section.propTypes = {
   containerClass: PropTypes.string,
   dataId: PropTypes.string,
   title: PropTypes.string,
-  titleClass: PropTypes.string
+  titleClass: PropTypes.string,
+  innerContainerClass: PropTypes.string
 };
 if (__DOCS__) {
   Section.docs = {