@zohodesk/dot 1.0.0-temp-85 → 1.0.0-temp-88

package/es/ActionButton/ActionButton.js

@@ -4,7 +4,7 @@ import Popup from '@zohodesk/components/lib/Popup/Popup';
 import Icon from '@zohodesk/icons/lib/Icon';
 import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
 import style from './ActionButton.module.css';
 export class ActionButton extends React.Component {
@@ -104,7 +104,7 @@ export class ActionButton extends React.Component {
       name: "ZD-down",
       size: "6",
       iconClass: style.arrow
-    })), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
       size: "small",
       isActive: isPopupOpen,
       boxPosition: position,
@@ -115,7 +115,11 @@ export class ActionButton extends React.Component {
       },
       isBoxPaddingNeed: isBoxPaddingNeed,
       getRef: getContainerRef
-    }, children) : null) : null));
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      scroll: "vertical"
+    }, children)) : null) : null));
   }
 
 }

package/es/ActionButton/docs/ActionButton__default.docs.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import ActionButton from '../ActionButton';
+export default class ActionButton__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "small"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "medium"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "large"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "large",
+      isLoading: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "large",
+      isLoading: true,
+      palette: "primary"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropdownChildren: 'children',
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropBoxPosition: "bottomRight",
+      size: "small"
+    }, "children")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      onHover: true
+    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      onHover: true
+    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      dropBoxPosition: "bottomRight",
+      size: "small"
+    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Comment",
+      subText: "Public"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      palette: "primary"
+    }, "children")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px'
+      }
+    }));
+  }
+
+}
+ActionButton__default.docs = {
+  componentGroup: 'Atom'
+};

package/es/AlphabeticList/docs/AlphabeticList__default.docs.js

@@ -0,0 +1,34 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import AlphabeticList from '../AlphabeticList';
+export default class AlphabeticList__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCharacter: 'C'
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(selectedCharacter) {
+    this.setState({
+      selectedCharacter
+    });
+  }
+
+  render() {
+    let {
+      selectedCharacter
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlphabeticList, {
+      selectedCharacter: selectedCharacter,
+      onSelect: this.handleSelect
+    }));
+  }
+
+}
+AlphabeticList__default.docs = {
+  componentGroup: 'Atom'
+};

package/es/AlphabeticList/docs/AlphabeticList__horizontal.docs.js

@@ -0,0 +1,43 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import AlphabeticList from '../AlphabeticList';
+export default class AlphabeticList__horizontal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCharacter: 'C'
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(selectedCharacter) {
+    this.setState({
+      selectedCharacter
+    });
+  }
+
+  render() {
+    let {
+      selectedCharacter
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlphabeticList, {
+      selectedCharacter: selectedCharacter,
+      onSelect: this.handleSelect,
+      align: "horizontal"
+    }), /*#__PURE__*/React.createElement(AlphabeticList, {
+      type: "numerals",
+      selectedCharacter: selectedCharacter,
+      onSelect: this.handleSelect,
+      align: "horizontal"
+    }));
+  }
+
+}
+
+if (false) {
+  AlphabeticList__horizontal.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Attachment/docs/Attachment__default.docs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Attachment from '../Attachment';
+export default class Attachment__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      fileInfo: "2 days ago"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture"
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small",
+      fileInfo: "15 days ago"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small"
+    }));
+  }
+
+}
+
+if (false) {
+  Attachment__default.docs = {
+    componentGroup: 'Attachment'
+  };
+}

package/es/AttachmentViewer/docs/AttachmentViewer__default.docs.js

@@ -0,0 +1,70 @@
+import React, { Component } from "react";
+import AttachmentViewer from "../AttachmentViewer";
+export default class AttachmentViewer__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(AttachmentViewer, {
+      isActive: true,
+      hideAttachmentViewer: () => {},
+      previewObj: {
+        previewData: [{
+          id: "1",
+          name: "slack0.jpg",
+          size: "100412",
+          href: "https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG",
+          viewUrl: "https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG",
+          downloadUrl: "https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
+        }, {
+          id: "2",
+          name: "slack1.jpg",
+          size: "100412",
+          href: "https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg",
+          viewUrl: "https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg",
+          downloadUrl: "https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg"
+        }, {
+          id: "3",
+          name: "slack2.jpg",
+          size: "100412",
+          href: "https://wallpapercave.com/wp/wp3913900.jpg",
+          viewUrl: "https://wallpapercave.com/wp/wp3913900.jpg",
+          downloadUrl: "https://wallpapercave.com/wp/wp3913900.jpg"
+        }, {
+          id: "4",
+          name: "slack3.jpg",
+          size: "100412",
+          href: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          viewUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          downloadUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg"
+        }, {
+          id: "5",
+          name: "slack4.jpg",
+          size: "100412",
+          href: "https://wallpapercave.com/wp/wp3913900.jpg",
+          viewUrl: "https://wallpapercave.com/wp/wp3913900.jpg",
+          downloadUrl: "https://wallpapercave.com/wp/wp3913900.jpg"
+        }, {
+          id: "6",
+          name: "slack5.jpg",
+          size: "100412",
+          href: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          viewUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          downloadUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg"
+        }, {
+          id: "6",
+          name: "slack5.mp3",
+          size: "100412",
+          href: "https://www.w3schools.com/html/horse.mp3",
+          viewUrl: "https://www.w3schools.com/html/horse.mp3",
+          downloadUrl: "https://www.w3schools.com/html/horse.mp3"
+        }],
+        selectedIndex: 0
+      }
+    });
+  }
+
+}
+
+if (false) {
+  AttachmentViewer__default.docs = {
+    componentGroup: "Molecule"
+  };
+}

