@butternutbox/pawprint-native 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -2,14 +2,14 @@
 
 var react = require('@emotion/react');
 var pawprintTokens = require('@butternutbox/pawprint-tokens');
-var styled60 = require('@emotion/native');
+var styled51 = require('@emotion/native');
 var React60 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@rn-primitives/avatar');
 var reactNative = require('react-native');
 var Svg = require('react-native-svg');
 var SwitchPrimitive = require('@rn-primitives/switch');
-var Animated9 = require('react-native-reanimated');
+var Animated10 = require('react-native-reanimated');
 var slot = require('@rn-primitives/slot');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var CheckboxPrimitive = require('@rn-primitives/checkbox');
@@ -42,12 +42,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var styled60__default = /*#__PURE__*/_interopDefault(styled60);
+var styled51__default = /*#__PURE__*/_interopDefault(styled51);
 var React60__default = /*#__PURE__*/_interopDefault(React60);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var Svg__default = /*#__PURE__*/_interopDefault(Svg);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
-var Animated9__default = /*#__PURE__*/_interopDefault(Animated9);
+var Animated10__default = /*#__PURE__*/_interopDefault(Animated10);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
 var SelectPrimitive3__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive3);
@@ -236,7 +236,7 @@ var VARIANT_DEFAULTS = {
   heading: { size: "md" },
   display: { size: "lg" }
 };
