@zohodesk/components 1.0.0-temp-73 → 1.0.0-temp-74

package/es/ucl/Grid/props/propConstants.js

@@ -1,66 +0,0 @@
-export default {
-  display: {
-    inline: "inline",
-    grid: "grid"
-  },
-  flow: {
-    row: "row",
-    column: "column",
-    dense: "dense",
-    rowDense: "rowDense",
-    colDense: "colDense"
-  },
-  alignItems: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  alignSelf: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  alignContent: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline",
-    spaceBetween: "spaceBetween",
-    spaceAround: "spaceAround",
-    spaceEvenly: "spaceEvenly"
-  },
-  justifyItems: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  justifySelf: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  justifyContent: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    spaceBetween: "spaceBetween",
-    spaceAround: "spaceAround",
-    spaceEvenly: "spaceEvenly"
-  },
-  scroll: {
-    x: "x",
-    y: "y",
-    both: "both",
-    none: "none"
-  }
-};

package/es/ucl/Grid/props/propTypes.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import automationProps from '@zohodesk/utils/es/props/automationProps';
-import customStyleProps from '@zohodesk/utils/es/props/customStyleProps';
-import tagAttributeProps from '@zohodesk/utils/es/props/tagAttributeProps';
-import tagGeneralAttributeProps from '@zohodesk/utils/es/props/tagGeneralAttributeProps';
-import propConstants from './propConstants';
-import ariaPropTypes from './ariaPropTypes';
-export default {
-  tagName: PropTypes.string,
-  isCover: PropTypes.bool,
-  alignItems: PropTypes.oneOf(Object.values(propConstants.alignItems)),
-  alignSelf: PropTypes.oneOf(Object.values(propConstants.alignSelf)),
-  alignContent: PropTypes.oneOf(Object.values(propConstants.alignContent)),
-  justifyItems: PropTypes.oneOf(Object.values(propConstants.justifyItems)),
-  justifySelf: PropTypes.oneOf(Object.values(propConstants.justifySelf)),
-  justifyContent: PropTypes.oneOf(Object.values(propConstants.justifyContent)),
-  flow: PropTypes.oneOf(Object.values(propConstants.flow)),
-  overFlowScroll: PropTypes.oneOf(Object.values(propConstants.scroll)),
-  display: PropTypes.oneOf(Object.values(propConstants.display)),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  ...automationProps,
-  ...ariaPropTypes,
-  ...customStyleProps,
-  ...tagAttributeProps,
-  ...tagGeneralAttributeProps
-};

