@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,410 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import React__default, { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { L as Link } from "../chunks/Link.js";
+import { f as formatClassNames } from "../chunks/classNames.js";
+import { p as parseSvg } from "../chunks/parseSvg.js";
+const semanticClassNames = {
+  root: "text-marquee",
+  text: "text-marquee__text"
+};
+const marqueeFlex = "marqueeFlex__yWF-w";
+const marqueeOuter = "marqueeOuter__4Hr97";
+const marqueeLink = "marqueeLink__Ts6fj";
+const marqueeUnitContainer = "marqueeUnitContainer__fB8EB";
+const headingTag = "headingTag__ndzUH";
+const marqueeRoot = "marqueeRoot__KuesV";
+const pauseMarquee = "pauseMarquee__4ruHT";
+const marqueeUnit = "marqueeUnit__Snd38";
+const marqueeItem = "marqueeItem__q1Hhi";
+const builderOpacity = "builderOpacity__vikuS";
+const builderColor = "builderColor__onUM-";
+const colorSeparator = "colorSeparator__c9jvW";
+const marqueeText = "marqueeText__nbkgh";
+const visuallyHidden = "visuallyHidden__lPGP3";
+const playButton = "playButton__Zw13V";
+const styles = {
+  marqueeFlex,
+  marqueeOuter,
+  marqueeLink,
+  marqueeUnitContainer,
+  headingTag,
+  marqueeRoot,
+  pauseMarquee,
+  marqueeUnit,
+  marqueeItem,
+  builderOpacity,
+  builderColor,
+  colorSeparator,
+  marqueeText,
+  visuallyHidden,
+  playButton
+};
+const TestIds = {
+  marqueeItemText: "marquee-item-text",
+  marqueeItemSeparator: "marquee-item-separator",
+  marqueeUnit: "marquee-unit",
+  headingTag: "heading-tag"
+};
+const PauseSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M7.5,5 C8.32842712,5 9,5.67157288 9,6.5 L9,11.5 C9,12.3284271 8.32842712,13 7.5,13 C6.67157288,13 6,12.3284271 6,11.5 L6,6.5 C6,5.67157288 6.67157288,5 7.5,5 Z M11.5,5 C12.3284271,5 13,5.67157288 13,6.5 L13,11.5 C13,12.3284271 12.3284271,13 11.5,13 C10.6715729,13 10,12.3284271 10,11.5 L10,6.5 C10,5.67157288 10.6715729,5 11.5,5 Z M7.5,6 C7.22385763,6 7,6.22385763 7,6.5 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,6.5 C8,6.22385763 7.77614237,6 7.5,6 Z M11.5,6 C11.2238576,6 11,6.22385763 11,6.5 L11,11.5 C11,11.7761424 11.2238576,12 11.5,12 C11.7761424,12 12,11.7761424 12,11.5 L12,6.5 C12,6.22385763 11.7761424,6 11.5,6 Z" }));
+PauseSmall.displayName = "PauseSmall";
+var PauseSmall_default = PauseSmall;
+const PlaySmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M6.87468837,5.45041947 L12.7318793,8.46657119 C13.20163,8.68731241 13.20163,9.26940918 12.7318793,9.53342881 L6.87468837,12.5495805 C6.58008377,12.7012867 6.00070071,12.5801226 6,12.0161517 L6,5.98384828 C6,5.65247743 6.35266876,5.20682168 6.87468837,5.45041947 Z M7,11.3602529 L11.5834735,9 L7,6.63974714 L7,11.3602529 Z" }));
+PlaySmall.displayName = "PlaySmall";
+var PlaySmall_default = PlaySmall;
+const PlayPauseButton = ({
+  isPlaying,
+  onToggle,
+  translations,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.code === "Space") {
+      onToggle();
+      e.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className,
+      onKeyDown: handleKeyDown,
+      "aria-label": translations.ariaLabel,
+      "aria-pressed": isPlaying,
+      children: isPlaying ? /* @__PURE__ */ jsx(PauseSmall_default, {}) : /* @__PURE__ */ jsx(PlaySmall_default, {})
+    }
+  );
+};
+const DomStoreSvg = ({ svgId, role = "img" }) => {
+  return /* @__PURE__ */ jsx("svg", { role, className: "ar-" + svgId.replaceAll(".", "-"), children: /* @__PURE__ */ jsx("use", { href: "#" + svgId, width: "100%", height: "100%" }) });
+};
+const toggleAnimationStatus = (status) => {
+  return status === "paused" ? "running" : "paused";
+};
+const DEFAULT_MULTIPLICATION_FACTOR = 20;
+const DEFAULT_SPACE_BETWEEN_ITEMS = "10";
+const MarqueeUnit = (props) => {
+  const {
+    singleTextItem,
+    svgString = "",
+    index,
+    isOriginal,
+    isDecorative,
+    svgId,
+    allowColorOverride,
+    setWidth,
+    width,
+    styleProperties,
+    movementDirection,
+    isBuilder
+  } = props;
+  const compRef = React__default.useRef(null);
+  const isSemanticElement = isOriginal && index === 0 && (!isDecorative || singleTextItem.resolvedLink);
+  React__default.useEffect(() => {
+    if (index === 0 && isOriginal) {
+      window.requestAnimationFrame(() => {
+        var _a;
+        const newWidth = (_a = compRef.current) == null ? void 0 : _a.offsetWidth;
+        if (newWidth !== width) {
+          setWidth(newWidth);
+        }
+      });
+    }
+  }, [
+    styleProperties == null ? void 0 : styleProperties.font,
+    index,
+    isOriginal,
+    setWidth,
+    width,
+    singleTextItem.text,
+    movementDirection
+  ]);
+  let separatorStyle = "";
+  if (allowColorOverride) {
+    separatorStyle = styles.colorSeparator;
+  }
+  const formattedText = singleTextItem.text.replaceAll("\n", "");
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx(styles.marqueeUnit, styles.marqueeFlex),
+      ref: compRef,
+      "data-testid": TestIds.marqueeUnit,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              styles.marqueeItem,
+              styles.marqueeText,
+              formatClassNames(semanticClassNames.text)
+            ),
+            "data-testid": TestIds.marqueeItemText,
+            ...isSemanticElement ? {} : { "data-text": formattedText, "aria-hidden": "true" },
+            children: isSemanticElement ? /* @__PURE__ */ jsx("span", { children: formattedText }) : ""
+          }
+        ),
+        svgId && svgId !== "none" && /* @__PURE__ */ jsx(
+          MarqueeItemSeparator,
+          {
+            svgId,
+            svgString,
+            className: clsx(
+              styles.marqueeItem,
+              separatorStyle,
+              isBuilder && styles.builderOpacity
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const MarqueeItemSeparator = ({ svgId, svgString, className }) => {
+  const spanProps = {
+    className,
+    "data-testid": TestIds.marqueeItemSeparator
+  };
+  if (svgString) {
+    return /* @__PURE__ */ jsx("span", { ...spanProps, "aria-hidden": "true", children: parseSvg(svgString) });
+  }
+  return /* @__PURE__ */ jsx("span", { ...spanProps, children: /* @__PURE__ */ jsx(DomStoreSvg, { svgId, role: "presentation" }) });
+};
+const MarqueeUnitContainer = (props) => {
+  const { multiplicationFactor, isOriginal, dataMarqueeAnimation } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(styles.marqueeUnitContainer, styles.marqueeFlex),
+      "data-marquee-animation": dataMarqueeAnimation,
+      children: Array(multiplicationFactor).fill(0).map((_, index) => /* @__PURE__ */ jsx(
+        MarqueeUnit,
+        {
+          ...{ ...props, index, key: `${isOriginal}-${index}` }
+        }
+      ))
+    }
+  );
+};
+const MarqueeContainer = (props) => {
+  const {
+    pauseOnHover,
+    singleTextItem,
+    isInEditor,
+    setAnimationState,
+    animationApplied,
+    isBuilder
+  } = props;
+  const shouldPauseOnHover = pauseOnHover || (singleTextItem == null ? void 0 : singleTextItem.resolvedLink);
+  const marqueeContainerRef = useRef(null);
+  useEffect(() => {
+    var _a, _b;
+    if ((marqueeContainerRef == null ? void 0 : marqueeContainerRef.current) && animationApplied) {
+      const animationState = (_b = window.getComputedStyle(
+        (_a = marqueeContainerRef.current) == null ? void 0 : _a.firstChild
+      )) == null ? void 0 : _b.getPropertyValue("animation-play-state");
+      setAnimationState(animationState);
+    }
+  }, [isInEditor, setAnimationState, animationApplied]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: marqueeContainerRef,
+      className: clsx(
+        styles.marqueeOuter,
+        styles.marqueeFlex,
+        shouldPauseOnHover && styles.pauseMarquee,
+        isBuilder && styles.builderColor
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MarqueeUnitContainer, { ...{ ...props, isOriginal: true } }),
+        /* @__PURE__ */ jsx(MarqueeUnitContainer, { ...{ ...props } })
+      ]
+    }
+  );
+};
+const TextMarquee$1 = (props) => {
+  const { rootRef, ...marqueeProps } = props;
+  const {
+    id,
+    singleTextItem,
+    isInEditor = false,
+    headingLevel,
+    tagName,
+    styleProperties,
+    speed,
+    movementDirection,
+    translations,
+    customClassNames = [],
+    isPreviewAnimationActive = false,
+    isBuilder
+  } = marqueeProps;
+  const [multiplicationFactor, setMultiplicationFactor] = useState(
+    DEFAULT_MULTIPLICATION_FACTOR
+  );
+  const [width, setWidth] = useState(null);
+  const [animationState, setAnimationState] = useState(null);
+  const [dataMarqueeAnimation, setDataMarqueeAnimation] = useState("");
+  const compRef = useRef(null);
+  const setRootRef = useCallback(
+    (node) => {
+      compRef.current = node;
+      if (!rootRef) {
+        return;
+      }
+      if (typeof rootRef === "function") {
+        rootRef(node);
+      } else {
+        rootRef.current = node;
+      }
+    },
+    [rootRef]
+  );
+  const parentWidth = useRef(0);
+  const [animationApplied, setAnimationApplied] = useState(false);
+  useEffect(() => {
+    var _a, _b;
+    if (width && parentWidth.current) {
+      const spaceBetweenItems = (styleProperties == null ? void 0 : styleProperties.spaceBetweenItems) || ((_a = compRef == null ? void 0 : compRef.current) == null ? void 0 : _a.style.getPropertyValue("--spaceBetweenItems")) || DEFAULT_SPACE_BETWEEN_ITEMS;
+      const distance = multiplicationFactor * width + multiplicationFactor * parseInt(spaceBetweenItems, 10);
+      const newDuration = distance / (speed || 1);
+      (_b = compRef == null ? void 0 : compRef.current) == null ? void 0 : _b.style.setProperty(
+        "--marquee-duration",
+        `${newDuration}s`
+      );
+    }
+  }, [multiplicationFactor, speed, styleProperties == null ? void 0 : styleProperties.spaceBetweenItems, width]);
+  useEffect(() => {
+    if (compRef.current) {
+      if (!isInEditor) {
+        compRef.current.style.setProperty(
+          "--marquee-animation-state",
+          "running"
+        );
+      } else {
+        compRef.current.style.setProperty(
+          "--marquee-animation-state",
+          isPreviewAnimationActive ? "running" : "paused"
+        );
+      }
+      setDataMarqueeAnimation(movementDirection === "ltr" ? "right" : "left");
+      setAnimationApplied(true);
+      parentWidth.current = compRef == null ? void 0 : compRef.current.offsetWidth;
+    }
+  }, [isInEditor, movementDirection, isPreviewAnimationActive]);
+  useEffect(() => {
+    if (marqueeProps.multiplicationFactor) {
+      setMultiplicationFactor(marqueeProps.multiplicationFactor);
+    } else if (parentWidth && width) {
+      const factor = Math.ceil(parentWidth.current / width);
+      setMultiplicationFactor(factor);
+    }
+  }, [width, parentWidth, marqueeProps.multiplicationFactor]);
+  const HeadingLevelTag = headingLevel ? `h${headingLevel}` : "p";
+  const TagName = tagName || HeadingLevelTag;
+  const pauseOnClick = useCallback(() => {
+    if ((compRef == null ? void 0 : compRef.current) && !isInEditor && animationState) {
+      const newAnimationStatus = toggleAnimationStatus(animationState);
+      compRef.current.style.setProperty(
+        "--marquee-clicked",
+        newAnimationStatus
+      );
+      setAnimationState(newAnimationStatus);
+    }
+  }, [isInEditor, animationState]);
+  const marqueeContainerProps = {
+    ...marqueeProps,
+    multiplicationFactor,
+    width,
+    setWidth,
+    setAnimationState,
+    dataMarqueeAnimation,
+    animationApplied
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      onClick: pauseOnClick,
+      className: clsx(
+        styles.marqueeRoot,
+        formatClassNames(
+          semanticClassNames.root,
+          ...customClassNames,
+          marqueeProps.className || ""
+        )
+      ),
+      ref: setRootRef,
+      children: /* @__PURE__ */ jsxs(TagName, { className: styles.headingTag, "data-testid": TestIds.headingTag, children: [
+        (singleTextItem == null ? void 0 : singleTextItem.resolvedLink) ? /* @__PURE__ */ jsx(
+          Link,
+          {
+            className: clsx(
+              styles.marqueeLink,
+              isBuilder && styles.builderColor
+            ),
+            ...singleTextItem.resolvedLink,
+            children: /* @__PURE__ */ jsx(MarqueeContainer, { ...marqueeContainerProps })
+          }
+        ) : /* @__PURE__ */ jsx(MarqueeContainer, { ...marqueeContainerProps }),
+        /* @__PURE__ */ jsx(
+          PlayPauseButton,
+          {
+            isPlaying: animationState === "running",
+            onToggle: pauseOnClick,
+            translations,
+            className: clsx(styles.playButton, styles.visuallyHidden)
+          }
+        )
+      ] })
+    }
+  );
+};
+const SPEED_DATA_RANGE = [0, 1200];
+const SPEED_PANEL_RANGE = [0, 100];
+const panelToDataSpeed = (speed) => SPEED_DATA_RANGE[0] + (speed - SPEED_PANEL_RANGE[0]) * (SPEED_DATA_RANGE[1] - SPEED_DATA_RANGE[0]) / (SPEED_PANEL_RANGE[1] - SPEED_PANEL_RANGE[0]);
+const TextMarquee = React__default.forwardRef(
+  (props, ref) => {
+    const DEFAULT_SPEED = 9;
+    const memoizedProps = useMemo(() => {
+      var _a, _b, _c, _d;
+      const shouldAllowColorOverride = (svg) => {
+        if ((svg == null ? void 0 : svg.contentType) !== "color") {
+          return true;
+        }
+        const colorCount = (svg == null ? void 0 : svg.colors) ? Object.keys(svg.colors).length : 0;
+        return colorCount === 1;
+      };
+      return {
+        ...props,
+        type: "wixEditorElements.TextMarquee",
+        movementDirection: props.movementDirection || "ltr",
+        speed: props.speed ? panelToDataSpeed(props.speed) : panelToDataSpeed(DEFAULT_SPEED),
+        pauseOnHover: props.pauseOnHover || false,
+        textDirection: props.textDirection || "ltr",
+        headingLevel: 0,
+        isDecorative: props.isDecorative || false,
+        singleTextItem: {
+          text: props.text || "Text Marquee",
+          resolvedLink: props.link
+        },
+        tagName: ((_a = props.a11y) == null ? void 0 : _a.tag) || "p",
+        translations: { ariaLabel: "TextMarquee" },
+        className: `${props.className || ""} text-marquee`,
+        svgString: (_b = props == null ? void 0 : props.svg) == null ? void 0 : _b.svgContent,
+        allowColorOverride: shouldAllowColorOverride(props == null ? void 0 : props.svg),
+        svgId: (_c = props == null ? void 0 : props.svg) == null ? void 0 : _c.uri,
+        id: props.id,
+        isBuilder: true,
+        isInEditor: props.isInEditor || false,
+        ariaHidden: (_d = props.a11y) == null ? void 0 : _d.ariaHidden
+      };
+    }, [props]);
+    return /* @__PURE__ */ jsx(TextMarquee$1, { ...memoizedProps, rootRef: ref });
+  }
+);
+TextMarquee.displayName = "TextMarquee";
+export {
+  TextMarquee as default
+};

