@zohodesk/dot 1.0.0-temp.93 → 1.0.0-test.113

package/es/Drawer/Drawer.js

@@ -1,15 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
+import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
 import FreezeLayer from '../FreezeLayer/FreezeLayer';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 import FormAction from '../FormAction/FormAction';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Heading from '@zohodesk/components/lib/Heading/Heading';
 import IconButton from '../IconButton/IconButton';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
+import FocusScope from "@zohodesk/a11y/es/FocusScope/FocusScope";
 export class Header extends React.Component {
   render() {
     let {
@@ -66,46 +69,32 @@ export class Header extends React.Component {
       alignBox: "row",
       align: "vertical"
     }, title ? /*#__PURE__*/React.createElement(Box, {
-      className: style.title,
       "data-title": title,
       shrink: true
-    }, title) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(Heading, {
+      title: title,
+      className: style.title,
+      a11y: {
+        tabindex: '0'
+      }
+    })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
       onClick: onClose,
       dataId: "closeButton",
       title: closeTitle,
       iconName: "ZD-cross",
-      iconSize: "11"
+      iconSize: "11",
+      a11y: {
+        ariaLabel: 'Close'
+      }
     })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
       isCover: false
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, getChildren())) : null);
   }
-
 }
-Header.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  flexible: PropTypes.bool,
-  getChildren: PropTypes.func,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  iconTitle: PropTypes.string,
-  isIconBold: PropTypes.bool,
-  onClose: PropTypes.func,
-  onIconClick: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  title: PropTypes.string,
-  isBoxIcon: PropTypes.bool,
-  getTitleChildren: PropTypes.func
-};
-Header.defaultProps = {
-  flexible: false,
-  paddingSize: 'small',
-  isBoxIcon: true
-};
+Header.propTypes = Header_propTypes;
+Header.defaultProps = Header_defaultProps;
 export class Content extends React.Component {
   render() {
     let {
@@ -121,14 +110,8 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
-
 }
-Content.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  eleRef: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large'])
-};
+Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
   render() {
     let {
@@ -143,25 +126,17 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
-
 }
-Footer.propTypes = {
-  children: PropTypes.node,
-  paddingLeftSize: PropTypes.string,
-  paddingRightClass: PropTypes.string,
-  size: PropTypes.string
-};
-Footer.defaultProps = {
-  size: 'small'
-};
+Footer.propTypes = Footer_propTypes;
+Footer.defaultProps = Footer_defaultProps;
 export default class Drawer extends React.Component {
   constructor(props) {
     super(props);
     this.drawers = this.drawers.bind(this);
     this.responsiveFunc = this.responsiveFunc.bind(this);
     this.getNextIndex = getZIndex(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
-
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -169,7 +144,9 @@ export default class Drawer extends React.Component {
       paddingSize,
       subDrawerActive,
       subDrawerChildren,
-      onBodyClick
+      onBodyClick,
+      onClose,
+      needFocusScope
     } = this.props;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {
@@ -180,9 +157,19 @@ export default class Drawer extends React.Component {
           paddingSize: childPaddingSize ? childPaddingSize : paddingSize
         }) : child;
       }
-
       return child;
     });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-container-focus": false,
+      tabindex: -1,
+      eleRef: this.createRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
     return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
       className: style.columns
     }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
@@ -195,16 +182,14 @@ export default class Drawer extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`
-    }, /*#__PURE__*/React.createElement(Card, {
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-        onBodyClick(e);
-      }
-    }, childrenWithProps)));
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: this.createRef,
+      autoFocus: true,
+      focusTabLoop: true,
+      restoreFocus: true,
+      focusClose: onClose
+    }, content) : content);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -215,7 +200,6 @@ export default class Drawer extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       needFreeze,
@@ -274,39 +258,9 @@ export default class Drawer extends React.Component {
       }, this.drawers(uptoTablet, styleByResolutions)));
     });
   }
-
 }
-Drawer.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  needAutoZindex: PropTypes.bool,
-  needFreeze: PropTypes.bool,
-  onBodyClick: PropTypes.func,
-  onClose: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain']),
-  responsiveId: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default']),
-  subDrawerActive: PropTypes.bool,
-  subDrawerChildren: PropTypes.func,
-  subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
-};
-Drawer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  responsiveId: 'Helmet',
-  size: 'small',
-  subDrawerSize: 'small',
-  subDrawerActive: false,
-  subDrawerClass: '',
-  customClass: '',
-  needAutoZindex: true,
-  onBodyClick: () => {}
-};
-
+Drawer.propTypes = Drawer_propTypes;
+Drawer.defaultProps = Drawer_defaultProps;
 if (false) {
   Drawer.docs = {
     componentGroup: 'Template'

package/es/Drawer/Drawer.module.css

@@ -1,15 +1,20 @@
 .container {
+  transition: width var(--zd_transition3);
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
   background-color: var(--zdt_drawer_default_bg);
-  transition: width var(--zd_transition3);
 }
 .isOverlay {
-  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
+[dir=ltr] .isOverlay {
+  right: 0;
+}
+[dir=rtl] .isOverlay {
+  left: 0;
+}
 .columns {
   pointer-events: initial;
 }
@@ -21,17 +26,28 @@
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
 }
 .secondMobDrawer {
-  right: 0;
   position: absolute;
   top: 0;
   z-index: 1;
 }
+[dir=ltr] .secondMobDrawer {
+  right: 0;
+}
+[dir=rtl] .secondMobDrawer {
+  left: 0;
+}
 .mobModal {
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
+}
+[dir=ltr] .mobModal {
+  right: 0;
+  left: 0;
+}
+[dir=rtl] .mobModal {
   left: 0;
+  right: 0;
 }
 .xsmall {
   width: var(--zd_size360);
@@ -72,32 +88,64 @@
   color: var( --zdt_drawer_title_text);
   font: var(--zd_font_size16) var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .title {
   padding: 0 var(--zd_size10) 0 0;
 }
-.smallHeaderPadding {
+[dir=rtl] .title {
+  padding: 0 0 0 var(--zd_size10);
+}
+[dir=ltr] .smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
-.smallContentPadding {
+[dir=rtl] .smallHeaderPadding {
+  padding-left: var(--zd_size11);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-.mediumHeaderPadding {
+[dir=rtl] .smallContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .mediumHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size30);
 }
-.mediumContentPadding {
+[dir=rtl] .mediumHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .mediumContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-.largeHeaderPadding {
+[dir=rtl] .mediumContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .largeHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size50);
 }
-.largeContentPadding {
+[dir=rtl] .largeHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .largeContentPadding {
   padding-left: var(--zd_size50);
   padding-right: var(--zd_size50);
 }
-.iconWrapper {
+[dir=rtl] .largeContentPadding {
+  padding-right: var(--zd_size50);
+  padding-left: var(--zd_size50);
+}
+[dir=ltr] .iconWrapper {
   margin-right: var(--zd_size10);
 }
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10);
+}

package/es/Drawer/props/defaultProps.js

@@ -0,0 +1,21 @@
+export const Header_defaultProps = {
+  flexible: false,
+  paddingSize: 'small',
+  isBoxIcon: true
+};
+export const Footer_defaultProps = {
+  size: 'small'
+};
+export const Drawer_defaultProps = {
+  isActive: false,
+  palette: 'default',
+  responsiveId: 'Helmet',
+  size: 'small',
+  subDrawerSize: 'small',
+  subDrawerActive: false,
+  subDrawerClass: '',
+  customClass: '',
+  needAutoZindex: true,
+  onBodyClick: () => {},
+  needFocusScope: false
+};

package/es/Drawer/props/propTypes.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+export const Header_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  closeTitle: PropTypes.string,
+  dataId: PropTypes.string,
+  flexible: PropTypes.bool,
+  getChildren: PropTypes.func,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  iconTitle: PropTypes.string,
+  isIconBold: PropTypes.bool,
+  onClose: PropTypes.func,
+  onIconClick: PropTypes.func,
+  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  title: PropTypes.string,
+  isBoxIcon: PropTypes.bool,
+  getTitleChildren: PropTypes.func
+};
+export const Content_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  eleRef: PropTypes.func,
+  paddingSize: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+export const Footer_propTypes = {
+  children: PropTypes.node,
+  paddingLeftSize: PropTypes.string,
+  paddingRightClass: PropTypes.string,
+  size: PropTypes.string
+};
+export const Drawer_propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  forwardRef: PropTypes.object,
+  isActive: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
+  needFreeze: PropTypes.bool,
+  onBodyClick: PropTypes.func,
+  onClose: PropTypes.func,
+  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain']),
+  responsiveId: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default']),
+  subDrawerActive: PropTypes.bool,
+  subDrawerChildren: PropTypes.func,
+  subDrawerClass: PropTypes.string,
+  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
+  needFocusScope: PropTypes.bool
+};

package/es/ExternalLink/ExternalLink.js

@@ -1,22 +1,19 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
-/**** CSS ****/
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 
+/**** CSS ****/
 import style from './ExternalLink.module.css';
 export default class ExternalLink extends React.Component {
   addHttp(url) {
     const regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
-
     if (!regEx.test(url)) {
       return `http://${url}`;
     }
