@nuskin/marketing-components 1.51.0-video-player.1 → 1.51.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import React$1, { ReactElement, ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface CsTextProps$1 {
+interface CsTextProps$2 {
     readonly full_width?: boolean;
     readonly container_background_color?: unknown;
     readonly alignment?: 'left' | 'center' | 'right';
@@ -11,7 +11,7 @@ interface CsTextProps$1 {
         text_editor?: Record<string, unknown>;
     };
 }
-declare const CsText: ({ full_width, container_background_color, alignment, text_editor, font_color, $ }: CsTextProps$1) => ReactElement | null;
+declare const CsText: ({ full_width, container_background_color, alignment, text_editor, font_color, $ }: CsTextProps$2) => ReactElement | null;
 
 type NsImageProps = {
     alt: string;
@@ -201,11 +201,11 @@ declare const PLACEHOLDER_VALUES: {
     readonly body: "Enter Body Text";
 };
 
-type PaddingScale$1 = 'none' | 'small' | 'medium' | 'large';
+type PaddingScale = 'none' | 'small' | 'medium' | 'large';
 type DividerStyle = 'solid' | 'dashed' | 'dotted' | 'none';
 type DividerThickness = 'thin' | 'medium' | 'thick';
 interface SpacingDividerProps {
-    vertical_padding?: PaddingScale$1;
+    vertical_padding?: PaddingScale;
     divider_style?: DividerStyle;
     divider_thickness?: DividerThickness;
     divider_color?: string;
@@ -352,8 +352,8 @@ interface HeroBannerProps {
 
 declare const HeroBanner: React$1.FC<HeroBannerProps>;
 
-type CsTextProps = ComponentProps<typeof CsText>;
-interface RichTextProps extends Omit<CsTextProps, 'text_editor' | 'font_color'> {
+type CsTextProps$1 = ComponentProps<typeof CsText>;
+interface RichTextProps extends Omit<CsTextProps$1, 'text_editor' | 'font_color'> {
     readonly text_editor: string;
     readonly font_color?: 'Light' | 'Dark';
     readonly container_alignment?: 'left' | 'center' | 'right';
@@ -447,6 +447,34 @@ declare function BynderMedia({ bynder_media, $ }: Readonly<BynderMediaProps>): R
 declare function getMediaUrl(selected: BynderImageDataType['selected'], isPublic: boolean, previewUrls: BynderImageDataType['previewUrls']): string;
 declare function extractBynderMedia(mediaJson?: string): BynderMediaExtracted | null;
 
+type CsTextProps = ComponentProps<typeof CsText>;
+interface TableRichTextProps extends Omit<CsTextProps, 'text_editor' | 'font_color'> {
+    readonly text_editor: string;
+    readonly font_color?: 'Light' | 'Dark';
+    readonly container_alignment?: 'left' | 'center' | 'right';
+    readonly container_vertical_alignment?: 'top' | 'center' | 'bottom';
+    readonly container_width?: 100 | 75 | 50 | 25;
+    readonly container_background_color?: string;
+}
+/**
+ * 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 TableRichText: ({ text_editor, font_color, container_alignment, container_vertical_alignment, container_width, container_background_color, ...restProps }: TableRichTextProps) => ReactElement | null;
+
 type FaqSectionWidth = 25 | 50 | 75 | 100;
 interface FaqItemEditTags {
     question?: Record<string, unknown>;
@@ -487,95 +515,4 @@ interface FaqProps {
 
 declare const Faq: React$1.FC<FaqProps>;
 
-type VideoKind = 'youtube' | 'vimeo' | 'embed';
-type PaddingScale = 'none' | 'small' | 'medium' | 'large';
-type Alignment = 'left' | 'center' | 'right';
-/** Playback options for the video player. */
-interface PlaybackOptions {
-    autoplay?: boolean;
-    /** When false, controls are hidden. Defaults to visible. */
-    controls?: boolean;
-    loop?: boolean;
-}
-/** Normalized, render-ready description of a video. */
-interface VideoDescriptor extends PlaybackOptions {
-    /** 'youtube' | 'vimeo' render as a provider iframe; 'embed' renders a generic sandboxed iframe. */
-    kind: VideoKind;
-    /** Embed/iframe URL (providers & generic embeds) or direct media URL (file). */
-    src: string;
-    /** Optional human-readable title used for the iframe `title`. */
-    title?: string;
-}
-/** Raw values as supplied by the VideoPlayer component props. */
-interface VideoPlayerProps {
-    /** Video source type: 'youtube', 'vimeo', or 'embed' (generic iframe). */
-    videoSource?: 'youtube' | 'vimeo' | 'embed' | string;
-    /** Provider video URL or bare ID, a generic embed URL, or a direct file URL. */
-    url?: string;
-    autoplay?: boolean;
-    controls?: boolean;
-    loop?: boolean;
-    /** Optional accessible title for the iframe. */
-    title?: string;
-    /** Horizontal alignment of the video within its container. */
-    alignment?: Alignment;
-    /** Vertical padding above and below the video. */
-    vertical_padding?: PaddingScale;
-    /** Horizontal padding to the left and right of the video. */
-    horizontal_padding?: PaddingScale;
-    /** Width of the video as a percentage of its container (0–100). */
-    width_percent?: number | string;
-}
-
-/**
- * Renders a sandboxed provider/embed iframe (YouTube, Vimeo, generic) or an
- * HTML5 `<video>` for direct file URLs, given a normalized `VideoDescriptor`.
- * This internal variant accepts a pre-built descriptor — useful when you already
- * have one (e.g. from `buildVideoDescriptor`).
- */
-declare function VideoPlayerFromDescriptor({ video }: {
-    readonly video: VideoDescriptor | null;
-}): React$1.ReactElement;
-/**
- * Presentational video player component.
- *
- * Supports YouTube, Vimeo, generic embed iframes, and direct video file URLs.
- * Pass `videoSource` and `url` to render a video; if either is missing a
- * placeholder is shown instead.
- *
- * @example
- * // YouTube
- * <VideoPlayer videoSource="youtube" url="https://www.youtube.com/watch?v=I0_951_MPE0" />
- *
- * @example
- * // Vimeo
- * <VideoPlayer videoSource="vimeo" url="https://vimeo.com/22439234" />
- *
- * @example
- * // Direct file
- * <VideoPlayer videoSource="url" url="https://example.com/video.mp4" controls loop />
- */
-declare const VideoPlayer: React$1.FC<VideoPlayerProps>;
-
-/**
- * Only permit http/https URLs to prevent `javascript:` injection.
- */
-declare function safeVideoSrc(url: unknown): string;
-/**
- * Extract the bare video ID from either a raw id or a full share/watch URL.
- * The author may enter a YouTube/Vimeo URL or just the ID.
- */
-declare function extractVideoId(source: string, raw: unknown): string;
-/** Build a provider embed URL (YouTube/Vimeo), encoding playback options as query params. */
-declare function buildEmbedUrl(source: string, raw: unknown, opts?: PlaybackOptions): string;
-/**
- * Build a render-ready VideoDescriptor from the VideoPlayer props.
- * Returns null until enough has been entered to render something.
- *
- * Providers:
- *   - youtube / vimeo → provider embed iframe (options encoded in the URL).
- *   - embed           → generic iframe using the entered URL as-is.
- */
-declare function buildVideoDescriptor(videoSource: string | undefined, url: string | undefined, opts?: PlaybackOptions): VideoDescriptor | null;
-
-export { type BannerAlignment, type BannerData, type BannerTextProps, Button, type Button$, type ButtonAlignment, type ButtonBlockProp, type ButtonProps, type ButtonSize, type ButtonType, type ButtonVariant, Buttons, type ButtonsBlock, type ButtonsBlock$, type ButtonsEntry, type BynderImageDataType, BynderMedia, type BynderMediaExtracted, type BynderMediaProps, type BynderMediaType, type CSEditTags$1 as CSEditTags, Carousel, type CarouselPreset, type CarouselProps, type CarouselRenderSlide, type ColorTheme, _default as ColumnControl, type ColumnControlProps, type ContentAlignment, ContentCard, type ContentCardProps, CsImage, CsText as CsTextComponent, DEFAULT_BANNER_CONFIG, DEFAULT_CAROUSEL_CONFIG, DEFAULT_ROTATION_INTERVAL, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, type GradientDepth$1 as GradientDepth, type GradientDirection, HeroBanner, type HeroBanner$, type HeroBannerMediaType, type HeroBannerProps, type IconPosition, type LinkTarget, MarketingBannerComponent as MarketingBanner, type MarketingBannerData, type MarketingBannerProps, type MediaType, PLACEHOLDER_VALUES, type PlaybackOptions, RichText as RichTextComponent, SpacingDivider, type SpacingDividerProps, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, type VideoDescriptor, type VideoKind, VideoPlayer, VideoPlayerFromDescriptor, type VideoPlayerProps, buildEmbedUrl, buildVideoDescriptor, extractBynderMedia, extractVideoId, getMediaUrl, safeVideoSrc };
+export { type BannerAlignment, type BannerData, type BannerTextProps, Button, type Button$, type ButtonAlignment, type ButtonBlockProp, type ButtonProps, type ButtonSize, type ButtonType, type ButtonVariant, Buttons, type ButtonsBlock, type ButtonsBlock$, type ButtonsEntry, type BynderImageDataType, BynderMedia, type BynderMediaExtracted, type BynderMediaProps, type BynderMediaType, type CSEditTags$1 as CSEditTags, Carousel, type CarouselPreset, type CarouselProps, type CarouselRenderSlide, type ColorTheme, _default as ColumnControl, type ColumnControlProps, type ContentAlignment, ContentCard, type ContentCardProps, CsImage, CsText as CsTextComponent, DEFAULT_BANNER_CONFIG, DEFAULT_CAROUSEL_CONFIG, DEFAULT_ROTATION_INTERVAL, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, type GradientDepth$1 as GradientDepth, type GradientDirection, HeroBanner, type HeroBanner$, type HeroBannerMediaType, type HeroBannerProps, type IconPosition, type LinkTarget, MarketingBannerComponent as MarketingBanner, type MarketingBannerData, type MarketingBannerProps, type MediaType, PLACEHOLDER_VALUES, RichText as RichTextComponent, SpacingDivider, type SpacingDividerProps, TableRichText, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, extractBynderMedia, getMediaUrl };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactElement, ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface CsTextProps$1 {
+interface CsTextProps$2 {
     readonly full_width?: boolean;
     readonly container_background_color?: unknown;
     readonly alignment?: 'left' | 'center' | 'right';
@@ -11,7 +11,7 @@ interface CsTextProps$1 {
         text_editor?: Record<string, unknown>;
     };
 }
-declare const CsText: ({ full_width, container_background_color, alignment, text_editor, font_color, $ }: CsTextProps$1) => ReactElement | null;
+declare const CsText: ({ full_width, container_background_color, alignment, text_editor, font_color, $ }: CsTextProps$2) => ReactElement | null;
 
 type NsImageProps = {
     alt: string;
@@ -201,11 +201,11 @@ declare const PLACEHOLDER_VALUES: {
     readonly body: "Enter Body Text";
 };
 
-type PaddingScale$1 = 'none' | 'small' | 'medium' | 'large';
+type PaddingScale = 'none' | 'small' | 'medium' | 'large';
 type DividerStyle = 'solid' | 'dashed' | 'dotted' | 'none';
 type DividerThickness = 'thin' | 'medium' | 'thick';
 interface SpacingDividerProps {
-    vertical_padding?: PaddingScale$1;
+    vertical_padding?: PaddingScale;
     divider_style?: DividerStyle;
     divider_thickness?: DividerThickness;
     divider_color?: string;
@@ -352,8 +352,8 @@ interface HeroBannerProps {
 
 declare const HeroBanner: React$1.FC<HeroBannerProps>;
 
-type CsTextProps = ComponentProps<typeof CsText>;
-interface RichTextProps extends Omit<CsTextProps, 'text_editor' | 'font_color'> {
+type CsTextProps$1 = ComponentProps<typeof CsText>;
+interface RichTextProps extends Omit<CsTextProps$1, 'text_editor' | 'font_color'> {
     readonly text_editor: string;
     readonly font_color?: 'Light' | 'Dark';
     readonly container_alignment?: 'left' | 'center' | 'right';
@@ -447,6 +447,34 @@ declare function BynderMedia({ bynder_media, $ }: Readonly<BynderMediaProps>): R
 declare function getMediaUrl(selected: BynderImageDataType['selected'], isPublic: boolean, previewUrls: BynderImageDataType['previewUrls']): string;
 declare function extractBynderMedia(mediaJson?: string): BynderMediaExtracted | null;
 
+type CsTextProps = ComponentProps<typeof CsText>;
+interface TableRichTextProps extends Omit<CsTextProps, 'text_editor' | 'font_color'> {
+    readonly text_editor: string;
+    readonly font_color?: 'Light' | 'Dark';
+    readonly container_alignment?: 'left' | 'center' | 'right';
+    readonly container_vertical_alignment?: 'top' | 'center' | 'bottom';
+    readonly container_width?: 100 | 75 | 50 | 25;
+    readonly container_background_color?: string;
+}
+/**
+ * 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 TableRichText: ({ text_editor, font_color, container_alignment, container_vertical_alignment, container_width, container_background_color, ...restProps }: TableRichTextProps) => ReactElement | null;
+
 type FaqSectionWidth = 25 | 50 | 75 | 100;
 interface FaqItemEditTags {
     question?: Record<string, unknown>;
@@ -487,95 +515,4 @@ interface FaqProps {
 
 declare const Faq: React$1.FC<FaqProps>;
 
-type VideoKind = 'youtube' | 'vimeo' | 'embed';
-type PaddingScale = 'none' | 'small' | 'medium' | 'large';
-type Alignment = 'left' | 'center' | 'right';
-/** Playback options for the video player. */
-interface PlaybackOptions {
-    autoplay?: boolean;
-    /** When false, controls are hidden. Defaults to visible. */
-    controls?: boolean;
-    loop?: boolean;
-}
-/** Normalized, render-ready description of a video. */
-interface VideoDescriptor extends PlaybackOptions {
-    /** 'youtube' | 'vimeo' render as a provider iframe; 'embed' renders a generic sandboxed iframe. */
-    kind: VideoKind;
-    /** Embed/iframe URL (providers & generic embeds) or direct media URL (file). */
-    src: string;
-    /** Optional human-readable title used for the iframe `title`. */
-    title?: string;
-}
-/** Raw values as supplied by the VideoPlayer component props. */
-interface VideoPlayerProps {
-    /** Video source type: 'youtube', 'vimeo', or 'embed' (generic iframe). */
-    videoSource?: 'youtube' | 'vimeo' | 'embed' | string;
-    /** Provider video URL or bare ID, a generic embed URL, or a direct file URL. */
-    url?: string;
-    autoplay?: boolean;
-    controls?: boolean;
-    loop?: boolean;
-    /** Optional accessible title for the iframe. */
-    title?: string;
-    /** Horizontal alignment of the video within its container. */
-    alignment?: Alignment;
-    /** Vertical padding above and below the video. */
-    vertical_padding?: PaddingScale;
-    /** Horizontal padding to the left and right of the video. */
-    horizontal_padding?: PaddingScale;
-    /** Width of the video as a percentage of its container (0–100). */
-    width_percent?: number | string;
-}
-
-/**
- * Renders a sandboxed provider/embed iframe (YouTube, Vimeo, generic) or an
- * HTML5 `<video>` for direct file URLs, given a normalized `VideoDescriptor`.
- * This internal variant accepts a pre-built descriptor — useful when you already
- * have one (e.g. from `buildVideoDescriptor`).
- */
-declare function VideoPlayerFromDescriptor({ video }: {
-    readonly video: VideoDescriptor | null;
-}): React$1.ReactElement;
-/**
- * Presentational video player component.
- *
- * Supports YouTube, Vimeo, generic embed iframes, and direct video file URLs.
- * Pass `videoSource` and `url` to render a video; if either is missing a
- * placeholder is shown instead.
- *
- * @example
- * // YouTube
- * <VideoPlayer videoSource="youtube" url="https://www.youtube.com/watch?v=I0_951_MPE0" />
- *
- * @example
- * // Vimeo
- * <VideoPlayer videoSource="vimeo" url="https://vimeo.com/22439234" />
- *
- * @example
- * // Direct file
- * <VideoPlayer videoSource="url" url="https://example.com/video.mp4" controls loop />
- */
-declare const VideoPlayer: React$1.FC<VideoPlayerProps>;
-
-/**
- * Only permit http/https URLs to prevent `javascript:` injection.
- */
-declare function safeVideoSrc(url: unknown): string;
-/**
- * Extract the bare video ID from either a raw id or a full share/watch URL.
- * The author may enter a YouTube/Vimeo URL or just the ID.
- */
-declare function extractVideoId(source: string, raw: unknown): string;
-/** Build a provider embed URL (YouTube/Vimeo), encoding playback options as query params. */
-declare function buildEmbedUrl(source: string, raw: unknown, opts?: PlaybackOptions): string;
-/**
- * Build a render-ready VideoDescriptor from the VideoPlayer props.
- * Returns null until enough has been entered to render something.
- *
- * Providers:
- *   - youtube / vimeo → provider embed iframe (options encoded in the URL).
- *   - embed           → generic iframe using the entered URL as-is.
- */
-declare function buildVideoDescriptor(videoSource: string | undefined, url: string | undefined, opts?: PlaybackOptions): VideoDescriptor | null;
-
-export { type BannerAlignment, type BannerData, type BannerTextProps, Button, type Button$, type ButtonAlignment, type ButtonBlockProp, type ButtonProps, type ButtonSize, type ButtonType, type ButtonVariant, Buttons, type ButtonsBlock, type ButtonsBlock$, type ButtonsEntry, type BynderImageDataType, BynderMedia, type BynderMediaExtracted, type BynderMediaProps, type BynderMediaType, type CSEditTags$1 as CSEditTags, Carousel, type CarouselPreset, type CarouselProps, type CarouselRenderSlide, type ColorTheme, _default as ColumnControl, type ColumnControlProps, type ContentAlignment, ContentCard, type ContentCardProps, CsImage, CsText as CsTextComponent, DEFAULT_BANNER_CONFIG, DEFAULT_CAROUSEL_CONFIG, DEFAULT_ROTATION_INTERVAL, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, type GradientDepth$1 as GradientDepth, type GradientDirection, HeroBanner, type HeroBanner$, type HeroBannerMediaType, type HeroBannerProps, type IconPosition, type LinkTarget, MarketingBannerComponent as MarketingBanner, type MarketingBannerData, type MarketingBannerProps, type MediaType, PLACEHOLDER_VALUES, type PlaybackOptions, RichText as RichTextComponent, SpacingDivider, type SpacingDividerProps, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, type VideoDescriptor, type VideoKind, VideoPlayer, VideoPlayerFromDescriptor, type VideoPlayerProps, buildEmbedUrl, buildVideoDescriptor, extractBynderMedia, extractVideoId, getMediaUrl, safeVideoSrc };
+export { type BannerAlignment, type BannerData, type BannerTextProps, Button, type Button$, type ButtonAlignment, type ButtonBlockProp, type ButtonProps, type ButtonSize, type ButtonType, type ButtonVariant, Buttons, type ButtonsBlock, type ButtonsBlock$, type ButtonsEntry, type BynderImageDataType, BynderMedia, type BynderMediaExtracted, type BynderMediaProps, type BynderMediaType, type CSEditTags$1 as CSEditTags, Carousel, type CarouselPreset, type CarouselProps, type CarouselRenderSlide, type ColorTheme, _default as ColumnControl, type ColumnControlProps, type ContentAlignment, ContentCard, type ContentCardProps, CsImage, CsText as CsTextComponent, DEFAULT_BANNER_CONFIG, DEFAULT_CAROUSEL_CONFIG, DEFAULT_ROTATION_INTERVAL, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, type GradientDepth$1 as GradientDepth, type GradientDirection, HeroBanner, type HeroBanner$, type HeroBannerMediaType, type HeroBannerProps, type IconPosition, type LinkTarget, MarketingBannerComponent as MarketingBanner, type MarketingBannerData, type MarketingBannerProps, type MediaType, PLACEHOLDER_VALUES, RichText as RichTextComponent, SpacingDivider, type SpacingDividerProps, TableRichText, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, extractBynderMedia, getMediaUrl };