@butternutbox/pawprint-native 0.10.6 → 0.10.8

package/dist/index.js

@@ -9,7 +9,7 @@ import ibmPlexSansCondensed400 from './ibm-plex-sans-condensed-400-normal.ttf';
 import ibmPlexSansCondensed500 from './ibm-plex-sans-condensed-500-normal.ttf';
 import ibmPlexSansCondensed600 from './ibm-plex-sans-condensed-600-normal.ttf';
 import ibmPlexSansCondensed700 from './ibm-plex-sans-condensed-700-normal.ttf';
-import React65, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
+import React66, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@rn-primitives/avatar';
 import { Text, View, Animated, Pressable, TextInput, Easing, StyleSheet, useWindowDimensions, PanResponder, Image, ScrollView, Keyboard, ActionSheetIOS, TouchableOpacity, Platform, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
@@ -190,7 +190,7 @@ var VARIANT_DEFAULTS = {
   display: { size: "lg" }
 };
 var StyledText = styled50(Text)({});
-var Typography = React65.forwardRef(
+var Typography = React66.forwardRef(
   (props, ref) => {
     const theme2 = useTheme();
     const { typography, colour } = theme2.tokens.semantics;
@@ -280,7 +280,7 @@ var StyledIconRoot = styled50(View)(({ iconDimension }) => ({
   width: iconDimension,
   height: iconDimension
 }));
-var Icon = React65.forwardRef(
+var Icon = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -3880,7 +3880,7 @@ var AVATAR_SIZE_TO_ICON_SIZE = {
   md: "md",
   lg: "xl"
 };
-var AvatarRoot = React65.forwardRef(
+var AvatarRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       src,
@@ -3939,7 +3939,7 @@ function getVisibleDots(count, activeIndex) {
   const windowStart = Math.min(Math.max(activeIndex - 2, 0), count - 5);
   return Array.from({ length: 5 }, (_, i) => windowStart + i);
 }
-var CarouselControls = React65.forwardRef(
+var CarouselControls = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { count, activeIndex, showBackground = true } = _b, props = __objRest(_b, ["count", "activeIndex", "showBackground"]);
     const theme2 = useTheme();
@@ -4026,7 +4026,7 @@ var StyledBadge = styled50(View)(({ theme: theme2, badgeVariant, badgeSize, pinn
     backgroundColor: backgroundColorMap[badgeVariant]
   }, borderRadiusStyles), positionStyles);
 });
-var Badge = React65.forwardRef(
+var Badge = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
@@ -4101,7 +4101,7 @@ var Badge = React65.forwardRef(
 Badge.displayName = "Badge";
 var parseTokenValue6 = (value) => parseFloat(value);
 var StyledSpinner = styled50(View)({});
-var Spinner = React65.forwardRef(
+var Spinner = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
     const theme2 = useTheme();
@@ -4208,7 +4208,7 @@ var StyledSpinnerWrapper = styled50(View)({
   alignItems: "center",
   justifyContent: "center"
 });
-var Button = React65.forwardRef(
+var Button = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "filled",
@@ -4240,7 +4240,7 @@ var Button = React65.forwardRef(
     const typographyKey = sizeToTypographyKey[size];
     const typography = buttons.text[typographyKey];
     resolveFont(typography.fontFamily, typography.fontWeight);
-    const [pressed, setPressed] = React65.useState(false);
+    const [pressed, setPressed] = React66.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const bgTokens = buttons.filledButton.colour.background[colour];
@@ -4351,7 +4351,7 @@ var StyledHint = styled50(View)(({
     backgroundColor: hintVariantMap[hintVariant]
   };
 });
-var Hint = React65.forwardRef(
+var Hint = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "default" } = _b, rest = __objRest(_b, ["variant"]);
     return /* @__PURE__ */ jsx(StyledHint, __spreadValues({ ref, hintVariant: variant }, rest));
@@ -4393,7 +4393,7 @@ var StyledSpinnerWrapper2 = styled50(View)({
   alignItems: "center",
   justifyContent: "center"
 });
-var IconButton = React65.forwardRef(
+var IconButton = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -4419,7 +4419,7 @@ var IconButton = React65.forwardRef(
     const dimension = parseTokenValue9(sizeTokens.height);
     const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
     const iconDimension = parseTokenValue9(iconSizing[sizeToIconSizeToken[size]]);
-    const [pressed, setPressed] = React65.useState(false);
+    const [pressed, setPressed] = React66.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const filled = buttons.iconButton.filledButton;
@@ -4502,7 +4502,7 @@ var StyledRoot2 = styled50(View)(({ illustrationHeight }) => ({
   flexShrink: 0,
   height: illustrationHeight
 }));
-var Illustration = React65.forwardRef(
+var Illustration = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       illustration: IllustrationComponent,
@@ -4538,7 +4538,7 @@ var StyledLabelRow = styled50(View)(({ labelGap }) => ({
   alignItems: "center",
   gap: labelGap
 }));
-var InputLabel = React65.forwardRef(
+var InputLabel = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { optionalText, state = "default", children } = _b, rest = __objRest(_b, ["optionalText", "state", "children"]);
     const theme2 = useTheme();
@@ -4735,54 +4735,57 @@ ForwardRef472.category = "core";
 var PlayArrow = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18a1 1 0 0 0 0-1.69L9.54 5.98A.998.998 0 0 0 8 6.82" }) }));
 var ForwardRef482 = forwardRef(PlayArrow);
 ForwardRef482.category = "core";
-var Refresh = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M17.65 6.35a7.95 7.95 0 0 0-6.48-2.31c-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20a7.98 7.98 0 0 0 7.21-4.56c.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53a5.994 5.994 0 0 1-6.8 3.31c-2.22-.49-4.01-2.3-4.48-4.52A6.002 6.002 0 0 1 12 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71z" }) }));
-var ForwardRef492 = forwardRef(Refresh);
+var Range = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "m5.83 12 2.46-2.46a.996.996 0 1 0-1.41-1.41L3.7 11.3a.996.996 0 0 0 0 1.41l3.18 3.17a.996.996 0 1 0 1.41-1.41zm12.34 0-2.46 2.46a.996.996 0 1 0 1.41 1.41l3.18-3.17a.996.996 0 0 0 0-1.41l-3.17-3.17a.996.996 0 1 0-1.41 1.41z" }) }));
+var ForwardRef492 = forwardRef(Range);
 ForwardRef492.category = "core";
-var Remove = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
-var ForwardRef502 = forwardRef(Remove);
+var Refresh = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M17.65 6.35a7.95 7.95 0 0 0-6.48-2.31c-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20a7.98 7.98 0 0 0 7.21-4.56c.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53a5.994 5.994 0 0 1-6.8 3.31c-2.22-.49-4.01-2.3-4.48-4.52A6.002 6.002 0 0 1 12 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71z" }) }));
+var ForwardRef502 = forwardRef(Refresh);
 ForwardRef502.category = "core";
-var Remove_default = ForwardRef502;
-var RemoveCircle = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m4 11H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
-var ForwardRef512 = forwardRef(RemoveCircle);
+var Remove = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
+var ForwardRef512 = forwardRef(Remove);
 ForwardRef512.category = "core";
-var RemoveCircle_default = ForwardRef512;
-var RemoveCircleOutline = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M7 12c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1m5-10C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
-var ForwardRef522 = forwardRef(RemoveCircleOutline);
+var Remove_default = ForwardRef512;
+var RemoveCircle = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m4 11H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
+var ForwardRef522 = forwardRef(RemoveCircle);
 ForwardRef522.category = "core";
-var RemoveCircleOutline_default = ForwardRef522;
-var Search = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0s.41-1.08 0-1.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" }) }));
-var ForwardRef532 = forwardRef(Search);
+var RemoveCircle_default = ForwardRef522;
+var RemoveCircleOutline = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M7 12c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1m5-10C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
+var ForwardRef532 = forwardRef(RemoveCircleOutline);
 ForwardRef532.category = "core";
-var Search_default = ForwardRef532;
-var Settings = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.3 7.3 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68m-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5" }) }));
-var ForwardRef542 = forwardRef(Settings);
+var RemoveCircleOutline_default = ForwardRef532;
+var Search = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0s.41-1.08 0-1.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" }) }));
+var ForwardRef542 = forwardRef(Search);
 ForwardRef542.category = "core";
-var StarBorder = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
-var ForwardRef552 = forwardRef(StarBorder);
+var Search_default = ForwardRef542;
+var Settings = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.3 7.3 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68m-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5" }) }));
+var ForwardRef552 = forwardRef(Settings);
 ForwardRef552.category = "core";
-var StarHalf = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
-var ForwardRef562 = forwardRef(StarHalf);
+var StarBorder = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
+var ForwardRef562 = forwardRef(StarBorder);
 ForwardRef562.category = "core";
-var StarRate = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "m11.957 17.498 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0l-1.89 4.45-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08z" }) }));
-var ForwardRef572 = forwardRef(StarRate);
+var StarHalf = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
+var ForwardRef572 = forwardRef(StarHalf);
 ForwardRef572.category = "core";
-var User = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 12a4.665 4.665 0 0 0 4.667-4.667A4.665 4.665 0 0 0 12 2.667a4.665 4.665 0 0 0-4.667 4.666A4.665 4.665 0 0 0 12 12m0-7a2.34 2.34 0 0 1 2.333 2.333A2.34 2.34 0 0 1 12 9.667a2.34 2.34 0 0 1-2.333-2.334A2.34 2.34 0 0 1 12 5m0 8.167c-3.115 0-9.333 1.563-9.333 4.666v2.334a1.17 1.17 0 0 0 1.166 1.166h16.334a1.17 1.17 0 0 0 1.166-1.166v-2.334c0-3.103-6.218-4.666-9.333-4.666M19 19H5v-1.155c.233-.84 3.85-2.345 7-2.345s6.767 1.505 7 2.333z" }) }));
-var ForwardRef582 = forwardRef(User);
+var StarRate = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "m11.957 17.498 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0l-1.89 4.45-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08z" }) }));
+var ForwardRef582 = forwardRef(StarRate);
 ForwardRef582.category = "core";
