@butternutbox/pawprint-native 1.6.3 → 2.0.1

package/dist/index.js

@@ -1,21 +1,21 @@
 import { useTheme, ThemeProvider as ThemeProvider$1 } from '@emotion/react';
 import { Theme, Brand, DEFAULT_THEME_OPTIONS, THEME_OPTIONS_MAP, tokens } from '@butternutbox/pawprint-tokens';
 export { tokens } from '@butternutbox/pawprint-tokens';
-import styled51 from '@emotion/native';
+import styled52 from '@emotion/native';
 export { default as styled } from '@emotion/native';
 import { resolveFont } from '@butternutbox/pawprint-fonts';
 export * from '@butternutbox/pawprint-fonts';
-import React66, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
+import React65, { 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';
+import { Text, View, Animated, Pressable, TextInput, Easing, useWindowDimensions, StyleSheet, Platform, Keyboard, PanResponder, Image, ScrollView, ActionSheetIOS, TouchableOpacity, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
 import Svg72, { Path, Defs, LinearGradient, Stop, Rect, G, ClipPath } from 'react-native-svg';
 import * as SwitchPrimitive from '@rn-primitives/switch';
-import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring, withDelay, withRepeat, withSequence } from 'react-native-reanimated';
+import Animated9, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring, withDelay, withRepeat, withSequence } from 'react-native-reanimated';
 import { Slot } from '@rn-primitives/slot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as ProgressPrimitive from '@rn-primitives/progress';
-import * as SelectPrimitive3 from '@rn-primitives/select';
+import { Portal } from '@rn-primitives/portal';
 import * as SliderPrimitive from '@rn-primitives/slider';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { scheduleOnRN } from 'react-native-worklets';
@@ -157,11 +157,11 @@ var VARIANT_DEFAULTS = {
   heading: { size: "md" },
   display: { size: "lg" }
 };
