expo-router 7.0.0-canary-20251211-7da85ea → 7.0.0-canary-20251216-6e1f9a7

package/build/layouts/stack-utils/StackHeaderMenu.d.ts

@@ -0,0 +1,191 @@
+import type { NativeStackHeaderItemMenu, NativeStackHeaderItemMenuAction } from '@react-navigation/native-stack';
+import { type ReactNode } from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
+import { type StackHeaderItemSharedProps } from './shared';
+export interface StackHeaderMenuProps extends StackHeaderItemSharedProps {
+    /**
+     * Optional title to show on top of the menu.
+     */
+    title?: string;
+    /**
+     * If `true`, the menu will be displayed inline.
+     * This means that the menu will not be collapsed
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline) for more information.
+     */
+    inline?: boolean;
+    /**
+     * If `true`, the menu will be displayed as a palette.
+     * This means that the menu will be displayed as one row
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette) for more information.
+     */
+    palette?: boolean;
+    /**
+     * If `true`, the menu item will be displayed as destructive.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.
+     */
+    destructive?: boolean;
+}
+/**
+ * Component representing menu for `Stack.Header.Right` or `Stack.Header.Left`.
+ *
+ * Use as `Stack.Header.Menu` to provide top-level menus on iOS header bars.
+ * It accepts `Stack.Header.MenuAction` and nested `Stack.Header.Menu`
+ * elements. Menu can be configured using both component props and child
+ * elements.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ * import { Alert } from 'react-native';
+ *
+ * export default function Screen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Right>
+ *             <Stack.Header.Menu>
+ *               <Stack.Header.Label>Menu</Stack.Header.Label>
+ *               <Stack.Header.Icon sf="ellipsis.circle" />
+ *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>
+ *                 Action 1
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.MenuAction isOn icon="star.fill">
+ *                 Action 2
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.Menu inline>
+ *                 <Stack.Header.MenuAction isOn>Sub Action</Stack.Header.MenuAction>
+ *               </Stack.Header.Menu>
+ *             </Stack.Header.Menu>
+ *           </Stack.Header.Right>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ * import { Text } from 'react-native';
+ *
+ * export default function Screen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Left>
+ *             <Stack.Header.Menu>
+ *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>
+ *                 Action 1
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.Menu inline palette title="Icons">
+ *                 <Stack.Header.MenuAction isOn icon="star.fill" />
+ *                 <Stack.Header.MenuAction icon="heart.fill" />
+ *               </Stack.Header.Menu>
+ *             </Stack.Header.Menu>
+ *           </Stack.Header.Left>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.
+ *
+ * @platform ios
+ */
+export declare const StackHeaderMenu: React.FC<StackHeaderMenuProps>;
+export declare function convertStackHeaderMenuPropsToRNHeaderItem(props: StackHeaderMenuProps): NativeStackHeaderItemMenu;
+export interface StackHeaderMenuActionProps {
+    /**
+     * Can be an Icon, Label or string title.
+     */
+    children?: ReactNode;
+    /**
+     * If `true`, the menu item will be disabled and not selectable.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/disabled) for more information.
+     */
+    disabled?: boolean;
+    icon?: SFSymbol | ImageSourcePropType;
+    /**
+     * If `true`, the menu item will be displayed as destructive.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.
+     */
+    destructive?: boolean;
+    /**
+     * If `true`, the menu will be kept presented after the action is selected.
+     *
+     * This is marked as unstable, because when action is selected it will recreate the menu,
+     * which will close all opened submenus and reset the scroll position.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/keepsmenupresented) for more information.
+     */
+    unstable_keepPresented?: boolean;
+    /**
+     * If `true`, the menu item will be displayed as selected.
+     */
+    isOn?: boolean;
+    onPress?: () => void;
+    /**
+     * An elaborated title that explains the purpose of the action.
+     */
+    discoverabilityLabel?: string;
+    /**
+     * An optional subtitle for the menu item.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/subtitle) for more information.
+     */
+    subtitle?: string;
+    hidden?: boolean;
+}
+/**
+ * An action item for a `Stack.Header.Menu`.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Alert } from 'react-native';
+ * import { Stack, Label, Icon } from 'expo-router';
+ *
+ * export default function ExampleScreen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Right>
+ *             <Stack.Header.Menu icon="ellipsis.circle">
+ *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>
+ *                 Action 1
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.MenuAction isOn onPress={() => Alert.alert('Action 2 pressed!')}>
+ *                 <Label>Action 2</Label>
+ *                 <Icon sf="star.fill" />
+ *               </Stack.Header.MenuAction>
+ *             </Stack.Header.Menu>
+ *           </Stack.Header.Right>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.
+ *
+ * @platform ios
+ */
+export declare const StackHeaderMenuAction: React.FC<StackHeaderMenuActionProps>;
+export declare function convertStackHeaderMenuActionPropsToRNHeaderItem(props: StackHeaderMenuActionProps): NativeStackHeaderItemMenuAction;
+//# sourceMappingURL=StackHeaderMenu.d.ts.map

