@tamagui/group 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/useIndexedChildren.native.js

@@ -1,5 +1,6 @@
 "use strict";
 
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,85 +8,79 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useIndexedChildren_exports = {};
 __export(useIndexedChildren_exports, {
-  useIndex: () => useIndex,
-  useIndexedChildren: () => useIndexedChildren
+	useIndex: () => useIndex,
+	useIndexedChildren: () => useIndexedChildren
 });
 module.exports = __toCommonJS(useIndexedChildren_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"), 1);
-var MaxIndexContext = /* @__PURE__ */React.createContext([]);
-var IndexContext = /* @__PURE__ */React.createContext(null);
+var MaxIndexContext = /* @__PURE__ */ React.createContext([]);
+var IndexContext = /* @__PURE__ */ React.createContext(null);
 function useIndex() {
-  var maxIndexPath = React.useContext(MaxIndexContext);
-  var indexPathString = React.useContext(IndexContext);
-  return React.useMemo(function () {
-    if (indexPathString === null) {
-      return null;
-    }
-    var indexPath = parseIndexPath(indexPathString);
-    var maxIndex = maxIndexPath[maxIndexPath.length - 1];
-    var index = indexPath[indexPath.length - 1];
-    return {
-      maxIndex,
-      maxIndexPath,
-      index,
-      indexPath,
-      indexPathString,
-      isFirst: index === 0,
-      isLast: index === maxIndex,
-      isEven: index % 2 === 0,
-      isOdd: Math.abs(index % 2) === 1
-    };
-  }, [maxIndexPath, indexPathString]);
+	var maxIndexPath = React.useContext(MaxIndexContext);
+	var indexPathString = React.useContext(IndexContext);
+	return React.useMemo(function() {
+		if (indexPathString === null) {
+			return null;
+		}
+		var indexPath = parseIndexPath(indexPathString);
+		var maxIndex = maxIndexPath[maxIndexPath.length - 1];
+		var index = indexPath[indexPath.length - 1];
+		return {
+			maxIndex,
+			maxIndexPath,
+			index,
+			indexPath,
+			indexPathString,
+			isFirst: index === 0,
+			isLast: index === maxIndex,
+			isEven: index % 2 === 0,
+			isOdd: Math.abs(index % 2) === 1
+		};
+	}, [maxIndexPath, indexPathString]);
 }
 function useIndexedChildren(children) {
-  var parentMaxIndexPath = React.useContext(MaxIndexContext);
-  var indexPathString = React.useContext(IndexContext);
-  var childrenCount = React.Children.count(children);
-  var maxIndexPath = React.useMemo(function () {
-    return parentMaxIndexPath.concat(childrenCount - 1);
-  }, [childrenCount]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MaxIndexContext.Provider, {
-    value: maxIndexPath,
-    children: React.Children.map(children, function (child, index) {
-      return /* @__PURE__ */React.isValidElement(child) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IndexContext.Provider, {
-        value: indexPathString ? `${indexPathString}.${index.toString()}` : index.toString(),
-        children: child
-      }, child.key) : child;
-    })
-  });
+	var parentMaxIndexPath = React.useContext(MaxIndexContext);
+	var indexPathString = React.useContext(IndexContext);
+	var childrenCount = React.Children.count(children);
+	var maxIndexPath = React.useMemo(function() {
+		return parentMaxIndexPath.concat(childrenCount - 1);
+	}, [childrenCount]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaxIndexContext.Provider, {
+		value: maxIndexPath,
+		children: React.Children.map(children, function(child, index) {
+			return /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndexContext.Provider, {
+				value: indexPathString ? `${indexPathString}.${index.toString()}` : index.toString(),
+				children: child
+			}, child.key) : child;
+		})
+	});
 }
 function parseIndexPath(indexPathString) {
-  return indexPathString.split(".").map(function (index) {
-    return Number.parseInt(index, 10);
-  });
+	return indexPathString.split(".").map(function(index) {
+		return Number.parseInt(index, 10);
+	});
 }
+
 //# sourceMappingURL=useIndexedChildren.native.js.map

