@zohodesk/dot 1.0.0-beta.227 → 1.0.0-beta.229

package/es/list/GridStencils/GridStencils.module.css

@@ -1,10 +1,9 @@
 .stenLoading {
   position: relative;
-  width: var(--zd_size265);
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
-  padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  margin: 0 auto var(--zd_size10) auto;
+  padding: var(--zd_size13) var(--zd_size15) var(--zd_size11) var(--zd_size15);
+  margin-bottom: var(--zd_size10) ;
   border-radius: var(--zd_size5);
 }
 [dir=ltr] .stenLoadbody {
@@ -28,7 +27,6 @@
 [dir=rtl] .stenLoadbody::after {
   left: var(--zd_size20);
 }
-
 .lineBar {
   width: 90%;
 }
@@ -54,14 +52,14 @@
   background-repeat: no-repeat;
 }
 [dir=ltr] .stenListBAr {
-  -webkit-animation-duration:var(--zd_transition10);
+  -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
-  -webkit-animation-duration:var(--zd_transition10);
+  -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
@@ -104,13 +102,11 @@
 [dir=rtl] .threeLayout .stenLoadbody::before {
   right: var(--zd_size16);
 }
-
 [dir=ltr] .threeLayout .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
 }
-
 [dir=rtl] .threeLayout .stenLoadbody {
-  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
+  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20);
 }
 .threeLayout .stenLoadbody::after {
   top: var(--zd_size15);
@@ -122,31 +118,24 @@
 [dir=rtl] .threeLayout .stenLoadbody::after {
   left: var(--zd_size20);
 }
-
 [dir=ltr] .leftCont .stenLoadbody::before {
   left: var(--zd_size33);
 }
-
 [dir=rtl] .leftCont .stenLoadbody::before {
   right: var(--zd_size33);
 }
-
 [dir=ltr] .leftCont .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46);
 }
-
 [dir=rtl] .leftCont .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size46) var(--zd_size8) var(--zd_size20);
 }
-
 [dir=ltr] .leftCont .stenLoadbody::after {
   right: var(--zd_size40);
 }
-
 [dir=rtl] .leftCont .stenLoadbody::after {
   left: var(--zd_size40);
 }
-
 .leftCont .lineBar {
   width: 80%;
 }
@@ -155,4 +144,4 @@
 }
 .leftCont .lineBar3 {
   width: 40%;
-}
+}

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import { Box, Container } from '@zohodesk/components/lib/Layout';
 import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
