@nuskin/marketing-components 1.40.0 → 1.40.1

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

@@ -1,99 +0,0 @@
-/**
- * Marketing Banner Theme Constants
- * Centralized design tokens for all components
- */
-export declare const BREAKPOINTS: {
-    readonly mobile: 0;
-    readonly tablet: 768;
-    readonly desktop: 1024;
-    readonly wide: 1440;
-};
-export declare const FONT_STACKS: {
-    readonly lora: "'Lora', Georgia, 'Times New Roman', serif";
-    readonly inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
-};
-export declare const FONT_SIZES: {
-    readonly header: {
-        readonly mobile: "12px";
-        readonly tablet: "14px";
-        readonly desktop: "14px";
-        readonly wide: "16px";
-    };
-    readonly title: {
-        readonly mobile: "24px";
-        readonly tablet: "32px";
-        readonly desktop: "40px";
-        readonly wide: "48px";
-    };
-    readonly subtitle: {
-        readonly mobile: "16px";
-        readonly tablet: "18px";
-        readonly desktop: "20px";
-        readonly wide: "22px";
-    };
-    readonly body: {
-        readonly mobile: "14px";
-        readonly tablet: "16px";
-        readonly desktop: "18px";
-        readonly wide: "20px";
-    };
-    readonly cta: {
-        readonly mobile: "18px";
-        readonly tablet: "22px";
-        readonly wide: "24px";
-    };
-};
-export declare const SPACING: {
-    readonly headerMargin: "0 0 0.25rem 0";
-    readonly titleMargin: "0 0 0.75rem 0";
-    readonly subtitleMargin: "0 0 0.5rem 0";
-    readonly bodyMargin: "0";
-    readonly textGap: "1.5rem";
-    readonly desktopPadding: "3rem";
-    readonly mobilePadding: "2rem";
-    readonly carouselGap: "0.75rem";
-    readonly ctaPaddingDesktop: "16px 32px";
-    readonly ctaPaddingTablet: "12px 28px";
-    readonly ctaPaddingWide: "18px 36px";
-};
-export declare const DIMENSIONS: {
-    readonly bannerHeightDesktop: "600px";
-    readonly bannerHeightMobile: "400px";
-    readonly textMaxWidth: "600px";
-    readonly indicatorSize: "12px";
-    readonly indicatorBorder: "2px";
-};
-export declare const COLORS: {
-    readonly textWhite: "#ffffff";
-    readonly textDark: "#1D1D1B";
-    readonly textGray: "#666";
-    readonly ctaDark: "#888888";
-    readonly ctaBorder: "#888888";
-    readonly fallbackBg: "#f0f0f0";
-    readonly indicatorBorder: "rgba(255, 255, 255, 0.9)";
-    readonly indicatorActive: "rgba(255, 255, 255, 0.9)";
-    readonly indicatorInactive: "transparent";
-};
-export declare const TEXT_COLOR_MAP: {
-    readonly white: "#ffffff";
-    readonly dark: "#1D1D1B";
-};
-export declare const TRANSITIONS: {
-    readonly fast: "0.1s ease";
-    readonly default: "0.3s ease";
-    readonly slow: "0.6s cubic-bezier(0.4, 0, 0.2, 1)";
-};
-export declare const Z_INDEX: {
-    readonly background: 0;
-    readonly media: 0;
-    readonly gradient: 1;
-    readonly content: 2;
-    readonly controls: 3;
-};
-export declare const MEDIA_QUERIES: {
-    readonly tablet: `@media (min-width: ${number}px) and (max-width: ${number}px)`;
-    readonly desktop: `@media (min-width: 1024px) and (max-width: ${number}px)`;
-    readonly wide: "@media (min-width: 1440px)";
-    readonly mobileAndBelow: "@media (max-width: 768px)";
-    readonly desktopAndUp: "@media (min-width: 1024px)";
-};

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

