@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-241

package/es/Tag/docs/Tag__default.docs.js

@@ -0,0 +1,323 @@
+import React, { Component } from 'react';
+import Tag from '../Tag';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class Tag__default extends Component {
+  render() {
+    let style = {
+      margin: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      padding: '15px 0',
+      textTransform: 'upperCase'
+    },
+        spanStyle = {
+      display: 'inline-block',
+      margin: '10px 10px 10px 0'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default Tag"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      tooltip: "Bharathi Kannan"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Active"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Default",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      active: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Danger",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true,
+      active: true,
+      palette: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Secondary",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true,
+      active: true,
+      palette: "secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      onRemove: () => {},
+      text: "Secondary Active",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true,
+      active: true,
+      palette: "secondary"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Disabled"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      disabled: true
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Icon Palette"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Default",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      active: true,
+      closePalette: "danger",
+      onRemove: () => {}
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Danger",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true,
+      active: true,
+      palette: "danger",
+      closePalette: "primary",
+      onRemove: () => {}
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Default",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      active: true,
+      closePalette: "danger",
+      onRemove: () => {}
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-open",
+      isBold: true,
+      size: "10"
+    }))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Palette"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      palette: "default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true,
+      palette: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDotted"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "primaryDotted"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "dark"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDarkDotted"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "darkPrimaryDotted"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Palette with Read-only"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      palette: "default",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true,
+      palette: "danger",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "secondary",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDotted",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "primaryDotted",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "dark",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDarkDotted",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "darkPrimaryDotted",
+      isReadOnly: true
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Rounded"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      onRemove: () => {},
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      onRemove: () => {},
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Size"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Medium",
+      onRemove: () => {},
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      size: "medium"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Small",
+      onRemove: () => {},
+      initial: "SM",
+      hasAvatar: true,
+      size: "small"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "With Avatar"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      initial: "TT",
+      hasAvatar: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      rounded: false
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "With Close"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Desk",
+      onRemove: () => {}
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Desk",
+      onRemove: () => {},
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Desk",
+      onRemove: () => {},
+      rounded: false
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Desk",
+      onRemove: () => {},
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      closePalette: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDotted",
+      onRemove: () => {}
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "primaryDotted",
+      onRemove: () => {}
+    })))));
+  }
+
+}
+
+if (false) {
+  Tag__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBox/docs/TextBox__custom.docs.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import TextBox from '../TextBox';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBox__custom extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      maxLength: 150,
+      placeHolder: "Input",
+      customClass: style.customTextBox
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "readOnly",
+      isReadOnly: true,
+      needEffect: false,
+      value: "Readonly",
+      customClass: style.txtBoxReadOnly
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "disabled",
+      isDisabled: true,
+      needEffect: false,
+      value: "Disabled",
+      customClass: style.customTextBox
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBox__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBox/docs/TextBox__default.docs.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import TextBox from '../TextBox';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBox__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      maxLength: 150,
+      placeHolder: "Input"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "readOnly",
+      isReadOnly: true,
+      needEffect: false,
+      value: "Readonly"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "disabled",
+      isDisabled: true,
+      needEffect: false,
+      value: "Disabled"
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBox__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBox/docs/TextBox__size.docs.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import TextBox from '../TextBox';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBox__size extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBox, {
+      name: "small",
+      id: "small",
+      maxLength: "150",
+      placeHolder: "small",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "medium",
+      id: "medium",
+      maxLength: "150",
+      placeHolder: "medium",
+      size: "medium"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "xmedium",
+      id: "xmedium",
+      maxLength: "150",
+      placeHolder: "xmedium",
+      size: "xmedium"
+    })));
+  }
+
+}
+
+if (false) {
+  TextBox__size.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBox/docs/TextBox__variant.docs.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import TextBox from '../TextBox';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBox__variant extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Secondary",
+      variant: "default"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Primary",
+      variant: "primary"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Secondary",
+      variant: "secondary"
+    })));
+  }
+
+}
+
+if (false) {
+  TextBox__variant.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBoxIcon/docs/TextBoxIcon__custom.docs.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import TextBoxIcon from '../TextBoxIcon';
+import Icon from '@zohodesk/icons/lib/Icon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class TextBoxIcon__custom extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.customTboxwrap,
+        customTBoxIcon: style.customTboxicon,
+        customTBoxLine: style.tBoxLine
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.customTboxwrap,
+        customTBoxIcon: style.customTboxicon,
+        customTBoxLine: style.tBoxLine
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down",
+      size: "10"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.customTboxwrap,
+        customTBoxIcon: style.customTboxicon,
+        customTBoxLine: style.tBoxLine
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent",
+      value: "Search"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.tBoxIconDisable,
+        customTBoxLine: style.tBoxLineDisable
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isDisabled",
+      value: "isDisabled",
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.tBoxIconRead,
+        customTBoxLine: style.tBoxLineDisable
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isReadOnly",
+      value: "isReadOnly",
+      isReadOnly: true,
+      needEffect: true
+    })))));
+  }
+
+}
+
+if (false) {
+  TextBoxIcon__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBoxIcon/docs/TextBoxIcon__default.docs.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import TextBoxIcon from '../TextBoxIcon';
+import style from '../../common/docStyle.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBoxIcon__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down",
+      size: "10"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent",
+      value: "Search"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isDisabled",
+      value: "isDisabled",
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isReadOnly",
+      value: "isReadOnly",
+      isReadOnly: true,
+      needEffect: true
+    })))));
+  }
+
+}
+
+if (false) {
+  TextBoxIcon__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Textarea/docs/Textarea__animated.docs.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Textarea__animated extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '350px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      animated: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large",
+      animated: true
+    }))));
+  }
+
+}
+
+if (false) {
+  Textarea__animated.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}