@@ -13,6 +12,8 @@ import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/lib/common/common.module.css';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 import style from './StatusDropdown.module.css';
@@ -247,6 +248,17 @@ export class StatusDropdown extends React.Component {
     }
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       options,
@@ -336,85 +348,96 @@ export class StatusDropdown extends React.Component {
       name: "ZD-down",
       iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
       dataId: "statusdownarrow"
-    }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(DropBox, {
-      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
-      },
-      needResponsive: needResponsive
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement("div", {
-      className: style.search
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      placeHolder: placeHolderText,
-      onChange: this.handleChange,
-      value: searchString,
-      onClear: this.onSearchClear,
-      size: searchBoxSize,
-      inputRef: this.searchInputRef,
-      onKeyDown: this.handleKeyDown,
-      a11y: {
-        ariaHaspopup: true,
-        ariaExpanded: true,
-        role: 'combobox',
-        ariaActivedescendant: value,
-        ariaOwns: ariaTitleId
-      }
-    })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement("div", {
-      className: style.title
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      htmlId: ariaTitleId,
-      text: title,
-      a11y: {
-        role: 'heading'
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      scroll: "vertical",
-      dataId: `${dataId}_list`,
-      className: style.maxHgt,
-      eleRef: this.scrollContentRef,
-      onScroll: this.handleScroll,
-      role: isSearch ? 'listbox' : 'menu',
-      "aria-labelledby": ariaTitleId,
-      tabindex: "0"
-    }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
-      key: i
-    }, /*#__PURE__*/React.createElement(StatusListItem, {
-      dataId: `dataid_${i}`,
-      value: item[keyName],
-      id: item[idName],
-      active: value === item[keyName],
-      onClick: this.onSelect.bind(this, item),
-      index: i,
-      highlight: selectedIndex === i,
-      needTick: needTick,
-      needBorder: false,
-      onMouseEnter: this.handleMouseEnter,
-      getRef: this.itemRef,
-      bulletColor: item[statusColor],
-      title: item[keyName],
-      a11y: {
-        role: isSearch ? 'option' : 'menuitem',
-        ariaSelected: value === item[keyName]
-      }
-    })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
-      className: style.svgWrapper,
-      title: searchErrorText || 'No results',
-      description: searchEmptyHint,
-      size: "small",
-      getEmptyState: this.emptySearchSVG
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null))))) : null);
+    }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        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
+        },
+        needResponsive: needResponsive,
+        isResponsivePadding: true
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: style.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchString,
+        onClear: this.onSearchClear,
+        size: searchBoxSize,
+        inputRef: this.searchInputRef,
+        onKeyDown: this.handleKeyDown,
+        a11y: {
+          ariaHaspopup: true,
+          ariaExpanded: true,
+          role: 'combobox',
+          ariaActivedescendant: value,
+          ariaOwns: ariaTitleId
+        }
+      })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+        className: style.title
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        htmlId: ariaTitleId,
+        text: title,
+        a11y: {
+          role: 'heading'
+        }
+      })), /*#__PURE__*/React.createElement(Box, {
+        scroll: "vertical",
+        flexible: true,
+        shrink: true,
+        dataId: `${dataId}_list`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        eleRef: this.scrollContentRef,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : 'menu',
+        "aria-labelledby": ariaTitleId,
+        tabindex: "0"
+      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+        key: i
+      }, /*#__PURE__*/React.createElement(StatusListItem, {
+        dataId: `dataid_${i}`,
+        value: item[keyName],
+        id: item[idName],
+        active: value === item[keyName],
+        onClick: this.onSelect.bind(this, item),
+        index: i,
+        highlight: selectedIndex === i,
+        needTick: needTick,
+        needBorder: false,
+        onMouseEnter: this.handleMouseEnter,
+        getRef: this.itemRef,
+        bulletColor: item[statusColor],
+        title: item[keyName],
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: value === item[keyName]
+        }
+      })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+        className: style.svgWrapper,
+        title: searchErrorText || 'No results',
+        description: searchEmptyHint,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)))));
+    }) : null);
   }
 
 }

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -8,6 +8,9 @@
   max-height: var(--zd_size265);
   padding: var(--zd_size10) 0;
 }
+.responsivemaxHgt{
+  padding: var(--zd_size10) 0 0;
+}
 .title {
   padding-top: var(--zd_size6);
 }

package/es/lookup/header/ViewDropDown/ViewDropDown.js

@@ -5,14 +5,15 @@ import PropTypes from 'prop-types';
 
 import { SelectComponent } from '@zohodesk/components/lib/Select/Select';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
 import DropDownSearch from '@zohodesk/components/lib/DropDown/DropDownSearch';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 /**** Icons ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import style from './ViewDropDown.module.css';
 /* eslint-disable react/forbid-component-props */
@@ -37,6 +38,17 @@ class DropDown extends SelectComponent {
     }
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     var _this = this;
 