@@ -1,57 +0,0 @@
-import { ButtonBlockProp } from '../button/types';
-export type CSEditTags = Record<string, any>;
-export type GradientDirection = 'leftToRight' | 'rightToLeft' | 'radial';
-export type GradientDepth = 'sm' | 'md' | 'lg';
-export type ColorTheme = 'primary' | 'secondary';
-export type TextColor = 'white' | 'dark';
-export type MediaType = 'image' | 'gif' | 'video';
-export type BannerAlignment = 'left' | 'center' | 'right';
-export type TextAlignment = 'left' | 'center' | 'right';
-export interface BannerData {
-    header_text?: string;
-    title?: string;
-    subtitle?: string;
-    body_text?: string;
-    cta_button?: ButtonBlockProp;
-    bynder_media?: string;
-    position?: 'left' | 'center' | 'right';
-    text_color?: 'white' | 'dark';
-    gradient?: {
-        show_gradient?: boolean;
-        gradient_depth?: 'sm' | 'md' | 'lg';
-        $?: CSEditTags;
-    };
-    content_position?: 'left' | 'center' | 'right';
-    $?: CSEditTags;
-    isEditing?: boolean;
-}
-export interface MarketingBannerData {
-    readonly banners: BannerData[];
-    readonly rotation_interval?: number;
-}
-export interface MarketingBannerProps extends MarketingBannerData {
-    readonly isEditing?: boolean;
-    readonly $?: CSEditTags;
-}
-export interface BannerTextProps {
-    readonly headerText?: string;
-    readonly title?: string;
-    readonly subtitle?: string;
-    readonly bodyText?: string;
-    readonly textColor?: string;
-    readonly textAlignment?: TextAlignment;
-    readonly testId?: string;
-    readonly $?: CSEditTags;
-    readonly isEditing?: boolean;
-}
-export interface UseCarouselReturn {
-    currentIndex: number;
-    isPaused: boolean;
-    totalSlides: number;
-    goToNext: () => void;
-    goToPrevious: () => void;
-    goToSlide: (index: number) => void;
-    pause: () => void;
-    resume: () => void;
-    handleKeyDown: (event: React.KeyboardEvent) => void;
-}

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

@@ -1 +0,0 @@
-export * from './utils';

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

@@ -1,4 +0,0 @@
-import { MarketingBannerProps, BannerData } from '../types';
-export declare function hasCTA(banner: BannerData): boolean;
-export declare function isCarouselMode(props: MarketingBannerProps): boolean;
-export declare function hasMedia(banner: BannerData): boolean;

package/dist/rich-text/RichText.d.ts

@@ -1,27 +0,0 @@
-import { ReactElement } from 'react';
-import CsText from '../text/CsText';
-import type { ComponentProps } from 'react';
-type CsTextProps = ComponentProps<typeof CsText>;
-interface RichTextProps extends Omit<CsTextProps, 'text_editor' | 'font_color'> {
-    text_editor: string;
-    font_color?: 'Light' | 'Dark';
-}
-/**
- * RichText Component
- *
- * Wrapper component that sanitizes Rich Text Editor content before passing to CsText.
- * Uses DOMPurify to remove dangerous markup (scripts, styles, event handlers, etc.)
- * while preserving allowed formatting tags and attributes.
- *
- * SECURITY FEATURES:
- * - Removes script tags and event handlers
- * - Strips dangerous attributes and tags
- * - Allows only specified tags: p, div, span, a, br, strong, em, i, u, h1, h2, h3, ul, ol, li
- * - Allows only specified attributes: href, target, rel, title, class, style, data-cslp
- * - Sanitization is applied before rendering in CsText
- *
- * @param props - CsText component props with sanitizable text_editor content
- * @returns Rendered component with sanitized content
- */
-declare const RichText: ({ text_editor, font_color, ...restProps }: RichTextProps) => ReactElement | null;
-export default RichText;

package/dist/rich-text/RichText.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import RichText from './RichText';
-import 'react-quill/dist/quill.snow.css';
-declare const meta: Meta<typeof RichText>;
-export default meta;
-type Story = StoryObj<typeof RichText>;
-export declare const CMSForm: Story;
-export declare const Sandbox: Story;

package/dist/rich-text/index.d.ts

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

package/dist/rich-text/specs/RichText.spec.d.ts

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

package/dist/spacing-divider/SpacingDivider.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { SpacingDividerProps } from './types';
-declare const SpacingDivider: (props: SpacingDividerProps) => React.ReactElement | null;
-export default SpacingDivider;

package/dist/spacing-divider/SpacingDivider.stories.d.ts

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

package/dist/spacing-divider/SpacingDivider.styled.d.ts

