@butternutbox/pawprint-native 0.10.5 → 0.10.7

package/dist/index.d.cts

@@ -429,6 +429,7 @@ type InputFieldOwnProps = {
     hideStateIcons?: boolean;
     containerWidth?: number;
     containerHeight?: number;
+    hasInlineHelp?: boolean;
 };
 type InputFieldProps = InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps>;
 /**
@@ -573,6 +574,7 @@ declare function registerLogo(brand: LogoBrand, variant: LogoVariant, component:
 
 type NumberInputFieldOwnProps = {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps>;
 /**
@@ -580,10 +582,11 @@ type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, ke
  * Renders a centered number input sized to `numberField.size.large.height`.
  * When fieldText is provided, wraps input + text in a horizontal group.
  */
-declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, "fieldText"> & React.RefAttributes<TextInput>>;
+declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps> & React.RefAttributes<TextInput>>;
 
 type NumberInputOwnProps = Pick<InputProps, "label" | "description" | "error" | "state" | "optionalText" | "onValueChange"> & {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputProps = NumberInputOwnProps & Omit<InputFieldProps, keyof NumberInputOwnProps> & Omit<ViewProps, keyof NumberInputOwnProps>;
 declare const StyledRoot$5: _emotion_native.StyledComponent<ViewProps & {
@@ -907,12 +910,13 @@ type DrawerTriggerProps = {
 };
 type DrawerPortalProps = {
     children: React.ReactNode;
+    topContent?: React.ReactNode;
 };
 declare const Drawer: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>> & {
     Root: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>>;
     Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<View>>;
     Portal: {
-        ({ children }: DrawerPortalProps): react_jsx_runtime.JSX.Element | null;
+        ({ children, topContent }: DrawerPortalProps): react_jsx_runtime.JSX.Element | null;
         displayName: string;
     };
     Overlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<View>>;
@@ -1144,6 +1148,7 @@ type NumberFieldInputOwnProps = {
     decrementDisabled?: boolean;
     min?: number;
     max?: number;
+    inlineHelpText?: string;
 };
 type NumberFieldInputProps = NumberFieldInputOwnProps & Omit<TextInputProps, keyof NumberFieldInputOwnProps>;
 
@@ -2225,4 +2230,4 @@ type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps
 };
 declare const TabNavigation: TabNavigationComponent;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };

package/dist/index.d.ts

@@ -429,6 +429,7 @@ type InputFieldOwnProps = {
     hideStateIcons?: boolean;
     containerWidth?: number;
     containerHeight?: number;
+    hasInlineHelp?: boolean;
 };
 type InputFieldProps = InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps>;
 /**
@@ -573,6 +574,7 @@ declare function registerLogo(brand: LogoBrand, variant: LogoVariant, component:
 
 type NumberInputFieldOwnProps = {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps>;
 /**
@@ -580,10 +582,11 @@ type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, ke
  * Renders a centered number input sized to `numberField.size.large.height`.
  * When fieldText is provided, wraps input + text in a horizontal group.
  */
-declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, "fieldText"> & React.RefAttributes<TextInput>>;
+declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps> & React.RefAttributes<TextInput>>;
 
 type NumberInputOwnProps = Pick<InputProps, "label" | "description" | "error" | "state" | "optionalText" | "onValueChange"> & {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputProps = NumberInputOwnProps & Omit<InputFieldProps, keyof NumberInputOwnProps> & Omit<ViewProps, keyof NumberInputOwnProps>;
 declare const StyledRoot$5: _emotion_native.StyledComponent<ViewProps & {
@@ -907,12 +910,13 @@ type DrawerTriggerProps = {
 };
 type DrawerPortalProps = {
     children: React.ReactNode;
+    topContent?: React.ReactNode;
 };
 declare const Drawer: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>> & {
     Root: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>>;
     Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<View>>;
     Portal: {
-        ({ children }: DrawerPortalProps): react_jsx_runtime.JSX.Element | null;
+        ({ children, topContent }: DrawerPortalProps): react_jsx_runtime.JSX.Element | null;
         displayName: string;
     };
     Overlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<View>>;
@@ -1144,6 +1148,7 @@ type NumberFieldInputOwnProps = {
     decrementDisabled?: boolean;
     min?: number;
     max?: number;
+    inlineHelpText?: string;
 };
 type NumberFieldInputProps = NumberFieldInputOwnProps & Omit<TextInputProps, keyof NumberFieldInputOwnProps>;
 
@@ -2225,4 +2230,4 @@ type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps
 };
 declare const TabNavigation: TabNavigationComponent;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };

package/dist/index.js

@@ -4798,7 +4798,10 @@ var StyledInputWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled, c
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
+var StyledInput = styled50(TextInput)(({
+  theme: theme2,
+  hasInlineHelp
+}) => {
   var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
   const typography = field.placeholder.default;
@@ -4808,7 +4811,7 @@ var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
   );
   const fontSize = parseTokenValue12(typography.fontSize);
   const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
-  return __spreadValues({
+  return __spreadValues(__spreadValues({
     flex: 1,
     minWidth: 0,
     minHeight: 0,
@@ -4817,7 +4820,7 @@ var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
     fontFamily,
     fontSize,
     letterSpacing
-  }, {
+  }, hasInlineHelp ? { position: "relative", top: -8 } : {}), {
     outlineStyle: "none",
     outlineWidth: 0,
     outlineColor: "transparent"
@@ -4842,6 +4845,7 @@ var InputField = React65.forwardRef(
       hideStateIcons,
       containerWidth,
       containerHeight,
+      hasInlineHelp,
       style,
       editable,
       onFocus,
@@ -4854,6 +4858,7 @@ var InputField = React65.forwardRef(
       "hideStateIcons",
       "containerWidth",
       "containerHeight",
+      "hasInlineHelp",
       "style",
       "editable",
       "onFocus",
@@ -4976,7 +4981,8 @@ var InputField = React65.forwardRef(
               placeholderTextColor: colour.field.text.placeholder,
               editable,
               onFocus: handleFocus,
-              onBlur: handleBlur
+              onBlur: handleBlur,
+              hasInlineHelp
             }, rest)
           ),
           trailingIcon && /* @__PURE__ */ jsx(StyledIconSlot, { children: trailingIcon }),
@@ -7727,8 +7733,12 @@ var StyledFieldTextWrapper = styled50(View)({
   flexShrink: 0,
   justifyContent: "center"
 });
+var StyledInputContainer = styled50(View)(({ hasInlineHelp }) => ({
+  flexDirection: "column",
+  gap: hasInlineHelp ? 2 : 0
+}));
 var NumberInputField = React65.forwardRef((_a, ref) => {
-  var _b = _a, { fieldText } = _b, props = __objRest(_b, ["fieldText"]);
+  var _b = _a, { fieldText, inlineHelpText } = _b, props = __objRest(_b, ["fieldText", "inlineHelpText"]);
   const theme2 = useTheme();
   const { colour, description } = theme2.tokens.components.inputs;
   const fieldSize = parseTokenValue14(
@@ -7740,15 +7750,47 @@ var NumberInputField = React65.forwardRef((_a, ref) => {
       keyboardType: "numeric",
       hideStateIcons: true,
       containerWidth: fieldSize,
-      containerHeight: fieldSize,
+      containerHeight: inlineHelpText ? void 0 : fieldSize,
+      hasInlineHelp: !!inlineHelpText,
       ref,
       style: { textAlign: "center" }
     }, props)
   );
-  if (!fieldText) {
-    return inputElement;
-  }
-  return /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
+  const fieldContent = inlineHelpText && fieldText ? /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
+    /* @__PURE__ */ jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+      inputElement,
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            position: "absolute",
+            bottom: 4,
+            left: 0,
+            width: fieldSize,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: description.text.default,
+              color: colour.description.default,
+              children: inlineHelpText
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        token: description.text.default,
+        color: colour.description.default,
+        children: fieldText
+      }
+    ) })
+  ] }) : fieldText ? /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
     inputElement,
     /* @__PURE__ */ jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsx(
       Typography,
@@ -7758,7 +7800,31 @@ var NumberInputField = React65.forwardRef((_a, ref) => {
         children: fieldText
       }
     ) })
-  ] });
+  ] }) : inlineHelpText ? /* @__PURE__ */ jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+    inputElement,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          position: "absolute",
+          bottom: 4,
+          width: fieldSize,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            token: description.text.default,
+            color: colour.description.default,
+            children: inlineHelpText
+          }
+        )
+      }
+    )
+  ] }) : inputElement;
+  return fieldContent;
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue15 = (value) => parseFloat(value);
@@ -7778,6 +7844,7 @@ var NumberInputRoot = React65.forwardRef(
       optionalText,
       onValueChange,
       fieldText,
+      inlineHelpText,
       children
     } = _b, inputProps = __objRest(_b, [
       "label",
@@ -7787,6 +7854,7 @@ var NumberInputRoot = React65.forwardRef(
       "optionalText",
       "onValueChange",
       "fieldText",
+      "inlineHelpText",
       "children"
     ]);
     if (children) {
@@ -7799,7 +7867,8 @@ var NumberInputRoot = React65.forwardRef(
         __spreadValues({
           state,
           onChangeText: onValueChange,
-          fieldText
+          fieldText,
+          inlineHelpText
         }, inputProps)
       ),
       description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
@@ -9427,7 +9496,7 @@ var DrawerTrigger = React65.forwardRef(
   }
 );
 DrawerTrigger.displayName = "Drawer.Trigger";
-var DrawerPortal = ({ children }) => {
+var DrawerPortal = ({ children, topContent }) => {
   const { modalVisible, closeDrawer } = React65.useContext(DrawerContext);
   if (!modalVisible) return null;
   return /* @__PURE__ */ jsx(
@@ -9438,7 +9507,10 @@ var DrawerPortal = ({ children }) => {
       animationType: "none",
       statusBarTranslucent: true,
       onRequestClose: closeDrawer,
-      children: /* @__PURE__ */ jsx(View, { style: styles3.modalContainer, children })
+      children: /* @__PURE__ */ jsxs(View, { style: styles3.modalContainer, children: [
+        children,
+        topContent
+      ] })
     }
   );
 };
@@ -10181,6 +10253,7 @@ var StyledFieldWrapper = styled50(View)(
   }) => __spreadValues({
     alignItems: "center",
     justifyContent: "center",
+    position: "relative",
     width: fullWidth ? "100%" : fieldMinWidth,
     minWidth: fieldMinWidth,
     height: fieldHeight,
@@ -10192,20 +10265,27 @@ var StyledFieldWrapper = styled50(View)(
     overflow: "hidden"
   }, fullWidth && { flex: 1 })
 );
-var StyledTextInput = styled50(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
-  textAlign: "center",
-  outlineStyle: "none",
-  padding: 0,
-  minWidth: 0,
-  minHeight: 0,
-  width: "100%",
-  height: "100%",
-  color: inputColor,
-  fontFamily: inputFontFamily
-}, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
-  fontSize: inputFontSize,
-  lineHeight: 0
-}));
+var StyledTextInput = styled50(TextInput)(
+  ({
+    inputColor,
+    inputFontFamily,
+    inputFontWeight,
+    inputFontSize,
+    hasInlineHelp
+  }) => __spreadValues(__spreadProps(__spreadValues({
+    textAlign: "center",
+    outlineStyle: "none",
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    height: "100%",
+    color: inputColor,
+    fontFamily: inputFontFamily
+  }, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
+    fontSize: inputFontSize
+  }), hasInlineHelp ? { position: "relative", top: -8 } : {})
+);
 var StyledRow = styled50(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
@@ -10226,6 +10306,7 @@ var NumberFieldInput = React65.forwardRef(
       decrementDisabled = false,
       min,
       max,
+      inlineHelpText,
       style,
       onFocus,
       onBlur,
@@ -10245,6 +10326,7 @@ var NumberFieldInput = React65.forwardRef(
       "decrementDisabled",
       "min",
       "max",
+      "inlineHelpText",
       "style",
       "onFocus",
       "onBlur",
@@ -10323,7 +10405,7 @@ var NumberFieldInput = React65.forwardRef(
           disabled: disabled || decrementDisabled || isAtMin
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         StyledFieldWrapper,
         {
           fieldBgColor: tokens3.colour.field.background.default,
@@ -10333,24 +10415,48 @@ var NumberFieldInput = React65.forwardRef(
           fieldHeight,
           fieldPaddingHorizontal,
           fullWidth,
-          children: /* @__PURE__ */ jsx(
-            StyledTextInput,
-            __spreadValues({
-              ref,
-              inputColor: tokens3.colour.field.text.default,
-              inputFontFamily: resolvedInputFontFamily,
-              inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
-              inputFontSize: parseTokenValue34(typographyToken.fontSize),
-              keyboardType: "numeric",
-              editable: !disabled,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onChangeText: handleChangeText,
-              defaultValue,
-              value,
-              style
-            }, rest)
-          )
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledTextInput,
+              __spreadValues({
+                ref,
+                inputColor: tokens3.colour.field.text.default,
+                inputFontFamily: resolvedInputFontFamily,
+                inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
+                inputFontSize: parseTokenValue34(typographyToken.fontSize),
+                hasInlineHelp: !!inlineHelpText,
+                keyboardType: "numeric",
+                editable: !disabled,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChangeText: handleChangeText,
+                defaultValue,
+                value,
+                style
+              }, rest)
+            ),
+            inlineHelpText && /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  position: "absolute",
+                  bottom: 4,
+                  width: fieldMinWidth,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: inputTokens3.description.text.default,
+                    color: inputTokens3.colour.description.default,
+                    children: inlineHelpText
+                  }
+                )
+              }
+            )
+          ]
         }
       ),
       showIncrementButton && /* @__PURE__ */ jsx(