-
     return url;
   }
-
   render() {
     const {
       href,
@@ -40,25 +37,9 @@ export default class ExternalLink extends React.Component {
       onClick: onClick
     }, customProps), children);
   }
-
 }
-ExternalLink.defaultProps = {
-  rel: 'noopener noreferrer',
-  target: '_blank',
-  customProps: {}
-};
-ExternalLink.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  href: PropTypes.string,
-  rel: PropTypes.string,
-  target: PropTypes.oneOf(['_blank', '_self']),
-  title: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.object
-};
-
+ExternalLink.defaultProps = defaultProps;
+ExternalLink.propTypes = propTypes;
 if (false) {
   ExternalLink.docs = {
     componentGroup: 'Atom'

package/es/ExternalLink/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  rel: 'noopener noreferrer',
+  target: '_blank',
+  customProps: {}
+};

package/es/ExternalLink/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  href: PropTypes.string,
+  rel: PropTypes.string,
+  target: PropTypes.oneOf(['_blank', '_self']),
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
+};

package/es/FlipCard/FlipCard.js

@@ -1,7 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import AvatarUser from '../avatar/AvatarUser/AvatarUser';
 import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
@@ -16,17 +16,14 @@ export default class FlipCard extends Component {
     this.onChange = this.onChange.bind(this);
     this.onClick = this.onClick.bind(this);
   }