@@ -80,58 +92,71 @@ class DropDown extends SelectComponent {
       name: "ZD-down",
       size: "7",
       iconClass: style.arrowIcon
-    }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
-      isAnimate: true,
-      isArrow: false,
-      isActive: isPopupReady,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
-      getRef: getContainerRef,
-      onClick: removeClose,
-      animationStyle: animationStyle,
-      size: "large"
-    }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
-      value: searchStr,
-      onChange: this.handleSearch,
-      onKeyDown: this.onSearchKeyDown,
-      getRef: this.searchInputRef,
-      size: searchBoxSize,
-      variant: searchBoxVariant,
-      placeHolder: searchBoxPlaceHolder,
-      maxLength: maxLength
-    })) : null, /*#__PURE__*/React.createElement(CardContent, {
-      eleRef: this.suggestionContainerRef,
-      customClass: dropBoxSize ? style[dropBoxSize] : ''
-    }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
-      className: style.listItemContainer
-    }, suggestions.map(function () {
-      let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      let index = arguments.length > 1 ? arguments[1] : undefined;
-      const {
-        id,
-        value
-      } = option;
-      return /*#__PURE__*/React.createElement(ListItem, {
-        active: id === selectedId,
-        getRef: _this.suggestionItemRef,
-        highlight: hoverIndex === index ? true : false,
-        id: id,
-        key: `${id}dropDown`,
-        onClick: _this.handleChange,
-        onMouseEnter: _this.handleMouseEnter,
-        size: "medium",
-        value: value,
-        index: index,
-        needTick: true,
-        needBorder: false
-      });
-    })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
-      className: style.emptyState
-    }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
-      className: style.emptyState
-    }, emptyMessage)))) : null);
+    }))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        isAnimate: true,
+        isArrow: false,
+        isActive: isPopupReady,
+        boxPosition: position || `${defaultDropBoxPosition}Center`,
+        getRef: getContainerRef,
+        onClick: removeClose,
+        animationStyle: animationStyle,
+        size: "large",
+        alignBox: "row",
+        isResponsivePadding: true
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
+        value: searchStr,
+        onChange: this.handleSearch,
+        onKeyDown: this.onSearchKeyDown,
+        getRef: this.searchInputRef,
+        size: searchBoxSize,
+        variant: searchBoxVariant,
+        placeHolder: searchBoxPlaceHolder,
+        maxLength: maxLength
+      })) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
+        eleRef: this.suggestionContainerRef,
+        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
+      }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
+        className: style.listItemContainer
+      }, suggestions.map(function () {
+        let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        let index = arguments.length > 1 ? arguments[1] : undefined;
+        const {
+          id,
+          value
+        } = option;
+        return /*#__PURE__*/React.createElement(ListItem, {
+          active: id === selectedId,
+          getRef: _this.suggestionItemRef,
+          highlight: hoverIndex === index ? true : false,
+          id: id,
+          key: `${id}dropDown`,
+          onClick: _this.handleChange,
+          onMouseEnter: _this.handleMouseEnter,
+          size: "medium",
+          value: value,
+          index: index,
+          needTick: true,
+          needBorder: false
+        });
+      })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
+        className: style.emptyState
+      }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
+        className: style.emptyState
+      }, emptyMessage)))));
+    }) : null);
   }
 
 }

package/lib/ActionButton/ActionButton.js

@@ -19,7 +19,7 @@ var _Button = _interopRequireDefault(require("@zohodesk/components/lib/Button/Bu
 
 var _Layout = require("@zohodesk/components/lib/Layout");
 
-var _DropBox = _interopRequireDefault(require("@zohodesk/components/lib/DropBox/DropBox"));
+var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
 
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/lib/Provider/CssProvider"));
 
@@ -154,7 +154,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         name: "ZD-down",
         size: "6",
         iconClass: _ActionButtonModule["default"].arrow
-      })), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      })), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
         size: "small",
         isActive: isPopupOpen,
         boxPosition: position,
@@ -165,7 +165,11 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         },
         isBoxPaddingNeed: isBoxPaddingNeed,
         getRef: getContainerRef
-      }, children) : null) : null));
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        shrink: true,
+        scroll: "vertical"
+      }, children)) : null) : null));
     }
   }]);
 