package/lib/ucl/Grid/Grid.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
-
-var _theme = require("@zohodesk/theme");
-
-var _GridModule = _interopRequireDefault(require("./css/Grid.module.css"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-
-var _propConstants = _interopRequireDefault(require("./props/propConstants"));
-
-var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
-
-var _componentNames = _interopRequireDefault(require("./componentNames"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var additionStyle = ['base'];
-
-var Grid = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var tagName = props.tagName,
-      customStyle = props.customStyle,
-      customId = props.customId,
-      tagAttributes = props.tagAttributes,
-      tagGeneralAttributes = props.tagGeneralAttributes,
-      children = props.children,
-      a11y = props.a11y;
-  /* external customization - need memorize?*/
-
-  var newStyle = (0, _useMergeStyle["default"])(_GridModule["default"], customStyle, additionStyle);
-  /* css classname added based on logic */
-
-  var className = (0, _cssJSLogic["default"])(props, newStyle);
-  return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread(_objectSpread(_objectSpread({}, tagGeneralAttributes), {}, {
-    'data-id': customId,
-    className: className,
-    ref: ref
-  }, tagAttributes), a11y), children);
-});
-
-Grid.displayName = 'Grid';
-Grid.defaultProps = _defaultProps["default"];
-Grid.propTypes = _propTypes["default"];
-Grid.constantProps = _propConstants["default"];
-
-var _default = (0, _theme.withTheme)(Grid, _componentNames["default"].GridLayout);
-
-exports["default"] = _default;
-Grid.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/lib/ucl/Grid/componentNames.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = {
-  "GridLayout": "GridLayout",
-  "NileLayout": "NileLayout",
-  "AmazonLayout": "AmazonLayout",
-  "YangtzeLayout": "YangtzeLayout"
-};
-exports["default"] = _default;

package/lib/ucl/Grid/css/Grid.module.css

@@ -1,217 +0,0 @@
-.cover {
-  height: 100%;
-  width: 100%;
-}
-
-/*Container Props */
-
-.grid {
-  display: grid;
-}
-
-.inlineGrid {
-  display: inline-grid;
-}
-
-.row {
-  grid-auto-flow: row;
-}
-
-.column {
-  grid-auto-flow: column;
-}
-
-.dense {
-  grid-auto-flow: dense;
-}
-
-.rowDense {
-  grid-auto-flow: row dense;
-}
-
-.colDense {
-  grid-auto-flow: column dense;
-}
-
-/* align-items props start */
-
-.alignItems_start {
-  align-items: start;
-}
-
-.alignItems_end {
-  align-items: end;
-}
-
-.alignItems_center {
-  align-items: center;
-}
-
-.alignItems_stretch {
-  align-items: stretch;
-}
-
-.alignItems_baseline {
-  align-items: baseline;
-}
-
-/* align-items props end */
-
-/* align-self props start */
-
-.alignSelf_start {
-  align-self: start;
-}
-
-.alignSelf_end {
-  align-self: end;
-}
-
-.alignSelf_center {
-  align-self: center;
-}
-
-.alignSelf_stretch {
-  align-self: stretch;
-}
-
-.alignSelf_baseline {
-  align-self: baseline;
-}
-
-/* align-self props End */
-
-/* align-content props start*/
-
-.alignContent_start {
-  align-content: start;
-}
-
-.alignContent_end {
-  align-content: end;
-}
-
-.alignContent_center {
-  align-content: center;
-}
-
-.alignContent_stretch {
-  align-content: stretch;
-}
-
-.alignContent_baseline {
-  align-content: baseline;
-}
-
-.alignContent_spaceBetween {
-  align-content: space-between;
-}
-
-.alignContent_spaceAround {
-  align-content: space-around;
-}
-
-.alignContent_spaceEvenly {
-  align-content: space-evenly;
-}
-
-/* align-content props end*/
-
-
-/* justify-items props start */
-
-.justifyItems_start {
-  justify-items: start;
-}
-
-.justifyItems_end {
-  justify-items: end;
-}
-
-.justifyItems_center {
-  justify-items: center;
-}
-
-.justifyItems_stretch {
-  justify-items: stretch;
-}
-
-.justifyItems_baseline {
-  justify-items: baseline;
-}
-
-/* justify-items props end */
-
-/* justify-self props start */
-
-.justifySelf_start {
-  justify-self: start;
-}
-
-.justifySelf_end {
-  justify-self: end;
-}
-
-.justifySelf_center {
-  justify-self: center;
-}
-
-.justifySelf_stretch {
-  justify-self: stretch;
-}
-
-.justifySelf_baseline {
-  justify-self: baseline;
-}
-
-/* justify-self props end */
-
-/* justify-content props start */
-
-.justifyContent_start {
-  justify-content: start;
-}
-
-.justifyContent_end {
-  justify-content: end;
-}
-
-.justifyContent_center {
-  justify-content: center;
-}
-
-.justifyContent_stretch {
-  justify-content: stretch;
-}
-
-.justifyContent_spaceBetween {
-  justify-content: space-between;
-}
-
-.justifyContent_spaceAround {
-  justify-content: space-around;
-}
-
-.justifyContent_spaceEvenly {
-  justify-content: space-evenly;
-}
-
-/* justify-content props end */
-
-.scroll_y {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.scroll_x {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.scroll_none {
-  overflow: hidden;
-}
-
-.scroll_both {
-  overflow: auto;
-}

package/lib/ucl/Grid/css/cssJSLogic.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = _default;
-
-var _utils = require("@zohodesk/utils");
-
-var _propConstants = _interopRequireDefault(require("../props/propConstants"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/**
- * container classname based on js state
- * @param {object} props flex props
- * @param {object} flex style object
- * @returns {string} classnames string with space separate
- */
-function _default(props, newStyle) {
-  var _compileClassNames;
-
-  var display = props.display,
-      flow = props.flow,
-      alignItems = props.alignItems,
-      alignSelf = props.alignSelf,
-      alignContent = props.alignContent,
-      justifyItems = props.justifyItems,
-      justifySelf = props.justifySelf,
-      justifyContent = props.justifyContent,
-      overFlowScroll = props.overFlowScroll,
-      isCover = props.isCover,
-      className = props.className;
-  var alignItemsClassname = "alignItems_".concat(alignItems);
-  var alignSelfClassname = "alignSelf_".concat(alignSelf);
-  var alignContentClassname = "alignContent_".concat(alignContent);
-  var justifyItemsClassname = "justifyItems_".concat(justifyItems);
-  var justifySelfClassname = "justifySelf_".concat(justifySelf);
-  var justifyContentClassname = "justifyContent_".concat(justifyContent);
-  var overFlow = "scroll_".concat(overFlowScroll);
-  return (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, newStyle.base, true), _defineProperty(_compileClassNames, newStyle.grid, display === _propConstants["default"].display.grid), _defineProperty(_compileClassNames, newStyle.inlineGrid, display === _propConstants["default"].display.inline), _defineProperty(_compileClassNames, newStyle[flow], flow && display), _defineProperty(_compileClassNames, newStyle[alignItemsClassname], alignItems && display), _defineProperty(_compileClassNames, newStyle[justifyItemsClassname], justifyItems && display), _defineProperty(_compileClassNames, newStyle[alignContentClassname], alignContent && display), _defineProperty(_compileClassNames, newStyle[justifyContentClassname], justifyContent && display), _defineProperty(_compileClassNames, newStyle[alignSelfClassname], alignSelf), _defineProperty(_compileClassNames, newStyle[justifySelfClassname], justifySelf), _defineProperty(_compileClassNames, newStyle[overFlow], overFlowScroll), _defineProperty(_compileClassNames, newStyle.cover, isCover), _defineProperty(_compileClassNames, className, className), _compileClassNames));
-}

package/lib/ucl/Grid/docs/Grid__Area_Based_Detail_Layout.docs.js

@@ -1,93 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Grid = _interopRequireDefault(require("../Grid"));
-
-var _propConstants = _interopRequireDefault(require("../props/propConstants"));
-
-var _gridDocsStyleModule = _interopRequireDefault(require("./css/gridDocsStyle.module.css"));
-
-var _gridDocsAreaBasedDetailLayoutModule = _interopRequireDefault(require("./css/gridDocsAreaBasedDetailLayout.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Grid__Area_Based_Detail_Layout = /*#__PURE__*/function (_React$Component) {
-  _inherits(Grid__Area_Based_Detail_Layout, _React$Component);
-
-  var _super = _createSuper(Grid__Area_Based_Detail_Layout);
-
-  function Grid__Area_Based_Detail_Layout() {
-    _classCallCheck(this, Grid__Area_Based_Detail_Layout);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Grid__Area_Based_Detail_Layout, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _gridDocsStyleModule["default"].parent
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        display: _propConstants["default"].display.grid,
-        isCover: true,
-        customStyle: {
-          base: _gridDocsAreaBasedDetailLayoutModule["default"].container
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedDetailLayoutModule["default"].leftPanel
-        }
-      }, "Left Panel"), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedDetailLayoutModule["default"].propertiesPanel
-        }
-      }, "Properties Panel"), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedDetailLayoutModule["default"].mainContent
-        }
-      }, "Main Content"), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedDetailLayoutModule["default"].rightPanel
-        }
-      }, "Right Panel")));
-    }
-  }]);
-
-  return Grid__Area_Based_Detail_Layout;
-}(_react["default"].Component);
-
-exports["default"] = Grid__Area_Based_Detail_Layout;
-Grid__Area_Based_Detail_Layout.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/lib/ucl/Grid/docs/Grid__Area_Based_List_Layout.docs.js

