@wix/editor-react-components 1.2761.0 → 1.2763.0

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

@@ -1,10 +1,10 @@
-import { D as DATA, A as Archetype, L as LAYOUT } from "../chunks/chunk-EVX7ZUBD.js";
+import { b as DISPLAY_GROUPS, C as CSS_PROPERTIES, M as MEDIA, D as DATA, E as ELEMENTS, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
 import { V as VideoCategoryTypes } from "../chunks/types.impl.js";
-import { S as ScrollSpeed, R as ROOT_CLASS } from "../chunks/constants2.js";
+import { k as TIMEFRAMES_GROUP_KEY, a as ScrollSpeed, j as ScrubStart, h as TIMEFRAMES_LAYER_CLASS, T as TIMEFRAME_CONTENT_CLASS, l as MAX_COUNT, R as ROOT_CLASS } from "../chunks/types.js";
 const manifest = {
-  id: "c3bdf192-6423-4d70-a0f5-d5542d6a3e3f",
-  type: "wixEditorElements.VideoScrub__DEV__v1",
-  description: "A video that plays by page scroll: while the visitor scrolls past it, the video stays on screen and its time follows the scroll.",
+  id: "f67effcb-a591-4156-adee-445134fe12da",
+  type: "wixEditorElements.VideoScrub__DEV__v5",
+  description: "A video that plays by page scroll: while the visitor scrolls past it, the video stays on screen and its time follows the scroll. Timeframes show elements over the video during parts of it.",
   installation: {
     initialSize: {
       width: {
@@ -29,6 +29,18 @@ const manifest = {
         },
         disableDeletion: true
       },
+      scrubStart: {
+        displayName: "Starts when video reaches",
+        dataType: DATA.DATA_TYPE.textEnum,
+        defaultValue: ScrubStart.top,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            { value: ScrubStart.bottom, displayName: "Bottom of screen" },
+            { value: ScrubStart.center, displayName: "Center of screen" },
+            { value: ScrubStart.top, displayName: "Top of screen" }
+          ]
+        }
+      },
       scrollSpeed: {
         displayName: "Scroll speed",
         dataType: DATA.DATA_TYPE.textEnum,
@@ -40,6 +52,252 @@ const manifest = {
             { value: ScrollSpeed.fast, displayName: "Fast" }
           ]
         }
+      },
+      // Time ranges on the video. Each one owns a container of elements, shown over the video while
+      // the time is inside it. The Timeframes panel edits them (TimelineBox rules, renamed).
+      timeframes: {
+        displayName: "Timeframes",
+        dataType: DATA.DATA_TYPE.arrayItems,
+        [DATA.DATA_TYPE.arrayItems]: {
+          maxSize: MAX_COUNT,
+          data: {
+            items: {
+              // Our own stable id: runtime items have no `_id`. A name ending in `Id` stops the
+              // editor from making `_id` (TimelineBox finding), so it is `Identifier`.
+              timeframeIdentifier: {
+                displayName: "Timeframe Identifier",
+                dataType: DATA.DATA_TYPE.text
+              },
+              // The editor's item list reads `item.name`.
+              name: {
+                displayName: "Name",
+                dataType: DATA.DATA_TYPE.text
+              },
+              startMs: {
+                displayName: "Start Ms",
+                dataType: DATA.DATA_TYPE.number
+              },
+              endMs: {
+                displayName: "End Ms",
+                dataType: DATA.DATA_TYPE.number
+              },
+              container: {
+                displayName: "Timeframe",
+                dataType: DATA.DATA_TYPE.container,
+                [DATA.DATA_TYPE.container]: {
+                  selector: `.${TIMEFRAME_CONTENT_CLASS}`,
+                  containerType: ContainerType.simple,
+                  simple: {
+                    displayName: "Timeframe",
+                    behaviors: { selectable: true },
+                    // Always the size of the stage, like MultiStateBox's state container.
+                    layout: {
+                      resizeDirection: LAYOUT.RESIZE_DIRECTION.none
+                    }
+                  }
+                }
+              },
+              // Stored only for now: missing means 1.
+              scrollSensitivity: {
+                displayName: "Scroll Sensitivity",
+                dataType: DATA.DATA_TYPE.number
+              }
+            }
+          }
+        }
+      },
+      activeTimeframeIndex: {
+        displayName: "Active Timeframe Index",
+        dataType: DATA.DATA_TYPE.number,
+        defaultValue: 0
+      }
+    },
+    displayFilters: {
+      data: { hide: ["activeTimeframeIndex"] }
+    },
+    elements: {
+      // The layer over the video that holds the timeframes. Only its label is set here.
+      timeframesLayer: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: "Timeframes",
+          selector: `.${TIMEFRAMES_LAYER_CLASS}`,
+          behaviors: {
+            selectable: false
+          },
+          data: {
+            a11y: {
+              dataType: DATA.DATA_TYPE.a11y,
+              [DATA.DATA_TYPE.a11y]: {
+                attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+              }
+            }
+          }
+        }
+      }
+    },
+    // Custom properties, not cssProperties: Studio puts cssProperties on the root, and the root is
+    // the tall scroll track. The sticky stage reads these (VideoScrub.module.scss). Same set as
+    // VideoUpload, but the borders are per side (Tabs pattern).
+    cssCustomProperties: {
+      maskImage: {
+        displayName: "Mask",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.maskImage,
+        defaultValue: "none",
+        maskImage: {
+          vectorArtCategory: MEDIA.VECTOR_ART_CATEGORY.SHAPE_LOCATION,
+          imageTypes: [CSS_PROPERTIES.IMAGE_TYPE.url]
+        }
+      },
+      boxShadow: {
+        displayName: "Shadow",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
+        defaultValue: "none"
+      },
+      "border-width-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTopWidth,
+        displayName: "Border Width Top",
+        defaultValue: "0px"
+      },
+      "border-width-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEndWidth,
+        displayName: "Border Width End",
+        defaultValue: "0px"
+      },
+      "border-width-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottomWidth,
+        displayName: "Border Width Bottom",
+        defaultValue: "0px"
+      },
+      "border-width-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStartWidth,
+        displayName: "Border Width Start",
+        defaultValue: "0px"
+      },
+      "border-color-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTopColor,
+        displayName: "Border Color Top",
+        defaultValue: "transparent"
+      },
+      "border-color-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEndColor,
+        displayName: "Border Color End",
+        defaultValue: "transparent"
+      },
+      "border-color-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottomColor,
+        displayName: "Border Color Bottom",
+        defaultValue: "transparent"
+      },
+      "border-color-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStartColor,
+        displayName: "Border Color Start",
+        defaultValue: "transparent"
+      },
+      "border-style-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTopStyle,
+        displayName: "Border Style Top",
+        defaultValue: "solid"
+      },
+      "border-style-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEndStyle,
+        displayName: "Border Style End",
+        defaultValue: "solid"
+      },
+      "border-style-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottomStyle,
+        displayName: "Border Style Bottom",
+        defaultValue: "solid"
+      },
+      "border-style-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStartStyle,
+        displayName: "Border Style Start",
+        defaultValue: "solid"
+      },
+      borderStartStartRadius: {
+        displayName: "Top Start Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartStartRadius,
+        defaultValue: "0px"
+      },
+      borderStartEndRadius: {
+        displayName: "Top End Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartEndRadius,
+        defaultValue: "0px"
+      },
+      borderEndStartRadius: {
+        displayName: "Bottom Start Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndStartRadius,
+        defaultValue: "0px"
+      },
+      borderEndEndRadius: {
+        displayName: "Bottom End Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndEndRadius,
+        defaultValue: "0px"
+      }
+    },
+    displayGroups: {
+      [TIMEFRAMES_GROUP_KEY]: {
+        displayName: "Timeframe",
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: "timeframes",
+          selectedItemIndex: "activeTimeframeIndex",
+          // A new VideoScrub has no timeframes, so "nothing selected" is a normal state.
+          allowNoSelection: true
+        }
+      },
+      borderColorGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderColor,
+        [DISPLAY_GROUPS.GROUP_TYPE.borderColor]: {
+          top: "border-color-top",
+          right: "border-color-inline-end",
+          bottom: "border-color-bottom",
+          left: "border-color-inline-start"
+        }
+      },
+      borderWidthGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderWidth,
+        [DISPLAY_GROUPS.GROUP_TYPE.borderWidth]: {
+          top: "border-width-top",
+          right: "border-width-inline-end",
+          bottom: "border-width-bottom",
+          left: "border-width-inline-start"
+        }
+      },
+      borderStyleGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderStyle,
+        [DISPLAY_GROUPS.GROUP_TYPE.borderStyle]: {
+          top: "border-style-top",
+          right: "border-style-inline-end",
+          bottom: "border-style-bottom",
+          left: "border-style-inline-start"
+        }
+      },
+      // Per side, so a breakpoint can override one side only (like Tabs).
+      borderGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+        [DISPLAY_GROUPS.GROUP_TYPE.border]: {
+          color: "displayGroups.borderColorGroup",
+          width: "displayGroups.borderWidthGroup",
+          style: "displayGroups.borderStyleGroup"
+        }
+      },
+      cornersGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderRadius,
+        displayName: "Corner radius",
+        borderRadius: {
+          topLeft: "borderStartStartRadius",
+          topRight: "borderStartEndRadius",
+          bottomLeft: "borderEndStartRadius",
+          bottomRight: "borderEndEndRadius"
+        }
+      },
+      // The Settings panel does not follow the `data` key order.
+      orderedDataGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: ["video", "scrubStart", "scrollSpeed"]
+        }
       }
     }
   },
