@nuskin/marketing-components 1.39.2-window-references.2 → 1.40.0

package/dist/button/Button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonProps } from './types';
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/button/Button.stories.d.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+declare function ButtonStory(args: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof ButtonStory>;
+export default meta;
+type Story = StoryObj<typeof ButtonStory>;
+export declare const Default: Story;
+export declare const AddToCart: Story;
+export declare const BuyNow: Story;
+export declare const ShopNow: Story;
+export declare const LearnMore: Story;
+export declare const ViewDetails: Story;
+export declare const ExternalLink: Story;
+export declare const AbsoluteHttpUrl: Story;
+export declare const AbsoluteHttpsUrl: Story;
+export declare const ProtocolRelativeUrl: Story;
+export declare const SubmitButton: Story;
+export declare const CancelButton: Story;
+export declare const DisabledSubmit: Story;
+export declare const SmallButton: Story;
+export declare const MediumButton: Story;
+export declare const LargeButton: Story;
+export declare const PrimaryButton: Story;
+export declare const SecondaryButton: Story;
+export declare const LinkButton: Story;
+export declare const IconLeft: Story;
+export declare const IconRight: Story;
+export declare const EditingMode: Story;
+export declare const RoundedButton: Story;

package/dist/button/Button.styled.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { ButtonAlignment, ButtonVariant } from './types';
+export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    alignment: ButtonAlignment;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface StyledButtonProps {
+    $variant: ButtonVariant;
+    $buttonWidth: string;
+    $maxButtonWidth?: string;
+    $buttonType: 'square' | 'rounded';
+    $bg: string;
+    $hover: string;
+    $pressed: string;
+    $text: string;
+    $border: string;
+    $disabledBg: string;
+    $disabledText: string;
+    $focusRing: string;
+    $hoverText?: string;
+    $underlineColor?: string;
+    href?: string;
+}
+export declare const StyledButton: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Button").ButtonProps, "color" | "fullWidth" | "href" | "className" | "variant" | "aria-label" | "type" | "disabled" | "endIcon" | "size" | "startIcon" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
+    iconOnly?: boolean;
+    darkModeEnabled?: boolean;
+    startIconName?: import("@nuskin/foundation-ui-components").NsIconProps["name"];
+    endIconName?: import("@nuskin/foundation-ui-components").NsIconProps["name"];
+} & {
+    children?: React.ReactNode | undefined;
+} & {
+    theme?: import("@emotion/react").Theme;
+} & StyledButtonProps, {}, {}>;
+export declare const StyledLabelText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+interface StyledIconWrapperProps {
+    position: 'left' | 'right';
+}
+export declare const StyledIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledIconWrapperProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export {};

package/dist/button/ButtonWrapper.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonProps, ButtonBlockProp } from './types';
+export type ButtonWrapperProps = {
+    parent$?: Record<string, unknown>;
+    alignment?: ButtonProps['alignment'];
+    isEditing?: boolean;
+} & Partial<ButtonBlockProp>;
+declare const Buttons: React.FC<ButtonWrapperProps>;
+export default Buttons;

package/dist/button/helpers.d.ts