@@ -1,101 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Grid = _interopRequireDefault(require("../Grid"));
-
-var _propConstants = _interopRequireDefault(require("../props/propConstants"));
-
-var _gridDocsStyleModule = _interopRequireDefault(require("./css/gridDocsStyle.module.css"));
-
-var _gridDocsAreaBasedListLayoutModule = _interopRequireDefault(require("./css/gridDocsAreaBasedListLayout.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Grid__Area_Based_List_Layout = /*#__PURE__*/function (_React$Component) {
-  _inherits(Grid__Area_Based_List_Layout, _React$Component);
-
-  var _super = _createSuper(Grid__Area_Based_List_Layout);
-
-  function Grid__Area_Based_List_Layout() {
-    _classCallCheck(this, Grid__Area_Based_List_Layout);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Grid__Area_Based_List_Layout, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _gridDocsStyleModule["default"].parent
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        display: _propConstants["default"].display.grid,
-        isCover: true,
-        customStyle: {
-          base: _gridDocsAreaBasedListLayoutModule["default"].container
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedListLayoutModule["default"].header
-        },
-        tagName: "header"
-      }, /*#__PURE__*/_react["default"].createElement("h2", null, "Header")), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedListLayoutModule["default"].nav
-        },
-        tagName: "nav"
-      }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Home"), /*#__PURE__*/_react["default"].createElement("li", null, "Privacy Policy"))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedListLayoutModule["default"].main
-        }
-      }, /*#__PURE__*/_react["default"].createElement("p", null, "Main Content")), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedListLayoutModule["default"].aside
-        },
-        tagName: "aside"
-      }, /*#__PURE__*/_react["default"].createElement("h3", null, "Sidebar")), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        customStyle: {
-          base: _gridDocsAreaBasedListLayoutModule["default"].footer
-        },
-        tagName: "footer"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Footer"))));
-    }
-  }]);
-
-  return Grid__Area_Based_List_Layout;
-}(_react["default"].Component);
-
-exports["default"] = Grid__Area_Based_List_Layout;
-Grid__Area_Based_List_Layout.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};