@butternutbox/pawprint-native 0.8.0 → 0.10.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import { useTheme, ThemeProvider as ThemeProvider$1 } from '@emotion/react';
 import { Brand, Theme, DEFAULT_THEME_OPTIONS, THEME_OPTIONS_MAP, tokens } from '@butternutbox/pawprint-tokens';
 export { tokens } from '@butternutbox/pawprint-tokens';
-import styled51 from '@emotion/native';
+import styled50 from '@emotion/native';
 export { default as styled } from '@emotion/native';
-import React60, { 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, ActionSheetIOS, TouchableOpacity, Platform, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
+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 Svg, { 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, useSharedValue, useAnimatedStyle, ComplexAnimationBuilder } from 'react-native-reanimated';
@@ -203,8 +203,8 @@ var VARIANT_DEFAULTS = {
   heading: { size: "md" },
   display: { size: "lg" }
 };
-var StyledText = styled51(Text)({});
-var Typography = React60.forwardRef(
+var StyledText = styled50(Text)({});
+var Typography = React65.forwardRef(
   (props, ref) => {
     const theme2 = useTheme();
     const { typography, colour } = theme2.tokens.semantics;
@@ -287,14 +287,14 @@ var Typography = React60.forwardRef(
 );
 Typography.displayName = "Typography";
 var parseTokenValue2 = (value) => parseFloat(value);
-var StyledIconRoot = styled51(View)(({ iconDimension }) => ({
+var StyledIconRoot = styled50(View)(({ iconDimension }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   width: iconDimension,
   height: iconDimension
 }));
-var Icon = React60.forwardRef(
+var Icon = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -3829,7 +3829,7 @@ var SIZE_MAP = {
   lg: "large"
 };
 var parseTokenValue3 = (value) => parseFloat(value);
-var StyledRoot = styled51(AvatarPrimitive.Root)(({ theme: theme2, size, border }) => {
+var StyledRoot = styled50(AvatarPrimitive.Root)(({ theme: theme2, size, border }) => {
   const { avatar } = theme2.tokens.components;
   const { borderRadius } = theme2.tokens.semantics.dimensions;
   const tokenSize = SIZE_MAP[size];
@@ -3850,12 +3850,12 @@ var StyledRoot = styled51(AvatarPrimitive.Root)(({ theme: theme2, size, border }
     borderStyle: "solid"
   });
 });
-var StyledImage = styled51(AvatarPrimitive.Image)({
+var StyledImage = styled50(AvatarPrimitive.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var StyledFallback = styled51(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
+var StyledFallback = styled50(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
   const { background, text } = theme2.tokens.semantics.colour;
   return {
     display: "flex",
@@ -3867,7 +3867,7 @@ var StyledFallback = styled51(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
     color: text.primary
   };
 });
-var StyledIcon = styled51(Icon)(({
+var StyledIcon = styled50(Icon)(({
   theme: theme2,
   avatarSize
 }) => {
@@ -3894,7 +3894,7 @@ var AVATAR_SIZE_TO_ICON_SIZE = {
   md: "md",
   lg: "xl"
 };
-var AvatarRoot = React60.forwardRef(
+var AvatarRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       src,
@@ -3931,7 +3931,7 @@ var AvatarRoot = React60.forwardRef(
 AvatarRoot.displayName = "Avatar";
 var Avatar = AvatarRoot;
 var parseTokenValue4 = (value) => parseFloat(value);
-var Container = styled51(View)(({ theme: theme2, showBg }) => {
+var Container = styled50(View)(({ theme: theme2, showBg }) => {
   const { colour, sizing, borderRadius } = theme2.tokens.components.carouselControls.carouselControl;
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -3953,7 +3953,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 = React60.forwardRef(
+var CarouselControls = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { count, activeIndex, showBackground = true } = _b, props = __objRest(_b, ["count", "activeIndex", "showBackground"]);
     const theme2 = useTheme();
@@ -4000,7 +4000,7 @@ var CarouselControls = React60.forwardRef(
 );
 CarouselControls.displayName = "CarouselControls";
 var parseTokenValue5 = (value) => parseFloat(value);
-var StyledBadge = styled51(View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
+var StyledBadge = styled50(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,
@@ -4040,7 +4040,7 @@ var StyledBadge = styled51(View)(({ theme: theme2, badgeVariant, badgeSize, pinn
     backgroundColor: backgroundColorMap[badgeVariant]
   }, borderRadiusStyles), positionStyles);
 });
-var Badge = React60.forwardRef(
+var Badge = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
@@ -4114,8 +4114,8 @@ var Badge = React60.forwardRef(
 );
 Badge.displayName = "Badge";
 var parseTokenValue6 = (value) => parseFloat(value);
-var StyledSpinner = styled51(View)({});
-var Spinner = React60.forwardRef(
+var StyledSpinner = styled50(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();
@@ -4180,12 +4180,12 @@ var sizeToTypographyKey = {
   md: "medium",
   sm: "small"
 };
-var IconWrapper = styled51(View)({
+var IconWrapper = styled50(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var StyledButton = styled51(Pressable)(
+var StyledButton = styled50(Pressable)(
   ({
     buttonHeight,
     buttonMinWidth,
@@ -4213,16 +4213,16 @@ var StyledButton = styled51(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
 );
-var StyledTextWrapper = styled51(View)(({ textOpacity }) => ({
+var StyledTextWrapper = styled50(View)(({ textOpacity }) => ({
   opacity: textOpacity,
   flexShrink: 0
 }));
-var StyledSpinnerWrapper = styled51(View)({
+var StyledSpinnerWrapper = styled50(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
 });
-var Button = React60.forwardRef(
+var Button = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "filled",
@@ -4254,7 +4254,7 @@ var Button = React60.forwardRef(
     const typographyKey = sizeToTypographyKey[size];
     const typography = buttons.text[typographyKey];
     resolveFont(typography.fontFamily, typography.fontWeight);
-    const [pressed, setPressed] = React60.useState(false);
+    const [pressed, setPressed] = React65.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const bgTokens = buttons.filledButton.colour.background[colour];
@@ -4341,7 +4341,7 @@ Button.displayName = "Button";
 
 // src/utils/token.ts
 var parseTokenValue8 = (value) => parseFloat(value);
-var StyledHint = styled51(View)(({
+var StyledHint = styled50(View)(({
   theme: theme2,
   hintVariant
 }) => {
@@ -4365,7 +4365,7 @@ var StyledHint = styled51(View)(({
     backgroundColor: hintVariantMap[hintVariant]
   };
 });
-var Hint = React60.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));
@@ -4378,7 +4378,7 @@ var sizeToIconSizeToken = {
   md: "lg",
   sm: "md"
 };
-var StyledIconButton = styled51(Pressable)(
+var StyledIconButton = styled50(Pressable)(
   ({
     buttonDimension,
     buttonBorderRadius,
@@ -4397,17 +4397,17 @@ var StyledIconButton = styled51(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {})
 );
-var StyledIconWrapper = styled51(View)(({ iconDimension, iconOpacity }) => ({
+var StyledIconWrapper = styled50(View)(({ iconDimension, iconOpacity }) => ({
   width: iconDimension,
   height: iconDimension,
   opacity: iconOpacity
 }));
-var StyledSpinnerWrapper2 = styled51(View)({
+var StyledSpinnerWrapper2 = styled50(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
 });
-var IconButton = React60.forwardRef(
+var IconButton = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -4433,7 +4433,7 @@ var IconButton = React60.forwardRef(
     const dimension = parseTokenValue9(sizeTokens.height);
     const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
     const iconDimension = parseTokenValue9(iconSizing[sizeToIconSizeToken[size]]);
-    const [pressed, setPressed] = React60.useState(false);
+    const [pressed, setPressed] = React65.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const filled = buttons.iconButton.filledButton;
@@ -4510,13 +4510,13 @@ var IconButton = React60.forwardRef(
 );
 IconButton.displayName = "IconButton";
 var parseTokenValue10 = (value) => parseFloat(value);
-var StyledRoot2 = styled51(View)(({ illustrationHeight }) => ({
+var StyledRoot2 = styled50(View)(({ illustrationHeight }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   height: illustrationHeight
 }));
-var Illustration = React60.forwardRef(
+var Illustration = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       illustration: IllustrationComponent,
@@ -4547,12 +4547,12 @@ var Illustration = React60.forwardRef(
 );
 Illustration.displayName = "Illustration";
 var parseTokenValue11 = (value) => parseFloat(value);
-var StyledLabelRow = styled51(View)(({ labelGap }) => ({
+var StyledLabelRow = styled50(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var InputLabel = React60.forwardRef(
+var InputLabel = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { optionalText, state = "default", children } = _b, rest = __objRest(_b, ["optionalText", "state", "children"]);
     const theme2 = useTheme();
@@ -4795,7 +4795,7 @@ var VolumeUp = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadV
 var ForwardRef612 = forwardRef(VolumeUp);
 ForwardRef612.category = "core";
 var parseTokenValue12 = (value) => parseFloat(value);
-var StyledInputWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
+var StyledInputWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -4809,36 +4809,41 @@ var StyledInputWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled, c
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled51(TextInput)(({ theme: theme2 }) => {
+var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
+  var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
-  const placeholderTypography = field.placeholder.default;
+  const typography = field.placeholder.default;
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  );
+  const fontSize = parseTokenValue12(typography.fontSize);
+  const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
   return __spreadValues({
     flex: 1,
     minWidth: 0,
     minHeight: 0,
     padding: 0,
     color: colour.field.text.default,
-    fontSize: parseTokenValue12(placeholderTypography.fontSize),
-    fontFamily: placeholderTypography.fontFamily,
-    fontWeight: placeholderTypography.fontWeight,
-    lineHeight: parseTokenValue12(placeholderTypography.lineHeight),
-    letterSpacing: parseTokenValue12(placeholderTypography.letterSpacing)
+    fontFamily,
+    fontSize,
+    letterSpacing
   }, {
     outlineStyle: "none",
     outlineWidth: 0,
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing = styled51(View)({
+var StyledFocusRing = styled50(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var StyledIconSlot = styled51(View)({
+var StyledIconSlot = styled50(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var InputField = React60.forwardRef(
+var InputField = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -4994,11 +4999,26 @@ var InputField = React60.forwardRef(
   }
 );
 InputField.displayName = "Input.Field";
-var StyledDescriptionRow = styled51(View)({
+var InputText = React65.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { placeholderTextColor } = _b, rest = __objRest(_b, ["placeholderTextColor"]);
+    const theme2 = useTheme();
+    const { colour } = theme2.tokens.components.inputs;
+    return /* @__PURE__ */ jsx(
+      StyledInput,
+      __spreadValues({
+        ref,
+        placeholderTextColor: placeholderTextColor != null ? placeholderTextColor : colour.field.text.placeholder
+      }, rest)
+    );
+  }
+);
+InputText.displayName = "Input.Text";
+var StyledDescriptionRow = styled50(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputDescription = React60.forwardRef(
+var InputDescription = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { state = "default", children } = _b, rest = __objRest(_b, ["state", "children"]);
     const theme2 = useTheme();
@@ -5014,11 +5034,11 @@ var InputDescription = React60.forwardRef(
   }
 );
 InputDescription.displayName = "Input.Description";
-var StyledErrorRow = styled51(View)({
+var StyledErrorRow = styled50(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputError = React60.forwardRef(
+var InputError = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -5035,13 +5055,13 @@ var InputError = React60.forwardRef(
 );
 InputError.displayName = "Input.Error";
 var parseTokenValue13 = (value) => parseFloat(value);
-var StyledRoot3 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot3 = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue13(spacing.gap)
   };
 });
-var InputRoot = React60.forwardRef(
+var InputRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -5085,7 +5105,7 @@ var Input = Object.assign(InputRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var Link = React60.forwardRef(
+var Link = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -7678,12 +7698,12 @@ function registerLogo(brand, variant, component) {
   }
   LOGOS[brand][variant] = component;
 }
-var StyledRoot4 = styled51(View)({
+var StyledRoot4 = styled50(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var Logo = React60.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;
@@ -7706,7 +7726,7 @@ var Logo = React60.forwardRef(
 );
 Logo.displayName = "Logo";
 var parseTokenValue14 = (value) => parseFloat(value);
-var StyledFieldGroup = styled51(View)(({ theme: theme2 }) => {
+var StyledFieldGroup = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -7714,11 +7734,11 @@ var StyledFieldGroup = styled51(View)(({ theme: theme2 }) => {
     gap: parseTokenValue14(spacing.field.gap)
   };
 });
-var StyledFieldTextWrapper = styled51(View)({
+var StyledFieldTextWrapper = styled50(View)({
   flexShrink: 0,
   justifyContent: "center"
 });
-var NumberInputField = React60.forwardRef((_a, ref) => {
+var NumberInputField = React65.forwardRef((_a, ref) => {
   var _b = _a, { fieldText } = _b, props = __objRest(_b, ["fieldText"]);
   const theme2 = useTheme();
   const { colour, description } = theme2.tokens.components.inputs;
@@ -7753,13 +7773,13 @@ var NumberInputField = React60.forwardRef((_a, ref) => {
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue15 = (value) => parseFloat(value);
-var StyledRoot5 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot5 = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue15(spacing.gap)
   };
 });
-var NumberInputRoot = React60.forwardRef(
+var NumberInputRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7807,13 +7827,13 @@ var NumberInput = Object.assign(NumberInputRoot, {
   Error: InputError
 });
 var parseTokenValue16 = (value) => parseFloat(value);
-var StyledContainer = styled51(View)(({ switchGap, switchOpacity }) => ({
+var StyledContainer = styled50(View)(({ switchGap, switchOpacity }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: switchGap,
   opacity: switchOpacity
 }));
-var StyledControlTrack = styled51(View)(
+var StyledControlTrack = styled50(View)(
   ({
     switchChecked,
     controlWidth,
@@ -7839,19 +7859,19 @@ var StyledControlTrack = styled51(View)(
     justifyContent: "center"
   })
 );
-var StyledThumb = styled51(Animated.View)(({ thumbSize, thumbBgColor }) => ({
+var StyledThumb = styled50(Animated.View)(({ thumbSize, thumbBgColor }) => ({
   width: thumbSize,
   height: thumbSize,
   borderRadius: thumbSize / 2,
   backgroundColor: thumbBgColor,
   position: "absolute"
 }));
-var StyledContent = styled51(View)(({ contentGap }) => ({
+var StyledContent = styled50(View)(({ contentGap }) => ({
   gap: contentGap,
   flex: 1,
   minWidth: 0
 }));
-var Switch = React60.forwardRef(
+var Switch = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7871,7 +7891,7 @@ var Switch = React60.forwardRef(
     const theme2 = useTheme();
     const { size, colour, opacity, borderWidth, spacing, typography } = theme2.tokens.components.switch;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React60.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
     const controlWidth = parseTokenValue16(size.control.width);
     const controlHeight = parseTokenValue16(size.control.height);
@@ -7954,7 +7974,7 @@ var Switch = React60.forwardRef(
 );
 Switch.displayName = "Switch";
 var parseTokenValue17 = (value) => parseFloat(value);
-var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
+var StyledTag = styled50(View)(({ theme: theme2, tagVariant, tagSize }) => {
   const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
   const backgroundColorMap = {
     primary: colour.primary.background,
@@ -7977,7 +7997,7 @@ var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
     backgroundColor: backgroundColorMap[tagVariant]
   };
 });
-var Tag = React60.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();
@@ -8027,7 +8047,7 @@ var Tag = React60.forwardRef(
 );
 Tag.displayName = "Tag";
 var parseTokenValue18 = (value) => parseFloat(value);
-var StyledTextAreaWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled }) => {
+var StyledTextAreaWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   const { dimensions: dimensions3 } = theme2.tokens.semantics;
   return {
@@ -8041,7 +8061,7 @@ var StyledTextAreaWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled
     position: "relative"
   };
 });
-var StyledTextArea = styled51(TextInput)(({ theme: theme2 }) => {
+var StyledTextArea = styled50(TextInput)(({ theme: theme2 }) => {
   const { colour } = theme2.tokens.components.inputs;
   return __spreadValues({
     flex: 1,
@@ -8056,17 +8076,17 @@ var StyledTextArea = styled51(TextInput)(({ theme: theme2 }) => {
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing2 = styled51(View)({
+var StyledFocusRing2 = styled50(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var TextAreaContainer = styled51(View)({
+var TextAreaContainer = styled50(View)({
   position: "relative",
   width: "100%",
   flex: 1,
   flexDirection: "column"
 });
-var IconWrapper2 = styled51(View)(({ side }) => {
+var IconWrapper2 = styled50(View)(({ side }) => {
   return {
     position: "absolute",
     top: 0,
@@ -8077,7 +8097,7 @@ var IconWrapper2 = styled51(View)(({ side }) => {
     zIndex: 1
   };
 });
-var TextAreaField = React60.forwardRef(
+var TextAreaField = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -8253,24 +8273,24 @@ var TextAreaField = React60.forwardRef(
 );
 TextAreaField.displayName = "TextArea.Field";
 var parseTokenValue19 = (value) => parseFloat(value);
-var StyledLabelWrapper = styled51(View)({
+var StyledLabelWrapper = styled50(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledLabel = styled51(View)(({ labelGap }) => ({
+var StyledLabel = styled50(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var StyledCharCountWrapper = styled51(View)(({ charCountGap, charCountPadding }) => ({
+var StyledCharCountWrapper = styled50(View)(({ charCountGap, charCountPadding }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: charCountGap,
   paddingLeft: charCountPadding
 }));
-var TextAreaLabel = React60.forwardRef(
+var TextAreaLabel = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       optionalText,
@@ -8328,13 +8348,13 @@ var TextAreaLabel = React60.forwardRef(
 );
 TextAreaLabel.displayName = "TextArea.Label";
 var parseTokenValue20 = (value) => parseFloat(value);
-var StyledRoot6 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot6 = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue20(spacing.gap)
   };
 });
-var TextAreaRoot = React60.forwardRef(
+var TextAreaRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -8361,8 +8381,8 @@ var TextAreaRoot = React60.forwardRef(
       "defaultValue",
       "onChangeText"
     ]);
-    const [charCount, setCharCount] = React60.useState(0);
-    React60.useEffect(() => {
+    const [charCount, setCharCount] = React65.useState(0);
+    React65.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       } else if (defaultValue !== void 0) {
@@ -8415,7 +8435,7 @@ var TextArea = Object.assign(TextAreaRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var AccordionContext = React60.createContext({
+var AccordionContext = React65.createContext({
   openValues: [],
   toggle: () => {
   },
@@ -8423,30 +8443,30 @@ var AccordionContext = React60.createContext({
   size: "small"
 });
 var parseTokenValue21 = (value) => parseFloat(value);
-var StyledRoot7 = styled51(View)(({ rootGap }) => ({
+var StyledRoot7 = styled50(View)(({ rootGap }) => ({
   width: "100%",
   flexDirection: "column",
   gap: rootGap
 }));
-var StyledItem = styled51(View)({
+var StyledItem = styled50(View)({
   flexDirection: "column"
 });
-var StyledTrigger = styled51(Pressable)(({ triggerOpacity }) => ({
+var StyledTrigger = styled50(Pressable)(({ triggerOpacity }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%",
   opacity: triggerOpacity
 }));
-var StyledPanel = styled51(View)(({ panelGap }) => ({
+var StyledPanel = styled50(View)(({ panelGap }) => ({
   marginTop: panelGap
 }));
-var StyledDivider = styled51(View)(({ dividerColor, dividerMarginTop }) => ({
+var StyledDivider = styled50(View)(({ dividerColor, dividerMarginTop }) => ({
   height: 1,
   backgroundColor: dividerColor,
   marginTop: dividerMarginTop
 }));
-var AccordionItem = React60.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();
@@ -8456,7 +8476,7 @@ var AccordionItem = React60.forwardRef(
       toggle,
       disabled: rootDisabled,
       size
-    } = React60.useContext(AccordionContext);
+    } = React65.useContext(AccordionContext);
     const itemValue = value != null ? value : title;
     const isOpen = openValues.includes(itemValue);
     const isDisabled = itemDisabled || rootDisabled;
@@ -8517,7 +8537,7 @@ var AccordionItem = React60.forwardRef(
   }
 );
 AccordionItem.displayName = "Accordion.Item";
-var AccordionRoot = React60.forwardRef(
+var AccordionRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -8539,11 +8559,11 @@ var AccordionRoot = React60.forwardRef(
     const theme2 = useTheme();
     const { accordion } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React60.useState(
+    const [internalValue, setInternalValue] = React65.useState(
       defaultValue != null ? defaultValue : []
     );
     const openValues = isControlled ? controlledValue : internalValue;
-    const toggle = React60.useCallback(
+    const toggle = React65.useCallback(
       (itemValue) => {
         const isOpen = openValues.includes(itemValue);
         let next;
@@ -8561,7 +8581,7 @@ var AccordionRoot = React60.forwardRef(
       },
       [openValues, multiple, isControlled, onValueChange]
     );
-    const ctx = React60.useMemo(
+    const ctx = React65.useMemo(
       () => ({ openValues, toggle, disabled, size }),
       [openValues, toggle, disabled, size]
     );
@@ -8691,7 +8711,7 @@ function buildDelayedEntering(variant, delayMs) {
   b.delay(delayMs);
   return b;
 }
-var Animated5 = React60.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;
@@ -8709,7 +8729,7 @@ var Animated5 = React60.forwardRef(
   }
 );
 Animated5.displayName = "Animated";
-var DrawerContext = React60.createContext({
+var DrawerContext = React65.createContext({
   isOpen: false,
   modalVisible: false,
   openDrawer: () => {
@@ -8719,9 +8739,9 @@ var DrawerContext = React60.createContext({
   onExitComplete: () => {
   }
 });
-var useDrawerContext = () => React60.useContext(DrawerContext);
+var useDrawerContext = () => React65.useContext(DrawerContext);
 var FADE_DURATION = 220;
-var DrawerOverlay = React60.forwardRef(({ accessible = false }, _ref) => {
+var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
   const theme2 = useTheme();
   const { isOpen, closeDrawer } = useDrawerContext();
   const opacity = useRef(new Animated.Value(0)).current;
@@ -8755,17 +8775,17 @@ var DrawerOverlay = React60.forwardRef(({ accessible = false }, _ref) => {
   );
 });
 DrawerOverlay.displayName = "Drawer.Overlay";
-var DrawerDragContext = React60.createContext(null);
-var useDrawerDragContext = () => React60.useContext(DrawerDragContext);
-var DrawerFooterContext = React60.createContext(false);
-var useDrawerFooterContext = () => React60.useContext(DrawerFooterContext);
-var DrawerHeaderContext = React60.createContext(null);
-var useDrawerHeaderContext = () => React60.useContext(DrawerHeaderContext);
+var DrawerDragContext = React65.createContext(null);
+var useDrawerDragContext = () => React65.useContext(DrawerDragContext);
+var DrawerFooterContext = React65.createContext(false);
+var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
+var DrawerHeaderContext = React65.createContext(null);
+var useDrawerHeaderContext = () => React65.useContext(DrawerHeaderContext);
 var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
 var parseTokenValue22 = (value) => parseFloat(value);
-var StyledPanel2 = styled51(View)(
+var StyledPanel2 = styled50(View)(
   ({
     panelBorderRadius,
     panelBgColor,
@@ -8796,7 +8816,7 @@ var StyledPanel2 = styled51(View)(
     overflow: "hidden"
   })
 );
-var DrawerContent = React60.forwardRef(
+var DrawerContent = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     var _a2;
@@ -8948,11 +8968,11 @@ var DrawerContent = React60.forwardRef(
       () => ({ panHandlers: panResponder.panHandlers }),
       [panResponder.panHandlers]
     );
-    const hasFooter = React60.Children.toArray(children).some(
-      (child) => React60.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 = React60.Children.toArray(children).find(
-      (child) => React60.isValidElement(child) && child.type.displayName === "Drawer.Header"
+    const headerChild = React65.Children.toArray(children).find(
+      (child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Header"
     );
     const headerContextValue = headerChild != null ? {
       variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
@@ -9000,7 +9020,7 @@ var styles = StyleSheet.create({
   }
 });
 var parseTokenValue23 = (value) => parseFloat(value);
-var StyledWrapper = styled51(View)(
+var StyledWrapper = styled50(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9009,13 +9029,13 @@ var StyledWrapper = styled51(View)(
     paddingBottom: grabberPaddingTop
   })
 );
-var StyledBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledBar = styled50(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var DrawerGrabber = React60.forwardRef(
+var DrawerGrabber = React65.forwardRef(
   (props, ref) => {
     var _a;
     const theme2 = useTheme();
@@ -9043,7 +9063,7 @@ var DrawerGrabber = React60.forwardRef(
 );
 DrawerGrabber.displayName = "Drawer.Grabber";
 var parseTokenValue24 = (value) => parseFloat(value);
-var DrawerClose = React60.forwardRef(
+var DrawerClose = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { "aria-label": ariaLabel = "Close" } = _b, props = __objRest(_b, ["aria-label"]);
     const theme2 = useTheme();
@@ -9090,7 +9110,7 @@ var styles2 = StyleSheet.create({
   }
 });
 var parseTokenValue25 = (value) => parseFloat(value);
-var StyledGrabberWrapper = styled51(View)(
+var StyledGrabberWrapper = styled50(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9098,13 +9118,13 @@ var StyledGrabberWrapper = styled51(View)(
     paddingTop: grabberPaddingTop
   })
 );
-var StyledGrabberBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledGrabberBar = styled50(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var StyledHeader = styled51(View)(
+var StyledHeader = styled50(View)(
   ({
     headerPaddingHorizontal,
     headerPaddingBottom,
@@ -9124,7 +9144,7 @@ var StyledHeader = styled51(View)(
     borderBottomColor: headerBorderColor
   } : {}), headerBgColor ? { backgroundColor: headerBgColor } : {})
 );
-var StyledImageContainer = styled51(View)(({ imageHeight, imageBorderRadius }) => ({
+var StyledImageContainer = styled50(View)(({ imageHeight, imageBorderRadius }) => ({
   position: "relative",
   width: "100%",
   height: imageHeight,
@@ -9132,20 +9152,20 @@ var StyledImageContainer = styled51(View)(({ imageHeight, imageBorderRadius }) =
   overflow: "hidden",
   flexShrink: 0
 }));
-var StyledImageCloseWrapper = styled51(View)(({ closeTop, closeRight }) => ({
+var StyledImageCloseWrapper = styled50(View)(({ closeTop, closeRight }) => ({
   position: "absolute",
   top: closeTop,
   right: closeRight,
   zIndex: 1
 }));
-var StyledTitleRow = styled51(View)(({ rowGap }) => ({
+var StyledTitleRow = styled50(View)(({ rowGap }) => ({
   flexDirection: "row",
   gap: rowGap,
   alignItems: "flex-start",
   width: "100%",
   flexShrink: 0
 }));
-var StyledTitleContent = styled51(View)(
+var StyledTitleContent = styled50(View)(
   ({ contentGap }) => ({
     flexDirection: "column",
     gap: contentGap,
@@ -9156,8 +9176,8 @@ var StyledTitleContent = styled51(View)(
 function splitChildren(children) {
   let closeChild = null;
   const otherChildren = [];
-  React60.Children.forEach(children, (child) => {
-    if (React60.isValidElement(child) && child.type === DrawerClose) {
+  React65.Children.forEach(children, (child) => {
+    if (React65.isValidElement(child) && child.type === DrawerClose) {
       closeChild = child;
     } else {
       otherChildren.push(child);
@@ -9165,7 +9185,7 @@ function splitChildren(children) {
   });
   return { closeChild, otherChildren };
 }
-var DrawerHeader = React60.forwardRef(
+var DrawerHeader = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "titleAndText", imageSource, children } = _b, props = __objRest(_b, ["variant", "imageSource", "children"]);
     var _a2, _b2, _c, _d, _e, _f;
@@ -9252,7 +9272,7 @@ var DrawerHeader = React60.forwardRef(
   }
 );
 DrawerHeader.displayName = "Drawer.Header";
-var DrawerTitle = React60.forwardRef(
+var DrawerTitle = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -9268,7 +9288,7 @@ var DrawerTitle = React60.forwardRef(
   }
 );
 DrawerTitle.displayName = "Drawer.Title";
-var DrawerDescription = React60.forwardRef(
+var DrawerDescription = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -9285,7 +9305,7 @@ var DrawerDescription = React60.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue26 = (value) => parseFloat(value);
-var StyledScrollView = styled51(ScrollView)(
+var StyledScrollView = styled50(ScrollView)(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
@@ -9301,7 +9321,7 @@ var StyledScrollView = styled51(ScrollView)(
     paddingBottom: bodyPaddingBottom
   })
 );
-var DrawerBody = React60.forwardRef(
+var DrawerBody = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
     const theme2 = useTheme();
@@ -9342,13 +9362,13 @@ var DrawerBody = React60.forwardRef(
 );
 DrawerBody.displayName = "Drawer.Body";
 var parseTokenValue27 = (value) => parseFloat(value);
-var StyledFooter = styled51(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
+var StyledFooter = styled50(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
   flexShrink: 0,
   paddingTop: footerPaddingTop,
   paddingHorizontal: footerPaddingHorizontal,
   paddingBottom: footerPaddingBottom
 }));
-var DrawerFooter = React60.forwardRef(
+var DrawerFooter = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -9370,7 +9390,7 @@ var DrawerFooter = React60.forwardRef(
   }
 );
 DrawerFooter.displayName = "Drawer.Footer";
-var DrawerRoot = React60.forwardRef(
+var DrawerRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       open: controlledOpen,
@@ -9411,15 +9431,15 @@ var DrawerRoot = React60.forwardRef(
   }
 );
 DrawerRoot.displayName = "Drawer";
-var DrawerTrigger = React60.forwardRef(
+var DrawerTrigger = React65.forwardRef(
   ({ children }, ref) => {
-    const { openDrawer } = React60.useContext(DrawerContext);
+    const { openDrawer } = React65.useContext(DrawerContext);
     return /* @__PURE__ */ jsx(Slot, { ref, onPress: openDrawer, children });
   }
 );
 DrawerTrigger.displayName = "Drawer.Trigger";
 var DrawerPortal = ({ children }) => {
-  const { modalVisible, closeDrawer } = React60.useContext(DrawerContext);
+  const { modalVisible, closeDrawer } = React65.useContext(DrawerContext);
   if (!modalVisible) return null;
   return /* @__PURE__ */ jsx(
     Modal,
@@ -9454,7 +9474,7 @@ var styles3 = StyleSheet.create({
   }
 });
 var parseTokenValue28 = (value) => parseFloat(value);
-var StyledDockRoot = styled51(View)(
+var StyledDockRoot = styled50(View)(
   ({
     dockBgColor,
     dockBorderTopWidth,
@@ -9472,7 +9492,7 @@ var StyledDockRoot = styled51(View)(
     paddingHorizontal: dockPaddingHorizontal
   })
 );
-var StyledStackedInner = styled51(View)(
+var StyledStackedInner = styled50(View)(
   ({ innerGap }) => ({
     alignItems: "center",
     gap: innerGap,
@@ -9480,14 +9500,14 @@ var StyledStackedInner = styled51(View)(
     maxWidth: 520
   })
 );
-var StyledButtonGroup = styled51(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
+var StyledButtonGroup = styled50(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
   flexDirection: groupDirection,
   alignItems: groupAlign,
   justifyContent: groupJustify,
   gap: groupGap,
   width: "100%"
 }, groupDirection === "column" ? { maxWidth: 520 } : {}));
-var ButtonDock = React60.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();
@@ -9554,20 +9574,20 @@ var ButtonDock = React60.forwardRef(
 );
 ButtonDock.displayName = "ButtonDock";
 var parseTokenValue29 = (value) => parseFloat(value);
-var StyledGroupRoot = styled51(View)(({ rootGap }) => ({
+var StyledGroupRoot = styled50(View)(({ rootGap }) => ({
   gap: rootGap,
   alignItems: "center",
   width: "100%"
 }));
-var StyledButtonRow = styled51(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
+var StyledButtonRow = styled50(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
   flexDirection: rowDirection,
   width: "100%",
   gap: rowGap
 }, rowAlign ? { alignItems: rowAlign } : {}));
-var StyledChildSlot = styled51(View)(
+var StyledChildSlot = styled50(View)(
   ({ slotInline }) => __spreadValues({}, slotInline ? { flex: 1, minWidth: 0 } : { width: "100%", alignSelf: "stretch" })
 );
-var ButtonGroup = React60.forwardRef(
+var ButtonGroup = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { layout = "stacked", description, children } = _b, rest = __objRest(_b, ["layout", "description", "children"]);
     const theme2 = useTheme();
@@ -9589,9 +9609,9 @@ var ButtonGroup = React60.forwardRef(
               rowGap: parseTokenValue29(
                 isInline ? buttonGroup.spacing.sideBySide.gap : buttonGroup.spacing.stacked.gap
               ),
-              children: React60.Children.map(children, (child, index) => {
-                if (!React60.isValidElement(child)) return child;
-                return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React60.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
@@ -9616,7 +9636,7 @@ var ButtonGroup = React60.forwardRef(
 );
 ButtonGroup.displayName = "ButtonGroup";
 var parseTokenValue30 = (value) => parseFloat(value);
-var StyledRootPressable = styled51(Pressable)(
+var StyledRootPressable = styled50(Pressable)(
   ({
     rootFlexAlign,
     rootGap,
@@ -9635,7 +9655,7 @@ var StyledRootPressable = styled51(Pressable)(
     opacity: rootOpacity
   }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? { 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 = styled50(View)(
   ({
     controlSize,
     controlBorderWidth,
@@ -9654,19 +9674,19 @@ var StyledControl = styled51(View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled51(View)(({ contentGap }) => ({
+var StyledContent2 = styled50(View)(({ contentGap }) => ({
   flexDirection: "column",
   gap: contentGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledIllustration = styled51(View)(({ illustrationSize }) => ({
+var StyledIllustration = styled50(View)(({ illustrationSize }) => ({
   flexShrink: 0,
   width: illustrationSize,
   height: illustrationSize,
   overflow: "hidden"
 }));
-var Checkbox = React60.forwardRef(
+var Checkbox = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -9693,7 +9713,7 @@ var Checkbox = React60.forwardRef(
     const { checkbox } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React60.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
     const handleCheckedChange = (checked) => {
       if (!isControlled) {
@@ -9784,11 +9804,11 @@ var Checkbox = React60.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var parseTokenValue31 = (value) => parseFloat(value);
-var StyledGroup = styled51(View)(({ groupDirection, groupGap }) => ({
+var StyledGroup = styled50(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
-var CheckboxGroup = React60.forwardRef(
+var CheckboxGroup = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
     const theme2 = useTheme();
@@ -9806,7 +9826,7 @@ var CheckboxGroup = React60.forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var CopyFieldInput = React60.forwardRef(
+var CopyFieldInput = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onCopy,
@@ -9825,19 +9845,19 @@ var CopyFieldInput = React60.forwardRef(
       "editable",
       "defaultValue"
     ]);
-    const [internalValue, setInternalValue] = React60.useState(
+    const [internalValue, setInternalValue] = React65.useState(
       typeof defaultValue === "string" ? defaultValue : ""
     );
-    const [copied, setCopied] = React60.useState(false);
-    const timeoutRef = React60.useRef(
+    const [copied, setCopied] = React65.useState(false);
+    const timeoutRef = React65.useRef(
       void 0
     );
-    React60.useEffect(() => {
+    React65.useEffect(() => {
       if (defaultValue !== void 0 && value === void 0) {
         setInternalValue(typeof defaultValue === "string" ? defaultValue : "");
       }
     }, [defaultValue, value]);
-    React60.useEffect(() => {
+    React65.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -9898,13 +9918,13 @@ var CopyFieldInput = React60.forwardRef(
 );
 CopyFieldInput.displayName = "CopyField.Field";
 var parseTokenValue32 = (value) => parseFloat(value);
-var StyledRoot8 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot8 = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue32(spacing.gap)
   };
 });
-var CopyFieldRoot = React60.forwardRef(
+var CopyFieldRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -9972,20 +9992,20 @@ var useCopyField = (options = {}) => {
     onCopy: handleCopy
   };
 };
-var FilterTabContext = React60.createContext({
+var FilterTabContext = React65.createContext({
   size: "sm",
   selectedValues: [],
   toggle: () => {
   }
 });
 var parseTokenValue33 = (value) => parseFloat(value);
-var StyledRoot9 = styled51(View)(({ rootGap }) => ({
+var StyledRoot9 = styled50(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
   flexWrap: "nowrap"
 }));
-var StyledItem2 = styled51(Pressable)(
+var StyledItem2 = styled50(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -10011,7 +10031,7 @@ var StyledItem2 = styled51(Pressable)(
     flexShrink: 0
   })
 );
-var FilterTabItem = React60.forwardRef(
+var FilterTabItem = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -10031,7 +10051,7 @@ var FilterTabItem = React60.forwardRef(
       "accessibilityLabel"
     ]);
     const theme2 = useTheme();
-    const { size, selectedValues, toggle } = React60.useContext(FilterTabContext);
+    const { size, selectedValues, toggle } = React65.useContext(FilterTabContext);
     const isSelected = selectedValues.includes(value);
     const isIconOnly = !!IconOnlyIcon && !label;
     const isActive = isSelected && !disabled;
@@ -10105,7 +10125,7 @@ var FilterTabItem = React60.forwardRef(
   }
 );
 FilterTabItem.displayName = "FilterTab.Item";
-var FilterTabRoot = React60.forwardRef(
+var FilterTabRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "sm",
@@ -10125,9 +10145,9 @@ var FilterTabRoot = React60.forwardRef(
     const theme2 = useTheme();
     const { filterTabs } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React60.useState(defaultValue);
+    const [internalValue, setInternalValue] = React65.useState(defaultValue);
     const selectedValues = isControlled ? controlledValue : internalValue;
-    const toggle = React60.useCallback(
+    const toggle = React65.useCallback(
       (itemValue) => {
         let next;
         if (multiple) {
@@ -10140,7 +10160,7 @@ var FilterTabRoot = React60.forwardRef(
       },
       [selectedValues, isControlled, onValueChange, multiple]
     );
-    const contextValue = React60.useMemo(
+    const contextValue = React65.useMemo(
       () => ({ size, selectedValues, toggle }),
       [size, selectedValues, toggle]
     );
@@ -10160,7 +10180,7 @@ var FilterTab = Object.assign(FilterTabRoot, {
   Item: FilterTabItem
 });
 var parseTokenValue34 = (value) => parseFloat(value);
-var StyledFieldWrapper = styled51(View)(
+var StyledFieldWrapper = styled50(View)(
   ({
     fieldBgColor,
     fieldBorderColor,
@@ -10181,7 +10201,7 @@ var StyledFieldWrapper = styled51(View)(
     overflow: "hidden"
   })
 );
-var StyledTextInput = styled51(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
+var StyledTextInput = styled50(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
   textAlign: "center",
   outlineStyle: "none",
   padding: 0,
@@ -10195,13 +10215,13 @@ var StyledTextInput = styled51(TextInput)(({ inputColor, inputFontFamily, inputF
   fontSize: inputFontSize,
   lineHeight: 0
 }));
-var StyledRow = styled51(View)(({ rowGap }) => ({
+var StyledRow = styled50(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "center",
   gap: rowGap
 }));
-var NumberFieldInput = React60.forwardRef(
+var NumberFieldInput = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       fieldSize = "lg",
@@ -10244,9 +10264,9 @@ var NumberFieldInput = React60.forwardRef(
     const theme2 = useTheme();
     const tokens3 = theme2.tokens.components.numberField;
     const inputTokens3 = theme2.tokens.components.inputs;
-    const [isFocused, setIsFocused] = React60.useState(false);
-    const [isEdited, setIsEdited] = React60.useState(false);
-    const initialValueRef = React60.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";
@@ -10263,14 +10283,14 @@ var NumberFieldInput = React60.forwardRef(
       if (isEdited) return tokens3.colour.field.border.edited;
       return tokens3.colour.field.border.default;
     };
-    const handleFocus = React60.useCallback(
+    const handleFocus = React65.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React60.useCallback(
+    const handleBlur = React65.useCallback(
       (e) => {
         setIsFocused(false);
         if (value != null && onChangeText) {
@@ -10289,7 +10309,7 @@ var NumberFieldInput = React60.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 = React60.useCallback(
+    const handleChangeText = React65.useCallback(
       (text) => {
         setIsEdited(text !== initialValueRef.current);
         onChangeText == null ? void 0 : onChangeText(text);
@@ -10357,14 +10377,14 @@ var NumberFieldInput = React60.forwardRef(
 );
 NumberFieldInput.displayName = "NumberField.Input";
 var parseTokenValue35 = (value) => parseFloat(value);
-var StyledRoot10 = styled51(View)(({ rootGap }) => ({
+var StyledRoot10 = styled50(View)(({ rootGap }) => ({
   alignItems: "center",
   gap: rootGap
 }));
-var StyledLabelGroup = styled51(View)(({ labelGap }) => ({
+var StyledLabelGroup = styled50(View)(({ labelGap }) => ({
   gap: labelGap
 }));
-var NumberField = React60.forwardRef(
+var NumberField = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -10468,9 +10488,9 @@ var NumberField = React60.forwardRef(
 );
 NumberField.displayName = "NumberField";
 var HIT_SLOP = 12;
-var PasswordFieldInput = React60.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] = React60.useState(false);
+  const [showPassword, setShowPassword] = React65.useState(false);
   const handleValueChange = (newValue) => {
     onValueChange == null ? void 0 : onValueChange(newValue);
   };
@@ -10510,12 +10530,12 @@ var PasswordFieldInput = React60.forwardRef((_a, ref) => {
 });
 PasswordFieldInput.displayName = "PasswordField.Field";
 var parseTokenValue36 = (value) => parseFloat(value);
-var StyledErrorRow2 = styled51(View)(({ gap }) => ({
+var StyledErrorRow2 = styled50(View)(({ gap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap
 }));
-var PasswordFieldError = React60.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;
@@ -10542,19 +10562,19 @@ var PasswordFieldError = React60.forwardRef((_a, ref) => {
 });
 PasswordFieldError.displayName = "PasswordField.Error";
 var parseTokenValue37 = (value) => parseFloat(value);
-var StyledRequirementsList = styled51(View)(
+var StyledRequirementsList = styled50(View)(
   ({ listGap }) => ({
     gap: listGap
   })
 );
-var StyledRequirementItem = styled51(View)(
+var StyledRequirementItem = styled50(View)(
   ({ itemGap }) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: itemGap
   })
 );
-var PasswordFieldRequirements = React60.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;
@@ -10604,13 +10624,13 @@ var PasswordFieldRequirements = React60.forwardRef((_a, ref) => {
 });
 PasswordFieldRequirements.displayName = "PasswordField.Requirements";
 var parseTokenValue38 = (value) => parseFloat(value);
-var StyledRoot11 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot11 = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue38(spacing.gap)
   };
 });
-var PasswordFieldRoot = React60.forwardRef(
+var PasswordFieldRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -10718,19 +10738,19 @@ function usePasswordField({
   });
 }
 var parseTokenValue39 = (value) => parseFloat(value);
-var StyledRoot12 = styled51(View)(({ rootGap }) => ({
+var StyledRoot12 = styled50(View)(({ rootGap }) => ({
   flexDirection: "column",
   alignItems: "stretch",
   gap: rootGap,
   width: "100%"
 }));
-var StyledHeader2 = styled51(View)({
+var StyledHeader2 = styled50(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
+var StyledTrack = styled50(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
   position: "relative",
   width: "100%",
   minWidth: trackMinWidth,
@@ -10739,13 +10759,13 @@ var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled51(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled50(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
 }));
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-var Progress = React60.forwardRef(
+var Progress = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value = 0,
@@ -10836,7 +10856,7 @@ var Progress = React60.forwardRef(
 );
 Progress.displayName = "Progress";
 var parseTokenValue40 = (value) => parseFloat(value);
-var StyledRadioRoot = styled51(Pressable)(
+var StyledRadioRoot = styled50(Pressable)(
   ({
     radioGap,
     radioOpacity,
@@ -10855,7 +10875,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 = styled50(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
   width: controlSize,
   height: controlSize,
   minWidth: controlSize,
@@ -10866,26 +10886,26 @@ var StyledRadioControl = styled51(View)(({ controlSize, controlBorderWidth, cont
   alignItems: "center",
   justifyContent: "center"
 }));
-var StyledIndicator2 = styled51(View)(({ indicatorSize, indicatorBgColor }) => ({
+var StyledIndicator2 = styled50(View)(({ indicatorSize, indicatorBgColor }) => ({
   width: indicatorSize,
   height: indicatorSize,
   borderRadius: indicatorSize / 2,
   backgroundColor: indicatorBgColor
 }));
-var StyledTextContent = styled51(View)(({ textContentGap }) => ({
+var StyledTextContent = styled50(View)(({ textContentGap }) => ({
   flexDirection: "column",
   gap: textContentGap
 }));
-var StyledAssetWrapper = styled51(View)({
+var StyledAssetWrapper = styled50(View)({
   alignSelf: "center"
 });
-var StyledTagWrapper = styled51(View)(
+var StyledTagWrapper = styled50(View)(
   ({ tagTopPadding }) => ({
     alignItems: "flex-start",
     paddingTop: tagTopPadding
   })
 );
-var Radio = React60.forwardRef(
+var Radio = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -10990,11 +11010,11 @@ var Radio = React60.forwardRef(
 );
 Radio.displayName = "Radio";
 var parseTokenValue41 = (value) => parseFloat(value);
-var StyledRadioGroup = styled51(View)(({ groupDirection, groupGap }) => ({
+var StyledRadioGroup = styled50(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
-var RadioGroupRoot = React60.forwardRef(
+var RadioGroupRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name: _name,
@@ -11021,11 +11041,11 @@ var RadioGroupRoot = React60.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] = React60.useState(
+    const [internalValue, setInternalValue] = React65.useState(
       derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : internalValue;
-    const handleSelect = React60.useCallback(
+    const handleSelect = React65.useCallback(
       (newValue) => {
         if (!isControlled) {
           setInternalValue(newValue);
@@ -11046,9 +11066,9 @@ var RadioGroupRoot = React60.forwardRef(
           option.value
         ));
       }
-      return React60.Children.map(children, (child) => {
-        if (!React60.isValidElement(child)) return child;
-        return React60.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
@@ -11072,11 +11092,11 @@ RadioGroupRoot.displayName = "RadioGroup";
 var RadioGroup = Object.assign(RadioGroupRoot, {
   Radio
 });
-var SearchFieldInput = React60.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] = React60.useState("");
-  const inputRef = React60.useRef(null);
-  React60.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);
@@ -11116,13 +11136,13 @@ var SearchFieldInput = React60.forwardRef((_a, ref) => {
 });
 SearchFieldInput.displayName = "SearchField.Field";
 var parseTokenValue42 = (value) => parseFloat(value);
-var StyledRoot13 = styled51(View)(({ theme: theme2 }) => {
+var StyledRoot13 = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue42(spacing.gap)
   };
 });
-var SearchFieldRoot = React60.forwardRef(
+var SearchFieldRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -11193,7 +11213,7 @@ function useSearchField({
   };
 }
 var parseTokenValue43 = (value) => parseFloat(value);
-var StyledSegmentItem = styled51(Pressable)(
+var StyledSegmentItem = styled50(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -11213,14 +11233,14 @@ var StyledSegmentItem = styled51(Pressable)(
     opacity: itemOpacity
   }, itemFlex !== void 0 ? { flex: itemFlex } : { flexShrink: 0 })
 );
-var StyledIntrinsicClip = styled51(View)(({ clipBorderRadius, clipBgColor, clipWidth }) => __spreadValues({
+var StyledIntrinsicClip = styled50(View)(({ clipBorderRadius, clipBgColor, clipWidth }) => __spreadValues({
   overflow: "hidden",
   borderRadius: clipBorderRadius,
   backgroundColor: clipBgColor,
   alignSelf: "flex-start",
   maxWidth: "100%"
 }, clipWidth !== void 0 ? { width: clipWidth } : {}));
-var StyledScrollIndicator = styled51(Pressable)(
+var StyledScrollIndicator = styled50(Pressable)(
   ({
     indicatorSide,
     indicatorBorderRadius,
@@ -11252,7 +11272,7 @@ var ScrollIndicatorGradient = ({
   side,
   color
 }) => {
-  const uid = React60.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(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
@@ -11276,7 +11296,7 @@ var ScrollIndicatorGradient = ({
     /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
   ] }) });
 };
-var StyledContainer2 = styled51(View)(
+var StyledContainer2 = styled50(View)(
   ({
     containerGap,
     containerPaddingVertical,
@@ -11335,7 +11355,7 @@ var SegmentedControlItemBase = ({
     }
   );
 };
-var SegmentedControlItem = React60.forwardRef(
+var SegmentedControlItem = React65.forwardRef(
   (_props, _ref) => {
     return null;
   }
@@ -11351,10 +11371,10 @@ var IntrinsicTrack = (_a) => {
     "renderItems",
     "forwardedRef"
   ]);
-  const scrollRef = React60.useRef(null);
-  const [containerWidth, setContainerWidth] = React60.useState(0);
-  const [contentWidth, setContentWidth] = React60.useState(0);
-  const [scrollX, setScrollX] = React60.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;
@@ -11450,7 +11470,7 @@ var IntrinsicTrack = (_a) => {
     })
   );
 };
-var SegmentedControlRoot = React60.forwardRef(
+var SegmentedControlRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       options,
@@ -11474,18 +11494,18 @@ var SegmentedControlRoot = React60.forwardRef(
     const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
-    const childrenArray = React60.Children.toArray(children);
+    const childrenArray = React65.Children.toArray(children);
     const firstChildValue = childrenArray.map((child) => {
-      if (!React60.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] = React60.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
       () => derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleSelect = React60.useCallback(
+    const handleSelect = React65.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -11511,7 +11531,7 @@ var SegmentedControlRoot = React60.forwardRef(
         ));
       }
       return childrenArray.map((child) => {
-        if (!React60.isValidElement(child)) return child;
+        if (!React65.isValidElement(child)) return child;
         const childProps = child.props;
         return /* @__PURE__ */ jsx(
           SegmentedControlItemBase,
@@ -11556,7 +11576,7 @@ var SegmentedControl = Object.assign(SegmentedControlRoot, {
   Item: SegmentedControlItem
 });
 var parseTokenValue44 = (value) => parseFloat(value);
-var StyledTriggerWrapper = styled51(Animated.View)(({
+var StyledTriggerWrapper = styled50(Animated.View)(({
   theme: theme2,
   state: _state
 }) => {
@@ -11572,19 +11592,33 @@ var StyledTriggerWrapper = styled51(Animated.View)(({
     borderRadius: parseTokenValue44(borderRadius.field.default)
   };
 });
-var StyledIconWrapper2 = styled51(View)({
+var StyledIconWrapper2 = styled50(View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledArrowIcon = styled51(Animated.View)({
+var StyledArrowIcon = styled50(Animated.View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var SelectFieldTrigger = React60.forwardRef(
+var SelectFieldTrigger = React65.forwardRef(
   (_a, ref) => {
-    var _b = _a, { state = "default", leadingIcon, children, isOpen = false } = _b, rest = __objRest(_b, ["state", "leadingIcon", "children", "isOpen"]);
+    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";
@@ -11634,7 +11668,7 @@ var SelectFieldTrigger = React60.forwardRef(
       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;
-    return /* @__PURE__ */ jsx(SelectPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Slot, { ref, children: /* @__PURE__ */ jsx(Pressable, __spreadProps(__spreadValues({}, rest), { children: /* @__PURE__ */ jsxs(
+    const triggerContent = /* @__PURE__ */ jsxs(
       StyledTriggerWrapper,
       {
         state,
@@ -11650,7 +11684,7 @@ var SelectFieldTrigger = React60.forwardRef(
           leadingIcon && /* @__PURE__ */ jsx(StyledIconWrapper2, { children: leadingIcon }),
           children,
           stateIcon && /* @__PURE__ */ jsx(StyledIconWrapper2, { children: stateIcon }),
-          /* @__PURE__ */ jsx(
+          actionIcon ? /* @__PURE__ */ jsx(StyledIconWrapper2, { children: actionIcon }) : /* @__PURE__ */ jsx(
             StyledArrowIcon,
             {
               style: { transform: [{ rotate: animatedRotation }] },
@@ -11659,30 +11693,33 @@ var SelectFieldTrigger = React60.forwardRef(
           )
         ]
       }
-    ) })) }) });
+    );
+    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 StyledValue = styled51(Text)(({ theme: theme2 }) => {
-  const { colour } = theme2.tokens.components.inputs;
-  return {
-    flex: 1,
-    minWidth: 0,
-    textAlign: "left",
-    color: colour.field.text.default
-  };
-});
-var SelectFieldValue = React60.forwardRef(
+var SelectFieldValue = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { placeholder } = _b, rest = __objRest(_b, ["placeholder"]);
-    return /* @__PURE__ */ jsx(StyledValue, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsx(SelectPrimitive3.Value, { placeholder: placeholder != null ? placeholder : "" }) }));
+    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: colour.field.text.default,
+        align: "left",
+        children: /* @__PURE__ */ jsx(SelectPrimitive3.Value, { placeholder: placeholder != null ? placeholder : "" })
+      }
+    ) }));
   }
 );
 SelectFieldValue.displayName = "SelectField.Value";
 var parseTokenValue45 = (value) => parseFloat(value);
-var DROPDOWN_OFFSET_X = -32;
-var DROPDOWN_OFFSET_Y = -94;
-var StyledContentShadow = styled51(View)(({ theme: theme2 }) => {
+var StyledContentShadow = styled50(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const shadow = dropdown.list.dropshadow.default;
   return {
@@ -11694,14 +11731,10 @@ var StyledContentShadow = styled51(View)(({ theme: theme2 }) => {
     },
     shadowOpacity: 1,
     shadowRadius: parseTokenValue45(shadow.blur),
-    elevation: 8,
-    transform: [
-      { translateX: DROPDOWN_OFFSET_X },
-      { translateY: DROPDOWN_OFFSET_Y }
-    ]
+    elevation: 8
   };
 });
-var StyledContentInner = styled51(View)(({ theme: theme2 }) => {
+var StyledContentInner = styled50(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const { colour } = theme2.tokens.components.inputs;
   return {
@@ -11712,25 +11745,36 @@ var StyledContentInner = styled51(View)(({ theme: theme2 }) => {
     overflow: "hidden"
   };
 });
-var SelectFieldContent = React60.forwardRef((_a, ref) => {
+var SelectFieldContent = React65.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = useTheme();
   const { spacing } = theme2.tokens.components.inputs;
-  return /* @__PURE__ */ jsx(SelectPrimitive3.Portal, { children: /* @__PURE__ */ jsx(
-    SelectPrimitive3.Content,
-    {
-      side: "bottom",
-      align: "start",
-      sideOffset: parseTokenValue45(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, children }) }) }) })) })
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(SelectPrimitive3.Portal, { children: [
+    /* @__PURE__ */ jsx(SelectPrimitive3.Overlay, { style: StyleSheet.absoluteFill }),
+    /* @__PURE__ */ jsx(
+      SelectPrimitive3.Content,
+      {
+        side: "bottom",
+        align: "start",
+        sideOffset: parseTokenValue45(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
+          }
+        ) }) }) })) })
+      }
+    )
+  ] });
 });
 SelectFieldContent.displayName = "SelectField.Content";
 var parseTokenValue46 = (value) => parseFloat(value);
-var StyledItem3 = styled51(Pressable)(({ theme: theme2 }) => {
+var StyledItem3 = styled50(Pressable)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
@@ -11744,12 +11788,12 @@ var StyledItem3 = styled51(Pressable)(({ theme: theme2 }) => {
     backgroundColor: dropdown.listItem.colour.background.default
   };
 });
-var StyledIconWrapper3 = styled51(View)({
+var StyledIconWrapper3 = styled50(View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledContentWrapper = styled51(View)(({ theme: theme2 }) => {
+var StyledContentWrapper = styled50(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
@@ -11759,24 +11803,24 @@ var StyledContentWrapper = styled51(View)(({ theme: theme2 }) => {
     minWidth: 0
   };
 });
-var StyledTextWrapper2 = styled51(View)({
+var StyledTextWrapper2 = styled50(View)({
   flex: 1,
   minWidth: 0
 });
-var StyledItemText = styled51(Text)(({ theme: theme2 }) => {
+var StyledItemText = styled50(Text)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     color: dropdown.listItem.colour.text.placeholder.default
   };
 });
-var StyledHintText = styled51(Text)(({ theme: theme2 }) => {
+var StyledHintText = styled50(Text)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     color: dropdown.listItem.colour.text.hint.default,
     flexShrink: 0
   };
 });
-var SelectFieldItem = React60.forwardRef(
+var SelectFieldItem = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, leadingIcon, hintText, children, disabled, isSelected } = _b, rest = __objRest(_b, ["value", "leadingIcon", "hintText", "children", "disabled", "isSelected"]);
     const theme2 = useTheme();
@@ -11812,13 +11856,23 @@ var SelectFieldItem = React60.forwardRef(
 );
 SelectFieldItem.displayName = "SelectField.Item";
 var parseTokenValue47 = (value) => parseFloat(value);
-var StyledRoot14 = styled51(View)(({ theme: theme2 }) => {
+var StyledNoResults = styled50(View)(({ theme: theme2 }) => {
+  const { dropdown } = theme2.tokens.components.dropdownList;
+  return {
+    paddingVertical: parseTokenValue47(dropdown.listItem.spacing.verticalPadding),
+    paddingHorizontal: parseTokenValue47(
+      dropdown.listItem.spacing.horiztonalPadding
+    ),
+    alignItems: "center"
+  };
+});
+var StyledRoot14 = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue47(spacing.gap)
   };
 });
-var SelectFieldRoot = React60.forwardRef(
+var SelectFieldRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -11832,7 +11886,10 @@ var SelectFieldRoot = React60.forwardRef(
       value,
       defaultValue,
       onValueChange,
-      disabled
+      disabled,
+      searchable = false,
+      searchPlaceholder,
+      noResultsText = "No results found"
     } = _b, rest = __objRest(_b, [
       "label",
       "placeholder",
@@ -11845,14 +11902,54 @@ var SelectFieldRoot = React60.forwardRef(
       "value",
       "defaultValue",
       "onValueChange",
-      "disabled"
+      "disabled",
+      "searchable",
+      "searchPlaceholder",
+      "noResultsText"
     ]);
-    const [isOpen, setIsOpen] = React60.useState(false);
-    const [internalValue, setInternalValue] = React60.useState(
+    const [isOpen, setIsOpen] = React65.useState(false);
+    const [showContent, setShowContent] = React65.useState(false);
+    const [internalValue, setInternalValue] = React65.useState(
       defaultValue != null ? defaultValue : null
     );
-    const isCompound = React60.Children.toArray(children).some(
-      (child) => React60.isValidElement(child) && child.type === SelectFieldContent
+    const [searchQuery, setSearchQuery] = React65.useState("");
+    const [clearKey, setClearKey] = React65.useState(0);
+    const searchInputRef = React65.useRef(null);
+    React65.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
+      );
+      return () => {
+        clearTimeout(openTimer);
+        clearTimeout(hardwareKeyboardTimer);
+        keyboardSub.remove();
+      };
+    }, [isOpen, searchable]);
+    const isCompound = React65.Children.toArray(children).some(
+      (child) => React65.isValidElement(child) && child.type === SelectFieldContent
     );
     if (isCompound) {
       return /* @__PURE__ */ jsx(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children }));
@@ -11862,15 +11959,54 @@ var SelectFieldRoot = React60.forwardRef(
       setInternalValue(valueToSet);
       onValueChange == null ? void 0 : onValueChange(valueToSet);
     };
+    const handleOpenChange = (open) => {
+      setIsOpen(open);
+      if (!open) setSearchQuery("");
+    };
     const currentValue = value !== void 0 ? value : internalValue;
+    const allItems = React65.Children.toArray(children);
+    const filteredItems = searchable ? allItems.filter((child) => {
+      var _a2;
+      if (!searchQuery) return true;
+      if (React65.isValidElement(child) && child.type === SelectFieldItem) {
+        const label2 = String(
+          (_a2 = child.props.children) != null ? _a2 : ""
+        );
+        return label2.toLowerCase().includes(searchQuery.toLowerCase());
+      }
+      return true;
+    }) : allItems;
+    const hasNoResults = searchable && searchQuery.length > 0 && filteredItems.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: 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" })
+        }
+      );
+    })();
     return /* @__PURE__ */ jsxs(
       SelectPrimitive3.Root,
       {
-        value: value != null ? value : void 0,
-        defaultValue: defaultValue != null ? defaultValue : void 0,
+        value: currentValue != null ? currentValue : void 0,
         onValueChange: handleValueChange,
         disabled,
-        onOpenChange: setIsOpen,
+        onOpenChange: handleOpenChange,
         children: [
           /* @__PURE__ */ jsxs(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children: [
             label && /* @__PURE__ */ jsx(InputLabel, { optionalText, state, children: label }),
@@ -11880,27 +12016,44 @@ var SelectFieldRoot = React60.forwardRef(
                 state,
                 leadingIcon,
                 isOpen,
-                children: /* @__PURE__ */ jsx(SelectFieldValue, { placeholder })
+                isSearching: searchable && isOpen,
+                actionIcon: searchActionIcon,
+                children: searchable && isOpen ? /* @__PURE__ */ jsx(
+                  InputText,
+                  {
+                    ref: searchInputRef,
+                    value: searchQuery,
+                    onChangeText: setSearchQuery,
+                    placeholder: searchPlaceholder != null ? searchPlaceholder : "Search...",
+                    returnKeyType: "search",
+                    clearButtonMode: "never",
+                    accessibilityLabel: "Search options"
+                  }
+                ) : /* @__PURE__ */ jsx(SelectFieldValue, { placeholder })
               }
             ),
             description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
             error && state === "error" && /* @__PURE__ */ jsx(InputError, { children: error })
           ] })),
-          /* @__PURE__ */ jsx(SelectFieldContent, { children: React60.Children.map(children, (child) => {
-            if (React60.isValidElement(child) && child.type === SelectFieldItem) {
-              const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
-              const childProps = child.props;
-              return React60.cloneElement(
-                child,
-                {
-                  isSelected: childProps.value === selectedValue
-                }
-              );
-            }
-            return child;
-          }) })
+          showContent && /* @__PURE__ */ jsxs(SelectFieldContent, { children: [
+            filteredItems.map((child) => {
+              if (React65.isValidElement(child) && child.type === SelectFieldItem) {
+                const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
+                const childProps = child.props;
+                return React65.cloneElement(
+                  child,
+                  {
+                    isSelected: childProps.value === selectedValue
+                  }
+                );
+              }
+              return child;
+            }),
+            hasNoResults && /* @__PURE__ */ jsx(StyledNoResults, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: noResultsText }) })
+          ] })
         ]
-      }
+      },
+      clearKey
     );
   }
 );
@@ -11952,7 +12105,7 @@ var { dimensions } = semantics;
 var parseSize = (value) => {
   return parseInt(value.replace("px", ""), 10);
 };
-var Wrapper = styled51(View)({
+var Wrapper = styled50(View)({
   borderWidth: parseSize(inputTokens.borderWidth.field.selected),
   borderColor: inputTokens.colour.field.border.selected,
   borderRadius: parseSize(inputTokens.borderRadius.field.default),
@@ -11964,29 +12117,29 @@ var Wrapper = styled51(View)({
   alignItems: "center",
   justifyContent: "space-between"
 });
-var SelectIcon = styled51(Animated10.View)({
+var SelectIcon = styled50(Animated10.View)({
   position: "absolute",
   right: 0,
   marginRight: 0
 });
-var InputText = styled51(Text)({
+var InputText2 = styled50(Text)({
   color: inputTokens.colour.field.text.default,
   fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
   fontWeight: inputTokens.field.placeholder.default.fontWeight,
   flex: 1
 });
-var PlaceholderText = styled51(Text)({
+var PlaceholderText = styled50(Text)({
   color: inputTokens.colour.field.text.placeholder,
   fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
   fontWeight: inputTokens.field.placeholder.default.fontWeight,
   flex: 1
 });
-var ModalOverlay = styled51(View)({
+var ModalOverlay = styled50(View)({
   flex: 1,
   backgroundColor: "rgba(0, 0, 0, 0.32)",
   justifyContent: "flex-end"
 });
-var AndroidDialog = styled51(View)({
+var AndroidDialog = styled50(View)({
   backgroundColor: inputTokens.colour.field.background.default,
   borderTopLeftRadius: parseSize(dimensions.borderRadius.lg),
   borderTopRightRadius: parseSize(dimensions.borderRadius.lg),
@@ -11996,14 +12149,14 @@ var AndroidDialog = styled51(View)({
   paddingBottom: parseSize(dimensions.spacing.xl),
   paddingHorizontal: parseSize(dimensions.spacing.md)
 });
-var DialogTitle = styled51(Text)({
+var DialogTitle = styled50(Text)({
   fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
   fontWeight: inputTokens.text.label.fontWeight,
   color: inputTokens.colour.field.text.default,
   marginBottom: parseSize(dimensions.spacing.md),
   marginLeft: parseSize(dimensions.spacing.xs)
 });
-var AndroidOptionRow = styled51(View)({
+var AndroidOptionRow = styled50(View)({
   flexDirection: "row",
   alignItems: "center",
   paddingVertical: parseSize(dimensions.spacing.md),
@@ -12011,7 +12164,7 @@ var AndroidOptionRow = styled51(View)({
   borderBottomWidth: parseSize(dimensions.borderWidth.sm),
   borderBottomColor: themeTokens.primitives.colour.brand.brown[2]
 });
-var RadioOuter = styled51(View)({
+var RadioOuter = styled50(View)({
   width: parseSize(dimensions.spacing.lg),
   height: parseSize(dimensions.spacing.lg),
   borderRadius: parseSize(dimensions.spacing.lg) / 2,
@@ -12021,13 +12174,13 @@ var RadioOuter = styled51(View)({
   justifyContent: "center",
   marginRight: parseSize(dimensions.spacing.sm)
 });
-var RadioInner = styled51(View)({
+var RadioInner = styled50(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 = styled50(Text)(
   ({ isSelected }) => ({
     fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
     fontWeight: isSelected ? inputTokens.text.label.fontWeight : inputTokens.field.placeholder.default.fontWeight,
@@ -12054,7 +12207,7 @@ var useIconAnimation = () => {
     iconAnimationStyles
   };
 };
-var NativeSelectPicker = React60.forwardRef(
+var NativeSelectPicker = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       items,
@@ -12138,7 +12291,7 @@ var NativeSelectPicker = React60.forwardRef(
           accessibilityRole: "button",
           style: { flexDirection: "row", alignItems: "center" },
           children: [
-            /* @__PURE__ */ jsx(InputText, { numberOfLines: 1, children: displayLabel || /* @__PURE__ */ jsx(PlaceholderText, { children: (placeholder == null ? void 0 : placeholder.label) || "Select" }) }),
+            /* @__PURE__ */ jsx(InputText2, { numberOfLines: 1, children: displayLabel || /* @__PURE__ */ jsx(PlaceholderText, { children: (placeholder == null ? void 0 : placeholder.label) || "Select" }) }),
             !hideIcon && /* @__PURE__ */ jsx(SelectIcon, { style: [iconAnimationStyles], children: /* @__PURE__ */ jsx(
               KeyboardArrowDown_default,
               {
@@ -12202,18 +12355,18 @@ var NativeSelectPicker = React60.forwardRef(
 );
 NativeSelectPicker.displayName = "NativeSelectPicker";
 var parseTokenValue48 = (value) => parseFloat(value);
-var StyledLabelRow2 = styled51(View)(({ labelRowGap }) => ({
+var StyledLabelRow2 = styled50(View)(({ labelRowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelRowGap
 }));
-var StyledLabelSlot = styled51(View)(({ labelSlotGap }) => ({
+var StyledLabelSlot = styled50(View)(({ labelSlotGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelSlotGap,
   flexShrink: 0
 }));
-var Slider = React60.forwardRef(
+var Slider = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: controlledValue,
@@ -12248,7 +12401,7 @@ var Slider = React60.forwardRef(
     const { slider, buttons } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React60.useState(defaultValue);
+    const [internalValue, setInternalValue] = React65.useState(defaultValue);
     const currentValue = isControlled ? controlledValue : internalValue;
     const thumbSize = parseTokenValue48(buttons.size.md.height);
     const trackHeight = parseTokenValue48(slider.sizing.track.height);
@@ -12543,7 +12696,7 @@ var ICON_MAP = {
   info: Info_default
 };
 var parseTokenValue49 = (value) => parseFloat(value);
-var StyledInlineRoot = styled51(View)(
+var StyledInlineRoot = styled50(View)(
   ({ rootPaddingH, rootPaddingV, rootGap, rootBorderRadius, rootBgColor }) => ({
     flexDirection: "row",
     alignItems: "flex-start",
@@ -12554,7 +12707,7 @@ var StyledInlineRoot = styled51(View)(
     backgroundColor: rootBgColor
   })
 );
-var StyledToastRoot = styled51(View)(
+var StyledToastRoot = styled50(View)(
   ({
     rootPaddingH,
     rootPaddingV,
@@ -12581,7 +12734,7 @@ var StyledToastRoot = styled51(View)(
     elevation: 4
   })
 );
-var StyledSystemRoot = styled51(View)(
+var StyledSystemRoot = styled50(View)(
   ({
     rootPaddingH,
     rootPaddingTop,
@@ -12601,37 +12754,37 @@ var StyledSystemRoot = styled51(View)(
     width: "100%"
   })
 );
-var StyledContents = styled51(View)(({ contentsGap }) => ({
+var StyledContents = styled50(View)(({ contentsGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   flex: 1,
   minWidth: 0,
   gap: contentsGap
 }));
-var StyledCopyRow = styled51(View)(({ copyGap }) => ({
+var StyledCopyRow = styled50(View)(({ copyGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var StyledInlineCopy = styled51(View)(({ copyGap }) => ({
+var StyledInlineCopy = styled50(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledLinkWrapper = styled51(View)(({ linkPaddingLeft }) => ({
+var StyledLinkWrapper = styled50(View)(({ linkPaddingLeft }) => ({
   paddingLeft: linkPaddingLeft,
   width: "100%"
 }));
-var StyledCloseButton = styled51(Pressable)({
+var StyledCloseButton = styled50(Pressable)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   padding: 0
 });
-var Notification = React60.forwardRef(
+var Notification = React65.forwardRef(
   (props, ref) => {
     const _a = props, {
       variant = "inline",
@@ -12873,10 +13026,10 @@ var NIB_OFFSET = {
   middle: 146,
   right: 268
 };
-var Container2 = styled51(View)(({ $width }) => ({
+var Container2 = styled50(View)(({ $width }) => ({
   width: $width
 }));
-var StyledBody = styled51(View)(
+var StyledBody = styled50(View)(
   ({
     bgColor,
     borderColor,
@@ -12975,7 +13128,7 @@ function NibTriangle({
     }
   );
 }
-var Tooltip = React60.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();
@@ -13063,8 +13216,8 @@ var Tooltip = React60.forwardRef(
       return bubble;
     }
     if (Platform.OS === "web") {
-      const child = React60.isValidElement(children) ? children : null;
-      const trigger = child ? React60.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);
@@ -13106,7 +13259,7 @@ var Tooltip = React60.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue51 = (value) => parseFloat(value);
-var StyledInsightRoot = styled51(View)(
+var StyledInsightRoot = styled50(View)(
   ({
     rootGap,
     rootPaddingH,
@@ -13133,7 +13286,7 @@ var StyledInsightRoot = styled51(View)(
     minWidth: rootMinWidth
   })
 );
-var StyledInsightContent = styled51(View)(
+var StyledInsightContent = styled50(View)(
   ({ contentGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -13141,7 +13294,7 @@ var StyledInsightContent = styled51(View)(
     gap: contentGap
   })
 );
-var MessageCardInsight = React60.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();
@@ -13213,7 +13366,7 @@ var MessageCardInsight = React60.forwardRef(
   }
 );
 MessageCardInsight.displayName = "MessageCard.Insight";
-var StyledBannerRoot = styled51(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
+var StyledBannerRoot = styled50(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
@@ -13221,7 +13374,7 @@ var StyledBannerRoot = styled51(View)(({ rootGap, rootPadding, rootBorderRadius,
   borderRadius: rootBorderRadius,
   backgroundColor: rootBgColor
 }));
-var StyledBannerImage = styled51(View)(({ imageRadius, imageBgColor }) => ({
+var StyledBannerImage = styled50(View)(({ imageRadius, imageBgColor }) => ({
   flexShrink: 0,
   width: 108,
   height: 108,
@@ -13229,14 +13382,14 @@ var StyledBannerImage = styled51(View)(({ imageRadius, imageBgColor }) => ({
   overflow: "hidden",
   backgroundColor: imageBgColor
 }));
-var StyledBannerIllustrationSlot = styled51(View)({
+var StyledBannerIllustrationSlot = styled50(View)({
   flexShrink: 0,
   width: 108,
   height: 108,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledBannerContents = styled51(View)(
+var StyledBannerContents = styled50(View)(
   ({ contentsGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -13246,13 +13399,13 @@ var StyledBannerContents = styled51(View)(
     minWidth: 0
   })
 );
-var StyledBannerCopy = styled51(View)(({ copyGap }) => ({
+var StyledBannerCopy = styled50(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var MessageCardBanner = React60.forwardRef(
+var MessageCardBanner = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       colourScheme = "primary",
@@ -13286,7 +13439,7 @@ var MessageCardBanner = React60.forwardRef(
         accessibilityRole: "summary"
       }, rest), {
         children: [
-          (media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React60.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(
@@ -13385,22 +13538,22 @@ function defaultGetDateState(date) {
 function getDefaultMonthLabel(year, month, locale) {
   return format(new Date(year, month, 1), "MMMM yyyy", { locale });
 }
-var StyledContainer3 = styled51(View)(({ containerGap, containerMaxWidth }) => ({
+var StyledContainer3 = styled50(View)(({ containerGap, containerMaxWidth }) => ({
   flexDirection: "column",
   gap: containerGap,
   maxWidth: containerMaxWidth
 }));
-var StyledMonthHeader = styled51(View)(
+var StyledMonthHeader = styled50(View)(
   ({ headerGap }) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: headerGap
   })
 );
-var StyledWeekRow = styled51(View)({
+var StyledWeekRow = styled50(View)({
   flexDirection: "row"
 });
-var StyledWeekCell = styled51(View)(
+var StyledWeekCell = styled50(View)(
   ({ cellHeight }) => ({
     flex: 1,
     alignItems: "center",
@@ -13408,14 +13561,14 @@ var StyledWeekCell = styled51(View)(
     height: cellHeight
   })
 );
-var StyledDatesGrid = styled51(View)(({ rowGap }) => ({
+var StyledDatesGrid = styled50(View)(({ rowGap }) => ({
   flexDirection: "column",
   gap: rowGap
 }));
-var StyledDateRow = styled51(View)({
+var StyledDateRow = styled50(View)({
   flexDirection: "row"
 });
-var StyledDateCell = styled51(View)(
+var StyledDateCell = styled50(View)(
   ({ cellHeight }) => ({
     flex: 1,
     height: cellHeight,
@@ -13423,7 +13576,7 @@ var StyledDateCell = styled51(View)(
     justifyContent: "center"
   })
 );
-var StyledIndicator3 = styled51(View)(
+var StyledIndicator3 = styled50(View)(
   ({
     indicatorSize,
     indicatorBorderRadius,
@@ -13443,7 +13596,7 @@ var StyledIndicator3 = styled51(View)(
     justifyContent: "center"
   })
 );
-var DatePicker = React60.forwardRef(
+var DatePicker = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       year,
@@ -13788,25 +13941,25 @@ var buildPointerPath = (r) => {
   ].join(" ");
 };
 var parseTokenValue53 = (value) => parseFloat(value);
-var StyledRoot15 = styled51(View)(({ rootGap }) => ({
+var StyledRoot15 = styled50(View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
   width: "100%"
 }));
-var StyledRow2 = styled51(View)(({ rowGap }) => ({
+var StyledRow2 = styled50(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: rowGap,
   width: "100%"
 }));
-var StyledItemStack = styled51(View)(({ stackGap }) => ({
+var StyledItemStack = styled50(View)(({ stackGap }) => ({
   flexDirection: "column",
   alignItems: "center",
   gap: stackGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledPictureButton = styled51(Pressable)(
+var StyledPictureButton = styled50(Pressable)(
   ({
     buttonBorderRadius,
     buttonBorderWidth,
@@ -13833,14 +13986,14 @@ var StyledPictureButton = styled51(Pressable)(
     overflow: "hidden"
   })
 );
-var StyledPointer = styled51(Svg)(
+var StyledPointer = styled50(Svg)(
   ({ pointerVisible }) => ({
     width: POINTER_WIDTH,
     height: POINTER_HEIGHT,
     opacity: pointerVisible ? 1 : 0
   })
 );
-var PictureSelector = React60.forwardRef(
+var PictureSelector = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -13867,7 +14020,7 @@ var PictureSelector = React60.forwardRef(
     const { pictureSelector } = theme2.tokens.components;
     const { pictureButton } = pictureSelector;
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React60.useState(defaultValue);
+    const [internalValue, setInternalValue] = React65.useState(defaultValue);
     const selectedValue = isControlled ? value : internalValue;
     const selectedItem = items.find((item) => item.value === selectedValue);
     const hasInsight = Boolean(
@@ -13986,13 +14139,13 @@ var DEFAULT_UNIT_LABELS = {
 var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
 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 = styled50(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "flex-start",
   gap: rootGap
 }));
-var StackedItem = styled51(View)(
+var StackedItem = styled50(View)(
   ({
     itemGap,
     itemVerticalPadding,
@@ -14010,7 +14163,7 @@ var StackedItem = styled51(View)(
     borderRadius: itemBorderRadius
   })
 );
-var StackedCountBox = styled51(View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
+var StackedCountBox = styled50(View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
   alignItems: "center",
   justifyContent: "center",
   // TODO: Add token — fixed count box dimensions are not yet tokenised.
@@ -14020,7 +14173,7 @@ var StackedCountBox = styled51(View)(({ countPaddingTop, countBgColor, countBord
   backgroundColor: countBgColor,
   borderRadius: countBorderRadius
 }));
-var InlineRoot = styled51(View)(
+var InlineRoot = styled50(View)(
   ({
     rootGap,
     rootVerticalPadding,
@@ -14040,18 +14193,18 @@ var InlineRoot = styled51(View)(
     overflow: "hidden"
   })
 );
-var InlineGroup = styled51(View)(({ groupGap }) => ({
+var InlineGroup = styled50(View)(({ groupGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-end",
   gap: groupGap
 }));
-var InlineCount = styled51(View)(({ countGap }) => ({
+var InlineCount = styled50(View)(({ countGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: countGap
 }));
-var Countdown = React60.forwardRef(
+var Countdown = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       layout = "stacked",
@@ -14130,7 +14283,7 @@ var Countdown = React60.forwardRef(
               InlineGroup,
               {
                 groupGap: parseTokenValue54(countdown.countdownGroup.spacing.gap),
-                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React60.Fragment, { children: [
+                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
                   index > 0 && colon(`colon-${unit.key}`),
                   /* @__PURE__ */ jsxs(
                     InlineCount,
@@ -14173,7 +14326,7 @@ var Countdown = React60.forwardRef(
         ref,
         rootGap: parseTokenValue54(countdown.spacing.gap)
       }, rest), {
-        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React60.Fragment, { children: [
+        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
           index > 0 && colon(`colon-${unit.key}`),
           /* @__PURE__ */ jsxs(
             StackedItem,
@@ -14231,7 +14384,7 @@ var parseTokenValue55 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
+var BadgeContainer = styled50(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
@@ -14242,13 +14395,13 @@ var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
     alignItems: "center",
     justifyContent: "center",
     height: parseTokenValue55(sizing["2xl"]),
-    paddingRight: parseTokenValue55(spacing.sm),
-    backgroundColor: colour.background.container.alt,
+    paddingRight: parseTokenValue55(spacing.xs),
+    backgroundColor: colour.background.container.brand,
     borderTopRightRadius: parseTokenValue55(borderRadius.xs),
     borderBottomRightRadius: parseTokenValue55(borderRadius.xs)
   };
 });
-var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
+var BadgeIcon = styled50(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const sizing = theme2.tokens.semantics.dimensions.sizing;
   return {
@@ -14261,7 +14414,7 @@ var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
     flexShrink: 0
   };
 });
-var Badge2 = React60.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: [
@@ -14271,7 +14424,7 @@ var Badge2 = React60.forwardRef(
   }
 );
 Badge2.displayName = "ProductListingCard.Badge";
-var StyledGrid = styled51(View)(({ theme: theme2 }) => {
+var StyledGrid = styled50(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "grid",
@@ -14279,7 +14432,7 @@ var StyledGrid = styled51(View)(({ theme: theme2 }) => {
     "grid-row-gap": spacing.xl
   };
 });
-var Grid = React60.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();
@@ -14310,7 +14463,7 @@ var parseTokenValue56 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var StyledRoot16 = styled51(Pressable)(({ theme: theme2 }) => {
+var StyledRoot16 = styled50(Pressable)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14320,38 +14473,26 @@ var StyledRoot16 = styled51(Pressable)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var ImageContainer = styled51(View)({
+var ImageContainer = styled50(View)(({ theme: theme2 }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
-  overflow: "hidden"
-});
-var StyledImage2 = styled51(Image)({
+  overflow: "hidden",
+  borderRadius: parseTokenValue56(
+    theme2.tokens.semantics.dimensions.borderRadius.md
+  )
+}));
+var StyledImage2 = styled50(Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
-  const { colour } = theme2.tokens.semantics;
-  return {
-    position: "absolute",
-    top: parseTokenValue56(spacing.md),
-    left: 0,
-    display: "flex",
-    flexDirection: "row",
-    gap: parseTokenValue56(spacing["2xs"]),
-    alignItems: "center",
-    justifyContent: "center",
-    height: parseTokenValue56(sizing["2xl"]),
-    paddingRight: parseTokenValue56(spacing.sm),
-    backgroundColor: colour.background.container.alt,
-    borderTopRightRadius: parseTokenValue56(borderRadius.sm),
-    borderBottomRightRadius: parseTokenValue56(borderRadius.sm)
-  };
-});
-var ContentContainer = styled51(View)(({ theme: theme2 }) => {
+var BadgeContainer2 = styled50(View)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
+  left: 0
+}));
+var ContentContainer = styled50(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14361,34 +14502,26 @@ var ContentContainer = styled51(View)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var DetailsContainer = styled51(View)({
+var DetailsContainer = styled50(View)({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   width: "100%"
 });
-var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
+var CategoryWrapper = styled50(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: parseTokenValue56(spacing.xs)
-  };
-});
-var SizeWrapper = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    marginBottom: parseTokenValue56(spacing.md)
-  };
+var TitleContainer = styled50(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 = styled50(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14398,7 +14531,7 @@ var PricingContainer = styled51(View)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var _ProductListingCard = React60.forwardRef(
+var _ProductListingCard = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       image,
@@ -14433,7 +14566,14 @@ var _ProductListingCard = React60.forwardRef(
     ]);
     return /* @__PURE__ */ jsxs(StyledRoot16, __spreadProps(__spreadValues({ ref, onPress }, rest), { children: [
       /* @__PURE__ */ jsxs(ImageContainer, { children: [
-        image && /* @__PURE__ */ jsx(View, { style: { flex: 1, width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+        image && /* @__PURE__ */ jsx(View, { style: { flex: 1, width: "100%", height: "100%" }, children: typeof image === "string" ? /* @__PURE__ */ jsx(
+          StyledImage2,
+          {
+            source: { uri: image },
+            accessibilityLabel: imageAlt,
+            accessible: true
+          }
+        ) : React65.isValidElement(image) ? image : /* @__PURE__ */ jsx(
           StyledImage2,
           {
             source: image,
@@ -14447,7 +14587,7 @@ var _ProductListingCard = React60.forwardRef(
         /* @__PURE__ */ jsxs(DetailsContainer, { children: [
           showCategory && category && /* @__PURE__ */ jsx(CategoryWrapper, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: category }) }),
           showTitle && /* @__PURE__ */ jsx(TitleContainer, { children: /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", children: title }) }),
-          showSize && size && /* @__PURE__ */ jsx(SizeWrapper, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size }) })
+          showSize && size && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size })
         ] }),
         showPrice && price && /* @__PURE__ */ jsxs(PricingContainer, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: price }),
@@ -14471,107 +14611,100 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled51(View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledCardContainer = styled50(View, {
+  shouldForwardProp: (prop) => prop !== "showBanner"
+})(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   const spacingMd = parseTokenValue8(spacing.md);
   const spacingXl = parseTokenValue8(spacing.xl);
-  return __spreadProps(__spreadValues({
+  const radiusMd = parseTokenValue8(borderRadius.md);
+  return {
     flexDirection: "row",
     width: "100%",
-    height: borderless ? void 0 : "100%",
-    maxHeight: spacingXl * 6 + spacingMd,
-    backgroundColor: colour.background.surface.default
-  }, borderless ? {} : {
+    // The 148px image sets the baseline height; the card grows if the content
+    // is taller (e.g. a long or translated title wrapping to multiple lines)
+    // so nothing is clipped.
+    minHeight: 148,
+    backgroundColor: colour.background.surface.default,
     borderWidth: 1,
     borderColor: colour.border.default,
     shadowColor: "#522a10",
     shadowOffset: { width: 0, height: spacingMd / 4 },
     shadowOpacity: 0.05,
     shadowRadius: spacingXl - 4,
-    elevation: 5
-  }), {
-    borderRadius: parseTokenValue8(borderRadius.md),
+    elevation: 5,
+    borderRadius: radiusMd,
     overflow: "hidden",
-    zIndex: 1
-  });
-});
-var StyledImage3 = styled51(View)(
-  ({
-    theme: theme2,
-    imageBackgroundColor,
-    thumbnailWidth = 100,
-    thumbnailBackgroundColor
-  }) => ({
-    flexShrink: 0,
-    backgroundColor: thumbnailBackgroundColor || imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
-    overflow: "hidden",
-    aspectRatio: "1 / 1",
-    width: thumbnailWidth,
-    height: thumbnailWidth,
-    position: "relative"
-  })
-);
-var StyledQuantityBadge = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  const borderRadius = theme2.tokens.semantics.dimensions.borderRadius;
-  const { colour } = theme2.tokens.semantics;
-  return {
-    position: "absolute",
-    top: parseTokenValue8(spacing["2xs"]),
-    right: parseTokenValue8(spacing["2xs"]),
-    backgroundColor: colour.background.container.brand,
-    borderRadius: parseTokenValue8(borderRadius.xs),
-    paddingHorizontal: parseTokenValue8(spacing.sm),
-    height: parseTokenValue8(spacing["2xl"]),
-    minWidth: parseTokenValue8(spacing["2xl"]),
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 2
+    zIndex: 1,
+    // Don't apply negative margin when banner is shown; banner wrapper handles positioning
+    marginBottom: 0,
+    flex: 1
   };
 });
-var StyledContentArea = styled51(View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledImage3 = styled50(View)(({ theme: theme2, imageBackgroundColor, thumbnailWidth = 148 }) => ({
+  flexShrink: 0,
+  backgroundColor: imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
+  overflow: "hidden",
+  width: thumbnailWidth,
+  // Square (148) by default; stretches taller to fill the card when the
+  // content makes it taller than the image.
+  minHeight: thumbnailWidth,
+  position: "relative"
+}));
+var StyledContentArea = styled50(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   const paddingValue = parseTokenValue8(spacing.md);
   return {
     flex: 1,
     paddingHorizontal: paddingValue,
-    paddingVertical: borderless ? 0 : paddingValue,
+    paddingVertical: paddingValue,
     gap: parseTokenValue8(spacing.xs),
     justifyContent: "space-between"
   };
 });
-var StyledTextContainer = styled51(View)(() => ({
+var StyledTextContainer = styled50(View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled51(View)(() => ({
-  width: "100%",
-  marginTop: -48,
-  paddingTop: 24,
-  paddingBottom: 16
-}));
-var StyledRootWrapper = styled51(View)(() => {
+var StyledBannerWrapper = styled50(View)(({ theme: theme2 }) => {
+  const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
+  const radiusMd = parseTokenValue8(borderRadius.md);
+  const spacingMd = parseTokenValue8(spacing.md);
+  return {
+    width: "100%",
+    // Tuck the banner up to overlap with card bottom; the 27px notification padding
+    // shows the cream reveal under the card's rounded corners
+    marginTop: -(radiusMd + spacingMd),
+    marginBottom: 0,
+    paddingTop: spacingMd,
+    paddingBottom: spacingMd
+  };
+});
+var StyledRootWrapper = styled50(View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
-    height: "100%"
+    maxWidth: 358
   };
 });
-var StyledNotification = styled51(Notification)(({ theme: theme2 }) => {
-  const { spacing } = theme2.tokens.semantics.dimensions;
+var StyledNotification = styled50(Notification)(({ theme: theme2 }) => {
+  const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
+  const spacingMd = parseTokenValue8(spacing.md);
+  const radiusMd = parseTokenValue8(borderRadius.md);
   return {
-    top: parseTokenValue8(spacing.md),
-    paddingHorizontal: parseTokenValue8(spacing.xl),
-    paddingVertical: parseTokenValue8(spacing.md)
+    paddingHorizontal: spacingMd,
+    // 27px top padding (Figma) leaves a small cream reveal above the text once
+    // the banner tucks behind the card.
+    paddingTop: 27,
+    paddingBottom: spacingMd,
+    // Square top corners, rounded bottom corners (banner tucks under the card).
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: radiusMd,
+    borderBottomRightRadius: radiusMd
   };
 });
-var ProductDisplayCard = React60.forwardRef(
+var ProductDisplayCard = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       title,
@@ -14582,16 +14715,13 @@ var ProductDisplayCard = React60.forwardRef(
       showQuantityPicker = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
-      showIncrementButton,
-      showDecrementButton,
       incrementDisabled = false,
       decrementDisabled = false,
+      minQuantity = 1,
       image,
       imageBackgroundColor,
       thumbnailWidth,
-      thumbnailBackgroundColor,
-      showImageQuantityBadge = false,
-      borderless = false,
+      onImagePress,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -14605,74 +14735,76 @@ var ProductDisplayCard = React60.forwardRef(
       "showQuantityPicker",
       "disableQuantityButtons",
       "hideQuantityButtons",
-      "showIncrementButton",
-      "showDecrementButton",
       "incrementDisabled",
       "decrementDisabled",
+      "minQuantity",
       "image",
       "imageBackgroundColor",
       "thumbnailWidth",
-      "thumbnailBackgroundColor",
-      "showImageQuantityBadge",
-      "borderless",
+      "onImagePress",
       "banner",
       "showBanner",
       "bannerType",
       "showBannerIcon"
     ]);
     const handleQuantityChange = (newQuantity) => {
-      if (newQuantity >= 1) {
+      if (newQuantity >= minQuantity) {
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
-    const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, borderless }, rest), { children: [
-      image && /* @__PURE__ */ jsxs(
-        StyledImage3,
-        {
-          imageBackgroundColor,
-          thumbnailWidth,
-          thumbnailBackgroundColor,
-          children: [
-            typeof image === "string" ? /* @__PURE__ */ jsx(
-              Image,
+    const cardContent = /* @__PURE__ */ jsxs(
+      StyledCardContainer,
+      __spreadProps(__spreadValues({
+        ref,
+        showBanner: showBanner && !!banner
+      }, rest), {
+        children: [
+          image && /* @__PURE__ */ jsx(Pressable, { disabled: !onImagePress, onPress: onImagePress, children: /* @__PURE__ */ jsx(
+            StyledImage3,
+            {
+              imageBackgroundColor,
+              thumbnailWidth,
+              children: typeof image === "string" ? /* @__PURE__ */ jsx(
+                Image,
+                {
+                  source: { uri: image },
+                  resizeMode: "cover",
+                  style: { flex: 1, width: "100%" }
+                }
+              ) : image
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(StyledContentArea, { children: [
+            /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
+              showSubtext && subtext && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
+            ] }),
+            showQuantityPicker && /* @__PURE__ */ jsx(View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
+              NumberField,
               {
-                source: { uri: image },
-                style: { width: "100%", height: "100%" }
-              }
-            ) : image,
-            showImageQuantityBadge && quantity && /* @__PURE__ */ jsx(StyledQuantityBadge, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", weight: "bold", children: quantity }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(StyledContentArea, { borderless, children: [
-        /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
-          showSubtext && subtext && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
-        ] }),
-        showQuantityPicker && /* @__PURE__ */ jsx(View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
-          NumberField,
-          {
-            size: "sm",
-            value: String(quantity),
-            onChangeText: (text) => {
-              const value = parseInt(text, 10);
-              if (!isNaN(value)) {
-                handleQuantityChange(value);
+                size: "sm",
+                value: String(quantity),
+                onChangeText: (text) => {
+                  const value = parseInt(text, 10);
+                  if (!isNaN(value)) {
+                    handleQuantityChange(value);
+                  }
+                },
+                onIncrement: () => handleQuantityChange(quantity + 1),
+                onDecrement: () => handleQuantityChange(quantity - 1),
+                min: minQuantity,
+                accessible: true,
+                accessibilityLabel: `Quantity: ${quantity}`,
+                showIncrementButton: !hideQuantityButtons,
+                showDecrementButton: !hideQuantityButtons,
+                incrementDisabled: incrementDisabled || disableQuantityButtons,
+                decrementDisabled: decrementDisabled || disableQuantityButtons
               }
-            },
-            onIncrement: () => handleQuantityChange(quantity + 1),
-            onDecrement: () => handleQuantityChange(quantity - 1),
-            min: 1,
-            accessible: true,
-            accessibilityLabel: `Quantity: ${quantity}`,
-            showIncrementButton: showIncrementButton !== void 0 ? showIncrementButton : !hideQuantityButtons,
-            showDecrementButton: showDecrementButton !== void 0 ? showDecrementButton : !hideQuantityButtons,
-            incrementDisabled: incrementDisabled || disableQuantityButtons,
-            decrementDisabled: decrementDisabled || disableQuantityButtons
-          }
-        ) })
-      ] })
-    ] }));
+            ) })
+          ] })
+        ]
+      })
+    );
     if (showBanner && banner) {
       return /* @__PURE__ */ jsxs(StyledRootWrapper, { children: [
         cardContent,
@@ -14691,9 +14823,9 @@ var ProductDisplayCard = React60.forwardRef(
   }
 );
 ProductDisplayCard.displayName = "ProductDisplayCard";
-var TabNavigationContext = React60.createContext(void 0);
+var TabNavigationContext = React65.createContext(void 0);
 var useTabNavigationContext = () => {
-  const context = React60.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."
@@ -14702,12 +14834,12 @@ var useTabNavigationContext = () => {
   return context;
 };
 var parseTokenValue57 = (value) => parseFloat(value);
-var StyledFixedList = styled51(View)({
+var StyledFixedList = styled50(View)({
   flexDirection: "row",
   alignItems: "stretch",
   width: "100%"
 });
-var StyledTab = styled51(Pressable)(
+var StyledTab = styled50(Pressable)(
   ({
     tabHeight,
     tabMinWidth,
@@ -14732,7 +14864,7 @@ var StyledTab = styled51(Pressable)(
     borderBottomColor: tabBorderColor
   }, tabFlex !== void 0 ? { flex: tabFlex } : { flexShrink: 0 })
 );
-var TabNavigationList = React60.forwardRef(
+var TabNavigationList = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const { layout } = useTabNavigationContext();
@@ -14751,7 +14883,7 @@ var TabNavigationList = React60.forwardRef(
   }
 );
 TabNavigationList.displayName = "TabNavigation.List";
-var TabNavigationTab = React60.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();
@@ -14787,7 +14919,7 @@ var TabNavigationTab = React60.forwardRef(
   }
 );
 TabNavigationTab.displayName = "TabNavigation.Tab";
-var TabNavigationPanel = React60.forwardRef(
+var TabNavigationPanel = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, children } = _b, rest = __objRest(_b, ["value", "children"]);
     const { animation } = useTabNavigationContext();
@@ -14795,7 +14927,7 @@ var TabNavigationPanel = React60.forwardRef(
   }
 );
 TabNavigationPanel.displayName = "TabNavigation.Panel";
-var TabNavigationRoot = React60.forwardRef(
+var TabNavigationRoot = React65.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -14813,11 +14945,11 @@ var TabNavigationRoot = React60.forwardRef(
       "children"
     ]);
     const isControlled = typeof value === "string";
-    const [uncontrolledValue, setUncontrolledValue] = React60.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
       () => defaultValue != null ? defaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleValueChange = React60.useCallback(
+    const handleValueChange = React65.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -14826,7 +14958,7 @@ var TabNavigationRoot = React60.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    const contextValue = React60.useMemo(
+    const contextValue = React65.useMemo(
       () => ({ layout, animation }),
       [layout, animation]
     );
@@ -14855,6 +14987,6 @@ var TabNavigation = Object.assign(TabNavigationRoot, {
   Panel: TabNavigationPanel
 });
 
-export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, Link, Logo, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map