package/build/layouts/stack-utils/StackHeaderMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackHeaderMenu.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,+BAA+B,EAEhC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B;IACtE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAQ,CAAC;AAEpE,wBAAgB,yCAAyC,CACvD,KAAK,EAAE,oBAAoB,GAC1B,yBAAyB,CAsB3B;AAiDD,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,mBAAmB,CAAC;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAc,CAAC;AAEtF,wBAAgB,+CAA+C,CAC7D,KAAK,EAAE,0BAA0B,GAChC,+BAA+B,CAwBjC"}

package/build/layouts/stack-utils/StackHeaderMenu.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackHeaderMenuAction = exports.StackHeaderMenu = void 0;
+exports.convertStackHeaderMenuPropsToRNHeaderItem = convertStackHeaderMenuPropsToRNHeaderItem;
+exports.convertStackHeaderMenuActionPropsToRNHeaderItem = convertStackHeaderMenuActionPropsToRNHeaderItem;
+const react_1 = require("react");
+const shared_1 = require("./shared");
+const primitives_1 = require("../../primitives");
+const children_1 = require("../../utils/children");
+/**
+ * Component representing menu for `Stack.Header.Right` or `Stack.Header.Left`.
+ *
+ * Use as `Stack.Header.Menu` to provide top-level menus on iOS header bars.
+ * It accepts `Stack.Header.MenuAction` and nested `Stack.Header.Menu`
+ * elements. Menu can be configured using both component props and child
+ * elements.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ * import { Alert } from 'react-native';
+ *
+ * export default function Screen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Right>
+ *             <Stack.Header.Menu>
+ *               <Stack.Header.Label>Menu</Stack.Header.Label>
+ *               <Stack.Header.Icon sf="ellipsis.circle" />
+ *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>
+ *                 Action 1
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.MenuAction isOn icon="star.fill">
+ *                 Action 2
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.Menu inline>
+ *                 <Stack.Header.MenuAction isOn>Sub Action</Stack.Header.MenuAction>
+ *               </Stack.Header.Menu>
+ *             </Stack.Header.Menu>
+ *           </Stack.Header.Right>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ * import { Text } from 'react-native';
+ *
+ * export default function Screen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Left>
+ *             <Stack.Header.Menu>
+ *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>
+ *                 Action 1
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.Menu inline palette title="Icons">
+ *                 <Stack.Header.MenuAction isOn icon="star.fill" />
+ *                 <Stack.Header.MenuAction icon="heart.fill" />
+ *               </Stack.Header.Menu>
+ *             </Stack.Header.Menu>
+ *           </Stack.Header.Left>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.
+ *
+ * @platform ios
+ */
+exports.StackHeaderMenu = primitives_1.Menu;
+function convertStackHeaderMenuPropsToRNHeaderItem(props) {
+    const { title, ...rest } = props;
+    const actions = react_1.Children.toArray(props.children).filter((child) => (0, children_1.isChildOfType)(child, exports.StackHeaderMenuAction) || (0, children_1.isChildOfType)(child, exports.StackHeaderMenu));
+    const item = {
+        ...(0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(rest),
+        type: 'menu',
+        menu: {
+            items: actions.map((action) => {
+                if ((0, children_1.isChildOfType)(action, exports.StackHeaderMenu)) {
+                    return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);
+                }
+                return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);
+            }),
+        },
+    };
+    if (title) {
+        item.menu.title = title;
+    }
+    return item;
+}
+function convertStackHeaderSubmenuMenuPropsToRNHeaderItem(props) {
+    // Removing children. Otherwise the buttons will be broken
+    const sharedProps = (0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(props);
+    const actions = react_1.Children.toArray(props.children).filter((child) => (0, children_1.isChildOfType)(child, exports.StackHeaderMenuAction) || (0, children_1.isChildOfType)(child, exports.StackHeaderMenu));
+    // TODO: Remove  Pick<HeaderBarButtonItemSubmenu> when this PR is merged and released in react-navigation:
+    // https://github.com/react-navigation/react-navigation/pull/12895
+    const item = {
+        type: 'submenu',
+        items: actions.map((action) => {
+            if ((0, children_1.isChildOfType)(action, exports.StackHeaderMenu)) {
+                return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);
+            }
+            return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);
+        }),
+        label: sharedProps.label || props.title || '',
+    };
+    if (props.inline !== undefined) {
+        item.displayInline = props.inline;
+    }
+    if (props.palette !== undefined) {
+        item.displayAsPalette = props.palette;
+    }
+    if (props.destructive !== undefined) {
+        item.destructive = props.destructive;
+    }
+    if (sharedProps.icon) {
+        // Only SF Symbols are supported in submenu icons
+        if (sharedProps.icon.type === 'sfSymbol') {
+            item.icon = sharedProps.icon;
+        }
+        else {
+            console.warn('When Icon is used inside Stack.Header.Menu used as a submenu, only sfSymbol icons are supported. This is a limitation of React Native Screens.');
+        }
+    }
+    return item;
+}
+/**
+ * An action item for a `Stack.Header.Menu`.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Alert } from 'react-native';
+ * import { Stack, Label, Icon } from 'expo-router';
+ *
+ * export default function ExampleScreen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Right>
+ *             <Stack.Header.Menu icon="ellipsis.circle">
+ *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>
+ *                 Action 1
+ *               </Stack.Header.MenuAction>
+ *               <Stack.Header.MenuAction isOn onPress={() => Alert.alert('Action 2 pressed!')}>
+ *                 <Label>Action 2</Label>
+ *                 <Icon sf="star.fill" />
+ *               </Stack.Header.MenuAction>
+ *             </Stack.Header.Menu>
+ *           </Stack.Header.Right>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.
+ *
+ * @platform ios
+ */
+exports.StackHeaderMenuAction = primitives_1.MenuAction;
+function convertStackHeaderMenuActionPropsToRNHeaderItem(props) {
+    const { children, isOn, unstable_keepPresented, icon, ...rest } = props;
+    const sharedProps = (0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(props);
+    const item = {
+        ...rest,
+        type: 'action',
+        label: sharedProps.label,
+        state: isOn ? 'on' : 'off',
+        onPress: props.onPress ?? (() => { }),
+    };
+    if (unstable_keepPresented !== undefined) {
+        item.keepsMenuPresented = unstable_keepPresented;
+    }
+    if (sharedProps.icon) {
+        // Only SF Symbols are supported in action icons
+        if (sharedProps.icon.type === 'sfSymbol') {
+            item.icon = sharedProps.icon;
+        }
+        else {
+            console.warn('When Icon is used inside Stack.Header.Menu.Action, only sfSymbol icons are supported. This is a limitation of React Native Screens.');
+        }
+    }
+    return item;
+}
+//# sourceMappingURL=StackHeaderMenu.js.map

package/build/layouts/stack-utils/StackHeaderMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackHeaderMenu.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  NativeStackHeaderItemMenu,\n  NativeStackHeaderItemMenuAction,\n  NativeStackHeaderItemMenuSubmenu,\n} from '@react-navigation/native-stack';\nimport { Children, type ReactNode } from 'react';\nimport type { ImageSourcePropType } from 'react-native';\nimport type { HeaderBarButtonItemSubmenu } from 'react-native-screens';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport {\n  convertStackHeaderSharedPropsToRNSharedHeaderItem,\n  type StackHeaderItemSharedProps,\n} from './shared';\nimport { Menu, MenuAction } from '../../primitives';\nimport { isChildOfType } from '../../utils/children';\n\nexport interface StackHeaderMenuProps extends StackHeaderItemSharedProps {\n  /**\n   * Optional title to show on top of the menu.\n   */\n  title?: string;\n  /**\n   * If `true`, the menu will be displayed inline.\n   * This means that the menu will not be collapsed\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline) for more information.\n   */\n  inline?: boolean;\n  /**\n   * If `true`, the menu will be displayed as a palette.\n   * This means that the menu will be displayed as one row\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette) for more information.\n   */\n  palette?: boolean;\n  /**\n   * If `true`, the menu item will be displayed as destructive.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.\n   */\n  destructive?: boolean;\n}\n\n/**\n * Component representing menu for `Stack.Header.Right` or `Stack.Header.Left`.\n *\n * Use as `Stack.Header.Menu` to provide top-level menus on iOS header bars.\n * It accepts `Stack.Header.MenuAction` and nested `Stack.Header.Menu`\n * elements. Menu can be configured using both component props and child\n * elements.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n * import { Alert } from 'react-native';\n *\n * export default function Screen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Right>\n *             <Stack.Header.Menu>\n *               <Stack.Header.Label>Menu</Stack.Header.Label>\n *               <Stack.Header.Icon sf=\"ellipsis.circle\" />\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.MenuAction isOn icon=\"star.fill\">\n *                 Action 2\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.Menu inline>\n *                 <Stack.Header.MenuAction isOn>Sub Action</Stack.Header.MenuAction>\n *               </Stack.Header.Menu>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n * import { Text } from 'react-native';\n *\n * export default function Screen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Left>\n *             <Stack.Header.Menu>\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.Menu inline palette title=\"Icons\">\n *                 <Stack.Header.MenuAction isOn icon=\"star.fill\" />\n *                 <Stack.Header.MenuAction icon=\"heart.fill\" />\n *               </Stack.Header.Menu>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Left>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.\n *\n * @platform ios\n */\nexport const StackHeaderMenu: React.FC<StackHeaderMenuProps> = Menu;\n\nexport function convertStackHeaderMenuPropsToRNHeaderItem(\n  props: StackHeaderMenuProps\n): NativeStackHeaderItemMenu {\n  const { title, ...rest } = props;\n  const actions = Children.toArray(props.children).filter(\n    (child) => isChildOfType(child, StackHeaderMenuAction) || isChildOfType(child, StackHeaderMenu)\n  );\n  const item: NativeStackHeaderItemMenu = {\n    ...convertStackHeaderSharedPropsToRNSharedHeaderItem(rest),\n    type: 'menu',\n    menu: {\n      items: actions.map((action) => {\n        if (isChildOfType(action, StackHeaderMenu)) {\n          return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);\n        }\n        return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);\n      }),\n    },\n  };\n  if (title) {\n    item.menu.title = title;\n  }\n\n  return item;\n}\n\nfunction convertStackHeaderSubmenuMenuPropsToRNHeaderItem(\n  props: StackHeaderMenuProps\n): NativeStackHeaderItemMenuSubmenu {\n  // Removing children. Otherwise the buttons will be broken\n  const sharedProps = convertStackHeaderSharedPropsToRNSharedHeaderItem(props);\n  const actions = Children.toArray(props.children).filter(\n    (child) => isChildOfType(child, StackHeaderMenuAction) || isChildOfType(child, StackHeaderMenu)\n  );\n\n  // TODO: Remove  Pick<HeaderBarButtonItemSubmenu> when this PR is merged and released in react-navigation:\n  // https://github.com/react-navigation/react-navigation/pull/12895\n  const item: NativeStackHeaderItemMenuSubmenu &\n    Pick<HeaderBarButtonItemSubmenu, 'displayAsPalette' | 'displayInline' | 'destructive'> = {\n    type: 'submenu',\n    items: actions.map((action) => {\n      if (isChildOfType(action, StackHeaderMenu)) {\n        return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);\n      }\n      return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);\n    }),\n    label: sharedProps.label || props.title || '',\n  };\n\n  if (props.inline !== undefined) {\n    item.displayInline = props.inline;\n  }\n  if (props.palette !== undefined) {\n    item.displayAsPalette = props.palette;\n  }\n  if (props.destructive !== undefined) {\n    item.destructive = props.destructive;\n  }\n\n  if (sharedProps.icon) {\n    // Only SF Symbols are supported in submenu icons\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Header.Menu used as a submenu, only sfSymbol icons are supported. This is a limitation of React Native Screens.'\n      );\n    }\n  }\n\n  return item;\n}\n\nexport interface StackHeaderMenuActionProps {\n  /**\n   * Can be an Icon, Label or string title.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the menu item will be disabled and not selectable.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/disabled) for more information.\n   */\n  disabled?: boolean;\n  icon?: SFSymbol | ImageSourcePropType;\n  /**\n   * If `true`, the menu item will be displayed as destructive.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.\n   */\n  destructive?: boolean;\n  /**\n   * If `true`, the menu will be kept presented after the action is selected.\n   *\n   * This is marked as unstable, because when action is selected it will recreate the menu,\n   * which will close all opened submenus and reset the scroll position.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/keepsmenupresented) for more information.\n   */\n  unstable_keepPresented?: boolean;\n  /**\n   * If `true`, the menu item will be displayed as selected.\n   */\n  isOn?: boolean;\n  onPress?: () => void;\n  /**\n   * An elaborated title that explains the purpose of the action.\n   */\n  discoverabilityLabel?: string;\n  /**\n   * An optional subtitle for the menu item.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/subtitle) for more information.\n   */\n  subtitle?: string;\n  hidden?: boolean;\n}\n\n/**\n * An action item for a `Stack.Header.Menu`.\n *\n * @example\n * ```tsx\n * import React from 'react';\n * import { Alert } from 'react-native';\n * import { Stack, Label, Icon } from 'expo-router';\n *\n * export default function ExampleScreen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Right>\n *             <Stack.Header.Menu icon=\"ellipsis.circle\">\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.MenuAction isOn onPress={() => Alert.alert('Action 2 pressed!')}>\n *                 <Label>Action 2</Label>\n *                 <Icon sf=\"star.fill\" />\n *               </Stack.Header.MenuAction>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.\n *\n * @platform ios\n */\nexport const StackHeaderMenuAction: React.FC<StackHeaderMenuActionProps> = MenuAction;\n\nexport function convertStackHeaderMenuActionPropsToRNHeaderItem(\n  props: StackHeaderMenuActionProps\n): NativeStackHeaderItemMenuAction {\n  const { children, isOn, unstable_keepPresented, icon, ...rest } = props;\n  const sharedProps = convertStackHeaderSharedPropsToRNSharedHeaderItem(props);\n  const item: NativeStackHeaderItemMenuAction = {\n    ...rest,\n    type: 'action',\n    label: sharedProps.label,\n    state: isOn ? 'on' : 'off',\n    onPress: props.onPress ?? (() => {}),\n  };\n  if (unstable_keepPresented !== undefined) {\n    item.keepsMenuPresented = unstable_keepPresented;\n  }\n  if (sharedProps.icon) {\n    // Only SF Symbols are supported in action icons\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Header.Menu.Action, only sfSymbol icons are supported. This is a limitation of React Native Screens.'\n      );\n    }\n  }\n  return item;\n}\n"]}

package/build/layouts/stack-utils/StackHeaderSpacer.d.ts

@@ -0,0 +1,40 @@
+import type { NativeStackHeaderItemSpacing } from '@react-navigation/native-stack';
+export interface StackHeaderSpacerProps {
+    /**
+     * The width of the spacing element.
+     *
+     * This is typically used to create space between header elements.
+     */
+    width: number;
+}
+/**
+ * A spacing helper used inside `Stack.Header.Left` or `Stack.Header.Right` to create
+ * empty space between header items.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Screen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Left>
+ *             <Stack.Header.Button icon="arrow.left" />
+ *             <Stack.Header.Spacer width={8} />
+ *             <Stack.Header.Button icon="arrow.right" />
+ *           </Stack.Header.Left>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+export declare const StackHeaderSpacer: React.FC<StackHeaderSpacerProps>;
+export declare function convertStackHeaderSpacerPropsToRNHeaderItem(props: StackHeaderSpacerProps): NativeStackHeaderItemSpacing;
+//# sourceMappingURL=StackHeaderSpacer.d.ts.map

package/build/layouts/stack-utils/StackHeaderSpacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackHeaderSpacer.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderSpacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAEnF,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAc,CAAC;AAE9E,wBAAgB,2CAA2C,CACzD,KAAK,EAAE,sBAAsB,GAC5B,4BAA4B,CAK9B"}

package/build/layouts/stack-utils/StackHeaderSpacer.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackHeaderSpacer = void 0;
+exports.convertStackHeaderSpacerPropsToRNHeaderItem = convertStackHeaderSpacerPropsToRNHeaderItem;
+/**
+ * A spacing helper used inside `Stack.Header.Left` or `Stack.Header.Right` to create
+ * empty space between header items.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Screen() {
+ *   return (
+ *     <>
+ *       <ScreenContent />
+ *       <Stack.Screen>
+ *         <Stack.Header>
+ *           <Stack.Header.Left>
+ *             <Stack.Header.Button icon="arrow.left" />
+ *             <Stack.Header.Spacer width={8} />
+ *             <Stack.Header.Button icon="arrow.right" />
+ *           </Stack.Header.Left>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+const StackHeaderSpacer = () => null;
+exports.StackHeaderSpacer = StackHeaderSpacer;
+function convertStackHeaderSpacerPropsToRNHeaderItem(props) {
+    return {
+        type: 'spacing',
+        spacing: props.width,
+    };
+}
+//# sourceMappingURL=StackHeaderSpacer.js.map

package/build/layouts/stack-utils/StackHeaderSpacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackHeaderSpacer.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderSpacer.tsx"],"names":[],"mappings":";;;AAyCA,kGAOC;AArCD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACI,MAAM,iBAAiB,GAAqC,GAAG,EAAE,CAAC,IAAI,CAAC;AAAjE,QAAA,iBAAiB,qBAAgD;AAE9E,SAAgB,2CAA2C,CACzD,KAA6B;IAE7B,OAAO;QACL,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,KAAK,CAAC,KAAK;KACrB,CAAC;AACJ,CAAC","sourcesContent":["import type { NativeStackHeaderItemSpacing } from '@react-navigation/native-stack';\n\nexport interface StackHeaderSpacerProps {\n  /**\n   * The width of the spacing element.\n   *\n   * This is typically used to create space between header elements.\n   */\n  width: number;\n}\n\n/**\n * A spacing helper used inside `Stack.Header.Left` or `Stack.Header.Right` to create\n * empty space between header items.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Screen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Left>\n *             <Stack.Header.Button icon=\"arrow.left\" />\n *             <Stack.Header.Spacer width={8} />\n *             <Stack.Header.Button icon=\"arrow.right\" />\n *           </Stack.Header.Left>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @platform ios\n */\nexport const StackHeaderSpacer: React.FC<StackHeaderSpacerProps> = () => null;\n\nexport function convertStackHeaderSpacerPropsToRNHeaderItem(\n  props: StackHeaderSpacerProps\n): NativeStackHeaderItemSpacing {\n  return {\n    type: 'spacing',\n    spacing: props.width,\n  };\n}\n"]}