package/dist/site/components/TextMarquee/component.preview.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextMarqueeBuilderProps } from './TextMarquee.types';
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+export default function TextMarqueePreview(props: TextMarqueeBuilderProps): React.JSX.Element;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

package/dist/site/components/TextMarquee/components/DomStoreSvg.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const DomStoreSvg: React.FC<{
+    svgId: string;
+    role?: string;
+}>;

package/dist/site/components/TextMarquee/components/PlayPauseButton.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+type PlayPauseButtonProps = {
+    isPlaying: boolean;
+    onToggle: () => void;
+    translations: {
+        ariaLabel?: string;
+    };
+    className?: string;
+};
+export declare const PlayPauseButton: ({ isPlaying, onToggle, translations, className, }: PlayPauseButtonProps) => React.JSX.Element;
+export {};

package/dist/site/components/TextMarquee/components/TextMarquee.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TextMarqueeProps } from '../TextMarquee.types';
+declare const TextMarquee: React.FC<TextMarqueeProps>;
+export default TextMarquee;

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

@@ -0,0 +1,6 @@
+export declare const TestIds: {
+    marqueeItemText: string;
+    marqueeItemSeparator: string;
+    marqueeUnit: string;
+    headingTag: string;
+};

package/dist/site/components/TextMarquee/consts.d.ts

