@mui/material-nextjs 5.15.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @mui/material-nextjs
+
+The official integration of Material-UI with Next.js. For full documentation, visit [Next.js Integration](material-ui/guides/nextjs/) page.

package/legacy/v13-appRouter/appRouterV13.js

@@ -0,0 +1,101 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AppRouterCacheProvider(props) {
+  var options = props.options,
+    _props$CacheProvider = props.CacheProvider,
+    CacheProvider = _props$CacheProvider === void 0 ? DefaultCacheProvider : _props$CacheProvider,
+    children = props.children;
+  var _React$useState = React.useState(function () {
+      var _options$key;
+      var cache = createCache(_extends({}, options, {
+        key: (_options$key = options == null ? void 0 : options.key) != null ? _options$key : 'mui'
+      }));
+      cache.compat = true;
+      var prevInsert = cache.insert;
+      var inserted = [];
+      cache.insert = function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        if (options != null && options.enableCssLayer) {
+          args[1].styles = "@layer mui {".concat(args[1].styles, "}");
+        }
+        var selector = args[0],
+          serialized = args[1];
+        if (cache.inserted[serialized.name] === undefined) {
+          inserted.push({
+            name: serialized.name,
+            isGlobal: !selector
+          });
+        }
+        return prevInsert.apply(void 0, args);
+      };
+      var flush = function flush() {
+        var prevInserted = inserted;
+        inserted = [];
+        return prevInserted;
+      };
+      return {
+        cache: cache,
+        flush: flush
+      };
+    }),
+    registry = _React$useState[0];
+  useServerInsertedHTML(function () {
+    var inserted = registry.flush();
+    if (inserted.length === 0) {
+      return null;
+    }
+    var styles = '';
+    var dataEmotionAttribute = registry.cache.key;
+    var globals = [];
+    inserted.forEach(function (_ref) {
+      var name = _ref.name,
+        isGlobal = _ref.isGlobal;
+      var style = registry.cache.inserted[name];
+      if (typeof style !== 'boolean') {
+        if (isGlobal) {
+          globals.push({
+            name: name,
+            style: style
+          });
+        } else {
+          styles += style;
+          dataEmotionAttribute += " ".concat(name);
+        }
+      }
+    });
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [globals.map(function (_ref2) {
+        var name = _ref2.name,
+          style = _ref2.style;
+        return /*#__PURE__*/_jsx("style", {
+          "data-emotion": "".concat(registry.cache.key, "-global ").concat(name)
+          // eslint-disable-next-line react/no-danger
+          ,
+          dangerouslySetInnerHTML: {
+            __html: style
+          }
+        }, name);
+      }), styles && /*#__PURE__*/_jsx("style", {
+        "data-emotion": dataEmotionAttribute
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: styles
+        }
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: registry.cache,
+    children: children
+  });
+}

package/legacy/v13-appRouter/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default as AppRouterCacheProvider } from './appRouterV13';
+export * from './appRouterV13';

package/legacy/v13-pagesRouter/index.js

@@ -0,0 +1 @@
+export * from './pagesRouterV13';

package/legacy/v13-pagesRouter/pagesRouterV13.js