@@ -47,7 +305,10 @@ const manifest = {
     client: {
       componentUrl: "./site/components/VideoScrub/component.tsx",
       dependencies: {
-        serviceDependencies: ["@wix/viewer-service-environment"]
+        serviceDependencies: [
+          "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations"
+        ]
       }
     },
     editor: {
@@ -55,6 +316,7 @@ const manifest = {
       dependencies: {
         serviceDependencies: [
           "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations",
           "@wix/site-service-editor-context"
         ]
       }

package/dist/site/components/VideoScrub/timeframes/index.d.ts

@@ -8,6 +8,6 @@ export { add, createInitial, edgeLimits, fitToDuration, moveTimeframe, moveLimit
 export type { Edge } from './edit';
 export { activeAt } from './query';
 export { watchVideoTime } from './watchVideoTime';
-export { useActiveTimeframeIndex } from './useActiveTimeframeIndex';
+export { indexAt, useActiveTimeframeIndex } from './useActiveTimeframeIndex';
 export { TimeframeLayer } from './TimeframeLayer';
 export type { TimeframeLayerItem, TimeframeLayerProps } from './TimeframeLayer';

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

@@ -36,7 +36,7 @@ export declare const MAX_COUNT = 40;
  * `selector` points at it, like Accordion's `.item-content`. The editor needs this selector to find
  * each container. (Saves can still fail with SCHEMA_REFERENCES_NOT_FOUND; that is a server bug.)
  */
-export declare const TIMEFRAME_CONTENT_CLASS = "timeframe-content";
+export declare const TIMEFRAME_CONTENT_CLASS = "video-scrub-timeframe-content";
 /** Length of a new timeframe from createInitial and add, when there is room. */
 export declare const DEFAULT_TIMEFRAME_MS = 5000;
 export type TimeframeErrorCode = 'badTime' | 'tooShort' | 'outOfRange' | 'notSorted' | 'overlap' | 'tooMany' | 'notFound' | 'onBoundary' | 'inGap' | 'insideTimeframe' | 'noRoom' | 'badSensitivity' | 'badItem' | 'badKey' | 'duplicateKey' | 'duplicateId';

package/dist/site/components/VideoScrub/timeframes/useActiveTimeframeIndex.d.ts

@@ -1,4 +1,6 @@
 import { TimeframeTiming } from './types';
+/** The index of the timeframe at `timeMs`, or undefined in a gap or for a bad duration. */
+export declare function indexAt<T extends TimeframeTiming>(timeframes: ReadonlyArray<T>, timeMs: number, durationMs: number | undefined): number | undefined;
 /**
  * The index of the timeframe showing in `video` now. It re-renders only when the index changes.
  * `durationMs` comes from the data. Undefined or invalid gives undefined.

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

@@ -1,6 +1,6 @@
 import { VideoMedia } from '@wix/video';
-import { ScrollSpeed } from './VideoScrub.types';
-/** How far the visitor scrolls while the stage is stuck, in vh. */
+import { ScrubStart, ScrollSpeed } from './VideoScrub.types';
+/** How far the visitor scrolls from the first frame to the last, in vh. */
 export declare const getScrollLengthVh: (duration: number, speed?: ScrollSpeed) => number;
 /**
  * The video's height / width, from its saved sources (or poster). The stage falls back to it when
@@ -8,7 +8,21 @@ export declare const getScrollLengthVh: (duration: number, speed?: ScrollSpeed)
  */
 export declare const getVideoRatio: (video?: VideoMedia) => number | undefined;
 /**
- * Scroll progress through the tall root, 0 to 1: how far the sticky stage has moved down its
- * root. 0 until it sticks, 1 once it lets go, so the header and Wix Ads offsets need no math here.
+ * The scroll space under the stage, as a CSS height. An earlier start uses part of the scroll
+ * length before the stage sticks (the pre-roll), so the stuck part gets that much shorter. The
+ * video moves the same amount per scroll for every start.
  */
-export declare const getScrubProgress: (root: Element, stage: Element) => number;
+export declare const getScrollSpaceHeight: (duration: number, speed: ScrollSpeed, start: ScrubStart) => string;
+/**
+ * Scroll progress, 0 to 1. 0 while the top of the root is below the start line, 1 once the
+ * sticky stage lets go. In between it follows the scroll at the same rate: first the pre-roll,
+ * while the stage moves up to its sticky top, then while it is stuck and moves down its root.
+ *
+ * The stuck part is how far the stage moved down its root, so the header and Wix Ads offsets need
+ * no math there. `viewportHeight` and `stickyTop` are used only for the pre-roll of an early start.
+ */
+export declare const getScrubProgress: (root: Element, stage: Element, { start, viewportHeight, stickyTop, }: {
+    start: ScrubStart;
+    viewportHeight: number;
+    stickyTop: number;
+}) => number;

package/dist/site/components/chunks/AnimatedIcon.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
 import { p as parseSvg } from "./parseSvg.js";
-import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants20.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants19.js";
 import { c as cn } from "./index9.js";
 const AnimatedSvg = forwardRef(
   ({ svgContent, reducedMotion = false, duration }, ref) => {

package/dist/site/components/chunks/Button.js

@@ -7,8 +7,8 @@ import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js
 import { f as formatClassNames } from "./classNames.js";
 import { I as IconAnimationTriggers } from "./Button.types.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
-import { T as TRANSITION_DURATION, D as DesignStates, S as SEMANTIC_CLASS_NAMES, a as TestIds, C as COMPONENT_TYPE } from "./constants22.js";
-import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
+import { T as TRANSITION_DURATION, D as DesignStates, S as SEMANTIC_CLASS_NAMES, a as TestIds, C as COMPONENT_TYPE } from "./constants21.js";
+import { e as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
 import { i as isValidLink } from "./Link.js";
 import { d as defineStaticService } from "./staticService.js";
 import { d as defineService } from "./index8.js";

package/dist/site/components/chunks/Image.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { i as imageKit, g as getPlaceholder } from "./index5.js";
+import { i as imageKit, g as getPlaceholder } from "./index6.js";
 const image = "image__WopE9";
 const styles = {
   image

package/dist/site/components/chunks/Link.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { a as activateBySpaceOrEnterButton, c as activateBySpaceButton, d as activateByEnterButton } from "./a11y.js";
+import { a as activateBySpaceOrEnterButton, d as activateBySpaceButton, e as activateByEnterButton } from "./a11y.js";
 import { a as getDataAttributes } from "./dataUtils.js";
 const TestIds = {
   root: "linkElement"

package/dist/site/components/chunks/Patterns.js

@@ -2,7 +2,7 @@ import React__default from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c as clsx } from "./clsx.js";
 import { a as getDataAttributes } from "./dataUtils.js";
-import { T as TestIds } from "./constants10.js";
+import { T as TestIds } from "./constants9.js";
 function bidiFactory() {
   var bidi2 = (function(exports$1) {
     var DATA = {

package/dist/site/components/chunks/ResponsiveBox.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { c as clsx } from "./clsx.js";
 import { f as formatClassNames } from "./classNames.js";
-import { e as getTabIndexAttribute, h as getAriaAttributes } from "./a11y.js";
+import { f as getTabIndexAttribute, h as getAriaAttributes } from "./a11y.js";
 import { a as getDataAttributes } from "./dataUtils.js";
 const clickable = "clickable__Nql0c";
 const commonStyles = {

package/dist/site/components/chunks/TextEffectsShared.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import { f as formatClassNames } from "./classNames.js";
 import { a as getDataAttributes } from "./dataUtils.js";
-import { e as getTabIndexAttribute } from "./a11y.js";
-import { D as DEFAULT_TEXT_DIRECTION, a as DEFAULT_HTML_TAG, d as dataHooks, T as TestIds } from "./constants10.js";
+import { f as getTabIndexAttribute } from "./a11y.js";
+import { D as DEFAULT_TEXT_DIRECTION, a as DEFAULT_HTML_TAG, d as dataHooks, T as TestIds } from "./constants9.js";
 import { c as clsx } from "./clsx.js";
 import { L as Link } from "./Link.js";
 const semanticClassNames = {

package/dist/site/components/chunks/a11y.js

@@ -110,10 +110,10 @@ export {
   HAS_CUSTOM_FOCUS_CLASSNAME as H,
   activateBySpaceOrEnterButton as a,
   getAccessibilityAttributes as b,
-  activateBySpaceButton as c,
-  activateByEnterButton as d,
-  getTabIndexAttribute as e,
-  convertA11yKeysToHtmlFormat as f,
+  convertA11yKeysToHtmlFormat as c,
+  activateBySpaceButton as d,
+  activateByEnterButton as e,
+  getTabIndexAttribute as f,
   getAccessibilityAttributesSpread as g,
   getAriaAttributes as h,
   removeAriaPrefix as r

package/dist/site/components/chunks/constants10.js

@@ -1,73 +1,28 @@
-const SharedDisplayNames = {
-  root: {
-    displayName: "Text Effects"
-  },
-  data: {
-    text: "Text",
-    link: "Link",
-    isDecorative: "Decorative",
-    textDirection: "Text Direction",
-    patternScope: "Pattern Scope",
-    a11y: "Accessibility"
-  },
-  cssProperties: {
-    font: "Font",
-    color: "Color",
-    textLineHeight: "Line spacing",
-    letterSpacing: "Letter spacing"
-  },
-  patternCssCustomProperties: {
-    rotationIntensity: "Rotation Intensity",
-    offsetIntensity: "Offset Intensity",
-    patternPreset: "Pattern Preset",
-    isCapitalize: "Capitalize"
-  },
-  textDirection: {
-    inherit: "Inherit",
-    ltr: "Left to Right",
-    rtl: "Right to Left"
-  },
-  patternScope: {
-    none: "None",
-    character: "Character",
-    word: "Word"
-  }
-};
+import { S as SharedDisplayNames } from "./constants9.js";
 const TestIds = {
   viewer: {
-    link: "text-effects-shared-link",
-    visuallyHidden: "text-effects-shared-visually-hidden",
-    patternUnit: "text-effects-shared-pattern-unit"
+    container: "TextEffectsNoisy-container",
+    text: "TextEffectsNoisy-text"
   }
 };
-const DEFAULT_HTML_TAG = "div";
-const DEFAULT_TEXT_DIRECTION = "inherit";
-const dataHooks = {
-  root: "text-effect"
+const noiseIntensityConfig = {
+  start: 1,
+  end: 53,
+  step: 1
+};
+const COMPONENT_ID = "3f9c1e82-a7d6-4b5e-8c2a-9d4f6e3b7a1c";
+const TEXT_TWIST_PANEL_ID = "0bba51ec-ca53-4662-acf6-ea71ffbb4f55";
+const DisplayNames = {
+  ...SharedDisplayNames,
+  cssCustomProperties: {
+    textEffectsColor1: "Color",
+    squigglyLevel: "Noise intensity"
+  }
 };
-const blendModes = [
-  "normal",
-  "color",
-  "color-burn",
-  "color-dodge",
-  "darken",
-  "difference",
-  "exclusion",
-  "hard-light",
-  "hue",
-  "lighten",
-  "luminosity",
-  "multiply",
-  "overlay",
-  "saturation",
-  "screen",
-  "soft-light"
-];
 export {
-  DEFAULT_TEXT_DIRECTION as D,
-  SharedDisplayNames as S,
+  COMPONENT_ID as C,
+  DisplayNames as D,
   TestIds as T,
-  DEFAULT_HTML_TAG as a,
-  blendModes as b,
-  dataHooks as d
+  TEXT_TWIST_PANEL_ID as a,
+  noiseIntensityConfig as n
 };

package/dist/site/components/chunks/constants11.js

@@ -1,28 +1,26 @@
-import { S as SharedDisplayNames } from "./constants10.js";
+import { S as SharedDisplayNames } from "./constants9.js";
 const TestIds = {
   viewer: {
-    container: "TextEffectsNoisy-container",
-    text: "TextEffectsNoisy-text"
+    container: "TextEffectsNeonSign-container",
+    text: "TextEffectsNeonSign-text"
   }
 };
-const noiseIntensityConfig = {
-  start: 1,
-  end: 53,
-  step: 1
-};
-const COMPONENT_ID = "3f9c1e82-a7d6-4b5e-8c2a-9d4f6e3b7a1c";
-const TEXT_TWIST_PANEL_ID = "0bba51ec-ca53-4662-acf6-ea71ffbb4f55";
+const COMPONENT_ID = "8c1f4b9e-d3a7-4e2c-a5b8-7d9f1e6c4a2b";
+const TEXT_TWIST_PANEL_ID = "37855762-0e6d-4818-85ed-73c9a844825f";
 const DisplayNames = {
   ...SharedDisplayNames,
   cssCustomProperties: {
-    textEffectsColor1: "Color",
-    squigglyLevel: "Noise intensity"
+    textColor: "Color",
+    shadowColor: "Color",
+    shadowOpacity: "Opacity",
+    shadowBlur: "Blur",
+    innerAnimationSpeed: "Speed",
+    disableInnerAnimation: "Animation"
   }
 };
 export {
   COMPONENT_ID as C,
   DisplayNames as D,
   TestIds as T,
-  TEXT_TWIST_PANEL_ID as a,
-  noiseIntensityConfig as n
+  TEXT_TWIST_PANEL_ID as a
 };

package/dist/site/components/chunks/constants12.js

@@ -1,19 +1,19 @@
-import { S as SharedDisplayNames } from "./constants10.js";
+import { S as SharedDisplayNames } from "./constants9.js";
 const TestIds = {
   viewer: {
-    container: "TextEffectsNeonSign-container",
-    text: "TextEffectsNeonSign-text"
+    container: "TextEffectsMatrix-container",
+    text: "TextEffectsMatrix-text"
   }
 };
-const COMPONENT_ID = "8c1f4b9e-d3a7-4e2c-a5b8-7d9f1e6c4a2b";
-const TEXT_TWIST_PANEL_ID = "37855762-0e6d-4818-85ed-73c9a844825f";
+const COMPONENT_ID = "45e26ded-fab2-4208-b6ae-3514ddea4cb0";
+const TEXT_TWIST_PANEL_ID = "ea4f3040-ce0b-44e3-a90b-7fcb74ba1a7b";
 const DisplayNames = {
   ...SharedDisplayNames,
   cssCustomProperties: {
-    textColor: "Color",
-    shadowColor: "Color",
-    shadowOpacity: "Opacity",
-    shadowBlur: "Blur",
+    textEffectsColor1: "Color",
+    maskPosition: "Position",
+    maskBlur: "Blur",
+    textBlur: "Spread",
     innerAnimationSpeed: "Speed",
     disableInnerAnimation: "Animation"
   }

package/dist/site/components/chunks/constants13.js

@@ -1,21 +1,19 @@
-import { S as SharedDisplayNames } from "./constants10.js";
+import { S as SharedDisplayNames } from "./constants9.js";
 const TestIds = {
   viewer: {
-    container: "TextEffectsMatrix-container",
-    text: "TextEffectsMatrix-text"
+    container: "TextEffectsLetterPress-container",
+    text: "TextEffectsLetterPress-text"
   }
 };
-const COMPONENT_ID = "45e26ded-fab2-4208-b6ae-3514ddea4cb0";
-const TEXT_TWIST_PANEL_ID = "ea4f3040-ce0b-44e3-a90b-7fcb74ba1a7b";
+const COMPONENT_ID = "9d2a5c8f-e4b1-4f6d-b7a3-8e1c9f5d2b4a";
+const TEXT_TWIST_PANEL_ID = "4f36b4fa-893a-4eb2-a1b3-7c82351f063b";
 const DisplayNames = {
   ...SharedDisplayNames,
   cssCustomProperties: {
+    shadow: "Shadow",
+    layerBlendMode: "Blend mode",
     textEffectsColor1: "Color",
-    maskPosition: "Position",
-    maskBlur: "Blur",
-    textBlur: "Spread",
-    innerAnimationSpeed: "Speed",
-    disableInnerAnimation: "Animation"
+    textEffectsOpacityColor1: "opacity"
   }
 };
 export {