@pisell/private-materials 6.3.116 → 6.3.118

package/es/pro/Selector/Selector.js

@@ -1,5 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["show", "render"];
+var _excluded = ["show", "render"],
+  _excluded2 = ["disabled", "size", "style"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -9,7 +10,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
-import { Row, Col, Tag, Select } from 'antd';
+import { Tag, Select } from 'antd';
 import classNames from 'classnames';
 import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 // @ts-ignore
@@ -21,10 +22,9 @@ import NumericStepper from "../NumericStepper";
 import useSelectionController from "./hooks/useSelectionController";
 import usePresetProps from "./hooks/usePresetProps";
 import useEngineContext from "../../hooks/useEngineContext";
+import useThemeTokens from "../../hooks/useThemeTokens";
 import Item from "./Item";
 import "./selector.less";
-var ARow = Row;
-var ACol = Col;
 var ATag = Tag;
 export var SelectorContext = /*#__PURE__*/React.createContext({
   disabled: false,
@@ -54,6 +54,9 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
     valueType = _props$valueType === void 0 ? 'primitive' : _props$valueType,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'default' : _props$variant;
+  var _useThemeTokens = useThemeTokens(props.theme),
+    colorPrimary = _useThemeTokens.colorPrimary,
+    colorPrimaryBg = _useThemeTokens.colorPrimaryBg;
   var context = useEngineContext();
   locales.init(localeTexts, (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.storage) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.get('umi_locale')) || 'en');
   var _useSelectionControll = useSelectionController(props),
@@ -147,8 +150,7 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
         actions.update(option._key, {
           quantity: value
         });
-      },
-      showInput: true
+      }
     }));
   };
 
@@ -206,9 +208,16 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
     if (variant === 'select') {
       var _value = state.values;
       var _maxCount = ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max;
-      return /*#__PURE__*/React.createElement(Select, {
-        size: "large",
-        style: {
+      var _ref2 = props.selectProps || {},
+        selectDisabled = _ref2.disabled,
+        _ref2$size = _ref2.size,
+        size = _ref2$size === void 0 ? 'large' : _ref2$size,
+        style = _ref2.style,
+        rest = _objectWithoutProperties(_ref2, _excluded2);
+      return /*#__PURE__*/React.createElement(Select, _extends({}, rest, {
+        size: size,
+        disabled: selectDisabled || disabled,
+        style: style || {
           width: '100%'
         },
         mode: mode === 'multiple' ? 'multiple' : undefined,
@@ -218,28 +227,18 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
         onChange: function onChange(value) {
           return actions.setValue(value);
         },
-        disabled: disabled,
-        maxTagCount: _maxCount
-      });
+        maxCount: _maxCount
+      }));
     }
     return /*#__PURE__*/React.createElement(LayoutContainer, {
       className: "pisell-pro-selector_options-container",
       config: finalLayout
     }, options.map(renderOption));
   };