-var Visibility = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3" }) }));
-var ForwardRef592 = forwardRef(Visibility);
+var User = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 12a4.665 4.665 0 0 0 4.667-4.667A4.665 4.665 0 0 0 12 2.667a4.665 4.665 0 0 0-4.667 4.666A4.665 4.665 0 0 0 12 12m0-7a2.34 2.34 0 0 1 2.333 2.333A2.34 2.34 0 0 1 12 9.667a2.34 2.34 0 0 1-2.333-2.334A2.34 2.34 0 0 1 12 5m0 8.167c-3.115 0-9.333 1.563-9.333 4.666v2.334a1.17 1.17 0 0 0 1.166 1.166h16.334a1.17 1.17 0 0 0 1.166-1.166v-2.334c0-3.103-6.218-4.666-9.333-4.666M19 19H5v-1.155c.233-.84 3.85-2.345 7-2.345s6.767 1.505 7 2.333z" }) }));
+var ForwardRef592 = forwardRef(User);
 ForwardRef592.category = "core";
-var Visibility_default = ForwardRef592;
-var VisibilityOff = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24M2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.9 11.9 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0M12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z" }) }));
-var ForwardRef602 = forwardRef(VisibilityOff);
+var Visibility = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3" }) }));
+var ForwardRef602 = forwardRef(Visibility);
 ForwardRef602.category = "core";
-var VisibilityOff_default = ForwardRef602;
-var VolumeOff = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M3.63 3.63a.996.996 0 0 0 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 1 0 1.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0M19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12m-8.71-6.29-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7M16.5 12A4.5 4.5 0 0 0 14 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24" }) }));
-var ForwardRef612 = forwardRef(VolumeOff);
+var Visibility_default = ForwardRef602;
+var VisibilityOff = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24M2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.9 11.9 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0M12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z" }) }));
+var ForwardRef612 = forwardRef(VisibilityOff);
 ForwardRef612.category = "core";
-var VolumeUp = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1m13.5 2A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02M14 4.45v.2c0 .38.25.71.6.85A7 7 0 0 1 19 12c0 2.94-1.82 5.47-4.4 6.5-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85A8.98 8.98 0 0 0 21 12c0-3.84-2.4-7.11-5.79-8.4-.58-.23-1.21.22-1.21.85" }) }));
-var ForwardRef622 = forwardRef(VolumeUp);
+var VisibilityOff_default = ForwardRef612;
+var VolumeOff = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M3.63 3.63a.996.996 0 0 0 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 1 0 1.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0M19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12m-8.71-6.29-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7M16.5 12A4.5 4.5 0 0 0 14 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24" }) }));
+var ForwardRef622 = forwardRef(VolumeOff);
 ForwardRef622.category = "core";
+var VolumeUp = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsx(Path, { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1m13.5 2A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02M14 4.45v.2c0 .38.25.71.6.85A7 7 0 0 1 19 12c0 2.94-1.82 5.47-4.4 6.5-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85A8.98 8.98 0 0 0 21 12c0-3.84-2.4-7.11-5.79-8.4-.58-.23-1.21.22-1.21.85" }) }));
+var ForwardRef632 = forwardRef(VolumeUp);
+ForwardRef632.category = "core";
 var parseTokenValue12 = (value) => parseFloat(value);
 var StyledInputWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
@@ -4798,7 +4801,10 @@ var StyledInputWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled, c
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
+var StyledInput = styled50(TextInput)(({
+  theme: theme2,
+  hasInlineHelp
+}) => {
   var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
   const typography = field.placeholder.default;
@@ -4808,7 +4814,7 @@ var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
   );
   const fontSize = parseTokenValue12(typography.fontSize);
   const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
-  return __spreadValues({
+  return __spreadValues(__spreadValues({
     flex: 1,
     minWidth: 0,
     minHeight: 0,
@@ -4817,7 +4823,7 @@ var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
     fontFamily,
     fontSize,
     letterSpacing
-  }, {
+  }, hasInlineHelp ? { position: "relative", top: -8 } : {}), {
     outlineStyle: "none",
     outlineWidth: 0,
     outlineColor: "transparent"
@@ -4832,7 +4838,7 @@ var StyledIconSlot = styled50(View)({
   justifyContent: "center",
   flexShrink: 0
 });
-var InputField = React65.forwardRef(
+var InputField = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -4842,6 +4848,7 @@ var InputField = React65.forwardRef(
       hideStateIcons,
       containerWidth,
       containerHeight,
+      hasInlineHelp,
       style,
       editable,
       onFocus,
@@ -4854,6 +4861,7 @@ var InputField = React65.forwardRef(
       "hideStateIcons",
       "containerWidth",
       "containerHeight",
+      "hasInlineHelp",
       "style",
       "editable",
       "onFocus",
@@ -4976,7 +4984,8 @@ var InputField = React65.forwardRef(
               placeholderTextColor: colour.field.text.placeholder,
               editable,
               onFocus: handleFocus,
-              onBlur: handleBlur
+              onBlur: handleBlur,
+              hasInlineHelp
             }, rest)
           ),
           trailingIcon && /* @__PURE__ */ jsx(StyledIconSlot, { children: trailingIcon }),
@@ -4988,7 +4997,7 @@ var InputField = React65.forwardRef(
   }
 );
 InputField.displayName = "Input.Field";
-var InputText = React65.forwardRef(
+var InputText = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { placeholderTextColor } = _b, rest = __objRest(_b, ["placeholderTextColor"]);
     const theme2 = useTheme();
@@ -5007,7 +5016,7 @@ var StyledDescriptionRow = styled50(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputDescription = React65.forwardRef(
+var InputDescription = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { state = "default", children } = _b, rest = __objRest(_b, ["state", "children"]);
     const theme2 = useTheme();
@@ -5027,7 +5036,7 @@ var StyledErrorRow = styled50(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputError = React65.forwardRef(
+var InputError = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -5050,7 +5059,7 @@ var StyledRoot3 = styled50(View)(({ theme: theme2 }) => {
     gap: parseTokenValue13(spacing.gap)
   };
 });
-var InputRoot = React65.forwardRef(
+var InputRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -5094,7 +5103,7 @@ var Input = Object.assign(InputRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var Link = React65.forwardRef(
+var Link = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -7692,7 +7701,7 @@ var StyledRoot4 = styled50(View)({
   justifyContent: "center",
   flexShrink: 0
 });
-var Logo = React65.forwardRef(
+var Logo = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { brand, variant = "primary", "aria-label": ariaLabel } = _b, rest = __objRest(_b, ["brand", "variant", "aria-label"]);
     const effectiveVariant = brand === "bcorp" ? "primary" : variant;
@@ -7727,8 +7736,12 @@ var StyledFieldTextWrapper = styled50(View)({
   flexShrink: 0,
   justifyContent: "center"
 });
-var NumberInputField = React65.forwardRef((_a, ref) => {
-  var _b = _a, { fieldText } = _b, props = __objRest(_b, ["fieldText"]);
+var StyledInputContainer = styled50(View)(({ hasInlineHelp }) => ({
+  flexDirection: "column",
+  gap: hasInlineHelp ? 2 : 0
+}));
+var NumberInputField = React66.forwardRef((_a, ref) => {
+  var _b = _a, { fieldText, inlineHelpText } = _b, props = __objRest(_b, ["fieldText", "inlineHelpText"]);
   const theme2 = useTheme();
   const { colour, description } = theme2.tokens.components.inputs;
   const fieldSize = parseTokenValue14(
@@ -7740,15 +7753,47 @@ var NumberInputField = React65.forwardRef((_a, ref) => {
       keyboardType: "numeric",
       hideStateIcons: true,
       containerWidth: fieldSize,
-      containerHeight: fieldSize,
+      containerHeight: inlineHelpText ? void 0 : fieldSize,
+      hasInlineHelp: !!inlineHelpText,
       ref,
       style: { textAlign: "center" }
     }, props)
   );
-  if (!fieldText) {
-    return inputElement;
-  }
-  return /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
+  const fieldContent = inlineHelpText && fieldText ? /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
+    /* @__PURE__ */ jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+      inputElement,
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            position: "absolute",
+            bottom: 4,
+            left: 0,
+            width: fieldSize,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: description.text.default,
+              color: colour.description.default,
+              children: inlineHelpText
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        token: description.text.default,
+        color: colour.description.default,
+        children: fieldText
+      }
+    ) })
+  ] }) : fieldText ? /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
     inputElement,
     /* @__PURE__ */ jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsx(
       Typography,
@@ -7758,7 +7803,31 @@ var NumberInputField = React65.forwardRef((_a, ref) => {
         children: fieldText
       }
     ) })
-  ] });
+  ] }) : inlineHelpText ? /* @__PURE__ */ jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+    inputElement,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          position: "absolute",
+          bottom: 4,
+          width: fieldSize,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            token: description.text.default,
+            color: colour.description.default,
+            children: inlineHelpText
+          }
+        )
+      }
+    )
+  ] }) : inputElement;
+  return fieldContent;
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue15 = (value) => parseFloat(value);
@@ -7768,7 +7837,7 @@ var StyledRoot5 = styled50(View)(({ theme: theme2 }) => {
     gap: parseTokenValue15(spacing.gap)
   };
 });
