@butternutbox/pawprint-native 0.21.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1609,6 +1609,17 @@ declare const StyledRoot: _emotion_native.StyledComponent<ViewProps & {
1609
1609
  }, {}, {
1610
1610
  ref?: React.Ref<View> | undefined;
1611
1611
  }>;
1612
+ /**
1613
+ * A single item returned by an async `onSearchQuery` resolver. Mirrors the
1614
+ * props of `SelectField.Item` so results render identically to static items.
1615
+ */
1616
+ type SelectFieldSearchResult = {
1617
+ value: string;
1618
+ label: string;
1619
+ leadingIcon?: React.ReactNode;
1620
+ hintText?: string;
1621
+ disabled?: boolean;
1622
+ };
1612
1623
  type SelectFieldOwnProps<Value = Option | string> = {
1613
1624
  label?: string;
1614
1625
  description?: string;
@@ -1625,6 +1636,9 @@ type SelectFieldOwnProps<Value = Option | string> = {
1625
1636
  searchable?: boolean;
1626
1637
  searchPlaceholder?: string;
1627
1638
  noResultsText?: string;
1639
+ onSearchQuery?: (query: string) => Promise<SelectFieldSearchResult[]>;
1640
+ debounceMs?: number;
1641
+ errorText?: string;
1628
1642
  };
1629
1643
  type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> & Omit<ViewProps, keyof SelectFieldOwnProps<Value>>;
1630
1644
  type SelectFieldComponent = React.ForwardRefExoticComponent<SelectFieldProps<Option | string> & React.RefAttributes<View>> & {
@@ -2480,4 +2494,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
2480
2494
  contentContainerStyle: StyleProp<ViewStyle>;
2481
2495
  };
2482
2496
 
2483
- 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, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, 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, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, 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, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, 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, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
2497
+ 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, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, 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, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, 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, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, 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, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
package/dist/index.d.ts CHANGED
@@ -1609,6 +1609,17 @@ declare const StyledRoot: _emotion_native.StyledComponent<ViewProps & {
1609
1609
  }, {}, {
1610
1610
  ref?: React.Ref<View> | undefined;
1611
1611
  }>;
1612
+ /**
1613
+ * A single item returned by an async `onSearchQuery` resolver. Mirrors the
1614
+ * props of `SelectField.Item` so results render identically to static items.
1615
+ */
1616
+ type SelectFieldSearchResult = {
1617
+ value: string;
1618
+ label: string;
1619
+ leadingIcon?: React.ReactNode;
1620
+ hintText?: string;
1621
+ disabled?: boolean;
1622
+ };
1612
1623
  type SelectFieldOwnProps<Value = Option | string> = {
1613
1624
  label?: string;
1614
1625
  description?: string;
@@ -1625,6 +1636,9 @@ type SelectFieldOwnProps<Value = Option | string> = {
1625
1636
  searchable?: boolean;
1626
1637
  searchPlaceholder?: string;
1627
1638
  noResultsText?: string;
1639
+ onSearchQuery?: (query: string) => Promise<SelectFieldSearchResult[]>;
1640
+ debounceMs?: number;
1641
+ errorText?: string;
1628
1642
  };
1629
1643
  type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> & Omit<ViewProps, keyof SelectFieldOwnProps<Value>>;
1630
1644
  type SelectFieldComponent = React.ForwardRefExoticComponent<SelectFieldProps<Option | string> & React.RefAttributes<View>> & {
@@ -2480,4 +2494,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
2480
2494
  contentContainerStyle: StyleProp<ViewStyle>;
2481
2495
  };
2482
2496
 
2483
- 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, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, 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, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, 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, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, 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, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
2497
+ 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, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, 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, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, 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, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, 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, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
package/dist/index.js CHANGED
@@ -1163,7 +1163,7 @@ var IconWrapper = styled51(View)({
1163
1163
  });
1164
1164
  var StyledButton = styled51(Pressable)(
1165
1165
  ({
1166
- buttonHeight,
1166
+ buttonMinHeight,
1167
1167
  buttonMinWidth,
1168
1168
  buttonPaddingHorizontal,
1169
1169
  buttonPaddingVertical,
@@ -1179,7 +1179,7 @@ var StyledButton = styled51(Pressable)(
1179
1179
  alignItems: "center",
1180
1180
  justifyContent: "center",
1181
1181
  position: "relative",
1182
- height: buttonHeight,
1182
+ minHeight: buttonMinHeight,
1183
1183
  minWidth: buttonMinWidth,
1184
1184
  paddingHorizontal: buttonPaddingHorizontal,
1185
1185
  paddingVertical: buttonPaddingVertical,
@@ -1191,7 +1191,7 @@ var StyledButton = styled51(Pressable)(
1191
1191
  );
1192
1192
  var StyledTextWrapper = styled51(View)(({ textOpacity }) => ({
1193
1193
  opacity: textOpacity,
1194
- flexShrink: 0
1194
+ flex: 1
1195
1195
  }));
1196
1196
  var StyledSpinnerWrapper = styled51(View)({
1197
1197
  position: "absolute",
@@ -1267,7 +1267,7 @@ var Button = React66.forwardRef(
1267
1267
  accessibilityState: { disabled: isDisabled, busy: loading },
1268
1268
  onPressIn: () => setPressed(true),
1269
1269
  onPressOut: () => setPressed(false),
1270
- buttonHeight: parseTokenValue7(sizeTokens.height),
1270
+ buttonMinHeight: parseTokenValue7(sizeTokens.minHeight),
1271
1271
  buttonMinWidth: parseTokenValue7(sizeTokens.minWidth),
1272
1272
  buttonPaddingHorizontal: parseTokenValue7(
1273
1273
  spacingTokens.horizontalPadding
@@ -1294,6 +1294,7 @@ var Button = React66.forwardRef(
1294
1294
  letterSpacing: typography.letterSpacing
1295
1295
  },
1296
1296
  color: variantStyles.textColor,
1297
+ align: "center",
1297
1298
  children
1298
1299
  }
1299
1300
  ) }),
@@ -1429,7 +1430,7 @@ var IconButton = React66.forwardRef(
1429
1430
  const isDisabled = disabled || loading;
1430
1431
  const buttons = theme2.tokens.components.buttons;
1431
1432
  const sizeTokens = buttons.size[size];
1432
- const dimension = parseTokenValue10(sizeTokens.height);
1433
+ const dimension = parseTokenValue10(sizeTokens.minHeight);
1433
1434
  const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
1434
1435
  const iconDimension = parseTokenValue10(iconSizing[sizeToIconSizeToken[size]]);
1435
1436
  const [pressed, setPressed] = React66.useState(false);
@@ -4861,6 +4862,7 @@ Switch.displayName = "Switch";
4861
4862
  var parseTokenValue18 = (value) => parseFloat(value);
4862
4863
  var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
4863
4864
  const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
4865
+ const { spacing: semanticSpacing } = theme2.tokens.semantics.dimensions;
4864
4866
  const backgroundColorMap = {
4865
4867
  primary: colour.primary.background,
4866
4868
  secondary: colour.primary.secondary,
@@ -4870,13 +4872,21 @@ var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
4870
4872
  warning: colour.primary.warning,
4871
4873
  error: colour.primary.error
4872
4874
  };
4875
+ const verticalPaddingMap = {
4876
+ small: semanticSpacing["2xs"],
4877
+ medium: semanticSpacing["3xs"],
4878
+ large: semanticSpacing["2xs"]
4879
+ };
4873
4880
  return {
4874
4881
  flexDirection: "row",
4875
4882
  alignItems: "center",
4876
4883
  justifyContent: "center",
4877
- height: parseTokenValue18(sizing[tagSize].height),
4884
+ minHeight: parseTokenValue18(sizing[tagSize].minHeight),
4878
4885
  minWidth: parseTokenValue18(sizing[tagSize].minWidth),
4879
- paddingHorizontal: parseTokenValue18(spacing.horizontalPadding),
4886
+ paddingLeft: parseTokenValue18(spacing.horizontalPadding) * 2,
4887
+ paddingRight: parseTokenValue18(spacing.horizontalPadding) * 2,
4888
+ paddingTop: parseTokenValue18(verticalPaddingMap[tagSize]),
4889
+ paddingBottom: parseTokenValue18(verticalPaddingMap[tagSize]),
4880
4890
  gap: parseTokenValue18(spacing[tagSize].gap),
4881
4891
  borderRadius: parseTokenValue18(badge.borderRadius.default),
4882
4892
  backgroundColor: backgroundColorMap[tagVariant]
@@ -6325,7 +6335,7 @@ var DrawerBody = React66.forwardRef(
6325
6335
  const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
6326
6336
  const topPadding = parseTokenValue27(content.slot.verticalPadding);
6327
6337
  const bodyMaxHeight = providedMaxHeight != null ? providedMaxHeight : windowHeight - 300;
6328
- const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.height) : horizontalPadding;
6338
+ const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.minHeight) : horizontalPadding;
6329
6339
  const bodyPaddingBottom = !footerContext ? Math.max(
6330
6340
  parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]),
6331
6341
  insets.bottom
@@ -6716,12 +6726,12 @@ var StyledControl = styled51(View)(
6716
6726
  justifyContent: "center"
6717
6727
  })
6718
6728
  );
6719
- var StyledContent2 = styled51(View)(({ contentGap, contentFlex }) => ({
6729
+ var StyledContent2 = styled51(View)(({ contentGap, contentFlex, contentFitContent }) => __spreadValues({
6720
6730
  flexDirection: "column",
6721
6731
  gap: contentGap,
6722
6732
  flex: contentFlex,
6723
6733
  minWidth: 0
6724
- }));
6734
+ }, contentFitContent ? { maxWidth: "85%" } : {}));
6725
6735
  var StyledIllustration = styled51(View)(({ illustrationSize }) => ({
6726
6736
  flexShrink: 0,
6727
6737
  width: illustrationSize,
@@ -6809,6 +6819,7 @@ var Checkbox = React66.forwardRef(
6809
6819
  {
6810
6820
  contentGap: parseTokenValue31(checkbox.spacing.content.gap),
6811
6821
  contentFlex: isTile && fitContent ? 0 : 1,
6822
+ contentFitContent: isTile && fitContent,
6812
6823
  children: [
6813
6824
  label && /* @__PURE__ */ jsx(
6814
6825
  Typography,
@@ -8973,7 +8984,7 @@ var SelectFieldItem = React66.forwardRef(
8973
8984
  );
8974
8985
  SelectFieldItem.displayName = "SelectField.Item";
8975
8986
  var parseTokenValue48 = (value) => parseFloat(value);
8976
- var StyledNoResults = styled51(View)(({ theme: theme2 }) => {
8987
+ var StyledStatusRow = styled51(View)(({ theme: theme2 }) => {
8977
8988
  const { dropdown } = theme2.tokens.components.dropdownList;
8978
8989
  return {
8979
8990
  paddingVertical: parseTokenValue48(dropdown.listItem.spacing.verticalPadding),
@@ -9006,7 +9017,10 @@ var SelectFieldRoot = React66.forwardRef(
9006
9017
  disabled,
9007
9018
  searchable = false,
9008
9019
  searchPlaceholder,
9009
- noResultsText = "No results found"
9020
+ noResultsText = "No results found",
9021
+ onSearchQuery,
9022
+ debounceMs = 300,
9023
+ errorText = "Something went wrong"
9010
9024
  } = _b, rest = __objRest(_b, [
9011
9025
  "label",
9012
9026
  "placeholder",
@@ -9022,7 +9036,10 @@ var SelectFieldRoot = React66.forwardRef(
9022
9036
  "disabled",
9023
9037
  "searchable",
9024
9038
  "searchPlaceholder",
9025
- "noResultsText"
9039
+ "noResultsText",
9040
+ "onSearchQuery",
9041
+ "debounceMs",
9042
+ "errorText"
9026
9043
  ]);
9027
9044
  const [isOpen, setIsOpen] = React66.useState(false);
9028
9045
  const [showContent, setShowContent] = React66.useState(false);
@@ -9032,6 +9049,44 @@ var SelectFieldRoot = React66.forwardRef(
9032
9049
  const [searchQuery, setSearchQuery] = React66.useState("");
9033
9050
  const [clearKey, setClearKey] = React66.useState(0);
9034
9051
  const searchInputRef = React66.useRef(null);
9052
+ const isQueryMode = searchable && typeof onSearchQuery === "function";
9053
+ const [searchResults, setSearchResults] = React66.useState([]);
9054
+ const [isSearching, setIsSearching] = React66.useState(false);
9055
+ const [searchFailed, setSearchFailed] = React66.useState(false);
9056
+ const searchRequestIdRef = React66.useRef(0);
9057
+ const onSearchQueryRef = React66.useRef(onSearchQuery);
9058
+ React66.useEffect(() => {
9059
+ onSearchQueryRef.current = onSearchQuery;
9060
+ });
9061
+ React66.useEffect(() => {
9062
+ if (!isQueryMode) return;
9063
+ if (searchQuery.length === 0) {
9064
+ searchRequestIdRef.current += 1;
9065
+ setSearchResults([]);
9066
+ setIsSearching(false);
9067
+ setSearchFailed(false);
9068
+ return;
9069
+ }
9070
+ const requestId = searchRequestIdRef.current + 1;
9071
+ searchRequestIdRef.current = requestId;
9072
+ setIsSearching(true);
9073
+ setSearchFailed(false);
9074
+ const debounceTimer = setTimeout(() => {
9075
+ const runQuery = onSearchQueryRef.current;
9076
+ if (!runQuery) return;
9077
+ Promise.resolve(runQuery(searchQuery)).then((items) => {
9078
+ if (searchRequestIdRef.current !== requestId) return;
9079
+ setSearchResults(items);
9080
+ setIsSearching(false);
9081
+ }).catch(() => {
9082
+ if (searchRequestIdRef.current !== requestId) return;
9083
+ setSearchResults([]);
9084
+ setSearchFailed(true);
9085
+ setIsSearching(false);
9086
+ });
9087
+ }, debounceMs);
9088
+ return () => clearTimeout(debounceTimer);
9089
+ }, [searchQuery, isQueryMode, debounceMs]);
9035
9090
  React66.useEffect(() => {
9036
9091
  if (!isOpen) {
9037
9092
  setShowContent(false);
@@ -9064,7 +9119,7 @@ var SelectFieldRoot = React66.forwardRef(
9064
9119
  clearTimeout(hardwareKeyboardTimer);
9065
9120
  keyboardSub.remove();
9066
9121
  };
9067
- }, [isOpen, searchable]);
9122
+ }, [isOpen, searchable, isSearching, searchQuery]);
9068
9123
  const isCompound = React66.Children.toArray(children).some(
9069
9124
  (child) => React66.isValidElement(child) && child.type === SelectFieldContent
9070
9125
  );
@@ -9082,7 +9137,7 @@ var SelectFieldRoot = React66.forwardRef(
9082
9137
  };
9083
9138
  const currentValue = value !== void 0 ? value : internalValue;
9084
9139
  const allItems = React66.Children.toArray(children);
9085
- const filteredItems = searchable ? allItems.filter((child) => {
9140
+ const localFilteredItems = searchable && !isQueryMode ? allItems.filter((child) => {
9086
9141
  var _a2;
9087
9142
  if (!searchQuery) return true;
9088
9143
  if (React66.isValidElement(child) && child.type === SelectFieldItem) {
@@ -9093,7 +9148,21 @@ var SelectFieldRoot = React66.forwardRef(
9093
9148
  }
9094
9149
  return true;
9095
9150
  }) : allItems;
9096
- const hasNoResults = searchable && searchQuery.length > 0 && filteredItems.length === 0;
9151
+ const isQueryActive = isQueryMode && searchQuery.length > 0;
9152
+ const queryResultItems = searchResults.map((result) => /* @__PURE__ */ jsx(
9153
+ SelectFieldItem,
9154
+ {
9155
+ value: result.value,
9156
+ leadingIcon: result.leadingIcon,
9157
+ hintText: result.hintText,
9158
+ disabled: result.disabled,
9159
+ children: result.label
9160
+ },
9161
+ String(result.value)
9162
+ ));
9163
+ const itemsToRender = isQueryActive ? queryResultItems : localFilteredItems;
9164
+ const hasNoResults = isQueryMode ? isQueryActive && !isSearching && !searchFailed && searchResults.length === 0 : searchable && searchQuery.length > 0 && localFilteredItems.length === 0;
9165
+ const hasContentToShow = isSearching || searchFailed || hasNoResults || itemsToRender.length > 0;
9097
9166
  const searchActionIcon = (() => {
9098
9167
  if (!searchable) return void 0;
9099
9168
  const showClear = isOpen && searchQuery.length > 0 || !isOpen && Boolean(currentValue);
@@ -9152,8 +9221,8 @@ var SelectFieldRoot = React66.forwardRef(
9152
9221
  description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
9153
9222
  error && state === "error" && /* @__PURE__ */ jsx(InputError, { children: error })
9154
9223
  ] })),
9155
- showContent && /* @__PURE__ */ jsxs(SelectFieldContent, { children: [
9156
- filteredItems.map((child) => {
9224
+ showContent && hasContentToShow && /* @__PURE__ */ jsx(SelectFieldContent, { children: isSearching ? /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }) : searchFailed ? /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: errorText }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
9225
+ itemsToRender.map((child) => {
9157
9226
  if (React66.isValidElement(child) && child.type === SelectFieldItem) {
9158
9227
  const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
9159
9228
  const childProps = child.props;
@@ -9166,8 +9235,8 @@ var SelectFieldRoot = React66.forwardRef(
9166
9235
  }
9167
9236
  return child;
9168
9237
  }),
9169
- hasNoResults && /* @__PURE__ */ jsx(StyledNoResults, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: noResultsText }) })
9170
- ] })
9238
+ hasNoResults && /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: noResultsText }) })
9239
+ ] }) })
9171
9240
  ]
9172
9241
  },
9173
9242
  clearKey
@@ -9532,7 +9601,7 @@ var Slider = React66.forwardRef(
9532
9601
  const isControlled = controlledValue !== void 0;
9533
9602
  const [internalValue, setInternalValue] = React66.useState(defaultValue);
9534
9603
  const currentValue = isControlled ? controlledValue : internalValue;
9535
- const thumbSize = parseTokenValue49(buttons.size.md.height);
9604
+ const thumbSize = parseTokenValue49(buttons.size.md.minHeight);
9536
9605
  const trackHeight = parseTokenValue49(slider.sizing.track.height);
9537
9606
  const isWeb = Platform.OS === "web";
9538
9607
  const [trackLayoutWidth, setTrackLayoutWidth] = useState(0);