-  var renderErrorMsg = function renderErrorMsg() {
-    if (!(errors !== null && errors !== void 0 && errors.length)) return null;
-    var error = errors[errors.length - 1];
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: '#D92D20'
-      }
-    }, error === null || error === void 0 ? void 0 : error.message);
-  };
   var renderRequiredTag = function renderRequiredTag() {
-    var _ref2 = ruleConfig || {},
-      _ref2$required = _ref2.required,
-      required = _ref2$required === void 0 ? false : _ref2$required;
+    var _ref3 = ruleConfig || {},
+      _ref3$required = _ref3.required,
+      required = _ref3$required === void 0 ? false : _ref3$required;
     if (!required) return null;
     var style = {
       borderRadius: 16
@@ -266,9 +265,19 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
     }, locales.getText('pisell2.pro.selector.required-tag'));
   };
   var renderTip = function renderTip() {
-    var _headerProps$tip, _headerProps$tip2, _headerProps$tip3;
-    if ((headerProps === null || headerProps === void 0 || (_headerProps$tip = headerProps.tip) === null || _headerProps$tip === void 0 ? void 0 : _headerProps$tip.visible) === false) return null;
-    var text = headerProps === null || headerProps === void 0 || (_headerProps$tip2 = headerProps.tip) === null || _headerProps$tip2 === void 0 ? void 0 : _headerProps$tip2.text;
+    var _headerProps$tip2, _headerProps$tip3, _headerProps$tip4;
+    if (Array.isArray(errors) && errors.length) {
+      var _headerProps$tip;
+      var error = errors[errors.length - 1];
+      return /*#__PURE__*/React.createElement("span", {
+        className: "pisell-pro-selector_tip",
+        style: _objectSpread(_objectSpread({}, (headerProps === null || headerProps === void 0 || (_headerProps$tip = headerProps.tip) === null || _headerProps$tip === void 0 ? void 0 : _headerProps$tip.style) || {}), {}, {
+          color: '#D92D20'
+        })
+      }, error === null || error === void 0 ? void 0 : error.message);
+    }
+    if ((headerProps === null || headerProps === void 0 || (_headerProps$tip2 = headerProps.tip) === null || _headerProps$tip2 === void 0 ? void 0 : _headerProps$tip2.visible) === false) return null;
+    var text = headerProps === null || headerProps === void 0 || (_headerProps$tip3 = headerProps.tip) === null || _headerProps$tip3 === void 0 ? void 0 : _headerProps$tip3.text;
     if (ruleConfig !== null && ruleConfig !== void 0 && ruleConfig.min || ruleConfig !== null && ruleConfig !== void 0 && ruleConfig.max) {
       text = locales.getText('pisell2.pro.selector.tip.min-max-selection')(ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min, ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max);
     }
@@ -282,7 +291,7 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!text) return null;
     return /*#__PURE__*/React.createElement("span", {
       className: "pisell-pro-selector_tip",
-      style: _objectSpread({}, (headerProps === null || headerProps === void 0 || (_headerProps$tip3 = headerProps.tip) === null || _headerProps$tip3 === void 0 ? void 0 : _headerProps$tip3.style) || {})
+      style: _objectSpread({}, (headerProps === null || headerProps === void 0 || (_headerProps$tip4 = headerProps.tip) === null || _headerProps$tip4 === void 0 ? void 0 : _headerProps$tip4.style) || {})
     }, "(", text, ")");
   };
   var renderHeader = function renderHeader() {
@@ -315,8 +324,8 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     id: "pisell-pro-selector-".concat(props.id),
     className: classNames('pisell-pro-selector', props.className),
-    style: props.style
-  }, renderHeader(), renderErrorMsg(), /*#__PURE__*/React.createElement(SelectorContext.Provider, {
+    style: _objectSpread(_objectSpread({}, props.style || {}), {}, _defineProperty(_defineProperty({}, '--color-primary', colorPrimary), '--color-primary-bg', colorPrimaryBg))
+  }, renderHeader(), /*#__PURE__*/React.createElement(SelectorContext.Provider, {
     value: {
       mode: mode,
       disabled: disabled,

package/es/pro/Selector/SelectorGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SelectionValue, SelectorGroupProps } from './types';
+import type { SelectionValue, SelectorGroupProps } from './types';
 import './selectorGroup.less';
 export declare type SelectorGroupRef = {
     getValues: (includeHidden?: boolean) => Record<string, SelectionValue>;

package/es/pro/Selector/SelectorGroup.js

@@ -27,6 +27,7 @@ import { isEqual } from 'lodash';
 import { locales } from '@pisell/utils';
 import localeTexts from "./locales";
 import useEngineContext from "../../hooks/useEngineContext";
+import useThemeTokens from "../../hooks/useThemeTokens";
 import Selector from "./Selector";
 import { normalizeRules, computeAutoHiddenGroups, computeEffects, getSelectedSet, pruneValuesByAllowOnly, generateSimpleUUID } from "./utils";
 import { IntersectionObserverProvider, IntersectionItem } from "./components/IntersectionObserver";
@@ -44,6 +45,9 @@ var SelectorGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$preserve = props.preserve,
     preserveDefault = _props$preserve === void 0 ? false : _props$preserve,
     style = props.style;
+  var _useThemeTokens = useThemeTokens(props.theme),
+    colorPrimary = _useThemeTokens.colorPrimary,
+    colorPrimaryBg = _useThemeTokens.colorPrimaryBg;
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     activeIndex = _useState2[0],
@@ -556,7 +560,7 @@ var SelectorGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-batch-selector', "pisell-batch-selector-".concat(_uniqueId)),
     ref: containerRef,
-    style: style
+    style: _objectSpread(_objectSpread({}, style || {}), {}, _defineProperty(_defineProperty({}, '--color-primary', colorPrimary), '--color-primary-bg', colorPrimaryBg))
   }, renderTabs(), /*#__PURE__*/React.createElement(IntersectionObserverProvider, {
     rootMargin: "-70px 0px 0px 0px",
     disabled: ((_props$tabProps2 = props.tabProps) === null || _props$tabProps2 === void 0 ? void 0 : _props$tabProps2.visible) === false,

package/es/pro/Selector/components/Card/index.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import './index.less';
+export declare type CardVariant = 'outlined' | 'borderless';
+export declare type CardLayout = 'vertical' | 'horizontal';
+export declare type SelectedType = 'none' | 'outlined' | 'outlined-bold' | 'filled';
+export declare type ActionsPosition = 'left' | 'right';
+export interface CardStyles {
+    container?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    content?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    actions?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    corner?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+}
+export interface CardStyleProps {
+    selected?: boolean;
+    disabled?: boolean;
+    hoverable?: boolean;
+    variant?: CardVariant;
+    layout?: CardLayout;
+}
+export interface CardProps {
+    /** 卡片变体样式 */
+    variant?: CardVariant;
+    /** 布局方向 */
+    layout?: CardLayout;
+    /** 操作按钮区域，水平模式在右侧，垂直模式在底部 */
+    actions?: React.ReactNode[];
+    /** 水平模式下，操作按钮的位置 */
+    actionsPosition?: ActionsPosition;
+    /** 垂直模式下，右上角绝对定位展示的组件 */
+    corner?: React.ReactNode;
+    /** 子内容 */
+    children?: React.ReactNode;
+    /** 选中状态 */
+    selected?: boolean;
+    /** 禁用状态 */
+    disabled?: boolean;
+    /** 是否可悬停 */
+    hoverable?: boolean;
+    /** 点击事件 */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** 自定义样式 */
+    styles?: CardStyles;
+    /**
+     * 选中时的样式类型
+     * - none: 无样式
+     * - outlined: 边框高亮
+     * - outlined-bold: 边框高亮 + 加粗（使用 outline 实现，不影响布局）
+     * - filled: 填充背景色
+     */
+    selectedType?: SelectedType;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/es/pro/Selector/components/Card/index.js

@@ -33,13 +33,15 @@ var Card = function Card(_ref) {
     className = _ref.className,
     style = _ref.style;
   // 样式属性对象，用于传递给样式函数
-  var styleProps = {
-    selected: selected,
-    disabled: disabled,
-    hoverable: hoverable,
-    variant: variant,
-    layout: layout
-  };
+  var styleProps = useMemo(function () {
+    return {
+      selected: selected,
+      disabled: disabled,
+      hoverable: hoverable,
+      variant: variant,
+      layout: layout
+    };
+  }, [selected, disabled, hoverable, variant, layout]);
 
   // 计算容器样式
   var containerStyle = useMemo(function () {
@@ -77,10 +79,9 @@ var Card = function Card(_ref) {
     }, actions.map(function (action, index) {
       return /*#__PURE__*/React.createElement("li", {
         key: index,
-        className: "pisell-pro-card_actions-item"
-      }, /*#__PURE__*/React.createElement("span", {
+        className: "pisell-pro-card_actions-item",
         onClick: stopPropagation
-      }, action));
+      }, action);
     }));
   };
 

package/es/pro/Selector/components/Card/index.less

@@ -21,8 +21,8 @@
 
   /* 布局样式 */
   &-vertical {
-    flex-direction: column;
     border-radius: 12px;
+    flex-direction: column;
 
     .pisell-pro-card_content {
       flex: 1;
@@ -33,10 +33,13 @@
       align-items: center;
       justify-content: center;
       margin: 0;
+      padding: 0;
+      height: 64px;
     }
 
     .pisell-pro-card_actions-item {
-      margin: 20px 0;
+      margin: 0;
+      height: 100%;
     }
   }
 
@@ -45,6 +48,16 @@
     align-items: center;
     gap: 10px;
 
+    &.pisell-pro-card-actions-left {
+      .pisell-pro-card_actions {
+        order: 0;
+      }
+
+      .pisell-pro-card_content {
+        order: 1;
+      }
+    }
+
     .pisell-pro-card_content {
       flex: 1;
       font-size: 16px;
@@ -55,10 +68,13 @@
       align-items: center;
       margin: 0;
       padding: 0;
+      height: 100%;
+      order: 1;
     }
 
     .pisell-pro-card_actions-item {
       margin: 0;
+      height: 100%;
     }
   }
 
@@ -87,34 +103,34 @@
   /* 选中状态 - outlined类型 */
   &-selected&-selected-outlined {
     &.pisell-pro-card-outlined {
-      border-color: #7f56d9;
-      background-color: #f9f5ff;
+      border-color: var(--color-primary, #5d3f9f);
+      background-color: var(--color-primary-bg, #f9f5ff);
     }
 
     &.pisell-pro-card-borderless {
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
     }
     .pisell-pro-card_content {
-      color: #7f56d9;
+      color: var(--color-primary, #5d3f9f);
     }
   }
 
   /* 选中状态 - outlined-bold类型（加粗边框，使用 outline 实现不影响布局） */
   &-selected&-selected-outlined-bold {
     &.pisell-pro-card-outlined {
-      border-color: #7f56d9;
-      background-color: #f9f5ff;
-      outline: 2px solid #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
+      background-color: var(--color-primary-bg, #f9f5ff);
+      outline: 2px solid var(--color-primary, #5d3f9f);
       outline-offset: -2px;
     }
 
     &.pisell-pro-card-borderless {
-      border-color: #7f56d9;
-      outline: 2px solid #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
+      outline: 2px solid var(--color-primary, #5d3f9f);
       outline-offset: -2px;
     }
     .pisell-pro-card_content {
-      color: #7f56d9;
+      color: var(--color-primary, #5d3f9f);
     }
   }
 
@@ -122,9 +138,9 @@
   &-selected&-selected-filled {
     &.pisell-pro-card-outlined,
     &.pisell-pro-card-borderless {
-      background-color: #7f56d9;
+      background-color: var(--color-primary, #5d3f9f);
       color: #ffffff;
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
 
       .pisell-pro-card_content {
         color: #ffffff;

package/es/pro/Selector/components/Indicator/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.less';
+export interface IndicatorProps {
+    mode?: 'single' | 'multiple';
+    variant?: 'outlined' | 'filled';
+    defaultChecked?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    styles?: {
+        container?: React.CSSProperties;
+        indicator?: React.CSSProperties;
+        content?: React.CSSProperties;
+    };
+    children?: React.ReactNode;
+    size?: 'small' | 'middle' | 'large' | number;
+}
+declare const Indicator: React.FC<IndicatorProps>;
+export default Indicator;

package/es/pro/Selector/components/Indicator/index.js

@@ -82,7 +82,7 @@ var Indicator = function Indicator(props) {
   };
   return /*#__PURE__*/React.createElement("label", {
     className: classes,
-    style: styles.container
+    style: styles === null || styles === void 0 ? void 0 : styles.container
   }, /*#__PURE__*/React.createElement("input", {
     type: mode === 'single' ? 'radio' : 'checkbox',
     className: "".concat(prefixCls, "-input"),
@@ -95,7 +95,8 @@ var Indicator = function Indicator(props) {
   }, checked && /*#__PURE__*/React.createElement(React.Fragment, null, mode === 'single' && variant === 'outlined' ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-dot")
   }) : renderCheckIcon())), children && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-content")
+    className: "".concat(prefixCls, "-content"),
+    style: styles === null || styles === void 0 ? void 0 : styles.content
   }, children));
 };
 export default Indicator;

package/es/pro/Selector/components/Indicator/index.less

@@ -1,12 +1,15 @@
 .pisell-pro-indicator {
+  vertical-align: middle;
   display: inline-flex;
   align-items: center;
-  vertical-align: middle;
+  justify-content: center;
   cursor: pointer;
   user-select: none;
   font-size: 14px;
   line-height: 1.5;
   position: relative;
+  height: 100%;
+  width: 100%;
 
   &-input {
     position: absolute;
@@ -23,7 +26,6 @@
     position: relative;
     box-sizing: border-box;
     border: 1px solid #d0d5dd;
-    background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -52,38 +54,39 @@
   }
 
   &-single.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #ffffff;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary-bg, transparent);
   }
 
   &-single.pisell-pro-indicator-outlined &-dot {
     width: 45%;
     height: 45%;
-    background-color: #7f56d9;
+    background-color: var(--color-primary, #5d3f9f);
     border-radius: 50%;
   }
 
   &-single.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #7f56d9;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary, #5d3f9f);
   }
 
   &-single.pisell-pro-indicator-filled &-check-icon {
     color: #ffffff;
   }
 
-  &-multiple.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #ffffff;
+  &-multiple.pisell-pro-indicator-outlined.pisell-pro-indicator-checked
+    &-inner {
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary-bg, transparent);
   }
 
   &-multiple.pisell-pro-indicator-outlined &-check-icon {
-    color: #7f56d9;
+    color: var(--color-primary, #5d3f9f);
   }
 
   &-multiple.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #7f56d9;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary, #5d3f9f);
   }
 
   &-multiple.pisell-pro-indicator-filled &-check-icon {

package/es/pro/Selector/components/LayoutContainer/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LayoutConfig } from '../../types';
+import './index.less';
+interface LayoutContainerProps {
+    className: string;
+    config: LayoutConfig | null;
+    children: React.ReactNode[];
+}
+/**
+ * 统一的布局容器组件
+ *
+ * 支持三种布局模式：
+ * 1. 响应式布局（推荐）：通过 responsive 配置，使用 ResizeObserver 实现容器级响应式
+ * 2. Custom 布局：通过 className 使用预设样式
+ * 3. Ant Design Grid 布局：基础的栅格布局，用于简单场景
+ */
+declare function LayoutContainer({ className: containerClassName, config, children, }: LayoutContainerProps): React.ReactElement | null;
+export default LayoutContainer;