@@ -0,0 +1,59 @@
+import type { ButtonSize, LinkTarget } from './types';
+export declare const ROUNDED_BORDER_RADIUS = "25px";
+export declare const ICON_MARGIN = 2;
+export declare const FLEX_SHRINK_ZERO = 0;
+export declare const REL_NOOPENER_NOREFERRER = "noopener noreferrer";
+export declare const CSS_WORD_BREAK = "break-word";
+export declare const PROTOCOL_HTTP = "http:";
+export declare const PROTOCOL_HTTPS = "https:";
+export declare const DISABLED_STATE_STRING = "disabled";
+export declare const DEFAULT_VARIANT = "primary";
+export declare const DEFAULT_SIZE = "small";
+export declare const DEFAULT_ALIGNMENT = "left";
+export declare const DEFAULT_ICON_POSITION = "left";
+export declare const DEFAULT_BUTTON_TYPE = "square";
+export declare const DEFAULT_PLACEHOLDER_TEXT = "Enter Title";
+export declare const DEFAULT_TARGET = "No";
+export declare const BUTTON_TYPE_ROUNDED = "rounded";
+export declare const BUTTON_TYPE_SQUARE = "square";
+export declare const BORDER_COLOR_TRANSPARENT = "transparent";
+export declare const BASE_URL: string;
+export declare function isValidUrl(url?: string): string | undefined;
+export declare function resolveTarget(target?: 'Yes' | 'No' | null): LinkTarget | undefined;
+export declare function resolveDisabled(disabled?: boolean | string | null): boolean;
+export declare function resolveIconName(iconName?: string): string | undefined;
+export declare const variantDefaults: {
+    readonly primary: {
+        readonly bg: "#1f1f1f";
+        readonly hover: "#3a3530";
+        readonly pressed: "#000000";
+        readonly text: "#ffffff";
+        readonly disabledBg: "#e6e6e6";
+        readonly disabledText: "#9e9e9e";
+        readonly focusRing: "#4f84b4";
+    };
+    readonly secondary: {
+        readonly bg: "#ffffff";
+        readonly hover: "#f2f2f2";
+        readonly pressed: "#e6e6e6";
+        readonly text: "#000000";
+        readonly border: "#626262";
+        readonly disabledBg: "#f2f2f2";
+        readonly disabledText: "#b0b0b0";
+        readonly focusRing: "#4f84b4";
+    };
+    readonly link: {
+        readonly bg: "transparent";
+        readonly hover: "transparent";
+        readonly pressed: "transparent";
+        readonly text: "#000000";
+        readonly border: "transparent";
+        readonly disabledBg: "transparent";
+        readonly disabledText: "#9e9e9e";
+        readonly focusRing: "#000000";
+        readonly hoverText: "#626262";
+        readonly underlineColor: "#000000";
+    };
+};
+export declare function getButtonWidth(size: string): string;
+export declare function getIconSize(size: string): ButtonSize;

package/dist/button/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './Button';
+export { default as Buttons } from './ButtonWrapper';
+export * from './types';

package/dist/button/specs/Button.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/button/specs/ButtonWrapper.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/button/types.d.ts