package/es/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import ChannelIcon from '../ChannelIcon';
+import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class ChannelIcon__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let boxStyle = {},
+        style = {
+      border: '1px solid #c3c1c1',
+      padding: '10px',
+      margin: '1px 10px',
+      textAlign: 'center'
+    },
+        titleStyle = {
+      'font-size': '13px',
+      'padding-bottom': '5px',
+      'border-bottom': '1px solid #c3c1c1',
+      margin: '10px 0 5px',
+      textAlign: 'center'
+    };
+    let channels = getChannelMappingObj();
+    return /*#__PURE__*/React.createElement(Container, null, Object.keys(channels).map((item, i) => /*#__PURE__*/React.createElement(Box, {
+      key: i,
+      scroll: "none",
+      style: {
+        padding: '5px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: titleStyle
+    }, item), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      wrap: "wrap"
+    }, Object.keys(channels[item]).map((channel, j) => /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: style,
+      key: j
+    }, /*#__PURE__*/React.createElement("h6", null, channel), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChannelIcon, {
+      name: item,
+      action: channel,
+      iconSize: "21",
+      size: "medium"
+    }))))))), /*#__PURE__*/React.createElement("br", null));
+  }
+
+}
+
+if (false) {
+  ChannelIcon__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Drawer/docs/Drawer__default.docs.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import Drawer, { Header, Content, Footer } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+export default class Drawer__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      size: 'xsmall'
+    };
+    this.onClose = this.onClose.bind(this);
+    this.getFooter = this.getFooter.bind();
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("p", null, "getChildren");
+  }
+
+  render() {
+    let {
+      isActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: false,
+      paddingSize: "small",
+      size: size
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "Add Component",
+      onClose: this.onClose,
+      iconName: "ZD-zdDuetimeQueueNew",
+      iconSize: "15",
+      align: "column",
+      getChildren: this.getFooter
+    }, /*#__PURE__*/React.createElement("span", null, "children")), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "small",
+      onClick: this.changeSize.bind(this, 'small')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xsmall",
+      onClick: this.changeSize.bind(this, 'xsmall')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "medium",
+      onClick: this.changeSize.bind(this, 'medium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xmedium",
+      onClick: this.changeSize.bind(this, 'xmedium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "large",
+      onClick: this.changeSize.bind(this, 'large')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xlarge",
+      onClick: this.changeSize.bind(this, 'xlarge')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xxlarge",
+      onClick: this.changeSize.bind(this, 'xxlarge')
+    })), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Button, {
+      text: "Save",
+      palette: "primaryFilled"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "Cancel",
+      palette: "secondary"
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import Drawer, { Header, Content } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+export default class Drawer__multiDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      subDrawerActive: true,
+      size: 'xsmall'
+    };
+    this.onClose = this.onClose.bind(this);
+    this.openSecondDrawer = this.openSecondDrawer.bind(this);
+    this.closeDrawers = this.closeDrawers.bind(this);
+    this.closeSubDrawer = this.closeSubDrawer.bind(this);
+    this.subDrawerChildren = this.subDrawerChildren.bind(this);
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  openSecondDrawer() {
+    this.setState({
+      subDrawerActive: true
+    });
+  }
+
+  closeDrawers() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  closeSubDrawer() {
+    this.setState({
+      subDrawerActive: false
+    });
+  }
+
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  subDrawerChildren() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+      title: "Second Drawer",
+      onClose: this.closeSubDrawer
+    }), /*#__PURE__*/React.createElement(Content, {
+      paddingSize: "small"
+    }, /*#__PURE__*/React.createElement("div", null, "Hi, I am Second Drawer Content Area")));
+  }
+
+  render() {
+    let {
+      isActive,
+      subDrawerActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: true,
+      paddingSize: "small",
+      subDrawerActive: subDrawerActive,
+      subDrawerSize: "small",
+      onClose: this.closeDrawers,
+      subDrawerChildren: this.subDrawerChildren(),
+      size: size,
+      needAutoZindex: true
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "First Drawer",
+      onClose: this.onClose
+    }), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: this.openSecondDrawer
+    }, "Click here to Open Second Drawer ..:-)"), /*#__PURE__*/React.createElement(Button, {
+      text: "small",
+      onClick: this.changeSize.bind(this, 'small')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xsmall",
+      onClick: this.changeSize.bind(this, 'xsmall')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "medium",
+      onClick: this.changeSize.bind(this, 'medium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xmedium",
+      onClick: this.changeSize.bind(this, 'xmedium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "large",
+      onClick: this.changeSize.bind(this, 'large')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xlarge",
+      onClick: this.changeSize.bind(this, 'xlarge')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xxlarge",
+      onClick: this.changeSize.bind(this, 'xxlarge')
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__multiDrawer.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/Drawer/docs/Drawer__noFreeze.docs.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Drawer from '../Drawer';
+export default class Drawer__noFreeze extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "Children"));
+  }
+
+}
+
+if (false) {
+  Drawer__noFreeze.docs = {
+    componentGroup: 'Template'
+  };
+}