-
   onClick(e) {
     let {
       noNeedFlip
     } = this.props;
-
     if (!noNeedFlip) {
       stopBubbling(e);
     }
   }
-
   onChange(isChecked, e) {
     let {
       onChange
@@ -37,7 +34,6 @@ export default class FlipCard extends Component {
     } = this.props;
     onChange(id, isChecked, e);
   }
-
   render() {
     let {
       id,
@@ -132,50 +128,9 @@ export default class FlipCard extends Component {
       customTextClass: customTextClass
     }, AvatarUserProps)))));
   }
-
 }
-FlipCard.propTypes = {
-  action: PropTypes.string,
-  channel: PropTypes.string,
-  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  className: PropTypes.string,
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  frontClass: PropTypes.string,
-  icon: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconColor: PropTypes.string,
-  iconSize: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  initial: PropTypes.string,
-  isChecked: PropTypes.bool,
-  isFilledCheckbox: PropTypes.bool,
-  isPaidUser: PropTypes.bool,
-  isPortalUser: PropTypes.bool,
-  name: PropTypes.string,
-  needTitle: PropTypes.bool,
-  noNeedFlip: PropTypes.bool,
-  onChange: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  src: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  ticList: PropTypes.string,
-  ticListContainer: PropTypes.string,
-  tourId: PropTypes.string,
-  customProps: PropTypes.shape({
-    CheckBoxProps: PropTypes.object,
-    ChannelIconProps: PropTypes.object,
-    AvatarIconProps: PropTypes.object,
-    AvatarUserProps: PropTypes.object
-  })
-};
-FlipCard.defaultProps = {
-  size: 'medium',
-  needTitle: true,
-  customProps: {}
-};
-
+FlipCard.propTypes = propTypes;
+FlipCard.defaultProps = defaultProps;
 if (false) {
   FlipCard.docs = {
     componentGroup: 'Molecule'

package/es/FlipCard/FlipCard.module.css

@@ -1,7 +1,8 @@
 .flip,
 .flipNone {
-  background-color: var(--zdt_flipcard_default_bg);
   color: var(--zdt_flipcard_default_text);
+}.flip, .flipNone {
+  background-color: var(--zdt_flipcard_default_bg);
 }
 .container {
   position: relative;
@@ -20,16 +21,24 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
-.front {
+[dir=ltr] .front {
   transform: rotateY(180deg) perspective(1px);
 }
+[dir=rtl] .front {
+  transform: rotateY(-180deg) perspective(1px);
+}
 .back {
   transform: rotateY(0deg) perspective(1px);
 }
-.notFlip .container {
+[dir=ltr] .notFlip .container {
   transform: rotateY(180deg);
 }
-.flip:hover .container,
-.hoverContainer:hover .container {
+[dir=rtl] .notFlip .container {
+  transform: rotateY(-180deg);
+}
+[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
   transform: rotateY(180deg);
 }
+[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
+  transform: rotateY(-180deg);
+}

package/es/FlipCard/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  size: 'medium',
+  needTitle: true,
+  customProps: {}
+};

package/es/FlipCard/props/propTypes.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  action: PropTypes.string,
+  channel: PropTypes.string,
+  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  className: PropTypes.string,
+  customTextClass: PropTypes.string,
+  dataId: PropTypes.string,
+  frontClass: PropTypes.string,
+  icon: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconColor: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  initial: PropTypes.string,
+  isChecked: PropTypes.bool,
+  isFilledCheckbox: PropTypes.bool,
+  isPaidUser: PropTypes.bool,
+  isPortalUser: PropTypes.bool,
+  name: PropTypes.string,
+  needTitle: PropTypes.bool,
+  noNeedFlip: PropTypes.bool,
+  onChange: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  size: PropTypes.string,
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  ticList: PropTypes.string,
+  ticListContainer: PropTypes.string,
+  tourId: PropTypes.string,
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    ChannelIconProps: PropTypes.object,
+    AvatarIconProps: PropTypes.object,
+    AvatarUserProps: PropTypes.object
+  })
+};