package/build/layouts/stack-utils/common-primitives.d.ts

@@ -0,0 +1,24 @@
+import { type ImageSourcePropType, type StyleProp, type TextStyle } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
+export interface StackHeaderLabelProps {
+    /**
+     * The text to display as the label for the tab.
+     */
+    children?: string;
+}
+export declare const StackHeaderLabel: React.FC<StackHeaderLabelProps>;
+export type StackHeaderIconProps = {
+    src: ImageSourcePropType;
+} | {
+    sf: SFSymbol;
+};
+export declare const StackHeaderIcon: React.FC<StackHeaderIconProps>;
+export interface StackHeaderBadgeProps {
+    /**
+     * The text to display as the badge
+     */
+    children?: string;
+    style?: StyleProp<Pick<TextStyle, 'fontFamily' | 'fontSize' | 'color' | 'fontWeight' | 'backgroundColor'>>;
+}
+export declare const StackHeaderBadge: React.FC<StackHeaderBadgeProps>;
+//# sourceMappingURL=common-primitives.d.ts.map

package/build/layouts/stack-utils/common-primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-primitives.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/common-primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAS,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAC5B;IAEE,GAAG,EAAE,mBAAmB,CAAC;CAC1B,GACD;IACE,EAAE,EAAE,QAAQ,CAAC;CACd,CAAC;AAEN,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAQ,CAAC;AAEpE,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,SAAS,CACf,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,CAAC,CACxF,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAS,CAAC"}