package/dist/jsx/useIndexedChildren.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toESM","mod","isNodeMode","__esModule","value","__toCommonJS","useIndexedChildren_exports","useIndex","useIndexedChildren","module","exports","import_jsx_runtime","require","React","MaxIndexContext","createContext","IndexContext","maxIndexPath","useContext","indexPathString","useMemo","indexPath","parseIndexPath","maxIndex","length","index"],"sources":["../../src/useIndexedChildren.tsx"],"sourcesContent":[null],"mappings":"AAyBA,YAAY;;AA+CF,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA;AA7CV,IAAAC,SAAM,GAAAF,MAAA,CAAAG,cAAwB;AAC9B,IAAAC,gBAAM,GAAeJ,MAAM,CAAAK,wBAAiC;AAGrD,IAAAC,iBAAoB,GAAAN,MAAA,CAAAO,mBAAA;AACzB,IAAAC,YAAM,GAAAR,MAAe,CAAAS,cAAiB;AACtC,IAAAC,YAAM,GAAAV,MAAA,CAAkBW,SAAM,CAAAC,cAAW;AAEzC,IAAAC,QAAO,GAAMA,CAAAC,MAAA,EAAQC,GAAA,KAAM;EACzB,SAAIC,IAAA,IAAAD,GAAA,EACFb,SAAO,CAAAY,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAAA;AAGT,IAAAC,WAAM,GAAAA,CAAAC,EAAA,EAAYC,IAAA,EAAAC,MAAA,EAAeC,IAAA;EACjC,IAAAF,IAAM,WAAWA,IAAA,aAAa,WAAaA,IAAA,KAAU;IACrD,SAAMG,GAAA,IAAQlB,iBAAU,CAAUe,IAAA,GAElC,KAAOX,YAAA,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACLpB,SAAA,CAAAkB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAnB,gBAAA,CAAAiB,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EAAA;EACA,OACAE,EAAA;AAAA;AACA,IAAAM,OACA,GAAAA,CAAAC,GAAA,EAAAC,UAAA,EAAAd,MAAA,MAAAA,MAAA,GAAAa,GAAA,WAAA5B,QAAA,CAAAS,YAAA,CAAAmB,GAAA,SAAAR,WAAA;AAAA;AACmB;AACD;AACI;AACSS,UACjC,KAAAD,GAAA,KAAAA,GAAA,CAAAE,UAAA,GAAA3B,SAAA,CAAAY,MAAA;EAAAgB,KAAA,EAAAH,GAAA;EAAAT,UAAA;AAAA,KAAAJ,MAAA,EACFa,GACF;AAGO,IAAAI,YAAS,GAAAJ,GAAA,IAAmBR,WAA2B,CAAAjB,SAAA;EAAA4B,KAAA;AAAA,IAAAH,GAAA;AAC5D,IAAAK,0BAA2B,KAAM;AACjCnB,QAAM,CAAAmB,0BAAwB;EAC9BC,QAAM,EAAAA,CAAA,KAAAA,QAAgB;EACtBC,kBAAM,EAAAA,CAAA,KAAeA;AAAM;AACwBC,MAChD,CAAAC,OAAA,GAAAL,YAAa,CAAAC,0BAAA;AAAA,IAChBK,kBAAA,GAAAC,OAAA;AAEA,IAAAC,KACE,GAAAb,OAAA,CAAAY,OAAA,QAAC;AACiB,IAAIE,eAAA,kBAAAD,KAAA,CAAAE,aAAA;AAAA,IAAUC,YAAQ,kBAC9BH,KAAA,CAAAE,aACJ;AAAA,SAACR,SAAA,EAAa;EAAA,IAAbU,YAAA,GAAAJ,KAAA,CAAAK,UAAA,CAAAJ,eAAA;EAAA,IAAAK,eAGG,GAAAN,KAAA,CAAAK,UACO,CAAAF,YAAe;EACH,OAGpBH,KAAA,CAAAO,OAAA;IAAA,IAAAD,eAAA;MAPI,OAAM;IAQb;IAIJ,IACFE,SAAA,GAAAC,cAAA,CAAAH,eAAA;IAEJ,IAAAI,QAAA,GAAAN,YAAA,CAAAA,YAAA,CAAAO,MAAA;IAQA,IAAAC,KAAS,GAAAJ,SAAe,CAAAA,SAAA,CAAAG,MAAyB;IAC/C,OAAO;MACTD,QAAA","ignoreList":[]}
+{"version":3,"file":"useIndexedChildren.native.js","names":[],"sources":["jsx/useIndexedChildren.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n  // If the importer is in node compatibility mode or this is not an ESM\n  // file that has been converted to a CommonJS file using a Babel-\n  // compatible transform (i.e. \"__esModule\" has not been set), then set\n  // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n  isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n  mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar useIndexedChildren_exports = {};\n__export(useIndexedChildren_exports, {\n  useIndex: () => useIndex,\n  useIndexedChildren: () => useIndexedChildren\n});\nmodule.exports = __toCommonJS(useIndexedChildren_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar React = __toESM(require(\"react\"), 1);\nvar MaxIndexContext = /* @__PURE__ */ React.createContext([]);\nvar IndexContext = /* @__PURE__ */ React.createContext(null);\nfunction useIndex() {\n  var maxIndexPath = React.useContext(MaxIndexContext);\n  var indexPathString = React.useContext(IndexContext);\n  return React.useMemo(function() {\n    if (indexPathString === null) {\n      return null;\n    }\n    var indexPath = parseIndexPath(indexPathString);\n    var maxIndex = maxIndexPath[maxIndexPath.length - 1];\n    var index = indexPath[indexPath.length - 1];\n    return {\n      maxIndex,\n      maxIndexPath,\n      index,\n      indexPath,\n      indexPathString,\n      isFirst: index === 0,\n      isLast: index === maxIndex,\n      isEven: index % 2 === 0,\n      isOdd: Math.abs(index % 2) === 1\n    };\n  }, [\n    maxIndexPath,\n    indexPathString\n  ]);\n}\nfunction useIndexedChildren(children) {\n  var parentMaxIndexPath = React.useContext(MaxIndexContext);\n  var indexPathString = React.useContext(IndexContext);\n  var childrenCount = React.Children.count(children);\n  var maxIndexPath = React.useMemo(function() {\n    return parentMaxIndexPath.concat(childrenCount - 1);\n  }, [\n    childrenCount\n  ]);\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaxIndexContext.Provider, {\n    value: maxIndexPath,\n    children: React.Children.map(children, function(child, index) {\n      return /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndexContext.Provider, {\n        value: indexPathString ? `${indexPathString}.${index.toString()}` : index.toString(),\n        children: child\n      }, child.key) : child;\n    })\n  });\n}\nfunction parseIndexPath(indexPathString) {\n  return indexPathString.split(\".\").map(function(index) {\n    return Number.parseInt(index, 10);\n  });\n}\n//# sourceMappingURL=useIndexedChildren.js.map\n"],"mappings":";;;;AACA,IAAI,WAAW,OAAO;AACtB,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO;AAC1B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,WAAW,KAAK,YAAY,YAAY,SAAS,OAAO,OAAO,SAAS,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,YAKnG,cAAc,CAAC,OAAO,CAAC,IAAI,aAAa,UAAU,QAAQ,WAAW;CAAE,OAAO;CAAK,YAAY;AAAK,CAAC,IAAI,QACzG,GACF;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,6BAA6B,CAAC;AAClC,SAAS,4BAA4B;CACnC,gBAAgB;CAChB,0BAA0B;AAC5B,CAAC;AACD,OAAO,UAAU,aAAa,0BAA0B;AACxD,IAAI,qBAAqB,QAAQ,mBAAmB;AACpD,IAAI,QAAQ,QAAQ,QAAQ,OAAO,GAAG,CAAC;AACvC,IAAI,kBAAkC,sBAAM,cAAc,CAAC,CAAC;AAC5D,IAAI,eAA+B,sBAAM,cAAc,IAAI;AAC3D,SAAS,WAAW;CAClB,IAAI,eAAe,MAAM,WAAW,eAAe;CACnD,IAAI,kBAAkB,MAAM,WAAW,YAAY;CACnD,OAAO,MAAM,QAAQ,WAAW;EAC9B,IAAI,oBAAoB,MAAM;GAC5B,OAAO;EACT;EACA,IAAI,YAAY,eAAe,eAAe;EAC9C,IAAI,WAAW,aAAa,aAAa,SAAS;EAClD,IAAI,QAAQ,UAAU,UAAU,SAAS;EACzC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,QAAQ,QAAQ,MAAM;GACtB,OAAO,KAAK,IAAI,QAAQ,CAAC,MAAM;EACjC;CACF,GAAG,CACD,cACA,eACF,CAAC;AACH;AACA,SAAS,mBAAmB,UAAU;CACpC,IAAI,qBAAqB,MAAM,WAAW,eAAe;CACzD,IAAI,kBAAkB,MAAM,WAAW,YAAY;CACnD,IAAI,gBAAgB,MAAM,SAAS,MAAM,QAAQ;CACjD,IAAI,eAAe,MAAM,QAAQ,WAAW;EAC1C,OAAO,mBAAmB,OAAO,gBAAgB,CAAC;CACpD,GAAG,CACD,aACF,CAAC;CACD,OAAuB,iBAAC,GAAG,mBAAmB,KAAK,gBAAgB,UAAU;EAC3E,OAAO;EACP,UAAU,MAAM,SAAS,IAAI,UAAU,SAAS,OAAO,OAAO;GAC5D,OAAuB,sBAAM,eAAe,KAAK,IAAoB,iBAAC,GAAG,mBAAmB,KAAK,aAAa,UAAU;IACtH,OAAO,kBAAkB,GAAG,gBAAgB,GAAG,MAAM,SAAS,MAAM,MAAM,SAAS;IACnF,UAAU;GACZ,GAAG,MAAM,GAAG,IAAI;EAClB,CAAC;CACH,CAAC;AACH;AACA,SAAS,eAAe,iBAAiB;CACvC,OAAO,gBAAgB,MAAM,GAAG,EAAE,IAAI,SAAS,OAAO;EACpD,OAAO,OAAO,SAAS,OAAO,EAAE;CAClC,CAAC;AACH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/group",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.643.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "source": "src/index.ts",
   "files": [
@@ -35,17 +35,17 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "2.7.7",
-    "@tamagui/create-context": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/spacer": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/use-controllable-state": "2.7.7"
+    "@tamagui/core": "3.0.0-beta.643.1",
+    "@tamagui/create-context": "3.0.0-beta.643.1",
+    "@tamagui/helpers": "3.0.0-beta.643.1",
+    "@tamagui/spacer": "3.0.0-beta.643.1",
+    "@tamagui/stacks": "3.0.0-beta.643.1",
+    "@tamagui/use-controllable-state": "3.0.0-beta.643.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.643.1",
     "react": ">=19",
-    "react-native": "0.83.2"
+    "react-native": "0.86.2"
   },
   "peerDependencies": {
     "react": ">=19"

package/src/Group.tsx

@@ -1,5 +1,10 @@
-import type { GetProps } from '@tamagui/core'
-import { mergeSlotStyleProps, styled } from '@tamagui/core'
+import type { GetProps, VariantSpreadExtras } from '@tamagui/core'
+import {
+  createStyledHOC,
+  mergeSlotStyleProps,
+  resolveSizeToken,
+  styled,
+} from '@tamagui/core'
 import type { Scope } from '@tamagui/create-context'
 import { createContextScope } from '@tamagui/create-context'
 import { withStaticProperties } from '@tamagui/helpers'
@@ -18,27 +23,23 @@ type ScopedProps<P> = P & { __scopeGroup?: Scope }
 const [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)
 const [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)
 
+const groupSizeVariant = (val: any, { tokens }: VariantSpreadExtras<any>) => {
+  const radiusToken = resolveSizeToken(val, 'radius')
+  return {
+    borderRadius: tokens.radius[radiusToken] ?? radiusToken,
+  }
+}
+
 export const GroupFrame = styled(YStack, {
-  name: 'GroupFrame',
+  displayName: 'GroupFrame',
+  size: true,
 
   variants: {
-    unstyled: {
-      false: {
-        size: '$true',
-      },
-    },
-
-    size: (val, { tokens }) => {
-      const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']
-      return {
-        borderRadius,
-      }
+    size: {
+      true: groupSizeVariant,
+      any: groupSizeVariant,
     },
   } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
 export type GroupExtraProps = {
@@ -50,7 +51,7 @@ export type GroupProps = GetProps<typeof GroupFrame> & GroupExtraProps
 
 function createGroup(verticalDefault: boolean) {
   return withStaticProperties(
-    GroupFrame.styleable<ScopedProps<GroupExtraProps>>((props, ref) => {
+    createStyledHOC(GroupFrame, (props: ScopedProps<GroupProps>, ref) => {
       const {
         __scopeGroup,
         children: childrenProp,