package/lib/Provider.js

@@ -19,6 +19,8 @@ var _LibraryContextInit = _interopRequireDefault(require("@zohodesk/components/l
 
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
+var _ThemeTool = _interopRequireDefault(require("../../common/lib/ThemeTool/ThemeTool"));
+
 var _i18n2 = _interopRequireDefault(require("./i18n"));
 
 require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
@@ -209,6 +211,7 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       themeName: 'blue'
     };
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
+    _this.setAppearance = _this.setAppearance.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -229,56 +232,9 @@ var Provider = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$state = this.state,
           appearanceName = _this$state.appearanceName,
           themeName = _this$state.themeName;
-      var themeClass = {
-        width: '20px',
-        height: '20px',
-        borderRadius: '3px',
-        display: 'flex',
-        border: '1px solid #ccc',
-        margin: '0 5px',
-        cursor: 'pointer',
-        backgroundColor: '#0a73eb'
-      };
-      var green = {
-        backgroundColor: '#26a942'
-      };
-      var red = {
-        backgroundColor: '#de3535'
-      };
-      var orange = {
-        backgroundColor: '#e57717'
-      };
-      var yellow = {
-        backgroundColor: '#e8b923'
-      };
-      var light = {
-        backgroundColor: '#fff'
-      };
-      var night = {
-        backgroundColor: '#232b38'
-      };
-      var dark = {
-        backgroundColor: '#212121'
-      };
-      var fixedPosition = {
-        position: 'fixed',
-        bottom: '0',
-        backgroundColor: '#272727',
-        padding: '10px',
-        borderRadius: '15px 15px 0 0',
-        minWidth: '100px',
-        textAlign: 'center',
-        boxShadow: '0 0 3px #000',
-        fontSize: '12px',
-        zIndex: '3',
-        display: 'flex',
-        alignItems: 'center'
-      };
       return /*#__PURE__*/_react["default"].createElement(_i18n.I18NProvider, {
         i18n: _i18n2["default"],
         timeZone: "Asia/Kolkata",
@@ -300,81 +256,10 @@ var Provider = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
-      }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
-        style: Object.assign({}, fixedPosition, {
-          left: '20%',
-          transform: 'translate(-20%)'
-        })
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          color: '#fff'
-        }
-      }, "Appearance:"), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Light Mode",
-        style: Object.assign({}, themeClass, light),
-        onClick: function onClick() {
-          return _this2.setAppearance('default');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Night Mode",
-        style: Object.assign({}, themeClass, night),
-        onClick: function onClick() {
-          return _this2.setAppearance('dark');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Dark Mode",
-        style: Object.assign({}, themeClass, dark),
-        onClick: function onClick() {
-          return _this2.setAppearance('pureDark');
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        style: Object.assign({}, fixedPosition, {
-          left: '80%',
-          transform: 'translate(-80%)'
-        })
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          color: '#fff'
-        }
-      }, "Themes:"), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Blue Theme",
-        style: themeClass,
-        onClick: function onClick() {
-          return _this2.setTheme('blue');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Green Theme",
-        style: Object.assign({}, themeClass, green),
-        onClick: function onClick() {
-          return _this2.setTheme('green');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Red Theme",
-        style: Object.assign({}, themeClass, red),
-        onClick: function onClick() {
-          return _this2.setTheme('red');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Orange Theme",
-        style: Object.assign({}, themeClass, orange),
-        onClick: function onClick() {
-          return _this2.setTheme('orange');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Yellow Theme",
-        style: Object.assign({}, themeClass, yellow),
-        onClick: function onClick() {
-          return _this2.setTheme('yellow');
-        }
-      }))))));
+      }, this.props.children), /*#__PURE__*/_react["default"].createElement(_ThemeTool["default"], {
+        onThemeChange: this.setTheme,
+        onAppearanceChange: this.setAppearance
+      }))));
     }
   }]);