@@ -0,0 +1,192 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+var _meta;
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import createEmotionServer from '@emotion/server/create-instance';
+import Document from 'next/document';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+function createEmotionCache() {
+  var insertionPoint;
+  if (isBrowser) {
+    var emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
+  }
+  return createCache({
+    key: 'mui',
+    insertionPoint: insertionPoint
+  });
+}
+var defaultEmotionCache = createEmotionCache();
+export function AppCacheProvider(_ref) {
+  var _ref$emotionCache = _ref.emotionCache,
+    emotionCache = _ref$emotionCache === void 0 ? defaultEmotionCache : _ref$emotionCache,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: emotionCache,
+    children: children
+  });
+}
+/**
+ * A utility to compose multiple `getInitialProps` functions.
+ */
+export function createGetInitialProps(plugins) {
+  return /*#__PURE__*/function () {
+    var _getInitialProps = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ctx) {
+      var originalRenderPage, initialProps, finalProps;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            originalRenderPage = ctx.renderPage;
+            ctx.renderPage = function () {
+              return originalRenderPage({
+                enhanceApp: function enhanceApp(App) {
+                  return plugins.reduce(function (result, plugin) {
+                    return plugin.enhanceApp(result);
+                  }, App);
+                }
+              });
+            };
+            _context2.next = 4;
+            return Document.getInitialProps(ctx);
+          case 4:
+            initialProps = _context2.sent;
+            _context2.next = 7;
+            return plugins.reduce( /*#__PURE__*/function () {
+              var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result, plugin) {
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      _context.t0 = plugin;
+                      _context.next = 3;
+                      return result;
+                    case 3:
+                      _context.t1 = _context.sent;
+                      return _context.abrupt("return", _context.t0.resolveProps.call(_context.t0, _context.t1));
+                    case 5:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              }));
+              return function (_x2, _x3) {
+                return _ref2.apply(this, arguments);
+              };
+            }(), Promise.resolve(initialProps));
+          case 7:
+            finalProps = _context2.sent;
+            return _context2.abrupt("return", finalProps);
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    function getInitialProps(_x) {
+      return _getInitialProps.apply(this, arguments);
+    }
+    return getInitialProps;
+  }();
+}
+export function DocumentHeadTags(_ref3) {
+  var emotionStyleTags = _ref3.emotionStyleTags;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
+      name: "emotion-insertion-point",
+      content: ""
+    })), emotionStyleTags]
+  });
+}
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+export function documentGetInitialProps(_x4, _x5) {
+  return _documentGetInitialProps.apply(this, arguments);
+}
+function _documentGetInitialProps() {
+  _documentGetInitialProps = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(ctx, options) {
+    var _options$emotionCache, _options$plugins;
+    var cache;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          // Resolution order
+          //
+          // On the server:
+          // 1. app.getInitialProps
+          // 2. page.getInitialProps
+          // 3. document.getInitialProps
+          // 4. app.render
+          // 5. page.render
+          // 6. document.render
+          //
+          // On the server with error:
+          // 1. document.getInitialProps
+          // 2. app.render
+          // 3. page.render
+          // 4. document.render
+          //
+          // On the client
+          // 1. app.getInitialProps
+          // 2. page.getInitialProps
+          // 3. app.render
+          // 4. page.render
+          // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
+          // However, be aware that it can have global side effects.
+          cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : createEmotionCache();
+          return _context4.abrupt("return", createGetInitialProps([{
+            enhanceApp: function enhanceApp(App) {
+              return function EnhanceApp(props) {
+                return /*#__PURE__*/_jsx(App, _extends({
+                  emotionCache: cache
+                }, props));
+              };
+            },
+            resolveProps: function () {
+              var _resolveProps = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(initialProps) {
+                var _createEmotionServer, extractCriticalToChunks, _extractCriticalToChu, styles;
+                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                  while (1) switch (_context3.prev = _context3.next) {
+                    case 0:
+                      _createEmotionServer = createEmotionServer(cache), extractCriticalToChunks = _createEmotionServer.extractCriticalToChunks;
+                      _extractCriticalToChu = extractCriticalToChunks(initialProps.html), styles = _extractCriticalToChu.styles;
+                      return _context3.abrupt("return", _extends({}, initialProps, {
+                        emotionStyleTags: styles.map(function (style) {
+                          return /*#__PURE__*/_jsx("style", {
+                            "data-emotion": "".concat(style.key, " ").concat(style.ids.join(' ')),
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML: {
+                              __html: style.css
+                            }
+                          }, style.key);
+                        })
+                      }));
+                    case 3:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }, _callee3);
+              }));
+              function resolveProps(_x6) {
+                return _resolveProps.apply(this, arguments);
+              }
+              return resolveProps;
+            }()
+          }].concat(_toConsumableArray((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])))(ctx));
+        case 2:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return _documentGetInitialProps.apply(this, arguments);
+}

package/legacy/v14-appRouter/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export * from '../v13-appRouter';

package/legacy/v14-pagesRouter/index.js

@@ -0,0 +1 @@
+export * from '../v13-pagesRouter';

package/modern/v13-appRouter/appRouterV13.js

