@nuskin/marketing-components 1.24.0 → 1.26.0

package/dist/button/types.d.ts

@@ -23,16 +23,17 @@ export interface Button$ {
     };
 }
 export type ButtonType = 'square' | 'rounded';
-export interface ButtonContainerEntry {
+export interface ButtonsEntry {
     button?: ButtonProps;
     $?: {
         button?: Record<string, unknown>;
     };
 }
-export type ButtonContainerBlock = {
-    container?: ButtonContainerEntry[];
+export type ButtonsBlock = {
+    buttons?: ButtonsEntry[];
+    $?: Record<string, unknown>;
 };
-export type ButtonBlockProp = ButtonProps | ButtonContainerBlock;
+export type ButtonBlockProp = ButtonProps | ButtonsBlock;
 export interface ButtonProps {
     label?: ButtonLabel$;
     placeholder_text?: string;

package/dist/bynder-media/BynderMedia.styled.d.ts

@@ -1,14 +1,30 @@
 export declare const MediaContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    bgColor?: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledImage: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    objectFit?: string;
+    focusPoint?: {
+        x: number;
+        y: number;
+    };
+    objectPosition?: string;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const StyledVideo: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    objectFit?: string;
+    focusPoint?: {
+        x: number;
+        y: number;
+    };
+    objectPosition?: string;
 }, import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {}>;
 export declare const PictureElement: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/bynder-media/types.d.ts

@@ -13,6 +13,13 @@ export type BynderMediaExtracted = {
     isResponsive?: boolean;
     desktopUrl?: string;
     mobileUrl?: string;
+    imageFit?: 'cover' | 'contain' | 'scale-down' | 'none' | 'fill' | null;
+    focusPoint?: {
+        x: number;
+        y: number;
+    };
+    objectPosition?: string;
+    bgColor?: string;
 };
 export type BynderImageDataType = {
     /** selected is manually added, using additionalInfo from bynder */

package/dist/content-card/types.d.ts

@@ -4,35 +4,12 @@ export type MediaStyle = 'cover' | 'contain' | 'fill' | 'stretch' | 'none';
 export type ContentAlignment = 'left' | 'center' | 'right';
 export type CtaStyle = 'card' | 'button' | 'none';
 export type LinkTarget = '_self' | '_blank';
-export interface MediaProps {
-    readonly mediaUrl: string;
-    readonly fallbackMediaUrl?: string;
-    readonly mediaType?: MediaType;
-    readonly mediaAlt?: string;
-    readonly onError?: () => void;
-    readonly testId?: string;
-    readonly $?: Record<string, unknown>;
-    readonly isResponsive?: boolean;
-    readonly desktopUrl?: string;
-    readonly mobileUrl?: string;
-    readonly media_style?: string;
-    readonly mediaHeight?: number;
-}
-/** Bynder-extracted media shape (from JSON). */
 export type BynderMediaType = 'image' | 'gif' | 'video';
-export interface BynderMediaExtracted {
-    url: string;
-    type: BynderMediaType;
-    alt: string;
-    isResponsive?: boolean;
-    desktopUrl?: string;
-    mobileUrl?: string;
-}
 export interface ContentCardProps {
     title?: string;
     subtitle?: string;
     body?: string;
-    media?: MediaProps | string;
+    media?: string;
     cta?: ButtonProps;
     cta_style?: CtaStyle;
     content_alignment?: ContentAlignment;
@@ -45,8 +22,12 @@ export interface ContentCardProps {
     text_color?: string;
     text_opacity?: number;
     border_radius?: string;
-    media_style?: string;
     isEditing?: boolean;
     parent$?: Record<string, unknown>;
-    $?: Record<string, unknown>;
+    $?: {
+        media?: Record<string, unknown>;
+        body?: Record<string, unknown>;
+        title?: Record<string, unknown>;
+        subtitle?: Record<string, unknown>;
+    };
 }

package/dist/content-card/utils/helpers.d.ts

@@ -1,12 +1,23 @@
-import type { ContentAlignment, CtaStyle, LinkTarget, MediaProps, MediaStyle } from '../types';
+import type { ContentAlignment, CtaStyle, LinkTarget } from '../types';
+/**
+ * Validates that the value is a hex color (#rgb or #rrggbb).
+ * Returns the trimmed hex string, or defaultColor when invalid.
+ */
+export declare function validateHex(color: string, defaultColor: string): string;
+/**
+ * Converts a hex color to rgba using the given opacity.
+ * If hex is invalid or empty, returns defRgba when provided.
+ */
+export declare function hexToRgba(hex: string, opacity: number, defaultRgba?: string): string;
+/** Card background as rgba; uses hex default and fallback. */
+export declare function toCardBackgroundRgba(backgroundColor?: string, backgroundOpacity?: number): string;
+/** Card text color as rgba; uses hex default and fallback. */
+export declare function toCardTextRgba(textColor?: string, textOpacity?: number): string;
 export declare const getMaxHeight: (maxHeight: number) => number;
 export declare const getTitle: (title: string, isEditing: boolean) => string;
 /** Normalize content alignment string to 'left' | 'center' | 'right'. */
 export declare function normalizeContentAlignment(alignment?: string | null): ContentAlignment;
-/** Normalize media style string to object-fit value: cover | contain | fill | none. */
-export declare function normalizeMediaStyle(value?: string | null): MediaStyle;
 /** Normalize CTA style string to 'card' | 'button' | 'none'. */
 export declare function normalizeCtaStyle(value?: string | null): CtaStyle;
-export declare function normalizeContentCardMedia(media: MediaProps | string | undefined, $: Record<string, unknown>): MediaProps | undefined;
 /** Resolve target from open_in_new_tab string. */
 export declare function resolveTarget(target?: 'Yes' | 'No' | null): LinkTarget | undefined;

package/dist/hero-banner/HeroBanner.styled.d.ts

@@ -1,4 +1,8 @@
 import { GradientDepth } from './helpers';
+export declare const MediaLayer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -13,14 +17,6 @@ export declare const GradientOverlay: import("@emotion/styled").StyledComponent<
     depth: GradientDepth;
     color: "black" | "white";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PictureElement: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const SourceElement: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>, {}>;
 export declare const Overlay: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/hero-banner/helpers.d.ts

@@ -4,17 +4,6 @@ export type TextColor = 'black' | 'white';
 export declare const FULL_SIZE_PERCENT = "100%";
 export declare const MOBILE_BREAKPOINT = "(max-width: 768px)";
 export declare const DESKTOP_BREAKPOINT = "(min-width: 769px)";
-export interface ParsedMedia {
-    type: 'image' | 'gif' | 'video';
-    url: string;
-    alt: string;
-    width?: number;
-    height?: number;
-    isResponsive?: boolean;
-    desktopUrl?: string;
-    mobileUrl?: string;
-}
-export declare function parseMedia(media: unknown): ParsedMedia | null;
 export declare function resolveContentAlignment(contentAlignment?: ContentAlignment): ContentAlignment;
 export declare function resolveGradientDepth(gradientDepth?: GradientDepth): GradientDepth;
 export declare function resolveTextColor(textColor?: string): TextColor;

package/dist/hero-banner/types.d.ts

@@ -1,16 +1,7 @@
-import { GradientDepth } from "./helpers";
-import { ButtonBlockProp } from "../button";
-export type MediaSource = {
-    src: string;
-    type?: string;
-};
+import { GradientDepth } from './helpers';
+import { ButtonBlockProp } from '../button';
 export type ContentAlignment = 'left' | 'center' | 'right';
 export type HeroBannerMediaType = 'image' | 'gif' | 'video';
-export type Media = {
-    type: HeroBannerMediaType;
-    src: string | MediaSource[];
-    alt?: string;
-};
 export interface HeroBanner$ {
     [key: string]: unknown;
     button?: Record<string, unknown>;
@@ -23,7 +14,7 @@ export interface HeroBannerProps {
     body?: string;
     brandcaption?: string;
     button?: ButtonBlockProp;
-    media?: Media | string | null;
+    media?: string;
     class_name?: string;
     content_alignment?: ContentAlignment;
     gradient_enabled?: boolean;