@zohodesk/dot 1.9.12 → 1.9.14

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -177,17 +177,11 @@ export class ToggleDropDown extends Component {
 
     if (this.props.from == 'activityFilter') {
       //Temproary
-      const results = this.props.options.filter(_ref => {
-        let {
-          isDisabled: id1
-        } = _ref;
-        return !prevProps.options.some(_ref2 => {
-          let {
-            isDisabled: id2
-          } = _ref2;
-          return id2 === id1;
-        });
-      });
+      const results = this.props.options.filter(({
+        isDisabled: id1
+      }) => !prevProps.options.some(({
+        isDisabled: id2
+      }) => id2 === id1));
 
       if (results.length > 0) {
         this.setState({
@@ -437,8 +431,7 @@ export class ToggleDropDown extends Component {
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
   }
 
-  handleFetchOptions(APICall) {
-    let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchValue = '') {
     let {
       isFetchingOptions = false
     } = this.state;
@@ -469,10 +462,9 @@ export class ToggleDropDown extends Component {
     }
   }
 
-  responsiveFunc(_ref3) {
-    let {
-      mediaQueryOR
-    } = _ref3;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -617,217 +609,137 @@ export class ToggleDropDown extends Component {
     }) : null)))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref4 => {
-      let {
-        tabletMode
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
-        boxPosition: position,
-        isActive: isPopupReady,
-        onClick: removeClose,
-        size: boxSize,
-        right: right,
-        left: left,
-        top: top,
-        bottom: bottom,
-        isArrow: isArrow,
-        isAnimate: true,
-        getRef: getContainerRef,
-        customClass: {
-          customDropBoxWrap: style.dropBoxContainer,
-          customDropBox: customDropBox
-        },
-        needResponsive: needResponsive,
-        isPadding: isPadding,
-        tabindex: "0",
-        a11y: {
-          role: !isSearch ? 'menu' : undefined,
-          ariaLabelledby: !isSearch ? ariaTitleId : undefined
-        },
-        palette: palette,
-        isResponsivePadding: true,
-        needFocusScope: true,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        customProps: {
-          focusScopeProps: {
-            loadNextOptions: this.handleGetNextOptions,
-            searchValue: searchValue,
-            isFetchingOptions: isFetchingOptions
-          }
-        },
-        dataId: `${dataId}_dropbox`
-      }, DropBoxProps, {
-        onClose: this.handleTogglePopup
-      }), /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
-        className: style.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-        placeHolder: placeHolderText,
-        onChange: this.handleChange,
-        value: searchValue,
-        onClear: this.onSearchClear,
-        size: searchBoxSize // inputRef={this.searchInputRef}
-        ,
-        customProps: {
-          TextBoxProps: {
-            'data-a11y-autofocus': true
-          }
-        } //search
-        // onKeyDown={this.handleKeyDown}
-        ,
-        dataId: `${dataId}_search`,
-        a11y: {
-          role: 'combobox',
-          ariaOwns: ariaTitleId,
-          // ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
-          ariaAutocomplete: 'list',
-          ariaHaspopup: true,
-          ariaExpanded: true
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      boxPosition: position,
+      isActive: isPopupReady,
+      onClick: removeClose,
+      size: boxSize,
+      right: right,
+      left: left,
+      top: top,
+      bottom: bottom,
+      isArrow: isArrow,
+      isAnimate: true,
+      getRef: getContainerRef,
+      customClass: {
+        customDropBoxWrap: style.dropBoxContainer,
+        customDropBox: customDropBox
+      },
+      needResponsive: needResponsive,
+      isPadding: isPadding,
+      tabindex: "0",
+      a11y: {
+        role: !isSearch ? 'menu' : undefined,
+        ariaLabelledby: !isSearch ? ariaTitleId : undefined
+      },
+      palette: palette,
+      isResponsivePadding: true,
+      needFocusScope: true,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      customProps: {
+        focusScopeProps: {
+          loadNextOptions: this.handleGetNextOptions,
+          searchValue: searchValue,
+          isFetchingOptions: isFetchingOptions
         }
-      }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
-        className: style.title
+      },
+      dataId: `${dataId}_dropbox`
+    }, DropBoxProps, {
+      onClose: this.handleTogglePopup
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+      className: style.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      placeHolder: placeHolderText,
+      onChange: this.handleChange,
+      value: searchValue,
+      onClear: this.onSearchClear,
+      size: searchBoxSize // inputRef={this.searchInputRef}
+      ,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      } //search
+      // onKeyDown={this.handleKeyDown}
+      ,
+      dataId: `${dataId}_search`,
+      a11y: {
+        role: 'combobox',
+        ariaOwns: ariaTitleId,
+        // ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
+        ariaAutocomplete: 'list',
+        ariaHaspopup: true,
+        ariaExpanded: true
+      }
+    }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+      className: style.title
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: title,
+      htmlId: ariaTitleId,
+      palette: palette,
+      a11y: {
+        role: 'heading'
+      },
+      customClass: style.dropdown
+    })), /*#__PURE__*/React.createElement(Box, {
+      id: ariaTitleId,
+      flexible: true,
+      shrink: true,
+      scroll: "vertical",
+      preventParentScroll: "vertical",
+      dataId: `${dataId}_list`,
+      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
+      eleRef: this.scrollContentRef,
+      onScroll: this.handleScroll,
+      role: isSearch ? 'listbox' : 'menu',
+      "aria-labelledby": isSearch ? ariaTitleId : undefined,
+      "data-scroll": "true"
+    }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map(group => {
+      const groupName = group[groupNameKey];
+      const groupOptions = group[groupOptionsKey];
+      const {
+        needDivider
+      } = group;
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: `index${groupName}`
+      }, needDivider && /*#__PURE__*/React.createElement("div", {
+        className: style.seperatedLine
+      }), groupName && /*#__PURE__*/React.createElement("div", {
+        className: style.groupName
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
-        text: title,
-        htmlId: ariaTitleId,
+        text: groupName,
         palette: palette,
         a11y: {
           role: 'heading'
-        },
-        customClass: style.dropdown
-      })), /*#__PURE__*/React.createElement(Box, {
-        id: ariaTitleId,
-        flexible: true,
-        shrink: true,
-        scroll: "vertical",
-        preventParentScroll: "vertical",
-        dataId: `${dataId}_list`,
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
-        eleRef: this.scrollContentRef,
-        onScroll: this.handleScroll,
-        role: isSearch ? 'listbox' : 'menu',
-        "aria-labelledby": isSearch ? ariaTitleId : undefined,
-        "data-scroll": "true"
-      }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map(group => {
-        const groupName = group[groupNameKey];
-        const groupOptions = group[groupOptionsKey];
-        const {
-          needDivider
-        } = group;
-        return /*#__PURE__*/React.createElement(Fragment, {
-          key: `index${groupName}`
-        }, needDivider && /*#__PURE__*/React.createElement("div", {
-          className: style.seperatedLine
-        }), groupName && /*#__PURE__*/React.createElement("div", {
-          className: style.groupName
-        }, /*#__PURE__*/React.createElement(DropDownHeading, {
-          text: groupName,
-          palette: palette,
-          a11y: {
-            role: 'heading'
-          }
-        })), groupOptions && groupOptions.map(item => {
-          const {
-            iconName,
-            iconSize,
-            iconClass,
-            title,
-            palette: _palette,
-            disableTitle = '',
-            isDisabled = false,
-            secondaryValue
-          } = item;
-          listIndex += 1;
-          return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-            key: listIndex,
-            dataId: item[keyName],
-            value: item[keyName],
-            id: item[idName],
-            active: selectedId === item[idName],
-            onClick: this.onSelect.bind(this, item),
-            index: listIndex // highlight={selectedIndex === listIndex}
-            ,
-            disableTitle: disableTitle,
-            isDisabled: isDisabled,
-            iconName: iconName,
-            iconClass: iconClass,
-            iconSize: iconSize,
-            needTick: needTick,
-            needBorder: false // onMouseEnter={this.handleMouseEnter}
-            ,
-            getRef: this.itemRef,
-            title: title ? title : item[keyName],
-            palette: _palette || palette,
-            needMultiLineText: needMultiLineText,
-            autoHover: true,
-            a11y: {
-              role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName],
-              ariaLabel: item[keyName]
-            },
-            secondaryValue: secondaryValue
-          }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
-            key: listIndex,
-            dataId: item[keyName],
-            value: item[keyName],
-            id: item[idName],
-            active: selectedId === item[idName],
-            onClick: this.onSelect.bind(this, item),
-            isDisabled: isDisabled,
-            disableTitle: disableTitle,
-            index: listIndex // highlight={selectedIndex === listIndex}
-            ,
-            needTick: needTick,
-            needBorder: false // onMouseEnter={this.handleMouseEnter}
-            ,
-            getRef: this.itemRef,
-            title: title ? title : item[keyName],
-            palette: _palette || palette,
-            needMultiLineText: needMultiLineText,
-            autoHover: true,
-            a11y: {
-              role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName],
-              ariaLabel: item[keyName]
-            },
-            secondaryValue: secondaryValue
-          }, ListItemProps));
-        }));
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
+        }
+      })), groupOptions && groupOptions.map(item => {
         const {
           iconName,
           iconSize,
           iconClass,
           title,
           palette: _palette,
-          needDivider,
-          isDisabled = false,
           disableTitle = '',
+          isDisabled = false,
           secondaryValue
         } = item;
-
-        if (!needDivider) {
-          listIndex += 1;
-        }
-
-        return /*#__PURE__*/React.createElement(Fragment, {
-          key: i
-        }, needDivider ? /*#__PURE__*/React.createElement("div", {
-          className: style.seperatedLine
-        }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+        listIndex += 1;
+        return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+          key: listIndex,
           dataId: item[keyName],
           value: item[keyName],
           id: item[idName],
           active: selectedId === item[idName],
           onClick: this.onSelect.bind(this, item),
-          index: listIndex,
-          disableTitle: disableTitle,
-          isDisabled: isDisabled // highlight={selectedIndex === listIndex}
+          index: listIndex // highlight={selectedIndex === listIndex}
           ,
+          disableTitle: disableTitle,
+          isDisabled: isDisabled,
           iconName: iconName,
           iconClass: iconClass,
           iconSize: iconSize,
@@ -836,7 +748,6 @@ export class ToggleDropDown extends Component {
           ,
           getRef: this.itemRef,
           title: title ? title : item[keyName],
-          key: listIndex,
           palette: _palette || palette,
           needMultiLineText: needMultiLineText,
           autoHover: true,
@@ -851,10 +762,10 @@ export class ToggleDropDown extends Component {
           dataId: item[keyName],
           value: item[keyName],
           id: item[idName],
-          disableTitle: disableTitle,
-          isDisabled: isDisabled,
           active: selectedId === item[idName],
           onClick: this.onSelect.bind(this, item),
+          isDisabled: isDisabled,
+          disableTitle: disableTitle,
           index: listIndex // highlight={selectedIndex === listIndex}
           ,
           needTick: needTick,
@@ -871,20 +782,98 @@ export class ToggleDropDown extends Component {
             ariaLabel: item[keyName]
           },
           secondaryValue: secondaryValue
-        }, ListItemProps)));
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(CommonEmptyState, {
-        className: style.svgWrapper,
-        description: searchEmptyHint,
-        title: searchErrorText || 'No results',
-        size: "small",
-        getEmptyState: this.emptySearchSVG
-      }) : /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null));
-    }) : null);
+        }, ListItemProps));
+      }));
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
+      const {
+        iconName,
+        iconSize,
+        iconClass,
+        title,
+        palette: _palette,
+        needDivider,
+        isDisabled = false,
+        disableTitle = '',
+        secondaryValue
+      } = item;
+
+      if (!needDivider) {
+        listIndex += 1;
+      }
+
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: i
+      }, needDivider ? /*#__PURE__*/React.createElement("div", {
+        className: style.seperatedLine
+      }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+        dataId: item[keyName],
+        value: item[keyName],
+        id: item[idName],
+        active: selectedId === item[idName],
+        onClick: this.onSelect.bind(this, item),
+        index: listIndex,
+        disableTitle: disableTitle,
+        isDisabled: isDisabled // highlight={selectedIndex === listIndex}
+        ,
+        iconName: iconName,
+        iconClass: iconClass,
+        iconSize: iconSize,
+        needTick: needTick,
+        needBorder: false // onMouseEnter={this.handleMouseEnter}
+        ,
+        getRef: this.itemRef,
+        title: title ? title : item[keyName],
+        key: listIndex,
+        palette: _palette || palette,
+        needMultiLineText: needMultiLineText,
+        autoHover: true,
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: selectedId === item[idName],
+          ariaLabel: item[keyName]
+        },
+        secondaryValue: secondaryValue
+      }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
+        key: listIndex,
+        dataId: item[keyName],
+        value: item[keyName],
+        id: item[idName],
+        disableTitle: disableTitle,
+        isDisabled: isDisabled,
+        active: selectedId === item[idName],
+        onClick: this.onSelect.bind(this, item),
+        index: listIndex // highlight={selectedIndex === listIndex}
+        ,
+        needTick: needTick,
+        needBorder: false // onMouseEnter={this.handleMouseEnter}
+        ,
+        getRef: this.itemRef,
+        title: title ? title : item[keyName],
+        palette: _palette || palette,
+        needMultiLineText: needMultiLineText,
+        autoHover: true,
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: selectedId === item[idName],
+          ariaLabel: item[keyName]
+        },
+        secondaryValue: secondaryValue
+      }, ListItemProps)));
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(CommonEmptyState, {
+      className: style.svgWrapper,
+      description: searchEmptyHint,
+      title: searchErrorText || 'No results',
+      size: "small",
+      getEmptyState: this.emptySearchSVG
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null))) : null);
   }
 
 }