-var StyledText = styled51(Text)({
+var StyledText = styled52(Text)({
   includeFontPadding: false,
   textAlignVertical: "center"
 });
-var Typography = React66.forwardRef(
+var Typography = React65.forwardRef(
   (props, ref) => {
     const theme2 = useTheme();
     const { typography, colour } = theme2.tokens.semantics;
@@ -251,14 +251,14 @@ var Typography = React66.forwardRef(
 );
 Typography.displayName = "Typography";
 var parseTokenValue2 = (value) => parseFloat(value);
-var StyledIconRoot = styled51(View)(({ iconDimension }) => ({
+var StyledIconRoot = styled52(View)(({ iconDimension }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   width: iconDimension,
   height: iconDimension
 }));
-var Icon = React66.forwardRef(
+var Icon = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -784,7 +784,7 @@ var SIZE_MAP = {
   lg: "large"
 };
 var parseTokenValue3 = (value) => parseFloat(value);
-var StyledRoot = styled51(AvatarPrimitive.Root)(({ theme: theme2, size, border }) => {
+var StyledRoot = styled52(AvatarPrimitive.Root)(({ theme: theme2, size, border }) => {
   const { avatar } = theme2.tokens.components;
   const { borderRadius } = theme2.tokens.semantics.dimensions;
   const tokenSize = SIZE_MAP[size];
@@ -805,12 +805,12 @@ var StyledRoot = styled51(AvatarPrimitive.Root)(({ theme: theme2, size, border }
     borderStyle: "solid"
   });
 });
-var StyledImage = styled51(AvatarPrimitive.Image)({
+var StyledImage = styled52(AvatarPrimitive.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var StyledFallback = styled51(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
+var StyledFallback = styled52(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
   const { background, text } = theme2.tokens.semantics.colour;
   return {
     display: "flex",
@@ -822,7 +822,7 @@ var StyledFallback = styled51(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
     color: text.primary
   };
 });
-var StyledIcon = styled51(Icon)(({
+var StyledIcon = styled52(Icon)(({
   theme: theme2,
   avatarSize
 }) => {
@@ -849,7 +849,7 @@ var AVATAR_SIZE_TO_ICON_SIZE = {
   md: "md",
   lg: "xl"
 };
-var AvatarRoot = React66.forwardRef(
+var AvatarRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       src,
@@ -886,7 +886,7 @@ var AvatarRoot = React66.forwardRef(
 AvatarRoot.displayName = "Avatar";
 var Avatar = AvatarRoot;
 var parseTokenValue4 = (value) => parseFloat(value);
-var Container = styled51(View)(({ theme: theme2, showBg }) => {
+var Container = styled52(View)(({ theme: theme2, showBg }) => {
   const { colour, sizing, borderRadius } = theme2.tokens.components.carouselControls.carouselControl;
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -908,7 +908,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 = React66.forwardRef(
+var CarouselControls = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { count, activeIndex, showBackground = true } = _b, props = __objRest(_b, ["count", "activeIndex", "showBackground"]);
     const theme2 = useTheme();
@@ -955,7 +955,7 @@ var CarouselControls = React66.forwardRef(
 );
 CarouselControls.displayName = "CarouselControls";
 var parseTokenValue5 = (value) => parseFloat(value);
-var StyledBadge = styled51(View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
+var StyledBadge = styled52(View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
   const { sizing, spacing, colour, primary, pinnedBadge } = theme2.tokens.components.badges.badge;
   const backgroundColorMap = {
     primary: colour.background.default,
@@ -995,7 +995,7 @@ var StyledBadge = styled51(View)(({ theme: theme2, badgeVariant, badgeSize, pinn
     backgroundColor: backgroundColorMap[badgeVariant]
   }, borderRadiusStyles), positionStyles);
 });
-var Badge = React66.forwardRef(
+var Badge = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
@@ -1069,8 +1069,8 @@ var Badge = React66.forwardRef(
 );
 Badge.displayName = "Badge";
 var parseTokenValue6 = (value) => parseFloat(value);
-var StyledSpinner = styled51(View)({});
-var Spinner = React66.forwardRef(
+var StyledSpinner = styled52(View)({});
+var Spinner = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
     const theme2 = useTheme();
@@ -1149,12 +1149,12 @@ var sizeToTypographyKey = {
   md: "medium",
   sm: "small"
 };
-var IconWrapper = styled51(View)({
+var IconWrapper = styled52(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var StyledButton = styled51(Pressable)(
+var StyledButton = styled52(Pressable)(
   ({
     buttonMinHeight,
     buttonMinWidth,
@@ -1182,12 +1182,12 @@ var StyledButton = styled51(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
 );
-var StyledSpinnerWrapper = styled51(View)({
+var StyledSpinnerWrapper = styled52(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
 });
-var Button = React66.forwardRef(
+var Button = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "filled",
@@ -1219,7 +1219,7 @@ var Button = React66.forwardRef(
     const typographyKey = sizeToTypographyKey[size];
     const typography = buttons.text[typographyKey];
     resolveFont(typography.fontFamily, typography.fontWeight);
-    const [pressed, setPressed] = React66.useState(false);
+    const [pressed, setPressed] = React65.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const { background: bgTokens, text: textTokens } = getFilledColourTokens(theme2, colour);
@@ -1248,12 +1248,12 @@ var Button = React66.forwardRef(
     };
     const variantStyles = getVariantStyles(pressed);
     const renderIcon = (icon) => {
-      if (!React66.isValidElement(icon)) return icon;
+      if (!React65.isValidElement(icon)) return icon;
       const iconElement = icon;
       if (!pressed) {
         return icon;
       }
-      return React66.cloneElement(iconElement, {
+      return React65.cloneElement(iconElement, {
         customColour: variantStyles.textColor
       });
     };
@@ -1314,7 +1314,7 @@ var Button = React66.forwardRef(
 );
 Button.displayName = "Button";
 var parseTokenValue8 = (value) => parseFloat(value);
-var StyledDivider = styled51(View)(({ theme: theme2, dividerSize, dividerColour }) => {
+var StyledDivider = styled52(View)(({ theme: theme2, dividerSize, dividerColour }) => {
   const { colour, sizing } = theme2.tokens.components.dividers;
   return {
     width: "100%",
@@ -1322,7 +1322,7 @@ var StyledDivider = styled51(View)(({ theme: theme2, dividerSize, dividerColour
     backgroundColor: colour[dividerColour]
   };
 });
-var Divider = React66.forwardRef(
+var Divider = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "small", colour = "light" } = _b, rest = __objRest(_b, ["size", "colour"]);
     return /* @__PURE__ */ jsx(
@@ -1339,7 +1339,7 @@ Divider.displayName = "Divider";
 
 // src/utils/token.ts
 var parseTokenValue9 = (value) => parseFloat(value);
-var StyledHint = styled51(View)(({
+var StyledHint = styled52(View)(({
   theme: theme2,
   hintVariant
 }) => {
@@ -1363,7 +1363,7 @@ var StyledHint = styled51(View)(({
     backgroundColor: hintVariantMap[hintVariant]
   };
 });
-var Hint = React66.forwardRef(
+var Hint = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "default" } = _b, rest = __objRest(_b, ["variant"]);
     return /* @__PURE__ */ jsx(StyledHint, __spreadValues({ ref, hintVariant: variant }, rest));
@@ -1376,7 +1376,7 @@ var sizeToIconSizeToken = {
   md: "lg",
   sm: "md"
 };
-var StyledIconButton = styled51(Pressable)(
+var StyledIconButton = styled52(Pressable)(
   ({
     buttonDimension,
     buttonBorderRadius,
@@ -1395,17 +1395,17 @@ var StyledIconButton = styled51(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {})
 );
-var StyledIconWrapper = styled51(View)(({ iconDimension, iconOpacity }) => ({
+var StyledIconWrapper = styled52(View)(({ iconDimension, iconOpacity }) => ({
   width: iconDimension,
   height: iconDimension,
   opacity: iconOpacity
 }));
-var StyledSpinnerWrapper2 = styled51(View)({
+var StyledSpinnerWrapper2 = styled52(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
 });
-var IconButton = React66.forwardRef(
+var IconButton = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -1431,7 +1431,7 @@ var IconButton = React66.forwardRef(
     const dimension = parseTokenValue10(sizeTokens.minHeight);
     const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
     const iconDimension = parseTokenValue10(iconSizing[sizeToIconSizeToken[size]]);
-    const [pressed, setPressed] = React66.useState(false);
+    const [pressed, setPressed] = React65.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const filled = buttons.iconButton.filledButton;
@@ -1508,7 +1508,7 @@ var IconButton = React66.forwardRef(
 );
 IconButton.displayName = "IconButton";
 var parseTokenValue11 = (value) => parseFloat(value);
-var StyledRoot2 = styled51(View)(({ illustrationHeight, flexboxProps }) => {
+var StyledRoot2 = styled52(View)(({ illustrationHeight, flexboxProps }) => {
   var _a, _b;
   return {
     alignItems: (_a = flexboxProps.align) != null ? _a : "center",
@@ -1521,7 +1521,7 @@ var StyledRoot2 = styled51(View)(({ illustrationHeight, flexboxProps }) => {
     height: illustrationHeight
   };
 });
-var Illustration = React66.forwardRef(
+var Illustration = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       illustration: IllustrationComponent,
@@ -1573,12 +1573,12 @@ var Illustration = React66.forwardRef(
 );
 Illustration.displayName = "Illustration";
 var parseTokenValue12 = (value) => parseFloat(value);
-var StyledLabelRow = styled51(View)(({ labelGap }) => ({
+var StyledLabelRow = styled52(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var InputLabel = React66.forwardRef(
+var InputLabel = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { optionalText, state = "default", children } = _b, rest = __objRest(_b, ["optionalText", "state", "children"]);
     const theme2 = useTheme();
@@ -1606,7 +1606,7 @@ var InputLabel = React66.forwardRef(
 );
 InputLabel.displayName = "Input.Label";
 var parseTokenValue13 = (value) => parseFloat(value);
-var StyledInputWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
+var StyledInputWrapper = styled52(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -1620,7 +1620,7 @@ var StyledInputWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled, c
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled51(TextInput)(({
+var StyledInput = styled52(TextInput)(({
   theme: theme2,
   hasInlineHelp
 }) => {
@@ -1648,16 +1648,16 @@ var StyledInput = styled51(TextInput)(({
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing = styled51(View)({
+var StyledFocusRing = styled52(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var StyledIconSlot = styled51(View)({
+var StyledIconSlot = styled52(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var InputField = React66.forwardRef(
+var InputField = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -1671,7 +1671,8 @@ var InputField = React66.forwardRef(
       style,
       editable,
       onFocus,
-      onBlur
+      onBlur,
+      onPress
     } = _b, rest = __objRest(_b, [
       "leadingIcon",
       "trailingIcon",
@@ -1684,7 +1685,8 @@ var InputField = React66.forwardRef(
       "style",
       "editable",
       "onFocus",
-      "onBlur"
+      "onBlur",
+      "onPress"
     ]);
     const theme2 = useTheme();
     const { spacing, colour, borderWidth, borderRadius } = theme2.tokens.components.inputs;
@@ -1702,7 +1704,7 @@ var InputField = React66.forwardRef(
       },
       [ref]
     );
-    const isDisabled = editable === false;
+    const isDisabled = editable === false && onPress === void 0;
     const hasState = state === "error" || state === "success";
     const baseBorderWidth = parseTokenValue13(borderWidth.field.default);
     const selectedBorderWidth = parseTokenValue13(borderWidth.field.selected);
@@ -1765,7 +1767,7 @@ var InputField = React66.forwardRef(
       var _a2;
       (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
     };
-    return /* @__PURE__ */ jsx(Pressable, { onPress: handleWrapperPress, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(Pressable, { onPress: onPress != null ? onPress : handleWrapperPress, children: /* @__PURE__ */ jsxs(
       StyledInputWrapper,
       {
         isDisabled,
@@ -1802,6 +1804,7 @@ var InputField = React66.forwardRef(
               style,
               placeholderTextColor: colour.field.text.placeholder,
               editable,
+              pointerEvents: onPress ? "none" : void 0,
               onFocus: handleFocus,
               onBlur: handleBlur,
               hasInlineHelp
@@ -1816,7 +1819,7 @@ var InputField = React66.forwardRef(
   }
 );
 InputField.displayName = "Input.Field";
-var InputText = React66.forwardRef(
+var InputText = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { placeholderTextColor } = _b, rest = __objRest(_b, ["placeholderTextColor"]);
     const theme2 = useTheme();
@@ -1831,11 +1834,11 @@ var InputText = React66.forwardRef(
   }
 );
 InputText.displayName = "Input.Text";
-var StyledDescriptionRow = styled51(View)({
+var StyledDescriptionRow = styled52(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputDescription = React66.forwardRef(
+var InputDescription = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { state = "default", children } = _b, rest = __objRest(_b, ["state", "children"]);
     const theme2 = useTheme();
@@ -1851,11 +1854,11 @@ var InputDescription = React66.forwardRef(
   }
 );
 InputDescription.displayName = "Input.Description";
-var StyledErrorRow = styled51(View)({
+var StyledErrorRow = styled52(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputError = React66.forwardRef(
+var InputError = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -1872,13 +1875,13 @@ var InputError = React66.forwardRef(
 );
 InputError.displayName = "Input.Error";
 var parseTokenValue14 = (value) => parseFloat(value);
-var StyledRoot3 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot3 = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue14(spacing.gap)
   };
 });
-var InputRoot = React66.forwardRef(
+var InputRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1922,7 +1925,7 @@ var Input = Object.assign(InputRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var Link = React66.forwardRef(
+var Link = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -4515,12 +4518,12 @@ function registerLogo(brand, variant, component) {
   }
   LOGOS[brand][variant] = component;
 }
-var StyledRoot4 = styled51(View)({
+var StyledRoot4 = styled52(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var Logo = React66.forwardRef(
+var Logo = React65.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;
@@ -4543,7 +4546,7 @@ var Logo = React66.forwardRef(
 );
 Logo.displayName = "Logo";
 var parseTokenValue15 = (value) => parseFloat(value);
-var StyledFieldGroup = styled51(View)(({ theme: theme2 }) => {
+var StyledFieldGroup = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -4551,15 +4554,15 @@ var StyledFieldGroup = styled51(View)(({ theme: theme2 }) => {
     gap: parseTokenValue15(spacing.field.gap)
   };
 });
-var StyledFieldTextWrapper = styled51(View)({
+var StyledFieldTextWrapper = styled52(View)({
   flexShrink: 0,
   justifyContent: "center"
 });
-var StyledInputContainer = styled51(View)(({ hasInlineHelp }) => ({
+var StyledInputContainer = styled52(View)(({ hasInlineHelp }) => ({
   flexDirection: "column",
   gap: hasInlineHelp ? 2 : 0
 }));
-var NumberInputField = React66.forwardRef((_a, ref) => {
+var NumberInputField = React65.forwardRef((_a, ref) => {
   var _b = _a, { fieldText, inlineHelpText } = _b, props = __objRest(_b, ["fieldText", "inlineHelpText"]);
   const theme2 = useTheme();
   const { colour, description } = theme2.tokens.components.inputs;
@@ -4650,13 +4653,13 @@ var NumberInputField = React66.forwardRef((_a, ref) => {
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue16 = (value) => parseFloat(value);
-var StyledRoot5 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot5 = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue16(spacing.gap)
   };
 });
-var NumberInputRoot = React66.forwardRef(
+var NumberInputRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -4707,13 +4710,13 @@ var NumberInput = Object.assign(NumberInputRoot, {
   Error: InputError
 });
 var parseTokenValue17 = (value) => parseFloat(value);
-var StyledContainer = styled51(View)(({ switchGap, switchOpacity }) => ({
+var StyledContainer = styled52(View)(({ switchGap, switchOpacity }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: switchGap,
   opacity: switchOpacity
 }));
-var StyledControlTrack = styled51(View)(
+var StyledControlTrack = styled52(View)(
   ({
     switchChecked,
     controlWidth,
@@ -4739,19 +4742,19 @@ var StyledControlTrack = styled51(View)(
     justifyContent: "center"
   })
 );
-var StyledThumb = styled51(Animated.View)(({ thumbSize, thumbBgColor }) => ({
+var StyledThumb = styled52(Animated.View)(({ thumbSize, thumbBgColor }) => ({
   width: thumbSize,
   height: thumbSize,
   borderRadius: thumbSize / 2,
   backgroundColor: thumbBgColor,
   position: "absolute"
 }));
-var StyledContent = styled51(View)(({ contentGap }) => ({
+var StyledContent = styled52(View)(({ contentGap }) => ({
   gap: contentGap,
   flex: 1,
   minWidth: 0
 }));
-var Switch = React66.forwardRef(
+var Switch = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -4771,7 +4774,7 @@ var Switch = React66.forwardRef(
     const theme2 = useTheme();
     const { size, colour, opacity, borderWidth, spacing, typography } = theme2.tokens.components.switch;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
     const controlWidth = parseTokenValue17(size.control.width);
     const controlHeight = parseTokenValue17(size.control.height);
@@ -4858,7 +4861,7 @@ var Switch = React66.forwardRef(
 );
 Switch.displayName = "Switch";
 var parseTokenValue18 = (value) => parseFloat(value);
-var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
+var StyledTag = styled52(View)(({ theme: theme2, tagVariant, tagSize }) => {
   const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
   const { spacing: semanticSpacing } = theme2.tokens.semantics.dimensions;
   const backgroundColorMap = {
@@ -4890,10 +4893,10 @@ var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
     backgroundColor: backgroundColorMap[tagVariant]
   };
 });
-var StyledLabel = styled51(View)({
+var StyledLabel = styled52(View)({
   flexShrink: 1
 });
-var Tag = React66.forwardRef(
+var Tag = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
     const theme2 = useTheme();
@@ -4943,7 +4946,7 @@ var Tag = React66.forwardRef(
 );
 Tag.displayName = "Tag";
 var parseTokenValue19 = (value) => parseFloat(value);
-var StyledTextAreaWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled }) => {
+var StyledTextAreaWrapper = styled52(Animated.View)(({ theme: theme2, isDisabled }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   const { dimensions: dimensions3 } = theme2.tokens.semantics;
   return {
@@ -4957,7 +4960,7 @@ var StyledTextAreaWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled
     position: "relative"
   };
 });
-var StyledTextArea = styled51(TextInput)(({ theme: theme2 }) => {
+var StyledTextArea = styled52(TextInput)(({ theme: theme2 }) => {
   var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
   const typography = field.placeholder.default;
@@ -4983,17 +4986,17 @@ var StyledTextArea = styled51(TextInput)(({ theme: theme2 }) => {
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing2 = styled51(View)({
+var StyledFocusRing2 = styled52(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var TextAreaContainer = styled51(View)({
+var TextAreaContainer = styled52(View)({
   position: "relative",
   width: "100%",
   flex: 1,
   flexDirection: "column"
 });
-var IconWrapper2 = styled51(View)(({ side }) => {
+var IconWrapper2 = styled52(View)(({ side }) => {
   return {
     position: "absolute",
     top: 0,
@@ -5004,7 +5007,7 @@ var IconWrapper2 = styled51(View)(({ side }) => {
     zIndex: 1
   };
 });
-var TextAreaField = React66.forwardRef(
+var TextAreaField = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -5180,24 +5183,24 @@ var TextAreaField = React66.forwardRef(
 );
 TextAreaField.displayName = "TextArea.Field";
 var parseTokenValue20 = (value) => parseFloat(value);
-var StyledLabelWrapper = styled51(View)({
+var StyledLabelWrapper = styled52(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledLabel2 = styled51(View)(({ labelGap }) => ({
+var StyledLabel2 = styled52(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var StyledCharCountWrapper = styled51(View)(({ charCountGap, charCountPadding }) => ({
+var StyledCharCountWrapper = styled52(View)(({ charCountGap, charCountPadding }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: charCountGap,
   paddingLeft: charCountPadding
 }));
-var TextAreaLabel = React66.forwardRef(
+var TextAreaLabel = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       optionalText,
@@ -5255,13 +5258,13 @@ var TextAreaLabel = React66.forwardRef(
 );
 TextAreaLabel.displayName = "TextArea.Label";
 var parseTokenValue21 = (value) => parseFloat(value);
-var StyledRoot6 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot6 = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue21(spacing.gap)
   };
 });
-var TextAreaRoot = React66.forwardRef(
+var TextAreaRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -5288,8 +5291,8 @@ var TextAreaRoot = React66.forwardRef(
       "defaultValue",
       "onChangeText"
     ]);
-    const [charCount, setCharCount] = React66.useState(0);
-    React66.useEffect(() => {
+    const [charCount, setCharCount] = React65.useState(0);
+    React65.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       } else if (defaultValue !== void 0) {
@@ -5342,7 +5345,7 @@ var TextArea = Object.assign(TextAreaRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var AccordionContext = React66.createContext({
+var AccordionContext = React65.createContext({
   openValues: [],
   toggle: () => {
   },
@@ -5350,30 +5353,30 @@ var AccordionContext = React66.createContext({
   size: "small"
 });
 var parseTokenValue22 = (value) => parseFloat(value);
-var StyledRoot7 = styled51(View)(({ rootGap }) => ({
+var StyledRoot7 = styled52(View)(({ rootGap }) => ({
   width: "100%",
   flexDirection: "column",
   gap: rootGap
 }));
-var StyledItem = styled51(View)({
+var StyledItem = styled52(View)({
   flexDirection: "column"
 });
-var StyledTrigger = styled51(Pressable)(({ triggerOpacity }) => ({
+var StyledTrigger = styled52(Pressable)(({ triggerOpacity }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%",
   opacity: triggerOpacity
 }));
-var StyledPanel = styled51(View)(({ panelGap }) => ({
+var StyledPanel = styled52(View)(({ panelGap }) => ({
   marginTop: panelGap
 }));
-var StyledDivider2 = styled51(View)(({ dividerColor, dividerMarginTop }) => ({
+var StyledDivider2 = styled52(View)(({ dividerColor, dividerMarginTop }) => ({
   height: 1,
   backgroundColor: dividerColor,
   marginTop: dividerMarginTop
 }));
-var AccordionItem = React66.forwardRef(
+var AccordionItem = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { title, children, value, disabled: itemDisabled } = _b, rest = __objRest(_b, ["title", "children", "value", "disabled"]);
     const theme2 = useTheme();
@@ -5383,7 +5386,7 @@ var AccordionItem = React66.forwardRef(
       toggle,
       disabled: rootDisabled,
       size
-    } = React66.useContext(AccordionContext);
+    } = React65.useContext(AccordionContext);
     const itemValue = value != null ? value : title;
     const isOpen = openValues.includes(itemValue);
     const isDisabled = itemDisabled || rootDisabled;
@@ -5444,7 +5447,7 @@ var AccordionItem = React66.forwardRef(
   }
 );
 AccordionItem.displayName = "Accordion.Item";
-var AccordionRoot = React66.forwardRef(
+var AccordionRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -5466,11 +5469,11 @@ var AccordionRoot = React66.forwardRef(
     const theme2 = useTheme();
     const { accordion } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React66.useState(
+    const [internalValue, setInternalValue] = React65.useState(
       defaultValue != null ? defaultValue : []
     );
     const openValues = isControlled ? controlledValue : internalValue;
-    const toggle = React66.useCallback(
+    const toggle = React65.useCallback(
       (itemValue) => {
         const isOpen = openValues.includes(itemValue);
         let next;
@@ -5488,7 +5491,7 @@ var AccordionRoot = React66.forwardRef(
       },
       [openValues, multiple, isControlled, onValueChange]
     );
-    const ctx = React66.useMemo(
+    const ctx = React65.useMemo(
       () => ({ openValues, toggle, disabled, size }),
       [openValues, toggle, disabled, size]
     );
@@ -5618,13 +5621,13 @@ function buildDelayedEntering(variant, delayMs) {
   b.delay(delayMs);
   return b;
 }
-var Animated5 = React66.forwardRef(
+var Animated5 = React65.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;
     const entering = delayMs > 0 ? buildDelayedEntering(variant, delayMs) : ENTERING[variant];
     return /* @__PURE__ */ jsx(
-      Animated10.View,
+      Animated9.View,
       __spreadProps(__spreadValues({
         ref,
         entering,
@@ -5636,7 +5639,7 @@ var Animated5 = React66.forwardRef(
   }
 );
 Animated5.displayName = "Animated";
-var DrawerContext = React66.createContext({
+var DrawerContext = React65.createContext({
   isOpen: false,
   modalVisible: false,
   backdrop: true,
@@ -5647,12 +5650,13 @@ var DrawerContext = React66.createContext({
   onExitComplete: () => {
   }
 });
-var useDrawerContext = () => React66.useContext(DrawerContext);
+var useDrawerContext = () => React65.useContext(DrawerContext);
 var DrawerOverlayContext = createContext(null);
 var useDrawerOverlay = () => useContext(DrawerOverlayContext);
 var FADE_DURATION = 220;
-var DrawerOverlay = React66.forwardRef(({ accessible = false }, _ref) => {
+var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
   const theme2 = useTheme();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { isOpen, closeDrawer, backdrop } = useDrawerContext();
   const opacity = useRef(new Animated.Value(0)).current;
   useEffect(() => {
@@ -5664,43 +5668,52 @@ var DrawerOverlay = React66.forwardRef(({ accessible = false }, _ref) => {
   }, [isOpen, opacity]);
   if (!backdrop) return null;
   return /* @__PURE__ */ jsx(
-    Pressable,
+    Animated.View,
     {
-      style: StyleSheet.absoluteFillObject,
-      onPress: closeDrawer,
-      accessible,
-      accessibilityLabel: "Close drawer",
+      pointerEvents: "box-none",
+      style: [
+        StyleSheet.absoluteFillObject,
+        { width: screenWidth, height: screenHeight, opacity }
+      ],
       children: /* @__PURE__ */ jsx(
-        Animated.View,
+        Pressable,
         {
-          style: [
-            StyleSheet.absoluteFillObject,
+          style: { width: screenWidth, height: screenHeight },
+          onPress: closeDrawer,
+          accessible,
+          accessibilityLabel: "Close drawer",
+          children: /* @__PURE__ */ jsx(
+            Animated.View,
             {
-              backgroundColor: theme2.tokens.components.modal.overlay.colour,
-              opacity
+              style: {
+                width: screenWidth,
+                height: screenHeight,
+                backgroundColor: theme2.tokens.components.modal.overlay.colour
+              }
             }
-          ]
+          )
         }
       )
     }
   );
 });
 DrawerOverlay.displayName = "Drawer.Overlay";
-var DrawerDragContext = React66.createContext(null);
-var useDrawerDragContext = () => React66.useContext(DrawerDragContext);
+var DrawerDragContext = React65.createContext(null);
+var useDrawerDragContext = () => React65.useContext(DrawerDragContext);
 var DrawerMeasureContext = createContext(null);
 var useDrawerMeasureContext = () => useContext(DrawerMeasureContext);
 var DrawerBodyMaxContext = createContext(null);
 var useDrawerBodyMax = () => useContext(DrawerBodyMaxContext);
-var DrawerFooterContext = React66.createContext(false);
-var useDrawerFooterContext = () => React66.useContext(DrawerFooterContext);
-var DrawerHeaderContext = React66.createContext(null);
-var useDrawerHeaderContext = () => React66.useContext(DrawerHeaderContext);
+var DrawerFooterContext = React65.createContext(false);
+var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
+var DrawerHeaderContext = React65.createContext(null);
+var useDrawerHeaderContext = () => React65.useContext(DrawerHeaderContext);
+var KEYBOARD_DURATION = 250;
 var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
 var parseTokenValue23 = (value) => parseFloat(value);
-var StyledPanel2 = styled51(View)(
+var StyledPanel2 = styled52(View)(
   ({
     panelBorderRadius,
     panelBgColor,
@@ -5731,7 +5744,7 @@ var StyledPanel2 = styled51(View)(
     overflow: "hidden"
   })
 );
-var DrawerContent = React66.forwardRef(
+var DrawerContent = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     var _a2;
@@ -5740,7 +5753,9 @@ var DrawerContent = React66.forwardRef(
     const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = useWindowDimensions();
-    const maxHeight = windowHeight * 0.9;
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    const keyboardSpacer = useRef(new Animated.Value(0)).current;
+    const maxHeight = (windowHeight - keyboardHeight) * 0.9;
     const topBorder = parseTokenValue23(dimensions3.borderWidth.sm);
     const noFooterBodyPadding = parseTokenValue23(dimensions3.spacing["2xl"]);
     const closeDrawerRef = useRef(closeDrawer);
@@ -5753,6 +5768,7 @@ var DrawerContent = React66.forwardRef(
     const entryRanRef = useRef(false);
     const isOpenRef = useRef(isOpen);
     const activeAnim = useRef(null);
+    const applyBodyMaxRef = useRef(null);
     const [bodyMax, setBodyMax] = useState(null);
     const bodyMaxRef = useRef(null);
     const headerHeightRef = useRef(0);
@@ -5765,11 +5781,39 @@ var DrawerContent = React66.forwardRef(
       });
       return () => translateY.removeListener(id);
     }, [translateY]);
+    useEffect(() => {
+      const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+      const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+      const lift = (toValue, duration) => {
+        Animated.timing(keyboardSpacer, {
+          toValue,
+          duration: duration && duration > 0 ? duration : KEYBOARD_DURATION,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: false
+        }).start();
+      };
+      const shown = Keyboard.addListener(showEvent, (event) => {
+        setKeyboardHeight(event.endCoordinates.height);
+        lift(event.endCoordinates.height, event.duration);
+      });
+      const hidden = Keyboard.addListener(hideEvent, (event) => {
+        setKeyboardHeight(0);
+        lift(0, event.duration);
+      });
+      return () => {
+        shown.remove();
+        hidden.remove();
+      };
+    }, [keyboardSpacer]);
     useEffect(() => {
       if (panelHeightRef.current > maxHeight) {
         panelHeightRef.current = maxHeight;
       }
     }, [maxHeight]);
+    useEffect(() => {
+      var _a3;
+      (_a3 = applyBodyMaxRef.current) == null ? void 0 : _a3.call(applyBodyMaxRef);
+    }, [maxHeight]);
     const runEntry = useCallback(() => {
       var _a3;
       if (panelHeightRef.current === 0) return;
@@ -5834,6 +5878,7 @@ var DrawerContent = React66.forwardRef(
         setBodyMax(availableBody);
       }
     }, [measureChrome, maxHeight]);
+    applyBodyMaxRef.current = applyBodyMax;
     const setHeaderHeight = useCallback(
       (height) => {
         if (height <= 0 || Math.abs(height - headerHeightRef.current) < 1)
@@ -5925,11 +5970,11 @@ var DrawerContent = React66.forwardRef(
       () => ({ panHandlers: panResponder.panHandlers }),
       [panResponder.panHandlers]
     );
-    const hasFooter = React66.Children.toArray(children).some(
-      (child) => React66.isValidElement(child) && child.type.displayName === "Drawer.Footer"
+    const hasFooter = React65.Children.toArray(children).some(
+      (child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Footer"
     );
-    const headerChild = React66.Children.toArray(children).find(
-      (child) => React66.isValidElement(child) && child.type.displayName === "Drawer.Header"
+    const headerChild = React65.Children.toArray(children).find(
+      (child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Header"
     );
     hasHeaderRef.current = headerChild != null;
     hasFooterRef.current = hasFooter;
@@ -5939,11 +5984,12 @@ var DrawerContent = React66.forwardRef(
     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,
       {
+        pointerEvents: "box-none",
         style: [
           styles.animatedWrapper,
           { transform: [{ translateY }] }
         ],
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
           StyledPanel2,
           __spreadProps(__spreadValues({
             ref,
@@ -5951,7 +5997,7 @@ var DrawerContent = React66.forwardRef(
             panelBorderRadius: parseTokenValue23(drawer.borderRadius.top),
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue23(drawer.size.maxWidth),
-            panelMaxHeight: maxHeight,
+            panelMaxHeight: maxHeight + keyboardHeight,
             panelBorderWidth: parseTokenValue23(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
@@ -5961,7 +6007,10 @@ var DrawerContent = React66.forwardRef(
             accessibilityRole: "none",
             accessibilityViewIsModal: true
           }, props), {
-            children: /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children })
+            children: [
+              /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children }),
+              /* @__PURE__ */ jsx(Animated.View, { style: { height: keyboardSpacer } })
+            ]
           })
         )
       }
@@ -5978,7 +6027,7 @@ var styles = StyleSheet.create({
   }
 });
 var parseTokenValue24 = (value) => parseFloat(value);
-var StyledWrapper = styled51(View)(
+var StyledWrapper = styled52(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -5987,13 +6036,13 @@ var StyledWrapper = styled51(View)(
     paddingBottom: grabberPaddingTop
   })
 );
-var StyledBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledBar = styled52(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var DrawerGrabber = React66.forwardRef(
+var DrawerGrabber = React65.forwardRef(
   (props, ref) => {
     var _a;
     const theme2 = useTheme();
@@ -6021,7 +6070,7 @@ var DrawerGrabber = React66.forwardRef(
 );
 DrawerGrabber.displayName = "Drawer.Grabber";
 var parseTokenValue25 = (value) => parseFloat(value);
-var DrawerClose = React66.forwardRef(
+var DrawerClose = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { "aria-label": ariaLabel = "Close" } = _b, props = __objRest(_b, ["aria-label"]);
     const theme2 = useTheme();
@@ -6068,7 +6117,7 @@ var styles2 = StyleSheet.create({
   }
 });
 var parseTokenValue26 = (value) => parseFloat(value);
-var StyledGrabberWrapper = styled51(View)(
+var StyledGrabberWrapper = styled52(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -6076,13 +6125,13 @@ var StyledGrabberWrapper = styled51(View)(
     paddingTop: grabberPaddingTop
   })
 );
-var StyledGrabberBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledGrabberBar = styled52(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var StyledHeader = styled51(View)(
+var StyledHeader = styled52(View)(
   ({
     headerPaddingHorizontal,
     headerPaddingBottom,
@@ -6102,7 +6151,7 @@ var StyledHeader = styled51(View)(
     borderBottomColor: headerBorderColor
   } : {}), headerBgColor ? { backgroundColor: headerBgColor } : {})
 );
-var StyledImageContainer = styled51(View)(({ imageHeight, imageBorderRadius }) => ({
+var StyledImageContainer = styled52(View)(({ imageHeight, imageBorderRadius }) => ({
   position: "relative",
   width: "100%",
   height: imageHeight,
@@ -6110,20 +6159,20 @@ var StyledImageContainer = styled51(View)(({ imageHeight, imageBorderRadius }) =
   overflow: "hidden",
   flexShrink: 0
 }));
-var StyledImageCloseWrapper = styled51(View)(({ closeTop, closeRight }) => ({
+var StyledImageCloseWrapper = styled52(View)(({ closeTop, closeRight }) => ({
   position: "absolute",
   top: closeTop,
   right: closeRight,
   zIndex: 1
 }));
-var StyledTitleRow = styled51(View)(({ rowGap }) => ({
+var StyledTitleRow = styled52(View)(({ rowGap }) => ({
   flexDirection: "row",
   gap: rowGap,
   alignItems: "flex-start",
   width: "100%",
   flexShrink: 0
 }));
-var StyledTitleContent = styled51(View)(
+var StyledTitleContent = styled52(View)(
   ({ contentGap }) => ({
     flexDirection: "column",
     gap: contentGap,
@@ -6134,8 +6183,8 @@ var StyledTitleContent = styled51(View)(
 function splitChildren(children) {
   let closeChild = null;
   const otherChildren = [];
-  React66.Children.forEach(children, (child) => {
-    if (React66.isValidElement(child) && child.type === DrawerClose) {
+  React65.Children.forEach(children, (child) => {
+    if (React65.isValidElement(child) && child.type === DrawerClose) {
       closeChild = child;
     } else {
       otherChildren.push(child);
@@ -6143,7 +6192,7 @@ function splitChildren(children) {
   });
   return { closeChild, otherChildren };
 }
-var DrawerHeader = React66.forwardRef(
+var DrawerHeader = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "titleAndText", imageSource, children, onLayout } = _b, props = __objRest(_b, ["variant", "imageSource", "children", "onLayout"]);
     var _a2, _b2, _c, _d, _e, _f;
@@ -6239,7 +6288,7 @@ var DrawerHeader = React66.forwardRef(
   }
 );
 DrawerHeader.displayName = "Drawer.Header";
-var DrawerTitle = React66.forwardRef(
+var DrawerTitle = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -6255,7 +6304,7 @@ var DrawerTitle = React66.forwardRef(
   }
 );
 DrawerTitle.displayName = "Drawer.Title";
-var DrawerDescription = React66.forwardRef(
+var DrawerDescription = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -6271,28 +6320,8 @@ var DrawerDescription = React66.forwardRef(
   }
 );
 DrawerDescription.displayName = "Drawer.Description";
-var useDrawerKeyboardAvoidance = (minPadding = 16) => {
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  useEffect(() => {
-    const showListener = Keyboard.addListener("keyboardDidShow", (e) => {
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    const hideListener = Keyboard.addListener("keyboardDidHide", () => {
-      setKeyboardHeight(0);
-    });
-    return () => {
-      showListener.remove();
-      hideListener.remove();
-    };
-  }, []);
-  return {
-    contentContainerStyle: {
-      paddingBottom: Math.max(minPadding, keyboardHeight)
-    }
-  };
-};
 var parseTokenValue27 = (value) => parseFloat(value);
-var StyledScrollView = styled51(ScrollView)(
+var StyledScrollView = styled52(ScrollView)(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
@@ -6310,17 +6339,9 @@ var StyledScrollView = styled51(ScrollView)(
     paddingBottom: bodyPaddingBottom
   })
 );
-var DrawerBody = React66.forwardRef(
+var DrawerBody = React65.forwardRef(
   (_a, ref) => {
-    var _b = _a, {
-      children,
-      contentContainerStyle,
-      ignoreKeyboardAvoidance = false
-    } = _b, props = __objRest(_b, [
-      "children",
-      "contentContainerStyle",
-      "ignoreKeyboardAvoidance"
-    ]);
+    var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
     const theme2 = useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const { buttons } = theme2.tokens.components;
@@ -6330,8 +6351,6 @@ var DrawerBody = React66.forwardRef(
     const providedMaxHeight = useDrawerBodyMax();
     const { height: windowHeight } = useWindowDimensions();
     const insets = useSafeAreaInsets();
-    const { contentContainerStyle: keyboardStyle } = useDrawerKeyboardAvoidance();
-    const effectiveKeyboardStyle = ignoreKeyboardAvoidance ? {} : keyboardStyle;
     const gap = parseTokenValue27(content.slot.gap);
     const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
     const topPadding = parseTokenValue27(content.slot.verticalPadding);
@@ -6355,7 +6374,6 @@ var DrawerBody = React66.forwardRef(
             paddingTop: topPadding,
             paddingBottom: 0
           },
-          effectiveKeyboardStyle,
           contentContainerStyle
         ]
       }, props), {
@@ -6366,13 +6384,13 @@ var DrawerBody = React66.forwardRef(
 );
 DrawerBody.displayName = "Drawer.Body";
 var parseTokenValue28 = (value) => parseFloat(value);
-var StyledFooter = styled51(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
+var StyledFooter = styled52(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
   flexShrink: 0,
   paddingTop: footerPaddingTop,
   paddingHorizontal: footerPaddingHorizontal,
   paddingBottom: footerPaddingBottom
 }));
-var DrawerFooter = React66.forwardRef(
+var DrawerFooter = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, onLayout } = _b, props = __objRest(_b, ["children", "onLayout"]);
     const theme2 = useTheme();
@@ -6403,7 +6421,7 @@ var DrawerFooter = React66.forwardRef(
   }
 );
 DrawerFooter.displayName = "Drawer.Footer";
-var DrawerRoot = React66.forwardRef(
+var DrawerRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       open: controlledOpen,
@@ -6485,15 +6503,15 @@ var DrawerRoot = React66.forwardRef(
   }
 );
 DrawerRoot.displayName = "Drawer";
-var DrawerTrigger = React66.forwardRef(
+var DrawerTrigger = React65.forwardRef(
   ({ children }, ref) => {
-    const { openDrawer } = React66.useContext(DrawerContext);
+    const { openDrawer } = React65.useContext(DrawerContext);
     return /* @__PURE__ */ jsx(Slot, { ref, onPress: openDrawer, children });
   }
 );
 DrawerTrigger.displayName = "Drawer.Trigger";
 var DrawerPortal = ({ children, topContent }) => {
-  const { modalVisible, closeDrawer, backdrop } = React66.useContext(DrawerContext);
+  const { modalVisible, closeDrawer, backdrop } = React65.useContext(DrawerContext);
   const OverlayComponent = useDrawerOverlay();
   if (!modalVisible) return null;
   if (!backdrop) {
@@ -6545,7 +6563,7 @@ var styles3 = StyleSheet.create({
   }
 });
 var parseTokenValue29 = (value) => parseFloat(value);
-var StyledDockRoot = styled51(View)(
+var StyledDockRoot = styled52(View)(
   ({
     dockBgColor,
     dockBorderTopWidth,
@@ -6563,7 +6581,7 @@ var StyledDockRoot = styled51(View)(
     paddingHorizontal: dockPaddingHorizontal
   })
 );
-var StyledStackedInner = styled51(View)(
+var StyledStackedInner = styled52(View)(
   ({ innerGap }) => ({
     alignItems: "center",
     gap: innerGap,
@@ -6571,14 +6589,14 @@ var StyledStackedInner = styled51(View)(
     maxWidth: 520
   })
 );
-var StyledButtonGroup = styled51(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
+var StyledButtonGroup = styled52(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
   flexDirection: groupDirection,
   alignItems: groupAlign,
   justifyContent: groupJustify,
   gap: groupGap,
   width: "100%"
 }, groupDirection === "column" ? { maxWidth: 520 } : {}));
-var ButtonDock = React66.forwardRef(
+var ButtonDock = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
     const theme2 = useTheme();
@@ -6645,20 +6663,20 @@ var ButtonDock = React66.forwardRef(
 );
 ButtonDock.displayName = "ButtonDock";
 var parseTokenValue30 = (value) => parseFloat(value);
-var StyledGroupRoot = styled51(View)(({ rootGap }) => ({
+var StyledGroupRoot = styled52(View)(({ rootGap }) => ({
   gap: rootGap,
   alignItems: "center",
   width: "100%"
 }));
-var StyledButtonRow = styled51(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
+var StyledButtonRow = styled52(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
   flexDirection: rowDirection,
   width: "100%",
   gap: rowGap
 }, rowAlign ? { alignItems: rowAlign } : {}));
-var StyledChildSlot = styled51(View)(
+var StyledChildSlot = styled52(View)(
   ({ slotInline }) => __spreadValues({}, slotInline ? { flex: 1, minWidth: 0 } : { width: "100%", alignSelf: "stretch" })
 );
-var ButtonGroup = React66.forwardRef(
+var ButtonGroup = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { layout = "stacked", description, children } = _b, rest = __objRest(_b, ["layout", "description", "children"]);
     const theme2 = useTheme();
@@ -6680,9 +6698,9 @@ var ButtonGroup = React66.forwardRef(
               rowGap: parseTokenValue30(
                 isInline ? buttonGroup.spacing.sideBySide.gap : buttonGroup.spacing.stacked.gap
               ),
-              children: React66.Children.map(children, (child, index) => {
-                if (!React66.isValidElement(child)) return child;
-                return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React66.cloneElement(
+              children: React65.Children.map(children, (child, index) => {
+                if (!React65.isValidElement(child)) return child;
+                return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React65.cloneElement(
                   child,
                   {
                     fullWidth: true
@@ -6707,7 +6725,7 @@ var ButtonGroup = React66.forwardRef(
 );
 ButtonGroup.displayName = "ButtonGroup";
 var parseTokenValue31 = (value) => parseFloat(value);
-var StyledRootPressable = styled51(Pressable)(
+var StyledRootPressable = styled52(Pressable)(
   ({
     rootFlexAlign,
     rootGap,
@@ -6727,7 +6745,7 @@ var StyledRootPressable = styled51(Pressable)(
     opacity: rootOpacity
   }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? rootFitContent ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" } : { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
 );
-var StyledControl = styled51(View)(
+var StyledControl = styled52(View)(
   ({
     controlSize,
     controlBorderWidth,
@@ -6746,19 +6764,19 @@ var StyledControl = styled51(View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled51(View)(({ contentGap, contentFlex, contentFitContent }) => __spreadValues({
+var StyledContent2 = styled52(View)(({ contentGap, contentFlex, contentFitContent }) => __spreadValues({
   flexDirection: "column",
   gap: contentGap,
   flex: contentFlex,
   minWidth: 0
 }, contentFitContent ? { maxWidth: "85%" } : {}));
-var StyledIllustration = styled51(View)(({ illustrationSize }) => ({
+var StyledIllustration = styled52(View)(({ illustrationSize }) => ({
   flexShrink: 0,
   width: illustrationSize,
   height: illustrationSize,
   overflow: "hidden"
 }));
-var Checkbox = React66.forwardRef(
+var Checkbox = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -6787,7 +6805,7 @@ var Checkbox = React66.forwardRef(
     const { checkbox } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
     const handlePress = () => {
       if (disabled) return;
@@ -6876,22 +6894,22 @@ var Checkbox = React66.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var parseTokenValue32 = (value) => parseFloat(value);
-var StyledGroup = styled51(View)(({ groupDirection, groupGap, groupWrap }) => ({
+var StyledGroup = styled52(View)(({ groupDirection, groupGap, groupWrap }) => ({
   flexDirection: groupDirection,
   gap: groupGap,
   flexWrap: groupWrap ? "wrap" : "nowrap"
 }));
-var CheckboxGroup = React66.forwardRef(
+var CheckboxGroup = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
     const theme2 = useTheme();
     const { checkbox } = theme2.tokens.components;
     const isHorizontal = orientation === "horizontal";
-    const renderChildren = () => isHorizontal ? React66.Children.map(children, (child) => {
+    const renderChildren = () => isHorizontal ? React65.Children.map(children, (child) => {
       var _a2;
-      if (!React66.isValidElement(child)) return child;
+      if (!React65.isValidElement(child)) return child;
       const childProps = child.props;
-      return React66.cloneElement(
+      return React65.cloneElement(
         child,
         { fitContent: (_a2 = childProps.fitContent) != null ? _a2 : true }
       );
@@ -6910,7 +6928,7 @@ var CheckboxGroup = React66.forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var CopyFieldInput = React66.forwardRef(
+var CopyFieldInput = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onCopy,
@@ -6929,19 +6947,19 @@ var CopyFieldInput = React66.forwardRef(
       "editable",
       "defaultValue"
     ]);
-    const [internalValue, setInternalValue] = React66.useState(
+    const [internalValue, setInternalValue] = React65.useState(
       typeof defaultValue === "string" ? defaultValue : ""
     );
-    const [copied, setCopied] = React66.useState(false);
-    const timeoutRef = React66.useRef(
+    const [copied, setCopied] = React65.useState(false);
+    const timeoutRef = React65.useRef(
       void 0
     );
-    React66.useEffect(() => {
+    React65.useEffect(() => {
       if (defaultValue !== void 0 && value === void 0) {
         setInternalValue(typeof defaultValue === "string" ? defaultValue : "");
       }
     }, [defaultValue, value]);
-    React66.useEffect(() => {
+    React65.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -7002,13 +7020,13 @@ var CopyFieldInput = React66.forwardRef(
 );
 CopyFieldInput.displayName = "CopyField.Field";
 var parseTokenValue33 = (value) => parseFloat(value);
-var StyledRoot8 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot8 = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue33(spacing.gap)
   };
 });
-var CopyFieldRoot = React66.forwardRef(
+var CopyFieldRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7076,20 +7094,20 @@ var useCopyField = (options = {}) => {
     onCopy: handleCopy
   };
 };
-var FilterTabContext = React66.createContext({
+var FilterTabContext = React65.createContext({
   size: "sm",
   selectedValues: [],
   toggle: () => {
   }
 });
 var parseTokenValue34 = (value) => parseFloat(value);
-var StyledRoot9 = styled51(View)(({ rootGap }) => ({
+var StyledRoot9 = styled52(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
   flexWrap: "nowrap"
 }));
-var StyledItem2 = styled51(Pressable)(
+var StyledItem2 = styled52(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -7115,7 +7133,7 @@ var StyledItem2 = styled51(Pressable)(
     flexShrink: 0
   })
 );
-var FilterTabItem = React66.forwardRef(
+var FilterTabItem = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -7135,7 +7153,7 @@ var FilterTabItem = React66.forwardRef(
       "accessibilityLabel"
     ]);
     const theme2 = useTheme();
-    const { size, selectedValues, toggle } = React66.useContext(FilterTabContext);
+    const { size, selectedValues, toggle } = React65.useContext(FilterTabContext);
     const isSelected = selectedValues.includes(value);
     const isIconOnly = !!IconOnlyIcon && !label;
     const isActive = isSelected && !disabled;
@@ -7209,7 +7227,7 @@ var FilterTabItem = React66.forwardRef(
   }
 );
 FilterTabItem.displayName = "FilterTab.Item";
-var FilterTabRoot = React66.forwardRef(
+var FilterTabRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "sm",
@@ -7229,9 +7247,9 @@ var FilterTabRoot = React66.forwardRef(
     const theme2 = useTheme();
     const { filterTabs } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React66.useState(defaultValue);
+    const [internalValue, setInternalValue] = React65.useState(defaultValue);
     const selectedValues = isControlled ? controlledValue : internalValue;
-    const toggle = React66.useCallback(
+    const toggle = React65.useCallback(
       (itemValue) => {
         let next;
         if (multiple) {
@@ -7244,7 +7262,7 @@ var FilterTabRoot = React66.forwardRef(
       },
       [selectedValues, isControlled, onValueChange, multiple]
     );
-    const contextValue = React66.useMemo(
+    const contextValue = React65.useMemo(
       () => ({ size, selectedValues, toggle }),
       [size, selectedValues, toggle]
     );
@@ -7264,7 +7282,7 @@ var FilterTab = Object.assign(FilterTabRoot, {
   Item: FilterTabItem
 });
 var parseTokenValue35 = (value) => parseFloat(value);
-var StyledFieldWrapper = styled51(View)(
+var StyledFieldWrapper = styled52(View)(
   ({
     fieldBgColor,
     fieldBorderColor,
@@ -7288,7 +7306,7 @@ var StyledFieldWrapper = styled51(View)(
     overflow: "hidden"
   }, fullWidth && { flex: 1 })
 );
-var StyledTextInput = styled51(TextInput)(
+var StyledTextInput = styled52(TextInput)(
   ({
     inputColor,
     inputFontFamily,
@@ -7309,12 +7327,12 @@ var StyledTextInput = styled51(TextInput)(
     fontSize: inputFontSize
   }), hasInlineHelp ? { position: "relative", top: -8 } : {})
 );
-var StyledRow = styled51(View)(({ rowGap }) => ({
+var StyledRow = styled52(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rowGap
 }));
-var NumberFieldInput = React66.forwardRef(
+var NumberFieldInput = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       fieldSize = "lg",
@@ -7361,9 +7379,9 @@ var NumberFieldInput = React66.forwardRef(
     const theme2 = useTheme();
     const tokens3 = theme2.tokens.components.numberField;
     const inputTokens3 = theme2.tokens.components.inputs;
-    const [isFocused, setIsFocused] = React66.useState(false);
-    const [isEdited, setIsEdited] = React66.useState(false);
-    const initialValueRef = React66.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
+    const [isFocused, setIsFocused] = React65.useState(false);
+    const [isEdited, setIsEdited] = React65.useState(false);
+    const initialValueRef = React65.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";
@@ -7380,14 +7398,14 @@ var NumberFieldInput = React66.forwardRef(
       if (isEdited) return tokens3.colour.field.border.edited;
       return tokens3.colour.field.border.default;
     };
-    const handleFocus = React66.useCallback(
+    const handleFocus = React65.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React66.useCallback(
+    const handleBlur = React65.useCallback(
       (e) => {
         setIsFocused(false);
         if (value != null && onChangeText) {
@@ -7406,7 +7424,7 @@ var NumberFieldInput = React66.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 = React66.useCallback(
+    const handleChangeText = React65.useCallback(
       (text) => {
         setIsEdited(text !== initialValueRef.current);
         onChangeText == null ? void 0 : onChangeText(text);
@@ -7503,13 +7521,13 @@ var NumberFieldInput = React66.forwardRef(
 );
 NumberFieldInput.displayName = "NumberField.Input";
 var parseTokenValue36 = (value) => parseFloat(value);
-var StyledRoot10 = styled51(View)(({ rootGap, fullWidth }) => __spreadValues({
+var StyledRoot10 = styled52(View)(({ rootGap, fullWidth }) => __spreadValues({
   gap: rootGap
 }, fullWidth ? { width: "100%" } : { alignItems: "center" }));
-var StyledLabelGroup = styled51(View)(({ labelGap }) => ({
+var StyledLabelGroup = styled52(View)(({ labelGap }) => ({
   gap: labelGap
 }));
-var NumberField = React66.forwardRef(
+var NumberField = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7628,9 +7646,9 @@ var NumberField = React66.forwardRef(
 );
 NumberField.displayName = "NumberField";
 var HIT_SLOP = 12;
-var PasswordFieldInput = React66.forwardRef((_a, ref) => {
+var PasswordFieldInput = React65.forwardRef((_a, ref) => {
   var _b = _a, { onValueChange, value, state, editable } = _b, inputFieldProps = __objRest(_b, ["onValueChange", "value", "state", "editable"]);
-  const [showPassword, setShowPassword] = React66.useState(false);
+  const [showPassword, setShowPassword] = React65.useState(false);
   const handleValueChange = (newValue) => {
     onValueChange == null ? void 0 : onValueChange(newValue);
   };
@@ -7670,12 +7688,12 @@ var PasswordFieldInput = React66.forwardRef((_a, ref) => {
 });
 PasswordFieldInput.displayName = "PasswordField.Field";
 var parseTokenValue37 = (value) => parseFloat(value);
-var StyledErrorRow2 = styled51(View)(({ gap }) => ({
+var StyledErrorRow2 = styled52(View)(({ gap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap
 }));
-var PasswordFieldError = React66.forwardRef((_a, ref) => {
+var PasswordFieldError = React65.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = useTheme();
   const { listItem } = theme2.tokens.components.validationList;
@@ -7702,19 +7720,19 @@ var PasswordFieldError = React66.forwardRef((_a, ref) => {
 });
 PasswordFieldError.displayName = "PasswordField.Error";
 var parseTokenValue38 = (value) => parseFloat(value);
-var StyledRequirementsList = styled51(View)(
+var StyledRequirementsList = styled52(View)(
   ({ listGap }) => ({
     gap: listGap
   })
 );
-var StyledRequirementItem = styled51(View)(
+var StyledRequirementItem = styled52(View)(
   ({ itemGap }) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: itemGap
   })
 );
-var PasswordFieldRequirements = React66.forwardRef((_a, ref) => {
+var PasswordFieldRequirements = React65.forwardRef((_a, ref) => {
   var _b = _a, { requirements } = _b, rest = __objRest(_b, ["requirements"]);
   const theme2 = useTheme();
   const { listItem, list } = theme2.tokens.components.validationList;
@@ -7764,13 +7782,13 @@ var PasswordFieldRequirements = React66.forwardRef((_a, ref) => {
 });
 PasswordFieldRequirements.displayName = "PasswordField.Requirements";
 var parseTokenValue39 = (value) => parseFloat(value);
-var StyledRoot11 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot11 = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue39(spacing.gap)
   };
 });
-var PasswordFieldRoot = React66.forwardRef(
+var PasswordFieldRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7882,19 +7900,19 @@ var PROGRESS_ANIMATION = {
   easing: Easing$1.inOut(Easing$1.cubic)
 };
 var parseTokenValue40 = (value) => parseFloat(value);
-var StyledRoot12 = styled51(View)(({ rootGap }) => ({
+var StyledRoot12 = styled52(View)(({ rootGap }) => ({
   flexDirection: "column",
   alignItems: "stretch",
   gap: rootGap,
   width: "100%"
 }));
-var StyledHeader2 = styled51(View)({
+var StyledHeader2 = styled52(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
+var StyledTrack = styled52(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
   position: "relative",
   width: "100%",
   minWidth: trackMinWidth,
@@ -7903,13 +7921,13 @@ var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled51(Animated10.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled52(Animated9.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
 }));
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-var Progress = React66.forwardRef(
+var Progress = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value = 0,
@@ -7947,7 +7965,7 @@ var Progress = React66.forwardRef(
     const reducedMotion = useReducedMotion();
     const shouldAnimate = animate && !reducedMotion;
     const fill = useSharedValue(percent);
-    React66.useEffect(() => {
+    React65.useEffect(() => {
       fill.value = shouldAnimate ? withTiming(percent, PROGRESS_ANIMATION) : percent;
     }, [fill, percent, shouldAnimate]);
     const indicatorStyle = useAnimatedStyle(() => ({
@@ -8011,7 +8029,7 @@ var Progress = React66.forwardRef(
 );
 Progress.displayName = "Progress";
 var parseTokenValue41 = (value) => parseFloat(value);
-var StyledRadioRoot = styled51(Pressable)(
+var StyledRadioRoot = styled52(Pressable)(
   ({
     radioGap,
     radioOpacity,
@@ -8030,7 +8048,7 @@ var StyledRadioRoot = styled51(Pressable)(
     opacity: radioOpacity
   }, radioPaddingVertical !== void 0 ? { paddingVertical: radioPaddingVertical } : {}), radioPaddingHorizontal !== void 0 ? { paddingHorizontal: radioPaddingHorizontal } : {}), radioMaxWidth !== void 0 ? { maxWidth: radioMaxWidth } : {}), radioBgColor ? { backgroundColor: radioBgColor } : {}), radioBorderWidth !== void 0 ? { borderWidth: radioBorderWidth, borderColor: radioBorderColor } : {}), radioBorderRadius !== void 0 ? { borderRadius: radioBorderRadius } : {})
 );
-var StyledRadioControl = styled51(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
+var StyledRadioControl = styled52(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
   width: controlSize,
   height: controlSize,
   minWidth: controlSize,
@@ -8041,29 +8059,29 @@ var StyledRadioControl = styled51(View)(({ controlSize, controlBorderWidth, cont
   alignItems: "center",
   justifyContent: "center"
 }));
-var StyledIndicator2 = styled51(View)(({ indicatorSize, indicatorBgColor }) => ({
+var StyledIndicator2 = styled52(View)(({ indicatorSize, indicatorBgColor }) => ({
   width: indicatorSize,
   height: indicatorSize,
   borderRadius: indicatorSize / 2,
   backgroundColor: indicatorBgColor
 }));
-var StyledTextContent = styled51(View)(({ textContentGap }) => ({
+var StyledTextContent = styled52(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
 }));
-var StyledAssetWrapper = styled51(View)({
+var StyledAssetWrapper = styled52(View)({
   alignSelf: "center"
 });
-var StyledTagWrapper = styled51(View)(
+var StyledTagWrapper = styled52(View)(
   ({ tagTopPadding }) => ({
     alignItems: "flex-start",
     paddingTop: tagTopPadding
   })
 );
-var Radio = React66.forwardRef(
+var Radio = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -8167,16 +8185,16 @@ var Radio = React66.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var RadioTile = React66.forwardRef(
+var RadioTile = React65.forwardRef(
   (props, ref) => /* @__PURE__ */ jsx(Radio, __spreadProps(__spreadValues({ ref }, props), { variant: "tile" }))
 );
 RadioTile.displayName = "RadioTile";
 var parseTokenValue42 = (value) => parseFloat(value);
-var StyledRadioGroup = styled51(View)(({ groupDirection, groupGap }) => ({
+var StyledRadioGroup = styled52(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
-var RadioGroupRoot = React66.forwardRef(
+var RadioGroupRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name: _name,
@@ -8203,11 +8221,11 @@ var RadioGroupRoot = React66.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] = React66.useState(
+    const [internalValue, setInternalValue] = React65.useState(
       derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : internalValue;
-    const handleSelect = React66.useCallback(
+    const handleSelect = React65.useCallback(
       (newValue) => {
         if (!isControlled) {
           setInternalValue(newValue);
@@ -8228,9 +8246,9 @@ var RadioGroupRoot = React66.forwardRef(
           option.value
         ));
       }
-      return React66.Children.map(children, (child) => {
-        if (!React66.isValidElement(child)) return child;
-        return React66.cloneElement(child, {
+      return React65.Children.map(children, (child) => {
+        if (!React65.isValidElement(child)) return child;
+        return React65.cloneElement(child, {
           selected: currentValue === child.props.value,
           onSelect: handleSelect,
           disabled: disabled || child.props.disabled
@@ -8255,11 +8273,11 @@ var RadioGroup = Object.assign(RadioGroupRoot, {
   Radio,
   Tile: RadioTile
 });
-var SearchFieldInput = React66.forwardRef((_a, ref) => {
+var SearchFieldInput = React65.forwardRef((_a, ref) => {
   var _b = _a, { onClear, onValueChange, value, state } = _b, inputFieldProps = __objRest(_b, ["onClear", "onValueChange", "value", "state"]);
-  const [internalValue, setInternalValue] = React66.useState("");
-  const inputRef = React66.useRef(null);
-  React66.useImperativeHandle(ref, () => inputRef.current);
+  const [internalValue, setInternalValue] = React65.useState("");
+  const inputRef = React65.useRef(null);
+  React65.useImperativeHandle(ref, () => inputRef.current);
   const handleValueChange = (newValue) => {
     setInternalValue(newValue);
     onValueChange == null ? void 0 : onValueChange(newValue);
@@ -8299,13 +8317,13 @@ var SearchFieldInput = React66.forwardRef((_a, ref) => {
 });
 SearchFieldInput.displayName = "SearchField.Field";
 var parseTokenValue43 = (value) => parseFloat(value);
-var StyledRoot13 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot13 = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue43(spacing.gap)
   };
 });
-var SearchFieldRoot = React66.forwardRef(
+var SearchFieldRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -8376,7 +8394,7 @@ function useSearchField({
   };
 }
 var parseTokenValue44 = (value) => parseFloat(value);
-var StyledSegmentItem = styled51(Pressable)(
+var StyledSegmentItem = styled52(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -8396,7 +8414,7 @@ var StyledSegmentItem = styled51(Pressable)(
     opacity: itemOpacity
   }, itemFlex !== void 0 ? { flex: itemFlex } : { flexShrink: 0 })
 );
-var StyledIntrinsicClip = styled51(View)(({ clipBorderRadius, clipBgColor, clipHeight, clipWidth }) => __spreadValues({
+var StyledIntrinsicClip = styled52(View)(({ clipBorderRadius, clipBgColor, clipHeight, clipWidth }) => __spreadValues({
   overflow: "hidden",
   height: clipHeight,
   borderRadius: clipBorderRadius,
@@ -8404,7 +8422,7 @@ var StyledIntrinsicClip = styled51(View)(({ clipBorderRadius, clipBgColor, clipH
   alignSelf: "flex-start",
   maxWidth: "100%"
 }, clipWidth !== void 0 ? { width: clipWidth } : {}));
-var StyledScrollIndicator = styled51(Pressable)(
+var StyledScrollIndicator = styled52(Pressable)(
   ({
     indicatorSide,
     indicatorBorderRadius,
@@ -8436,7 +8454,7 @@ var ScrollIndicatorGradient = ({
   side,
   color
 }) => {
-  const uid = React66.useId();
+  const uid = React65.useId();
   const gradientId = `sc-scroll-indicator-${side}-${uid}`;
   const isTrailing = side === "trailing";
   return /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: /* @__PURE__ */ jsxs(Svg72, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
@@ -8460,7 +8478,7 @@ var ScrollIndicatorGradient = ({
     /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
   ] }) });
 };
-var StyledContainer2 = styled51(View)(
+var StyledContainer2 = styled52(View)(
   ({
     containerGap,
     containerPaddingVertical,
@@ -8519,7 +8537,7 @@ var SegmentedControlItemBase = ({
     }
   );
 };
-var SegmentedControlItem = React66.forwardRef(
+var SegmentedControlItem = React65.forwardRef(
   (_props, _ref) => {
     return null;
   }
@@ -8537,10 +8555,10 @@ var IntrinsicTrack = (_a) => {
     "renderItems",
     "forwardedRef"
   ]);
-  const scrollRef = React66.useRef(null);
-  const [containerWidth, setContainerWidth] = React66.useState(0);
-  const [contentWidth, setContentWidth] = React66.useState(0);
-  const [scrollX, setScrollX] = React66.useState(0);
+  const scrollRef = React65.useRef(null);
+  const [containerWidth, setContainerWidth] = React65.useState(0);
+  const [contentWidth, setContentWidth] = React65.useState(0);
+  const [scrollX, setScrollX] = React65.useState(0);
   const epsilon = 2;
   const maxScroll = Math.max(0, contentWidth - containerWidth);
   const canScrollLeft = scrollX > epsilon;
@@ -8637,7 +8655,7 @@ var IntrinsicTrack = (_a) => {
     })
   );
 };
-var SegmentedControlRoot = React66.forwardRef(
+var SegmentedControlRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       options,
@@ -8661,18 +8679,18 @@ var SegmentedControlRoot = React66.forwardRef(
     const { spacing, borderRadius, colour, controlItem } = 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 = React66.Children.toArray(children);
+    const childrenArray = React65.Children.toArray(children);
     const firstChildValue = childrenArray.map((child) => {
-      if (!React66.isValidElement(child)) return void 0;
+      if (!React65.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] = React66.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
       () => derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleSelect = React66.useCallback(
+    const handleSelect = React65.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -8698,7 +8716,7 @@ var SegmentedControlRoot = React66.forwardRef(
         ));
       }
       return childrenArray.map((child) => {
-        if (!React66.isValidElement(child)) return child;
+        if (!React65.isValidElement(child)) return child;
         const childProps = child.props;
         return /* @__PURE__ */ jsx(
           SegmentedControlItemBase,
@@ -8744,642 +8762,705 @@ SegmentedControlRoot.displayName = "SegmentedControl";
 var SegmentedControl = Object.assign(SegmentedControlRoot, {
   Item: SegmentedControlItem
 });
-var parseTokenValue45 = (value) => parseFloat(value);
-var StyledTriggerWrapper = styled51(Animated.View)(({
-  theme: theme2,
-  state: _state
-}) => {
-  const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
-  return {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: parseTokenValue45(spacing.field.gap),
-    minWidth: parseTokenValue45(size.field.minWidth),
-    width: "100%",
-    height: parseTokenValue45(size.field.height),
-    backgroundColor: colour.field.background.default,
-    borderRadius: parseTokenValue45(borderRadius.field.default)
-  };
-});
-var StyledIconWrapper2 = styled51(View)({
-  flexShrink: 0,
-  alignItems: "center",
-  justifyContent: "center"
-});
-var StyledArrowIcon = styled51(Animated.View)({
-  flexShrink: 0,
-  alignItems: "center",
-  justifyContent: "center"
-});
-var SelectFieldTrigger = React66.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      state = "default",
-      leadingIcon,
-      children,
-      isOpen = false,
-      isSearching = false,
-      actionIcon
-    } = _b, rest = __objRest(_b, [
-      "state",
-      "leadingIcon",
-      "children",
-      "isOpen",
-      "isSearching",
-      "actionIcon"
-    ]);
-    const theme2 = useTheme();
-    const { colour, borderWidth, spacing } = theme2.tokens.components.inputs;
-    const hasState = state === "error" || state === "success";
-    const baseBorderWidth = parseTokenValue45(borderWidth.field.default);
-    const selectedBorderWidth = parseTokenValue45(borderWidth.field.selected);
-    const baseVerticalPadding = parseTokenValue45(spacing.field.verticalPadding);
-    const baseHorizontalPadding = parseTokenValue45(
-      spacing.field.horizontalPadding
-    );
-    const borderDelta = selectedBorderWidth - baseBorderWidth;
-    const borderColor = state === "error" ? colour.field.border.error : state === "success" ? colour.field.border.success : isOpen ? colour.field.border.selected : colour.field.border.default;
-    const isActiveBorder = isOpen || hasState;
-    const borderAnim = useRef(
-      new Animated.Value(isActiveBorder ? 1 : 0)
-    ).current;
-    const rotationAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
-    useEffect(() => {
-      Animated.parallel([
-        Animated.timing(borderAnim, {
-          toValue: isActiveBorder ? 1 : 0,
-          duration: 50,
-          easing: Easing.ease,
-          useNativeDriver: false
-        }),
-        Animated.timing(rotationAnim, {
-          toValue: isOpen ? 1 : 0,
-          duration: 250,
-          easing: Easing.bezier(0.4, 0, 0.2, 1),
-          useNativeDriver: true
-        })
-      ]).start();
-    }, [isActiveBorder, isOpen, borderAnim, rotationAnim]);
-    const animatedBorderWidth = borderAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [baseBorderWidth, selectedBorderWidth]
-    });
-    const animatedPaddingVertical = borderAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [baseVerticalPadding, baseVerticalPadding - borderDelta]
-    });
-    const animatedPaddingHorizontal = borderAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [baseHorizontalPadding, baseHorizontalPadding - borderDelta]
-    });
-    const animatedRotation = rotationAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: ["0deg", "180deg"]
-    });
-    const stateIcon = state === "error" ? /* @__PURE__ */ jsx(Icon, { icon: Error_default, size: "md", colour: "error" }) : state === "success" ? /* @__PURE__ */ jsx(Icon, { icon: CheckCircle_default, size: "md", colour: "success" }) : null;
-    const triggerContent = /* @__PURE__ */ jsxs(
-      StyledTriggerWrapper,
-      {
-        state,
-        style: [
-          {
-            borderColor,
-            borderWidth: animatedBorderWidth,
-            paddingVertical: animatedPaddingVertical,
-            paddingHorizontal: animatedPaddingHorizontal
-          }
-        ],
-        children: [
-          leadingIcon && /* @__PURE__ */ jsx(StyledIconWrapper2, { children: leadingIcon }),
-          children,
-          stateIcon && /* @__PURE__ */ jsx(StyledIconWrapper2, { children: stateIcon }),
-          actionIcon ? /* @__PURE__ */ jsx(StyledIconWrapper2, { children: actionIcon }) : /* @__PURE__ */ jsx(
-            StyledArrowIcon,
-            {
-              style: { transform: [{ rotate: animatedRotation }] },
-              children: /* @__PURE__ */ jsx(Icon, { icon: KeyboardArrowDown_default, size: "md", colour: "primary" })
-            }
-          )
-        ]
-      }
-    );
-    if (isSearching) {
-      return /* @__PURE__ */ jsx(View, { ref, children: triggerContent });
-    }
-    return /* @__PURE__ */ jsx(SelectPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Slot, { ref, children: /* @__PURE__ */ jsx(Pressable, __spreadProps(__spreadValues({}, rest), { children: triggerContent })) }) });
-  }
-);
-SelectFieldTrigger.displayName = "SelectField.Trigger";
-var SelectFieldValue = React66.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { placeholder, hasValue = true } = _b, rest = __objRest(_b, ["placeholder", "hasValue"]);
-    const theme2 = useTheme();
-    const { colour, field } = theme2.tokens.components.inputs;
-    return /* @__PURE__ */ jsx(View, __spreadProps(__spreadValues({ ref, style: { flex: 1, minWidth: 0 } }, rest), { children: /* @__PURE__ */ jsx(
-      Typography,
-      {
-        token: field.placeholder.default,
-        color: hasValue ? colour.field.text.default : colour.field.text.placeholder,
-        align: "left",
-        children: /* @__PURE__ */ jsx(SelectPrimitive3.Value, { placeholder: placeholder != null ? placeholder : "" })
-      }
-    ) }));
-  }
-);
-SelectFieldValue.displayName = "SelectField.Value";
-var parseTokenValue46 = (value) => parseFloat(value);
-var StyledContentShadow = styled51(View)(({ theme: theme2 }) => {
+var StyledDropdown = styled52(View)(({ theme: theme2, dropdownPlacement, anchorRect, screenHeight }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
+  const { spacing } = theme2.tokens.components.inputs;
   const shadow = dropdown.list.dropshadow.default;
-  return {
-    borderRadius: parseTokenValue46(dropdown.list.borderRadius.default),
+  const offset = parseTokenValue9(spacing.gap);
+  return __spreadProps(__spreadValues({
+    position: "absolute",
+    left: anchorRect.x,
+    width: anchorRect.width
+  }, dropdownPlacement === "below" ? { top: anchorRect.y + anchorRect.height + offset } : { bottom: screenHeight - anchorRect.y + offset }), {
+    minWidth: parseTokenValue9(dropdown.list.size.minWidth),
+    borderRadius: parseTokenValue9(dropdown.list.borderRadius.default),
     shadowColor: shadow.color,
     shadowOffset: {
-      width: parseTokenValue46(shadow.offsetX),
-      height: parseTokenValue46(shadow.offsetY)
+      width: parseTokenValue9(shadow.offsetX),
+      height: parseTokenValue9(shadow.offsetY)
     },
     shadowOpacity: 1,
-    shadowRadius: parseTokenValue46(shadow.blur),
+    shadowRadius: parseTokenValue9(shadow.blur),
     elevation: 8
-  };
+  });
 });
-var StyledContentInner = styled51(View)(({ theme: theme2 }) => {
+var StyledSurface = styled52(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const { colour } = theme2.tokens.components.inputs;
   return {
     backgroundColor: colour.field.background.default,
-    borderRadius: parseTokenValue46(dropdown.list.borderRadius.default),
-    minWidth: parseTokenValue46(dropdown.list.size.minWidth),
-    maxHeight: parseTokenValue46(dropdown.list.size.maxHeight),
+    borderRadius: parseTokenValue9(dropdown.list.borderRadius.default),
     overflow: "hidden"
   };
 });
-var SelectFieldContent = React66.forwardRef((_a, ref) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  const theme2 = useTheme();
-  const { spacing } = theme2.tokens.components.inputs;
-  return /* @__PURE__ */ jsxs(SelectPrimitive3.Portal, { children: [
-    /* @__PURE__ */ jsx(SelectPrimitive3.Overlay, { style: StyleSheet.absoluteFill }),
-    /* @__PURE__ */ jsx(
-      SelectPrimitive3.Content,
-      {
-        side: "bottom",
-        align: "start",
-        sideOffset: parseTokenValue46(spacing.gap),
-        alignOffset: 0,
-        asChild: true,
-        children: /* @__PURE__ */ jsx(Slot, { ref, children: /* @__PURE__ */ jsx(StyledContentShadow, __spreadProps(__spreadValues({}, rest), { children: /* @__PURE__ */ jsx(StyledContentInner, { children: /* @__PURE__ */ jsx(SelectPrimitive3.Viewport, { children: /* @__PURE__ */ jsx(
-          ScrollView,
-          {
-            showsVerticalScrollIndicator: true,
-            nestedScrollEnabled: true,
-            keyboardShouldPersistTaps: "handled",
-            children
-          }
-        ) }) }) })) })
-      }
-    )
-  ] });
+var SelectFieldDropdown = React65.forwardRef((_a, ref) => {
+  var _b = _a, { anchor, placement, maxHeight, screenHeight, children } = _b, rest = __objRest(_b, ["anchor", "placement", "maxHeight", "screenHeight", "children"]);
+  return /* @__PURE__ */ jsx(
+    StyledDropdown,
+    __spreadProps(__spreadValues({
+      ref,
+      dropdownPlacement: placement,
+      anchorRect: anchor,
+      screenHeight
+    }, rest), {
+      children: /* @__PURE__ */ jsx(StyledSurface, { style: { maxHeight }, children: /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          keyboardShouldPersistTaps: "always",
+          nestedScrollEnabled: true,
+          showsVerticalScrollIndicator: true,
+          children
+        }
+      ) })
+    })
+  );
 });
-SelectFieldContent.displayName = "SelectField.Content";
-var parseTokenValue47 = (value) => parseFloat(value);
-var StyledItem3 = styled51(Pressable)(({ theme: theme2 }) => {
+SelectFieldDropdown.displayName = "SelectField.Dropdown";
+var StyledOption = styled52(Pressable)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
     alignItems: "center",
-    gap: parseTokenValue47(dropdown.listItem.content.gap),
-    height: parseTokenValue47(dropdown.listItem.size.height),
-    paddingVertical: parseTokenValue47(dropdown.listItem.spacing.verticalPadding),
-    paddingHorizontal: parseTokenValue47(
+    gap: parseTokenValue9(dropdown.listItem.content.gap),
+    height: parseTokenValue9(dropdown.listItem.size.height),
+    paddingHorizontal: parseTokenValue9(
       dropdown.listItem.spacing.horiztonalPadding
-    ),
-    backgroundColor: dropdown.listItem.colour.background.default
+    )
   };
 });
-var StyledIconWrapper3 = styled51(View)({
+var StyledIconSlot2 = styled52(View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledContentWrapper = styled51(View)(({ theme: theme2 }) => {
-  const { dropdown } = theme2.tokens.components.dropdownList;
-  return {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: parseTokenValue47(dropdown.listItem.content.gap),
-    flex: 1,
-    minWidth: 0
-  };
-});
-var StyledTextWrapper = styled51(View)({
+var StyledTextSlot = styled52(View)({
   flex: 1,
   minWidth: 0
 });
-var StyledItemText = styled51(Text)(({ theme: theme2 }) => {
-  const { dropdown } = theme2.tokens.components.dropdownList;
-  return {
-    color: dropdown.listItem.colour.text.placeholder.default
-  };
-});
-var StyledHintText = styled51(Text)(({ theme: theme2 }) => {
-  const { dropdown } = theme2.tokens.components.dropdownList;
-  return {
-    color: dropdown.listItem.colour.text.hint.default,
-    flexShrink: 0
-  };
-});
-var SelectFieldItem = React66.forwardRef(
+var SelectFieldOption = React65.forwardRef(
   (_a, ref) => {
-    var _b = _a, { value, leadingIcon, hintText, children, disabled, isSelected } = _b, rest = __objRest(_b, ["value", "leadingIcon", "hintText", "children", "disabled", "isSelected"]);
+    var _b = _a, { label, leadingIcon, disabled = false, isSelected = false } = _b, rest = __objRest(_b, ["label", "leadingIcon", "disabled", "isSelected"]);
     const theme2 = useTheme();
     const { dropdown } = theme2.tokens.components.dropdownList;
-    const itemText = children;
-    const backgroundColor = disabled ? dropdown.listItem.colour.background.disabled : isSelected ? dropdown.listItem.colour.background.hover : dropdown.listItem.colour.background.default;
-    const textColor = disabled ? dropdown.listItem.colour.text.placeholder.disabled : dropdown.listItem.colour.text.placeholder.default;
-    return /* @__PURE__ */ jsx(
-      SelectPrimitive3.Item,
-      {
-        label: String(children),
-        value,
+    const { colour, typography } = dropdown.listItem;
+    const backgroundColor = disabled ? colour.background.disabled : isSelected ? colour.background.hover : colour.background.default;
+    return /* @__PURE__ */ jsxs(
+      StyledOption,
+      __spreadProps(__spreadValues({
+        ref,
         disabled,
-        asChild: true,
-        children: /* @__PURE__ */ jsx(Slot, { ref, children: /* @__PURE__ */ jsxs(StyledItem3, __spreadProps(__spreadValues({ disabled, style: { backgroundColor } }, rest), { children: [
-          leadingIcon && /* @__PURE__ */ jsx(StyledIconWrapper3, { children: leadingIcon }),
-          /* @__PURE__ */ jsxs(StyledContentWrapper, { children: [
-            /* @__PURE__ */ jsx(StyledTextWrapper, { children: /* @__PURE__ */ jsx(StyledItemText, { style: { color: textColor }, children: itemText }) }),
-            hintText && /* @__PURE__ */ jsx(
-              StyledHintText,
-              {
-                style: {
-                  color: disabled ? dropdown.listItem.colour.text.hint.disabled : dropdown.listItem.colour.text.hint.default
-                },
-                children: hintText
-              }
-            )
-          ] })
-        ] })) })
-      }
+        accessibilityRole: "button",
+        accessibilityState: { disabled, selected: isSelected },
+        style: { backgroundColor }
+      }, rest), {
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx(StyledIconSlot2, { children: leadingIcon }),
+          /* @__PURE__ */ jsx(StyledTextSlot, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: isSelected ? typography.placeholder.hover : typography.placeholder.default,
+              color: disabled ? colour.text.placeholder.disabled : colour.text.placeholder.default,
+              numberOfLines: 1,
+              children: label
+            }
+          ) })
+        ]
+      })
     );
   }
 );
-SelectFieldItem.displayName = "SelectField.Item";
-var parseTokenValue48 = (value) => parseFloat(value);
-var StyledStatusRow = styled51(View)(({ theme: theme2 }) => {
+SelectFieldOption.displayName = "SelectField.Option";
+var StyledStatusRow = styled52(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
-    paddingVertical: parseTokenValue48(dropdown.listItem.spacing.verticalPadding),
-    paddingHorizontal: parseTokenValue48(
+    height: parseTokenValue9(dropdown.listItem.size.height),
+    paddingHorizontal: parseTokenValue9(
       dropdown.listItem.spacing.horiztonalPadding
     ),
-    alignItems: "center"
-  };
-});
-var StyledRoot14 = styled51(View)(({ theme: theme2 }) => {
-  const { spacing } = theme2.tokens.components.inputs;
-  return {
-    gap: parseTokenValue48(spacing.gap)
+    alignItems: "center",
+    justifyContent: "center"
   };
 });
-var isSamePosition = (a, b) => a !== null && b !== null && a.width === b.width && a.height === b.height && a.pageX === b.pageX && a.pageY === b.pageY;
-function SelectFieldAnchor({ triggerRef, enabled }) {
-  const { triggerPosition, setTriggerPosition } = SelectPrimitive3.useRootContext();
-  const anchoredRef = React66.useRef(null);
-  React66.useEffect(() => {
-    anchoredRef.current = triggerPosition != null ? triggerPosition : null;
-  }, [triggerPosition]);
-  React66.useEffect(() => {
-    if (!enabled) return;
-    let frame;
-    let previous = null;
-    const track = () => {
-      var _a;
-      (_a = triggerRef.current) == null ? void 0 : _a.measure((_x, _y, width, height, pageX, pageY) => {
-        const measured = { width, height, pageX, pageY };
-        const settled = isSamePosition(measured, previous);
-        if (settled && !isSamePosition(measured, anchoredRef.current)) {
-          anchoredRef.current = measured;
-          setTriggerPosition(measured);
-        }
-        previous = measured;
+var SelectFieldList = ({
+  state,
+  selectedValue,
+  onSelect,
+  noResultsText,
+  errorText,
+  searchHintText
+}) => {
+  if (state.needsMoreInput) {
+    return /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: searchHintText }) });
+  }
+  if (state.isLoading) {
+    return /* @__PURE__ */ jsx(StyledStatusRow, { accessibilityLabel: "Loading results", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) });
+  }
+  if (state.hasError) {
+    return /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: errorText }) });
+  }
+  if (state.options.length === 0) {
+    return /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: noResultsText }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: state.options.map((option) => /* @__PURE__ */ jsx(
+    SelectFieldOption,
+    {
+      label: option.label,
+      leadingIcon: option.leadingIcon,
+      disabled: option.disabled,
+      isSelected: option.value === selectedValue,
+      onPress: () => onSelect(option)
+    },
+    option.value
+  )) });
+};
+SelectFieldList.displayName = "SelectField.List";
+
+// src/components/molecules/SelectField/core/options.ts
+var matchOptions = (options, query) => {
+  const needle = query.trim().toLowerCase();
+  if (needle.length === 0) return options;
+  const startsWith = [];
+  const contains = [];
+  options.forEach((option) => {
+    const haystack = option.label.toLowerCase();
+    if (haystack.startsWith(needle)) {
+      startsWith.push(option);
+    } else if (haystack.includes(needle)) {
+      contains.push(option);
+    }
+  });
+  return [...startsWith, ...contains];
+};
+var labelFor = (options, value) => {
+  var _a, _b;
+  return (_b = (_a = options.find((option) => option.value === value)) == null ? void 0 : _a.label) != null ? _b : "";
+};
+var useSelectOptions = ({
+  options,
+  query,
+  onSearchQuery,
+  debounceMs,
+  minQueryLength,
+  enabled
+}) => {
+  const isQueryMode = enabled && typeof onSearchQuery === "function";
+  const trimmedQuery = query.trim();
+  const meetsMinimum = trimmedQuery.length >= minQueryLength;
+  const isQueryActive = isQueryMode && trimmedQuery.length > 0 && meetsMinimum;
+  const needsMoreInput = isQueryMode && !meetsMinimum;
+  const [results, setResults] = React65.useState([]);
+  const [isLoading, setIsLoading] = React65.useState(false);
+  const [hasError, setHasError] = React65.useState(false);
+  const resolverRef = React65.useRef(onSearchQuery);
+  React65.useEffect(() => {
+    resolverRef.current = onSearchQuery;
+  });
+  const requestIdRef = React65.useRef(0);
+  React65.useEffect(() => {
+    if (!isQueryMode) return;
+    if (trimmedQuery.length === 0 || trimmedQuery.length < minQueryLength) {
+      requestIdRef.current += 1;
+      setResults([]);
+      setIsLoading(false);
+      setHasError(false);
+      return;
+    }
+    const requestId = requestIdRef.current + 1;
+    requestIdRef.current = requestId;
+    setIsLoading(true);
+    setHasError(false);
+    const timer = setTimeout(() => {
+      const resolve = resolverRef.current;
+      if (!resolve) {
+        setIsLoading(false);
+        return;
+      }
+      Promise.resolve(resolve(trimmedQuery)).then((items) => {
+        if (requestIdRef.current !== requestId) return;
+        setResults(items);
+        setIsLoading(false);
+      }).catch(() => {
+        if (requestIdRef.current !== requestId) return;
+        setResults([]);
+        setHasError(true);
+        setIsLoading(false);
       });
-      frame = requestAnimationFrame(track);
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [isQueryMode, trimmedQuery, debounceMs, minQueryLength]);
+  const localOptions = React65.useMemo(
+    () => enabled ? matchOptions(options, query) : options,
+    [enabled, options, query]
+  );
+  if (needsMoreInput) {
+    const hasDefaultList = trimmedQuery.length === 0 && options.length > 0;
+    return {
+      options: hasDefaultList ? options : [],
+      isLoading: false,
+      hasError: false,
+      needsMoreInput: !hasDefaultList
     };
-    frame = requestAnimationFrame(track);
-    return () => cancelAnimationFrame(frame);
-  }, [enabled, setTriggerPosition, triggerRef]);
-  return null;
-}
-var SelectFieldRoot = React66.forwardRef(
+  }
+  if (!isQueryActive) {
+    return {
+      options: localOptions,
+      isLoading: false,
+      hasError: false,
+      needsMoreInput: false
+    };
+  }
+  return { options: results, isLoading, hasError, needsMoreInput: false };
+};
+
+// src/components/molecules/SelectField/core/listHeight.ts
+var LIST_HEIGHT_RATIO = 0.5;
+var LIST_HEIGHT_CEILING = 480;
+var drawerListMaxHeight = (windowHeight, override) => override != null ? override : Math.min(windowHeight * LIST_HEIGHT_RATIO, LIST_HEIGHT_CEILING);
+var MIN_DROPDOWN_HEIGHT = 80;
+var StyledRoot14 = styled52(View)(({ theme: theme2 }) => ({
+  gap: parseTokenValue9(theme2.tokens.components.inputs.spacing.gap)
+}));
+var StyledAnchor = styled52(View)({});
+var SelectField = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
+      options,
       label,
-      placeholder,
       description,
       error,
       state = "default",
       optionalText,
+      placeholder,
       leadingIcon,
-      children,
-      value,
-      defaultValue,
-      onValueChange,
-      disabled,
-      searchable = false,
-      searchPlaceholder,
       noResultsText = "No results found",
+      errorText = "Something went wrong",
       onSearchQuery,
       debounceMs = 300,
-      errorText = "Something went wrong"
+      minQueryLength = 1,
+      searchHintText = "Type to search",
+      clearAccessibilityLabel = "Clear selection",
+      disabled = false,
+      value,
+      defaultValue,
+      onValueChange
     } = _b, rest = __objRest(_b, [
+      "options",
       "label",
-      "placeholder",
       "description",
       "error",
       "state",
       "optionalText",
+      "placeholder",
       "leadingIcon",
-      "children",
-      "value",
-      "defaultValue",
-      "onValueChange",
-      "disabled",
-      "searchable",
-      "searchPlaceholder",
       "noResultsText",
+      "errorText",
       "onSearchQuery",
       "debounceMs",
-      "errorText"
+      "minQueryLength",
+      "searchHintText",
+      "clearAccessibilityLabel",
+      "disabled",
+      "value",
+      "defaultValue",
+      "onValueChange"
     ]);
-    const [isOpen, setIsOpen] = React66.useState(false);
-    const [showContent, setShowContent] = React66.useState(false);
-    const [internalValue, setInternalValue] = React66.useState(
+    const theme2 = useTheme();
+    const { height: windowHeight } = useWindowDimensions();
+    const maxDropdownHeight = parseTokenValue9(
+      theme2.tokens.components.dropdownList.dropdown.list.size.maxHeight
+    );
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React65.useState(
       defaultValue != null ? defaultValue : null
     );
-    const [searchQuery, setSearchQuery] = React66.useState("");
-    const [clearKey, setClearKey] = React66.useState(0);
-    const searchInputRef = React66.useRef(null);
-    const triggerViewRef = React66.useRef(null);
-    const isQueryMode = searchable && typeof onSearchQuery === "function";
-    const [searchResults, setSearchResults] = React66.useState([]);
-    const [isSearching, setIsSearching] = React66.useState(false);
-    const [searchFailed, setSearchFailed] = React66.useState(false);
-    const searchRequestIdRef = React66.useRef(0);
-    const onSearchQueryRef = React66.useRef(onSearchQuery);
-    React66.useEffect(() => {
-      onSearchQueryRef.current = onSearchQuery;
+    const selectedValue = isControlled ? value : internalValue;
+    const [inputText, setInputText] = React65.useState(() => {
+      var _a2, _b2;
+      const initialValue = isControlled ? value : defaultValue != null ? defaultValue : null;
+      return (_b2 = (_a2 = options.find((option) => option.value === initialValue)) == null ? void 0 : _a2.label) != null ? _b2 : "";
     });
-    React66.useEffect(() => {
-      if (!isQueryMode) return;
-      if (searchQuery.length === 0) {
-        searchRequestIdRef.current += 1;
-        setSearchResults([]);
-        setIsSearching(false);
-        setSearchFailed(false);
-        return;
-      }
-      const requestId = searchRequestIdRef.current + 1;
-      searchRequestIdRef.current = requestId;
-      setIsSearching(true);
-      setSearchFailed(false);
-      const debounceTimer = setTimeout(() => {
-        const runQuery = onSearchQueryRef.current;
-        if (!runQuery) return;
-        Promise.resolve(runQuery(searchQuery)).then((items) => {
-          if (searchRequestIdRef.current !== requestId) return;
-          setSearchResults(items);
-          setIsSearching(false);
-        }).catch(() => {
-          if (searchRequestIdRef.current !== requestId) return;
-          setSearchResults([]);
-          setSearchFailed(true);
-          setIsSearching(false);
-        });
-      }, debounceMs);
-      return () => clearTimeout(debounceTimer);
-    }, [searchQuery, isQueryMode, debounceMs]);
-    React66.useEffect(() => {
-      if (!isOpen) {
-        setShowContent(false);
-        return;
-      }
-      if (!searchable) {
-        setShowContent(true);
-        return;
-      }
-      const openTimer = setTimeout(() => {
-        var _a2;
-        setShowContent(true);
-        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-      }, 0);
-      const keyboardSub = Keyboard.addListener("keyboardDidShow", () => {
-        setTimeout(() => {
-          var _a2;
-          return (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-        }, 0);
-      });
-      const hardwareKeyboardTimer = setTimeout(
-        () => {
-          var _a2;
-          return (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-        },
-        100
+    const [filterQuery, setFilterQuery] = React65.useState("");
+    const [isFocused, setIsFocused] = React65.useState(false);
+    const [keyboardHeight, setKeyboardHeight] = React65.useState(0);
+    const [placement, setPlacement] = React65.useState({ direction: "below", maxHeight: maxDropdownHeight });
+    const [anchorRect, setAnchorRect] = React65.useState(null);
+    const portalName = React65.useId();
+    const inputRef = React65.useRef(null);
+    const anchorRef = React65.useRef(null);
+    const selectionCountRef = React65.useRef(0);
+    React65.useEffect(() => {
+      const showSubscription = Keyboard.addListener(
+        "keyboardDidShow",
+        (event) => setKeyboardHeight(event.endCoordinates.height)
+      );
+      const hideSubscription = Keyboard.addListener(
+        "keyboardDidHide",
+        () => setKeyboardHeight(0)
       );
       return () => {
-        clearTimeout(openTimer);
-        clearTimeout(hardwareKeyboardTimer);
-        keyboardSub.remove();
+        showSubscription.remove();
+        hideSubscription.remove();
       };
-    }, [isOpen, searchable, isSearching, searchQuery]);
-    const isOpenRef = React66.useRef(isOpen);
-    React66.useEffect(() => {
-      isOpenRef.current = isOpen;
+    }, []);
+    const measurePlacement = React65.useCallback(() => {
+      var _a2;
+      (_a2 = anchorRef.current) == null ? void 0 : _a2.measureInWindow(
+        (anchorX, anchorY, anchorWidth, anchorHeight) => {
+          setAnchorRect(
+            (current) => current && current.x === anchorX && current.y === anchorY && current.width === anchorWidth && current.height === anchorHeight ? current : {
+              x: anchorX,
+              y: anchorY,
+              width: anchorWidth,
+              height: anchorHeight
+            }
+          );
+          const spaceBelow = windowHeight - keyboardHeight - (anchorY + anchorHeight);
+          const spaceAbove = anchorY;
+          const preferAbove = spaceBelow < maxDropdownHeight && spaceAbove > spaceBelow;
+          const availableSpace = preferAbove ? spaceAbove : spaceBelow;
+          const direction = preferAbove ? "above" : "below";
+          const maxHeight = Math.max(
+            MIN_DROPDOWN_HEIGHT,
+            Math.min(maxDropdownHeight, availableSpace)
+          );
+          setPlacement(
+            (current) => current.direction === direction && current.maxHeight === maxHeight ? current : { direction, maxHeight }
+          );
+        }
+      );
+    }, [windowHeight, keyboardHeight, maxDropdownHeight]);
+    React65.useEffect(() => {
+      if (isFocused) measurePlacement();
+    }, [isFocused, measurePlacement]);
+    React65.useEffect(() => {
+      if (!isControlled || isFocused) return;
+      if (value === null || value === void 0) {
+        setInputText("");
+        return;
+      }
+      const selectedOption = options.find((option) => option.value === value);
+      if (selectedOption) setInputText(selectedOption.label);
+    }, [isControlled, isFocused, value, options]);
+    const optionsState = useSelectOptions({
+      options,
+      query: filterQuery,
+      onSearchQuery,
+      debounceMs,
+      minQueryLength,
+      enabled: true
     });
-    const handleSearchBlur = () => {
+    const commitValue = (nextValue) => {
+      if (!isControlled) setInternalValue(nextValue);
+      if (nextValue !== selectedValue) onValueChange == null ? void 0 : onValueChange(nextValue);
+    };
+    const handleFocus = () => {
+      setIsFocused(true);
+      setFilterQuery("");
+    };
+    const handleBlur = () => {
+      const selectionsSeen = selectionCountRef.current;
       setTimeout(() => {
         var _a2;
-        if (isOpenRef.current) (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-      }, 50);
+        if (selectionCountRef.current !== selectionsSeen) return;
+        setIsFocused(false);
+        const typedLabel = inputText.trim().toLowerCase();
+        const exactMatch = options.find(
+          (option) => option.label.toLowerCase() === typedLabel
+        );
+        commitValue((_a2 = exactMatch == null ? void 0 : exactMatch.value) != null ? _a2 : null);
+      }, 0);
+    };
+    const handleChangeText = (text) => {
+      setInputText(text);
+      setFilterQuery(text);
     };
-    const isCompound = React66.Children.toArray(children).some(
-      (child) => React66.isValidElement(child) && child.type === SelectFieldContent
+    const handleSelect = (option) => {
+      selectionCountRef.current += 1;
+      setInputText(option.label);
+      setFilterQuery("");
+      setIsFocused(false);
+      commitValue(option.value);
+      Keyboard.dismiss();
+    };
+    const handleClear = () => {
+      var _a2;
+      setInputText("");
+      setFilterQuery("");
+      commitValue(null);
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    };
+    const fieldState = error ? "error" : state;
+    const isOpen = isFocused && !disabled;
+    const clearAction = !disabled && inputText.length > 0 ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: handleClear,
+        accessibilityRole: "button",
+        accessibilityLabel: clearAccessibilityLabel,
+        hitSlop: 8,
+        children: /* @__PURE__ */ jsx(Icon, { icon: Cancel_default, size: "md" })
+      }
+    ) : void 0;
+    const handleSelectRef = React65.useRef(handleSelect);
+    handleSelectRef.current = handleSelect;
+    const onOptionPress = React65.useCallback(
+      (option) => handleSelectRef.current(option),
+      []
     );
-    if (isCompound) {
-      return /* @__PURE__ */ jsx(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children }));
-    }
-    const handleValueChange = (newValue) => {
-      const valueToSet = newValue != null ? newValue : null;
-      setInternalValue(valueToSet);
-      onValueChange == null ? void 0 : onValueChange(valueToSet);
+    const dropdown = React65.useMemo(() => {
+      if (!isOpen || !anchorRect) return null;
+      return /* @__PURE__ */ jsx(
+        SelectFieldDropdown,
+        {
+          anchor: anchorRect,
+          placement: placement.direction,
+          maxHeight: placement.maxHeight,
+          screenHeight: windowHeight,
+          accessibilityLiveRegion: "polite",
+          children: /* @__PURE__ */ jsx(
+            SelectFieldList,
+            {
+              state: optionsState,
+              selectedValue,
+              onSelect: onOptionPress,
+              noResultsText,
+              errorText,
+              searchHintText
+            }
+          )
+        }
+      );
+    }, [
+      isOpen,
+      anchorRect,
+      placement,
+      windowHeight,
+      optionsState,
+      noResultsText,
+      errorText,
+      searchHintText,
+      selectedValue,
+      onOptionPress
+    ]);
+    return /* @__PURE__ */ jsxs(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      label && /* @__PURE__ */ jsx(InputLabel, { optionalText, state: fieldState, children: label }),
+      /* @__PURE__ */ jsx(StyledAnchor, { ref: anchorRef, children: /* @__PURE__ */ jsx(
+        InputField,
+        {
+          ref: inputRef,
+          value: inputText,
+          onChangeText: handleChangeText,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          placeholder,
+          editable: !disabled,
+          state: fieldState,
+          hideStateIcons: Boolean(clearAction),
+          leadingIcon,
+          actionIcon: clearAction,
+          selectTextOnFocus: true,
+          autoCorrect: false,
+          autoCapitalize: "none",
+          returnKeyType: "done",
+          accessibilityRole: "combobox",
+          accessibilityState: { disabled, expanded: isOpen }
+        }
+      ) }),
+      description && /* @__PURE__ */ jsx(InputDescription, { state: fieldState, children: description }),
+      error && /* @__PURE__ */ jsx(InputError, { children: error }),
+      dropdown && /* @__PURE__ */ jsx(Portal, { name: portalName, children: dropdown })
+    ] }));
+  }
+);
+SelectField.displayName = "SelectField";
+var StyledRoot15 = styled52(View)(({ theme: theme2 }) => ({
+  gap: parseTokenValue9(theme2.tokens.components.inputs.spacing.gap)
+}));
+var StyledSearchRow = styled52(View)(({ theme: theme2 }) => {
+  const { colour } = theme2.tokens.semantics;
+  return {
+    backgroundColor: colour.background.container.default,
+    paddingBottom: parseTokenValue9(theme2.tokens.components.inputs.spacing.gap)
+  };
+});
+var SelectDrawerField = React65.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      options,
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      placeholder,
+      leadingIcon,
+      drawerTitle,
+      searchable = true,
+      searchPlaceholder = "Search",
+      noResultsText = "No results found",
+      errorText = "Something went wrong",
+      onSearchQuery,
+      debounceMs = 300,
+      minQueryLength = 1,
+      searchHintText = "Type to search",
+      clearAccessibilityLabel = "Clear selection",
+      listMaxHeight,
+      disabled = false,
+      value,
+      defaultValue,
+      onValueChange
+    } = _b, rest = __objRest(_b, [
+      "options",
+      "label",
+      "description",
+      "error",
+      "state",
+      "optionalText",
+      "placeholder",
+      "leadingIcon",
+      "drawerTitle",
+      "searchable",
+      "searchPlaceholder",
+      "noResultsText",
+      "errorText",
+      "onSearchQuery",
+      "debounceMs",
+      "minQueryLength",
+      "searchHintText",
+      "clearAccessibilityLabel",
+      "listMaxHeight",
+      "disabled",
+      "value",
+      "defaultValue",
+      "onValueChange"
+    ]);
+    var _a2;
+    const { height: windowHeight } = useWindowDimensions();
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React65.useState(
+      defaultValue != null ? defaultValue : null
+    );
+    const selectedValue = isControlled ? value : internalValue;
+    const [isOpen, setIsOpen] = React65.useState(false);
+    const [searchQuery, setSearchQuery] = React65.useState("");
+    const [lastSelected, setLastSelected] = React65.useState(null);
+    const selectedLabel = labelFor(options, selectedValue) || (lastSelected && lastSelected.value === selectedValue ? lastSelected.label : "");
+    const optionsState = useSelectOptions({
+      options,
+      query: searchQuery,
+      onSearchQuery,
+      debounceMs,
+      minQueryLength,
+      enabled: searchable
+    });
+    const commitValue = (nextValue) => {
+      if (!isControlled) setInternalValue(nextValue);
+      if (nextValue !== selectedValue) onValueChange == null ? void 0 : onValueChange(nextValue);
     };
     const handleOpenChange = (open) => {
       setIsOpen(open);
       if (!open) setSearchQuery("");
     };
-    const currentValue = value !== void 0 ? value : internalValue;
-    const allItems = React66.Children.toArray(children);
-    const localFilteredItems = searchable && !isQueryMode ? allItems.filter((child) => {
-      var _a2;
-      if (!searchQuery) return true;
-      if (React66.isValidElement(child) && child.type === SelectFieldItem) {
-        const label2 = String(
-          (_a2 = child.props.children) != null ? _a2 : ""
-        );
-        return label2.toLowerCase().includes(searchQuery.toLowerCase());
+    const handleSelect = (option) => {
+      setLastSelected(option);
+      commitValue(option.value);
+      handleOpenChange(false);
+    };
+    const handleClear = () => {
+      setLastSelected(null);
+      commitValue(null);
+    };
+    const bodyMaxHeight = drawerListMaxHeight(windowHeight, listMaxHeight);
+    const fieldState = error ? "error" : state;
+    const clearAction = !disabled && selectedLabel.length > 0 ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: handleClear,
+        accessibilityRole: "button",
+        accessibilityLabel: clearAccessibilityLabel,
+        hitSlop: 8,
+        children: /* @__PURE__ */ jsx(Icon, { icon: Cancel_default, size: "md" })
       }
-      return true;
-    }) : allItems;
-    const isQueryActive = isQueryMode && searchQuery.length > 0;
-    const queryResultItems = searchResults.map((result) => /* @__PURE__ */ jsx(
-      SelectFieldItem,
+    ) : void 0;
+    const searchClearAction = searchQuery.length > 0 ? /* @__PURE__ */ jsx(
+      Pressable,
       {
-        value: result.value,
-        leadingIcon: result.leadingIcon,
-        hintText: result.hintText,
-        disabled: result.disabled,
-        children: result.label
-      },
-      String(result.value)
-    ));
-    const itemsToRender = isQueryActive ? queryResultItems : localFilteredItems;
-    const hasNoResults = isQueryMode ? isQueryActive && !isSearching && !searchFailed && searchResults.length === 0 : searchable && searchQuery.length > 0 && localFilteredItems.length === 0;
-    const hasContentToShow = isSearching || searchFailed || hasNoResults || itemsToRender.length > 0;
-    const searchActionIcon = (() => {
-      if (!searchable) return void 0;
-      const showClear = isOpen && searchQuery.length > 0 || !isOpen && Boolean(currentValue);
-      if (!showClear) return /* @__PURE__ */ jsx(Icon, { icon: Search_default, size: "md" });
-      return /* @__PURE__ */ jsx(
-        Pressable,
+        onPress: () => setSearchQuery(""),
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear search",
+        hitSlop: 8,
+        children: /* @__PURE__ */ jsx(Icon, { icon: Cancel_default, size: "md" })
+      }
+    ) : void 0;
+    return /* @__PURE__ */ jsxs(StyledRoot15, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      label && /* @__PURE__ */ jsx(InputLabel, { optionalText, state: fieldState, children: label }),
+      /* @__PURE__ */ jsx(
+        InputField,
         {
-          onPress: isOpen ? () => {
-            var _a2;
-            setSearchQuery("");
-            (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-          } : () => {
-            setInternalValue(null);
-            onValueChange == null ? void 0 : onValueChange(null);
-            setClearKey((k) => k + 1);
-          },
-          accessibilityLabel: isOpen ? "Clear search" : "Clear selection",
-          accessibilityRole: "button",
-          hitSlop: 8,
-          children: /* @__PURE__ */ jsx(Icon, { icon: Cancel_default, size: "md" })
+          value: selectedLabel,
+          placeholder,
+          editable: false,
+          onPress: disabled ? void 0 : () => setIsOpen(true),
+          state: fieldState,
+          hideStateIcons: Boolean(clearAction),
+          leadingIcon,
+          actionIcon: clearAction,
+          accessibilityRole: "combobox",
+          accessibilityState: { disabled, expanded: isOpen }
         }
-      );
-    })();
-    return /* @__PURE__ */ jsxs(
-      SelectPrimitive3.Root,
-      {
-        value: currentValue != null ? currentValue : void 0,
-        onValueChange: handleValueChange,
-        disabled,
-        onOpenChange: handleOpenChange,
-        children: [
-          /* @__PURE__ */ jsxs(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children: [
-            label && /* @__PURE__ */ jsx(InputLabel, { optionalText, state, children: label }),
-            /* @__PURE__ */ jsx(
-              SelectFieldTrigger,
-              {
-                ref: triggerViewRef,
-                state,
-                leadingIcon,
-                isOpen,
-                isSearching: searchable && isOpen,
-                actionIcon: searchActionIcon,
-                children: searchable && isOpen ? /* @__PURE__ */ jsx(
-                  InputText,
+      ),
+      description && /* @__PURE__ */ jsx(InputDescription, { state: fieldState, children: description }),
+      error && /* @__PURE__ */ jsx(InputError, { children: error }),
+      /* @__PURE__ */ jsx(Drawer.Root, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+        /* @__PURE__ */ jsx(Drawer.Overlay, {}),
+        /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+          /* @__PURE__ */ jsxs(Drawer.Header, { children: [
+            /* @__PURE__ */ jsx(Drawer.Title, { children: (_a2 = drawerTitle != null ? drawerTitle : label) != null ? _a2 : "Select" }),
+            /* @__PURE__ */ jsx(Drawer.Close, {})
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Drawer.Body,
+            {
+              style: { maxHeight: bodyMaxHeight },
+              keyboardShouldPersistTaps: "always",
+              stickyHeaderIndices: searchable ? [0] : void 0,
+              children: [
+                searchable ? /* @__PURE__ */ jsx(StyledSearchRow, { children: /* @__PURE__ */ jsx(
+                  InputField,
                   {
-                    ref: searchInputRef,
                     value: searchQuery,
                     onChangeText: setSearchQuery,
-                    onBlur: handleSearchBlur,
-                    placeholder: searchPlaceholder != null ? searchPlaceholder : "Search...",
+                    placeholder: searchPlaceholder,
+                    leadingIcon: /* @__PURE__ */ jsx(Icon, { icon: Search_default, size: "md" }),
+                    actionIcon: searchClearAction,
+                    autoFocus: true,
+                    selectTextOnFocus: true,
+                    autoCorrect: false,
+                    autoCapitalize: "none",
                     returnKeyType: "search",
-                    clearButtonMode: "never",
-                    accessibilityLabel: "Search options"
+                    accessibilityLabel: searchPlaceholder
                   }
-                ) : /* @__PURE__ */ jsx(
-                  SelectFieldValue,
+                ) }) : null,
+                /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(
+                  SelectFieldList,
                   {
-                    placeholder,
-                    hasValue: Boolean(currentValue)
+                    state: optionsState,
+                    selectedValue,
+                    onSelect: handleSelect,
+                    noResultsText,
+                    errorText,
+                    searchHintText
                   }
-                )
-              }
-            ),
-            description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
-            error && state === "error" && /* @__PURE__ */ jsx(InputError, { children: error })
-          ] })),
-          /* @__PURE__ */ jsx(
-            SelectFieldAnchor,
-            {
-              triggerRef: triggerViewRef,
-              enabled: searchable && isOpen
+                ) })
+              ]
             }
-          ),
-          showContent && hasContentToShow && /* @__PURE__ */ jsx(SelectFieldContent, { children: isSearching ? /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }) : searchFailed ? /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: errorText }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            itemsToRender.map((child) => {
-              if (React66.isValidElement(child) && child.type === SelectFieldItem) {
-                const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
-                const childProps = child.props;
-                return React66.cloneElement(
-                  child,
-                  {
-                    isSelected: childProps.value === selectedValue
-                  }
-                );
-              }
-              return child;
-            }),
-            hasNoResults && /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: noResultsText }) })
-          ] }) })
-        ]
-      },
-      clearKey
-    );
+          )
+        ] })
+      ] }) })
+    ] }));
   }
 );
-SelectFieldRoot.displayName = "SelectField";
-var SelectField = Object.assign(SelectFieldRoot, {
-  Root: StyledRoot14,
-  Label: InputLabel,
-  Trigger: SelectFieldTrigger,
-  Value: SelectFieldValue,
-  Content: SelectFieldContent,
-  Item: SelectFieldItem,
-  Description: InputDescription,
-  Error: InputError
-});
-function useSelectField(options = {}) {
-  const {
-    initialValue,
-    onValueChange: onValueChangeCallback,
-    validationRule
-  } = options;
-  const [value, setValue] = useState(initialValue != null ? initialValue : null);
-  const handleValueChange = (newValue) => {
-    const typedValue = Array.isArray(newValue) ? newValue[0] : newValue;
-    setValue(typedValue != null ? typedValue : null);
-    onValueChangeCallback == null ? void 0 : onValueChangeCallback(typedValue);
-  };
-  const { state, error } = useMemo(() => {
-    if (!validationRule) {
-      return { state: void 0, error: void 0 };
-    }
-    if (value === null || value === initialValue) {
-      return { state: "default", error: void 0 };
-    }
-    const isValid = validationRule.test(value);
-    return {
-      state: isValid ? "success" : "error",
-      error: isValid ? void 0 : validationRule.message
-    };
-  }, [value, validationRule, initialValue]);
-  return __spreadValues({
-    value,
-    onValueChange: handleValueChange
-  }, validationRule && { state, error });
-}
+SelectDrawerField.displayName = "SelectDrawerField";
 var themeTokens = DEFAULT_THEME_OPTIONS.tokens;
 var { components, semantics } = themeTokens;
 var inputTokens = components.inputs;
@@ -9397,7 +9478,7 @@ var resolveTypography = (typography) => {
   const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
   return { fontFamily, fontSize, letterSpacing };
 };
-var Wrapper = styled51(View)({
+var Wrapper = styled52(View)({
   borderWidth: parseSize(inputTokens.borderWidth.field.selected),
   borderColor: inputTokens.colour.field.border.selected,
   borderRadius: parseSize(inputTokens.borderRadius.field.default),
@@ -9409,27 +9490,27 @@ var Wrapper = styled51(View)({
   alignItems: "center",
   justifyContent: "space-between"
 });
-var SelectIcon = styled51(Animated10.View)({
+var SelectIcon = styled52(Animated9.View)({
   position: "absolute",
   right: 0,
   marginRight: 0
 });
-var InputText2 = styled51(Text)(__spreadProps(__spreadValues({
+var InputText2 = styled52(Text)(__spreadProps(__spreadValues({
   color: inputTokens.colour.field.text.default
 }, resolveTypography(inputTokens.field.placeholder.default)), {
   flex: 1
 }));
-var PlaceholderText = styled51(Text)(__spreadProps(__spreadValues({
+var PlaceholderText = styled52(Text)(__spreadProps(__spreadValues({
   color: inputTokens.colour.field.text.placeholder
 }, resolveTypography(inputTokens.field.placeholder.default)), {
   flex: 1
 }));
-var ModalOverlay = styled51(View)({
+var ModalOverlay = styled52(View)({
   flex: 1,
   backgroundColor: "rgba(0, 0, 0, 0.32)",
   justifyContent: "flex-end"
 });
-var AndroidDialog = styled51(View)({
+var AndroidDialog = styled52(View)({
   backgroundColor: inputTokens.colour.field.background.default,
   borderTopLeftRadius: parseSize(dimensions.borderRadius.lg),
   borderTopRightRadius: parseSize(dimensions.borderRadius.lg),
@@ -9439,12 +9520,12 @@ var AndroidDialog = styled51(View)({
   paddingBottom: parseSize(dimensions.spacing.xl),
   paddingHorizontal: parseSize(dimensions.spacing.md)
 });
-var DialogTitle = styled51(Text)(__spreadProps(__spreadValues({}, resolveTypography(inputTokens.text.label)), {
+var DialogTitle = styled52(Text)(__spreadProps(__spreadValues({}, resolveTypography(inputTokens.text.label)), {
   color: inputTokens.colour.field.text.default,
   marginBottom: parseSize(dimensions.spacing.md),
   marginLeft: parseSize(dimensions.spacing.xs)
 }));
-var AndroidOptionRow = styled51(View)({
+var AndroidOptionRow = styled52(View)({
   flexDirection: "row",
   alignItems: "center",
   paddingVertical: parseSize(dimensions.spacing.md),
@@ -9452,7 +9533,7 @@ var AndroidOptionRow = styled51(View)({
   borderBottomWidth: parseSize(dimensions.borderWidth.sm),
   borderBottomColor: themeTokens.primitives.colour.brand.brown[2]
 });
-var RadioOuter = styled51(View)({
+var RadioOuter = styled52(View)({
   width: parseSize(dimensions.spacing.lg),
   height: parseSize(dimensions.spacing.lg),
   borderRadius: parseSize(dimensions.spacing.lg) / 2,
@@ -9462,13 +9543,13 @@ var RadioOuter = styled51(View)({
   justifyContent: "center",
   marginRight: parseSize(dimensions.spacing.sm)
 });
-var RadioInner = styled51(View)({
+var RadioInner = styled52(View)({
   width: parseSize(dimensions.spacing.md) / 2,
   height: parseSize(dimensions.spacing.md) / 2,
   borderRadius: parseSize(dimensions.spacing.md) / 4,
   backgroundColor: inputTokens.colour.field.border.selected
 });
-var AndroidOptionText = styled51(Text)(
+var AndroidOptionText = styled52(Text)(
   ({ isSelected }) => __spreadProps(__spreadValues({}, resolveTypography(
     isSelected ? inputTokens.text.label : inputTokens.field.placeholder.default
   )), {
@@ -9495,7 +9576,7 @@ var useIconAnimation = () => {
     iconAnimationStyles
   };
 };
-var NativeSelectPicker = React66.forwardRef(
+var NativeSelectPicker = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       items,
@@ -9648,19 +9729,19 @@ var NativeSelectPicker = React66.forwardRef(
   }
 );
 NativeSelectPicker.displayName = "NativeSelectPicker";
-var parseTokenValue49 = (value) => parseFloat(value);
-var StyledLabelRow2 = styled51(View)(({ labelRowGap }) => ({
+var parseTokenValue45 = (value) => parseFloat(value);
+var StyledLabelRow2 = styled52(View)(({ labelRowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelRowGap
 }));
-var StyledLabelSlot = styled51(View)(({ labelSlotGap }) => ({
+var StyledLabelSlot = styled52(View)(({ labelSlotGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelSlotGap,
   flexShrink: 0
 }));
-var Slider = React66.forwardRef(
+var Slider = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: controlledValue,
@@ -9695,10 +9776,10 @@ var Slider = React66.forwardRef(
     const { slider, buttons } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React66.useState(defaultValue);
+    const [internalValue, setInternalValue] = React65.useState(defaultValue);
     const currentValue = isControlled ? controlledValue : internalValue;
-    const thumbSize = parseTokenValue49(buttons.size.md.minHeight);
-    const trackHeight = parseTokenValue49(slider.sizing.track.height);
+    const thumbSize = parseTokenValue45(buttons.size.md.minHeight);
+    const trackHeight = parseTokenValue45(slider.sizing.track.height);
     const isWeb = Platform.OS === "web";
     const [trackLayoutWidth, setTrackLayoutWidth] = useState(0);
     const webFraction = max > min ? (currentValue - min) / (max - min) : 0;
@@ -9793,8 +9874,8 @@ var Slider = React66.forwardRef(
     };
     const hasLeading = leadingIcon !== void 0 || leadingLabel !== void 0;
     const hasTrailing = trailingIcon !== void 0 || trailingLabel !== void 0;
-    const labelGap = parseTokenValue49(slider.sliderField.spacing.label.gap);
-    const roundBorderRadius = parseTokenValue49(dimensions3.borderRadius.round);
+    const labelGap = parseTokenValue45(slider.sliderField.spacing.label.gap);
+    const roundBorderRadius = parseTokenValue45(dimensions3.borderRadius.round);
     const thumbIconColor = buttons.iconButton.filledButton.colour.icon.primary.default;
     const thumbContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -9819,15 +9900,15 @@ var Slider = React66.forwardRef(
     const thumbStyle = {
       width: thumbSize,
       height: thumbSize,
-      borderRadius: parseTokenValue49(buttons.borderRadius.default),
+      borderRadius: parseTokenValue45(buttons.borderRadius.default),
       backgroundColor: buttons.iconButton.filledButton.colour.background.primary.default,
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center"
     };
     const outerStyle = {
-      gap: parseTokenValue49(slider.sliderField.spacing.gap),
-      minWidth: parseTokenValue49(slider.sizing.minWidth),
+      gap: parseTokenValue45(slider.sliderField.spacing.gap),
+      minWidth: parseTokenValue45(slider.sizing.minWidth),
       opacity: disabled ? parseFloat(buttons.opacity.disabled) : 1
     };
     const leadingSlot = hasLeading && /* @__PURE__ */ jsxs(StyledLabelSlot, { labelSlotGap: labelGap, children: [
@@ -9865,7 +9946,7 @@ var Slider = React66.forwardRef(
       height: trackHeight,
       borderRadius: roundBorderRadius,
       backgroundColor: slider.colour.track.background.default,
-      borderWidth: parseTokenValue49(dimensions3.borderWidth.sm),
+      borderWidth: parseTokenValue45(dimensions3.borderWidth.sm),
       borderColor: slider.colour.track.border.default
     };
     const indicatorBaseStyle = {
@@ -9960,9 +10041,9 @@ var Slider = React66.forwardRef(
                 onLayout: handleNativeLayout,
                 children: [
                   /* @__PURE__ */ jsx(View, { style: trackBackgroundStyle }),
-                  /* @__PURE__ */ jsx(Animated10.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
+                  /* @__PURE__ */ jsx(Animated9.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
                   /* @__PURE__ */ jsx(
-                    Animated10.View,
+                    Animated9.View,
                     {
                       style: [
                         __spreadProps(__spreadValues({}, thumbStyle), { position: "absolute", left: 0 }),
@@ -9989,8 +10070,8 @@ var ICON_MAP = {
   warning: Error_default,
   info: Info_default
 };
-var parseTokenValue50 = (value) => parseFloat(value);
-var StyledInlineRoot = styled51(View)(
+var parseTokenValue46 = (value) => parseFloat(value);
+var StyledInlineRoot = styled52(View)(
   ({ rootPaddingH, rootPaddingV, rootGap, rootBorderRadius, rootBgColor }) => ({
     flexDirection: "row",
     alignItems: "flex-start",
@@ -10001,7 +10082,7 @@ var StyledInlineRoot = styled51(View)(
     backgroundColor: rootBgColor
   })
 );
-var StyledToastRoot = styled51(View)(
+var StyledToastRoot = styled52(View)(
   ({
     rootPaddingH,
     rootPaddingV,
@@ -10028,7 +10109,7 @@ var StyledToastRoot = styled51(View)(
     elevation: 4
   })
 );
-var StyledSystemRoot = styled51(View)(
+var StyledSystemRoot = styled52(View)(
   ({
     rootPaddingH,
     rootPaddingTop,
@@ -10048,37 +10129,37 @@ var StyledSystemRoot = styled51(View)(
     width: "100%"
   })
 );
-var StyledContents = styled51(View)(({ contentsGap }) => ({
+var StyledContents = styled52(View)(({ contentsGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   flex: 1,
   minWidth: 0,
   gap: contentsGap
 }));
-var StyledCopyRow = styled51(View)(({ copyGap }) => ({
+var StyledCopyRow = styled52(View)(({ copyGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var StyledInlineCopy = styled51(View)(({ copyGap }) => ({
+var StyledInlineCopy = styled52(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledLinkWrapper = styled51(View)(({ linkPaddingLeft }) => ({
+var StyledLinkWrapper = styled52(View)(({ linkPaddingLeft }) => ({
   paddingLeft: linkPaddingLeft,
   width: "100%"
 }));
-var StyledCloseButton = styled51(Pressable)({
+var StyledCloseButton = styled52(Pressable)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   padding: 0
 });
-var Notification = React66.forwardRef(
+var Notification = React65.forwardRef(
   (props, ref) => {
     const _a = props, {
       variant = "inline",
@@ -10114,10 +10195,10 @@ var Notification = React66.forwardRef(
           ref,
           accessible: true,
           accessibilityRole: "summary",
-          rootPaddingH: parseTokenValue50(sizeTokens.horizontalPadding),
-          rootPaddingTop: parseTokenValue50(sizeTokens.topPadding),
-          rootPaddingBottom: parseTokenValue50(sizeTokens.bottomPadding),
-          rootGap: parseTokenValue50(sizeTokens.content.gap),
+          rootPaddingH: parseTokenValue46(sizeTokens.horizontalPadding),
+          rootPaddingTop: parseTokenValue46(sizeTokens.topPadding),
+          rootPaddingBottom: parseTokenValue46(sizeTokens.bottomPadding),
+          rootGap: parseTokenValue46(sizeTokens.content.gap),
           rootBgColor: bgMap[type],
           rootAlignCenter: isLarge
         }, rest), {
@@ -10142,7 +10223,7 @@ var Notification = React66.forwardRef(
             link && /* @__PURE__ */ jsx(
               StyledLinkWrapper,
               {
-                linkPaddingLeft: parseTokenValue50(sizeTokens.content.gap),
+                linkPaddingLeft: parseTokenValue46(sizeTokens.content.gap),
                 children: /* @__PURE__ */ jsx(
                   Link,
                   {
@@ -10166,12 +10247,12 @@ var Notification = React66.forwardRef(
           ref,
           accessible: true,
           accessibilityRole: "alert",
-          rootPaddingH: parseTokenValue50(toast.spacing.horizontalPadding),
-          rootPaddingV: parseTokenValue50(toast.spacing.verticalPadding),
-          rootGap: parseTokenValue50(toast.spacing.gap),
-          rootBorderRadius: parseTokenValue50(toast.borderRadius.default),
+          rootPaddingH: parseTokenValue46(toast.spacing.horizontalPadding),
+          rootPaddingV: parseTokenValue46(toast.spacing.verticalPadding),
+          rootGap: parseTokenValue46(toast.spacing.gap),
+          rootBorderRadius: parseTokenValue46(toast.borderRadius.default),
           rootBgColor: toast.colour.background.default,
-          rootBorderWidth: parseTokenValue50(toast.borderWidth.default),
+          rootBorderWidth: parseTokenValue46(toast.borderWidth.default),
           rootBorderColor: toast.colour.border.default,
           rootShadowColor: toast.shaddow.default.color
         }, rest), {
@@ -10179,9 +10260,9 @@ var Notification = React66.forwardRef(
             /* @__PURE__ */ jsxs(
               StyledContents,
               {
-                contentsGap: parseTokenValue50(toast.content.spacing.gap),
+                contentsGap: parseTokenValue46(toast.content.spacing.gap),
                 children: [
-                  /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue50(toast.copy.spacing.gap), children: [
+                  /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue46(toast.copy.spacing.gap), children: [
                     showIcon && /* @__PURE__ */ jsx(
                       Icon,
                       {
@@ -10203,7 +10284,7 @@ var Notification = React66.forwardRef(
                   link && /* @__PURE__ */ jsx(
                     StyledLinkWrapper,
                     {
-                      linkPaddingLeft: parseTokenValue50(
+                      linkPaddingLeft: parseTokenValue46(
                         toast.link.spacing.leftPadding
                       ),
                       children: /* @__PURE__ */ jsx(
@@ -10241,14 +10322,14 @@ var Notification = React66.forwardRef(
         ref,
         accessible: true,
         accessibilityRole: "alert",
-        rootPaddingH: parseTokenValue50(spacing.horizontalPadding),
-        rootPaddingV: parseTokenValue50(spacing.verticalPadding),
-        rootGap: parseTokenValue50(spacing.gap),
-        rootBorderRadius: parseTokenValue50(borderRadius.default),
+        rootPaddingH: parseTokenValue46(spacing.horizontalPadding),
+        rootPaddingV: parseTokenValue46(spacing.verticalPadding),
+        rootGap: parseTokenValue46(spacing.gap),
+        rootBorderRadius: parseTokenValue46(borderRadius.default),
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx(StyledContents, { contentsGap: parseTokenValue50(content.spacing.gap), children: /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue50(content.spacing.gap), children: [
+          /* @__PURE__ */ jsx(StyledContents, { contentsGap: parseTokenValue46(content.spacing.gap), children: /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue46(content.spacing.gap), children: [
             showIcon && /* @__PURE__ */ jsx(
               Icon,
               {
@@ -10261,7 +10342,7 @@ var Notification = React66.forwardRef(
             /* @__PURE__ */ jsxs(
               StyledInlineCopy,
               {
-                copyGap: parseTokenValue50(content.copy.spacing.gap),
+                copyGap: parseTokenValue46(content.copy.spacing.gap),
                 children: [
                   title && /* @__PURE__ */ jsx(
                     Typography,
@@ -10282,7 +10363,7 @@ var Notification = React66.forwardRef(
                   link && /* @__PURE__ */ jsx(
                     StyledLinkWrapper,
                     {
-                      linkPaddingLeft: parseTokenValue50(content.copy.spacing.gap),
+                      linkPaddingLeft: parseTokenValue46(content.copy.spacing.gap),
                       children: /* @__PURE__ */ jsx(
                         Link,
                         {
@@ -10314,7 +10395,7 @@ var Notification = React66.forwardRef(
   }
 );
 Notification.displayName = "Notification";
-var parseTokenValue51 = (value) => parseFloat(value);
+var parseTokenValue47 = (value) => parseFloat(value);
 var SCALE_STEP = 0.06;
 var SPRING_CONFIG = { damping: 20, stiffness: 260, mass: 0.5 };
 var CARD_ENTERING = FadeInDown.duration(200).easing(Easing$1.inOut(Easing$1.quad));
@@ -10329,7 +10410,7 @@ var DEPTH_LAYER_STYLE = {
   transformOrigin: "50% 100%",
   width: "100%"
 };
-var StyledRoot15 = styled51(View)(({ rootBottom, rootPaddingH }) => ({
+var StyledRoot16 = styled52(View)(({ rootBottom, rootPaddingH }) => ({
   position: "absolute",
   left: 0,
   right: 0,
@@ -10337,7 +10418,7 @@ var StyledRoot15 = styled51(View)(({ rootBottom, rootPaddingH }) => ({
   paddingHorizontal: rootPaddingH,
   alignItems: "stretch"
 }));
-var StyledStack = styled51(View)({
+var StyledStack = styled52(View)({
   position: "relative",
   width: "100%"
 });
@@ -10357,14 +10438,14 @@ var StackedCard = ({
   onDismiss,
   isBackfill
 }) => {
-  const isBackfillRef = React66.useRef(isBackfill);
+  const isBackfillRef = React65.useRef(isBackfill);
   const wasBackfill = isBackfillRef.current;
   const depthSV = useSharedValue(wasBackfill ? depth + 1 : depth);
   const opacitySV = useSharedValue(wasBackfill ? 0 : 1);
-  React66.useEffect(() => {
+  React65.useEffect(() => {
     depthSV.value = withSpring(depth, SPRING_CONFIG);
   }, [depth, depthSV]);
-  React66.useEffect(() => {
+  React65.useEffect(() => {
     if (wasBackfill) opacitySV.value = withSpring(1, SPRING_CONFIG);
   }, []);
   const depthStyle = useAnimatedStyle(() => ({
@@ -10376,7 +10457,7 @@ var StackedCard = ({
   }));
   const isFront = depth === 0;
   return /* @__PURE__ */ jsx(
-    Animated10.View,
+    Animated9.View,
     {
       entering: wasBackfill ? void 0 : CARD_ENTERING,
       exiting: CARD_EXITING,
@@ -10384,7 +10465,7 @@ var StackedCard = ({
       accessibilityElementsHidden: !isFront,
       importantForAccessibility: isFront ? "auto" : "no-hide-descendants",
       style: [CARD_BASE_STYLE, { zIndex: -depth }],
-      children: /* @__PURE__ */ jsx(Animated10.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Animated9.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
         Notification,
         {
           variant: "toast",
@@ -10396,13 +10477,13 @@ var StackedCard = ({
     }
   );
 };
-var StackedNotifications = React66.forwardRef((_a, ref) => {
+var StackedNotifications = React65.forwardRef((_a, ref) => {
   var _b = _a, { items, onDismiss, bottomOffset } = _b, rest = __objRest(_b, ["items", "onDismiss", "bottomOffset"]);
   const theme2 = useTheme();
   const { spacing } = theme2.tokens.semantics.dimensions;
-  const [dismissed, setDismissed] = React66.useState(/* @__PURE__ */ new Set());
+  const [dismissed, setDismissed] = React65.useState(/* @__PURE__ */ new Set());
   const idsKey = items.map((item) => item.id).join("|");
-  React66.useEffect(() => {
+  React65.useEffect(() => {
     setDismissed((prev) => {
       if (prev.size === 0) return prev;
       const present = new Set(items.map((item) => item.id));
@@ -10415,17 +10496,17 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
       return changed ? next : prev;
     });
   }, [idsKey]);
-  const activeItems = React66.useMemo(
+  const activeItems = React65.useMemo(
     () => items.filter((item) => !dismissed.has(item.id)),
     [items, dismissed]
   );
-  const layers = React66.useMemo(
+  const layers = React65.useMemo(
     () => activeItems.slice(-3).reverse(),
     [activeItems]
   );
-  const prevActiveIdsRef = React66.useRef(/* @__PURE__ */ new Set());
-  const prevLayerIdsRef = React66.useRef(/* @__PURE__ */ new Set());
-  const backfillIds = React66.useMemo(
+  const prevActiveIdsRef = React65.useRef(/* @__PURE__ */ new Set());
+  const prevLayerIdsRef = React65.useRef(/* @__PURE__ */ new Set());
+  const backfillIds = React65.useMemo(
     () => computeBackfillIds(
       layers,
       prevActiveIdsRef.current,
@@ -10433,7 +10514,7 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
     ),
     [layers]
   );
-  React66.useEffect(() => {
+  React65.useEffect(() => {
     prevActiveIdsRef.current = new Set(activeItems.map((item) => item.id));
     prevLayerIdsRef.current = new Set(layers.map((item) => item.id));
   }, [activeItems, layers]);
@@ -10445,15 +10526,15 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
     });
     onDismiss == null ? void 0 : onDismiss(id);
   };
-  const rootBottom = bottomOffset != null ? bottomOffset : parseTokenValue51(spacing.lg);
-  const peekStep = parseTokenValue51(spacing.xs);
+  const rootBottom = bottomOffset != null ? bottomOffset : parseTokenValue47(spacing.lg);
+  const peekStep = parseTokenValue47(spacing.xs);
   return /* @__PURE__ */ jsx(
-    StyledRoot15,
+    StyledRoot16,
     __spreadProps(__spreadValues({
       ref,
       pointerEvents: "box-none",
       rootBottom,
-      rootPaddingH: parseTokenValue51(spacing.md)
+      rootPaddingH: parseTokenValue47(spacing.md)
     }, rest), {
       children: /* @__PURE__ */ jsx(StyledStack, { children: layers.map((item, depth) => /* @__PURE__ */ jsx(
         StackedCard,
@@ -10470,16 +10551,16 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
   );
 });
 StackedNotifications.displayName = "StackedNotifications";
-var parseTokenValue52 = (value) => parseFloat(value);
+var parseTokenValue48 = (value) => parseFloat(value);
 var NIB_OFFSET = {
   left: 24,
   middle: 146,
   right: 268
 };
-var Container2 = styled51(View)(({ $width }) => ({
+var Container2 = styled52(View)(({ $width }) => ({
   width: $width
 }));
-var StyledBody = styled51(View)(
+var StyledBody = styled52(View)(
   ({
     bgColor,
     borderColor,
@@ -10578,7 +10659,7 @@ function NibTriangle({
     }
   );
 }
-var Tooltip = React66.forwardRef(
+var Tooltip = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { text, alignment = "middle", position = "bottom", children } = _b, props = __objRest(_b, ["text", "alignment", "position", "children"]);
     const theme2 = useTheme();
@@ -10592,9 +10673,9 @@ var Tooltip = React66.forwardRef(
       width
     } = theme2.tokens.components.tooltip;
     const [open, setOpen] = useState(false);
-    const tooltipWidth = parseTokenValue52(width);
-    const nibWidth = parseTokenValue52(nibToken.width);
-    const nibHeight = parseTokenValue52(nibToken.height);
+    const tooltipWidth = parseTokenValue48(width);
+    const nibWidth = parseTokenValue48(nibToken.width);
+    const nibHeight = parseTokenValue48(nibToken.height);
     const nibHalfWidth = nibWidth / 2;
     const nibOuterHeight = nibHeight + 1;
     const nibX = NIB_OFFSET[alignment];
@@ -10603,11 +10684,11 @@ var Tooltip = React66.forwardRef(
     const side = position === "bottom" ? "top" : "bottom";
     const bgColor = colour.background.default;
     const borderColor = colour.border.default;
-    const borderW = parseTokenValue52(borderWidth.default);
-    const borderR = parseTokenValue52(borderRadius.default);
-    const topPad = parseTokenValue52(spacing.topPadding);
-    const bottomPad = parseTokenValue52(spacing.bottomPadding);
-    const horizontalPad = parseTokenValue52(spacing.horizontalPading);
+    const borderW = parseTokenValue48(borderWidth.default);
+    const borderR = parseTokenValue48(borderRadius.default);
+    const topPad = parseTokenValue48(spacing.topPadding);
+    const bottomPad = parseTokenValue48(spacing.bottomPadding);
+    const horizontalPad = parseTokenValue48(spacing.horizontalPading);
     const nibRow = /* @__PURE__ */ jsx(View, { style: { height: nibOuterHeight, position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsx(
       NibTriangle,
       {
@@ -10666,8 +10747,8 @@ var Tooltip = React66.forwardRef(
       return bubble;
     }
     if (Platform.OS === "web") {
-      const child = React66.isValidElement(children) ? children : null;
-      const trigger = child ? React66.cloneElement(child, {
+      const child = React65.isValidElement(children) ? children : null;
+      const trigger = child ? React65.cloneElement(child, {
         onPress: () => {
           var _a2, _b2;
           (_b2 = (_a2 = child.props).onPress) == null ? void 0 : _b2.call(_a2);
@@ -10708,18 +10789,18 @@ var Tooltip = React66.forwardRef(
   }
 );
 Tooltip.displayName = "Tooltip";
-var parseTokenValue53 = (value) => parseFloat(value);
-var Row = styled51(Pressable)(({ theme: theme2 }) => {
+var parseTokenValue49 = (value) => parseFloat(value);
+var Row = styled52(Pressable)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   return {
     width: "100%",
     alignItems: "flex-start",
     justifyContent: "center",
-    paddingVertical: parseTokenValue53(spacing.md),
-    paddingHorizontal: parseTokenValue53(spacing.md)
+    paddingVertical: parseTokenValue49(spacing.md),
+    paddingHorizontal: parseTokenValue49(spacing.md)
   };
 });
-var MenuItem = React66.forwardRef((_a, ref) => {
+var MenuItem = React65.forwardRef((_a, ref) => {
   var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
   const theme2 = useTheme();
   const { colour, typography } = theme2.tokens.semantics;
@@ -10742,33 +10823,33 @@ var MenuItem = React66.forwardRef((_a, ref) => {
   ] });
 });
 MenuItem.displayName = "Menu.Item";
-var parseTokenValue54 = (value) => parseFloat(value);
-var DismissLayer = styled51(Pressable)({
+var parseTokenValue50 = (value) => parseFloat(value);
+var DismissLayer = styled52(Pressable)({
   position: "absolute",
   top: 0,
   left: 0,
   right: 0,
   bottom: 0
 });
-var Anchor = styled51(View)({
+var Anchor = styled52(View)({
   position: "absolute"
 });
-var Card = styled51(Pressable)(({ theme: theme2, width }) => {
+var Card = styled52(Pressable)(({ theme: theme2, width }) => {
   const { borderRadius } = theme2.tokens.semantics.dimensions;
   const { shadow, background } = theme2.tokens.semantics.colour;
   return {
     width,
-    borderRadius: parseTokenValue54(borderRadius.md),
+    borderRadius: parseTokenValue50(borderRadius.md),
     overflow: "hidden",
     backgroundColor: background.surface.default,
     // Shadow token colour carries its own alpha, so opacity stays at 1.
     shadowColor: shadow.md.color,
     shadowOffset: {
-      width: parseTokenValue54(shadow.md.offsetX),
-      height: parseTokenValue54(shadow.md.offsetY)
+      width: parseTokenValue50(shadow.md.offsetX),
+      height: parseTokenValue50(shadow.md.offsetY)
     },
     shadowOpacity: 1,
-    shadowRadius: parseTokenValue54(shadow.md.blur),
+    shadowRadius: parseTokenValue50(shadow.md.blur),
     elevation: 8
   };
 });
@@ -10789,10 +10870,10 @@ var MenuRoot = ({
   if (anchor && anchor !== lastAnchor) setLastAnchor(anchor);
   const shownAnchor = anchor != null ? anchor : lastAnchor;
   const position = shownAnchor ? __spreadValues({
-    top: shownAnchor.y + shownAnchor.height + parseTokenValue54(spacing.xs)
+    top: shownAnchor.y + shownAnchor.height + parseTokenValue50(spacing.xs)
   }, align === "right" ? { right: windowWidth - (shownAnchor.x + shownAnchor.width) } : { left: shownAnchor.x }) : {
     top: anchorOffset,
-    [align]: parseTokenValue54(spacing.md)
+    [align]: parseTokenValue50(spacing.md)
   };
   return /* @__PURE__ */ jsxs(
     Modal,
@@ -10849,8 +10930,8 @@ var useMenuTrigger = () => {
     menuProps: { open: isOpen, onClose: close, anchor }
   };
 };
-var parseTokenValue55 = (value) => parseFloat(value);
-var StyledInsightRoot = styled51(View)(
+var parseTokenValue51 = (value) => parseFloat(value);
+var StyledInsightRoot = styled52(View)(
   ({
     rootGap,
     rootPaddingH,
@@ -10877,7 +10958,7 @@ var StyledInsightRoot = styled51(View)(
     minWidth: rootMinWidth
   })
 );
-var StyledInsightContent = styled51(View)(
+var StyledInsightContent = styled52(View)(
   ({ contentGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -10885,7 +10966,7 @@ var StyledInsightContent = styled51(View)(
     gap: contentGap
   })
 );
-var MessageCardInsight = React66.forwardRef(
+var MessageCardInsight = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "standalone", icon, illustration, title, children } = _b, rest = __objRest(_b, ["variant", "icon", "illustration", "title", "children"]);
     const theme2 = useTheme();
@@ -10894,26 +10975,26 @@ var MessageCardInsight = React66.forwardRef(
     const isSupporting = variant === "supporting";
     const supporting = insightCard.spacing.supporting;
     const standalone = insightCard.spacing.standalone;
-    const radiusStandalone = parseTokenValue55(
+    const radiusStandalone = parseTokenValue51(
       insightCard.borderRadius.standalone.default
     );
-    const radiusSupporting = parseTokenValue55(
+    const radiusSupporting = parseTokenValue51(
       insightCard.borderRadius.supporting.bottom
     );
     return /* @__PURE__ */ jsxs(
       StyledInsightRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue55(
+        rootGap: parseTokenValue51(
           isSupporting ? supporting.gap : standalone.gap
         ),
-        rootPaddingH: parseTokenValue55(
+        rootPaddingH: parseTokenValue51(
           isSupporting ? semanticSpacing.md : standalone.horizontalPadding
         ),
-        rootPaddingTop: parseTokenValue55(
+        rootPaddingTop: parseTokenValue51(
           isSupporting ? supporting.topPadding : standalone.verticalPadding
         ),
-        rootPaddingBottom: parseTokenValue55(
+        rootPaddingBottom: parseTokenValue51(
           isSupporting ? supporting.bottomPadding : standalone.verticalPadding
         ),
         rootBorderTopLeftRadius: isSupporting ? 0 : radiusStandalone,
@@ -10921,7 +11002,7 @@ var MessageCardInsight = React66.forwardRef(
         rootBorderBottomLeftRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBorderBottomRightRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBgColor: insightCard.colour.background.default,
-        rootMinWidth: parseTokenValue55(insightCard.size.minWidth),
+        rootMinWidth: parseTokenValue51(insightCard.size.minWidth),
         accessible: true,
         accessibilityRole: "summary"
       }, rest), {
@@ -10930,7 +11011,7 @@ var MessageCardInsight = React66.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledInsightContent,
             {
-              contentGap: parseTokenValue55(standalone.content.gap),
+              contentGap: parseTokenValue51(standalone.content.gap),
               children: [
                 title && /* @__PURE__ */ jsx(
                   Typography,
@@ -10957,7 +11038,7 @@ var MessageCardInsight = React66.forwardRef(
   }
 );
 MessageCardInsight.displayName = "MessageCard.Insight";
-var StyledBannerRoot = styled51(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
+var StyledBannerRoot = styled52(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
@@ -10965,7 +11046,7 @@ var StyledBannerRoot = styled51(View)(({ rootGap, rootPadding, rootBorderRadius,
   borderRadius: rootBorderRadius,
   backgroundColor: rootBgColor
 }));
-var StyledBannerImage = styled51(View)(({ imageRadius, imageBgColor }) => ({
+var StyledBannerImage = styled52(View)(({ imageRadius, imageBgColor }) => ({
   flexShrink: 0,
   width: 108,
   height: 108,
@@ -10973,14 +11054,14 @@ var StyledBannerImage = styled51(View)(({ imageRadius, imageBgColor }) => ({
   overflow: "hidden",
   backgroundColor: imageBgColor
 }));
-var StyledBannerIllustrationSlot = styled51(View)({
+var StyledBannerIllustrationSlot = styled52(View)({
   flexShrink: 0,
   width: 108,
   height: 108,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledBannerContents = styled51(View)(
+var StyledBannerContents = styled52(View)(
   ({ contentsGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -10990,13 +11071,13 @@ var StyledBannerContents = styled51(View)(
     minWidth: 0
   })
 );
-var StyledBannerCopy = styled51(View)(({ copyGap }) => ({
+var StyledBannerCopy = styled52(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var MessageCardBanner = React66.forwardRef(
+var MessageCardBanner = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       colourScheme = "primary",
@@ -11022,21 +11103,21 @@ var MessageCardBanner = React66.forwardRef(
       StyledBannerRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue55(dimensions3.spacing.md),
-        rootPadding: parseTokenValue55(dimensions3.spacing.md),
-        rootBorderRadius: parseTokenValue55(dimensions3.borderRadius.md),
+        rootGap: parseTokenValue51(dimensions3.spacing.md),
+        rootPadding: parseTokenValue51(dimensions3.spacing.md),
+        rootBorderRadius: parseTokenValue51(dimensions3.borderRadius.md),
         rootBgColor: bgColor,
         accessible: true,
         accessibilityRole: "summary"
       }, rest), {
         children: [
-          (media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React66.createElement(media.illustration, {
+          (media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React65.createElement(media.illustration, {
             width: 108,
             height: 108
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
             StyledBannerImage,
             {
-              imageRadius: parseTokenValue55(dimensions3.borderRadius.sm),
+              imageRadius: parseTokenValue51(dimensions3.borderRadius.sm),
               imageBgColor: colour.background.surface.secondary,
               children: /* @__PURE__ */ jsx(
                 Image,
@@ -11052,12 +11133,12 @@ var MessageCardBanner = React66.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledBannerContents,
             {
-              contentsGap: parseTokenValue55(dimensions3.spacing.xs),
+              contentsGap: parseTokenValue51(dimensions3.spacing.xs),
               children: [
                 /* @__PURE__ */ jsxs(
                   StyledBannerCopy,
                   {
-                    copyGap: parseTokenValue55(dimensions3.spacing["3xs"]),
+                    copyGap: parseTokenValue51(dimensions3.spacing["3xs"]),
                     children: [
                       title && /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),
                       /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children })
@@ -11088,7 +11169,7 @@ var MessageCard = {
   Insight: MessageCardInsight,
   Banner: MessageCardBanner
 };
-var parseTokenValue56 = (value) => parseFloat(value);
+var parseTokenValue52 = (value) => parseFloat(value);
 var slideEaseOut = Easing$1.out(Easing$1.quad);
 var MONTH_SLIDE_ENTERING = {
   forward: FadeInRight.duration(250).easing(slideEaseOut),
@@ -11129,14 +11210,14 @@ function defaultGetDateState(date) {
 function getDefaultMonthLabel(year, month, locale) {
   return format(new Date(year, month, 1), "MMMM yyyy", { locale });
 }
-var StyledContainer3 = styled51(View)(({ containerMaxWidth }) => ({
+var StyledContainer3 = styled52(View)(({ containerMaxWidth }) => ({
   flexDirection: "column",
   // 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 = styled51(View)(
+var StyledMonthHeader = styled52(View)(
   ({ headerGap, datesGap }) => ({
     flexDirection: "row",
     alignItems: "center",
@@ -11145,24 +11226,24 @@ var StyledMonthHeader = styled51(View)(
     marginBottom: datesGap
   })
 );
-var StyledWeekRow = styled51(View)(({ weekGap }) => ({
+var StyledWeekRow = styled52(View)(({ weekGap }) => ({
   flexDirection: "row",
   // Gap between the week-day header and the month header.
   marginBottom: weekGap
 }));
-var StyledWeekCell = styled51(View)({
+var StyledWeekCell = styled52(View)({
   flex: 1,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledDatesGrid = styled51(View)(({ rowGap }) => ({
+var StyledDatesGrid = styled52(View)(({ rowGap }) => ({
   flexDirection: "column",
   gap: rowGap
 }));
-var StyledDateRow = styled51(View)({
+var StyledDateRow = styled52(View)({
   flexDirection: "row"
 });
-var StyledDateCell = styled51(View)(
+var StyledDateCell = styled52(View)(
   ({ cellHeight }) => ({
     flex: 1,
     height: cellHeight,
@@ -11170,7 +11251,7 @@ var StyledDateCell = styled51(View)(
     justifyContent: "center"
   })
 );
-var StyledIndicator3 = styled51(View)(
+var StyledIndicator3 = styled52(View)(
   ({
     indicatorSize,
     indicatorBorderRadius,
@@ -11190,7 +11271,7 @@ var StyledIndicator3 = styled51(View)(
     justifyContent: "center"
   })
 );
-var DatePicker = React66.forwardRef(
+var DatePicker = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       year,
@@ -11252,17 +11333,17 @@ var DatePicker = React66.forwardRef(
     } = useMemo(
       () => ({
         // Gap between the week-day header and the month header.
-        weekGap: parseTokenValue56(datePicker.spacing.gap),
+        weekGap: parseTokenValue52(datePicker.spacing.gap),
         // Gap between the month header and the dates grid.
-        datesGap: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
-        containerMaxWidth: parseTokenValue56(dt.size.width) * 7,
-        headerGap: parseTokenValue56(datePicker.month.spacing.gap),
-        cellHeight: parseTokenValue56(dt.size.height),
-        indicatorSize: parseTokenValue56(dt.size.indicator),
-        indicatorBorderRadius: parseTokenValue56(dt.borderRadius.indicator),
-        selectedBorderWidth: parseTokenValue56(dt.borderWidth.indicator.selected),
-        disabledOpacity: parseTokenValue56(dt.opacity.disabled),
-        rowGap: parseTokenValue56(datePicker.dates.spacing.gap)
+        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),
+        indicatorSize: parseTokenValue52(dt.size.indicator),
+        indicatorBorderRadius: parseTokenValue52(dt.borderRadius.indicator),
+        selectedBorderWidth: parseTokenValue52(dt.borderWidth.indicator.selected),
+        disabledOpacity: parseTokenValue52(dt.opacity.disabled),
+        rowGap: parseTokenValue52(datePicker.dates.spacing.gap)
       }),
       [datePicker, dt, theme2]
     );
@@ -11422,7 +11503,7 @@ var DatePicker = React66.forwardRef(
             ) })
           ] }),
           /* @__PURE__ */ jsx(
-            Animated10.View,
+            Animated9.View,
             {
               entering: MONTH_SLIDE_ENTERING[slideDir],
               exiting: MONTH_SLIDE_EXITING[slideDir],
@@ -11540,26 +11621,26 @@ var buildPointerPath = (r) => {
     "Z"
   ].join(" ");
 };
-var parseTokenValue57 = (value) => parseFloat(value);
-var StyledRoot16 = styled51(View)(({ rootGap }) => ({
+var parseTokenValue53 = (value) => parseFloat(value);
+var StyledRoot17 = styled52(View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
   width: "100%"
 }));
-var StyledRow2 = styled51(View)(({ rowGap }) => ({
+var StyledRow2 = styled52(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: rowGap,
   width: "100%"
 }));
-var StyledItemStack = styled51(View)(({ stackGap }) => ({
+var StyledItemStack = styled52(View)(({ stackGap }) => ({
   flexDirection: "column",
   alignItems: "center",
   gap: stackGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledPictureButton = styled51(Pressable)(
+var StyledPictureButton = styled52(Pressable)(
   ({
     buttonBorderRadius,
     buttonBorderWidth,
@@ -11586,14 +11667,14 @@ var StyledPictureButton = styled51(Pressable)(
     overflow: "hidden"
   })
 );
-var StyledPointer = styled51(Svg72)(
+var StyledPointer = styled52(Svg72)(
   ({ pointerVisible }) => ({
     width: POINTER_WIDTH,
     height: POINTER_HEIGHT,
     opacity: pointerVisible ? 1 : 0
   })
 );
-var PictureSelector = React66.forwardRef(
+var PictureSelector = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -11620,7 +11701,7 @@ var PictureSelector = React66.forwardRef(
     const { pictureSelector } = theme2.tokens.components;
     const { pictureButton } = pictureSelector;
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React66.useState(defaultValue);
+    const [internalValue, setInternalValue] = React65.useState(defaultValue);
     const selectedValue = isControlled ? value : internalValue;
     const selectedItem = items.find((item) => item.value === selectedValue);
     const hasInsight = Boolean(
@@ -11630,24 +11711,24 @@ var PictureSelector = React66.forwardRef(
       if (!isControlled) setInternalValue(nextValue);
       onValueChange == null ? void 0 : onValueChange(nextValue);
     };
-    const rootGap = parseTokenValue57(pictureSelector.spacing.container.gap);
-    const rowGap = parseTokenValue57(pictureSelector.spacing.buttons.gap);
-    const stackGap = parseTokenValue57(pictureButton.spacing.container.gap);
-    const buttonPadding = parseTokenValue57(pictureButton.spacing.padding);
-    const buttonBorderRadius = parseTokenValue57(
+    const rootGap = parseTokenValue53(pictureSelector.spacing.container.gap);
+    const rowGap = parseTokenValue53(pictureSelector.spacing.buttons.gap);
+    const stackGap = parseTokenValue53(pictureButton.spacing.container.gap);
+    const buttonPadding = parseTokenValue53(pictureButton.spacing.padding);
+    const buttonBorderRadius = parseTokenValue53(
       pictureButton.borderRadius.default
     );
-    const borderWidthDefault = parseTokenValue57(
+    const borderWidthDefault = parseTokenValue53(
       pictureButton.borderWidth.default
     );
-    const borderWidthActive = parseTokenValue57(pictureButton.borderWidth.active);
+    const borderWidthActive = parseTokenValue53(pictureButton.borderWidth.active);
     const pointerPath = buildPointerPath(
-      parseTokenValue57(pictureButton.pointer.borderRadius.default)
+      parseTokenValue53(pictureButton.pointer.borderRadius.default)
     );
-    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue57(pictureButton.size.minWidth);
+    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue53(pictureButton.size.minWidth);
     const resolvedMinHeight = itemMinHeight != null ? itemMinHeight : resolvedMinWidth;
     return /* @__PURE__ */ jsxs(
-      StyledRoot16,
+      StyledRoot17,
       __spreadProps(__spreadValues({
         ref,
         rootGap,
@@ -11737,15 +11818,15 @@ var DEFAULT_UNIT_LABELS = {
   seconds: { singular: "sec", plural: "secs" }
 };
 var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
-var parseTokenValue58 = (value) => parseFloat(value);
+var parseTokenValue54 = (value) => parseFloat(value);
 var pad = (value) => String(Math.max(0, Math.floor(value))).padStart(2, "0");
-var StackedRoot = styled51(View)(({ rootGap }) => ({
+var StackedRoot = styled52(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "flex-start",
   gap: rootGap
 }));
-var StackedItem = styled51(View)(
+var StackedItem = styled52(View)(
   ({
     itemGap,
     itemVerticalPadding,
@@ -11763,7 +11844,7 @@ var StackedItem = styled51(View)(
     borderRadius: itemBorderRadius
   })
 );
-var StackedCountBox = styled51(View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
+var StackedCountBox = styled52(View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
   alignItems: "center",
   justifyContent: "center",
   // TODO: Add token — fixed count box dimensions are not yet tokenised.
@@ -11773,7 +11854,7 @@ var StackedCountBox = styled51(View)(({ countPaddingTop, countBgColor, countBord
   backgroundColor: countBgColor,
   borderRadius: countBorderRadius
 }));
-var InlineRoot = styled51(View)(
+var InlineRoot = styled52(View)(
   ({
     rootGap,
     rootVerticalPadding,
@@ -11793,18 +11874,18 @@ var InlineRoot = styled51(View)(
     overflow: "hidden"
   })
 );
-var InlineGroup = styled51(View)(({ groupGap }) => ({
+var InlineGroup = styled52(View)(({ groupGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-end",
   gap: groupGap
 }));
-var InlineCount = styled51(View)(({ countGap }) => ({
+var InlineCount = styled52(View)(({ countGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: countGap
 }));
-var Countdown = React66.forwardRef(
+var Countdown = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       layout = "stacked",
@@ -11867,28 +11948,28 @@ var Countdown = React66.forwardRef(
         InlineRoot,
         __spreadProps(__spreadValues({
           ref,
-          rootGap: parseTokenValue58(countdown.spacing.gap),
-          rootVerticalPadding: parseTokenValue58(
+          rootGap: parseTokenValue54(countdown.spacing.gap),
+          rootVerticalPadding: parseTokenValue54(
             countdown.spacing.verticalPadding
           ),
-          rootHorizontalPadding: parseTokenValue58(
+          rootHorizontalPadding: parseTokenValue54(
             countdown.spacing.horizontalPadding
           ),
           rootBgColor: countdown.colour.background.default,
-          rootBorderRadius: parseTokenValue58(countdown.borderRadius.default)
+          rootBorderRadius: parseTokenValue54(countdown.borderRadius.default)
         }, rest), {
           children: [
             label != null && /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", size: "md", color: "primary", children: label }),
             /* @__PURE__ */ jsx(
               InlineGroup,
               {
-                groupGap: parseTokenValue58(countdown.countdownGroup.spacing.gap),
-                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
+                groupGap: parseTokenValue54(countdown.countdownGroup.spacing.gap),
+                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
                   index > 0 && colon(`colon-${unit.key}`),
                   /* @__PURE__ */ jsxs(
                     InlineCount,
                     {
-                      countGap: parseTokenValue58(countdown.count.spacing.gap),
+                      countGap: parseTokenValue54(countdown.count.spacing.gap),
                       children: [
                         /* @__PURE__ */ jsx(
                           Typography,
@@ -11924,33 +12005,33 @@ var Countdown = React66.forwardRef(
       StackedRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue58(countdown.spacing.gap)
+        rootGap: parseTokenValue54(countdown.spacing.gap)
       }, rest), {
-        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
+        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
           index > 0 && colon(`colon-${unit.key}`),
           /* @__PURE__ */ jsxs(
             StackedItem,
             {
-              itemGap: parseTokenValue58(countdownItem.spacing.gap),
-              itemVerticalPadding: parseTokenValue58(
+              itemGap: parseTokenValue54(countdownItem.spacing.gap),
+              itemVerticalPadding: parseTokenValue54(
                 countdownItem.spacing.verticalPadding
               ),
-              itemHorizontalPadding: parseTokenValue58(
+              itemHorizontalPadding: parseTokenValue54(
                 countdownItem.spacing.horizontalPadding
               ),
               itemBgColor: countdownItem.colour.background.default,
-              itemBorderRadius: parseTokenValue58(
+              itemBorderRadius: parseTokenValue54(
                 countdownItem.borderRadius.default
               ),
               children: [
                 /* @__PURE__ */ jsx(
                   StackedCountBox,
                   {
-                    countPaddingTop: parseTokenValue58(
+                    countPaddingTop: parseTokenValue54(
                       countdownItem.count.spacing.paddingTop
                     ),
                     countBgColor: countdownItem.count.colour.background.default,
-                    countBorderRadius: parseTokenValue58(
+                    countBorderRadius: parseTokenValue54(
                       countdownItem.count.borderRadius.default
                     ),
                     children: /* @__PURE__ */ jsx(
@@ -11980,41 +12061,41 @@ var Countdown = React66.forwardRef(
   }
 );
 Countdown.displayName = "Countdown";
-var parseTokenValue59 = (value) => {
+var parseTokenValue55 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
+var BadgeContainer = styled52(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   return {
     display: "flex",
     flexDirection: "row",
-    gap: parseTokenValue59(spacing["2xs"]),
+    gap: parseTokenValue55(spacing["2xs"]),
     alignItems: "center",
     justifyContent: "center",
-    height: parseTokenValue59(sizing["2xl"]),
-    paddingRight: parseTokenValue59(spacing.xs),
+    height: parseTokenValue55(sizing["2xl"]),
+    paddingRight: parseTokenValue55(spacing.xs),
     backgroundColor: colour.background.container.brand,
-    borderTopRightRadius: parseTokenValue59(borderRadius.xs),
-    borderBottomRightRadius: parseTokenValue59(borderRadius.xs)
+    borderTopRightRadius: parseTokenValue55(borderRadius.xs),
+    borderBottomRightRadius: parseTokenValue55(borderRadius.xs)
   };
 });
-var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
+var BadgeIcon = styled52(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const sizing = theme2.tokens.semantics.dimensions.sizing;
   return {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: parseTokenValue59(sizing.md),
-    height: parseTokenValue59(sizing.md),
-    marginLeft: parseTokenValue59(spacing.xs),
+    width: parseTokenValue55(sizing.md),
+    height: parseTokenValue55(sizing.md),
+    marginLeft: parseTokenValue55(spacing.xs),
     flexShrink: 0
   };
 });
-var Badge2 = React66.forwardRef(
+var Badge2 = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { icon, text } = _b, rest = __objRest(_b, ["icon", "text"]);
     return /* @__PURE__ */ jsxs(BadgeContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
@@ -12024,7 +12105,7 @@ var Badge2 = React66.forwardRef(
   }
 );
 Badge2.displayName = "ProductListingCard.Badge";
-var StyledGrid = styled51(View)(({ theme: theme2 }) => {
+var StyledGrid = styled52(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "grid",
@@ -12032,7 +12113,7 @@ var StyledGrid = styled51(View)(({ theme: theme2 }) => {
     "grid-row-gap": spacing.xl
   };
 });
-var Grid = React66.forwardRef(
+var Grid = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, xs = 1, md = 2, lg = 3 } = _b, rest = __objRest(_b, ["children", "xs", "md", "lg"]);
     const { width } = useWindowDimensions();
@@ -12059,69 +12140,69 @@ var Grid = React66.forwardRef(
   }
 );
 Grid.displayName = "ProductListingCard.Grid";
-var parseTokenValue60 = (value) => {
+var parseTokenValue56 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var StyledRoot17 = styled51(Pressable)(({ theme: theme2 }) => {
+var StyledRoot18 = styled52(Pressable)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue60(spacing.md),
+    gap: parseTokenValue56(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
 });
-var ImageContainer = styled51(View)(({ theme: theme2 }) => ({
+var ImageContainer = styled52(View)(({ theme: theme2 }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
   overflow: "hidden",
-  borderRadius: parseTokenValue60(
+  borderRadius: parseTokenValue56(
     theme2.tokens.semantics.dimensions.borderRadius.md
   )
 }));
-var StyledImage2 = styled51(Image)({
+var StyledImage2 = styled52(Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => ({
+var BadgeContainer2 = styled52(View)(({ theme: theme2 }) => ({
   position: "absolute",
-  top: parseTokenValue60(theme2.tokens.semantics.dimensions.spacing.md),
+  top: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
   left: 0
 }));
-var ContentContainer = styled51(View)(({ theme: theme2 }) => {
+var ContentContainer = styled52(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue60(spacing.md),
+    gap: parseTokenValue56(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
 });
-var DetailsContainer = styled51(View)({
+var DetailsContainer = styled52(View)({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   width: "100%"
 });
-var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
+var CategoryWrapper = styled52(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
-    marginBottom: parseTokenValue60(spacing["3xs"])
+    marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled51(View)({
+var TitleContainer = styled52(View)({
   display: "flex",
   flexDirection: "row",
   width: "100%",
   // 6px below the title to match Figma (4px title bottom padding + 2px gap).
   marginBottom: 6
 });
-var PricingContainer = styled51(View)(({ theme: theme2 }) => {
+var PricingContainer = styled52(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -12131,7 +12212,7 @@ var PricingContainer = styled51(View)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var _ProductListingCard = React66.forwardRef(
+var _ProductListingCard = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       image,
@@ -12164,7 +12245,7 @@ var _ProductListingCard = React66.forwardRef(
       "showPrice",
       "onPress"
     ]);
-    return /* @__PURE__ */ jsxs(StyledRoot17, __spreadProps(__spreadValues({ ref, onPress }, rest), { children: [
+    return /* @__PURE__ */ jsxs(StyledRoot18, __spreadProps(__spreadValues({ ref, onPress }, rest), { children: [
       /* @__PURE__ */ jsxs(ImageContainer, { children: [
         image && /* @__PURE__ */ jsx(View, { style: { flex: 1, width: "100%", height: "100%" }, children: typeof image === "string" ? /* @__PURE__ */ jsx(
           StyledImage2,
@@ -12173,7 +12254,7 @@ var _ProductListingCard = React66.forwardRef(
             accessibilityLabel: imageAlt,
             accessible: true
           }
-        ) : React66.isValidElement(image) ? image : /* @__PURE__ */ jsx(
+        ) : React65.isValidElement(image) ? image : /* @__PURE__ */ jsx(
           StyledImage2,
           {
             source: image,
@@ -12211,7 +12292,7 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled51(View, {
+var StyledCardContainer = styled52(View, {
   shouldForwardProp: (prop) => prop !== "showBanner"
 })(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
@@ -12242,7 +12323,7 @@ var StyledCardContainer = styled51(View, {
     flex: 1
   };
 });
-var StyledImage3 = styled51(View)(({ theme: theme2, imageBackgroundColor, thumbnailWidth = 148 }) => ({
+var StyledImage3 = styled52(View)(({ theme: theme2, imageBackgroundColor, thumbnailWidth = 148 }) => ({
   flexShrink: 0,
   backgroundColor: imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
   overflow: "hidden",
@@ -12252,7 +12333,7 @@ var StyledImage3 = styled51(View)(({ theme: theme2, imageBackgroundColor, thumbn
   minHeight: thumbnailWidth,
   position: "relative"
 }));
-var StyledBadgeOverlay = styled51(View)(({ theme: theme2 }) => {
+var StyledBadgeOverlay = styled52(View)(({ theme: theme2 }) => {
   const offset = parseTokenValue9(
     theme2.tokens.semantics.dimensions.spacing["2xs"]
   );
@@ -12263,7 +12344,7 @@ var StyledBadgeOverlay = styled51(View)(({ theme: theme2 }) => {
     zIndex: 2
   };
 });
-var StyledContentArea = styled51(View)(({ theme: theme2 }) => {
+var StyledContentArea = styled52(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   const paddingValue = parseTokenValue9(spacing.md);
   return {
@@ -12274,10 +12355,10 @@ var StyledContentArea = styled51(View)(({ theme: theme2 }) => {
     justifyContent: "space-between"
   };
 });
-var StyledTextContainer = styled51(View)(() => ({
+var StyledTextContainer = styled52(View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled51(View)(({ theme: theme2 }) => {
+var StyledBannerWrapper = styled52(View)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const radiusMd = parseTokenValue9(borderRadius.md);
   const spacingMd = parseTokenValue9(spacing.md);
@@ -12291,13 +12372,13 @@ var StyledBannerWrapper = styled51(View)(({ theme: theme2 }) => {
     paddingBottom: spacingMd
   };
 });
-var StyledRootWrapper = styled51(View)(() => {
+var StyledRootWrapper = styled52(View)(() => {
   return {
     flexDirection: "column",
     width: "100%"
   };
 });
-var StyledNotification = styled51(Notification)(({ theme: theme2 }) => {
+var StyledNotification = styled52(Notification)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const spacingMd = parseTokenValue9(spacing.md);
   const radiusMd = parseTokenValue9(borderRadius.md);
@@ -12314,7 +12395,7 @@ var StyledNotification = styled51(Notification)(({ theme: theme2 }) => {
     borderBottomRightRadius: radiusMd
   };
 });
-var StyledNoneBanner = styled51(View)(({ theme: theme2 }) => {
+var StyledNoneBanner = styled52(View)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   const spacingMd = parseTokenValue9(spacing.md);
@@ -12330,7 +12411,7 @@ var StyledNoneBanner = styled51(View)(({ theme: theme2 }) => {
     borderBottomRightRadius: radiusMd
   };
 });
-var ProductDisplayCard = React66.forwardRef(
+var ProductDisplayCard = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       title,
@@ -12470,9 +12551,9 @@ var ProductDisplayCard = React66.forwardRef(
   }
 );
 ProductDisplayCard.displayName = "ProductDisplayCard";
-var TabNavigationContext = React66.createContext(void 0);
+var TabNavigationContext = React65.createContext(void 0);
 var useTabNavigationContext = () => {
-  const context = React66.useContext(TabNavigationContext);
+  const context = React65.useContext(TabNavigationContext);
   if (!context) {
     throw new Error(
       "TabNavigation.List, TabNavigation.Tab and TabNavigation.Panel must be used within a TabNavigation component."
@@ -12480,13 +12561,13 @@ var useTabNavigationContext = () => {
   }
   return context;
 };
-var parseTokenValue61 = (value) => parseFloat(value);
-var StyledFixedList = styled51(View)({
+var parseTokenValue57 = (value) => parseFloat(value);
+var StyledFixedList = styled52(View)({
   flexDirection: "row",
   alignItems: "stretch",
   width: "100%"
 });
-var StyledTab = styled51(Pressable)(
+var StyledTab = styled52(Pressable)(
   ({
     tabHeight,
     tabMinWidth,
@@ -12515,7 +12596,7 @@ var StyledTab = styled51(Pressable)(
     borderBottomColor: tabBorderColor
   }, tabFlex !== void 0 ? { flex: tabFlex } : { flexShrink: 0 })
 );
-var TabNavigationList = React66.forwardRef(
+var TabNavigationList = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const { layout } = useTabNavigationContext();
@@ -12534,7 +12615,7 @@ var TabNavigationList = React66.forwardRef(
   }
 );
 TabNavigationList.displayName = "TabNavigation.List";
-var TabNavigationTab = React66.forwardRef(
+var TabNavigationTab = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, disabled = false, icon, avatar, children } = _b, rest = __objRest(_b, ["value", "disabled", "icon", "avatar", "children"]);
     const { layout } = useTabNavigationContext();
@@ -12550,13 +12631,13 @@ var TabNavigationTab = React66.forwardRef(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
-        tabHeight: parseTokenValue61(tabitem.size.height),
-        tabMinWidth: parseTokenValue61(tabitem.size.minWidth),
-        tabPaddingTop: parseTokenValue61(spacing.topPadding),
-        tabPaddingBottom: parseTokenValue61(spacing.bottomPadding),
-        tabPaddingHorizontal: parseTokenValue61(spacing.horizontalPadding),
-        tabGap: parseTokenValue61(spacing.gap),
-        tabBorderWidth: parseTokenValue61(borderWidth.default),
+        tabHeight: parseTokenValue57(tabitem.size.height),
+        tabMinWidth: parseTokenValue57(tabitem.size.minWidth),
+        tabPaddingTop: parseTokenValue57(spacing.topPadding),
+        tabPaddingBottom: parseTokenValue57(spacing.bottomPadding),
+        tabPaddingHorizontal: parseTokenValue57(spacing.horizontalPadding),
+        tabGap: parseTokenValue57(spacing.gap),
+        tabBorderWidth: parseTokenValue57(borderWidth.default),
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
@@ -12570,7 +12651,7 @@ var TabNavigationTab = React66.forwardRef(
   }
 );
 TabNavigationTab.displayName = "TabNavigation.Tab";
-var TabNavigationPanel = React66.forwardRef(
+var TabNavigationPanel = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, children } = _b, rest = __objRest(_b, ["value", "children"]);
     const { animation } = useTabNavigationContext();
@@ -12578,7 +12659,7 @@ var TabNavigationPanel = React66.forwardRef(
   }
 );
 TabNavigationPanel.displayName = "TabNavigation.Panel";
-var TabNavigationRoot = React66.forwardRef(
+var TabNavigationRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -12596,11 +12677,11 @@ var TabNavigationRoot = React66.forwardRef(
       "children"
     ]);
     const isControlled = typeof value === "string";
-    const [uncontrolledValue, setUncontrolledValue] = React66.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
       () => defaultValue != null ? defaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleValueChange = React66.useCallback(
+    const handleValueChange = React65.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -12609,7 +12690,7 @@ var TabNavigationRoot = React66.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    const contextValue = React66.useMemo(
+    const contextValue = React65.useMemo(
       () => ({ layout, animation }),
       [layout, animation]
     );
@@ -12637,7 +12718,7 @@ var TabNavigation = Object.assign(TabNavigationRoot, {
   Tab: TabNavigationTab,
   Panel: TabNavigationPanel
 });
-var parseTokenValue62 = (value) => parseFloat(value);
+var parseTokenValue58 = (value) => parseFloat(value);
 var ICON_BUTTON_CONFIG = {
   chevronUp: { icon: KeyboardArrowUp_default, defaultVariant: "filled" },
   chevronRight: { icon: KeyboardArrowRight_default, defaultVariant: "filled" },
@@ -12657,10 +12738,10 @@ var ShineOverlay = ({
   highlight
 }) => {
   const reducedMotion = useReducedMotion();
-  const [width, setWidth] = React66.useState(0);
+  const [width, setWidth] = React65.useState(0);
   const progress = useSharedValue(0);
   const bandWidth = width * SHINE_BAND_RATIO;
-  React66.useEffect(() => {
+  React65.useEffect(() => {
     if (reducedMotion || !width) return;
     progress.value = withDelay(
       ANIMATION_DELAY,
@@ -12697,7 +12778,7 @@ var ShineOverlay = ({
         { borderRadius: radius, overflow: "hidden" }
       ],
       children: width > 0 && /* @__PURE__ */ jsx(
-        Animated10.View,
+        Animated9.View,
         {
           style: [
             { position: "absolute", top: 0, bottom: 0, width: bandWidth },
@@ -12728,7 +12809,7 @@ var createNudgingIcon = (IconComponent, axis, direction) => {
   const NudgingIcon = (props) => {
     const reducedMotion = useReducedMotion();
     const offset = useSharedValue(0);
-    React66.useEffect(() => {
+    React65.useEffect(() => {
       if (reducedMotion) return;
       const step = (to) => withTiming(to, {
         duration: NUDGE_STEP,
@@ -12752,7 +12833,7 @@ var createNudgingIcon = (IconComponent, axis, direction) => {
     const nudgeStyle = useAnimatedStyle(
       () => axis === "translateX" ? { transform: [{ translateX: offset.value }] } : { transform: [{ translateY: offset.value }] }
     );
-    return /* @__PURE__ */ jsx(Animated10.View, { style: nudgeStyle, children: /* @__PURE__ */ jsx(IconComponent, __spreadValues({}, props)) });
+    return /* @__PURE__ */ jsx(Animated9.View, { style: nudgeStyle, children: /* @__PURE__ */ jsx(IconComponent, __spreadValues({}, props)) });
   };
   NudgingIcon.displayName = `Nudging(${(_a = IconComponent.displayName) != null ? _a : "Icon"})`;
   return NudgingIcon;
@@ -12761,7 +12842,7 @@ var NUDGE_ICONS = {
   chevronUp: createNudgingIcon(KeyboardArrowUp_default, "translateY", -1),
   chevronRight: createNudgingIcon(KeyboardArrowRight_default, "translateX", 1)
 };
-var StyledRoot18 = styled51(View)(
+var StyledRoot19 = styled52(View)(
   ({
     rootGap,
     rootPaddingH,
@@ -12785,7 +12866,7 @@ var StyledRoot18 = styled51(View)(
     boxShadow: rootBoxShadow
   })
 );
-var StyledIconContainer = styled51(View)(({ containerSize, containerRadius, containerBgColor }) => ({
+var StyledIconContainer = styled52(View)(({ containerSize, containerRadius, containerBgColor }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
@@ -12794,13 +12875,13 @@ var StyledIconContainer = styled51(View)(({ containerSize, containerRadius, cont
   borderRadius: containerRadius,
   backgroundColor: containerBgColor
 }));
-var StyledContent3 = styled51(View)({
+var StyledContent3 = styled52(View)({
   flex: 1,
   minWidth: 0,
   alignItems: "flex-start",
   justifyContent: "center"
 });
-var FloatingActionButton = React66.forwardRef(
+var FloatingActionButton = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
@@ -12843,22 +12924,22 @@ var FloatingActionButton = React66.forwardRef(
       }
     );
     return /* @__PURE__ */ jsxs(
-      StyledRoot18,
+      StyledRoot19,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue62(floatingActionButton.spacing.gap),
-        rootPaddingH: parseTokenValue62(
+        rootGap: parseTokenValue58(floatingActionButton.spacing.gap),
+        rootPaddingH: parseTokenValue58(
           floatingActionButton.spacing.horizontalPadding
         ),
-        rootPaddingV: parseTokenValue62(
+        rootPaddingV: parseTokenValue58(
           floatingActionButton.spacing.verticalPadding
         ),
         rootBgColor: floatingActionButton.colour.background[variant],
-        rootBorderWidth: parseTokenValue62(
+        rootBorderWidth: parseTokenValue58(
           floatingActionButton.borderWidth.default
         ),
         rootBorderColor: floatingActionButton.colour.border[variant],
-        rootBorderRadius: parseTokenValue62(
+        rootBorderRadius: parseTokenValue58(
           floatingActionButton.borderRadius.default
         ),
         rootBoxShadow: `${shadow.md.offsetX} ${shadow.md.offsetY} ${shadow.md.blur} ${shadow.md.spread} ${shadow.md.color}`
@@ -12867,10 +12948,10 @@ var FloatingActionButton = React66.forwardRef(
           /* @__PURE__ */ jsx(
             StyledIconContainer,
             {
-              containerSize: parseTokenValue62(
+              containerSize: parseTokenValue58(
                 theme2.tokens.primitives.dimension.sizing["44"]
               ),
-              containerRadius: parseTokenValue62(dimensions3.borderRadius.round),
+              containerRadius: parseTokenValue58(dimensions3.borderRadius.round),
               containerBgColor: variant === "secondary" ? colour.background.container.secondary : colour.background.container.default,
               children: /* @__PURE__ */ jsx(Icon, { icon, size: "xl", colour: "primary" })
             }
@@ -12893,7 +12974,7 @@ var FloatingActionButton = React66.forwardRef(
           animation === "shine" && /* @__PURE__ */ jsx(
             ShineOverlay,
             {
-              radius: parseTokenValue62(floatingActionButton.borderRadius.default),
+              radius: parseTokenValue58(floatingActionButton.borderRadius.default),
               highlight: theme2.tokens.primitives.colour.system.neutral["1"]
             }
           )
@@ -12903,15 +12984,15 @@ var FloatingActionButton = React66.forwardRef(
   }
 );
 FloatingActionButton.displayName = "FloatingActionButton";
-var NavigationHeaderContext = React66.createContext({ surface: "brand" });
-var useNavigationHeaderContext = () => React66.useContext(NavigationHeaderContext);
+var NavigationHeaderContext = React65.createContext({ surface: "brand" });
+var useNavigationHeaderContext = () => React65.useContext(NavigationHeaderContext);
 var getButtonDefaults = ({
   surface
 }) => surface === "brand" ? { variant: "filled", colour: "tertiary" } : { variant: "outlined", colour: "primary" };
 var getIconButtonColour = ({
   surface
 }) => surface === "brand" ? "tertiary" : "secondary";
-var NavigationHeaderButton = React66.forwardRef((_a, ref) => {
+var NavigationHeaderButton = React65.forwardRef((_a, ref) => {
   var _b = _a, { variant, colour } = _b, props = __objRest(_b, ["variant", "colour"]);
   const defaults = getButtonDefaults(useNavigationHeaderContext());
   return /* @__PURE__ */ jsx(
@@ -12925,7 +13006,7 @@ var NavigationHeaderButton = React66.forwardRef((_a, ref) => {
   );
 });
 NavigationHeaderButton.displayName = "NavigationHeader.Button";
-var NavigationHeaderIconButton = React66.forwardRef((_a, ref) => {
+var NavigationHeaderIconButton = React65.forwardRef((_a, ref) => {
   var _b = _a, { colour } = _b, props = __objRest(_b, ["colour"]);
   const context = useNavigationHeaderContext();
   return /* @__PURE__ */ jsx(
@@ -12938,7 +13019,7 @@ var NavigationHeaderIconButton = React66.forwardRef((_a, ref) => {
   );
 });
 NavigationHeaderIconButton.displayName = "NavigationHeader.IconButton";
-var parseTokenValue63 = (value) => parseFloat(value);
+var parseTokenValue59 = (value) => parseFloat(value);
 var getSurfaceColour = (theme2, surface) => {
   const { navigationHeader } = theme2.tokens.components;
   const { background } = theme2.tokens.semantics.colour;
@@ -12948,7 +13029,7 @@ var getSurfaceColour = (theme2, surface) => {
     plain: background.surface.default
   }[surface];
 };
-var StyledNavContainer = styled51(View)(
+var StyledNavContainer = styled52(View)(
   ({
     containerPaddingTop,
     containerPaddingV,
@@ -12965,7 +13046,7 @@ var StyledNavContainer = styled51(View)(
     backgroundColor: containerBgColor
   })
 );
-var StyledTitleGroup = styled51(View)(({ titleGroupGap, titleGroupMinHeight }) => ({
+var StyledTitleGroup = styled52(View)(({ titleGroupGap, titleGroupMinHeight }) => ({
   flex: 1,
   flexDirection: "row",
   alignItems: "center",
@@ -12973,11 +13054,11 @@ var StyledTitleGroup = styled51(View)(({ titleGroupGap, titleGroupMinHeight }) =
   minHeight: titleGroupMinHeight,
   gap: titleGroupGap
 }));
-var StyledTitle = styled51(View)({
+var StyledTitle = styled52(View)({
   flex: 1,
   minWidth: 0
 });
-var StyledActionGroup = styled51(View)(
+var StyledActionGroup = styled52(View)(
   ({ actionGroupGap }) => ({
     flexDirection: "row",
     alignItems: "center",
@@ -12985,7 +13066,7 @@ var StyledActionGroup = styled51(View)(
     gap: actionGroupGap
   })
 );
-var StyledRadiusPips = styled51(View)({
+var StyledRadiusPips = styled52(View)({
   flexDirection: "row",
   justifyContent: "space-between"
 });
@@ -13012,7 +13093,7 @@ var RadiusPips = ({ radius, colour }) => /* @__PURE__ */ jsxs(
     ]
   }
 );
-var NavigationHeaderRoot = React66.forwardRef(
+var NavigationHeaderRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       title,
@@ -13038,7 +13119,7 @@ var NavigationHeaderRoot = React66.forwardRef(
     const { navigationHeader, buttons } = theme2.tokens.components;
     const { spacing } = navigationHeader;
     const surfaceColour = getSurfaceColour(theme2, surface);
-    const contextValue = React66.useMemo(
+    const contextValue = React65.useMemo(
       () => ({ surface }),
       [surface]
     );
@@ -13047,20 +13128,20 @@ var NavigationHeaderRoot = React66.forwardRef(
         StyledNavContainer,
         {
           containerPaddingTop: safeAreaTop ? top : 0,
-          containerPaddingV: parseTokenValue63(
+          containerPaddingV: parseTokenValue59(
             spacing.navContainer.verticalPadding
           ),
-          containerPaddingH: parseTokenValue63(
+          containerPaddingH: parseTokenValue59(
             spacing.navContainer.horizontalPadding
           ),
-          containerGap: parseTokenValue63(spacing.navContainer.gap),
+          containerGap: parseTokenValue59(spacing.navContainer.gap),
           containerBgColor: surfaceColour,
           children: [
             /* @__PURE__ */ jsxs(
               StyledTitleGroup,
               {
-                titleGroupGap: parseTokenValue63(spacing.titleGroup.gap),
-                titleGroupMinHeight: parseTokenValue63(buttons.size.md.minHeight),
+                titleGroupGap: parseTokenValue59(spacing.titleGroup.gap),
+                titleGroupMinHeight: parseTokenValue59(buttons.size.md.minHeight),
                 children: [
                   variant === "secondary" && /* @__PURE__ */ jsx(
                     IconButton,
@@ -13090,7 +13171,7 @@ var NavigationHeaderRoot = React66.forwardRef(
             actions && /* @__PURE__ */ jsx(
               StyledActionGroup,
               {
-                actionGroupGap: parseTokenValue63(spacing.actionGroup.gap),
+                actionGroupGap: parseTokenValue59(spacing.actionGroup.gap),
                 children: actions
               }
             )
@@ -13100,7 +13181,7 @@ var NavigationHeaderRoot = React66.forwardRef(
       showRadiusPips && /* @__PURE__ */ jsx(
         RadiusPips,
         {
-          radius: parseTokenValue63(
+          radius: parseTokenValue59(
             theme2.tokens.semantics.dimensions.borderRadius.lg
           ),
           colour: surfaceColour
@@ -13115,6 +13196,6 @@ var NavigationHeader = Object.assign(NavigationHeaderRoot, {
   IconButton: NavigationHeaderIconButton
 });
 
-export { Accordion, Animated5 as Animated, Avatar, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, FloatingActionButton, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, NavigationHeader, NavigationHeaderButton, NavigationHeaderIconButton, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, useMenuTrigger, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, Animated5 as Animated, Avatar, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, FloatingActionButton, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, NavigationHeader, NavigationHeaderButton, NavigationHeaderIconButton, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectDrawerField, SelectField, SelectFieldDropdown, SelectFieldOption, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, labelFor, matchOptions, registerLogo, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useMenuTrigger, usePasswordField, usePawprint, useSearchField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map