@wix/editor-react-components 1.2797.0 → 1.2798.0

package/dist/site/components/HTMLComponent/component.js

@@ -8,6 +8,7 @@ import { useService } from "@wix/services-manager-react";
 import { d as defineStaticService } from "../chunks/staticService.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { T as TranslationsDefinition } from "../chunks/index4.js";
+import { C as CLASS_NAME_ON_COMPONENT_ROOT_EXPERIMENT, M as MOVE_PREVIEW_IDENTITY_CLASSES_TO_ROOT_EXPERIMENT } from "../chunks/specs.js";
 import { A as ARIA_LABEL_NAMESPACE } from "../chunks/constants35.js";
 const isBrowser = () => typeof window !== "undefined";
 function useIFrame({
@@ -181,7 +182,7 @@ const useHTMLComponentProps = ({
   isPreview,
   shouldUseConsentPolicy
 }) => {
-  var _a;
+  var _a, _b, _c;
   const { topology } = useService(TopologyDefinition);
   const environment = useService(EnvironmentDefinition);
   const { translate } = useService(TranslationsDefinition);
@@ -231,7 +232,14 @@ const useHTMLComponentProps = ({
   ]);
   return {
     componentProps: memoizedProps,
-    isSSR: ((_a = environment == null ? void 0 : environment.isSSR) == null ? void 0 : _a.call(environment)) ?? false
+    isSSR: ((_a = environment == null ? void 0 : environment.isSSR) == null ? void 0 : _a.call(environment)) ?? false,
+    isClassNameToRootEnabled: (((_b = environment == null ? void 0 : environment.isExperimentOpen) == null ? void 0 : _b.call(
+      environment,
+      CLASS_NAME_ON_COMPONENT_ROOT_EXPERIMENT
+    )) || ((_c = environment == null ? void 0 : environment.isExperimentOpen) == null ? void 0 : _c.call(
+      environment,
+      MOVE_PREVIEW_IDENTITY_CLASSES_TO_ROOT_EXPERIMENT
+    ))) ?? false
   };
 };
 const codeBlockIcon = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.02637%2012.7462L10.0254%205L10.9936%205.24987L8.99465%2012.9961L8.02637%2012.7462Z'%20fill='black'%20/%3e%3cpath%20d='M7.41%2010.998L5.42%208.99799L7.41%207.00799L6.71%206.29799L4%208.99799L6.71%2011.708L7.41%2010.998Z'%20fill='black'%20/%3e%3cpath%20d='M14.9901%208.99799L12.2901%2011.708L11.5801%2010.998L13.5801%208.99799L11.5801%207.00799L12.2901%206.29799L14.9901%208.99799Z'%20fill='black'%20/%3e%3cpath%20d='M16.01%206.99769H18.51C19.34%206.99769%2020.01%207.66769%2020.01%208.49769V17.4977C20.01%2018.3277%2019.34%2018.9977%2018.51%2018.9977H7.51001C6.68001%2018.9977%206.01001%2018.3277%206.01001%2017.4977V13.9977H7.01001V17.4977C7.01001%2017.7777%207.23001%2017.9977%207.51001%2017.9977H18.51C18.79%2017.9977%2019.01%2017.7777%2019.01%2017.4977V8.49769C19.01%208.21769%2018.79%207.99769%2018.51%207.99769H16.01V6.99769Z'%20fill='black'%20/%3e%3c/svg%3e";
@@ -253,13 +261,19 @@ const EmptyState = (props) => {
   ) });
 };
 const HTMLComponent = React__default.forwardRef((props, forwardRef) => {
-  const { componentProps, isSSR } = useHTMLComponentProps({
+  const { componentProps, isSSR, isClassNameToRootEnabled } = useHTMLComponentProps({
     props,
     isPreview: false,
     shouldUseConsentPolicy: true
   });
   if (isSSR) {
-    return /* @__PURE__ */ jsx("div", {});
+    return isClassNameToRootEnabled ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: props.id,
+        className: clsx(styles.root, componentProps.className)
+      }
+    ) : /* @__PURE__ */ jsx("div", {});
   }
   if (!props.url || props.url.trim() === "") {
     return /* @__PURE__ */ jsx(EmptyState, { ...componentProps });
@@ -274,6 +288,7 @@ const HTMLComponent = React__default.forwardRef((props, forwardRef) => {
         },
         rootClassName: clsx(styles.root, className),
         ...restProps,
+        isPreMountRootClassNameEnabled: isClassNameToRootEnabled,
         children: /* @__PURE__ */ jsx(HTMLComponent$1, { ...componentProps, ref: forwardRef })
       }
     );

package/dist/site/components/HTMLComponent/hooks/useHTMLComponentProps.d.ts

@@ -16,5 +16,6 @@ interface UseHTMLComponentPropsParams {
 export declare const useHTMLComponentProps: ({ props, isPreview, shouldUseConsentPolicy, }: UseHTMLComponentPropsParams) => {
     componentProps: Partial<HtmlComponentProps>;
     isSSR: boolean;
+    isClassNameToRootEnabled: boolean;
 };
 export {};

package/dist/site/components/Image3/manifest.js

@@ -2,7 +2,7 @@ import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, M as MEDIA, b as DIS
 const manifest = {
   id: "0bfa7aab-081b-431b-adb2-1b1062e8f21a",
   type: "wixEditorElements.Image",
-  description: "A fundamental component for displaying image files",
+  description: "A single photo, picture, or graphic. Use when users want to show something visually: their own photo or one from the library, a screenshot, a product or a person, or a picture in a shape or one that links somewhere. Not for icons, illustrations, or decorative graphics.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/SocialPlayerFacebook/manifest.js

@@ -2,7 +2,7 @@ import { D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, L as LAYOUT } from
 const manifest = {
   id: "ac17f3cb-c4f8-4f35-be4f-81ef456cce7e",
   type: "wixEditorElements.FacebookPlayer",
-  description: "Embeds and plays Facebook videos or stories directly on a web page",
+  description: "Plays a Facebook video or story from its link. Use when users want to show a video from Facebook, feature content from their Facebook page, or add a Facebook video by pasting its link instead of uploading a file.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/SocialPlayerInstagram/manifest.js

@@ -2,7 +2,7 @@ import { D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, L as LAYOUT, A as
 const manifest = {
   id: "57cac74a-f0dc-416b-9f09-0c38799c3402",
   type: "wixEditorElements.InstagramPlayer",
-  description: "Embeds and plays Instagram videos directly on a web page",
+  description: "Plays an Instagram video from its link. Use when users want to show an Instagram video or reel, feature content from their Instagram account, or add an Instagram video by pasting its link instead of uploading a file.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/SocialPlayerSnapchat/manifest.js

@@ -2,7 +2,7 @@ import { D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, L as LAYOUT, A as
 const manifest = {
   id: "fe00a488-978a-440c-aead-b43ab9795ad2",
   type: "wixEditorElements.SnapchatPlayer",
-  description: "Embeds and plays Snapchat videos or stories directly on a web page",
+  description: "Plays a Snapchat video or story from its link. Use when users want to show a Snapchat story or Spotlight video, feature content from their Snapchat account, or add a Snapchat video by pasting its link.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/SocialPlayerTikTok/manifest.js

@@ -2,7 +2,7 @@ import { I as INTERACTIONS, C as CSS_PROPERTIES, D as DATA, b as DISPLAY_GROUPS,
 const manifest = {
   id: "1bc7cd37-5d90-48a6-a2c1-de94f77d4fd6",
   type: "wixEditorElements.TikTokPlayer",
-  description: "Displays a TikTok video player, allowing users to watch and share short-form videos",
+  description: "Plays a TikTok video from its link. Use when users want to show a TikTok, feature short videos from their TikTok account, or add a TikTok video by pasting its link instead of uploading a file.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/SocialPlayerVimeo/manifest.js

@@ -2,7 +2,7 @@ import { I as INTERACTIONS, C as CSS_PROPERTIES, D as DATA, b as DISPLAY_GROUPS,
 const manifest = {
   id: "8ec522c3-d8dd-43d8-9f07-1c4c1bb09d80",
   type: "wixEditorElements.VimeoPlayer",
-  description: "Embeds Vimeo videos, allowing visitors to watch them directly on a web page",
+  description: "Plays a Vimeo video from its link. Use when users want to show a video hosted on Vimeo, feature their own Vimeo work, or add a Vimeo video by pasting its link instead of uploading a file.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/SocialPlayerYoutube/manifest.js

@@ -2,7 +2,7 @@ import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS,
 const manifest = {
   id: "4190f51c-3836-49f6-8114-96219c165b20",
   type: "wixEditorElements.YoutubePlayer",
-  description: "plays youtube videos directly on a web page",
+  description: "Plays a YouTube video from its link. Use when users want to show a video from YouTube, feature content from their YouTube channel, or add a YouTube video by pasting its link instead of uploading a file.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/SvgImage/manifest.js

@@ -2,7 +2,7 @@ import { I as INTERACTIONS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES,
 const manifest = {
   id: "4dbf752a-8a67-4149-87e7-6132bc25d3c2",
   type: "wixEditorElements.SvgImage",
-  description: "Displays scalable vector graphics for decorative or illustrative purposes on a page",
+  description: "Scalable graphics that stay sharp and can be recolored. Use when users want to decorate the page or draw attention to something: an illustration, icon, sticker, arrow, or shape, a simple drawing in their brand colors, or their own SVG file. Not for photos.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/TextEffects3d/manifest.js

@@ -3,7 +3,7 @@ import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "
 import { e as textEffectsPatternCssCustomPropertyNames, t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,
-  description: "Text Effect - 3D",
+  description: "A 3D text effect for short titles, giving letters depth so they look extruded off the page. Use when users want a heading that pops out, text with depth or dimension, or a bold, sculptural title.",
   type: "wixEditorElements.TextEffects3d",
   installation: textEffectsInstallation,
   editorElement: {

package/dist/site/components/TextEffectsBauhaus/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, f as textEffectsPatternCssCustomPropertie
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsBauhaus",
-  description: "Text Effects Bauhaus",
+  description: "A Bauhaus text effect for short titles, with offset, overlapping color layers in a geometric, modernist style. Use when users want a heading with a design-poster or art-school look, or a bold, graphic, multicolor title.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-bauhaus",

package/dist/site/components/TextEffectsGlass/manifest.js

@@ -3,7 +3,7 @@ import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "
 import { e as textEffectsPatternCssCustomPropertyNames, t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,
-  description: "Text Effect - Glass",
+  description: "A glass text effect for short titles, making letters look like glossy, glowing glass. Use when users want a heading that feels sleek, shiny, translucent, or futuristic, or a soft glow around the letters.",
   type: "wixEditorElements.TextEffectsGlass",
   installation: textEffectsInstallation,
   editorElement: {

package/dist/site/components/TextEffectsGlitch/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, f as textEffectsPatternCssCustomPropertie
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsGlitch",
-  description: "Text Effects Glitch",
+  description: "An animated glitch text effect for short titles, with shifting, distorted color layers like a broken digital signal. Use when users want a heading with a tech, cyberpunk, or edgy look, or text that flickers and distorts.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-glitch",

package/dist/site/components/TextEffectsLetterPress/manifest.js

@@ -4,7 +4,7 @@ import { e as textEffectsPatternCssCustomPropertyNames, t as textEffectsInteract
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsLetterPress",
-  description: "Text Effects Letter Press",
+  description: "A letterpress text effect for short titles, making letters look pressed or stamped into the surface. Use when users want a heading with a printed, embossed, engraved, or crafted feel, or a subtle, tactile title.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-letter-press",

package/dist/site/components/TextEffectsMatrix/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, f as textEffectsPatternCssCustomPropertie
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsMatrix",
-  description: "Text Effects Matrix",
+  description: "An animated Matrix-style text effect for short titles, with a glowing, moving digital-code look. Use when users want a heading with a hacker, coding, or sci-fi feel, or a title that looks like digital rain.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-matrix",

package/dist/site/components/TextEffectsNeonSign/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, f as textEffectsPatternCssCustomPropertie
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsNeonSign",
-  description: "Text Effects Neon Sign",
+  description: "An animated neon sign text effect for short titles, with letters that glow like tubes of light. Use when users want a heading that glows like a neon sign, a nightlife or retro bar look, or bright text on a dark background.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-neon-sign",

package/dist/site/components/TextEffectsNoisy/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, f as textEffectsPatternCssCustomPropertie
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsNoisy",
-  description: "Text Effects Noisy",
+  description: "A noisy text effect for short titles that distorts letter edges with a turbulent, squiggly pattern. Use when users want a heading that looks rough, shaky, wobbly, or distorted, or a raw, experimental title.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-noisy",

package/dist/site/components/TextEffectsOutlineOut/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, f as textEffectsPatternCssCustomPropertie
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsOutlineOut",
-  description: "Text Effects Outline Out",
+  description: "An outline text effect for short titles, showing the letters' contour with a bevel and blend mode instead of a solid fill. Use when users want hollow or outlined text, a lighter, more editorial heading, or text that lets the background show through.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-outline-out",

package/dist/site/components/TextEffectsRetro/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, f as textEffectsPatternCssCustomPropertie
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsRetro",
-  description: "Text Effects Retro",
+  description: "An animated retro text effect for short titles, with stacked color layers in a vintage style. Use when users want a heading with a '70s or '80s feel, a nostalgic or synthwave look, or a playful, layered title.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-retro",

package/dist/site/components/TextEffectsShook/manifest.js

@@ -3,7 +3,7 @@ import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "
 import { e as textEffectsPatternCssCustomPropertyNames, t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,
-  description: "Text Effect - Shook",
+  description: "A shook text effect for short titles, repeating the letters in offset layers so they look shaken or echoed. Use when users want a heading that feels energetic, vibrating, or loud, or text with an echo or motion-trail look.",
   type: "wixEditorElements.TextEffectsShook",
   installation: textEffectsInstallation,
   editorElement: {

package/dist/site/components/TextEffectsSticker/manifest.js

@@ -5,7 +5,7 @@ import { b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNam
 const manifest = {
   id: COMPONENT_ID,
   type: "wixEditorElements.TextEffectsSticker",
-  description: "Text Effects Sticker",
+  description: "A sticker text effect for short titles, giving letters a thick outer border and shadow like a die-cut sticker. Use when users want a heading that looks like a sticker or label, a playful, cut-out look, or text that stands off the page.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-sticker",

package/dist/site/components/TextEffectsStriped/manifest.js

@@ -4,7 +4,7 @@ import { t as textEffectsInteractions, a as textEffectsBaseCssProperties, b as t
 const manifest = {
   id: "7e2b4a91-c5d8-4f3e-9a6b-1d8e7f2c3a4b",
   type: "wixEditorElements.TextEffectsStriped",
-  description: "Text Effects Striped",
+  description: "An animated striped text effect for short titles, filling letters with moving stripes. Use when users want a heading with a bold, graphic, or playful pattern, candy-stripe or lined lettering, or a title with a subtle animated fill.",
   installation: textEffectsInstallation,
   editorElement: {
     selector: ".text-effects-striped",

package/dist/site/components/TextMarquee/manifest.js

@@ -23,7 +23,7 @@ const DefaultTranslations = {
 };
 const manifest = {
   id: "64d7d13f-8f09-47e3-9eea-9c02e3f602c2",
-  description: "Text Marquee",
+  description: "A line of text that moves continuously across the page. Use when users want words that keep moving on their own: an announcement or promotion that catches the eye, a strip of repeating keywords or slogans, or a lively, constantly moving banner.",
   type: "wixEditorElements.TextMarquee",
   installation: {
     initialSize: {

package/dist/site/components/TransparentVideo/manifest.js

@@ -4,7 +4,7 @@ import { a as VideoEndType, V as VideoStartType } from "../chunks/TransparentVid
 const manifest = {
   id: "a5d9e3b7-1f62-4c8a-b0d4-9e3f7a2c6b11",
   type: "wixEditorElements.TransparentVideo",
-  description: "Allows users to display transparent videos",
+  description: "A video with a transparent background, so only the moving subject shows. Use when users want something moving on the page without a box around it: a subject or object that floats over the design, a moving accent that feels part of the site, or a video that plays on hover or click.",
   installation: {
     initialSize: {
       width: {

package/dist/site/components/VideoScrub/VideoScrub.types.d.ts

@@ -44,11 +44,10 @@ export interface VideoScrubProps {
     timeframes?: Array<VideoScrubTimeframe>;
     /** The timeframe selected in the editor. Used only while editing. */
     activeTimeframeIndex?: number;
-    elementProps?: {
-        /** The layer over the video. `a11y.ariaLabel` is its label, set by the site owner. */
-        timeframesLayer?: {
-            className?: string;
-            a11y?: A11y;
-        };
+    /** `ariaLabel` labels the timeframes layer, set by the site owner. */
+    a11y?: A11y;
+    /** The selected preset's scope, from Thunderbolt (presets/*.css applies through it). */
+    wix?: {
+        presetsWrapperProps?: Record<string, unknown>;
     };
 }

package/dist/site/components/VideoScrub/component.js

@@ -8,6 +8,7 @@ import { S as STICKY_TOP, a as ScrollSpeed, b as SCROLL_VH_PER_SECOND, c as STAR
 import { c as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { g as getTranslation } from "../chunks/getTranslation.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const getScrollLengthVh = (duration, speed = ScrollSpeed.normal) => clamp(
   duration * (SCROLL_VH_PER_SECOND[speed] ?? SCROLL_VH_PER_SECOND[ScrollSpeed.normal]),
@@ -452,17 +453,16 @@ const VideoScrub = ({
   scrubAllowed = true,
   timeframes: savedTimeframes,
   activeTimeframeIndex = 0,
-  elementProps
+  a11y,
+  wix
 }) => {
-  var _a;
   const editing = !scrubAllowed;
   const { translate } = useService(
     TranslationsDefinition
   );
-  const layerProps = elementProps == null ? void 0 : elementProps.timeframesLayer;
   const layerA11y = {
-    ...(layerProps == null ? void 0 : layerProps.a11y) && convertA11yKeysToHtmlFormat(layerProps.a11y),
-    "aria-label": ((_a = layerProps == null ? void 0 : layerProps.a11y) == null ? void 0 : _a.ariaLabel) || // The service returns the key itself when there is no translation.
+    ...a11y && convertA11yKeysToHtmlFormat(a11y),
+    "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || // The service returns the key itself when there is no translation.
     getTranslation(
       translate(ARIA_LABEL_NAMESPACE),
       "label",
@@ -495,77 +495,84 @@ const VideoScrub = ({
     videoRef,
     videoKey: (video == null ? void 0 : video.uri) ?? ""
   });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      ref: rootRef,
-      className: clsx(
-        ROOT_CLASS,
-        styles.root,
-        layout && styles.scrubbing,
-        className
-      ),
-      style: layout ? SCRUB_ROOT_STYLE : void 0,
-      children: [
-        /* @__PURE__ */ jsxs(
+  return (
+    // Thunderbolt sets the selected preset on this wrapper, like Button.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: presetWrapperStyles.presetWrapper,
+        ...wix == null ? void 0 : wix.presetsWrapperProps,
+        children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: stageRef,
+            id,
+            ref: rootRef,
             className: clsx(
-              styles.stage,
-              (frameReady2 || timeframe.frameShown) && styles.frameReady
+              ROOT_CLASS,
+              styles.root,
+              layout && styles.scrubbing,
+              className
             ),
-            "data-scrub-stage": layout ? "" : void 0,
+            style: layout ? SCRUB_ROOT_STYLE : void 0,
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: styles.media,
-                  "aria-hidden": "true",
-                  style: layout ? {
-                    aspectRatio: `1 / ${getVideoRatio(video) ?? DEFAULT_VIDEO_RATIO}`
-                  } : void 0,
-                  children: video && /* @__PURE__ */ jsx(
-                    Video,
-                    {
-                      id: `video_${id}`,
-                      videoMedia: video,
-                      videoRef,
-                      qualityPolicy: "proportional",
-                      autoplay: false,
-                      loop: false,
-                      muted: true
-                    }
-                  )
+                  ref: stageRef,
+                  className: clsx(
+                    styles.stage,
+                    (frameReady2 || timeframe.frameShown) && styles.frameReady
+                  ),
+                  "data-scrub-stage": layout ? "" : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles.media,
+                        "aria-hidden": "true",
+                        style: layout ? {
+                          aspectRatio: `1 / ${getVideoRatio(video) ?? DEFAULT_VIDEO_RATIO}`
+                        } : void 0,
+                        children: video && /* @__PURE__ */ jsx(
+                          Video,
+                          {
+                            id: `video_${id}`,
+                            videoMedia: video,
+                            videoRef,
+                            qualityPolicy: "proportional",
+                            autoplay: false,
+                            loop: false,
+                            muted: true
+                          }
+                        )
+                      }
+                    ),
+                    timeframe.items.length > 0 && /* @__PURE__ */ jsx(
+                      TimeframeLayer,
+                      {
+                        className: TIMEFRAMES_LAYER_CLASS,
+                        items: timeframe.items,
+                        activeIndex: timeframe.activeIndex,
+                        a11yAttributes: layerA11y
+                      }
+                    )
+                  ]
                 }
               ),
-              timeframe.items.length > 0 && /* @__PURE__ */ jsx(
-                TimeframeLayer,
+              layout && /* @__PURE__ */ jsx(
+                "div",
                 {
-                  className: clsx(
-                    TIMEFRAMES_LAYER_CLASS,
-                    layerProps == null ? void 0 : layerProps.className
-                  ),
-                  items: timeframe.items,
-                  activeIndex: timeframe.activeIndex,
-                  a11yAttributes: layerA11y
+                  className: styles.scrollSpace,
+                  style: {
+                    height: getScrollSpaceHeight(duration, scrollSpeed, scrubStart)
+                  }
                 }
               )
             ]
           }
-        ),
-        layout && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: styles.scrollSpace,
-            style: {
-              height: getScrollSpaceHeight(duration, scrollSpeed, scrubStart)
-            }
-          }
         )
-      ]
-    }
+      }
+    )
   );
 };
 export {

package/dist/site/components/VideoScrub/constants.d.ts

@@ -1,5 +1,9 @@
 import { ScrollSpeed, ScrubStart } from './VideoScrub.types';
 export declare const ROOT_CLASS = "video-scrub";
+export declare const presets: {
+    readonly free: "free";
+    readonly stretched: "stretched";
+};
 export declare const DEFAULT_VIDEO_RATIO: number;
 export declare const SCROLL_VH_PER_SECOND: Record<ScrollSpeed, number>;
 export declare const MIN_SCROLL_VH = 50;

package/dist/site/components/VideoScrub/css.css

@@ -37,6 +37,7 @@
   --borderStartEndRadius: initial;
   --borderEndStartRadius: initial;
   --borderEndEndRadius: initial;
+  --aspect-ratio: initial;
   position: relative;
   box-sizing: border-box;
 }
@@ -45,7 +46,7 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  height: 100%;
+  height: var(--video-scrub-stage-height, 100%);
   overflow: hidden;
   box-shadow: var(--boxShadow, none);
   border-top-width: var(--border-width-top, 0);
@@ -87,7 +88,8 @@
   position: sticky;
   top: var(--video-scrub-sticky-top);
   transition: top var(--wix-top-inset-transition-duration, 0ms) var(--wix-top-inset-transition-easing, linear);
-  height: inherit;
+  height: var(--video-scrub-stage-height, inherit);
+  aspect-ratio: 1/var(--aspect-ratio);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -141,4 +143,7 @@
 }
 .image__OIbFL[data-animate-blur] img[data-load-done] {
   filter: none;
+}
+.presetWrapper__J1yzj {
+  display: contents;
 }