package/es/errorstate/Inconvenience/Inconvenience.js

@@ -13,10 +13,9 @@ export default class Inconvenience extends React.Component {
     this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tablet: mediaQueryOR([{
         minWidth: 481,
@@ -41,38 +40,35 @@ export default class Inconvenience extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc
-    }, _ref2 => {
-      let {
-        tablet,
-        uptoMobile
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(Container, {
-        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
-        dataId: dataId,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: commonStyle.top
-      }, title ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
-      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
-      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
-      }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
-        isFluid: true,
-        dataId: `${dataId}_svg`
-      })), /*#__PURE__*/React.createElement(Box, {
-        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
-      }, description), /*#__PURE__*/React.createElement(LinkText, {
-        text: urlText,
-        href: url,
-        onClick: onClick,
-        dataId: `${dataId}_link`,
-        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
-      })));
-    });
+    }, ({
+      tablet,
+      uptoMobile
+    }) => /*#__PURE__*/React.createElement(Container, {
+      className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
+      dataId: dataId,
+      scroll: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: commonStyle.top
+    }, title ? /*#__PURE__*/React.createElement("div", {
+      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+    }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
+      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+    }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
+    }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
+      isFluid: true,
+      dataId: `${dataId}_svg`
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+    }, description), /*#__PURE__*/React.createElement(LinkText, {
+      text: urlText,
+      href: url,
+      onClick: onClick,
+      dataId: `${dataId}_link`,
+      customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
+    }))));
   }
 
 }

