@cloud-app-dev/vidc 2.0.0-alpha.1 → 2.0.0-alpha.2

package/es/CheckGroupFixed/index.js

@@ -0,0 +1,146 @@
+import "antd/lib/badge/style";
+import _Badge from "antd/lib/badge";
+import "antd/lib/checkbox/style";
+import _Checkbox from "antd/lib/checkbox";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import useChangeEffect from '../useChangeEffect';
+import "./index.css";
+
+function CheckGroupFixed(_ref) {
+  var label = _ref.label,
+      source = _ref.source,
+      _ref$checboxSize = _ref.checboxSize,
+      checboxSize = _ref$checboxSize === void 0 ? 120 : _ref$checboxSize,
+      _ref$cutRow = _ref.cutRow,
+      cutRow = _ref$cutRow === void 0 ? 1 : _ref$cutRow,
+      _ref$labelSize = _ref.labelSize,
+      labelSize = _ref$labelSize === void 0 ? 100 : _ref$labelSize,
+      value = _ref.value,
+      onChange = _ref.onChange;
+
+  var _useState = useState({
+    visible: false,
+    sider: false,
+    pos: [0, 0],
+    w: 0,
+    selectKeys: value || []
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var domRef = useRef(null);
+  useLayoutEffect(function () {
+    var _a, _b;
+
+    var contentEle = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.check-content-box');
+    var contentRect = (contentEle === null || contentEle === void 0 ? void 0 : contentEle.getBoundingClientRect()) || {
+      width: 0
+    };
+
+    if (contentRect.width < checboxSize * source.length) {
+      var lr = (_b = domRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+      setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          visible: true,
+          w: (lr === null || lr === void 0 ? void 0 : lr.width) || 0,
+          pos: [(lr === null || lr === void 0 ? void 0 : lr.x) || 0, (lr === null || lr === void 0 ? void 0 : lr.y) || 0]
+        });
+      });
+    }
+  }, [checboxSize, source.length]);
+  var fixedStyle = useMemo(function () {
+    return state.sider ? {
+      position: 'fixed',
+      width: state.w,
+      height: 'auto',
+      backgroundColor: 'white',
+      zIndex: 99,
+      boxShadow: ' 0 0 10px rgba(0,0,0,0.1)'
+    } : {};
+  }, [state.sider, state.w]);
+  useChangeEffect(function () {
+    return onChange && onChange(state.selectKeys);
+  }, [state.selectKeys]);
+  useLayoutEffect(function () {
+    var dom = domRef.current.querySelector('.check-box-group-layout');
+    dom === null || dom === void 0 ? void 0 : dom.setAttribute('style', "grid-template-columns:repeat(auto-fill, minmax(".concat(checboxSize, "px, 1fr));"));
+  }, [checboxSize]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "c-check-group-layout",
+    ref: domRef,
+    style: {
+      height: state.sider ? cutRow * 30 + 20 : 'auto'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "c-check-group-box",
+    style: fixedStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "check-label-box",
+    style: {
+      width: labelSize
+    }
+  }, label, "\uFF1A"), /*#__PURE__*/React.createElement("div", {
+    className: "check-content-box",
+    style: {
+      height: state.sider ? 'auto' : cutRow * 30
+    }
+  }, /*#__PURE__*/React.createElement(_Checkbox.Group, {
+    value: state.selectKeys,
+    className: "check-box-group-layout",
+    onChange: function onChange(keys) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          selectKeys: keys
+        });
+      });
+    }
+  }, source.map(function (v) {
+    return /*#__PURE__*/React.createElement(_Checkbox, {
+      style: {
+        width: checboxSize
+      },
+      key: v.value,
+      value: v.value
+    }, /*#__PURE__*/React.createElement("span", {
+      title: v.label
+    }, v.label));
+  }))), state.visible && /*#__PURE__*/React.createElement(_Badge, {
+    count: state.sider ? 0 : state.selectKeys.length,
+    size: "small",
+    offset: [10, 0]
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slice-btn",
+    onClick: function onClick() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          sider: !state.sider
+        });
+      });
+    }
+  }, state.sider ? '收起' : '展开'))), state.sider && /*#__PURE__*/React.createElement("div", {
+    className: "sider-mask",
+    onClick: function onClick() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          sider: false
+        });
+      });
+    }
+  }));
+}
+
+export default CheckGroupFixed;

package/es/Config/index.js

