@nuskin/marketing-components 1.40.0 → 1.40.2

package/dist/hooks/use-toggle-font-color/useToggleFontColor.spec.d.ts

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

package/dist/hooks/useRouteReplacer.d.ts

@@ -1,10 +0,0 @@
-/**
- * Simply use this hook to update the region and language in the url
- * Note: urlToParse should have {%region} or {%language} or {%rREGION} or {%LANGUAGE}
- * @param urlToParse url to be parsed
- * @returns urlToParse after conditionally replacing the region and language
- */
-declare const useRouteReplacer: (urlToParse?: string) => {
-    url?: string;
-};
-export default useRouteReplacer;

package/dist/hooks/useRouteReplacer.spec.d.ts

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

package/dist/image/CsImage.d.ts

@@ -1,4 +0,0 @@
-import type { CsImageProps } from './types';
-export declare const PLACEHOLDER_IMAGE_SRC: string;
-declare const CsImage: (props: CsImageProps) => import("react/jsx-runtime").JSX.Element;
-export default CsImage;

package/dist/image/CsImage.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import CsImage from './CsImage';
-declare const meta: Meta<typeof CsImage>;
-export default meta;
-type Story = StoryObj<typeof CsImage>;
-export declare const Default: Story;
-export declare const FullWidth: Story;

package/dist/image/CsImage.styled.d.ts

