@butternutbox/pawprint-native 0.4.0 → 0.5.0

package/dist/index.d.cts

@@ -1892,6 +1892,21 @@ type PictureSelectorProps = PictureSelectorOwnProps & Omit<ViewProps, keyof Pict
 declare const PictureSelector: React.ForwardRefExoticComponent<PictureSelectorOwnProps & Omit<ViewProps, keyof PictureSelectorOwnProps> & React.RefAttributes<View>>;
 
 type CountdownLayout = "stacked" | "inline";
+/**
+ * A unit label. Pass a plain string to use it regardless of count, or a
+ * `{ singular, plural }` pair to pluralise based on the unit's value
+ * (`singular` when the value is exactly 1, `plural` otherwise).
+ */
+type CountdownUnitLabel = string | {
+    singular: string;
+    plural: string;
+};
+type CountdownLabels = {
+    days?: CountdownUnitLabel;
+    hours?: CountdownUnitLabel;
+    minutes?: CountdownUnitLabel;
+    seconds?: CountdownUnitLabel;
+};
 type CountdownOwnProps = {
     layout?: CountdownLayout;
     days?: number;
@@ -1901,6 +1916,7 @@ type CountdownOwnProps = {
     showDays?: boolean;
     showSeconds?: boolean;
     label?: React.ReactNode;
+    labels?: CountdownLabels;
 };
 type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps>;
 /**
@@ -1932,6 +1948,7 @@ type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProp
  * @param {boolean} [showDays=true] - Whether to render the days unit and its separator.
  * @param {boolean} [showSeconds=true] - Whether to render the seconds unit and its separator.
  * @param {React.ReactNode} [label] - Customizable prefix label, rendered in the `inline` layout only.
+ * @param {CountdownLabels} [labels] - Overrides the per-unit labels (`days`/`hours`/`minutes`/`seconds`). Each label is either a plain string or a `{ singular, plural }` pair that resolves against the unit's value. Pass translated strings here; any omitted unit falls back to its English default.
  *
  * @example
  * ```tsx
@@ -1939,6 +1956,14 @@ type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProp
  *
  * <Countdown layout="stacked" days={2} hours={9} minutes={48} seconds={38} />
  * <Countdown layout="inline" label="Sale ends:" showDays={false} hours={3} minutes={49} seconds={38} />
+ * <Countdown
+ *   labels={{
+ *     days: { singular: "jour", plural: "jours" },
+ *     hours: { singular: "heure", plural: "heures" }
+ *   }}
+ *   days={1}
+ *   hours={2}
+ * />
  * ```
  */
 declare const Countdown: React.ForwardRefExoticComponent<CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps> & React.RefAttributes<View>>;
@@ -1980,11 +2005,9 @@ declare const ProductListingCardWithBadgeAndGrid: typeof _ProductListingCard & {
     Grid: typeof Grid;
 };
 
-type ProductDisplayCardDevice = "desktop" | "mobile";
 type ProductDisplayCardProps = ViewProps & {
-    device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -1995,7 +2018,12 @@ type ProductDisplayCardProps = ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    thumbnailWidth?: number;
+    thumbnailBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2009,7 +2037,6 @@ type ProductDisplayCardProps = ViewProps & {
  * import { ProductDisplayCard } from "@butternutbox/pawprint-native"
  *
  * <ProductDisplayCard
- *   device="mobile"
  *   title="Premium Recipe"
  *   subtext="+£0.00/pouch"
  *   quantity={1}
@@ -2017,7 +2044,6 @@ type ProductDisplayCardProps = ViewProps & {
  * />
  * ```
  *
- * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
  * @param title - Product title
  * @param subtext - *(optional)* Subtitle text (e.g. price)
  * @param showSubtext - *(optional)* Show/hide subtext
@@ -2031,9 +2057,8 @@ type ProductDisplayCardProps = ViewProps & {
  * @param showBannerIcon - *(optional)* Show/hide banner notification icon
  */
 declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
-    device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -2044,7 +2069,12 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    thumbnailWidth?: number;
+    thumbnailBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2116,4 +2146,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 CountdownProps, 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, 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, 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 ProductDisplayCardDevice, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, 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 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, 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, 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, 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

@@ -1892,6 +1892,21 @@ type PictureSelectorProps = PictureSelectorOwnProps & Omit<ViewProps, keyof Pict
 declare const PictureSelector: React.ForwardRefExoticComponent<PictureSelectorOwnProps & Omit<ViewProps, keyof PictureSelectorOwnProps> & React.RefAttributes<View>>;
 
 type CountdownLayout = "stacked" | "inline";
+/**
+ * A unit label. Pass a plain string to use it regardless of count, or a
+ * `{ singular, plural }` pair to pluralise based on the unit's value
+ * (`singular` when the value is exactly 1, `plural` otherwise).
+ */
+type CountdownUnitLabel = string | {
+    singular: string;
+    plural: string;
+};
+type CountdownLabels = {
+    days?: CountdownUnitLabel;
+    hours?: CountdownUnitLabel;
+    minutes?: CountdownUnitLabel;
+    seconds?: CountdownUnitLabel;
+};
 type CountdownOwnProps = {
     layout?: CountdownLayout;
     days?: number;
@@ -1901,6 +1916,7 @@ type CountdownOwnProps = {
     showDays?: boolean;
     showSeconds?: boolean;
     label?: React.ReactNode;
+    labels?: CountdownLabels;
 };
 type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps>;
 /**
@@ -1932,6 +1948,7 @@ type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProp
  * @param {boolean} [showDays=true] - Whether to render the days unit and its separator.
  * @param {boolean} [showSeconds=true] - Whether to render the seconds unit and its separator.
  * @param {React.ReactNode} [label] - Customizable prefix label, rendered in the `inline` layout only.
+ * @param {CountdownLabels} [labels] - Overrides the per-unit labels (`days`/`hours`/`minutes`/`seconds`). Each label is either a plain string or a `{ singular, plural }` pair that resolves against the unit's value. Pass translated strings here; any omitted unit falls back to its English default.
  *
  * @example
  * ```tsx
@@ -1939,6 +1956,14 @@ type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProp
  *
  * <Countdown layout="stacked" days={2} hours={9} minutes={48} seconds={38} />
  * <Countdown layout="inline" label="Sale ends:" showDays={false} hours={3} minutes={49} seconds={38} />
+ * <Countdown
+ *   labels={{
+ *     days: { singular: "jour", plural: "jours" },
+ *     hours: { singular: "heure", plural: "heures" }
+ *   }}
+ *   days={1}
+ *   hours={2}
+ * />
  * ```
  */
 declare const Countdown: React.ForwardRefExoticComponent<CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps> & React.RefAttributes<View>>;
@@ -1980,11 +2005,9 @@ declare const ProductListingCardWithBadgeAndGrid: typeof _ProductListingCard & {
     Grid: typeof Grid;
 };
 
-type ProductDisplayCardDevice = "desktop" | "mobile";
 type ProductDisplayCardProps = ViewProps & {
-    device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -1995,7 +2018,12 @@ type ProductDisplayCardProps = ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    thumbnailWidth?: number;
+    thumbnailBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2009,7 +2037,6 @@ type ProductDisplayCardProps = ViewProps & {
  * import { ProductDisplayCard } from "@butternutbox/pawprint-native"
  *
  * <ProductDisplayCard
- *   device="mobile"
  *   title="Premium Recipe"
  *   subtext="+£0.00/pouch"
  *   quantity={1}
@@ -2017,7 +2044,6 @@ type ProductDisplayCardProps = ViewProps & {
  * />
  * ```
  *
- * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
  * @param title - Product title
  * @param subtext - *(optional)* Subtitle text (e.g. price)
  * @param showSubtext - *(optional)* Show/hide subtext
@@ -2031,9 +2057,8 @@ type ProductDisplayCardProps = ViewProps & {
  * @param showBannerIcon - *(optional)* Show/hide banner notification icon
  */
 declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
-    device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -2044,7 +2069,12 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    thumbnailWidth?: number;
+    thumbnailBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2116,4 +2146,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 CountdownProps, 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, 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, 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 ProductDisplayCardDevice, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, 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 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, 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, 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, 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

@@ -10157,28 +10157,20 @@ var StyledFieldWrapper = styled60(View)(
     overflow: "hidden"
   })
 );
-var StyledTextInput = styled60(TextInput)(
-  ({
-    inputColor,
-    inputFontFamily,
-    inputFontWeight,
-    inputFontSize,
-    inputLineHeight
-  }) => __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: inputLineHeight
-  })
-);
+var StyledTextInput = styled60(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 StyledRow = styled60(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
@@ -10312,7 +10304,6 @@ var NumberFieldInput = React60.forwardRef(
               inputFontFamily: resolvedInputFontFamily,
               inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
               inputFontSize: parseTokenValue34(typographyToken.fontSize),
-              inputLineHeight: parseTokenValue34(typographyToken.lineHeight),
               keyboardType: "numeric",
               editable: !disabled,
               onFocus: handleFocus,
@@ -13659,12 +13650,13 @@ var PictureSelector = React60.forwardRef(
   }
 );
 PictureSelector.displayName = "PictureSelector";
-var UNIT_LABELS = {
-  days: "days",
-  hours: "hrs",
-  minutes: "min",
-  seconds: "secs"
+var DEFAULT_UNIT_LABELS = {
+  days: { singular: "day", plural: "days" },
+  hours: { singular: "hr", plural: "hrs" },
+  minutes: { singular: "min", plural: "min" },
+  seconds: { singular: "sec", plural: "secs" }
 };
+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(View)(({ rootGap }) => ({
@@ -13742,7 +13734,8 @@ var Countdown = React60.forwardRef(
       seconds = 0,
       showDays = true,
       showSeconds = true,
-      label
+      label,
+      labels
     } = _b, rest = __objRest(_b, [
       "layout",
       "days",
@@ -13751,23 +13744,33 @@ var Countdown = React60.forwardRef(
       "seconds",
       "showDays",
       "showSeconds",
-      "label"
+      "label",
+      "labels"
     ]);
     const theme2 = useTheme();
     const { countdown } = theme2.tokens.components;
     const { countdownItem } = countdown;
+    const unitLabels = __spreadValues(__spreadValues({}, DEFAULT_UNIT_LABELS), labels);
     const units = [
       showDays && {
         key: "days",
         value: days,
-        label: UNIT_LABELS.days
+        label: resolveLabel(unitLabels.days, days)
+      },
+      {
+        key: "hours",
+        value: hours,
+        label: resolveLabel(unitLabels.hours, hours)
+      },
+      {
+        key: "minutes",
+        value: minutes,
+        label: resolveLabel(unitLabels.minutes, minutes)
       },
-      { key: "hours", value: hours, label: UNIT_LABELS.hours },
-      { key: "minutes", value: minutes, label: UNIT_LABELS.minutes },
       showSeconds && {
         key: "seconds",
         value: seconds,
-        label: UNIT_LABELS.seconds
+        label: resolveLabel(unitLabels.seconds, seconds)
       }
     ].filter(Boolean);
     const colon = (key) => /* @__PURE__ */ jsx(
@@ -14141,42 +14144,78 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled60(View)(({ theme: theme2 }) => {
+var StyledCardContainer = styled60(View)(({
+  theme: theme2,
+  borderless
+}) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   const spacingMd = parseTokenValue8(spacing.md);
   const spacingXl = parseTokenValue8(spacing.xl);
-  return {
+  return __spreadProps(__spreadValues({
     flexDirection: "row",
     width: "100%",
-    height: "100%",
+    height: borderless ? void 0 : "100%",
     maxHeight: spacingXl * 6 + spacingMd,
-    backgroundColor: colour.background.surface.default,
+    backgroundColor: colour.background.surface.default
+  }, borderless ? {} : {
     borderWidth: 1,
     borderColor: colour.border.default,
-    borderRadius: parseTokenValue8(borderRadius.md),
-    overflow: "hidden",
     shadowColor: "#522a10",
     shadowOffset: { width: 0, height: spacingMd / 4 },
     shadowOpacity: 0.05,
     shadowRadius: spacingXl - 4,
-    elevation: 5,
+    elevation: 5
+  }), {
+    borderRadius: parseTokenValue8(borderRadius.md),
+    overflow: "hidden",
     zIndex: 1
+  });
+});
+var StyledImage3 = styled60(View)(
+  ({
+    theme: theme2,
+    imageBackgroundColor,
+    thumbnailWidth = 100,
+    thumbnailBackgroundColor
+  }) => ({
+    flexShrink: 0,
+    backgroundColor: thumbnailBackgroundColor || imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
+    overflow: "hidden",
+    aspectRatio: "1 / 1",
+    width: thumbnailWidth,
+    height: thumbnailWidth,
+    position: "relative"
+  })
+);
+var StyledQuantityBadge = styled60(View)(({ theme: theme2 }) => {
+  const spacing = theme2.tokens.semantics.dimensions.spacing;
+  const borderRadius = theme2.tokens.semantics.dimensions.borderRadius;
+  const { colour } = theme2.tokens.semantics;
+  return {
+    position: "absolute",
+    top: parseTokenValue8(spacing["2xs"]),
+    right: parseTokenValue8(spacing["2xs"]),
+    backgroundColor: colour.background.container.brand,
+    borderRadius: parseTokenValue8(borderRadius.xs),
+    paddingHorizontal: parseTokenValue8(spacing.sm),
+    height: parseTokenValue8(spacing["2xl"]),
+    minWidth: parseTokenValue8(spacing["2xl"]),
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
   };
 });
-var StyledImage3 = styled60(View)(() => ({
-  flexShrink: 0,
-  backgroundColor: "#f5f5f5",
-  overflow: "hidden",
-  aspectRatio: "1 / 1",
-  height: "100%"
-}));
-var StyledContentArea = styled60(View)(({ theme: theme2 }) => {
+var StyledContentArea = styled60(View)(({
+  theme: theme2,
+  borderless
+}) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
+  const paddingValue = parseTokenValue8(spacing.md);
   return {
     flex: 1,
-    paddingHorizontal: parseTokenValue8(spacing.md),
-    paddingVertical: parseTokenValue8(spacing.md),
+    paddingHorizontal: paddingValue,
+    paddingVertical: borderless ? 0 : paddingValue,
     gap: parseTokenValue8(spacing.xs),
     justifyContent: "space-between"
   };
@@ -14208,7 +14247,6 @@ var StyledNotification = styled60(Notification)(({ theme: theme2 }) => {
 var ProductDisplayCard = React60.forwardRef(
   (_a, ref) => {
     var _b = _a, {
-      device = "mobile",
       title,
       subtext,
       showSubtext = true,
@@ -14222,12 +14260,16 @@ var ProductDisplayCard = React60.forwardRef(
       incrementDisabled = false,
       decrementDisabled = false,
       image,
+      imageBackgroundColor,
+      thumbnailWidth,
+      thumbnailBackgroundColor,
+      showImageQuantityBadge = false,
+      borderless = false,
       banner,
       showBanner = false,
       bannerType = "info",
       showBannerIcon = false
     } = _b, rest = __objRest(_b, [
-      "device",
       "title",
       "subtext",
       "showSubtext",
@@ -14241,6 +14283,11 @@ var ProductDisplayCard = React60.forwardRef(
       "incrementDisabled",
       "decrementDisabled",
       "image",
+      "imageBackgroundColor",
+      "thumbnailWidth",
+      "thumbnailBackgroundColor",
+      "showImageQuantityBadge",
+      "borderless",
       "banner",
       "showBanner",
       "bannerType",
@@ -14251,11 +14298,28 @@ var ProductDisplayCard = React60.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
-    const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, cardDevice: device }, rest), { children: [
-      image && /* @__PURE__ */ jsx(StyledImage3, { children: image }),
-      /* @__PURE__ */ jsxs(StyledContentArea, { contentDevice: device, children: [
+    const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, borderless }, rest), { children: [
+      image && /* @__PURE__ */ jsxs(
+        StyledImage3,
+        {
+          imageBackgroundColor,
+          thumbnailWidth,
+          thumbnailBackgroundColor,
+          children: [
+            typeof image === "string" ? /* @__PURE__ */ jsx(
+              Image,
+              {
+                source: { uri: image },
+                style: { width: "100%", height: "100%" }
+              }
+            ) : image,
+            showImageQuantityBadge && quantity && /* @__PURE__ */ jsx(StyledQuantityBadge, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", weight: "bold", children: quantity }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(StyledContentArea, { borderless, children: [
         /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),
+          /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
           showSubtext && subtext && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
         ] }),
         showQuantityPicker && /* @__PURE__ */ jsx(View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(