@@ -0,0 +1,96 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AppRouterCacheProvider(props) {
+  const {
+    options,
+    CacheProvider = DefaultCacheProvider,
+    children
+  } = props;
+  const [registry] = React.useState(() => {
+    const cache = createCache(_extends({}, options, {
+      key: options?.key ?? 'mui'
+    }));
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted = [];
+    cache.insert = (...args) => {
+      if (options?.enableCssLayer) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      const [selector, serialized] = args;
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push({
+          name: serialized.name,
+          isGlobal: !selector
+        });
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return {
+      cache,
+      flush
+    };
+  });
+  useServerInsertedHTML(() => {
+    const inserted = registry.flush();
+    if (inserted.length === 0) {
+      return null;
+    }
+    let styles = '';
+    let dataEmotionAttribute = registry.cache.key;
+    const globals = [];
+    inserted.forEach(({
+      name,
+      isGlobal
+    }) => {
+      const style = registry.cache.inserted[name];
+      if (typeof style !== 'boolean') {
+        if (isGlobal) {
+          globals.push({
+            name,
+            style
+          });
+        } else {
+          styles += style;
+          dataEmotionAttribute += ` ${name}`;
+        }
+      }
+    });
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [globals.map(({
+        name,
+        style
+      }) => /*#__PURE__*/_jsx("style", {
+        "data-emotion": `${registry.cache.key}-global ${name}`
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: style
+        }
+      }, name)), styles && /*#__PURE__*/_jsx("style", {
+        "data-emotion": dataEmotionAttribute
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: styles
+        }
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: registry.cache,
+    children: children
+  });
+}

package/modern/v13-appRouter/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default as AppRouterCacheProvider } from './appRouterV13';
+export * from './appRouterV13';

package/modern/v13-pagesRouter/index.js

@@ -0,0 +1 @@
+export * from './pagesRouterV13';

package/modern/v13-pagesRouter/pagesRouterV13.js

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _meta;
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import createEmotionServer from '@emotion/server/create-instance';
+import Document from 'next/document';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+function createEmotionCache() {
+  let insertionPoint;
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+  return createCache({
+    key: 'mui',
+    insertionPoint
+  });
+}
+const defaultEmotionCache = createEmotionCache();
+export function AppCacheProvider({
+  emotionCache = defaultEmotionCache,
+  children
+}) {
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: emotionCache,
+    children: children
+  });
+}
+/**
+ * A utility to compose multiple `getInitialProps` functions.
+ */
+export function createGetInitialProps(plugins) {
+  return async function getInitialProps(ctx) {
+    const originalRenderPage = ctx.renderPage;
+    ctx.renderPage = () => originalRenderPage({
+      enhanceApp: App => plugins.reduce((result, plugin) => plugin.enhanceApp(result), App)
+    });
+    const initialProps = await Document.getInitialProps(ctx);
+    const finalProps = await plugins.reduce(async (result, plugin) => plugin.resolveProps(await result), Promise.resolve(initialProps));
+    return finalProps;
+  };
+}
+export function DocumentHeadTags({
+  emotionStyleTags
+}) {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
+      name: "emotion-insertion-point",
+      content: ""
+    })), emotionStyleTags]
+  });
+}
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+export async function documentGetInitialProps(ctx, options) {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = options?.emotionCache ?? createEmotionCache();
+  return createGetInitialProps([{
+    enhanceApp: App => function EnhanceApp(props) {
+      return /*#__PURE__*/_jsx(App, _extends({
+        emotionCache: cache
+      }, props));
+    },
+    resolveProps: async initialProps => {
+      const {
+        extractCriticalToChunks
+      } = createEmotionServer(cache);
+      const {
+        styles
+      } = extractCriticalToChunks(initialProps.html);
+      return _extends({}, initialProps, {
+        emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
+          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: style.css
+          }
+        }, style.key))
+      });
+    }
+  }, ...(options?.plugins ?? [])])(ctx);
+}

package/modern/v14-appRouter/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export * from '../v13-appRouter';

package/modern/v14-pagesRouter/index.js

@@ -0,0 +1 @@
+export * from '../v13-pagesRouter';

package/node/v13-appRouter/appRouterV13.js

@@ -0,0 +1,104 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AppRouterCacheProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+var _navigation = require("next/navigation");
+var _react2 = require("@emotion/react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function AppRouterCacheProvider(props) {
+  const {
+    options,
+    CacheProvider = _react2.CacheProvider,
+    children
+  } = props;
+  const [registry] = React.useState(() => {
+    var _options$key;
+    const cache = (0, _cache.default)((0, _extends2.default)({}, options, {
+      key: (_options$key = options == null ? void 0 : options.key) != null ? _options$key : 'mui'
+    }));
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted = [];
+    cache.insert = (...args) => {
+      if (options != null && options.enableCssLayer) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      const [selector, serialized] = args;
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push({
+          name: serialized.name,
+          isGlobal: !selector
+        });
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return {
+      cache,
+      flush
+    };
+  });
+  (0, _navigation.useServerInsertedHTML)(() => {
+    const inserted = registry.flush();
+    if (inserted.length === 0) {
+      return null;
+    }
+    let styles = '';
+    let dataEmotionAttribute = registry.cache.key;
+    const globals = [];
+    inserted.forEach(({
+      name,
+      isGlobal
+    }) => {
+      const style = registry.cache.inserted[name];
+      if (typeof style !== 'boolean') {
+        if (isGlobal) {
+          globals.push({
+            name,
+            style
+          });
+        } else {
+          styles += style;
+          dataEmotionAttribute += ` ${name}`;
+        }
+      }
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [globals.map(({
+        name,
+        style
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        "data-emotion": `${registry.cache.key}-global ${name}`
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: style
+        }
+      }, name)), styles && /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        "data-emotion": dataEmotionAttribute
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: styles
+        }
+      })]
+    });
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CacheProvider, {
+    value: registry.cache,
+    children: children
+  });
+}