@@ -1,8 +0,0 @@
-import type { CsImageProps } from './types';
-export declare const StyledCsImageWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & Pick<CsImageProps, "image_alignment"> & {
-    width?: string | number;
-    height?: string | number;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/image/index.d.ts

@@ -1 +0,0 @@
-export { default as CsImage } from './CsImage';

package/dist/image/specs/CsImage.spec.d.ts

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

package/dist/image/types.d.ts

@@ -1,73 +0,0 @@
-export type NsImageProps = {
-    alt: string;
-    className?: string;
-    fill?: boolean;
-    height?: number | string;
-    id?: string;
-    src: string;
-    variant?: 'product' | 'award' | 'icon' | 'fill';
-    width?: number | string;
-    full_width?: boolean;
-};
-export interface CsImageProps extends Partial<NsImageProps> {
-    image_alignment?: 'left' | 'center' | 'right';
-    image?: string | {
-        image: CSImage[];
-    };
-    isEditing?: boolean;
-    parent$?: Record<string, unknown>;
-    $?: Record<string, unknown>;
-}
-export type CSImage = {
-    previewUrls: string[];
-    selected: ImageFile;
-    isPublic: boolean;
-    type: 'IMAGE';
-    id: string;
-    files: {
-        transformBaseUrl: ImageFileMeta;
-        thumbnail: ImageFileMeta;
-    };
-    databaseId: string;
-    name: string;
-    description: string | null;
-};
-export type ImageFile = {
-    url: string;
-    width: number | null;
-    height: number | null;
-    fileSize: number | null;
-    imageType: 'transformBaseUrl' | 'thumbnail';
-    altText: string;
-    type: 'IMAGE';
-    fit: 'cover' | 'contain';
-    position: string;
-    bgColor: string;
-};
-export type ImageFileMeta = {
-    url: string;
-    width: number | null;
-    height: number | null;
-    fileSize: number | null;
-};
-/**
- * Contentstack native asset format (fallback when Bynder image is not available)
- */
-export type ContentstackAsset = {
-    uid: string;
-    created_by: string;
-    updated_by: string;
-    created_at: string;
-    updated_at: string;
-    content_type: string;
-    file_size: string;
-    filename: string;
-    title: string;
-    url: string;
-    ACL?: Record<string, unknown>[];
-    _version?: number;
-    is_dir?: boolean;
-    tags?: string[];
-    parent_uid?: string;
-    $?: Record<string, unknown>;
-};

package/dist/marketing-banner/MarketingBanner.d.ts

@@ -1,7 +0,0 @@
-/**
- * MarketingBanner Component
- * Main component with single banner and automatic carousel mode
- */
-import React from 'react';
-import type { MarketingBannerProps } from './types';
-export default function MarketingBannerComponent(props: Readonly<MarketingBannerProps>): React.ReactElement;

package/dist/marketing-banner/MarketingBanner.stories.d.ts

@@ -1,206 +0,0 @@
-import type { StoryObj } from '@storybook/react-webpack5';
-import type { BannerData } from './types';
-import type { ButtonProps } from '../button/types';
-type StoryArgs = Omit<BannerData, 'bynder_media' | 'cta_button'> & {
-    mediaUrl?: string;
-    mediaType?: 'image' | 'gif' | 'video';
-    mediaAlt?: string;
-    buttonLabel?: string;
-    buttonUrl?: string;
-    buttonVariant?: ButtonProps['variant'];
-    buttonSize?: ButtonProps['button_size'];
-    buttonBorderType?: ButtonProps['buttontype'];
-    buttonIcon?: ButtonProps['icon'];
-    buttonIconPosition?: ButtonProps['iconposition'];
-    buttonTarget?: ButtonProps['open_in_new_tab'];
-    buttonDisabled?: ButtonProps['button_state'];
-    banners?: BannerData[];
-    rotation_interval?: number;
-    showGradient?: boolean;
-    gradientDepth?: 'sm' | 'md' | 'lg';
-};
-declare const meta: {
-    title: string;
-    tags: string[];
-    argTypes: {
-        header_text: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        title: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        subtitle: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        body_text: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonLabel: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonUrl: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonVariant: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonSize: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonBorderType: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonIcon: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonIconPosition: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonTarget: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        buttonDisabled: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        mediaUrl: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        mediaAlt: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        mediaType: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        position: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        text_color: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        showGradient: {
-            control: "boolean";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        gradientDepth: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        banners: {
-            control: "object";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        rotation_interval: {
-            control: "number";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<StoryArgs>;
-export declare const BasicBanner: Story;
-export declare const BannerWithHeaderText: Story;
-export declare const LeftPositionedBanner: Story;
-export declare const RightPositionedBanner: Story;
-export declare const CenterPositionedBanner: Story;
-export declare const VideoBanner: Story;
-export declare const GradientVariations: Story;
-export declare const GifBanner: Story;
-export declare const PrimaryButtonVariant: Story;
-export declare const SecondaryButtonVariant: Story;
-export declare const BasicCarousel: Story;
-export declare const AutoRotatingCarousel: Story;
-export declare const CarouselWithGradients: Story;

package/dist/marketing-banner/MarketingBanner.styled.d.ts

@@ -1,62 +0,0 @@
-/**
- * MarketingBanner Styled Components
- * All styling for the Marketing Banner component
- */
-import type { GradientDirection, GradientDepth } from './types';
-export declare const BannerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CarouselWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CarouselTrack: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    currentIndex: number;
-    totalSlides: number;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BannerSlide: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BannerContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    hasMedia: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MediaWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TextContentWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    position?: "left" | "center" | "right";
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const GradientOverlay: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    direction: GradientDirection;
-    depth: GradientDepth;
-    color: "black" | "white";
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ButtonWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CarouselControls: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Indicator: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    active: boolean;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/dist/marketing-banner/components/BannerText.d.ts

@@ -1,7 +0,0 @@
-/**
- * BannerText Sub-Component
- * Renders text content (header, title, subtitle, bodyText) using the Typography component
- */
-import React from 'react';
-import type { BannerTextProps } from '../types';
-export declare function BannerText({ headerText, title, subtitle, bodyText, textColor, textAlignment, testId, $, isEditing }: Readonly<BannerTextProps>): React.ReactElement | null;

package/dist/marketing-banner/components/BannerText.styled.d.ts

@@ -1,23 +0,0 @@
-import type { TextAlignment } from '../types';
-export declare const TextContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    textAlignment: TextAlignment;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderTextWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SubtitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BodyTextWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/marketing-banner/components/index.d.ts

@@ -1 +0,0 @@
-export { BannerText } from './BannerText';

package/dist/marketing-banner/components/specs/BannerText.spec.d.ts

@@ -1,5 +0,0 @@
-/**
- * Unit Tests
- * BannerText Component
- */
-export {};

package/dist/marketing-banner/constants.d.ts

@@ -1,22 +0,0 @@
-/**
- * Default Configurations
- * Marketing Banner Component
- */
-export declare const DEFAULT_BANNER_CONFIG: {
-    position: "left";
-    textColor: "white";
-    showGradient: boolean;
-    gradientDepth: "md";
-    mediaType: "image";
-    ctaVariant: "dark";
-};
-export declare const DEFAULT_CAROUSEL_CONFIG: {
-    rotationInterval: number;
-};
-export declare const DEFAULT_ROTATION_INTERVAL = 5000;
-export declare const PLACEHOLDER_VALUES: {
-    readonly header: "Enter Header";
-    readonly title: "Enter Title";
-    readonly subtitle: "Enter Subtitle";
-    readonly body: "Enter Body Text";
-};

package/dist/marketing-banner/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useCarousel } from './useCarousel';
-export { useReducedMotion } from './useReducedMotion';

package/dist/marketing-banner/hooks/useCarousel.d.ts

@@ -1,14 +0,0 @@
-/**
- * useCarousel Hook
- * Manages carousel state and keyboard navigation
- */
-import type { UseCarouselReturn } from '../types';
-interface UseCarouselOptions {
-    totalSlides: number;
-    autoRotate?: boolean;
-    rotationInterval?: number;
-    pauseOnHover?: boolean;
-    initialIndex?: number;
-}
-export declare function useCarousel(options: UseCarouselOptions): UseCarouselReturn;
-export {};

package/dist/marketing-banner/hooks/useReducedMotion.d.ts

@@ -1,5 +0,0 @@
-/**
- * useReducedMotion Hook
- * Detects user's prefers-reduced-motion preference
- */
-export declare function useReducedMotion(): boolean;

package/dist/marketing-banner/index.d.ts

@@ -1,3 +0,0 @@
-export { default as MarketingBanner } from './MarketingBanner';
-export * from './types';
-export * from './constants';

package/dist/marketing-banner/specs/MarketingBanner.spec.d.ts

@@ -1,5 +0,0 @@
-/**
- * Unit Tests
- * MarketingBanner Component
- */
-import '@testing-library/jest-dom';

package/dist/marketing-banner/specs/mockData.d.ts

@@ -1,22 +0,0 @@
-/**
- * Mock Data for Transform Utilities Tests
- * Contains test data for CMS transformation functions
- */
-import type { BannerData, MarketingBannerData } from '../types';
-export declare const mockBannerWithNestedObjects: BannerData;
-export declare const mockBannerWithFlatStructure: BannerData;
-export declare const mockBynderImageJson: string;
-export declare const mockBannerWithBynderImage: BannerData;
-export declare const mockBynderVideoJson: string;
-export declare const mockBannerWithBynderVideo: BannerData;
-export declare const mockBynderPrivateVideoJson: string;
-export declare const mockBannerWithPrivateVideo: BannerData;
-export declare const mockMinimalBanner: BannerData;
-export declare const mockBannerWithMetadata: BannerData;
-export declare const mockCarouselWithMultipleBanners: MarketingBannerData;
-export declare const mockMinimalCarousel: MarketingBannerData;
-export declare const mockCarouselWithCustomRotation: MarketingBannerData;
-export declare const mockBynderCarouselImageJson: string;
-export declare const mockCarouselWithBynderMedia: MarketingBannerData;
-export declare const mockResponsiveBynderMediaJson: string;
-export declare const mockBannerWithResponsiveMedia: BannerData;

package/dist/marketing-banner/specs/useCarousel.spec.d.ts

@@ -1,5 +0,0 @@
-/**
- * Unit Tests
- * useCarousel Hook
- */
-export {};

package/dist/marketing-banner/specs/utils.spec.d.ts

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

package/dist/marketing-banner/styles/mixins.d.ts

@@ -1,53 +0,0 @@
-/**
- * Marketing Banner Styled Component Mixins
- * Reusable CSS patterns and helper functions
- */
-/**
- * Responsive font sizing
- * Applies font-size at different breakpoints
- */
-export declare const responsiveFontSize: (sizes: Record<string, string>) => import("@emotion/utils").SerializedStyles;
-/**
- * Center text on mobile, preserve positioning on desktop
- */
-export declare const centerOnMobile: import("@emotion/utils").SerializedStyles;
-/**
- * Smooth transitions for interactive elements
- */
-export declare const smoothTransition: (properties?: string[]) => import("@emotion/utils").SerializedStyles;
-/**
- * Focus outline styling for accessibility
- */
-export declare const focusOutline: (color: string) => import("@emotion/utils").SerializedStyles;
-/**
- * Absolute fill (cover parent completely)
- */
-export declare const absoluteFill: import("@emotion/utils").SerializedStyles;
-/**
- * Absolute positioning with dimensions
- */
-export declare const absoluteFullSize: import("@emotion/utils").SerializedStyles;
-/**
- * Center positioning (horizontal only)
- */
-export declare const centerHorizontal: import("@emotion/utils").SerializedStyles;
-/**
- * Flex center alignment
- */
-export declare const flexCenter: import("@emotion/utils").SerializedStyles;
-/**
- * Removes all margins and padding
- */
-export declare const resetSpacing: import("@emotion/utils").SerializedStyles;
-/**
- * CTA hover state with transform
- */
-export declare const ctaHoverState: (backgroundColor: string, borderColor: string, textColor: string) => import("@emotion/utils").SerializedStyles;
-/**
- * Gradient overlay mixin
- */
-export declare const gradientOverlay: (direction: string, startOpacity: number, endOpacity: number, baseColor: string) => import("@emotion/utils").SerializedStyles;
-/**
- * Radial gradient overlay mixin
- */
-export declare const radialGradientOverlay: (startOpacity: number, endOpacity: number, baseColor: string) => import("@emotion/utils").SerializedStyles;