@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/multi-content-module/__stories__/MultiContentModule.stories.js

@@ -0,0 +1,390 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useState } from 'react';
+import { Path, Svg } from 'react-native-svg';
+import { Button } from '../../buttons';
+import { ButtonGroup } from '../../buttons/ButtonGroup';
+import { CellMedia, ListCell } from '../../cells';
+import { TextInput } from '../../controls';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../../icons';
+import { Box, Divider, HStack, VStack } from '../../layout';
+import { Avatar } from '../../media';
+import { Modal, ModalBody, ModalHeader } from '../../overlays';
+import { Pressable } from '../../system/Pressable';
+import { Text } from '../../typography/Text';
+import { MultiContentModule } from '../MultiContentModule';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const onPressConsole = () => console.log('onPress');
+const PasskeyIcon = () => {
+  const {
+    activeColorScheme
+  } = useTheme();
+  const size = 24;
+  const fill = activeColorScheme === 'dark' ? 'white' : 'black';
+  return /*#__PURE__*/_jsx(Svg, {
+    fill: "none",
+    height: size,
+    viewBox: "0 0 16 17",
+    width: size,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "M5.373.219C4.025.506 2.899 1.637 2.556 3.04c-.119.487-.119 1.298 0 1.784.347 1.423 1.465 2.53 2.848 2.822.225.048.447.06.897.048.506-.02.64-.036.928-.133.798-.264 1.391-.686 1.857-1.326.297-.402.478-.77.62-1.237.1-.328.107-.41.107-1.066 0-.657-.008-.738-.106-1.066C9.33 1.617 8.458.713 7.229.304 6.93.202 6.826.19 6.261.178c-.422-.008-.715.004-.888.04zM12.563 4.84a2.81 2.81 0 00-1.481.856c-.783.823-1.02 2.075-.593 3.15.217.551.707 1.127 1.197 1.41l.241.142.004 2.27v2.271l.605.616.604.62 1.023-1.054 1.027-1.054-.612-.628-.612-.628.604-.62c.328-.341.6-.637.6-.657 0-.02-.216-.264-.481-.536-.265-.271-.474-.502-.466-.51.011-.008.162-.094.335-.195a2.972 2.972 0 001.363-1.804c.095-.381.107-1.09.02-1.456A2.952 2.952 0 0013.9 4.881c-.305-.085-1.024-.106-1.336-.04zm1.04 1.346c.193.138.383.483.383.702 0 .206-.166.543-.328.668-.182.142-.51.211-.72.155a.89.89 0 01-.612-.811c-.004-.673.743-1.09 1.276-.714zM4.168 9.065C2.343 9.352.81 10.69.233 12.499c-.197.624-.233.94-.233 2.14v1.09h10.667v-4.621l-.316-.308a4.4 4.4 0 01-.838-1.111l-.134-.264-.435-.15C8.237 9.032 7.901 9 6.1 9.004c-1.126.004-1.68.02-1.932.06z",
+      fill: fill
+    })
+  });
+};
+const GoogleIcon = () => {
+  const {
+    activeColorScheme
+  } = useTheme();
+  const size = 24;
+  const fill = activeColorScheme === 'dark' ? 'white' : 'black';
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "none",
+    height: size,
+    viewBox: "0 0 25 25",
+    width: size,
+    children: [/*#__PURE__*/_jsx(Path, {
+      clipRule: "evenodd",
+      d: "M24.02 12.7729C24.02 11.922 23.9436 11.1038 23.8018 10.3184H12.5V14.9602H18.9582C18.68 16.4602 17.8345 17.7311 16.5636 18.582V21.5929H20.4418C22.7109 19.5038 24.02 16.4274 24.02 12.7729Z",
+      fill: fill,
+      fillRule: "evenodd",
+      id: "Shape"
+    }), /*#__PURE__*/_jsx(Path, {
+      clipRule: "evenodd",
+      d: "M12.5 24.4998C15.74 24.4998 18.4564 23.4252 20.4418 21.5925L16.5636 18.5816C15.4891 19.3016 14.1145 19.7271 12.5 19.7271C9.37455 19.7271 6.72909 17.6161 5.78546 14.7798H1.77637V17.8889C3.75091 21.8107 7.80909 24.4998 12.5 24.4998Z",
+      fill: fill,
+      fillRule: "evenodd",
+      id: "Shape_2"
+    }), /*#__PURE__*/_jsx(Path, {
+      clipRule: "evenodd",
+      d: "M5.78545 14.7801C5.54545 14.0601 5.40909 13.291 5.40909 12.5001C5.40909 11.7091 5.54545 10.9401 5.78545 10.2201V7.11096H1.77636C0.963636 8.73096 0.5 10.5637 0.5 12.5001C0.5 14.4364 0.963636 16.2691 1.77636 17.8891L5.78545 14.7801Z",
+      fill: fill,
+      fillRule: "evenodd",
+      id: "Shape_3"
+    }), /*#__PURE__*/_jsx(Path, {
+      clipRule: "evenodd",
+      d: "M12.5 5.27273C14.2618 5.27273 15.8436 5.87818 17.0873 7.06727L20.5291 3.62545C18.4509 1.68909 15.7345 0.5 12.5 0.5C7.80909 0.5 3.75091 3.18909 1.77637 7.11091L5.78546 10.22C6.72909 7.38364 9.37455 5.27273 12.5 5.27273Z",
+      fill: fill,
+      fillRule: "evenodd",
+      id: "Shape_4"
+    })]
+  });
+};
+const AppleIcon = () => {
+  const {
+    activeColorScheme
+  } = useTheme();
+  const size = 24;
+  const fill = activeColorScheme === 'dark' ? 'white' : 'black';
+  return /*#__PURE__*/_jsx(Svg, {
+    fill: "none",
+    height: size,
+    viewBox: "0 0 24 24",
+    width: size,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "M21.2808 18.424C20.933 19.2275 20.5213 19.9672 20.0442 20.6472C19.394 21.5743 18.8616 22.216 18.4513 22.5724C17.8153 23.1573 17.1338 23.4568 16.4041 23.4739C15.8802 23.4739 15.2485 23.3248 14.513 23.0224C13.7752 22.7214 13.0972 22.5724 12.4772 22.5724C11.827 22.5724 11.1296 22.7214 10.3837 23.0224C9.63662 23.3248 9.03481 23.4824 8.57468 23.498C7.87491 23.5278 7.1774 23.2197 6.48118 22.5724C6.03681 22.1848 5.48099 21.5204 4.81515 20.5791C4.10075 19.5739 3.51342 18.4084 3.05329 17.0795C2.56051 15.6442 2.31348 14.2543 2.31348 12.9087C2.31348 11.3673 2.64654 10.0379 3.31366 8.92385C3.83796 8.029 4.53546 7.32312 5.40844 6.80493C6.28142 6.28674 7.22468 6.02267 8.24048 6.00578C8.7963 6.00578 9.52518 6.1777 10.431 6.51559C11.3342 6.85462 11.9141 7.02655 12.1684 7.02655C12.3585 7.02655 13.0028 6.82552 14.0949 6.42473C15.1278 6.05305 15.9995 5.89916 16.7136 5.95978C18.6487 6.11595 20.1024 6.87876 21.0693 8.25303C19.3386 9.30163 18.4826 10.7703 18.4996 12.6544C18.5152 14.122 19.0476 15.3432 20.0939 16.3129C20.5681 16.7629 21.0977 17.1107 21.6868 17.3578C21.5591 17.7283 21.4242 18.0832 21.2808 18.424ZM16.8428 0.960131C16.8428 2.11039 16.4226 3.18439 15.5849 4.17847C14.5741 5.36023 13.3514 6.04311 12.0256 5.93536C12.0087 5.79736 11.9989 5.65213 11.9989 5.49951C11.9989 4.39526 12.4796 3.21349 13.3333 2.24724C13.7595 1.75801 14.3015 1.35122 14.9588 1.02671C15.6147 0.707053 16.2352 0.530273 16.8187 0.5C16.8357 0.653772 16.8428 0.807554 16.8428 0.960116V0.960131Z",
+      fill: fill,
+      id: "path4"
+    })
+  });
+};
+const exampleProps = {
+  title: 'Multi Content Module',
+  description: 'The body copy can be up to 3 lines but shorter is always better.',
+  accessibilityLabel: 'Multi Content Module example',
+  pictogram: 'waiting'
+};
+const listItems = [{
+  icon: 'wallet',
+  active: true,
+  title: 'Enhanced security',
+  description: 'Use your connected wallet to verify instead of your email and password'
+}, {
+  icon: 'defi',
+  title: 'Works across devices',
+  description: 'Wallet sign in can be used on all your other devices with your wallet'
+}, {
+  icon: 'protection',
+  title: 'Safe and secure',
+  description: 'Resistant to security issues, like  phishing, password breaches, and more'
+}];
+const socialMediaItems = [{
+  name: 'Passkey',
+  icon: /*#__PURE__*/_jsx(PasskeyIcon, {})
+}, {
+  name: 'Google',
+  icon: /*#__PURE__*/_jsx(GoogleIcon, {})
+}, {
+  name: 'Apple',
+  icon: /*#__PURE__*/_jsx(AppleIcon, {})
+}, {
+  name: 'Wallet',
+  icon: /*#__PURE__*/_jsx(Icon, {
+    active: true,
+    color: "fg",
+    name: "wallet",
+    size: "m"
+  })
+}];
+const BasicModal = _ref => {
+  let {
+    children
+  } = _ref;
+  const [visible, setVisible] = useState(false);
+  const setVisibleToOn = useCallback(() => setVisible(true), []);
+  const setVisibleToOff = useCallback(() => setVisible(false), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setVisibleToOn,
+      children: "Open Modal"
+    }), /*#__PURE__*/_jsx(Modal, {
+      hideDividers: true,
+      onRequestClose: setVisibleToOff,
+      visible: visible,
+      children: children
+    })]
+  });
+};
+const Default = () => /*#__PURE__*/_jsx(Example, {
+  title: "Default",
+  children: /*#__PURE__*/_jsx(BasicModal, {
+    children: _ref2 => {
+      let {
+        closeModal
+      } = _ref2;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          closeAccessibilityLabel: "Close"
+        }), /*#__PURE__*/_jsx(ModalBody, {
+          contentContainerStyle: {
+            flexGrow: 1
+          },
+          children: /*#__PURE__*/_jsx(MultiContentModule, _extends({
+            action: "Close",
+            actionAccessibilityLabel: "Close",
+            onActionPress: closeModal
+          }, exampleProps, {
+            children: listItems.map((_ref3, index) => {
+              let {
+                active,
+                icon,
+                title,
+                description
+              } = _ref3;
+              return /*#__PURE__*/_jsx(ListCell, {
+                multiline: true,
+                description: description,
+                media: /*#__PURE__*/_jsx(CellMedia, {
+                  active: active,
+                  name: icon,
+                  type: "icon"
+                }),
+                outerSpacing: {
+                  paddingX: 0
+                },
+                title: title
+              }, index);
+            })
+          }))
+        })]
+      });
+    }
+  })
+});
+export const WithButtonGroup = () => {
+  const action = closeModal => /*#__PURE__*/_jsx(VStack, {
+    paddingTop: 1,
+    children: /*#__PURE__*/_jsxs(ButtonGroup, {
+      accessibilityLabel: "Group",
+      direction: "vertical",
+      children: [/*#__PURE__*/_jsx(Button, {
+        accessibilityLabel: "continue",
+        onPress: closeModal,
+        children: "Continue"
+      }), /*#__PURE__*/_jsx(Button, {
+        accessibilityLabel: "cancel",
+        onPress: closeModal,
+        variant: "secondary",
+        children: "Cancel"
+      })]
+    })
+  });
+  return /*#__PURE__*/_jsx(Example, {
+    title: "With Button Group",
+    children: /*#__PURE__*/_jsx(BasicModal, {
+      children: _ref4 => {
+        let {
+          closeModal
+        } = _ref4;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ModalHeader, {
+            closeAccessibilityLabel: "Close"
+          }), /*#__PURE__*/_jsx(ModalBody, {
+            contentContainerStyle: {
+              flexGrow: 1
+            },
+            children: /*#__PURE__*/_jsx(MultiContentModule, _extends({
+              action: action(closeModal)
+            }, exampleProps, {
+              children: /*#__PURE__*/_jsx(Box, {
+                bordered: true,
+                borderColor: "bgPrimary",
+                borderRadius: 300,
+                children: /*#__PURE__*/_jsx(ListCell, {
+                  description: "Satoshi Nakamoto",
+                  media: /*#__PURE__*/_jsx(Avatar, {
+                    accessibilityLabel: "Sneezy",
+                    colorScheme: "blue",
+                    name: "Sneezy"
+                  }),
+                  title: "satoshi@coinbase.com"
+                })
+              })
+            }))
+          })]
+        });
+      }
+    })
+  });
+};
+export const WithEnd = () => {
+  const end = /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    paddingX: 3,
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(HStack, {
+        justifyContent: "center",
+        zIndex: 2,
+        children: /*#__PURE__*/_jsx(Box, {
+          background: "bgElevation2",
+          paddingX: 1.5,
+          children: /*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            font: "body",
+            children: "OR"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Divider, {
+        marginTop: -1.5,
+        paddingBottom: 1.5
+      })]
+    }), /*#__PURE__*/_jsx(HStack, {
+      gap: 2,
+      justifyContent: "space-between",
+      children: socialMediaItems.map(_ref5 => {
+        let {
+          icon,
+          name
+        } = _ref5;
+        return /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Pressable, {
+            accessibilityLabel: name,
+            accessibilityRole: "button",
+            background: "bgSecondary",
+            borderColor: "transparent",
+            borderRadius: 1000,
+            borderWidth: 100,
+            onPress: onPressConsole,
+            children: /*#__PURE__*/_jsx(Box, {
+              padding: 2,
+              children: icon
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            font: "label2",
+            paddingTop: 1,
+            children: name
+          })]
+        }, name);
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsx(Example, {
+    title: "With End",
+    children: /*#__PURE__*/_jsx(BasicModal, {
+      children: _ref6 => {
+        let {
+          closeModal
+        } = _ref6;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ModalHeader, {
+            closeAccessibilityLabel: "Close"
+          }), /*#__PURE__*/_jsx(ModalBody, {
+            contentContainerStyle: {
+              flexGrow: 1
+            },
+            children: /*#__PURE__*/_jsx(MultiContentModule, _extends({
+              action: "Continue",
+              actionAccessibilityLabel: "Continue",
+              end: end,
+              onActionPress: closeModal
+            }, exampleProps, {
+              children: /*#__PURE__*/_jsx(TextInput, {
+                accessibilityLabel: "Text input field",
+                label: "Email",
+                placeholder: "placeholder"
+              })
+            }))
+          })]
+        });
+      }
+    })
+  });
+};
+export const WithLongContent = () => {
+  return /*#__PURE__*/_jsx(Example, {
+    title: "With Long Content",
+    children: /*#__PURE__*/_jsx(BasicModal, {
+      children: _ref7 => {
+        let {
+          closeModal
+        } = _ref7;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ModalHeader, {
+            closeAccessibilityLabel: "Close"
+          }), /*#__PURE__*/_jsx(ModalBody, {
+            contentContainerStyle: {
+              flexGrow: 1
+            },
+            children: /*#__PURE__*/_jsx(MultiContentModule, {
+              action: "Close",
+              actionAccessibilityLabel: "Close",
+              description: "This is a long description. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ",
+              onActionPress: closeModal,
+              title: "Lorem Ipsum is dummy text of the printing and typesetting industry.",
+              children: [...listItems, ...listItems, ...listItems].map((_ref8, index) => {
+                let {
+                  icon,
+                  active,
+                  title,
+                  description
+                } = _ref8;
+                return /*#__PURE__*/_jsx(ListCell, {
+                  multiline: true,
+                  description: description,
+                  media: /*#__PURE__*/_jsx(CellMedia, {
+                    active: active,
+                    name: icon,
+                    type: "icon"
+                  }),
+                  outerSpacing: {
+                    paddingX: 0
+                  },
+                  title: title
+                }, index);
+              })
+            })
+          })]
+        });
+      }
+    })
+  });
+};
+const MultiContentModuleScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Default, {}), /*#__PURE__*/_jsx(WithButtonGroup, {}), /*#__PURE__*/_jsx(WithEnd, {}), /*#__PURE__*/_jsx(WithLongContent, {})]
+  });
+};
+export default MultiContentModuleScreen;