-var NumberInputRoot = React65.forwardRef(
+var NumberInputRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7778,6 +7847,7 @@ var NumberInputRoot = React65.forwardRef(
       optionalText,
       onValueChange,
       fieldText,
+      inlineHelpText,
       children
     } = _b, inputProps = __objRest(_b, [
       "label",
@@ -7787,6 +7857,7 @@ var NumberInputRoot = React65.forwardRef(
       "optionalText",
       "onValueChange",
       "fieldText",
+      "inlineHelpText",
       "children"
     ]);
     if (children) {
@@ -7799,7 +7870,8 @@ var NumberInputRoot = React65.forwardRef(
         __spreadValues({
           state,
           onChangeText: onValueChange,
-          fieldText
+          fieldText,
+          inlineHelpText
         }, inputProps)
       ),
       description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
@@ -7860,7 +7932,7 @@ var StyledContent = styled50(View)(({ contentGap }) => ({
   flex: 1,
   minWidth: 0
 }));
-var Switch = React65.forwardRef(
+var Switch = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7880,7 +7952,7 @@ var Switch = React65.forwardRef(
     const theme2 = useTheme();
     const { size, colour, opacity, borderWidth, spacing, typography } = theme2.tokens.components.switch;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
     const controlWidth = parseTokenValue16(size.control.width);
     const controlHeight = parseTokenValue16(size.control.height);
@@ -7986,7 +8058,7 @@ var StyledTag = styled50(View)(({ theme: theme2, tagVariant, tagSize }) => {
     backgroundColor: backgroundColorMap[tagVariant]
   };
 });
-var Tag = React65.forwardRef(
+var Tag = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
     const theme2 = useTheme();
@@ -8086,7 +8158,7 @@ var IconWrapper2 = styled50(View)(({ side }) => {
     zIndex: 1
   };
 });
-var TextAreaField = React65.forwardRef(
+var TextAreaField = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -8279,7 +8351,7 @@ var StyledCharCountWrapper = styled50(View)(({ charCountGap, charCountPadding })
   gap: charCountGap,
   paddingLeft: charCountPadding
 }));
-var TextAreaLabel = React65.forwardRef(
+var TextAreaLabel = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       optionalText,
@@ -8343,7 +8415,7 @@ var StyledRoot6 = styled50(View)(({ theme: theme2 }) => {
     gap: parseTokenValue20(spacing.gap)
   };
 });
-var TextAreaRoot = React65.forwardRef(
+var TextAreaRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -8370,8 +8442,8 @@ var TextAreaRoot = React65.forwardRef(
       "defaultValue",
       "onChangeText"
     ]);
-    const [charCount, setCharCount] = React65.useState(0);
-    React65.useEffect(() => {
+    const [charCount, setCharCount] = React66.useState(0);
+    React66.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       } else if (defaultValue !== void 0) {
@@ -8424,7 +8496,7 @@ var TextArea = Object.assign(TextAreaRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var AccordionContext = React65.createContext({
+var AccordionContext = React66.createContext({
   openValues: [],
   toggle: () => {
   },
@@ -8455,7 +8527,7 @@ var StyledDivider = styled50(View)(({ dividerColor, dividerMarginTop }) => ({
   backgroundColor: dividerColor,
   marginTop: dividerMarginTop
 }));
-var AccordionItem = React65.forwardRef(
+var AccordionItem = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { title, children, value, disabled: itemDisabled } = _b, rest = __objRest(_b, ["title", "children", "value", "disabled"]);
     const theme2 = useTheme();
@@ -8465,7 +8537,7 @@ var AccordionItem = React65.forwardRef(
       toggle,
       disabled: rootDisabled,
       size
-    } = React65.useContext(AccordionContext);
+    } = React66.useContext(AccordionContext);
     const itemValue = value != null ? value : title;
     const isOpen = openValues.includes(itemValue);
     const isDisabled = itemDisabled || rootDisabled;
@@ -8526,7 +8598,7 @@ var AccordionItem = React65.forwardRef(
   }
 );
 AccordionItem.displayName = "Accordion.Item";
-var AccordionRoot = React65.forwardRef(
+var AccordionRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -8548,11 +8620,11 @@ var AccordionRoot = React65.forwardRef(
     const theme2 = useTheme();
     const { accordion } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(
+    const [internalValue, setInternalValue] = React66.useState(
       defaultValue != null ? defaultValue : []
     );
     const openValues = isControlled ? controlledValue : internalValue;
-    const toggle = React65.useCallback(
+    const toggle = React66.useCallback(
       (itemValue) => {
         const isOpen = openValues.includes(itemValue);
         let next;
@@ -8570,7 +8642,7 @@ var AccordionRoot = React65.forwardRef(
       },
       [openValues, multiple, isControlled, onValueChange]
     );
-    const ctx = React65.useMemo(
+    const ctx = React66.useMemo(
       () => ({ openValues, toggle, disabled, size }),
       [openValues, toggle, disabled, size]
     );
@@ -8700,7 +8772,7 @@ function buildDelayedEntering(variant, delayMs) {
   b.delay(delayMs);
   return b;
 }
-var Animated5 = React65.forwardRef(
+var Animated5 = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "fade", delay, exit = true, children } = _b, props = __objRest(_b, ["variant", "delay", "exit", "children"]);
     const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
@@ -8718,7 +8790,7 @@ var Animated5 = React65.forwardRef(
   }
 );
 Animated5.displayName = "Animated";
-var DrawerContext = React65.createContext({
+var DrawerContext = React66.createContext({
   isOpen: false,
   modalVisible: false,
   openDrawer: () => {
@@ -8728,9 +8800,9 @@ var DrawerContext = React65.createContext({
   onExitComplete: () => {
   }
 });
-var useDrawerContext = () => React65.useContext(DrawerContext);
+var useDrawerContext = () => React66.useContext(DrawerContext);
 var FADE_DURATION = 220;
-var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
+var DrawerOverlay = React66.forwardRef(({ accessible = false }, _ref) => {
   const theme2 = useTheme();
   const { isOpen, closeDrawer } = useDrawerContext();
   const opacity = useRef(new Animated.Value(0)).current;
@@ -8764,12 +8836,14 @@ var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
   );
 });
 DrawerOverlay.displayName = "Drawer.Overlay";
-var DrawerDragContext = React65.createContext(null);
-var useDrawerDragContext = () => React65.useContext(DrawerDragContext);
-var DrawerFooterContext = React65.createContext(false);
-var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
-var DrawerHeaderContext = React65.createContext(null);
-var useDrawerHeaderContext = () => React65.useContext(DrawerHeaderContext);
+var DrawerDragContext = React66.createContext(null);
+var useDrawerDragContext = () => React66.useContext(DrawerDragContext);
+var DrawerMeasureContext = React66.createContext(null);
+var useDrawerMeasureContext = () => React66.useContext(DrawerMeasureContext);
+var DrawerFooterContext = React66.createContext(false);
+var useDrawerFooterContext = () => React66.useContext(DrawerFooterContext);
+var DrawerHeaderContext = React66.createContext(null);
+var useDrawerHeaderContext = () => React66.useContext(DrawerHeaderContext);
 var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
@@ -8805,7 +8879,7 @@ var StyledPanel2 = styled50(View)(
     overflow: "hidden"
   })
 );
-var DrawerContent = React65.forwardRef(
+var DrawerContent = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     var _a2;
@@ -8815,6 +8889,7 @@ var DrawerContent = React65.forwardRef(
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = useWindowDimensions();
     const maxHeight = windowHeight * 0.9;
+    const bodyMaxHeight = windowHeight - 300;
     const closeDrawerRef = useRef(closeDrawer);
     useEffect(() => {
       closeDrawerRef.current = closeDrawer;
@@ -8886,19 +8961,60 @@ var DrawerContent = React65.forwardRef(
     }, [isOpen, runEntry, runExit]);
     const onLayout = useCallback(
       ({ nativeEvent }) => {
+        if (entryRanRef.current) return;
         const h = nativeEvent.layout.height;
         const capped = Math.min(h, maxHeight);
-        if (capped !== panelHeightRef.current && capped > 0) {
+        if (capped <= 0) return;
+        if (capped !== panelHeightRef.current) {
           setPanelHeight(capped);
           panelHeightRef.current = capped;
         }
-        if (isOpenRef.current && !entryRanRef.current && capped > 0) {
-          panelHeightRef.current = capped;
+        if (isOpenRef.current) {
           runEntry();
         }
       },
       [runEntry, maxHeight]
     );
+    const chromeRef = useRef(0);
+    const bodyContentRef = useRef(0);
+    const applyDesiredHeight = useCallback(() => {
+      const chrome = chromeRef.current;
+      const content = bodyContentRef.current;
+      const current = panelHeightRef.current;
+      if (chrome <= 0 || content <= 0 || current <= 0) return;
+      const desired = Math.min(
+        chrome + Math.min(content, bodyMaxHeight),
+        maxHeight
+      );
+      if (Math.abs(desired - current) > 1) {
+        panelHeightRef.current = desired;
+        setPanelHeight(desired);
+      }
+    }, [maxHeight, bodyMaxHeight]);
+    const setBodyFrameHeight = useCallback(
+      (frameHeight) => {
+        if (chromeRef.current <= 0) {
+          const current = panelHeightRef.current;
+          if (frameHeight > 0 && current > frameHeight) {
+            chromeRef.current = current - frameHeight;
+          }
+        }
+        applyDesiredHeight();
+      },
+      [applyDesiredHeight]
+    );
+    const setBodyContentHeight = useCallback(
+      (contentHeight) => {
+        if (contentHeight <= 0) return;
+        bodyContentRef.current = contentHeight;
+        applyDesiredHeight();
+      },
+      [applyDesiredHeight]
+    );
+    const measureContextValue = useMemo(
+      () => ({ setBodyFrameHeight, setBodyContentHeight }),
+      [setBodyFrameHeight, setBodyContentHeight]
+    );
     const panResponder = useRef(
       PanResponder.create({
         // Claim the responder as soon as a touch starts on the grabber so the
@@ -8957,16 +9073,16 @@ var DrawerContent = React65.forwardRef(
       () => ({ panHandlers: panResponder.panHandlers }),
       [panResponder.panHandlers]
     );
-    const hasFooter = React65.Children.toArray(children).some(
-      (child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Footer"
+    const hasFooter = React66.Children.toArray(children).some(
+      (child) => React66.isValidElement(child) && child.type.displayName === "Drawer.Footer"
     );
-    const headerChild = React65.Children.toArray(children).find(
-      (child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Header"
+    const headerChild = React66.Children.toArray(children).find(
+      (child) => React66.isValidElement(child) && child.type.displayName === "Drawer.Header"
     );
     const headerContextValue = headerChild != null ? {
       variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
     } : null;
-    return /* @__PURE__ */ jsx(DrawerHeaderContext.Provider, { value: headerContextValue, children: /* @__PURE__ */ jsx(DrawerFooterContext.Provider, { value: hasFooter, children: /* @__PURE__ */ jsx(DrawerDragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DrawerHeaderContext.Provider, { value: headerContextValue, children: /* @__PURE__ */ jsx(DrawerFooterContext.Provider, { value: hasFooter, children: /* @__PURE__ */ jsx(DrawerMeasureContext.Provider, { value: measureContextValue, children: /* @__PURE__ */ jsx(DrawerDragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ jsx(
       Animated.View,
       {
         style: [
@@ -8996,7 +9112,7 @@ var DrawerContent = React65.forwardRef(
           })
         )
       }
-    ) }) }) });
+    ) }) }) }) });
   }
 );
 DrawerContent.displayName = "Drawer.Content";
@@ -9024,7 +9140,7 @@ var StyledBar = styled50(View)(({ barWidth, barHeight, barBorderRadius, barColor
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var DrawerGrabber = React65.forwardRef(
+var DrawerGrabber = React66.forwardRef(
   (props, ref) => {
     var _a;
     const theme2 = useTheme();
@@ -9052,7 +9168,7 @@ var DrawerGrabber = React65.forwardRef(
 );
 DrawerGrabber.displayName = "Drawer.Grabber";
 var parseTokenValue24 = (value) => parseFloat(value);
-var DrawerClose = React65.forwardRef(
+var DrawerClose = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { "aria-label": ariaLabel = "Close" } = _b, props = __objRest(_b, ["aria-label"]);
     const theme2 = useTheme();
@@ -9165,8 +9281,8 @@ var StyledTitleContent = styled50(View)(
 function splitChildren(children) {
   let closeChild = null;
   const otherChildren = [];
-  React65.Children.forEach(children, (child) => {
-    if (React65.isValidElement(child) && child.type === DrawerClose) {
+  React66.Children.forEach(children, (child) => {
+    if (React66.isValidElement(child) && child.type === DrawerClose) {
       closeChild = child;
     } else {
       otherChildren.push(child);
@@ -9174,7 +9290,7 @@ function splitChildren(children) {
   });
   return { closeChild, otherChildren };
 }
-var DrawerHeader = React65.forwardRef(
+var DrawerHeader = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "titleAndText", imageSource, children } = _b, props = __objRest(_b, ["variant", "imageSource", "children"]);
     var _a2, _b2, _c, _d, _e, _f;
@@ -9261,7 +9377,7 @@ var DrawerHeader = React65.forwardRef(
   }
 );
 DrawerHeader.displayName = "Drawer.Header";
-var DrawerTitle = React65.forwardRef(
+var DrawerTitle = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -9277,7 +9393,7 @@ var DrawerTitle = React65.forwardRef(
   }
 );
 DrawerTitle.displayName = "Drawer.Title";
-var DrawerDescription = React65.forwardRef(
+var DrawerDescription = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -9299,31 +9415,56 @@ var StyledScrollView = styled50(ScrollView)(
     bodyPaddingHorizontal,
     bodyPaddingRight,
     bodyGap,
-    bodyMaxHeight,
     bodyPaddingBottom
   }) => ({
+    // flex: 1 fills the bounded panel so the ScrollView can scroll. The panel
+    // (DrawerContent) is the single height authority — the body must NOT set
+    // its own maxHeight, or it would cap independently of the panel and corrupt
+    // the panel's chrome measurement.
     flex: 1,
     paddingLeft: bodyPaddingHorizontal,
     paddingRight: bodyPaddingRight,
     gap: bodyGap,
-    maxHeight: bodyMaxHeight,
     paddingBottom: bodyPaddingBottom
   })
 );
-var DrawerBody = React65.forwardRef(
+var DrawerBody = React66.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
+    var _b = _a, {
+      children,
+      contentContainerStyle,
+      onLayout,
+      onContentSizeChange
+    } = _b, props = __objRest(_b, [
+      "children",
+      "contentContainerStyle",
+      "onLayout",
+      "onContentSizeChange"
+    ]);
     const theme2 = useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const { buttons } = theme2.tokens.components;
     const { content } = spacing;
     const headerContext = useDrawerHeaderContext();
     const footerContext = useDrawerFooterContext();
-    const { height: windowHeight } = useWindowDimensions();
+    const measureContext = useDrawerMeasureContext();
     const gap = parseTokenValue26(content.slot.gap);
     const horizontalPadding = parseTokenValue26(content.slot.horizontalPadding);
     const topPadding = parseTokenValue26(content.slot.verticalPadding);
-    const bodyMaxHeight = windowHeight - 300;
+    const handleLayout = useCallback(
+      (event) => {
+        measureContext == null ? void 0 : measureContext.setBodyFrameHeight(event.nativeEvent.layout.height);
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [measureContext, onLayout]
+    );
+    const handleContentSizeChange = useCallback(
+      (width, height) => {
+        measureContext == null ? void 0 : measureContext.setBodyContentHeight(height);
+        onContentSizeChange == null ? void 0 : onContentSizeChange(width, height);
+      },
+      [measureContext, onContentSizeChange]
+    );
     const paddingRight = headerContext === null ? parseTokenValue26(spacing.close.right.md) + parseTokenValue26(buttons.size.sm.height) : horizontalPadding;
     const bodyPaddingBottom = !footerContext ? parseTokenValue26(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
     return /* @__PURE__ */ jsx(
@@ -9333,8 +9474,9 @@ var DrawerBody = React65.forwardRef(
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
         bodyGap: gap,
-        bodyMaxHeight,
         bodyPaddingBottom,
+        onLayout: handleLayout,
+        onContentSizeChange: handleContentSizeChange,
         contentContainerStyle: [
           {
             gap,
@@ -9357,7 +9499,7 @@ var StyledFooter = styled50(View)(({ footerPaddingTop, footerPaddingHorizontal,
   paddingHorizontal: footerPaddingHorizontal,
   paddingBottom: footerPaddingBottom
 }));
-var DrawerFooter = React65.forwardRef(
+var DrawerFooter = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -9379,7 +9521,7 @@ var DrawerFooter = React65.forwardRef(
   }
 );
 DrawerFooter.displayName = "Drawer.Footer";
-var DrawerRoot = React65.forwardRef(
+var DrawerRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       open: controlledOpen,
@@ -9420,15 +9562,15 @@ var DrawerRoot = React65.forwardRef(
   }
 );
 DrawerRoot.displayName = "Drawer";
-var DrawerTrigger = React65.forwardRef(
+var DrawerTrigger = React66.forwardRef(
   ({ children }, ref) => {
-    const { openDrawer } = React65.useContext(DrawerContext);
+    const { openDrawer } = React66.useContext(DrawerContext);
     return /* @__PURE__ */ jsx(Slot, { ref, onPress: openDrawer, children });
   }
 );
 DrawerTrigger.displayName = "Drawer.Trigger";
 var DrawerPortal = ({ children, topContent }) => {
-  const { modalVisible, closeDrawer } = React65.useContext(DrawerContext);
+  const { modalVisible, closeDrawer } = React66.useContext(DrawerContext);
   if (!modalVisible) return null;
   return /* @__PURE__ */ jsx(
     Modal,
@@ -9499,7 +9641,7 @@ var StyledButtonGroup = styled50(View)(({ groupDirection, groupAlign, groupJusti
   gap: groupGap,
   width: "100%"
 }, groupDirection === "column" ? { maxWidth: 520 } : {}));
-var ButtonDock = React65.forwardRef(
+var ButtonDock = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
     const theme2 = useTheme();
@@ -9579,7 +9721,7 @@ var StyledButtonRow = styled50(View)(({ rowDirection, rowAlign, rowGap }) => __s
 var StyledChildSlot = styled50(View)(
   ({ slotInline }) => __spreadValues({}, slotInline ? { flex: 1, minWidth: 0 } : { width: "100%", alignSelf: "stretch" })
 );
-var ButtonGroup = React65.forwardRef(
+var ButtonGroup = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { layout = "stacked", description, children } = _b, rest = __objRest(_b, ["layout", "description", "children"]);
     const theme2 = useTheme();
@@ -9601,9 +9743,9 @@ var ButtonGroup = React65.forwardRef(
               rowGap: parseTokenValue29(
                 isInline ? buttonGroup.spacing.sideBySide.gap : buttonGroup.spacing.stacked.gap
               ),
-              children: React65.Children.map(children, (child, index) => {
-                if (!React65.isValidElement(child)) return child;
-                return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React65.cloneElement(
+              children: React66.Children.map(children, (child, index) => {
+                if (!React66.isValidElement(child)) return child;
+                return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React66.cloneElement(
                   child,
                   {
                     fullWidth: true
@@ -9678,7 +9820,7 @@ var StyledIllustration = styled50(View)(({ illustrationSize }) => ({
   height: illustrationSize,
   overflow: "hidden"
 }));
-var Checkbox = React65.forwardRef(
+var Checkbox = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -9705,7 +9847,7 @@ var Checkbox = React65.forwardRef(
     const { checkbox } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
     const handleCheckedChange = (checked) => {
       if (!isControlled) {
@@ -9800,7 +9942,7 @@ var StyledGroup = styled50(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
-var CheckboxGroup = React65.forwardRef(
+var CheckboxGroup = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
     const theme2 = useTheme();
@@ -9818,7 +9960,7 @@ var CheckboxGroup = React65.forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var CopyFieldInput = React65.forwardRef(
+var CopyFieldInput = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onCopy,
@@ -9837,19 +9979,19 @@ var CopyFieldInput = React65.forwardRef(
       "editable",
       "defaultValue"
     ]);
-    const [internalValue, setInternalValue] = React65.useState(
+    const [internalValue, setInternalValue] = React66.useState(
       typeof defaultValue === "string" ? defaultValue : ""
     );
-    const [copied, setCopied] = React65.useState(false);
-    const timeoutRef = React65.useRef(
+    const [copied, setCopied] = React66.useState(false);
+    const timeoutRef = React66.useRef(
       void 0
     );
-    React65.useEffect(() => {
+    React66.useEffect(() => {
       if (defaultValue !== void 0 && value === void 0) {
         setInternalValue(typeof defaultValue === "string" ? defaultValue : "");
       }
     }, [defaultValue, value]);
-    React65.useEffect(() => {
+    React66.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -9916,7 +10058,7 @@ var StyledRoot8 = styled50(View)(({ theme: theme2 }) => {
     gap: parseTokenValue32(spacing.gap)
   };
 });
-var CopyFieldRoot = React65.forwardRef(
+var CopyFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -9984,7 +10126,7 @@ var useCopyField = (options = {}) => {
     onCopy: handleCopy
   };
 };
-var FilterTabContext = React65.createContext({
+var FilterTabContext = React66.createContext({
   size: "sm",
   selectedValues: [],
   toggle: () => {
@@ -10023,7 +10165,7 @@ var StyledItem2 = styled50(Pressable)(
     flexShrink: 0
   })
 );
-var FilterTabItem = React65.forwardRef(
+var FilterTabItem = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -10043,7 +10185,7 @@ var FilterTabItem = React65.forwardRef(
       "accessibilityLabel"
     ]);
     const theme2 = useTheme();
-    const { size, selectedValues, toggle } = React65.useContext(FilterTabContext);
+    const { size, selectedValues, toggle } = React66.useContext(FilterTabContext);
     const isSelected = selectedValues.includes(value);
     const isIconOnly = !!IconOnlyIcon && !label;
     const isActive = isSelected && !disabled;
@@ -10117,7 +10259,7 @@ var FilterTabItem = React65.forwardRef(
   }
 );
 FilterTabItem.displayName = "FilterTab.Item";
-var FilterTabRoot = React65.forwardRef(
+var FilterTabRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "sm",
@@ -10137,9 +10279,9 @@ var FilterTabRoot = React65.forwardRef(
     const theme2 = useTheme();
     const { filterTabs } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(defaultValue);
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
     const selectedValues = isControlled ? controlledValue : internalValue;
-    const toggle = React65.useCallback(
+    const toggle = React66.useCallback(
       (itemValue) => {
         let next;
         if (multiple) {
@@ -10152,7 +10294,7 @@ var FilterTabRoot = React65.forwardRef(
       },
       [selectedValues, isControlled, onValueChange, multiple]
     );
-    const contextValue = React65.useMemo(
+    const contextValue = React66.useMemo(
       () => ({ size, selectedValues, toggle }),
       [size, selectedValues, toggle]
     );
@@ -10184,6 +10326,7 @@ var StyledFieldWrapper = styled50(View)(
   }) => __spreadValues({
     alignItems: "center",
     justifyContent: "center",
+    position: "relative",
     width: fullWidth ? "100%" : fieldMinWidth,
     minWidth: fieldMinWidth,
     height: fieldHeight,
@@ -10195,25 +10338,33 @@ var StyledFieldWrapper = styled50(View)(
     overflow: "hidden"
   }, fullWidth && { flex: 1 })
 );
-var StyledTextInput = styled50(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
-  textAlign: "center",
-  outlineStyle: "none",
-  padding: 0,
-  minWidth: 0,
-  minHeight: 0,
-  width: "100%",
-  height: "100%",
-  color: inputColor,
-  fontFamily: inputFontFamily
-}, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
-  fontSize: inputFontSize
-}));
+var StyledTextInput = styled50(TextInput)(
+  ({
+    inputColor,
+    inputFontFamily,
+    inputFontWeight,
+    inputFontSize,
+    hasInlineHelp
+  }) => __spreadValues(__spreadProps(__spreadValues({
+    textAlign: "center",
+    outlineStyle: "none",
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    height: "100%",
+    color: inputColor,
+    fontFamily: inputFontFamily
+  }, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
+    fontSize: inputFontSize
+  }), hasInlineHelp ? { position: "relative", top: -8 } : {})
+);
 var StyledRow = styled50(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rowGap
 }));
-var NumberFieldInput = React65.forwardRef(
+var NumberFieldInput = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       fieldSize = "lg",
@@ -10228,6 +10379,7 @@ var NumberFieldInput = React65.forwardRef(
       decrementDisabled = false,
       min,
       max,
+      inlineHelpText,
       style,
       onFocus,
       onBlur,
@@ -10247,6 +10399,7 @@ var NumberFieldInput = React65.forwardRef(
       "decrementDisabled",
       "min",
       "max",
+      "inlineHelpText",
       "style",
       "onFocus",
       "onBlur",
@@ -10258,9 +10411,9 @@ var NumberFieldInput = React65.forwardRef(
     const theme2 = useTheme();
     const tokens3 = theme2.tokens.components.numberField;
     const inputTokens3 = theme2.tokens.components.inputs;
-    const [isFocused, setIsFocused] = React65.useState(false);
-    const [isEdited, setIsEdited] = React65.useState(false);
-    const initialValueRef = React65.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
+    const [isFocused, setIsFocused] = React66.useState(false);
+    const [isEdited, setIsEdited] = React66.useState(false);
+    const initialValueRef = React66.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
     const isLarge = fieldSize === "lg";
     const sizeTokens = isLarge ? tokens3.spacing.large : tokens3.spacing.small;
     const buttonSize = isLarge ? "lg" : "sm";
@@ -10277,14 +10430,14 @@ var NumberFieldInput = React65.forwardRef(
       if (isEdited) return tokens3.colour.field.border.edited;
       return tokens3.colour.field.border.default;
     };
-    const handleFocus = React65.useCallback(
+    const handleFocus = React66.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React65.useCallback(
+    const handleBlur = React66.useCallback(
       (e) => {
         setIsFocused(false);
         if (value != null && onChangeText) {
@@ -10303,7 +10456,7 @@ var NumberFieldInput = React65.forwardRef(
     const numericValue = value != null ? Number(value) : Number(defaultValue != null ? defaultValue : 0);
     const isAtMin = min != null && numericValue <= min;
     const isAtMax = max != null && numericValue >= max;
-    const handleChangeText = React65.useCallback(
+    const handleChangeText = React66.useCallback(
       (text) => {
         setIsEdited(text !== initialValueRef.current);
         onChangeText == null ? void 0 : onChangeText(text);
@@ -10325,7 +10478,7 @@ var NumberFieldInput = React65.forwardRef(
           disabled: disabled || decrementDisabled || isAtMin
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         StyledFieldWrapper,
         {
           fieldBgColor: tokens3.colour.field.background.default,
@@ -10335,24 +10488,48 @@ var NumberFieldInput = React65.forwardRef(
           fieldHeight,
           fieldPaddingHorizontal,
           fullWidth,
-          children: /* @__PURE__ */ jsx(
-            StyledTextInput,
-            __spreadValues({
-              ref,
-              inputColor: tokens3.colour.field.text.default,
-              inputFontFamily: resolvedInputFontFamily,
-              inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
-              inputFontSize: parseTokenValue34(typographyToken.fontSize),
-              keyboardType: "numeric",
-              editable: !disabled,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onChangeText: handleChangeText,
-              defaultValue,
-              value,
-              style
-            }, rest)
-          )
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledTextInput,
+              __spreadValues({
+                ref,
+                inputColor: tokens3.colour.field.text.default,
+                inputFontFamily: resolvedInputFontFamily,
+                inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
+                inputFontSize: parseTokenValue34(typographyToken.fontSize),
+                hasInlineHelp: !!inlineHelpText,
+                keyboardType: "numeric",
+                editable: !disabled,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChangeText: handleChangeText,
+                defaultValue,
+                value,
+                style
+              }, rest)
+            ),
+            inlineHelpText && /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  position: "absolute",
+                  bottom: 4,
+                  width: fieldMinWidth,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: inputTokens3.description.text.default,
+                    color: inputTokens3.colour.description.default,
+                    children: inlineHelpText
+                  }
+                )
+              }
+            )
+          ]
         }
       ),
       showIncrementButton && /* @__PURE__ */ jsx(
@@ -10378,7 +10555,7 @@ var StyledRoot10 = styled50(View)(({ rootGap, fullWidth }) => __spreadValues({
 var StyledLabelGroup = styled50(View)(({ labelGap }) => ({
   gap: labelGap
 }));
-var NumberField = React65.forwardRef(
+var NumberField = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -10493,9 +10670,9 @@ var NumberField = React65.forwardRef(
 );
 NumberField.displayName = "NumberField";
 var HIT_SLOP = 12;
-var PasswordFieldInput = React65.forwardRef((_a, ref) => {
+var PasswordFieldInput = React66.forwardRef((_a, ref) => {
   var _b = _a, { onValueChange, value, state, editable } = _b, inputFieldProps = __objRest(_b, ["onValueChange", "value", "state", "editable"]);
-  const [showPassword, setShowPassword] = React65.useState(false);
+  const [showPassword, setShowPassword] = React66.useState(false);
   const handleValueChange = (newValue) => {
     onValueChange == null ? void 0 : onValueChange(newValue);
   };
@@ -10540,7 +10717,7 @@ var StyledErrorRow2 = styled50(View)(({ gap }) => ({
   alignItems: "center",
   gap
 }));
-var PasswordFieldError = React65.forwardRef((_a, ref) => {
+var PasswordFieldError = React66.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = useTheme();
   const { listItem } = theme2.tokens.components.validationList;
@@ -10579,7 +10756,7 @@ var StyledRequirementItem = styled50(View)(
     gap: itemGap
   })
 );
-var PasswordFieldRequirements = React65.forwardRef((_a, ref) => {
+var PasswordFieldRequirements = React66.forwardRef((_a, ref) => {
   var _b = _a, { requirements } = _b, rest = __objRest(_b, ["requirements"]);
   const theme2 = useTheme();
   const { listItem, list } = theme2.tokens.components.validationList;
@@ -10635,7 +10812,7 @@ var StyledRoot11 = styled50(View)(({ theme: theme2 }) => {
     gap: parseTokenValue38(spacing.gap)
   };
 });
-var PasswordFieldRoot = React65.forwardRef(
+var PasswordFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -10770,7 +10947,7 @@ var StyledIndicator = styled50(View)(({ indicatorBorderRadius, indicatorBgColor
   backgroundColor: indicatorBgColor
 }));
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-var Progress = React65.forwardRef(
+var Progress = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value = 0,
@@ -10898,6 +11075,9 @@ var StyledIndicator2 = styled50(View)(({ indicatorSize, indicatorBgColor }) => (
   backgroundColor: indicatorBgColor
 }));
 var StyledTextContent = styled50(View)(({ textContentGap }) => ({
+  // Take the row's remaining width so long label/subText wraps within the tile
+  // instead of pushing the trailing asset past the tile's edge.
+  flex: 1,
   flexDirection: "column",
   gap: textContentGap
 }));
@@ -10910,7 +11090,7 @@ var StyledTagWrapper = styled50(View)(
     paddingTop: tagTopPadding
   })
 );
-var Radio = React65.forwardRef(
+var Radio = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -11014,7 +11194,7 @@ var Radio = React65.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var RadioTile = React65.forwardRef(
+var RadioTile = React66.forwardRef(
   (props, ref) => /* @__PURE__ */ jsx(Radio, __spreadProps(__spreadValues({ ref }, props), { variant: "tile" }))
 );
 RadioTile.displayName = "RadioTile";
@@ -11023,7 +11203,7 @@ var StyledRadioGroup = styled50(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
-var RadioGroupRoot = React65.forwardRef(
+var RadioGroupRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name: _name,
@@ -11050,11 +11230,11 @@ var RadioGroupRoot = React65.forwardRef(
     const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
     const derivedDefaultValue = defaultValue != null ? defaultValue : optionsFirstValue;
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(
+    const [internalValue, setInternalValue] = React66.useState(
       derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : internalValue;
-    const handleSelect = React65.useCallback(
+    const handleSelect = React66.useCallback(
       (newValue) => {
         if (!isControlled) {
           setInternalValue(newValue);
@@ -11075,9 +11255,9 @@ var RadioGroupRoot = React65.forwardRef(
           option.value
         ));
       }
-      return React65.Children.map(children, (child) => {
-        if (!React65.isValidElement(child)) return child;
-        return React65.cloneElement(child, {
+      return React66.Children.map(children, (child) => {
+        if (!React66.isValidElement(child)) return child;
+        return React66.cloneElement(child, {
           selected: currentValue === child.props.value,
           onSelect: handleSelect,
           disabled: disabled || child.props.disabled
@@ -11102,11 +11282,11 @@ var RadioGroup = Object.assign(RadioGroupRoot, {
   Radio,
   Tile: RadioTile
 });
-var SearchFieldInput = React65.forwardRef((_a, ref) => {
+var SearchFieldInput = React66.forwardRef((_a, ref) => {
   var _b = _a, { onClear, onValueChange, value, state } = _b, inputFieldProps = __objRest(_b, ["onClear", "onValueChange", "value", "state"]);
-  const [internalValue, setInternalValue] = React65.useState("");
-  const inputRef = React65.useRef(null);
-  React65.useImperativeHandle(ref, () => inputRef.current);
+  const [internalValue, setInternalValue] = React66.useState("");
+  const inputRef = React66.useRef(null);
+  React66.useImperativeHandle(ref, () => inputRef.current);
   const handleValueChange = (newValue) => {
     setInternalValue(newValue);
     onValueChange == null ? void 0 : onValueChange(newValue);
@@ -11152,7 +11332,7 @@ var StyledRoot13 = styled50(View)(({ theme: theme2 }) => {
     gap: parseTokenValue42(spacing.gap)
   };
 });
-var SearchFieldRoot = React65.forwardRef(
+var SearchFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -11282,7 +11462,7 @@ var ScrollIndicatorGradient = ({
   side,
   color
 }) => {
-  const uid = React65.useId();
+  const uid = React66.useId();
   const gradientId = `sc-scroll-indicator-${side}-${uid}`;
   const isTrailing = side === "trailing";
   return /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
@@ -11365,7 +11545,7 @@ var SegmentedControlItemBase = ({
     }
   );
 };
-var SegmentedControlItem = React65.forwardRef(
+var SegmentedControlItem = React66.forwardRef(
   (_props, _ref) => {
     return null;
   }
@@ -11381,10 +11561,10 @@ var IntrinsicTrack = (_a) => {
     "renderItems",
     "forwardedRef"
   ]);
-  const scrollRef = React65.useRef(null);
-  const [containerWidth, setContainerWidth] = React65.useState(0);
-  const [contentWidth, setContentWidth] = React65.useState(0);
-  const [scrollX, setScrollX] = React65.useState(0);
+  const scrollRef = React66.useRef(null);
+  const [containerWidth, setContainerWidth] = React66.useState(0);
+  const [contentWidth, setContentWidth] = React66.useState(0);
+  const [scrollX, setScrollX] = React66.useState(0);
   const epsilon = 2;
   const maxScroll = Math.max(0, contentWidth - containerWidth);
   const canScrollLeft = scrollX > epsilon;
@@ -11480,7 +11660,7 @@ var IntrinsicTrack = (_a) => {
     })
   );
 };
-var SegmentedControlRoot = React65.forwardRef(
+var SegmentedControlRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       options,
@@ -11504,18 +11684,18 @@ var SegmentedControlRoot = React65.forwardRef(
     const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
-    const childrenArray = React65.Children.toArray(children);
+    const childrenArray = React66.Children.toArray(children);
     const firstChildValue = childrenArray.map((child) => {
-      if (!React65.isValidElement(child)) return void 0;
+      if (!React66.isValidElement(child)) return void 0;
       return child.props.value;
     }).find((v) => typeof v === "string");
     const derivedDefaultValue = (_b2 = defaultValue != null ? defaultValue : optionsFirstValue) != null ? _b2 : firstChildValue;
     const isControlled = typeof value === "string";
-    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React66.useState(
       () => derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleSelect = React65.useCallback(
+    const handleSelect = React66.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -11541,7 +11721,7 @@ var SegmentedControlRoot = React65.forwardRef(
         ));
       }
       return childrenArray.map((child) => {
-        if (!React65.isValidElement(child)) return child;
+        if (!React66.isValidElement(child)) return child;
         const childProps = child.props;
         return /* @__PURE__ */ jsx(
           SegmentedControlItemBase,
@@ -11612,7 +11792,7 @@ var StyledArrowIcon = styled50(Animated.View)({
   alignItems: "center",
   justifyContent: "center"
 });
-var SelectFieldTrigger = React65.forwardRef(
+var SelectFieldTrigger = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       state = "default",
@@ -11711,7 +11891,7 @@ var SelectFieldTrigger = React65.forwardRef(
   }
 );
 SelectFieldTrigger.displayName = "SelectField.Trigger";
-var SelectFieldValue = React65.forwardRef(
+var SelectFieldValue = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { placeholder } = _b, rest = __objRest(_b, ["placeholder"]);
     const theme2 = useTheme();
@@ -11755,7 +11935,7 @@ var StyledContentInner = styled50(View)(({ theme: theme2 }) => {
     overflow: "hidden"
   };
 });
-var SelectFieldContent = React65.forwardRef((_a, ref) => {
+var SelectFieldContent = React66.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = useTheme();
   const { spacing } = theme2.tokens.components.inputs;
@@ -11830,7 +12010,7 @@ var StyledHintText = styled50(Text)(({ theme: theme2 }) => {
     flexShrink: 0
   };
 });
-var SelectFieldItem = React65.forwardRef(
+var SelectFieldItem = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, leadingIcon, hintText, children, disabled, isSelected } = _b, rest = __objRest(_b, ["value", "leadingIcon", "hintText", "children", "disabled", "isSelected"]);
     const theme2 = useTheme();
@@ -11882,7 +12062,7 @@ var StyledRoot14 = styled50(View)(({ theme: theme2 }) => {
     gap: parseTokenValue47(spacing.gap)
   };
 });
-var SelectFieldRoot = React65.forwardRef(
+var SelectFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -11917,15 +12097,15 @@ var SelectFieldRoot = React65.forwardRef(
       "searchPlaceholder",
       "noResultsText"
     ]);
-    const [isOpen, setIsOpen] = React65.useState(false);
-    const [showContent, setShowContent] = React65.useState(false);
-    const [internalValue, setInternalValue] = React65.useState(
+    const [isOpen, setIsOpen] = React66.useState(false);
+    const [showContent, setShowContent] = React66.useState(false);
+    const [internalValue, setInternalValue] = React66.useState(
       defaultValue != null ? defaultValue : null
     );
-    const [searchQuery, setSearchQuery] = React65.useState("");
-    const [clearKey, setClearKey] = React65.useState(0);
-    const searchInputRef = React65.useRef(null);
-    React65.useEffect(() => {
+    const [searchQuery, setSearchQuery] = React66.useState("");
+    const [clearKey, setClearKey] = React66.useState(0);
+    const searchInputRef = React66.useRef(null);
+    React66.useEffect(() => {
       if (!isOpen) {
         setShowContent(false);
         return;
@@ -11958,8 +12138,8 @@ var SelectFieldRoot = React65.forwardRef(
         keyboardSub.remove();
       };
     }, [isOpen, searchable]);
-    const isCompound = React65.Children.toArray(children).some(
-      (child) => React65.isValidElement(child) && child.type === SelectFieldContent
+    const isCompound = React66.Children.toArray(children).some(
+      (child) => React66.isValidElement(child) && child.type === SelectFieldContent
     );
     if (isCompound) {
       return /* @__PURE__ */ jsx(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children }));
@@ -11974,11 +12154,11 @@ var SelectFieldRoot = React65.forwardRef(
       if (!open) setSearchQuery("");
     };
     const currentValue = value !== void 0 ? value : internalValue;
-    const allItems = React65.Children.toArray(children);
+    const allItems = React66.Children.toArray(children);
     const filteredItems = searchable ? allItems.filter((child) => {
       var _a2;
       if (!searchQuery) return true;
-      if (React65.isValidElement(child) && child.type === SelectFieldItem) {
+      if (React66.isValidElement(child) && child.type === SelectFieldItem) {
         const label2 = String(
           (_a2 = child.props.children) != null ? _a2 : ""
         );
@@ -12047,10 +12227,10 @@ var SelectFieldRoot = React65.forwardRef(
           ] })),
           showContent && /* @__PURE__ */ jsxs(SelectFieldContent, { children: [
             filteredItems.map((child) => {
-              if (React65.isValidElement(child) && child.type === SelectFieldItem) {
+              if (React66.isValidElement(child) && child.type === SelectFieldItem) {
                 const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
                 const childProps = child.props;
-                return React65.cloneElement(
+                return React66.cloneElement(
                   child,
                   {
                     isSelected: childProps.value === selectedValue
@@ -12217,7 +12397,7 @@ var useIconAnimation = () => {
     iconAnimationStyles
   };
 };
-var NativeSelectPicker = React65.forwardRef(
+var NativeSelectPicker = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       items,
@@ -12376,7 +12556,7 @@ var StyledLabelSlot = styled50(View)(({ labelSlotGap }) => ({
   gap: labelSlotGap,
   flexShrink: 0
 }));
-var Slider = React65.forwardRef(
+var Slider = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: controlledValue,
@@ -12411,7 +12591,7 @@ var Slider = React65.forwardRef(
     const { slider, buttons } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(defaultValue);
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
     const currentValue = isControlled ? controlledValue : internalValue;
     const thumbSize = parseTokenValue48(buttons.size.md.height);
     const trackHeight = parseTokenValue48(slider.sizing.track.height);
@@ -12794,7 +12974,7 @@ var StyledCloseButton = styled50(Pressable)({
   flexShrink: 0,
   padding: 0
 });
-var Notification = React65.forwardRef(
+var Notification = React66.forwardRef(
   (props, ref) => {
     const _a = props, {
       variant = "inline",
@@ -13138,7 +13318,7 @@ function NibTriangle({
     }
   );
 }
-var Tooltip = React65.forwardRef(
+var Tooltip = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { text, alignment = "middle", position = "bottom", children } = _b, props = __objRest(_b, ["text", "alignment", "position", "children"]);
     const theme2 = useTheme();
@@ -13226,8 +13406,8 @@ var Tooltip = React65.forwardRef(
       return bubble;
     }
     if (Platform.OS === "web") {
-      const child = React65.isValidElement(children) ? children : null;
-      const trigger = child ? React65.cloneElement(child, {
+      const child = React66.isValidElement(children) ? children : null;
+      const trigger = child ? React66.cloneElement(child, {
         onPress: () => {
           var _a2, _b2;
           (_b2 = (_a2 = child.props).onPress) == null ? void 0 : _b2.call(_a2);
@@ -13304,7 +13484,7 @@ var StyledInsightContent = styled50(View)(
     gap: contentGap
   })
 );
-var MessageCardInsight = React65.forwardRef(
+var MessageCardInsight = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "standalone", icon, illustration, title, children } = _b, rest = __objRest(_b, ["variant", "icon", "illustration", "title", "children"]);
     const theme2 = useTheme();
@@ -13415,7 +13595,7 @@ var StyledBannerCopy = styled50(View)(({ copyGap }) => ({
   gap: copyGap,
   width: "100%"
 }));
-var MessageCardBanner = React65.forwardRef(
+var MessageCardBanner = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       colourScheme = "primary",
@@ -13449,7 +13629,7 @@ var MessageCardBanner = React65.forwardRef(
         accessibilityRole: "summary"
       }, rest), {
         children: [
-          (media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React65.createElement(media.illustration, {
+          (media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React66.createElement(media.illustration, {
             width: 108,
             height: 108
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
@@ -13548,29 +13728,32 @@ function defaultGetDateState(date) {
 function getDefaultMonthLabel(year, month, locale) {
   return format(new Date(year, month, 1), "MMMM yyyy", { locale });
 }
-var StyledContainer3 = styled50(View)(({ containerGap, containerMaxWidth }) => ({
+var StyledContainer3 = styled50(View)(({ containerMaxWidth }) => ({
   flexDirection: "column",
-  gap: containerGap,
+  // Fill the parent by default (capped by maxWidth) so consumers don't need a
+  // wrapper. Overridable via the `style` prop.
+  width: "100%",
   maxWidth: containerMaxWidth
 }));
 var StyledMonthHeader = styled50(View)(
-  ({ headerGap }) => ({
+  ({ headerGap, datesGap }) => ({
     flexDirection: "row",
     alignItems: "center",
-    gap: headerGap
+    gap: headerGap,
+    // Gap between the month header and the dates grid.
+    marginBottom: datesGap
   })
 );
-var StyledWeekRow = styled50(View)({
-  flexDirection: "row"
+var StyledWeekRow = styled50(View)(({ weekGap }) => ({
+  flexDirection: "row",
+  // Gap between the week-day header and the month header.
+  marginBottom: weekGap
+}));
+var StyledWeekCell = styled50(View)({
+  flex: 1,
+  alignItems: "center",
+  justifyContent: "center"
 });
-var StyledWeekCell = styled50(View)(
-  ({ cellHeight }) => ({
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    height: cellHeight
-  })
-);
 var StyledDatesGrid = styled50(View)(({ rowGap }) => ({
   flexDirection: "column",
   gap: rowGap
@@ -13606,7 +13789,7 @@ var StyledIndicator3 = styled50(View)(
     justifyContent: "center"
   })
 );
-var DatePicker = React65.forwardRef(
+var DatePicker = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       year,
@@ -13652,7 +13835,8 @@ var DatePicker = React65.forwardRef(
     const dt = datePicker.dateItem;
     const [slideDir, setSlideDir] = useState("forward");
     const {
-      containerGap,
+      weekGap,
+      datesGap,
       containerMaxWidth,
       headerGap,
       cellHeight,
@@ -13663,7 +13847,10 @@ var DatePicker = React65.forwardRef(
       rowGap
     } = useMemo(
       () => ({
-        containerGap: parseTokenValue52(datePicker.spacing.gap),
+        // Gap between the week-day header and the month header.
+        weekGap: parseTokenValue52(datePicker.spacing.gap),
+        // Gap between the month header and the dates grid.
+        datesGap: parseTokenValue52(theme2.tokens.semantics.dimensions.spacing.md),
         containerMaxWidth: parseTokenValue52(dt.size.width) * 7,
         headerGap: parseTokenValue52(datePicker.month.spacing.gap),
         cellHeight: parseTokenValue52(dt.size.height),
@@ -13673,7 +13860,7 @@ var DatePicker = React65.forwardRef(
         disabledOpacity: parseTokenValue52(dt.opacity.disabled),
         rowGap: parseTokenValue52(datePicker.dates.spacing.gap)
       }),
-      [datePicker, dt]
+      [datePicker, dt, theme2]
     );
     const resolvedGetDateState = useCallback(
       (date) => {
@@ -13783,11 +13970,10 @@ var DatePicker = React65.forwardRef(
       StyledContainer3,
       __spreadProps(__spreadValues({
         ref,
-        containerGap,
         containerMaxWidth
       }, rest), {
         children: [
-          showWeekHeader && /* @__PURE__ */ jsx(StyledWeekRow, { accessibilityElementsHidden: true, children: weekDayLabels.map((label) => /* @__PURE__ */ jsx(StyledWeekCell, { cellHeight, children: /* @__PURE__ */ jsx(
+          showWeekHeader && /* @__PURE__ */ jsx(StyledWeekRow, { weekGap, accessibilityElementsHidden: true, children: weekDayLabels.map((label) => /* @__PURE__ */ jsx(StyledWeekCell, { children: /* @__PURE__ */ jsx(
             Typography,
             {
               token: datePicker.week.typography,
@@ -13796,13 +13982,13 @@ var DatePicker = React65.forwardRef(
               children: label
             }
           ) }, label)) }),
-          /* @__PURE__ */ jsxs(StyledMonthHeader, { headerGap, children: [
+          /* @__PURE__ */ jsxs(StyledMonthHeader, { headerGap, datesGap, children: [
             /* @__PURE__ */ jsx(View, { style: { opacity: showPrevControl ? 1 : 0 }, children: /* @__PURE__ */ jsx(
               IconButton,
               {
                 icon: KeyboardArrowLeft_default,
                 variant: "filled",
-                size: "sm",
+                size: "md",
                 colour: "primary",
                 "aria-label": "Previous month",
                 onPress: showPrevControl ? handlePrevMonth : void 0,
@@ -13823,7 +14009,7 @@ var DatePicker = React65.forwardRef(
               {
                 icon: KeyboardArrowRight_default,
                 variant: "filled",
-                size: "sm",
+                size: "md",
                 colour: "primary",
                 "aria-label": "Next month",
                 onPress: showNextControl ? handleNextMonth : void 0,
@@ -14003,7 +14189,7 @@ var StyledPointer = styled50(Svg)(
     opacity: pointerVisible ? 1 : 0
   })
 );
-var PictureSelector = React65.forwardRef(
+var PictureSelector = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -14030,7 +14216,7 @@ var PictureSelector = React65.forwardRef(
     const { pictureSelector } = theme2.tokens.components;
     const { pictureButton } = pictureSelector;
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(defaultValue);
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
     const selectedValue = isControlled ? value : internalValue;
     const selectedItem = items.find((item) => item.value === selectedValue);
     const hasInsight = Boolean(
@@ -14214,7 +14400,7 @@ var InlineCount = styled50(View)(({ countGap }) => ({
   alignItems: "center",
   gap: countGap
 }));
-var Countdown = React65.forwardRef(
+var Countdown = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       layout = "stacked",
@@ -14293,7 +14479,7 @@ var Countdown = React65.forwardRef(
               InlineGroup,
               {
                 groupGap: parseTokenValue54(countdown.countdownGroup.spacing.gap),
-                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
+                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
                   index > 0 && colon(`colon-${unit.key}`),
                   /* @__PURE__ */ jsxs(
                     InlineCount,
@@ -14336,7 +14522,7 @@ var Countdown = React65.forwardRef(
         ref,
         rootGap: parseTokenValue54(countdown.spacing.gap)
       }, rest), {
-        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
+        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
           index > 0 && colon(`colon-${unit.key}`),
           /* @__PURE__ */ jsxs(
             StackedItem,
@@ -14424,7 +14610,7 @@ var BadgeIcon = styled50(View)(({ theme: theme2 }) => {
     flexShrink: 0
   };
 });
-var Badge2 = React65.forwardRef(
+var Badge2 = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { icon, text } = _b, rest = __objRest(_b, ["icon", "text"]);
     return /* @__PURE__ */ jsxs(BadgeContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
@@ -14442,7 +14628,7 @@ var StyledGrid = styled50(View)(({ theme: theme2 }) => {
     "grid-row-gap": spacing.xl
   };
 });
-var Grid = React65.forwardRef(
+var Grid = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, xs = 1, md = 2, lg = 3 } = _b, rest = __objRest(_b, ["children", "xs", "md", "lg"]);
     const { width } = useWindowDimensions();
@@ -14541,7 +14727,7 @@ var PricingContainer = styled50(View)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var _ProductListingCard = React65.forwardRef(
+var _ProductListingCard = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       image,
@@ -14583,7 +14769,7 @@ var _ProductListingCard = React65.forwardRef(
             accessibilityLabel: imageAlt,
             accessible: true
           }
-        ) : React65.isValidElement(image) ? image : /* @__PURE__ */ jsx(
+        ) : React66.isValidElement(image) ? image : /* @__PURE__ */ jsx(
           StyledImage2,
           {
             source: image,
@@ -14729,7 +14915,7 @@ var StyledNoneBanner = styled50(View)(({ theme: theme2 }) => {
     borderBottomRightRadius: radiusMd
   };
 });
-var ProductDisplayCard = React65.forwardRef(
+var ProductDisplayCard = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       title,
@@ -14859,9 +15045,9 @@ var ProductDisplayCard = React65.forwardRef(
   }
 );
 ProductDisplayCard.displayName = "ProductDisplayCard";
-var TabNavigationContext = React65.createContext(void 0);
+var TabNavigationContext = React66.createContext(void 0);
 var useTabNavigationContext = () => {
-  const context = React65.useContext(TabNavigationContext);
+  const context = React66.useContext(TabNavigationContext);
   if (!context) {
     throw new Error(
       "TabNavigation.List, TabNavigation.Tab and TabNavigation.Panel must be used within a TabNavigation component."
@@ -14900,7 +15086,7 @@ var StyledTab = styled50(Pressable)(
     borderBottomColor: tabBorderColor
   }, tabFlex !== void 0 ? { flex: tabFlex } : { flexShrink: 0 })
 );
-var TabNavigationList = React65.forwardRef(
+var TabNavigationList = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const { layout } = useTabNavigationContext();
@@ -14919,7 +15105,7 @@ var TabNavigationList = React65.forwardRef(
   }
 );
 TabNavigationList.displayName = "TabNavigation.List";
-var TabNavigationTab = React65.forwardRef(
+var TabNavigationTab = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, disabled = false, icon, avatar, children } = _b, rest = __objRest(_b, ["value", "disabled", "icon", "avatar", "children"]);
     const { layout } = useTabNavigationContext();
@@ -14955,7 +15141,7 @@ var TabNavigationTab = React65.forwardRef(
   }
 );
 TabNavigationTab.displayName = "TabNavigation.Tab";
-var TabNavigationPanel = React65.forwardRef(
+var TabNavigationPanel = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, children } = _b, rest = __objRest(_b, ["value", "children"]);
     const { animation } = useTabNavigationContext();
@@ -14963,7 +15149,7 @@ var TabNavigationPanel = React65.forwardRef(
   }
 );
 TabNavigationPanel.displayName = "TabNavigation.Panel";
-var TabNavigationRoot = React65.forwardRef(
+var TabNavigationRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -14981,11 +15167,11 @@ var TabNavigationRoot = React65.forwardRef(
       "children"
     ]);
     const isControlled = typeof value === "string";
-    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React66.useState(
       () => defaultValue != null ? defaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleValueChange = React65.useCallback(
+    const handleValueChange = React66.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -14994,7 +15180,7 @@ var TabNavigationRoot = React65.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    const contextValue = React65.useMemo(
+    const contextValue = React66.useMemo(
       () => ({ layout, animation }),
       [layout, animation]
     );