@@ -1,9 +0,0 @@
-import type { StyledSpacingProps, StyledDividerProps } from './types';
-export declare const StyledSpacingContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & StyledSpacingProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledDividerLine: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & StyledDividerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/spacing-divider/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SpacingDivider } from './SpacingDivider';
-export type { SpacingDividerProps } from './types';

package/dist/spacing-divider/specs/SpacingDivider.spec.d.ts

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

package/dist/spacing-divider/types.d.ts

@@ -1,26 +0,0 @@
-export type PaddingScale = 'none' | 'small' | 'medium' | 'large';
-export type DividerStyle = 'solid' | 'dashed' | 'dotted' | 'none';
-export type DividerThickness = 'thin' | 'medium' | 'thick';
-export type BreakpointName = 'mobile' | 'tablet' | 'desktop' | 'ultra';
-export interface SpacingDividerProps {
-    vertical_padding?: PaddingScale;
-    divider_style?: DividerStyle;
-    divider_thickness?: DividerThickness;
-    divider_color?: string;
-    divider_gradient_preset?: 'none' | 'soft' | 'bold' | 'faint';
-    divider_width_percent?: number;
-    divider_alignment?: 'left' | 'center' | 'right';
-}
-export interface StyledSpacingProps {
-    vertical_padding: PaddingScale;
-    divider_alignment: 'left' | 'center' | 'right';
-}
-export interface StyledDividerProps {
-    divider_style: DividerStyle;
-    divider_thickness_px: number;
-    divider_color: string;
-    divider_gradient?: string;
-    divider_width_percent: number;
-}
-export declare const THICKNESS_PX: Record<DividerThickness, number>;
-export declare const BREAKPOINTS: Record<BreakpointName, string>;

package/dist/spacing-divider/utils/specs/utils.spec.d.ts

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

package/dist/spacing-divider/utils/utils.d.ts

@@ -1,13 +0,0 @@
-/**
- * Validates if a string is a valid hex color
- * @param value - The string to validate
- * @returns true if valid hex color, false otherwise
- */
-export declare const isValidHex: (value?: string) => boolean;
-/**
- * Generates CSS gradient string based on preset and base color
- * @param preset - The gradient preset type
- * @param baseHex - The base hex color for the gradient
- * @returns CSS gradient string or undefined
- */
-export declare const gradientPresetCss: (preset?: "none" | "soft" | "bold" | "faint", baseHex?: string) => string | undefined;

package/dist/text/CsText.d.ts

@@ -1,15 +0,0 @@
-import { ReactElement } from 'react';
-import { RegionLanguageQuery } from '../utils/route-utils';
-interface CsTextProps {
-    full_width?: boolean;
-    container_background_color?: unknown;
-    alignment?: 'left' | 'center' | 'right';
-    text_editor: string;
-    font_color?: boolean;
-    $?: {
-        text_editor?: Record<string, unknown>;
-    };
-}
-export declare const rewriteLinks: (html: string, replacer?: RegionLanguageQuery) => string;
-declare const CsText: ({ full_width, container_background_color, alignment, text_editor, font_color, $ }: CsTextProps) => ReactElement | null;
-export default CsText;

package/dist/text/CsText.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import CsText from './CsText';
-import 'react-quill/dist/quill.snow.css';
-declare const meta: Meta<typeof CsText>;
-export default meta;
-type Story = StoryObj<typeof CsText>;
-export declare const CMSForm: Story;

package/dist/text/index.d.ts

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

package/dist/text/specs/CsText.spec.d.ts

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

package/dist/typography/Typography.d.ts