package/esm/navigation/BrowserBar.js

@@ -0,0 +1,77 @@
+const _excluded = ["start", "end", "paddingX", "paddingTop", "paddingBottom", "gap", "testID", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { createContext, memo, useContext, useEffect, useState } from 'react';
+import { HStack } from '../layout';
+import { NavBarEnd, NavBarStart } from './TopNavBar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BrowserBarContext = /*#__PURE__*/createContext({
+  hideStart: false,
+  hideEnd: false,
+  setHideStart: () => {},
+  setHideEnd: () => {},
+  isWithinBrowserBar: false
+});
+export const useBrowserBarContext = () => {
+  const context = useContext(BrowserBarContext);
+  useEffect(() => {
+    if (!context.isWithinBrowserBar) {
+      console.warn('UseBrowserBarContext must be used within a BrowserBar for optimal functionality and consistent styling.');
+    }
+  }, [context.isWithinBrowserBar]);
+  return context;
+};
+export const BrowserBar = /*#__PURE__*/memo(_ref => {
+  let {
+      start,
+      end,
+      paddingX = 3,
+      paddingTop = 1,
+      paddingBottom = 1,
+      gap = 1,
+      testID,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [hideStart, setHideStart] = useState(false);
+  const [hideEnd, setHideEnd] = useState(false);
+  return /*#__PURE__*/_jsx(BrowserBarContext.Provider, {
+    value: {
+      hideStart,
+      hideEnd,
+      setHideStart,
+      setHideEnd,
+      isWithinBrowserBar: true
+    },
+    children: /*#__PURE__*/_jsxs(HStack, _extends({
+      alignItems: "center"
+      // gap is instead passed to paddingEnd and paddingStart of NavBarStart and NavBarEnd to ensure that
+      // when the start and end node collapse, the gap between the start and end node and the children
+      // also collapse, and the nav bar middle content can expand to the full width of the browser bar
+      ,
+      gap: 0,
+      paddingBottom: paddingBottom,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      testID: testID
+    }, props, {
+      children: [/*#__PURE__*/_jsx(NavBarStart, {
+        flexBasis: "auto",
+        flexGrow: 0,
+        paddingEnd: gap,
+        children: hideStart ? null : start
+      }), /*#__PURE__*/_jsx(HStack, {
+        flexBasis: 0,
+        flexGrow: 1,
+        flexShrink: 0,
+        children: children
+      }), /*#__PURE__*/_jsx(NavBarEnd, {
+        flexBasis: "auto",
+        flexGrow: 0,
+        paddingStart: gap,
+        children: hideEnd ? null : end
+      })]
+    }))
+  });
+});
+BrowserBar.displayName = 'BrowserBar';

package/esm/navigation/BrowserBarSearchInput.js

@@ -0,0 +1,43 @@
+const _excluded = ["onFocus", "onBlur", "compact", "expandOnFocus"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useCallback } from 'react';
+import { SearchInput } from '../controls/SearchInput';
+import { useBrowserBarContext } from './BrowserBar';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * This component is used to render the search input in the browser bar.
+ * It wraps around the existing SearchInput component and handles the logic
+ * for collapsing the start and end node of the browser bar when the input is focused.
+ */
+export const BrowserBarSearchInput = /*#__PURE__*/memo(_ref => {
+  let {
+      onFocus,
+      onBlur,
+      compact = true,
+      expandOnFocus = true
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    setHideStart,
+    setHideEnd
+  } = useBrowserBarContext();
+  const handleFocus = useCallback(e => {
+    if (expandOnFocus) {
+      setHideStart(true);
+      setHideEnd(true);
+    }
+    onFocus == null || onFocus(e);
+  }, [expandOnFocus, onFocus, setHideStart, setHideEnd]);
+  const handleBlur = useCallback(e => {
+    setHideEnd(false);
+    setHideStart(false);
+    onBlur == null || onBlur(e);
+  }, [onBlur, setHideEnd, setHideStart]);
+  return /*#__PURE__*/_jsx(SearchInput, _extends({
+    compact: compact,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  }, props));
+});
+BrowserBarSearchInput.displayName = 'BrowserBarSearchInput';

package/esm/navigation/NavBarIconButton.js

@@ -0,0 +1,61 @@
+const _excluded = ["name", "color", "height", "width", "size", "borderWidth", "borderRadius", "active"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useContext, useEffect } from 'react';
+import { Icon } from '../icons';
+import { Pressable } from '../system/Pressable';
+import { BrowserBarContext } from './BrowserBar';
+import { TopNavBarContext } from './TopNavBar';
+
+/**
+ * Hook to check if NavBarButton is being used within the correct navigation context
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const useNavigationContext = () => {
+  const {
+    isWithinBrowserBar
+  } = useContext(BrowserBarContext);
+  const {
+    isWithinTopNavBar
+  } = useContext(TopNavBarContext);
+  useEffect(() => {
+    if (!isWithinBrowserBar && !isWithinTopNavBar) {
+      console.warn('NavBarButton should be used within BrowserBar or TopNavBar components for optimal functionality and consistent styling.');
+    }
+  }, [isWithinBrowserBar, isWithinTopNavBar]);
+};
+/**
+ * This component is used to render an icon button in the navigation bar.
+ * It has the same pressable size as a compact IconButton but with a medium-sized icon.
+ */
+export const NavBarIconButton = /*#__PURE__*/memo(_ref => {
+  let {
+      name,
+      color = 'fg',
+      height = 40,
+      width = 40,
+      size = 'm',
+      borderWidth = 0,
+      borderRadius = 1000,
+      active
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useNavigationContext();
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    alignItems: "center",
+    background: "transparent",
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    height: height,
+    justifyContent: "center",
+    width: width
+  }, props, {
+    children: /*#__PURE__*/_jsx(Icon, {
+      active: active,
+      color: color,
+      name: name,
+      size: size
+    })
+  }));
+});
+NavBarIconButton.displayName = 'NavBarIconButton';

package/esm/navigation/NavigationSubtitle.js

@@ -0,0 +1,19 @@
+const _excluded = ["accessibilityRole", "color", "font"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NavigationSubtitle = _ref => {
+  let {
+      accessibilityRole = 'header',
+      color = 'fgMuted',
+      font = 'label2'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Text, _extends({
+    accessibilityRole: accessibilityRole,
+    color: color,
+    font: font
+  }, props));
+};
+NavigationSubtitle.displayName = 'NavigationSubtitle';

package/esm/navigation/NavigationTitle.js

@@ -0,0 +1,18 @@
+const _excluded = ["accessibilityRole", "font"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NavigationTitle = /*#__PURE__*/memo(_ref => {
+  let {
+      accessibilityRole = 'header',
+      font = 'headline'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Text, _extends({
+    accessibilityRole: accessibilityRole,
+    font: font
+  }, props));
+});
+NavigationTitle.displayName = 'NavigationTitle';