@@ -4,9 +4,30 @@ var Config = {
   bs: produce({}, function () {}),
   feature: produce([], function () {}),
   pFeature: produce([], function () {}),
-  registerConfig: function registerConfig(key, conf) {
-    Config[key] = produce(Config.AppConfig, function (draft) {
-      draft = conf;
+  theme: produce({}, function () {}),
+  registerAppConfig: function registerAppConfig(app) {
+    Config.app = produce(Config.app, function (draft) {
+      draft = app;
+    });
+  },
+  registerFeatrue: function registerFeatrue(feature) {
+    Config.feature = produce(Config.feature, function (draft) {
+      draft = feature;
+    });
+  },
+  registerBSConfig: function registerBSConfig(bs) {
+    Config.bs = produce(Config.bs, function (draft) {
+      draft = bs;
+    });
+  },
+  registerPlatformFeature: function registerPlatformFeature(pFeature) {
+    Config.pFeature = produce(Config.pFeature, function (draft) {
+      draft = pFeature;
+    });
+  },
+  registerThemeConfig: function registerThemeConfig(theme) {
+    Config.theme = produce(Config.theme, function (draft) {
+      draft = theme;
     });
   }
 };

package/es/Config/interface.d.ts

@@ -29,11 +29,19 @@ export type BSConfigType = {
   chromeDownloadUrl: string;
 };
 
+export type ConfigKey = 'app' | 'feature' | 'pFeature' | 'bs';
+
 export type ConfigJOSN = {
   app: AppItemType[];
   feature: FeatureItemType[];
   pFeature: FeatureItemType[];
   bs: BSConfigType;
-  registerConfig: (key: string, conf: { [key: string]: any }) => void;
+  theme: any;
+  registerAppConfig: (conf: AppItemType) => void;
+  registerFeatrue: (conf: FeatureItemType[]) => void;
+  registerBSConfig: (conf: BSConfigType) => void;
+  registerPlatformFeature: (conf: FeatureItemType[]) => void;
+  registerThemeConfig: (conf: { [key: string]: any }) => void;
+
   [key: string]: any;
 };

package/es/Config/utils.d.ts

@@ -5,7 +5,12 @@ export declare function formartThemeConfig(options: ConfigJOSN): {
     feature: import("./interface").FeatureItemType[];
     pFeature: import("./interface").FeatureItemType[];
     bs: import("./interface").BSConfigType;
-    registerConfig: (key: string, conf: {
+    theme: any;
+    registerAppConfig: (conf: import("./interface").AppItemType) => void;
+    registerFeatrue: (conf: import("./interface").FeatureItemType[]) => void;
+    registerBSConfig: (conf: import("./interface").BSConfigType) => void;
+    registerPlatformFeature: (conf: import("./interface").FeatureItemType[]) => void;
+    registerThemeConfig: (conf: {
         [key: string]: any;
     }) => void;
 };

package/es/ConfigContext/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export interface IConfigContextProps {
+    /**
+     * @description 用于获取微应用顶层的dom节点
+     */
     root: HTMLElement;
 }
 declare const ConfigContext: React.Context<IConfigContextProps>;

package/es/ContentBox/BetweenBox/index.css

@@ -0,0 +1,5 @@
+.lm-between-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/es/ContentBox/BetweenBox/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+interface BetweentBoxProps {
+    className?: string;
+    children?: React.ReactNode;
+    extNode?: React.ReactNode;
+    style?: React.CSSProperties;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}
+declare function BetweenBox({ className, left, right, style, children, extNode }: BetweentBoxProps): JSX.Element;
+export default BetweenBox;

package/es/ContentBox/BetweenBox/index.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import "./index.css";
+
+function BetweenBox(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      left = _ref.left,
+      right = _ref.right,
+      style = _ref.style,
+      children = _ref.children,
+      extNode = _ref.extNode;
+  var title = useMemo(function () {
+    return left || children;
+  }, [left, children]);
+  var other = useMemo(function () {
+    return right || extNode;
+  }, [right, extNode]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm-between-box ".concat(className),
+    style: style
+  }, title && /*#__PURE__*/React.createElement("div", null, title), other && /*#__PURE__*/React.createElement("div", null, other));
+}
+
+export default BetweenBox;

package/es/ContentBox/InfoBox/index.css

@@ -0,0 +1,23 @@
+.info-box-layout {
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.info-box-layout .info-box-title-wrapper {
+  background-color: var(--content-info-box-title-bg);
+  border: 1px solid var(--content-info-box-title-bd);
+  border-bottom: none;
+  height: var(--content-info-box-title-height);
+  line-height: var(--content-info-box-title-height);
+  min-height: max-content;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  font-weight: 700;
+}
+.info-box-layout .info-box-content-wrapper {
+  background-color: var(--content-info-box-bg);
+  border: 1px solid var(--content-info-box-bd-color);
+  flex: 1;
+}

package/es/ContentBox/InfoBox/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+interface InfoBoxProps {
+    className?: string;
+    title?: React.ReactNode;
+    titleExt?: React.ReactNode;
+    style?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+declare function InfoBox({ title, titleExt, children, className, style, contentStyle }: InfoBoxProps): JSX.Element;
+export default InfoBox;

package/es/ContentBox/InfoBox/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import BetweenBox from '../BetweenBox';
+import "./index.css";
+
+function InfoBox(_ref) {
+  var title = _ref.title,
+      titleExt = _ref.titleExt,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      style = _ref.style,
+      contentStyle = _ref.contentStyle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "info-box-layout ".concat(className),
+    style: style
+  }, (!!title || !!titleExt) && /*#__PURE__*/React.createElement(BetweenBox, {
+    className: "info-box-title-wrapper",
+    left: title,
+    right: titleExt
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "info-box-content-wrapper",
+    style: contentStyle
+  }, children));
+}
+
+export default InfoBox;

package/es/ContentBox/TwoColumnBox/index.css

@@ -0,0 +1,77 @@
+.two-column-layout-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: var(--content-two-column-box-color);
+}
+.two-column-layout-container .two-column-aside {
+  transition: width 0.1s ease-in;
+  width: var(--sider-size);
+  height: 100%;
+  z-index: 9;
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.two-column-layout-container .two-column-aside .two-colum-left-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.two-column-layout-container .two-column-aside .two-colum-left-content {
+  width: var(--sider-size);
+  height: 100%;
+  background-color: var(--content-two-column-box-left-bg);
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn {
+  position: absolute;
+  width: 16px;
+  height: 20px;
+  right: -16px;
+  top: 50%;
+  margin-top: -8px;
+  font-size: var(--fs-large);
+  cursor: pointer;
+  background-color: red;
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn .anticon {
+  background: var(--content-two-column-box-left-bg);
+  vertical-align: unset;
+  position: relative;
+  z-index: 3;
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:before,
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: var(--content-two-column-box-left-bg);
+  position: absolute;
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:before {
+  left: 0;
+  bottom: -10px;
+  transform: skewY(-20deg);
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:after {
+  right: 0;
+  top: -10px;
+  transform: skewY(20deg);
+}
+.two-column-layout-container .two-column-aside.hide-left-aside {
+  width: 0;
+}
+.two-column-layout-container .two-column-aside.hide-left-aside + .two-column-content {
+  padding-left: 0;
+}
+.two-column-layout-container .two-column-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding-left: var(--sider-size);
+  background-color: var(--content-two-column-box-right-bg);
+  transition: padding-left 0.3s ease-in-out;
+  box-sizing: border-box;
+}

package/es/ContentBox/TwoColumnBox/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+export interface TwoColumnBoxProps {
+    className?: string;
+    collapsible?: boolean;
+    leftContent?: React.ReactNode | JSX.Element;
+    children?: React.ReactNode;
+}
+declare function TwoColumnBox({ className, collapsible, leftContent, children }: TwoColumnBoxProps): JSX.Element;
+export default TwoColumnBox;

package/es/ContentBox/TwoColumnBox/index.js

@@ -0,0 +1,50 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import IconFont from '../../IconFont';
+import "./index.css";
+
+function TwoColumnBox(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$collapsible = _ref.collapsible,
+      collapsible = _ref$collapsible === void 0 ? true : _ref$collapsible,
+      leftContent = _ref.leftContent,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "two-column-layout-container ".concat(className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-column-aside ".concat(collapsed ? 'hide-left-aside' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-colum-left-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-colum-left-content"
+  }, leftContent, collapsible && /*#__PURE__*/React.createElement("span", {
+    onClick: function onClick() {
+      return setCollapsed(!collapsed);
+    },
+    className: "left-aside-slider-btn"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: collapsed ? 'icon-S_Arrow_SmallRight' : 'icon-S_Arrow_SmallLeft'
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: "two-column-content"
+  }, children));
+}
+
+export default TwoColumnBox;

package/es/ContentBox/deps/content-grid.d.ts

@@ -0,0 +1,9 @@
+declare const grid: {
+    xxl: number;
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export default grid;

package/es/ContentBox/deps/content-grid.js

@@ -0,0 +1,9 @@
+var grid = {
+  xxl: 22,
+  xl: 22,
+  lg: 23,
+  md: 23,
+  sm: 23,
+  xs: 23
+};
+export default grid;

package/es/ContentBox/deps/grid-factory.d.ts

@@ -0,0 +1,10 @@
+export declare function getGridClassName(grid: any): any[];
+export declare function computedGrid(grid: any): {
+    xxl: number;
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export declare function computedCuurentGrid(): "xxl" | "xl" | "lg" | "md" | "sm" | "xs";

package/es/ContentBox/deps/grid-factory.js

@@ -0,0 +1,72 @@
+export function getGridClassName(grid) {
+  var classNames = [];
+
+  for (var k in grid) {
+    classNames.push("cloudapp-col-".concat(k, "-").concat(grid[k]));
+  }
+
+  return [].concat('cloudapp-col', classNames);
+}
+export function computedGrid(grid) {
+  var contentGrid = {
+    xxl: 0,
+    xl: 0,
+    lg: 0,
+    md: 0,
+    sm: 0,
+    xs: 0
+  };
+
+  if (Array.isArray(grid)) {
+    grid.forEach(function (item) {
+      for (var k in item) {
+        if (contentGrid[k]) {
+          contentGrid[k] = contentGrid[k] - item[k];
+        } else {
+          contentGrid[k] = 24 - item[k];
+        }
+      }
+    });
+  } else {
+    for (var k in grid) {
+      contentGrid[k] = 24 - grid[k];
+    }
+  }
+
+  for (var _k in contentGrid) {
+    if (contentGrid[_k] <= 0) {
+      contentGrid[_k] = 24;
+    }
+  }
+
+  return contentGrid;
+}
+export function computedCuurentGrid() {
+  var width = document.body.clientWidth;
+
+  if (width >= 1600) {
+    return 'xxl';
+  }
+
+  if (width >= 1200 && width < 1600) {
+    return 'xl';
+  }
+
+  if (width >= 992 && width < 1200) {
+    return 'lg';
+  }
+
+  if (width >= 768 && width < 992) {
+    return 'md';
+  }
+
+  if (width >= 576 && width < 768) {
+    return 'sm';
+  }
+
+  if (width < 576) {
+    return 'xs';
+  }
+
+  return undefined;
+}

package/es/ContentBox/deps/simple-grid.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    xxl: number;
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export default _default;

package/es/ContentBox/deps/simple-grid.js

@@ -0,0 +1,8 @@
+export default {
+  xxl: 4,
+  xl: 6,
+  lg: 6,
+  md: 7,
+  sm: 24,
+  xs: 24
+};

package/es/ContentBox/index.css

@@ -0,0 +1,9 @@
+.single-column-layout-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--content-box-bg);
+}
+.single-column-layout-container .single-column-content {
+  margin: 0 auto;
+  height: 100%;
+}

package/es/ContentBox/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.less';
+export interface ContentBoxProps {
+    className?: string;
+    contentGrid?: any;
+    children?: React.ReactNode;
+}
+declare function ContentBox({ className, contentGrid, children }: ContentBoxProps): JSX.Element;
+declare namespace ContentBox {
+    var TwoColumnBox: typeof import("./TwoColumnBox").default;
+    var InfoBox: typeof import("./InfoBox").default;
+    var BetweenBox: typeof import("./BetweenBox").default;
+}
+export default ContentBox;

package/es/ContentBox/index.js

@@ -0,0 +1,28 @@
+import "antd/lib/col/style";
+import _Col from "antd/lib/col";
+import "antd/lib/row/style";
+import _Row from "antd/lib/row";
+import React from 'react';
+import TwoColumnBox from './TwoColumnBox';
+import InfoBox from './InfoBox';
+import defaultContentGrid from './deps/content-grid';
+import BetweenBox from './BetweenBox';
+import "./index.css";
+
+function ContentBox(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$contentGrid = _ref.contentGrid,
+      contentGrid = _ref$contentGrid === void 0 ? defaultContentGrid : _ref$contentGrid,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(_Row, {
+    className: "single-column-layout-container ".concat(className)
+  }, /*#__PURE__*/React.createElement(_Col, Object.assign({
+    className: "single-column-content"
+  }, contentGrid), children));
+}
+
+ContentBox.TwoColumnBox = TwoColumnBox;
+ContentBox.InfoBox = InfoBox;
+ContentBox.BetweenBox = BetweenBox;
+export default ContentBox;