-var StyledText = styled60__default.default(reactNative.Text)({});
+var StyledText = styled51__default.default(reactNative.Text)({});
 var Typography = React60__default.default.forwardRef(
   (props, ref) => {
     const theme2 = react.useTheme();
@@ -320,7 +320,7 @@ var Typography = React60__default.default.forwardRef(
 );
 Typography.displayName = "Typography";
 var parseTokenValue2 = (value) => parseFloat(value);
-var StyledIconRoot = styled60__default.default(reactNative.View)(({ iconDimension }) => ({
+var StyledIconRoot = styled51__default.default(reactNative.View)(({ iconDimension }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
@@ -3862,7 +3862,7 @@ var SIZE_MAP = {
   lg: "large"
 };
 var parseTokenValue3 = (value) => parseFloat(value);
-var StyledRoot = styled60__default.default(AvatarPrimitive__namespace.Root)(({ theme: theme2, size, border }) => {
+var StyledRoot = styled51__default.default(AvatarPrimitive__namespace.Root)(({ theme: theme2, size, border }) => {
   const { avatar } = theme2.tokens.components;
   const { borderRadius } = theme2.tokens.semantics.dimensions;
   const tokenSize = SIZE_MAP[size];
@@ -3883,12 +3883,12 @@ var StyledRoot = styled60__default.default(AvatarPrimitive__namespace.Root)(({ t
     borderStyle: "solid"
   });
 });
-var StyledImage = styled60__default.default(AvatarPrimitive__namespace.Image)({
+var StyledImage = styled51__default.default(AvatarPrimitive__namespace.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var StyledFallback = styled60__default.default(AvatarPrimitive__namespace.Fallback)(({ theme: theme2 }) => {
+var StyledFallback = styled51__default.default(AvatarPrimitive__namespace.Fallback)(({ theme: theme2 }) => {
   const { background, text } = theme2.tokens.semantics.colour;
   return {
     display: "flex",
@@ -3900,7 +3900,7 @@ var StyledFallback = styled60__default.default(AvatarPrimitive__namespace.Fallba
     color: text.primary
   };
 });
-var StyledIcon = styled60__default.default(Icon)(({
+var StyledIcon = styled51__default.default(Icon)(({
   theme: theme2,
   avatarSize
 }) => {
@@ -3964,7 +3964,7 @@ var AvatarRoot = React60__default.default.forwardRef(
 AvatarRoot.displayName = "Avatar";
 var Avatar = AvatarRoot;
 var parseTokenValue4 = (value) => parseFloat(value);
-var Container = styled60__default.default(reactNative.View)(({ theme: theme2, showBg }) => {
+var Container = styled51__default.default(reactNative.View)(({ theme: theme2, showBg }) => {
   const { colour, sizing, borderRadius } = theme2.tokens.components.carouselControls.carouselControl;
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -4033,7 +4033,7 @@ var CarouselControls = React60__default.default.forwardRef(
 );
 CarouselControls.displayName = "CarouselControls";
 var parseTokenValue5 = (value) => parseFloat(value);
-var StyledBadge = styled60__default.default(reactNative.View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
+var StyledBadge = styled51__default.default(reactNative.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,
@@ -4147,7 +4147,7 @@ var Badge = React60__default.default.forwardRef(
 );
 Badge.displayName = "Badge";
 var parseTokenValue6 = (value) => parseFloat(value);
-var StyledSpinner = styled60__default.default(reactNative.View)({});
+var StyledSpinner = styled51__default.default(reactNative.View)({});
 var Spinner = React60__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
@@ -4213,12 +4213,12 @@ var sizeToTypographyKey = {
   md: "medium",
   sm: "small"
 };
-var IconWrapper = styled60__default.default(reactNative.View)({
+var IconWrapper = styled51__default.default(reactNative.View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var StyledButton = styled60__default.default(reactNative.Pressable)(
+var StyledButton = styled51__default.default(reactNative.Pressable)(
   ({
     buttonHeight,
     buttonMinWidth,
@@ -4246,11 +4246,11 @@ var StyledButton = styled60__default.default(reactNative.Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
 );
-var StyledTextWrapper = styled60__default.default(reactNative.View)(({ textOpacity }) => ({
+var StyledTextWrapper = styled51__default.default(reactNative.View)(({ textOpacity }) => ({
   opacity: textOpacity,
   flexShrink: 0
 }));
-var StyledSpinnerWrapper = styled60__default.default(reactNative.View)({
+var StyledSpinnerWrapper = styled51__default.default(reactNative.View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
@@ -4374,7 +4374,7 @@ Button.displayName = "Button";
 
 // src/utils/token.ts
 var parseTokenValue8 = (value) => parseFloat(value);
-var StyledHint = styled60__default.default(reactNative.View)(({
+var StyledHint = styled51__default.default(reactNative.View)(({
   theme: theme2,
   hintVariant
 }) => {
@@ -4411,7 +4411,7 @@ var sizeToIconSizeToken = {
   md: "lg",
   sm: "md"
 };
-var StyledIconButton = styled60__default.default(reactNative.Pressable)(
+var StyledIconButton = styled51__default.default(reactNative.Pressable)(
   ({
     buttonDimension,
     buttonBorderRadius,
@@ -4430,12 +4430,12 @@ var StyledIconButton = styled60__default.default(reactNative.Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {})
 );
-var StyledIconWrapper = styled60__default.default(reactNative.View)(({ iconDimension, iconOpacity }) => ({
+var StyledIconWrapper = styled51__default.default(reactNative.View)(({ iconDimension, iconOpacity }) => ({
   width: iconDimension,
   height: iconDimension,
   opacity: iconOpacity
 }));
-var StyledSpinnerWrapper2 = styled60__default.default(reactNative.View)({
+var StyledSpinnerWrapper2 = styled51__default.default(reactNative.View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
@@ -4543,7 +4543,7 @@ var IconButton = React60__default.default.forwardRef(
 );
 IconButton.displayName = "IconButton";
 var parseTokenValue10 = (value) => parseFloat(value);
-var StyledRoot2 = styled60__default.default(reactNative.View)(({ illustrationHeight }) => ({
+var StyledRoot2 = styled51__default.default(reactNative.View)(({ illustrationHeight }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
@@ -4580,7 +4580,7 @@ var Illustration = React60__default.default.forwardRef(
 );
 Illustration.displayName = "Illustration";
 var parseTokenValue11 = (value) => parseFloat(value);
-var StyledLabelRow = styled60__default.default(reactNative.View)(({ labelGap }) => ({
+var StyledLabelRow = styled51__default.default(reactNative.View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
@@ -4828,7 +4828,7 @@ var VolumeUp = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Svg__default.defau
 var ForwardRef612 = React60.forwardRef(VolumeUp);
 ForwardRef612.category = "core";
 var parseTokenValue12 = (value) => parseFloat(value);
-var StyledInputWrapper = styled60__default.default(reactNative.Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
+var StyledInputWrapper = styled51__default.default(reactNative.Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -4842,7 +4842,7 @@ var StyledInputWrapper = styled60__default.default(reactNative.Animated.View)(({
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled60__default.default(reactNative.TextInput)(({ theme: theme2 }) => {
+var StyledInput = styled51__default.default(reactNative.TextInput)(({ theme: theme2 }) => {
   const { colour, field } = theme2.tokens.components.inputs;
   const placeholderTypography = field.placeholder.default;
   return __spreadValues({
@@ -4862,11 +4862,11 @@ var StyledInput = styled60__default.default(reactNative.TextInput)(({ theme: the
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing = styled60__default.default(reactNative.View)({
+var StyledFocusRing = styled51__default.default(reactNative.View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var StyledIconSlot = styled60__default.default(reactNative.View)({
+var StyledIconSlot = styled51__default.default(reactNative.View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
@@ -5027,7 +5027,7 @@ var InputField = React60__default.default.forwardRef(
   }
 );
 InputField.displayName = "Input.Field";
-var StyledDescriptionRow = styled60__default.default(reactNative.View)({
+var StyledDescriptionRow = styled51__default.default(reactNative.View)({
   flexDirection: "row",
   alignItems: "center"
 });
@@ -5047,7 +5047,7 @@ var InputDescription = React60__default.default.forwardRef(
   }
 );
 InputDescription.displayName = "Input.Description";
-var StyledErrorRow = styled60__default.default(reactNative.View)({
+var StyledErrorRow = styled51__default.default(reactNative.View)({
   flexDirection: "row",
   alignItems: "center"
 });
@@ -5068,7 +5068,7 @@ var InputError = React60__default.default.forwardRef(
 );
 InputError.displayName = "Input.Error";
 var parseTokenValue13 = (value) => parseFloat(value);
-var StyledRoot3 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledRoot3 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue13(spacing.gap)
@@ -7711,7 +7711,7 @@ function registerLogo(brand, variant, component) {
   }
   LOGOS[brand][variant] = component;
 }
-var StyledRoot4 = styled60__default.default(reactNative.View)({
+var StyledRoot4 = styled51__default.default(reactNative.View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
@@ -7739,7 +7739,7 @@ var Logo = React60__default.default.forwardRef(
 );
 Logo.displayName = "Logo";
 var parseTokenValue14 = (value) => parseFloat(value);
-var StyledFieldGroup = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledFieldGroup = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -7747,7 +7747,7 @@ var StyledFieldGroup = styled60__default.default(reactNative.View)(({ theme: the
     gap: parseTokenValue14(spacing.field.gap)
   };
 });
-var StyledFieldTextWrapper = styled60__default.default(reactNative.View)({
+var StyledFieldTextWrapper = styled51__default.default(reactNative.View)({
   flexShrink: 0,
   justifyContent: "center"
 });
@@ -7786,7 +7786,7 @@ var NumberInputField = React60__default.default.forwardRef((_a, ref) => {
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue15 = (value) => parseFloat(value);
-var StyledRoot5 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledRoot5 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue15(spacing.gap)
@@ -7840,13 +7840,13 @@ var NumberInput = Object.assign(NumberInputRoot, {
   Error: InputError
 });
 var parseTokenValue16 = (value) => parseFloat(value);
-var StyledContainer = styled60__default.default(reactNative.View)(({ switchGap, switchOpacity }) => ({
+var StyledContainer = styled51__default.default(reactNative.View)(({ switchGap, switchOpacity }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: switchGap,
   opacity: switchOpacity
 }));
-var StyledControlTrack = styled60__default.default(reactNative.View)(
+var StyledControlTrack = styled51__default.default(reactNative.View)(
   ({
     switchChecked,
     controlWidth,
@@ -7872,15 +7872,17 @@ var StyledControlTrack = styled60__default.default(reactNative.View)(
     justifyContent: "center"
   })
 );
-var StyledThumb = styled60__default.default(reactNative.Animated.View)(({ thumbSize, thumbBgColor }) => ({
+var StyledThumb = styled51__default.default(reactNative.Animated.View)(({ thumbSize, thumbBgColor }) => ({
   width: thumbSize,
   height: thumbSize,
   borderRadius: thumbSize / 2,
   backgroundColor: thumbBgColor,
   position: "absolute"
 }));
-var StyledContent = styled60__default.default(reactNative.View)(({ contentGap }) => ({
-  gap: contentGap
+var StyledContent = styled51__default.default(reactNative.View)(({ contentGap }) => ({
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
 }));
 var Switch = React60__default.default.forwardRef(
   (_a, ref) => {
@@ -7985,7 +7987,7 @@ var Switch = React60__default.default.forwardRef(
 );
 Switch.displayName = "Switch";
 var parseTokenValue17 = (value) => parseFloat(value);
-var StyledTag = styled60__default.default(reactNative.View)(({ theme: theme2, tagVariant, tagSize }) => {
+var StyledTag = styled51__default.default(reactNative.View)(({ theme: theme2, tagVariant, tagSize }) => {
   const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
   const backgroundColorMap = {
     primary: colour.primary.background,
@@ -8058,21 +8060,21 @@ var Tag = React60__default.default.forwardRef(
 );
 Tag.displayName = "Tag";
 var parseTokenValue18 = (value) => parseFloat(value);
-var StyledTextAreaWrapper = styled60__default.default(reactNative.Animated.View)(({ theme: theme2, isDisabled }) => {
+var StyledTextAreaWrapper = styled51__default.default(reactNative.Animated.View)(({ theme: theme2, isDisabled }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
-  const { dimensions } = theme2.tokens.semantics;
+  const { dimensions: dimensions3 } = theme2.tokens.semantics;
   return {
     flexDirection: "column",
     gap: parseTokenValue18(spacing.field.gap),
     width: "100%",
     minWidth: parseTokenValue18(size.field.minWidth),
-    minHeight: parseTokenValue18(dimensions.sizing["3xl"]),
+    minHeight: parseTokenValue18(dimensions3.sizing["3xl"]),
     backgroundColor: isDisabled ? colour.field.background.inactive : colour.field.background.default,
     borderRadius: parseTokenValue18(borderRadius.field.default),
     position: "relative"
   };
 });
-var StyledTextArea = styled60__default.default(reactNative.TextInput)(({ theme: theme2 }) => {
+var StyledTextArea = styled51__default.default(reactNative.TextInput)(({ theme: theme2 }) => {
   const { colour } = theme2.tokens.components.inputs;
   return __spreadValues({
     flex: 1,
@@ -8087,17 +8089,17 @@ var StyledTextArea = styled60__default.default(reactNative.TextInput)(({ theme:
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing2 = styled60__default.default(reactNative.View)({
+var StyledFocusRing2 = styled51__default.default(reactNative.View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var TextAreaContainer = styled60__default.default(reactNative.View)({
+var TextAreaContainer = styled51__default.default(reactNative.View)({
   position: "relative",
   width: "100%",
   flex: 1,
   flexDirection: "column"
 });
-var IconWrapper2 = styled60__default.default(reactNative.View)(({ side }) => {
+var IconWrapper2 = styled51__default.default(reactNative.View)(({ side }) => {
   return {
     position: "absolute",
     top: 0,
@@ -8133,7 +8135,7 @@ var TextAreaField = React60__default.default.forwardRef(
     ]);
     const theme2 = react.useTheme();
     const { spacing, colour, borderWidth, borderRadius, size } = theme2.tokens.components.inputs;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const focusBorderColor = theme2.tokens.semantics.colour.border.focus;
     const [isFocused, setIsFocused] = React60.useState(false);
     const internalInputRef = React60.useRef(null);
@@ -8214,8 +8216,8 @@ var TextAreaField = React60__default.default.forwardRef(
     const fieldHeight = parseTokenValue18(size.field.height);
     const textAreaMinHeight = fieldHeight;
     const iconGap = parseTokenValue18(spacing.field.gap);
-    const leadingIconSize = parseTokenValue18(dimensions.sizing.xl);
-    const trailingIconSize = parseTokenValue18(dimensions.sizing.md);
+    const leadingIconSize = parseTokenValue18(dimensions3.sizing.xl);
+    const trailingIconSize = parseTokenValue18(dimensions3.sizing.md);
     const leadingIconPadding = leadingIconSize + iconGap;
     const trailingIconPadding = trailingIconSize + iconGap;
     return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: handleWrapperPress, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8284,18 +8286,18 @@ var TextAreaField = React60__default.default.forwardRef(
 );
 TextAreaField.displayName = "TextArea.Field";
 var parseTokenValue19 = (value) => parseFloat(value);
-var StyledLabelWrapper = styled60__default.default(reactNative.View)({
+var StyledLabelWrapper = styled51__default.default(reactNative.View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledLabel = styled60__default.default(reactNative.View)(({ labelGap }) => ({
+var StyledLabel = styled51__default.default(reactNative.View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var StyledCharCountWrapper = styled60__default.default(reactNative.View)(({ charCountGap, charCountPadding }) => ({
+var StyledCharCountWrapper = styled51__default.default(reactNative.View)(({ charCountGap, charCountPadding }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: charCountGap,
@@ -8359,7 +8361,7 @@ var TextAreaLabel = React60__default.default.forwardRef(
 );
 TextAreaLabel.displayName = "TextArea.Label";
 var parseTokenValue20 = (value) => parseFloat(value);
-var StyledRoot6 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledRoot6 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue20(spacing.gap)
@@ -8454,25 +8456,25 @@ var AccordionContext = React60__default.default.createContext({
   size: "small"
 });
 var parseTokenValue21 = (value) => parseFloat(value);
-var StyledRoot7 = styled60__default.default(reactNative.View)(({ rootGap }) => ({
+var StyledRoot7 = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   width: "100%",
   flexDirection: "column",
   gap: rootGap
 }));
-var StyledItem = styled60__default.default(reactNative.View)({
+var StyledItem = styled51__default.default(reactNative.View)({
   flexDirection: "column"
 });
-var StyledTrigger = styled60__default.default(reactNative.Pressable)(({ triggerOpacity }) => ({
+var StyledTrigger = styled51__default.default(reactNative.Pressable)(({ triggerOpacity }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%",
   opacity: triggerOpacity
 }));
-var StyledPanel = styled60__default.default(reactNative.View)(({ panelGap }) => ({
+var StyledPanel = styled51__default.default(reactNative.View)(({ panelGap }) => ({
   marginTop: panelGap
 }));
-var StyledDivider = styled60__default.default(reactNative.View)(({ dividerColor, dividerMarginTop }) => ({
+var StyledDivider = styled51__default.default(reactNative.View)(({ dividerColor, dividerMarginTop }) => ({
   height: 1,
   backgroundColor: dividerColor,
   marginTop: dividerMarginTop
@@ -8611,7 +8613,7 @@ AccordionRoot.displayName = "Accordion";
 var Accordion = Object.assign(AccordionRoot, {
   Item: AccordionItem
 });
-var _SubtleScaleIn = class _SubtleScaleIn extends Animated9.ComplexAnimationBuilder {
+var _SubtleScaleIn = class _SubtleScaleIn extends Animated10.ComplexAnimationBuilder {
   constructor() {
     super(...arguments);
     this.build = () => {
@@ -8644,22 +8646,22 @@ var _SubtleScaleIn = class _SubtleScaleIn extends Animated9.ComplexAnimationBuil
 // The worklet in build() drives native with scale 0.85→1 + opacity 0→1.
 _SubtleScaleIn.presetName = "ZoomIn";
 var SubtleScaleIn = _SubtleScaleIn;
-var fadeAnimation = { entering: Animated9.FadeIn, exiting: Animated9.FadeOut };
+var fadeAnimation = { entering: Animated10.FadeIn, exiting: Animated10.FadeOut };
 var fadeUpAnimation = {
-  entering: Animated9.FadeInDown,
-  exiting: Animated9.FadeOutDown
+  entering: Animated10.FadeInDown,
+  exiting: Animated10.FadeOutDown
 };
 var fadeDownAnimation = {
-  entering: Animated9.FadeInUp,
-  exiting: Animated9.FadeOutUp
+  entering: Animated10.FadeInUp,
+  exiting: Animated10.FadeOutUp
 };
 var slideInAnimation = {
-  entering: Animated9.FadeInRight,
-  exiting: Animated9.FadeOutRight
+  entering: Animated10.FadeInRight,
+  exiting: Animated10.FadeOutRight
 };
 var slideOutAnimation = {
-  entering: Animated9.FadeInLeft,
-  exiting: Animated9.FadeOutLeft
+  entering: Animated10.FadeInLeft,
+  exiting: Animated10.FadeOutLeft
 };
 var DURATIONS = {
   fade: 200,
@@ -8669,7 +8671,7 @@ var DURATIONS = {
   slideIn: 250,
   slideOut: 250
 };
-var subtleScaleOut = new Animated9.Keyframe({
+var subtleScaleOut = new Animated10.Keyframe({
   0: {
     opacity: 1,
     transform: [{ scale: 1 }]
@@ -8677,7 +8679,7 @@ var subtleScaleOut = new Animated9.Keyframe({
   100: {
     opacity: 0,
     transform: [{ scale: 0.85 }],
-    easing: Animated9.Easing.out(Animated9.Easing.quad)
+    easing: Animated10.Easing.out(Animated10.Easing.quad)
   }
 }).duration(DURATIONS.scale);
 var scaleAnimation = {
@@ -8685,30 +8687,30 @@ var scaleAnimation = {
   exiting: subtleScaleOut
 };
 var ENTERING_CLS = {
-  fade: Animated9.FadeIn,
+  fade: Animated10.FadeIn,
   scale: SubtleScaleIn,
-  fadeUp: Animated9.FadeInDown,
-  fadeDown: Animated9.FadeInUp,
-  slideIn: Animated9.FadeInRight,
-  slideOut: Animated9.FadeInLeft
+  fadeUp: Animated10.FadeInDown,
+  fadeDown: Animated10.FadeInUp,
+  slideIn: Animated10.FadeInRight,
+  slideOut: Animated10.FadeInLeft
 };
-var easeOut = Animated9.Easing.out(Animated9.Easing.quad);
-var easeInOut = Animated9.Easing.inOut(Animated9.Easing.quad);
+var easeOut = Animated10.Easing.out(Animated10.Easing.quad);
+var easeInOut = Animated10.Easing.inOut(Animated10.Easing.quad);
 var ENTERING = {
-  fade: Animated9.FadeIn.duration(DURATIONS.fade),
+  fade: Animated10.FadeIn.duration(DURATIONS.fade),
   scale: SubtleScaleIn.duration(DURATIONS.scale).easing(easeOut),
-  fadeUp: Animated9.FadeInDown.duration(DURATIONS.fadeUp).easing(easeInOut),
-  fadeDown: Animated9.FadeInUp.duration(DURATIONS.fadeDown).easing(easeInOut),
-  slideIn: Animated9.FadeInRight.duration(DURATIONS.slideIn).easing(easeOut),
-  slideOut: Animated9.FadeInLeft.duration(DURATIONS.slideOut).easing(easeOut)
+  fadeUp: Animated10.FadeInDown.duration(DURATIONS.fadeUp).easing(easeInOut),
+  fadeDown: Animated10.FadeInUp.duration(DURATIONS.fadeDown).easing(easeInOut),
+  slideIn: Animated10.FadeInRight.duration(DURATIONS.slideIn).easing(easeOut),
+  slideOut: Animated10.FadeInLeft.duration(DURATIONS.slideOut).easing(easeOut)
 };
 var EXITING = {
-  fade: Animated9.FadeOut.duration(DURATIONS.fade),
+  fade: Animated10.FadeOut.duration(DURATIONS.fade),
   scale: subtleScaleOut,
-  fadeUp: Animated9.FadeOutDown.duration(DURATIONS.fadeUp),
-  fadeDown: Animated9.FadeOutUp.duration(DURATIONS.fadeDown),
-  slideIn: Animated9.FadeOutRight.duration(DURATIONS.slideIn),
-  slideOut: Animated9.FadeOutLeft.duration(DURATIONS.slideOut)
+  fadeUp: Animated10.FadeOutDown.duration(DURATIONS.fadeUp),
+  fadeDown: Animated10.FadeOutUp.duration(DURATIONS.fadeDown),
+  slideIn: Animated10.FadeOutRight.duration(DURATIONS.slideIn),
+  slideOut: Animated10.FadeOutLeft.duration(DURATIONS.slideOut)
 };
 function buildDelayedEntering(variant, delayMs) {
   const b = ENTERING_CLS[variant].duration(
@@ -8728,7 +8730,7 @@ var Animated5 = React60__default.default.forwardRef(
     const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
     const entering = delayMs > 0 ? buildDelayedEntering(variant, delayMs) : ENTERING[variant];
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Animated9__default.default.View,
+      Animated10__default.default.View,
       __spreadProps(__spreadValues({
         ref,
         entering,
@@ -8796,7 +8798,7 @@ var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
 var parseTokenValue22 = (value) => parseFloat(value);
-var StyledPanel2 = styled60__default.default(reactNative.View)(
+var StyledPanel2 = styled51__default.default(reactNative.View)(
   ({
     panelBorderRadius,
     panelBgColor,
@@ -8833,7 +8835,7 @@ var DrawerContent = React60__default.default.forwardRef(
     var _a2;
     const theme2 = react.useTheme();
     const { drawer, modal } = theme2.tokens.components;
-    const { colour, dimensions } = theme2.tokens.semantics;
+    const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = reactNative.useWindowDimensions();
     const maxHeight = windowHeight * 0.9;
@@ -9005,7 +9007,7 @@ var DrawerContent = React60__default.default.forwardRef(
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue22(drawer.size.maxWidth),
             panelFlex: panelHeight > 0 ? 1 : void 0,
-            panelBorderWidth: parseTokenValue22(dimensions.borderWidth.sm),
+            panelBorderWidth: parseTokenValue22(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
             panelShadowOffsetY: parseTokenValue22(modal.shadow.offsetY),
@@ -9031,7 +9033,7 @@ var styles = reactNative.StyleSheet.create({
   }
 });
 var parseTokenValue23 = (value) => parseFloat(value);
-var StyledWrapper = styled60__default.default(reactNative.View)(
+var StyledWrapper = styled51__default.default(reactNative.View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9040,7 +9042,7 @@ var StyledWrapper = styled60__default.default(reactNative.View)(
     paddingBottom: grabberPaddingTop
   })
 );
-var StyledBar = styled60__default.default(reactNative.View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledBar = styled51__default.default(reactNative.View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
@@ -9121,7 +9123,7 @@ var styles2 = reactNative.StyleSheet.create({
   }
 });
 var parseTokenValue25 = (value) => parseFloat(value);
-var StyledGrabberWrapper = styled60__default.default(reactNative.View)(
+var StyledGrabberWrapper = styled51__default.default(reactNative.View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9129,13 +9131,13 @@ var StyledGrabberWrapper = styled60__default.default(reactNative.View)(
     paddingTop: grabberPaddingTop
   })
 );
-var StyledGrabberBar = styled60__default.default(reactNative.View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledGrabberBar = styled51__default.default(reactNative.View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var StyledHeader = styled60__default.default(reactNative.View)(
+var StyledHeader = styled51__default.default(reactNative.View)(
   ({
     headerPaddingHorizontal,
     headerPaddingBottom,
@@ -9155,7 +9157,7 @@ var StyledHeader = styled60__default.default(reactNative.View)(
     borderBottomColor: headerBorderColor
   } : {}), headerBgColor ? { backgroundColor: headerBgColor } : {})
 );
-var StyledImageContainer = styled60__default.default(reactNative.View)(({ imageHeight, imageBorderRadius }) => ({
+var StyledImageContainer = styled51__default.default(reactNative.View)(({ imageHeight, imageBorderRadius }) => ({
   position: "relative",
   width: "100%",
   height: imageHeight,
@@ -9163,20 +9165,20 @@ var StyledImageContainer = styled60__default.default(reactNative.View)(({ imageH
   overflow: "hidden",
   flexShrink: 0
 }));
-var StyledImageCloseWrapper = styled60__default.default(reactNative.View)(({ closeTop, closeRight }) => ({
+var StyledImageCloseWrapper = styled51__default.default(reactNative.View)(({ closeTop, closeRight }) => ({
   position: "absolute",
   top: closeTop,
   right: closeRight,
   zIndex: 1
 }));
-var StyledTitleRow = styled60__default.default(reactNative.View)(({ rowGap }) => ({
+var StyledTitleRow = styled51__default.default(reactNative.View)(({ rowGap }) => ({
   flexDirection: "row",
   gap: rowGap,
   alignItems: "flex-start",
   width: "100%",
   flexShrink: 0
 }));
-var StyledTitleContent = styled60__default.default(reactNative.View)(
+var StyledTitleContent = styled51__default.default(reactNative.View)(
   ({ contentGap }) => ({
     flexDirection: "column",
     gap: contentGap,
@@ -9202,7 +9204,7 @@ var DrawerHeader = React60__default.default.forwardRef(
     var _a2, _b2, _c, _d, _e, _f;
     const theme2 = react.useTheme();
     const { drawer, grabber } = theme2.tokens.components;
-    const { colour, dimensions } = theme2.tokens.semantics;
+    const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const dragContext = useDrawerDragContext();
     const contextValue = React60.useMemo(() => ({ variant }), [variant]);
     const { closeChild, otherChildren } = splitChildren(children);
@@ -9253,7 +9255,7 @@ var DrawerHeader = React60__default.default.forwardRef(
         ),
         headerPaddingBottom: parseTokenValue25(headerSpacing.bottomPadding),
         headerGap: parseTokenValue25(headerSpacing.gap),
-        headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue25(dimensions.borderWidth.sm) : void 0,
+        headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue25(dimensions3.borderWidth.sm) : void 0,
         headerBorderColor: variant === "titleAndText" ? colour.border.default : void 0,
         headerBgColor: variant === "fullBleed" ? drawer.drawerHeader.colour.background.fullBleed : void 0
       }, props), {
@@ -9270,7 +9272,7 @@ var DrawerHeader = React60__default.default.forwardRef(
                 {
                   barWidth: parseTokenValue25(grabber.size.bar.width),
                   barHeight: parseTokenValue25(grabber.size.bar.height),
-                  barBorderRadius: parseTokenValue25(dimensions.borderRadius.round),
+                  barBorderRadius: parseTokenValue25(dimensions3.borderRadius.round),
                   barColor: grabber.colour.background.default
                 }
               )
@@ -9316,7 +9318,7 @@ var DrawerDescription = React60__default.default.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue26 = (value) => parseFloat(value);
-var StyledScrollView = styled60__default.default(reactNative.ScrollView)(
+var StyledScrollView = styled51__default.default(reactNative.ScrollView)(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
@@ -9373,7 +9375,7 @@ var DrawerBody = React60__default.default.forwardRef(
 );
 DrawerBody.displayName = "Drawer.Body";
 var parseTokenValue27 = (value) => parseFloat(value);
-var StyledFooter = styled60__default.default(reactNative.View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
+var StyledFooter = styled51__default.default(reactNative.View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
   flexShrink: 0,
   paddingTop: footerPaddingTop,
   paddingHorizontal: footerPaddingHorizontal,
@@ -9485,7 +9487,7 @@ var styles3 = reactNative.StyleSheet.create({
   }
 });
 var parseTokenValue28 = (value) => parseFloat(value);
-var StyledDockRoot = styled60__default.default(reactNative.View)(
+var StyledDockRoot = styled51__default.default(reactNative.View)(
   ({
     dockBgColor,
     dockBorderTopWidth,
@@ -9503,7 +9505,7 @@ var StyledDockRoot = styled60__default.default(reactNative.View)(
     paddingHorizontal: dockPaddingHorizontal
   })
 );
-var StyledStackedInner = styled60__default.default(reactNative.View)(
+var StyledStackedInner = styled51__default.default(reactNative.View)(
   ({ innerGap }) => ({
     alignItems: "center",
     gap: innerGap,
@@ -9511,7 +9513,7 @@ var StyledStackedInner = styled60__default.default(reactNative.View)(
     maxWidth: 520
   })
 );
-var StyledButtonGroup = styled60__default.default(reactNative.View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
+var StyledButtonGroup = styled51__default.default(reactNative.View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
   flexDirection: groupDirection,
   alignItems: groupAlign,
   justifyContent: groupJustify,
@@ -9523,7 +9525,7 @@ var ButtonDock = React60__default.default.forwardRef(
     var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
     const theme2 = react.useTheme();
     const { buttonDock, buttonGroup } = theme2.tokens.components;
-    const { dimensions, typography } = theme2.tokens.semantics;
+    const { dimensions: dimensions3, typography } = theme2.tokens.semantics;
     const isStacked = variant === "stacked";
     const groupGap = parseTokenValue28(
       isStacked ? buttonGroup.spacing.stacked.gap : buttonGroup.spacing.sideBySide.gap
@@ -9533,7 +9535,7 @@ var ButtonDock = React60__default.default.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         dockBgColor: buttonDock.colour.background,
-        dockBorderTopWidth: parseTokenValue28(dimensions.borderWidth.sm),
+        dockBorderTopWidth: parseTokenValue28(dimensions3.borderWidth.sm),
         dockBorderTopColor: buttonDock.colour.border,
         dockPaddingVertical: parseTokenValue28(
           buttonDock.spacing[variant].mobile.topPadding
@@ -9585,17 +9587,17 @@ var ButtonDock = React60__default.default.forwardRef(
 );
 ButtonDock.displayName = "ButtonDock";
 var parseTokenValue29 = (value) => parseFloat(value);
-var StyledGroupRoot = styled60__default.default(reactNative.View)(({ rootGap }) => ({
+var StyledGroupRoot = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   gap: rootGap,
   alignItems: "center",
   width: "100%"
 }));
-var StyledButtonRow = styled60__default.default(reactNative.View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
+var StyledButtonRow = styled51__default.default(reactNative.View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
   flexDirection: rowDirection,
   width: "100%",
   gap: rowGap
 }, rowAlign ? { alignItems: rowAlign } : {}));
-var StyledChildSlot = styled60__default.default(reactNative.View)(
+var StyledChildSlot = styled51__default.default(reactNative.View)(
   ({ slotInline }) => __spreadValues({}, slotInline ? { flex: 1, minWidth: 0 } : { width: "100%", alignSelf: "stretch" })
 );
 var ButtonGroup = React60__default.default.forwardRef(
@@ -9647,7 +9649,7 @@ var ButtonGroup = React60__default.default.forwardRef(
 );
 ButtonGroup.displayName = "ButtonGroup";
 var parseTokenValue30 = (value) => parseFloat(value);
-var StyledRootPressable = styled60__default.default(reactNative.Pressable)(
+var StyledRootPressable = styled51__default.default(reactNative.Pressable)(
   ({
     rootFlexAlign,
     rootGap,
@@ -9666,7 +9668,7 @@ var StyledRootPressable = styled60__default.default(reactNative.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 = styled60__default.default(reactNative.View)(
+var StyledControl = styled51__default.default(reactNative.View)(
   ({
     controlSize,
     controlBorderWidth,
@@ -9685,13 +9687,13 @@ var StyledControl = styled60__default.default(reactNative.View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled60__default.default(reactNative.View)(({ contentGap }) => ({
+var StyledContent2 = styled51__default.default(reactNative.View)(({ contentGap }) => ({
   flexDirection: "column",
   gap: contentGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledIllustration = styled60__default.default(reactNative.View)(({ illustrationSize }) => ({
+var StyledIllustration = styled51__default.default(reactNative.View)(({ illustrationSize }) => ({
   flexShrink: 0,
   width: illustrationSize,
   height: illustrationSize,
@@ -9722,7 +9724,7 @@ var Checkbox = React60__default.default.forwardRef(
     ]);
     const theme2 = react.useTheme();
     const { checkbox } = theme2.tokens.components;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledChecked !== void 0;
     const [internalChecked, setInternalChecked] = React60__default.default.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -9768,7 +9770,7 @@ var Checkbox = React60__default.default.forwardRef(
                     checkbox.control.border.default
                   ),
                   controlBorderColor: isChecked ? checkbox.colour.background.selected : checkbox.colour.border.default,
-                  controlBorderRadius: parseTokenValue30(dimensions.borderRadius.xs),
+                  controlBorderRadius: parseTokenValue30(dimensions3.borderRadius.xs),
                   controlBgColor: isChecked ? checkbox.colour.background.selected : "transparent",
                   children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: Check_default, size: "xs", colour: "alt" }) })
                 }
@@ -9815,7 +9817,7 @@ var Checkbox = React60__default.default.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var parseTokenValue31 = (value) => parseFloat(value);
-var StyledGroup = styled60__default.default(reactNative.View)(({ groupDirection, groupGap }) => ({
+var StyledGroup = styled51__default.default(reactNative.View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
@@ -9929,7 +9931,7 @@ var CopyFieldInput = React60__default.default.forwardRef(
 );
 CopyFieldInput.displayName = "CopyField.Field";
 var parseTokenValue32 = (value) => parseFloat(value);
-var StyledRoot8 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledRoot8 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue32(spacing.gap)
@@ -10010,13 +10012,13 @@ var FilterTabContext = React60__default.default.createContext({
   }
 });
 var parseTokenValue33 = (value) => parseFloat(value);
-var StyledRoot9 = styled60__default.default(reactNative.View)(({ rootGap }) => ({
+var StyledRoot9 = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
   flexWrap: "nowrap"
 }));
-var StyledItem2 = styled60__default.default(reactNative.Pressable)(
+var StyledItem2 = styled51__default.default(reactNative.Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -10067,7 +10069,7 @@ var FilterTabItem = React60__default.default.forwardRef(
     const isIconOnly = !!IconOnlyIcon && !label;
     const isActive = isSelected && !disabled;
     const { tabItem } = theme2.tokens.components.filterTabs;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const height = parseTokenValue33(
       size === "lg" ? tabItem.size.large.height : tabItem.size.small.height
     );
@@ -10092,7 +10094,7 @@ var FilterTabItem = React60__default.default.forwardRef(
         itemBgColor: isActive ? tabItem.colour.background.selected : tabItem.colour.background.default,
         itemOpacity: disabled ? parseFloat(tabItem.opacity.disabled.default) : 1,
         isIconOnly,
-        style: { gap: parseTokenValue33(dimensions.spacing["2xs"]) }
+        style: { gap: parseTokenValue33(dimensions3.spacing["2xs"]) }
       }, rest), {
         children: [
           isIconOnly && IconOnlyIcon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10191,7 +10193,7 @@ var FilterTab = Object.assign(FilterTabRoot, {
   Item: FilterTabItem
 });
 var parseTokenValue34 = (value) => parseFloat(value);
-var StyledFieldWrapper = styled60__default.default(reactNative.View)(
+var StyledFieldWrapper = styled51__default.default(reactNative.View)(
   ({
     fieldBgColor,
     fieldBorderColor,
@@ -10212,7 +10214,7 @@ var StyledFieldWrapper = styled60__default.default(reactNative.View)(
     overflow: "hidden"
   })
 );
-var StyledTextInput = styled60__default.default(reactNative.TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
+var StyledTextInput = styled51__default.default(reactNative.TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
   textAlign: "center",
   outlineStyle: "none",
   padding: 0,
@@ -10226,7 +10228,7 @@ var StyledTextInput = styled60__default.default(reactNative.TextInput)(({ inputC
   fontSize: inputFontSize,
   lineHeight: 0
 }));
-var StyledRow = styled60__default.default(reactNative.View)(({ rowGap }) => ({
+var StyledRow = styled51__default.default(reactNative.View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "center",
@@ -10274,7 +10276,7 @@ var NumberFieldInput = React60__default.default.forwardRef(
     var _a2;
     const theme2 = react.useTheme();
     const tokens3 = theme2.tokens.components.numberField;
-    const inputTokens = theme2.tokens.components.inputs;
+    const inputTokens3 = theme2.tokens.components.inputs;
     const [isFocused, setIsFocused] = React60__default.default.useState(false);
     const [isEdited, setIsEdited] = React60__default.default.useState(false);
     const initialValueRef = React60__default.default.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
@@ -10285,11 +10287,11 @@ var NumberFieldInput = React60__default.default.forwardRef(
     const fieldMinWidth = parseTokenValue34(fieldSizeTokens.minWidth);
     const fieldHeight = parseTokenValue34(fieldSizeTokens.height);
     const fieldPaddingHorizontal = parseTokenValue34(
-      inputTokens.spacing.field.horizontalPadding
+      inputTokens3.spacing.field.horizontalPadding
     );
     const getBorderColor = () => {
-      if (state === "error") return inputTokens.colour.field.border.error;
-      if (state === "success") return inputTokens.colour.field.border.success;
+      if (state === "error") return inputTokens3.colour.field.border.error;
+      if (state === "success") return inputTokens3.colour.field.border.success;
       if (isFocused) return tokens3.colour.field.border.selected;
       if (isEdited) return tokens3.colour.field.border.edited;
       return tokens3.colour.field.border.default;
@@ -10388,11 +10390,11 @@ var NumberFieldInput = React60__default.default.forwardRef(
 );
 NumberFieldInput.displayName = "NumberField.Input";
 var parseTokenValue35 = (value) => parseFloat(value);
-var StyledRoot10 = styled60__default.default(reactNative.View)(({ rootGap }) => ({
+var StyledRoot10 = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   alignItems: "center",
   gap: rootGap
 }));
-var StyledLabelGroup = styled60__default.default(reactNative.View)(({ labelGap }) => ({
+var StyledLabelGroup = styled51__default.default(reactNative.View)(({ labelGap }) => ({
   gap: labelGap
 }));
 var NumberField = React60__default.default.forwardRef(
@@ -10541,7 +10543,7 @@ var PasswordFieldInput = React60__default.default.forwardRef((_a, ref) => {
 });
 PasswordFieldInput.displayName = "PasswordField.Field";
 var parseTokenValue36 = (value) => parseFloat(value);
-var StyledErrorRow2 = styled60__default.default(reactNative.View)(({ gap }) => ({
+var StyledErrorRow2 = styled51__default.default(reactNative.View)(({ gap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap
@@ -10573,12 +10575,12 @@ var PasswordFieldError = React60__default.default.forwardRef((_a, ref) => {
 });
 PasswordFieldError.displayName = "PasswordField.Error";
 var parseTokenValue37 = (value) => parseFloat(value);
-var StyledRequirementsList = styled60__default.default(reactNative.View)(
+var StyledRequirementsList = styled51__default.default(reactNative.View)(
   ({ listGap }) => ({
     gap: listGap
   })
 );
-var StyledRequirementItem = styled60__default.default(reactNative.View)(
+var StyledRequirementItem = styled51__default.default(reactNative.View)(
   ({ itemGap }) => ({
     flexDirection: "row",
     alignItems: "center",
@@ -10635,7 +10637,7 @@ var PasswordFieldRequirements = React60__default.default.forwardRef((_a, ref) =>
 });
 PasswordFieldRequirements.displayName = "PasswordField.Requirements";
 var parseTokenValue38 = (value) => parseFloat(value);
-var StyledRoot11 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledRoot11 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue38(spacing.gap)
@@ -10749,19 +10751,19 @@ function usePasswordField({
   });
 }
 var parseTokenValue39 = (value) => parseFloat(value);
-var StyledRoot12 = styled60__default.default(reactNative.View)(({ rootGap }) => ({
+var StyledRoot12 = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "column",
   alignItems: "stretch",
   gap: rootGap,
   width: "100%"
 }));
-var StyledHeader2 = styled60__default.default(reactNative.View)({
+var StyledHeader2 = styled51__default.default(reactNative.View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledTrack = styled60__default.default(reactNative.View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
+var StyledTrack = styled51__default.default(reactNative.View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
   position: "relative",
   width: "100%",
   minWidth: trackMinWidth,
@@ -10770,7 +10772,7 @@ var StyledTrack = styled60__default.default(reactNative.View)(({ trackHeight, tr
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled60__default.default(reactNative.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled51__default.default(reactNative.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
@@ -10867,7 +10869,7 @@ var Progress = React60__default.default.forwardRef(
 );
 Progress.displayName = "Progress";
 var parseTokenValue40 = (value) => parseFloat(value);
-var StyledRadioRoot = styled60__default.default(reactNative.Pressable)(
+var StyledRadioRoot = styled51__default.default(reactNative.Pressable)(
   ({
     radioGap,
     radioOpacity,
@@ -10886,7 +10888,7 @@ var StyledRadioRoot = styled60__default.default(reactNative.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 = styled60__default.default(reactNative.View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
+var StyledRadioControl = styled51__default.default(reactNative.View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
   width: controlSize,
   height: controlSize,
   minWidth: controlSize,
@@ -10897,20 +10899,20 @@ var StyledRadioControl = styled60__default.default(reactNative.View)(({ controlS
   alignItems: "center",
   justifyContent: "center"
 }));
-var StyledIndicator2 = styled60__default.default(reactNative.View)(({ indicatorSize, indicatorBgColor }) => ({
+var StyledIndicator2 = styled51__default.default(reactNative.View)(({ indicatorSize, indicatorBgColor }) => ({
   width: indicatorSize,
   height: indicatorSize,
   borderRadius: indicatorSize / 2,
   backgroundColor: indicatorBgColor
 }));
-var StyledTextContent = styled60__default.default(reactNative.View)(({ textContentGap }) => ({
+var StyledTextContent = styled51__default.default(reactNative.View)(({ textContentGap }) => ({
   flexDirection: "column",
   gap: textContentGap
 }));
-var StyledAssetWrapper = styled60__default.default(reactNative.View)({
+var StyledAssetWrapper = styled51__default.default(reactNative.View)({
   alignSelf: "center"
 });
-var StyledTagWrapper = styled60__default.default(reactNative.View)(
+var StyledTagWrapper = styled51__default.default(reactNative.View)(
   ({ tagTopPadding }) => ({
     alignItems: "flex-start",
     paddingTop: tagTopPadding
@@ -11021,7 +11023,7 @@ var Radio = React60__default.default.forwardRef(
 );
 Radio.displayName = "Radio";
 var parseTokenValue41 = (value) => parseFloat(value);
-var StyledRadioGroup = styled60__default.default(reactNative.View)(({ groupDirection, groupGap }) => ({
+var StyledRadioGroup = styled51__default.default(reactNative.View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
@@ -11147,7 +11149,7 @@ var SearchFieldInput = React60__default.default.forwardRef((_a, ref) => {
 });
 SearchFieldInput.displayName = "SearchField.Field";
 var parseTokenValue42 = (value) => parseFloat(value);
-var StyledRoot13 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledRoot13 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue42(spacing.gap)
@@ -11224,7 +11226,7 @@ function useSearchField({
   };
 }
 var parseTokenValue43 = (value) => parseFloat(value);
-var StyledSegmentItem = styled60__default.default(reactNative.Pressable)(
+var StyledSegmentItem = styled51__default.default(reactNative.Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -11244,14 +11246,14 @@ var StyledSegmentItem = styled60__default.default(reactNative.Pressable)(
     opacity: itemOpacity
   }, itemFlex !== void 0 ? { flex: itemFlex } : { flexShrink: 0 })
 );
-var StyledIntrinsicClip = styled60__default.default(reactNative.View)(({ clipBorderRadius, clipBgColor, clipWidth }) => __spreadValues({
+var StyledIntrinsicClip = styled51__default.default(reactNative.View)(({ clipBorderRadius, clipBgColor, clipWidth }) => __spreadValues({
   overflow: "hidden",
   borderRadius: clipBorderRadius,
   backgroundColor: clipBgColor,
   alignSelf: "flex-start",
   maxWidth: "100%"
 }, clipWidth !== void 0 ? { width: clipWidth } : {}));
-var StyledScrollIndicator = styled60__default.default(reactNative.Pressable)(
+var StyledScrollIndicator = styled51__default.default(reactNative.Pressable)(
   ({
     indicatorSide,
     indicatorBorderRadius,
@@ -11307,7 +11309,7 @@ var ScrollIndicatorGradient = ({
     /* @__PURE__ */ jsxRuntime.jsx(Svg.Rect, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
   ] }) });
 };
-var StyledContainer2 = styled60__default.default(reactNative.View)(
+var StyledContainer2 = styled51__default.default(reactNative.View)(
   ({
     containerGap,
     containerPaddingVertical,
@@ -11503,7 +11505,7 @@ var SegmentedControlRoot = React60__default.default.forwardRef(
     var _a2, _b2;
     const theme2 = react.useTheme();
     const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
     const childrenArray = React60__default.default.Children.toArray(children);
     const firstChildValue = childrenArray.map((child) => {
@@ -11566,8 +11568,8 @@ var SegmentedControlRoot = React60__default.default.forwardRef(
       containerBorderRadius: parseTokenValue43(borderRadius.default),
       containerBgColor: colour.background.default,
       containerFullWidth: layout === "fixed",
-      scrollIndicatorPaddingOuter: parseTokenValue43(dimensions.spacing["2xl"]),
-      scrollIndicatorPaddingInner: parseTokenValue43(dimensions.spacing.sm)
+      scrollIndicatorPaddingOuter: parseTokenValue43(dimensions3.spacing["2xl"]),
+      scrollIndicatorPaddingInner: parseTokenValue43(dimensions3.spacing.sm)
     };
     if (layout === "intrinsic") {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11587,7 +11589,7 @@ var SegmentedControl = Object.assign(SegmentedControlRoot, {
   Item: SegmentedControlItem
 });
 var parseTokenValue44 = (value) => parseFloat(value);
-var StyledTriggerWrapper = styled60__default.default(reactNative.Animated.View)(({
+var StyledTriggerWrapper = styled51__default.default(reactNative.Animated.View)(({
   theme: theme2,
   state: _state
 }) => {
@@ -11603,12 +11605,12 @@ var StyledTriggerWrapper = styled60__default.default(reactNative.Animated.View)(
     borderRadius: parseTokenValue44(borderRadius.field.default)
   };
 });
-var StyledIconWrapper2 = styled60__default.default(reactNative.View)({
+var StyledIconWrapper2 = styled51__default.default(reactNative.View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledArrowIcon = styled60__default.default(reactNative.Animated.View)({
+var StyledArrowIcon = styled51__default.default(reactNative.Animated.View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
@@ -11694,7 +11696,7 @@ var SelectFieldTrigger = React60__default.default.forwardRef(
   }
 );
 SelectFieldTrigger.displayName = "SelectField.Trigger";
-var StyledValue = styled60__default.default(reactNative.Text)(({ theme: theme2 }) => {
+var StyledValue = styled51__default.default(reactNative.Text)(({ theme: theme2 }) => {
   const { colour } = theme2.tokens.components.inputs;
   return {
     flex: 1,
@@ -11713,7 +11715,7 @@ SelectFieldValue.displayName = "SelectField.Value";
 var parseTokenValue45 = (value) => parseFloat(value);
 var DROPDOWN_OFFSET_X = -32;
 var DROPDOWN_OFFSET_Y = -94;
-var StyledContentShadow = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledContentShadow = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const shadow = dropdown.list.dropshadow.default;
   return {
@@ -11732,7 +11734,7 @@ var StyledContentShadow = styled60__default.default(reactNative.View)(({ theme:
     ]
   };
 });
-var StyledContentInner = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledContentInner = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const { colour } = theme2.tokens.components.inputs;
   return {
@@ -11761,7 +11763,7 @@ var SelectFieldContent = React60__default.default.forwardRef((_a, ref) => {
 });
 SelectFieldContent.displayName = "SelectField.Content";
 var parseTokenValue46 = (value) => parseFloat(value);
-var StyledItem3 = styled60__default.default(reactNative.Pressable)(({ theme: theme2 }) => {
+var StyledItem3 = styled51__default.default(reactNative.Pressable)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
@@ -11775,12 +11777,12 @@ var StyledItem3 = styled60__default.default(reactNative.Pressable)(({ theme: the
     backgroundColor: dropdown.listItem.colour.background.default
   };
 });
-var StyledIconWrapper3 = styled60__default.default(reactNative.View)({
+var StyledIconWrapper3 = styled51__default.default(reactNative.View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledContentWrapper = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledContentWrapper = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
@@ -11790,17 +11792,17 @@ var StyledContentWrapper = styled60__default.default(reactNative.View)(({ theme:
     minWidth: 0
   };
 });
-var StyledTextWrapper2 = styled60__default.default(reactNative.View)({
+var StyledTextWrapper2 = styled51__default.default(reactNative.View)({
   flex: 1,
   minWidth: 0
 });
-var StyledItemText = styled60__default.default(reactNative.Text)(({ theme: theme2 }) => {
+var StyledItemText = styled51__default.default(reactNative.Text)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     color: dropdown.listItem.colour.text.placeholder.default
   };
 });
-var StyledHintText = styled60__default.default(reactNative.Text)(({ theme: theme2 }) => {
+var StyledHintText = styled51__default.default(reactNative.Text)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     color: dropdown.listItem.colour.text.hint.default,
@@ -11843,7 +11845,7 @@ var SelectFieldItem = React60__default.default.forwardRef(
 );
 SelectFieldItem.displayName = "SelectField.Item";
 var parseTokenValue47 = (value) => parseFloat(value);
-var StyledRoot14 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledRoot14 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue47(spacing.gap)
@@ -11976,13 +11978,269 @@ function useSelectField(options = {}) {
     onValueChange: handleValueChange
   }, validationRule && { state, error });
 }
+var themeTokens = pawprintTokens.DEFAULT_THEME_OPTIONS.tokens;
+var { components, semantics } = themeTokens;
+var inputTokens = components.inputs;
+var { dimensions } = semantics;
+var parseSize = (value) => {
+  return parseInt(value.replace("px", ""), 10);
+};
+var Wrapper = styled51__default.default(reactNative.View)({
+  borderWidth: parseSize(inputTokens.borderWidth.field.selected),
+  borderColor: inputTokens.colour.field.border.selected,
+  borderRadius: parseSize(inputTokens.borderRadius.field.default),
+  backgroundColor: inputTokens.colour.field.background.default,
+  paddingHorizontal: parseSize(inputTokens.spacing.field.horizontalPadding),
+  paddingVertical: parseSize(inputTokens.spacing.field.verticalPadding),
+  height: parseSize(inputTokens.size.field.height),
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between"
+});
+var SelectIcon = styled51__default.default(Animated10__default.default.View)({
+  position: "absolute",
+  right: 0,
+  marginRight: 0
+});
+var InputText = styled51__default.default(reactNative.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__default.default(reactNative.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__default.default(reactNative.View)({
+  flex: 1,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  justifyContent: "flex-end"
+});
+var AndroidDialog = styled51__default.default(reactNative.View)({
+  backgroundColor: inputTokens.colour.field.background.default,
+  borderTopLeftRadius: parseSize(dimensions.borderRadius.lg),
+  borderTopRightRadius: parseSize(dimensions.borderRadius.lg),
+  maxHeight: "80%",
+  minHeight: "40%",
+  paddingTop: parseSize(dimensions.spacing.md),
+  paddingBottom: parseSize(dimensions.spacing.xl),
+  paddingHorizontal: parseSize(dimensions.spacing.md)
+});
+var DialogTitle = styled51__default.default(reactNative.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__default.default(reactNative.View)({
+  flexDirection: "row",
+  alignItems: "center",
+  paddingVertical: parseSize(dimensions.spacing.md),
+  paddingHorizontal: parseSize(dimensions.spacing.sm),
+  borderBottomWidth: parseSize(dimensions.borderWidth.sm),
+  borderBottomColor: themeTokens.primitives.colour.brand.brown[2]
+});
+var RadioOuter = styled51__default.default(reactNative.View)({
+  width: parseSize(dimensions.spacing.lg),
+  height: parseSize(dimensions.spacing.lg),
+  borderRadius: parseSize(dimensions.spacing.lg) / 2,
+  borderWidth: parseSize(dimensions.borderWidth.md),
+  borderColor: inputTokens.colour.field.border.selected,
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: parseSize(dimensions.spacing.sm)
+});
+var RadioInner = styled51__default.default(reactNative.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__default.default(reactNative.Text)(
+  ({ isSelected }) => ({
+    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+    fontWeight: isSelected ? inputTokens.text.label.fontWeight : inputTokens.field.placeholder.default.fontWeight,
+    color: inputTokens.colour.field.text.default,
+    flex: 1
+  })
+);
+var themeTokens2 = pawprintTokens.DEFAULT_THEME_OPTIONS.tokens;
+var { components: components2, semantics: semantics2 } = themeTokens2;
+var inputTokens2 = components2.inputs;
+var { dimensions: dimensions2 } = semantics2;
+var parseSize2 = (value) => {
+  return parseInt(value.replace("px", ""), 10);
+};
+var useIconAnimation = () => {
+  const iconRotation = Animated10.useSharedValue(0);
+  const iconAnimationStyles = Animated10.useAnimatedStyle(() => {
+    "worklet";
+    return {
+      transform: [{ rotate: `${iconRotation.value}deg` }]
+    };
+  });
+  return {
+    iconAnimationStyles
+  };
+};
+var NativeSelectPicker = React60__default.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      items,
+      value,
+      placeholder,
+      onValueChange,
+      disabled = false,
+      hideIcon = false
+    } = _b, rest = __objRest(_b, [
+      "items",
+      "value",
+      "placeholder",
+      "onValueChange",
+      "disabled",
+      "hideIcon"
+    ]);
+    var _a2;
+    const [isOpen, setIsOpen] = React60.useState(false);
+    const { iconAnimationStyles } = useIconAnimation();
+    const hasPlaceholder = placeholder && Object.keys(placeholder).length > 0 && placeholder.label !== void 0;
+    const allItems = React60.useMemo(() => {
+      var _a3;
+      if (hasPlaceholder) {
+        return [
+          {
+            label: placeholder.label,
+            value: (_a3 = placeholder.value) != null ? _a3 : "",
+            key: "__placeholder__"
+          },
+          ...items
+        ];
+      }
+      return items;
+    }, [items, hasPlaceholder, placeholder]);
+    const selectedItem = allItems.find((item) => item.value === value);
+    const displayLabel = (_a2 = selectedItem == null ? void 0 : selectedItem.label) != null ? _a2 : hasPlaceholder ? placeholder.label : "";
+    const handleOpenIOS = React60.useCallback(() => {
+      if (disabled) return;
+      const options = [...allItems.map((item) => item.label), "Cancel"];
+      const cancelButtonIndex = options.length - 1;
+      reactNative.ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options,
+          cancelButtonIndex
+        },
+        (buttonIndex) => {
+          if (buttonIndex !== cancelButtonIndex) {
+            onValueChange(allItems[buttonIndex].value);
+          }
+        }
+      );
+    }, [disabled, allItems, onValueChange]);
+    const handleOpenAndroid = React60.useCallback(() => {
+      if (!disabled) {
+        setIsOpen(true);
+      }
+    }, [disabled]);
+    const handleClose = React60.useCallback(() => {
+      setIsOpen(false);
+    }, []);
+    const handleSelect = React60.useCallback(
+      (itemValue) => {
+        onValueChange(itemValue);
+        setIsOpen(false);
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.TouchableOpacity,
+        {
+          activeOpacity: 0.8,
+          onPress: reactNative.Platform.OS === "ios" ? handleOpenIOS : handleOpenAndroid,
+          disabled,
+          hitSlop: {
+            top: parseSize2(dimensions2.spacing.md),
+            right: parseSize2(dimensions2.spacing.md),
+            bottom: parseSize2(dimensions2.spacing.md),
+            left: parseSize2(dimensions2.spacing.md)
+          },
+          accessibilityRole: "button",
+          style: { flexDirection: "row", alignItems: "center" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InputText, { numberOfLines: 1, children: displayLabel || /* @__PURE__ */ jsxRuntime.jsx(PlaceholderText, { children: (placeholder == null ? void 0 : placeholder.label) || "Select" }) }),
+            !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(SelectIcon, { style: [iconAnimationStyles], children: /* @__PURE__ */ jsxRuntime.jsx(
+              KeyboardArrowDown_default,
+              {
+                width: parseSize2(dimensions2.spacing.xl),
+                height: parseSize2(dimensions2.spacing.xl),
+                color: inputTokens2.colour.field.text.default
+              }
+            ) })
+          ]
+        }
+      ),
+      reactNative.Platform.OS === "android" && /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Modal,
+        {
+          visible: isOpen,
+          transparent: true,
+          animationType: "fade",
+          onRequestClose: handleClose,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TouchableWithoutFeedback,
+            {
+              accessibilityRole: "button",
+              onPress: handleClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableWithoutFeedback, { children: /* @__PURE__ */ jsxRuntime.jsxs(AndroidDialog, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Select an option" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.FlatList,
+                  {
+                    data: allItems,
+                    keyExtractor: (item, index) => {
+                      var _a3, _b2;
+                      return (_b2 = (_a3 = item.key) == null ? void 0 : _a3.toString()) != null ? _b2 : `${item.value}-${index}`;
+                    },
+                    renderItem: ({ item }) => {
+                      const isSelected = item.value === value;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        reactNative.TouchableOpacity,
+                        {
+                          onPress: () => handleSelect(item.value),
+                          activeOpacity: 0.7,
+                          accessibilityRole: "button",
+                          children: /* @__PURE__ */ jsxRuntime.jsxs(AndroidOptionRow, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(RadioOuter, { children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(RadioInner, {}) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(AndroidOptionText, { isSelected, children: item.label })
+                          ] })
+                        }
+                      );
+                    },
+                    style: {
+                      maxHeight: parseSize2(dimensions2.spacing["8xl"])
+                    }
+                  }
+                )
+              ] }) }) })
+            }
+          )
+        }
+      )
+    ] }));
+  }
+);
+NativeSelectPicker.displayName = "NativeSelectPicker";
 var parseTokenValue48 = (value) => parseFloat(value);
-var StyledLabelRow2 = styled60__default.default(reactNative.View)(({ labelRowGap }) => ({
+var StyledLabelRow2 = styled51__default.default(reactNative.View)(({ labelRowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelRowGap
 }));
-var StyledLabelSlot = styled60__default.default(reactNative.View)(({ labelSlotGap }) => ({
+var StyledLabelSlot = styled51__default.default(reactNative.View)(({ labelSlotGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelSlotGap,
@@ -12021,7 +12279,7 @@ var Slider = React60__default.default.forwardRef(
     ]);
     const theme2 = react.useTheme();
     const { slider, buttons } = theme2.tokens.components;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledValue !== void 0;
     const [internalValue, setInternalValue] = React60__default.default.useState(defaultValue);
     const currentValue = isControlled ? controlledValue : internalValue;
@@ -12030,10 +12288,10 @@ var Slider = React60__default.default.forwardRef(
     const isWeb = reactNative.Platform.OS === "web";
     const [trackLayoutWidth, setTrackLayoutWidth] = React60.useState(0);
     const webFraction = max > min ? (currentValue - min) / (max - min) : 0;
-    const trackWidth = Animated9.useSharedValue(0);
-    const thumbLeft = Animated9.useSharedValue(0);
-    const indicatorWidth = Animated9.useSharedValue(thumbSize / 2);
-    const lastReported = Animated9.useSharedValue(currentValue);
+    const trackWidth = Animated10.useSharedValue(0);
+    const thumbLeft = Animated10.useSharedValue(0);
+    const indicatorWidth = Animated10.useSharedValue(thumbSize / 2);
+    const lastReported = Animated10.useSharedValue(currentValue);
     const handleJSUpdate = (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange == null ? void 0 : onValueChange(v);
@@ -12103,10 +12361,10 @@ var Slider = React60__default.default.forwardRef(
       "worklet";
       reactNativeWorklets.scheduleOnRN(handleCommit, lastReported.value);
     });
-    const thumbAnimStyle = Animated9.useAnimatedStyle(() => ({
+    const thumbAnimStyle = Animated10.useAnimatedStyle(() => ({
       transform: [{ translateX: thumbLeft.value }]
     }));
-    const indicatorAnimStyle = Animated9.useAnimatedStyle(() => ({
+    const indicatorAnimStyle = Animated10.useAnimatedStyle(() => ({
       width: indicatorWidth.value
     }));
     const handleWebValueChange = (values) => {
@@ -12122,7 +12380,7 @@ var Slider = React60__default.default.forwardRef(
     const hasLeading = leadingIcon !== void 0 || leadingLabel !== void 0;
     const hasTrailing = trailingIcon !== void 0 || trailingLabel !== void 0;
     const labelGap = parseTokenValue48(slider.sliderField.spacing.label.gap);
-    const roundBorderRadius = parseTokenValue48(dimensions.borderRadius.round);
+    const roundBorderRadius = parseTokenValue48(dimensions3.borderRadius.round);
     const thumbIconColor = buttons.iconButton.filledButton.colour.icon.primary.default;
     const thumbContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -12193,7 +12451,7 @@ var Slider = React60__default.default.forwardRef(
       height: trackHeight,
       borderRadius: roundBorderRadius,
       backgroundColor: slider.colour.track.background.default,
-      borderWidth: parseTokenValue48(dimensions.borderWidth.sm),
+      borderWidth: parseTokenValue48(dimensions3.borderWidth.sm),
       borderColor: slider.colour.track.border.default
     };
     const indicatorBaseStyle = {
@@ -12288,9 +12546,9 @@ var Slider = React60__default.default.forwardRef(
                 onLayout: handleNativeLayout,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: trackBackgroundStyle }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Animated9__default.default.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Animated10__default.default.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Animated9__default.default.View,
+                    Animated10__default.default.View,
                     {
                       style: [
                         __spreadProps(__spreadValues({}, thumbStyle), { position: "absolute", left: 0 }),
@@ -12318,7 +12576,7 @@ var ICON_MAP = {
   info: Info_default
 };
 var parseTokenValue49 = (value) => parseFloat(value);
-var StyledInlineRoot = styled60__default.default(reactNative.View)(
+var StyledInlineRoot = styled51__default.default(reactNative.View)(
   ({ rootPaddingH, rootPaddingV, rootGap, rootBorderRadius, rootBgColor }) => ({
     flexDirection: "row",
     alignItems: "flex-start",
@@ -12329,7 +12587,7 @@ var StyledInlineRoot = styled60__default.default(reactNative.View)(
     backgroundColor: rootBgColor
   })
 );
-var StyledToastRoot = styled60__default.default(reactNative.View)(
+var StyledToastRoot = styled51__default.default(reactNative.View)(
   ({
     rootPaddingH,
     rootPaddingV,
@@ -12356,7 +12614,7 @@ var StyledToastRoot = styled60__default.default(reactNative.View)(
     elevation: 4
   })
 );
-var StyledSystemRoot = styled60__default.default(reactNative.View)(
+var StyledSystemRoot = styled51__default.default(reactNative.View)(
   ({
     rootPaddingH,
     rootPaddingTop,
@@ -12376,31 +12634,31 @@ var StyledSystemRoot = styled60__default.default(reactNative.View)(
     width: "100%"
   })
 );
-var StyledContents = styled60__default.default(reactNative.View)(({ contentsGap }) => ({
+var StyledContents = styled51__default.default(reactNative.View)(({ contentsGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   flex: 1,
   minWidth: 0,
   gap: contentsGap
 }));
-var StyledCopyRow = styled60__default.default(reactNative.View)(({ copyGap }) => ({
+var StyledCopyRow = styled51__default.default(reactNative.View)(({ copyGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var StyledInlineCopy = styled60__default.default(reactNative.View)(({ copyGap }) => ({
+var StyledInlineCopy = styled51__default.default(reactNative.View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledLinkWrapper = styled60__default.default(reactNative.View)(({ linkPaddingLeft }) => ({
+var StyledLinkWrapper = styled51__default.default(reactNative.View)(({ linkPaddingLeft }) => ({
   paddingLeft: linkPaddingLeft,
   width: "100%"
 }));
-var StyledCloseButton = styled60__default.default(reactNative.Pressable)({
+var StyledCloseButton = styled51__default.default(reactNative.Pressable)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
@@ -12436,7 +12694,7 @@ var Notification = React60__default.default.forwardRef(
     if (variant === "system") {
       const isLarge = size === "lg";
       const sizeTokens = isLarge ? systemNotifications.notification.spacing.large : systemNotifications.notification.spacing.small;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         StyledSystemRoot,
         __spreadProps(__spreadValues({
           ref,
@@ -12449,7 +12707,7 @@ var Notification = React60__default.default.forwardRef(
           rootBgColor: bgMap[type],
           rootAlignCenter: isLarge
         }, rest), {
-          children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "column", flex: 1 }, children: [
             showIcon && /* @__PURE__ */ jsxRuntime.jsx(
               Icon,
               {
@@ -12459,27 +12717,31 @@ var Notification = React60__default.default.forwardRef(
                 "aria-label": type
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Typography,
-                {
-                  token: systemNotifications.notifications.typography.default,
-                  color: systemNotifications.notification.colour.text.default,
-                  children
-                }
-              ),
-              link && /* @__PURE__ */ jsxRuntime.jsx(
-                Link,
-                {
-                  href: link.href,
-                  onPress: link.onPress,
-                  weight: "semiBold",
-                  size: "md",
-                  children: link.label
-                }
-              )
-            ] })
-          ]
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                token: systemNotifications.notifications.typography.default,
+                color: systemNotifications.notification.colour.text.default,
+                children
+              }
+            ) }),
+            link && /* @__PURE__ */ jsxRuntime.jsx(
+              StyledLinkWrapper,
+              {
+                linkPaddingLeft: parseTokenValue49(sizeTokens.content.gap),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Link,
+                  {
+                    href: link.href,
+                    onPress: link.onPress,
+                    weight: "semiBold",
+                    size: "md",
+                    children: link.label
+                  }
+                )
+              }
+            )
+          ] })
         })
       );
     }
@@ -12572,59 +12834,57 @@ var Notification = React60__default.default.forwardRef(
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
-              showIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                Icon,
-                {
-                  icon: IconComponent,
-                  size: "md",
-                  colour: type,
-                  "aria-label": type
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                StyledInlineCopy,
-                {
-                  copyGap: parseTokenValue49(content.copy.spacing.gap),
-                  children: [
-                    title && /* @__PURE__ */ jsxRuntime.jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.title,
-                        color: colour.text.title,
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.body,
-                        color: colour.text.body,
-                        children
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            link && /* @__PURE__ */ jsxRuntime.jsx(
-              StyledLinkWrapper,
+          /* @__PURE__ */ jsxRuntime.jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+            showIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              Icon,
               {
-                linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Link,
-                  {
-                    href: link.href,
-                    onPress: link.onPress,
-                    weight: "semiBold",
-                    size: "md",
-                    children: link.label
-                  }
-                )
+                icon: IconComponent,
+                size: "md",
+                colour: type,
+                "aria-label": type
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              StyledInlineCopy,
+              {
+                copyGap: parseTokenValue49(content.copy.spacing.gap),
+                children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.title,
+                      color: colour.text.title,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.body,
+                      color: colour.text.body,
+                      children
+                    }
+                  ),
+                  link && /* @__PURE__ */ jsxRuntime.jsx(
+                    StyledLinkWrapper,
+                    {
+                      linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Link,
+                        {
+                          href: link.href,
+                          onPress: link.onPress,
+                          weight: "semiBold",
+                          size: "md",
+                          children: link.label
+                        }
+                      )
+                    }
+                  )
+                ]
               }
             )
-          ] }),
+          ] }) }),
           onClose && /* @__PURE__ */ jsxRuntime.jsx(
             StyledCloseButton,
             {
@@ -12646,10 +12906,10 @@ var NIB_OFFSET = {
   middle: 146,
   right: 268
 };
-var Container2 = styled60__default.default(reactNative.View)(({ $width }) => ({
+var Container2 = styled51__default.default(reactNative.View)(({ $width }) => ({
   width: $width
 }));
-var StyledBody = styled60__default.default(reactNative.View)(
+var StyledBody = styled51__default.default(reactNative.View)(
   ({
     bgColor,
     borderColor,
@@ -12879,7 +13139,7 @@ var Tooltip = React60__default.default.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue51 = (value) => parseFloat(value);
-var StyledInsightRoot = styled60__default.default(reactNative.View)(
+var StyledInsightRoot = styled51__default.default(reactNative.View)(
   ({
     rootGap,
     rootPaddingH,
@@ -12906,7 +13166,7 @@ var StyledInsightRoot = styled60__default.default(reactNative.View)(
     minWidth: rootMinWidth
   })
 );
-var StyledInsightContent = styled60__default.default(reactNative.View)(
+var StyledInsightContent = styled51__default.default(reactNative.View)(
   ({ contentGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -12986,7 +13246,7 @@ var MessageCardInsight = React60__default.default.forwardRef(
   }
 );
 MessageCardInsight.displayName = "MessageCard.Insight";
-var StyledBannerRoot = styled60__default.default(reactNative.View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
+var StyledBannerRoot = styled51__default.default(reactNative.View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
@@ -12994,7 +13254,7 @@ var StyledBannerRoot = styled60__default.default(reactNative.View)(({ rootGap, r
   borderRadius: rootBorderRadius,
   backgroundColor: rootBgColor
 }));
-var StyledBannerImage = styled60__default.default(reactNative.View)(({ imageRadius, imageBgColor }) => ({
+var StyledBannerImage = styled51__default.default(reactNative.View)(({ imageRadius, imageBgColor }) => ({
   flexShrink: 0,
   width: 108,
   height: 108,
@@ -13002,14 +13262,14 @@ var StyledBannerImage = styled60__default.default(reactNative.View)(({ imageRadi
   overflow: "hidden",
   backgroundColor: imageBgColor
 }));
-var StyledBannerIllustrationSlot = styled60__default.default(reactNative.View)({
+var StyledBannerIllustrationSlot = styled51__default.default(reactNative.View)({
   flexShrink: 0,
   width: 108,
   height: 108,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledBannerContents = styled60__default.default(reactNative.View)(
+var StyledBannerContents = styled51__default.default(reactNative.View)(
   ({ contentsGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -13019,7 +13279,7 @@ var StyledBannerContents = styled60__default.default(reactNative.View)(
     minWidth: 0
   })
 );
-var StyledBannerCopy = styled60__default.default(reactNative.View)(({ copyGap }) => ({
+var StyledBannerCopy = styled51__default.default(reactNative.View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
@@ -13045,15 +13305,15 @@ var MessageCardBanner = React60__default.default.forwardRef(
       "onLinkPress"
     ]);
     const theme2 = react.useTheme();
-    const { colour, dimensions } = theme2.tokens.semantics;
+    const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const bgColor = colourScheme === "secondary" ? colour.background.container.secondary : colour.background.container.alt;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledBannerRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue51(dimensions.spacing.md),
-        rootPadding: parseTokenValue51(dimensions.spacing.md),
-        rootBorderRadius: parseTokenValue51(dimensions.borderRadius.md),
+        rootGap: parseTokenValue51(dimensions3.spacing.md),
+        rootPadding: parseTokenValue51(dimensions3.spacing.md),
+        rootBorderRadius: parseTokenValue51(dimensions3.borderRadius.md),
         rootBgColor: bgColor,
         accessible: true,
         accessibilityRole: "summary"
@@ -13065,7 +13325,7 @@ var MessageCardBanner = React60__default.default.forwardRef(
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
             StyledBannerImage,
             {
-              imageRadius: parseTokenValue51(dimensions.borderRadius.sm),
+              imageRadius: parseTokenValue51(dimensions3.borderRadius.sm),
               imageBgColor: colour.background.surface.secondary,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.Image,
@@ -13081,12 +13341,12 @@ var MessageCardBanner = React60__default.default.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             StyledBannerContents,
             {
-              contentsGap: parseTokenValue51(dimensions.spacing.xs),
+              contentsGap: parseTokenValue51(dimensions3.spacing.xs),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   StyledBannerCopy,
                   {
-                    copyGap: parseTokenValue51(dimensions.spacing["3xs"]),
+                    copyGap: parseTokenValue51(dimensions3.spacing["3xs"]),
                     children: [
                       title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),
                       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children })
@@ -13118,14 +13378,14 @@ var MessageCard = {
   Banner: MessageCardBanner
 };
 var parseTokenValue52 = (value) => parseFloat(value);
-var slideEaseOut = Animated9.Easing.out(Animated9.Easing.quad);
+var slideEaseOut = Animated10.Easing.out(Animated10.Easing.quad);
 var MONTH_SLIDE_ENTERING = {
-  forward: Animated9.FadeInRight.duration(250).easing(slideEaseOut),
-  backward: Animated9.FadeInLeft.duration(250).easing(slideEaseOut)
+  forward: Animated10.FadeInRight.duration(250).easing(slideEaseOut),
+  backward: Animated10.FadeInLeft.duration(250).easing(slideEaseOut)
 };
 var MONTH_SLIDE_EXITING = {
-  forward: Animated9.FadeOutLeft.duration(200),
-  backward: Animated9.FadeOutRight.duration(200)
+  forward: Animated10.FadeOutLeft.duration(200),
+  backward: Animated10.FadeOutRight.duration(200)
 };
 var DEFAULT_WEEK_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 function buildCalendarGrid(year, month) {
@@ -13158,22 +13418,22 @@ function defaultGetDateState(date) {
 function getDefaultMonthLabel(year, month, locale) {
   return dateFns.format(new Date(year, month, 1), "MMMM yyyy", { locale });
 }
-var StyledContainer3 = styled60__default.default(reactNative.View)(({ containerGap, containerMaxWidth }) => ({
+var StyledContainer3 = styled51__default.default(reactNative.View)(({ containerGap, containerMaxWidth }) => ({
   flexDirection: "column",
   gap: containerGap,
   maxWidth: containerMaxWidth
 }));
-var StyledMonthHeader = styled60__default.default(reactNative.View)(
+var StyledMonthHeader = styled51__default.default(reactNative.View)(
   ({ headerGap }) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: headerGap
   })
 );
-var StyledWeekRow = styled60__default.default(reactNative.View)({
+var StyledWeekRow = styled51__default.default(reactNative.View)({
   flexDirection: "row"
 });
-var StyledWeekCell = styled60__default.default(reactNative.View)(
+var StyledWeekCell = styled51__default.default(reactNative.View)(
   ({ cellHeight }) => ({
     flex: 1,
     alignItems: "center",
@@ -13181,14 +13441,14 @@ var StyledWeekCell = styled60__default.default(reactNative.View)(
     height: cellHeight
   })
 );
-var StyledDatesGrid = styled60__default.default(reactNative.View)(({ rowGap }) => ({
+var StyledDatesGrid = styled51__default.default(reactNative.View)(({ rowGap }) => ({
   flexDirection: "column",
   gap: rowGap
 }));
-var StyledDateRow = styled60__default.default(reactNative.View)({
+var StyledDateRow = styled51__default.default(reactNative.View)({
   flexDirection: "row"
 });
-var StyledDateCell = styled60__default.default(reactNative.View)(
+var StyledDateCell = styled51__default.default(reactNative.View)(
   ({ cellHeight }) => ({
     flex: 1,
     height: cellHeight,
@@ -13196,7 +13456,7 @@ var StyledDateCell = styled60__default.default(reactNative.View)(
     justifyContent: "center"
   })
 );
-var StyledIndicator3 = styled60__default.default(reactNative.View)(
+var StyledIndicator3 = styled51__default.default(reactNative.View)(
   ({
     indicatorSize,
     indicatorBorderRadius,
@@ -13442,7 +13702,7 @@ var DatePicker = React60__default.default.forwardRef(
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Animated9__default.default.View,
+            Animated10__default.default.View,
             {
               entering: MONTH_SLIDE_ENTERING[slideDir],
               exiting: MONTH_SLIDE_EXITING[slideDir],
@@ -13561,25 +13821,25 @@ var buildPointerPath = (r) => {
   ].join(" ");
 };
 var parseTokenValue53 = (value) => parseFloat(value);
-var StyledRoot15 = styled60__default.default(reactNative.View)(({ rootGap }) => ({
+var StyledRoot15 = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
   width: "100%"
 }));
-var StyledRow2 = styled60__default.default(reactNative.View)(({ rowGap }) => ({
+var StyledRow2 = styled51__default.default(reactNative.View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: rowGap,
   width: "100%"
 }));
-var StyledItemStack = styled60__default.default(reactNative.View)(({ stackGap }) => ({
+var StyledItemStack = styled51__default.default(reactNative.View)(({ stackGap }) => ({
   flexDirection: "column",
   alignItems: "center",
   gap: stackGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledPictureButton = styled60__default.default(reactNative.Pressable)(
+var StyledPictureButton = styled51__default.default(reactNative.Pressable)(
   ({
     buttonBorderRadius,
     buttonBorderWidth,
@@ -13606,7 +13866,7 @@ var StyledPictureButton = styled60__default.default(reactNative.Pressable)(
     overflow: "hidden"
   })
 );
-var StyledPointer = styled60__default.default(Svg__default.default)(
+var StyledPointer = styled51__default.default(Svg__default.default)(
   ({ pointerVisible }) => ({
     width: POINTER_WIDTH,
     height: POINTER_HEIGHT,
@@ -13759,13 +14019,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 = styled60__default.default(reactNative.View)(({ rootGap }) => ({
+var StackedRoot = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "flex-start",
   gap: rootGap
 }));
-var StackedItem = styled60__default.default(reactNative.View)(
+var StackedItem = styled51__default.default(reactNative.View)(
   ({
     itemGap,
     itemVerticalPadding,
@@ -13783,7 +14043,7 @@ var StackedItem = styled60__default.default(reactNative.View)(
     borderRadius: itemBorderRadius
   })
 );
-var StackedCountBox = styled60__default.default(reactNative.View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
+var StackedCountBox = styled51__default.default(reactNative.View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
   alignItems: "center",
   justifyContent: "center",
   // TODO: Add token — fixed count box dimensions are not yet tokenised.
@@ -13793,7 +14053,7 @@ var StackedCountBox = styled60__default.default(reactNative.View)(({ countPaddin
   backgroundColor: countBgColor,
   borderRadius: countBorderRadius
 }));
-var InlineRoot = styled60__default.default(reactNative.View)(
+var InlineRoot = styled51__default.default(reactNative.View)(
   ({
     rootGap,
     rootVerticalPadding,
@@ -13813,13 +14073,13 @@ var InlineRoot = styled60__default.default(reactNative.View)(
     overflow: "hidden"
   })
 );
-var InlineGroup = styled60__default.default(reactNative.View)(({ groupGap }) => ({
+var InlineGroup = styled51__default.default(reactNative.View)(({ groupGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-end",
   gap: groupGap
 }));
-var InlineCount = styled60__default.default(reactNative.View)(({ countGap }) => ({
+var InlineCount = styled51__default.default(reactNative.View)(({ countGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: countGap
@@ -14004,7 +14264,7 @@ var parseTokenValue55 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var BadgeContainer = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var BadgeContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
@@ -14021,7 +14281,7 @@ var BadgeContainer = styled60__default.default(reactNative.View)(({ theme: theme
     borderBottomRightRadius: parseTokenValue55(borderRadius.xs)
   };
 });
-var BadgeIcon = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var BadgeIcon = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const sizing = theme2.tokens.semantics.dimensions.sizing;
   return {
@@ -14044,7 +14304,7 @@ var Badge2 = React60__default.default.forwardRef(
   }
 );
 Badge2.displayName = "ProductListingCard.Badge";
-var StyledGrid = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledGrid = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "grid",
@@ -14083,7 +14343,7 @@ var parseTokenValue56 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var StyledRoot16 = styled60__default.default(reactNative.Pressable)(({ theme: theme2 }) => {
+var StyledRoot16 = styled51__default.default(reactNative.Pressable)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14093,18 +14353,18 @@ var StyledRoot16 = styled60__default.default(reactNative.Pressable)(({ theme: th
     width: "100%"
   };
 });
-var ImageContainer = styled60__default.default(reactNative.View)({
+var ImageContainer = styled51__default.default(reactNative.View)({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
   overflow: "hidden"
 });
-var StyledImage2 = styled60__default.default(reactNative.Image)({
+var StyledImage2 = styled51__default.default(reactNative.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var BadgeContainer2 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
@@ -14124,7 +14384,7 @@ var BadgeContainer2 = styled60__default.default(reactNative.View)(({ theme: them
     borderBottomRightRadius: parseTokenValue56(borderRadius.sm)
   };
 });
-var ContentContainer = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var ContentContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14134,19 +14394,19 @@ var ContentContainer = styled60__default.default(reactNative.View)(({ theme: the
     width: "100%"
   };
 });
-var DetailsContainer = styled60__default.default(reactNative.View)({
+var DetailsContainer = styled51__default.default(reactNative.View)({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   width: "100%"
 });
-var CategoryWrapper = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var CategoryWrapper = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var TitleContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14155,13 +14415,13 @@ var TitleContainer = styled60__default.default(reactNative.View)(({ theme: theme
     marginBottom: parseTokenValue56(spacing.xs)
   };
 });
-var SizeWrapper = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var SizeWrapper = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     marginBottom: parseTokenValue56(spacing.md)
   };
 });
-var PricingContainer = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var PricingContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14244,7 +14504,7 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled60__default.default(reactNative.View)(({
+var StyledCardContainer = styled51__default.default(reactNative.View)(({
   theme: theme2,
   borderless
 }) => {
@@ -14272,7 +14532,7 @@ var StyledCardContainer = styled60__default.default(reactNative.View)(({
     zIndex: 1
   });
 });
-var StyledImage3 = styled60__default.default(reactNative.View)(
+var StyledImage3 = styled51__default.default(reactNative.View)(
   ({
     theme: theme2,
     imageBackgroundColor,
@@ -14288,7 +14548,7 @@ var StyledImage3 = styled60__default.default(reactNative.View)(
     position: "relative"
   })
 );
-var StyledQuantityBadge = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledQuantityBadge = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const borderRadius = theme2.tokens.semantics.dimensions.borderRadius;
   const { colour } = theme2.tokens.semantics;
@@ -14306,7 +14566,7 @@ var StyledQuantityBadge = styled60__default.default(reactNative.View)(({ theme:
     zIndex: 2
   };
 });
-var StyledContentArea = styled60__default.default(reactNative.View)(({
+var StyledContentArea = styled51__default.default(reactNative.View)(({
   theme: theme2,
   borderless
 }) => {
@@ -14320,23 +14580,23 @@ var StyledContentArea = styled60__default.default(reactNative.View)(({
     justifyContent: "space-between"
   };
 });
-var StyledTextContainer = styled60__default.default(reactNative.View)(() => ({
+var StyledTextContainer = styled51__default.default(reactNative.View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled60__default.default(reactNative.View)(() => ({
+var StyledBannerWrapper = styled51__default.default(reactNative.View)(() => ({
   width: "100%",
   marginTop: -48,
   paddingTop: 24,
   paddingBottom: 16
 }));
-var StyledRootWrapper = styled60__default.default(reactNative.View)(() => {
+var StyledRootWrapper = styled51__default.default(reactNative.View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
     height: "100%"
   };
 });
-var StyledNotification = styled60__default.default(Notification)(({ theme: theme2 }) => {
+var StyledNotification = styled51__default.default(Notification)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   return {
     top: parseTokenValue8(spacing.md),
@@ -14475,12 +14735,12 @@ var useTabNavigationContext = () => {
   return context;
 };
 var parseTokenValue57 = (value) => parseFloat(value);
-var StyledFixedList = styled60__default.default(reactNative.View)({
+var StyledFixedList = styled51__default.default(reactNative.View)({
   flexDirection: "row",
   alignItems: "stretch",
   width: "100%"
 });
-var StyledTab = styled60__default.default(reactNative.Pressable)(
+var StyledTab = styled51__default.default(reactNative.Pressable)(
   ({
     tabHeight,
     tabMinWidth,
@@ -14526,7 +14786,7 @@ var TabNavigationList = React60__default.default.forwardRef(
 TabNavigationList.displayName = "TabNavigation.List";
 var TabNavigationTab = React60__default.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { value, disabled = false, children } = _b, rest = __objRest(_b, ["value", "disabled", "children"]);
+    var _b = _a, { value, disabled = false, icon, avatar, children } = _b, rest = __objRest(_b, ["value", "disabled", "icon", "avatar", "children"]);
     const { layout } = useTabNavigationContext();
     const { value: selectedValue } = TabsPrimitive__namespace.useRootContext();
     const theme2 = react.useTheme();
@@ -14536,7 +14796,7 @@ var TabNavigationTab = React60__default.default.forwardRef(
     const token = selected ? typography.selected : typography.default;
     const borderColour = selected ? colour.border.default : colour.border.disabled;
     const textColour = disabled ? theme2.tokens.primitives.colour.brand.brown["5"] : colour.text.default;
-    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
@@ -14550,7 +14810,11 @@ var TabNavigationTab = React60__default.default.forwardRef(
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
-        children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color: textColour, children })
+        children: [
+          avatar && /* @__PURE__ */ jsxRuntime.jsx(Avatar, __spreadValues({}, avatar)),
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, customColour: textColour, "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color: textColour, children })
+        ]
       })
     ) });
   }
@@ -14630,7 +14894,7 @@ Object.defineProperty(exports, "tokens", {
 });
 Object.defineProperty(exports, "styled", {
   enumerable: true,
-  get: function () { return styled60__default.default; }
+  get: function () { return styled51__default.default; }
 });
 exports.Accordion = Accordion;
 exports.Animated = Animated5;
@@ -14663,6 +14927,7 @@ exports.Logo = Logo;
 exports.MessageCard = MessageCard;
 exports.MessageCardBanner = MessageCardBanner;
 exports.MessageCardInsight = MessageCardInsight;
+exports.NativeSelectPicker = NativeSelectPicker;
 exports.Notification = Notification;
 exports.NumberField = NumberField;
 exports.NumberInput = NumberInput;