@@ -0,0 +1,24 @@
+export declare const running_text: {
+    change_separator: {
+        vector_art: {
+            title_label: string;
+            opacity: string;
+        };
+    };
+    settings: {
+        title_label: string;
+        movement_direction_label: string;
+        text_speed_label: string;
+        pause_on_hover: {
+            title: string;
+            tooltip: string;
+        };
+        movement_direction: {
+            dropdown_ltr_label: string;
+            dropdown_rtl_label: string;
+        };
+        space_between_items: string;
+        separator_color: string;
+        separator_scale: string;
+    };
+};

package/dist/site/components/TextMarquee/css.css

@@ -0,0 +1,171 @@
+.marqueeFlex__yWF-w {
+  display: flex;
+  gap: var(--spaceBetweenItems, 10px);
+}
+
+.marqueeOuter__4Hr97 {
+  overflow-x: clip;
+  gap: 0;
+  color: var(--color, #000);
+}
+
+.marqueeOuterBuilder__-QFD8 {
+  overflow-x: clip;
+  gap: 0;
+  color: inherit;
+}
+
+@supports not (overflow-x: clip) {
+  .marqueeOuter__4Hr97 {
+    overflow: hidden;
+  }
+}
+.marqueeLink__Ts6fj {
+  display: block;
+}
+
+.marqueeLinkBuilder__H2POa {
+  display: block;
+  color: inherit;
+}
+
+.marqueeLink__Ts6fj:focus .marqueeUnitContainer__fB8EB {
+  animation-play-state: paused;
+}
+
+.headingTag__ndzUH {
+  all: unset;
+}
+
+.marqueeUnitContainer__fB8EB {
+  font: var(--font);
+  padding-right: var(--spaceBetweenItems, 10px);
+}
+.marqueeUnitContainer__fB8EB[data-marquee-animation=right], .marqueeUnitContainer__fB8EB[data-marquee-animation=left] {
+  animation-duration: var(--marquee-duration, 40s);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-play-state: var(--marquee-clicked, var(--marquee-animation-state, paused));
+}
+.marqueeUnitContainer__fB8EB[data-marquee-animation=right] {
+  animation-name: right__PkDZH;
+}
+.marqueeUnitContainer__fB8EB[data-marquee-animation=left] {
+  animation-name: left__ucJ5Q;
+}
+
+.marqueeRoot__KuesV:hover .pauseMarquee__4ruHT {
+  --marquee-clicked: paused;
+  --marquee-animation-state: paused;
+}
+
+.stopMarquee .marqueeUnitContainer__fB8EB {
+  --marquee-animation-state: paused;
+}
+
+.marqueeUnit__Snd38 {
+  align-items: center;
+}
+
+.marqueeItem__q1Hhi {
+  font-size: 1em;
+  height: calc(var(--font-size, 1em) * 1.2);
+}
+.marqueeItem__q1Hhi:has(svg) {
+  height: calc(var(--separator-scale, 1) * var(--font-size, 1em) * 1.2);
+}
+.marqueeItem__q1Hhi svg {
+  display: block;
+  width: auto;
+  height: 100%;
+}
+.marqueeItem__q1Hhi[data-text]::before {
+  content: attr(data-text);
+}
+.marqueeItem__q1Hhi span, .marqueeItem__q1Hhi::before {
+  font-size: var(--font-size, 1em);
+  display: block;
+  white-space: pre;
+  line-height: 1.2;
+}
+
+.builderOpacity__vikuS {
+  opacity: var(--opacity, 1);
+}
+
+.builderColor__onUM- {
+  color: inherit;
+}
+
+.colorSeparator__c9jvW svg {
+  --svg-color-1: var(--separatorFillColor, #fff);
+  fill: var(--svg-color-1);
+}
+.colorSeparator__c9jvW svg [data-color="1"] {
+  fill: var(--svg-color-1);
+}
+
+.colorSeparatorBuilder__xvA-X svg {
+  --svg-color-1: var(--separatorFillColor, #000000);
+  fill: var(--svg-color-1);
+  opacity: var(--opacity, 1);
+}
+.colorSeparatorBuilder__xvA-X svg [data-color="1"] {
+  fill: var(--svg-color-1);
+}
+
+.marqueeText__nbkgh {
+  font: var(--font);
+  text-decoration: var(--font-decoration, none);
+  letter-spacing: var(--letter-spacing, none);
+  text-transform: var(--text-transform, none);
+  background-color: var(--textHighlight, none);
+  display: block;
+  direction: var(--text-direction, ltr);
+}
+
+.visuallyHidden__lPGP3:not(:focus):not(:active) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.playButton__Zw13V {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(calc(var(--comp-rotate-z, 0deg) * -1));
+  border-radius: 50%;
+  outline: black solid 1px;
+  color: black;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+}
+
+@keyframes right__PkDZH {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes left__ucJ5Q {
+  to {
+    transform: translateX(-100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .marqueeUnitContainer__fB8EB {
+    --marquee-animation-state: paused;
+  }
+}

package/dist/site/components/TextMarquee/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as TextMarquee } from './component';

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

@@ -0,0 +1,6 @@
+'use client';
+
+import TextMarquee from './component.js';
+
+export { TextMarquee };
+export default TextMarquee;

package/dist/site/components/TextMarquee/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;