package/build/layouts/stack-utils/common-primitives.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackHeaderBadge = exports.StackHeaderIcon = exports.StackHeaderLabel = void 0;
+const primitives_1 = require("../../primitives");
+exports.StackHeaderLabel = primitives_1.Label;
+exports.StackHeaderIcon = primitives_1.Icon;
+exports.StackHeaderBadge = primitives_1.Badge;
+//# sourceMappingURL=common-primitives.js.map

package/build/layouts/stack-utils/common-primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-primitives.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/common-primitives.tsx"],"names":[],"mappings":";;;AAGA,iDAAsD;AASzC,QAAA,gBAAgB,GAAoC,kBAAK,CAAC;AAW1D,QAAA,eAAe,GAAmC,iBAAI,CAAC;AAavD,QAAA,gBAAgB,GAAoC,kBAAK,CAAC","sourcesContent":["import { type ImageSourcePropType, type StyleProp, type TextStyle } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport { Badge, Icon, Label } from '../../primitives';\n\nexport interface StackHeaderLabelProps {\n  /**\n   * The text to display as the label for the tab.\n   */\n  children?: string;\n}\n\nexport const StackHeaderLabel: React.FC<StackHeaderLabelProps> = Label;\n\nexport type StackHeaderIconProps =\n  | {\n      // TODO: add support for vector icons\n      src: ImageSourcePropType;\n    }\n  | {\n      sf: SFSymbol;\n    };\n\nexport const StackHeaderIcon: React.FC<StackHeaderIconProps> = Icon;\n\nexport interface StackHeaderBadgeProps {\n  /**\n   * The text to display as the badge\n   */\n  children?: string;\n\n  style?: StyleProp<\n    Pick<TextStyle, 'fontFamily' | 'fontSize' | 'color' | 'fontWeight' | 'backgroundColor'>\n  >;\n}\n\nexport const StackHeaderBadge: React.FC<StackHeaderBadgeProps> = Badge;\n"]}

package/build/layouts/stack-utils/index.d.ts

@@ -1,16 +1,29 @@
 import { StackHeaderBackButton, type StackHeaderBackButtonProps } from './StackHeaderBackButton';
+import { StackHeaderButton, type StackHeaderButtonProps } from './StackHeaderButton';
 import { StackHeaderComponent, type StackHeaderProps } from './StackHeaderComponent';
-import { StackHeaderLeft, type StackHeaderLeftProps } from './StackHeaderLeft';
-import { StackHeaderRight, type StackHeaderRightProps } from './StackHeaderRight';
+import { StackHeaderItem, type StackHeaderItemProps } from './StackHeaderItem';
+import { StackHeaderLeft, type StackHeaderLeftProps, StackHeaderRight, type StackHeaderRightProps } from './StackHeaderLeftRight';
+import { StackHeaderMenu, StackHeaderMenuAction, type StackHeaderMenuActionProps, type StackHeaderMenuProps } from './StackHeaderMenu';
 import { StackHeaderSearchBar, type StackHeaderSearchBarProps } from './StackHeaderSearchBar';
+import { StackHeaderSpacer, type StackHeaderSpacerProps } from './StackHeaderSpacer';
 import { StackHeaderTitle, type StackHeaderTitleProps } from './StackHeaderTitle';
+import { StackHeaderBadge, StackHeaderIcon, StackHeaderLabel, type StackHeaderBadgeProps, type StackHeaderIconProps, type StackHeaderLabelProps } from './common-primitives';
+import type { StackHeaderItemSharedProps } from './shared';
 export declare const StackHeader: typeof StackHeaderComponent & {
     Left: typeof StackHeaderLeft;
     Right: typeof StackHeaderRight;
     BackButton: typeof StackHeaderBackButton;
     Title: typeof StackHeaderTitle;
     SearchBar: typeof StackHeaderSearchBar;
+    Button: import("react").FC<StackHeaderButtonProps>;
+    Badge: import("react").FC<StackHeaderBadgeProps>;
+    Label: import("react").FC<StackHeaderLabelProps>;
+    Icon: import("react").FC<StackHeaderIconProps>;
+    Menu: import("react").FC<StackHeaderMenuProps>;
+    MenuAction: import("react").FC<StackHeaderMenuActionProps>;
+    Item: import("react").FC<StackHeaderItemProps>;
+    Spacer: import("react").FC<StackHeaderSpacerProps>;
 };
-export { StackHeaderBackButton, type StackHeaderBackButtonProps, StackHeaderComponent, type StackHeaderProps, StackHeaderLeft, type StackHeaderLeftProps, StackHeaderRight, type StackHeaderRightProps, StackHeaderSearchBar, type StackHeaderSearchBarProps, StackHeaderTitle, type StackHeaderTitleProps, };
+export { StackHeaderBackButton, type StackHeaderBackButtonProps, type StackHeaderProps, StackHeaderLeft, type StackHeaderLeftProps, StackHeaderRight, type StackHeaderRightProps, StackHeaderSearchBar, type StackHeaderSearchBarProps, StackHeaderTitle, type StackHeaderTitleProps, StackHeaderButton, type StackHeaderButtonProps, StackHeaderBadge, type StackHeaderBadgeProps, StackHeaderLabel, type StackHeaderLabelProps, StackHeaderIcon, type StackHeaderIconProps, StackHeaderMenu, type StackHeaderMenuProps, StackHeaderMenuAction, type StackHeaderMenuActionProps, StackHeaderItem, type StackHeaderItemProps, StackHeaderSpacer, type StackHeaderSpacerProps, type StackHeaderItemSharedProps, };
 export { StackScreen, appendScreenStackPropsToOptions, type StackScreenProps } from './StackScreen';
 //# sourceMappingURL=index.d.ts.map

package/build/layouts/stack-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAAE,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAElF,eAAO,MAAM,WAAW;;;;;;CAMtB,CAAC;AAEH,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,oBAAoB,EACpB,KAAK,gBAAgB,EACrB,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,CAAC;AACF,OAAO,EAAE,WAAW,EAAE,+BAA+B,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,eAAO,MAAM,WAAW;;;;;;;;;;;;;;CActB,CAAC;AAEH,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,gBAAgB,EACrB,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,eAAe,EACf,KAAK,oBAAoB,EACzB,eAAe,EACf,KAAK,oBAAoB,EACzB,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,eAAe,EACf,KAAK,oBAAoB,EACzB,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,GAChC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,+BAA+B,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}