@@ -1,18 +0,0 @@
-import { TypographyProps } from './types';
-/**
- * Centralized Typography Component
- *
- * Supports multiple variants with responsive font sizes for desktop and mobile/tablet.
- * Includes ADA compliance features like semantic HTML and ARIA attributes.
- *
- * @param variant - Typography variant
- * @param inputText - Text content to display
- * @param color - Text color (hex code, default: #1D1D1B)
- * @param className - Additional CSS class
- * @param role - ARIA role for accessibility
- * @param ariaLabel - ARIA label for screen readers
- * @param ariaDescribedBy - ARIA described-by attribute
- * @param dataTestId - Data attribute for testing
- */
-export declare const Typography: ({ variant, inputText, color, className, dataTestId, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
-export default Typography;

package/dist/typography/Typography.stories.d.ts

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

package/dist/typography/Typography.styled.d.ts

@@ -1,80 +0,0 @@
-import { TypographyStyledProps } from './types';
-export declare const typographyVariants: {
-    h1: {
-        desktop: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        mobile: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        fontFamily: string;
-    };
-    h2: {
-        desktop: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        mobile: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        fontFamily: string;
-    };
-    h3: {
-        desktop: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        mobile: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        fontFamily: string;
-    };
-    body: {
-        desktop: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        mobile: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        fontFamily: string;
-    };
-    disclaimer: {
-        desktop: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        mobile: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        fontFamily: string;
-    };
-    boxquote: {
-        desktop: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        mobile: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        fontFamily: string;
-    };
-};
-/**
- * Common text element styles for rich content
- * Includes styling for paragraphs, links, lists, and text formatting
- * Can be imported and used in other styled components
- */
-export declare const commonTextStyles = "\n    p {\n        margin: 0;\n        padding: 0;\n        font-size: 16px;\n        line-height: 22px;\n        font-family: 'Inter', sans-serif;\n    }\n\n    @media (max-width: 768px) {\n        p {\n            font-size: 16px;\n            line-height: 22px;\n        }\n    }\n\n    strong, b {\n        font-weight: 600;\n    }\n\n    em, i {\n        font-style: italic;\n    }\n\n    a {\n        color: #008ab0;\n        text-decoration: underline;\n\n        &:hover {\n            opacity: 0.8;\n        }\n    }\n\n    ul, ol {\n        margin: 16px 0;\n        padding-left: 24px;\n    }\n\n    li {\n        margin: 8px 0;\n    }\n";
-export declare const variantToElement: Record<string, string>;
-export declare const TypographyStyled: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & TypographyStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/typography/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Typography } from './Typography';
-export { typographyVariants } from './Typography.styled';
-export * from './types';

package/dist/typography/specs/Typography.spec.d.ts

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

package/dist/typography/types.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'disclaimer' | 'boxquote';
-export interface TypographyStyledProps {
-    variant?: TypographyVariant;
-    color?: string;
-}
-export interface TypographyProps {
-    variant?: TypographyVariant;
-    inputText?: ReactNode;
-    color?: string;
-    className?: string;
-    role?: string;
-    ariaLabel?: string;
-    ariaDescribedBy?: string;
-    dataTestId?: string;
-    style?: CSSProperties;
-    [key: string]: any;
-}

package/dist/utils/deviceConstants.d.ts

@@ -1,13 +0,0 @@
-/** Shared breakpoints and layout constants for column-control and carousel. */
-export declare const DEVICE_SIZES: {
-    readonly ULTRA_SMALL: 320;
-    readonly EXTRA_SMALL: 480;
-    readonly SMALL: 600;
-    readonly MEDIUM: 768;
-    readonly LARGE: 1024;
-    readonly EXTRA_LARGE: 1200;
-    readonly ULTRA_LARGE: 1440;
-    readonly SUPER_LARGE: 1920;
-};
-/** Max height of a slide/card when height is content-driven. */
-export declare const MAX_SLIDE_HEIGHT_PX = 750;

package/dist/utils/route-utils.d.ts

@@ -1,18 +0,0 @@
-export type RegionLanguageQuery = {
-    region?: string;
-    language?: string;
-    slug?: string;
-};
-/**
- * Replace {%region}, {%language} placeholders in text
- */
-export declare const replaceRegionAndLanguage: (text: string, replacer?: RegionLanguageQuery) => string;
-/**
- * Replace dynamic pathname segments like [region], [language]
- */
-export declare const replacePathnameWithQueryParams: (pathname: string, queryParams: RegionLanguageQuery) => string;
-/**
- * Extract region & language from a query object
- */
-export declare const getRegionAndLanguageFromQuery: (query?: Record<string, string | string[] | undefined>) => RegionLanguageQuery | undefined;
-export declare const getRegionAndLanguageFromLocation: () => RegionLanguageQuery;

package/dist/utils/specs/route-utils.spec.d.ts

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

package/dist/utils/viewportLayoutUtils.d.ts

@@ -1,4 +0,0 @@
-/** Preset name used by both column-control and carousel. */
-type PresetName = 'single-full' | 'two-equal' | 'two-small-large' | 'three-equal' | 'three-small-medium-large' | 'four-equal';
-export declare function getPresetColumns(preset: PresetName | undefined): number;
-export {};