@@ -0,0 +1,42 @@
+export type LinkTarget = '_self' | '_blank';
+export type ButtonVariant = 'primary' | 'secondary' | 'link';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonAlignment = 'left' | 'center' | 'right';
+export type IconPosition = 'left' | 'right';
+export interface Button$ {
+    [key: string]: unknown;
+    $?: {
+        title?: Record<string, unknown>;
+        icon?: Record<string, unknown>;
+    };
+}
+export type ButtonType = 'square' | 'rounded';
+export interface ButtonsEntry extends ButtonProps {
+    $?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface ButtonsBlock$ {
+    [key: string]: unknown;
+    buttons__0?: Record<string, unknown>;
+}
+export type ButtonsBlock = {
+    buttons?: ButtonsEntry[];
+    $?: ButtonsBlock$;
+};
+export type ButtonBlockProp = ButtonProps | ButtonsBlock;
+export interface ButtonProps {
+    title?: string;
+    url?: string;
+    placeholder_text?: string;
+    open_in_new_tab?: 'Yes' | 'No' | null;
+    variant?: ButtonVariant;
+    button_size?: ButtonSize;
+    alignment?: ButtonAlignment;
+    buttontype?: string;
+    icon?: string;
+    iconposition?: IconPosition;
+    button_state?: boolean | string;
+    $?: Button$;
+    parent$?: Record<string, unknown>;
+    isEditing?: boolean;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BynderMediaProps } from './types';
+export declare function BynderMedia({ bynder_media, $ }: Readonly<BynderMediaProps>): React.ReactElement | null;

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

@@ -0,0 +1,36 @@
+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;
+    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>, {}>;

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

@@ -0,0 +1,3 @@
+export { BynderMedia } from './BynderMedia';
+export type { BynderMediaProps, BynderMediaType, BynderMediaExtracted, BynderImageDataType } from './types';
+export { extractBynderMedia, getMediaUrl } from './utils';

package/dist/bynder-media/specs/bynder-utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bynder-media/specs/mockData.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Mock Data for Bynder Utils Tests
+ * Contains test data for Bynder media extraction functions
+ */
+export declare const mockSelectedImage: {
+    url: string;
+    type: "IMAGE";
+    fileSize: number;
+    width: number;
+    height: number;
+    fit: "cover";
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedVideo: {
+    url: string;
+    type: "VIDEO";
+    fileSize: number;
+    width: number;
+    height: number;
+    fit: "cover";
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithAltText: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedGif: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedGifUppercase: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedVideoWithAlt: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithDescriptiveAlt: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithoutAlt: {
+    url: string;
+    type: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedCustomTransformation: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedCustomTransformationSimple: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithExistingQuality: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithMultipleParams: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockPreviewUrls: string[];
+export declare const mockMediaJsonImage: string;
+export declare const mockMediaJsonGif: string;
+export declare const mockMediaJsonGifUppercase: string;
+export declare const mockMediaJsonVideo: string;
+export declare const mockMediaJsonWithDescriptiveAlt: string;
+export declare const mockMediaJsonWithoutAlt: string;
+export declare const mockMediaJsonCustomTransformation: string;
+export declare const mockMediaJsonCustomTransformationSimple: string;
+export declare const mockSelectedFitTransform: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockMediaJsonFitTransform: string;
+export declare const mockMediaJsonDefaultTransform: string;
+export declare const mockMediaJsonVideoNoTransform: string;
+export declare const mockMediaJsonGifNoTransform: string;
+export declare const mockMediaJsonWithExistingQuality: string;
+export declare const mockMediaJsonWithMultipleParams: string;
+export declare const mockMediaJsonRealCustomTransformation: string;
+export declare const mockMediaJsonVideoIntegration: string;

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

@@ -0,0 +1,61 @@
+export type BynderMediaType = 'image' | 'gif' | 'video';
+export type CSEditTags = Record<string, any>;
+export interface BynderMediaProps {
+    /** JSON string from Contentstack bynder_media field */
+    readonly bynder_media?: string;
+    /** Contentstack edit tags */
+    readonly $?: CSEditTags;
+}
+export type BynderMediaExtracted = {
+    url: string;
+    type: BynderMediaType;
+    alt: string;
+    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 */
+    selected?: {
+        url: string;
+        fileSize: number | null;
+        width: number | null;
+        height: number | null;
+        imageType?: string;
+        type: 'VIDEO' | 'IMAGE';
+        altText?: string;
+        fit: 'cover' | 'contain' | 'scale-down' | 'none';
+        position: string;
+        bgColor: string;
+    };
+    isPublic: boolean;
+    __typename?: 'Image';
+    id: string;
+    name: string;
+    description: string | null;
+    databaseId: string;
+    originalUrl?: string;
+    type: 'VIDEO' | 'IMAGE' | 'DOCUMENT';
+    url?: string;
+    previewUrls?: string[];
+    extensions?: string[];
+    textMetaproperties?: ({
+        name: string;
+        value: string;
+    } | null)[];
+    files: {
+        [key: string]: {
+            url: string;
+            width: number | null;
+            height: number | null;
+            fileSize: number | null;
+        };
+    };
+};

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

@@ -0,0 +1,3 @@
+import { BynderImageDataType, BynderMediaExtracted } from './types';
+export declare function getMediaUrl(selected: BynderImageDataType['selected'], isPublic: boolean, previewUrls: BynderImageDataType['previewUrls']): string;
+export declare function extractBynderMedia(mediaJson?: string): BynderMediaExtracted | null;

package/dist/carousel/Carousel.d.ts

@@ -0,0 +1,6 @@
+import type { CarouselProps } from './types';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+/** Carousel layout: slider with arrows and dots. Uses shared hook and UI with carousel container. */
+export declare function Carousel<T = unknown>(props: CarouselProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/carousel/Carousel.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Carousel } from './Carousel';
+declare const meta: Meta<typeof Carousel>;
+export default meta;
+type Story = StoryObj<typeof Carousel>;
+export declare const SingleFull: Story;
+export declare const TwoEqual: Story;
+export declare const TwoSmallLarge: Story;
+export declare const ThreeEqual: Story;
+export declare const ThreeSmallMediumLarge: Story;
+export declare const FourEqual: Story;
+export declare const Autoplay: Story;
+export declare const EmptyState: Story;
+export declare const FewerSlidesThanPreset: Story;

package/dist/carousel/CarouselLayout.styled.d.ts

@@ -0,0 +1,50 @@
+export declare const CarouselContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    gap: number;
+    height: string;
+    columnHeight: string;
+    maxColumnHeight?: number;
+    isVariableWidth: boolean;
+    fullWidth?: boolean;
+    dotsInside?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SlideSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    useFlexLayout: boolean;
+    stackedVerticalGap: number;
+    stackedItemHeight: string;
+    stackedItemMaxHeight?: number;
+    slideWidth?: string;
+    flexBasis?: string;
+    isVariableWidth: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SlideInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    stackedItemHeight: string;
+    stackedItemMaxHeight?: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SlideContentInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArrowButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    direction: "prev" | "next";
+    fullWidth?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const InnerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EmptyPlaceholderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/carousel/hooks/useCarouselLayout.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { CarouselProps } from '../types';
+import type { SliderRefInstance } from '../shared';
+/** Shared hook for carousel layout behavior. */
+export declare function useCarouselLayout<T>(props: CarouselProps<T>): {
+    gapPx: number;
+    containerHeight: string;
+    stackedItemHeight: string;
+    stackedItemMaxHeight: number;
+    isVariableWidth: boolean;
+    containerClassName: string;
+    effectiveFullWidth: boolean;
+    parent$: Record<string, unknown> | undefined;
+    $: Record<string, unknown> | undefined;
+    emptyBlockParentClass: string | undefined;
+    emptyPlaceholderText: string;
+    sliderRef: React.MutableRefObject<SliderRefInstance | null>;
+    sliderSettings: any;
+    carouselKey: string;
+    renderSlides: (useFlexLayout?: boolean) => import("react/jsx-runtime").JSX.Element[];
+    slidesForRender: T[];
+    hasSlides: boolean;
+    isStackedViewport: boolean;
+    isTabletGridViewport: boolean;
+    preset: import("..").CarouselPreset;
+    showArrowsOnDesktop: boolean;
+    slidesToShow: number;
+    slidesLength: number;
+    goToPrevious: () => void | undefined;
+    goToNext: () => void | undefined;
+};

package/dist/carousel/hooks/useCarouselResize.d.ts

@@ -0,0 +1,6 @@
+import type { CarouselProps } from '../types';
+export interface UseCarouselResizeResult {
+    windowWidth: number;
+    carouselKey: string;
+}
+export declare function useCarouselResize(preset: CarouselProps['preset'], slideCount: number): UseCarouselResizeResult;

package/dist/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps, CarouselPreset, CarouselRenderSlide } from './types';

package/dist/carousel/mocks/MockContentCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+/** Image height preset for story variants (px). */
+declare const IMAGE_HEIGHTS: {
+    readonly short: 120;
+    readonly medium: 200;
+    readonly tall: 320;
+};
+/** Mock content card for ColumnControl/carousel stories. Optional image, content, and CTA. */
+export interface MockContentCardProps {
+    imageSrc?: string;
+    imageAlt?: string;
+    /** Image area height: preset name or px number. Default 'medium'. */
+    imageHeight?: keyof typeof IMAGE_HEIGHTS | number;
+    title?: string;
+    description?: string;
+    ctaText?: string;
+    ctaHref?: string;
+}
+declare const MockContentCard: React.FC<MockContentCardProps>;
+export default MockContentCard;

package/dist/carousel/mocks/MockHeroBanner.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/** Mock hero with background (image or video), title, subtitle, and CTA. */
+export interface MockHeroBannerProps {
+    /** Background image URL */
+    imageSrc?: string;
+    imageAlt?: string;
+    /** Background video URL */
+    videoSrc?: string;
+    posterSrc?: string;
+    title?: string;
+    subtitle?: string;
+    /** CTA button/link text */
+    ctaText?: string;
+    /** CTA link href (optional; if omitted, CTA renders as span) */
+    ctaHref?: string;
+}
+declare const MockHeroBanner: React.FC<MockHeroBannerProps>;
+export default MockHeroBanner;

package/dist/carousel/mocks/MockProductCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/** Mock product card for ColumnControl/carousel slide content only. */
+export interface MockProductCardProps {
+    imageSrc: string;
+    imageAlt?: string;
+    title?: string;
+}
+declare const MockProductCard: React.FC<MockProductCardProps>;
+export default MockProductCard;

package/dist/carousel/mocks/index.d.ts

@@ -0,0 +1,7 @@
+export { default as MockProductCard } from './MockProductCard';
+export type { MockProductCardProps } from './MockProductCard';
+export { default as MockContentCard } from './MockContentCard';
+export type { MockContentCardProps } from './MockContentCard';
+export { default as MockHeroBanner } from './MockHeroBanner';
+export type { MockHeroBannerProps } from './MockHeroBanner';
+export { MOCK_ASSETS } from './mockAssets';

package/dist/carousel/mocks/mockAssets.d.ts

@@ -0,0 +1,15 @@
+/** Nu Skin media URLs for ColumnControl mock slides. */
+export declare const MOCK_ASSETS: {
+    readonly hero: {
+        readonly scienceApproach: "https://media.nuskin.com/transform/a3481f54-c1d6-440b-98c1-f6320a06f5f0/india-specific-science-approach-hero-banner?io=transform:fill,width:1440,height:500&format=webp&quality=95";
+        readonly joeChang: "https://media.nuskin.com/transform/d0a2299a-1476-4eb0-af54-b8fd66eaf880/nu-skin-science-main-page-joe-chang-banner?io=transform:fill,width:1440,height:520&focuspoint=0.32,0.54&format=webp&quality=95";
+        readonly homepage2: "https://media.nuskin.com/transform/fb7385be-c941-4436-8a30-63b177c4b02d/New-Homepage-Banners-2";
+        readonly videoPrysm: "https://media.nuskin.com/asset/9994f1f0-dc3d-4019-9dab-ebf690c11322/mp4/Prysm-Home-Page-Banner.mp4";
+        readonly videoPoster: "https://media.nuskin.com/m/65719e352613af80/original/Prysm-Home-Page-Banner.mp4";
+    };
+    readonly product: {
+        readonly boldInnovators: "https://media.nuskin.com/transform/04654929-3c89-4232-9cb2-2ea72d3602c9/india-science-bold-innovators-image?format=webp&quality=95";
+        readonly qualityProcess: "https://media.nuskin.com/transform/2bd009a8-288b-42de-be93-05c143e67822/nu-skin-science-6s-quality-process-image?io=transform:fill,width:1440,height:1400&format=webp&quality=95&io=transform:scale,width:600,height:600";
+        readonly rigorousResearch: "https://media.nuskin.com/transform/8754ed36-3705-4d85-a633-e8dbb7e326aa/nu-skin-science-rigorous-reasearch-image?io=transform:fill,width:720,height:460&format=webp&quality=95&io=transform:scale,width:600,height:600";
+    };
+};