package/es/errorstate/NoRequestFound/NoRequestFound.js

@@ -13,10 +13,9 @@ export default class NoRequestFound extends React.Component {
     this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tablet: mediaQueryOR([{
         minWidth: 481,
@@ -41,38 +40,35 @@ export default class NoRequestFound extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc
-    }, _ref2 => {
-      let {
-        tablet,
-        uptoMobile
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(Container, {
-        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
-        dataId: dataId,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: commonStyle.top
-      }, title ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
-      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
-      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
-      }, /*#__PURE__*/React.createElement(NoRequestFoundSVG, {
-        isFluid: true,
-        dataId: `${dataId}_svg`
-      })), /*#__PURE__*/React.createElement(Box, {
-        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
-      }, description), /*#__PURE__*/React.createElement(LinkText, {
-        text: urlText,
-        href: url,
-        onClick: onClick,
-        dataId: `${dataId}_link`,
-        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
-      })));
-    });
+    }, ({
+      tablet,
+      uptoMobile
+    }) => /*#__PURE__*/React.createElement(Container, {
+      className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
+      dataId: dataId,
+      scroll: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: commonStyle.top
+    }, title ? /*#__PURE__*/React.createElement("div", {
+      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+    }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
+      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+    }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
+    }, /*#__PURE__*/React.createElement(NoRequestFoundSVG, {
+      isFluid: true,
+      dataId: `${dataId}_svg`
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+    }, description), /*#__PURE__*/React.createElement(LinkText, {
+      text: urlText,
+      href: url,
+      onClick: onClick,
+      dataId: `${dataId}_link`,
+      customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
+    }))));
   }
 
 }