@wix/editor-react-components 1.2528.0 → 1.2530.0

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

@@ -1,5 +1,5 @@
 import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
-import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants19.js";
+import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants21.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 const displayConfig = {

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

@@ -82,4 +82,5 @@ export type ButtonProps = {
     wix?: {
         presetsWrapperProps?: Record<string, any>;
     };
+    hasTransitions?: boolean;
 };

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

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
 import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
-export { default } from './component';
+import { default as Button } from './component';
+export default function ButtonPreview(props: React.ComponentProps<typeof Button>): React.JSX.Element;
 export declare const resolveManifestOverrides: ResolveManifestOverrides;

package/dist/site/components/Button/css.css

@@ -16,11 +16,6 @@
   align-items: var(--container-align-items, center);
   outline: none;
 }
-.root__IB9QF:hover, .root__IB9QF.active__lpoVO, .root__IB9QF.button--hover {
-  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
-  transition-duration: 0.4s;
-  transition-timing-function: ease;
-}
 @media (forced-colors: active) {
   .root__IB9QF:not(:disabled):not(.button--disabled) {
     outline: 2px solid ButtonText;
@@ -54,6 +49,12 @@
   white-space: pre-line;
 }
 
+.root__IB9QF.hasTransitions__sv08Z:hover, .root__IB9QF.hasTransitions__sv08Z.active__lpoVO, .root__IB9QF.hasTransitions__sv08Z.button--hover {
+  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
+}
+
 .link__0rDnC {
   text-decoration: none;
   box-sizing: border-box;

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

@@ -1,5 +1,5 @@
 import { a as ACTIONS, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, I as INTERACTIONS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
-import { D as DesignStates, b as DisplayNames } from "../chunks/constants21.js";
+import { D as DesignStates, b as DisplayNames } from "../chunks/constants20.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
@@ -334,7 +334,10 @@ const manifest = {
       }
     },
     editor: {
-      componentUrl: "./site/components/Button/component.preview.tsx"
+      componentUrl: "./site/components/Button/component.preview.tsx",
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
     },
     sdk: {
       url: "./site/components/Button/sdk.ts"

package/dist/site/components/CollapsibleText/css.css

@@ -142,11 +142,6 @@
   align-items: var(--container-align-items, center);
   outline: none;
 }
-.root__IB9QF:hover, .root__IB9QF.active__lpoVO, .root__IB9QF.button--hover {
-  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
-  transition-duration: 0.4s;
-  transition-timing-function: ease;
-}
 @media (forced-colors: active) {
   .root__IB9QF:not(:disabled):not(.button--disabled) {
     outline: 2px solid ButtonText;
@@ -180,6 +175,12 @@
   white-space: pre-line;
 }
 
+.root__IB9QF.hasTransitions__sv08Z:hover, .root__IB9QF.hasTransitions__sv08Z.active__lpoVO, .root__IB9QF.hasTransitions__sv08Z.button--hover {
+  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
+}
+
 .link__0rDnC {
   text-decoration: none;
   box-sizing: border-box;

package/dist/site/components/Lottie/css.css

@@ -56,11 +56,6 @@
   align-items: var(--container-align-items, center);
   outline: none;
 }
-.root__IB9QF:hover, .root__IB9QF.active__lpoVO, .root__IB9QF.button--hover {
-  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
-  transition-duration: 0.4s;
-  transition-timing-function: ease;
-}
 @media (forced-colors: active) {
   .root__IB9QF:not(:disabled):not(.button--disabled) {
     outline: 2px solid ButtonText;
@@ -94,6 +89,12 @@
   white-space: pre-line;
 }
 
+.root__IB9QF.hasTransitions__sv08Z:hover, .root__IB9QF.hasTransitions__sv08Z.active__lpoVO, .root__IB9QF.hasTransitions__sv08Z.button--hover {
+  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
+}
+
 .link__0rDnC {
   text-decoration: none;
   box-sizing: border-box;

package/dist/site/components/Menu/css.css

@@ -942,11 +942,6 @@
   align-items: var(--container-align-items, center);
   outline: none;
 }
-.root__IB9QF:hover, .root__IB9QF.active__lpoVO, .root__IB9QF.button--hover {
-  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
-  transition-duration: 0.4s;
-  transition-timing-function: ease;
-}
 @media (forced-colors: active) {
   .root__IB9QF:not(:disabled):not(.button--disabled) {
     outline: 2px solid ButtonText;
@@ -980,6 +975,12 @@
   white-space: pre-line;
 }
 
+.root__IB9QF.hasTransitions__sv08Z:hover, .root__IB9QF.hasTransitions__sv08Z.active__lpoVO, .root__IB9QF.hasTransitions__sv08Z.button--hover {
+  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
+}
+
 .link__0rDnC {
   text-decoration: none;
   box-sizing: border-box;

package/dist/site/components/Slideshow/css.css

@@ -24,6 +24,7 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
+  overflow: hidden;
   z-index: 1;
   animation-duration: var(--animation-duration, 0.5s);
   animation-fill-mode: forwards;
@@ -468,11 +469,6 @@
   align-items: var(--container-align-items, center);
   outline: none;
 }
-.root__IB9QF:hover, .root__IB9QF.active__lpoVO, .root__IB9QF.button--hover {
-  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
-  transition-duration: 0.4s;
-  transition-timing-function: ease;
-}
 @media (forced-colors: active) {
   .root__IB9QF:not(:disabled):not(.button--disabled) {
     outline: 2px solid ButtonText;
@@ -506,6 +502,12 @@
   white-space: pre-line;
 }
 
+.root__IB9QF.hasTransitions__sv08Z:hover, .root__IB9QF.hasTransitions__sv08Z.active__lpoVO, .root__IB9QF.hasTransitions__sv08Z.button--hover {
+  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
+}
+
 .link__0rDnC {
   text-decoration: none;
   box-sizing: border-box;

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants20.js";
+import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants19.js";
 import { d as debounce } from "../chunks/performanceUtils.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
-import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants20.js";
+import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants19.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { MenuItemType } from '../Menu/Menu.types';
 import { A11y, Direction } from '@wix/editor-react-types';
-import { AnimatedIconBuilderProps } from '../AnimatedIcon/types';
 import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 type TestCompProps = {
     id: string;
@@ -27,7 +26,6 @@ type TestCompProps = {
         errorText?: {
             text?: string;
         };
-        dummyAnimatedIcon?: AnimatedIconBuilderProps;
     };
     a11y?: A11y;
     isEnabled?: boolean;

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

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
 const semanticClassNames = {
   root: "test-comp-card"
 };
@@ -39,7 +38,7 @@ const styles = {
   functionBtn
 };
 const TestComp = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     id,
     className,
@@ -144,23 +143,13 @@ const TestComp = (props) => {
           }
         ),
         isError && /* @__PURE__ */ jsx("p", { className: "card-error-text", children: ((_e = elementProps.errorText) == null ? void 0 : _e.text) || "Something went wrong" }),
-        /* @__PURE__ */ jsx(
-          AnimatedIconWithReducedMotion,
-          {
-            ...elementProps.dummyAnimatedIcon,
-            className: clsx(
-              "dummy-animated-icon",
-              (_f = elementProps.dummyAnimatedIcon) == null ? void 0 : _f.className
-            )
-          }
-        ),
-        ((_g = elementProps.image) == null ? void 0 : _g.src) && /* @__PURE__ */ jsx(
+        ((_f = elementProps.image) == null ? void 0 : _f.src) && /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
               styles.imageWrapper,
               "card-image",
-              (_h = elementProps.image) == null ? void 0 : _h.className
+              (_g = elementProps.image) == null ? void 0 : _g.className
             ),
             children: /* @__PURE__ */ jsx(
               "img",

package/dist/site/components/TestComp/css.css

@@ -205,28 +205,4 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
-}
-.animatedIcon__3o5ii {
-  --size: 16px;
-  --fill: #000000;
-  --rotation: 0deg;
-}
-.animatedIcon__3o5ii {
-  display: block;
-  width: inherit;
-  height: inherit;
-  width: var(--size);
-  height: var(--size);
-}
-.animatedIcon__3o5ii svg {
-  width: var(--size);
-  height: var(--size);
-  display: block;
-  fill: var(--fill);
-  transform: rotate(var(--rotation));
-}
-@media (forced-colors: active) {
-  .animatedIcon__3o5ii svg {
-    fill: currentColor;
-  }
 }

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

@@ -1,4 +1,4 @@
-import { L as LAYOUT, N as NativeStateType, E as ELEMENTS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
+import { L as LAYOUT, N as NativeStateType, D as DATA, E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const DesignStates = {
   testCompCard: {
@@ -31,10 +31,7 @@ const manifest = {
   resources: {
     client: {
       componentUrl: "./site/components/TestComp/component.tsx",
-      moduleSpecifier: "@wix/editor-react-components/TestComp",
-      dependencies: {
-        componentDependencies: ["@wix/editor-react-components/AnimatedIcon"]
-      }
+      moduleSpecifier: "@wix/editor-react-components/TestComp"
     }
   },
   editorElement: {
@@ -546,15 +543,6 @@ const manifest = {
             color: {}
           }
         }
-      },
-      dummyAnimatedIcon: {
-        spec: "sp.erc.testCompAnimatedIcon",
-        elementType: ELEMENTS.ELEMENT_TYPE.refElement,
-        refElement: {
-          selector: ".dummy-animated-icon",
-          displayName: "Dummy Animated Icon",
-          type: "wixEditorElements.AnimatedIcon"
-        }
       }
     },
     states: {

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 "./constants19.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants21.js";
 import { c as cn } from "./index9.js";
 const AnimatedSvg = forwardRef(
   ({ svgContent, reducedMotion = false, duration }, ref) => {

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

@@ -7,12 +7,13 @@ 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, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants21.js";
+import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants20.js";
 import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
 import { i as isValidLink } from "./Link.js";
 const root = "root__IB9QF";
 const active = "active__lpoVO";
 const label = "label__EtLji";
+const hasTransitions = "hasTransitions__sv08Z";
 const link = "link__0rDnC";
 const icon = "icon__ZzsS5";
 const button = "button__i8gkO";
@@ -20,6 +21,7 @@ const styles = {
   root,
   active,
   label,
+  hasTransitions,
   link,
   icon,
   button
@@ -223,7 +225,8 @@ const Button = (props) => {
     preventLinkNavigation,
     onMouseEnter: propsOnMouseEnter,
     onMouseLeave: propsOnMouseLeave,
-    wix
+    wix,
+    hasTransitions: hasTransitions2 = true
   } = props;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const animatedIconProps = elementProps == null ? void 0 : elementProps.animatedIcon;
@@ -249,7 +252,8 @@ const Button = (props) => {
     formatClassNames(semanticClassNames.root),
     {
       disabled: isDisabled,
-      [styles.active]: active2
+      [styles.active]: active2,
+      [styles.hasTransitions]: hasTransitions2
     }
   );
   const labelClassName = clsx(

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

@@ -1,61 +1,56 @@
-const DEFAULT_ANIMATION_DURATION = 0.2;
-const AnimatedSvgIds = {
-  animatedSvg: "animatedSvg",
-  animatedTagPath: "animatedPath",
-  animateTagForward: "animateForward",
-  animateTagBackward: "animateBackward"
+const classes = {
+  tabs: "tabs",
+  tabMenu: "tab-menu",
+  tabMenuItemsWrapper: "tab-menu-items-wrapper",
+  tabMenuItems: "tab-menu-items",
+  menuItem: "menu-item",
+  scrollButton: "scroll-button",
+  tabContentContainer: "tab-content-container",
+  tabContentItem: "tab-content-item"
 };
-var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
-  AnimationDirection2["FORWARD"] = "Forward";
-  AnimationDirection2["BACKWARD"] = "Backward";
-  return AnimationDirection2;
-})(AnimationDirection || {});
-const AnimatedDataAttributes = {
-  [
-    "Forward"
-    /* FORWARD */
-  ]: "data-animated-end-path",
-  [
-    "Backward"
-    /* BACKWARD */
-  ]: "data-animated-start-path"
-};
-const TestIds = {
-  animatedSvg: "animated-svg",
-  animateTagForward: "animate-tag-forward",
-  animateTagBackward: "animate-tag-backward"
+const OVERFLOW_BEHAVIOR = {
+  WRAP: "wrap"
 };
 const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "animated-icon--hover" },
-    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
-    selected: { displayName: "Selected", className: "animated-icon--selected" }
-  }
-};
-const DisplayNames = {
-  root: {
-    elementDisplayName: "Animated Icon",
-    customActions: {
-      animatedIcon: {
-        displayName: "Icon"
-      }
-    },
-    data: {
-      duration: "Duration"
-    },
-    cssCustomProperties: {
-      size: "Size",
-      fill: "Color",
-      rotation: "Rotation"
-    }
+  menuItem: {
+    hover: { displayName: "Hover", className: "tabs__item--hover" }
   }
 };
+const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
+  "menu-item-background",
+  "menu-item-box-shadow",
+  "menu-item-color",
+  "menu-item-text-decoration-line",
+  "menu-item-letter-spacing",
+  "menu-item-text-shadow",
+  "menu-item-text-align",
+  "menu-item-flex",
+  "menu-item-border-width-top",
+  "menu-item-border-width-bottom",
+  "menu-item-border-width-inline-start",
+  "menu-item-border-width-inline-end",
+  "menu-item-border-style-top",
+  "menu-item-border-style-bottom",
+  "menu-item-border-style-inline-start",
+  "menu-item-border-style-inline-end",
+  "menu-item-border-color-top",
+  "menu-item-border-color-bottom",
+  "menu-item-border-color-inline-start",
+  "menu-item-border-color-inline-end",
+  "menu-item-border-radius-start-start",
+  "menu-item-border-radius-start-end",
+  "menu-item-border-radius-end-start",
+  "menu-item-border-radius-end-end",
+  "menu-item-padding-top",
+  "menu-item-padding-bottom",
+  "menu-item-padding-inline-start",
+  "menu-item-padding-inline-end"
+];
+const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
-  AnimatedSvgIds as A,
-  DEFAULT_ANIMATION_DURATION as D,
-  TestIds as T,
-  AnimatedDataAttributes as a,
-  AnimationDirection as b,
-  DesignStates as c,
-  DisplayNames as d
+  DesignStates as D,
+  OVERFLOW_BEHAVIOR as O,
+  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
+  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
+  classes as c
 };

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

@@ -1,56 +1,59 @@
-const classes = {
-  tabs: "tabs",
-  tabMenu: "tab-menu",
-  tabMenuItemsWrapper: "tab-menu-items-wrapper",
-  tabMenuItems: "tab-menu-items",
-  menuItem: "menu-item",
-  scrollButton: "scroll-button",
-  tabContentContainer: "tab-content-container",
-  tabContentItem: "tab-content-item"
+const TestIds = {
+  buttonContent: "buttonContent",
+  buttonLabel: "stylablebutton-label"
 };
-const OVERFLOW_BEHAVIOR = {
-  WRAP: "wrap"
+const TRANSITION_DURATION = 400;
+const SEMANTIC_CLASS_NAMES = {
+  root: "button",
+  buttonLabel: "button__label"
 };
 const DesignStates = {
-  menuItem: {
-    hover: { displayName: "Hover", className: "tabs__item--hover" }
+  root: {
+    hover: { displayName: "Hover", className: "button--hover" },
+    disabled: { displayName: "Disabled", className: "button--disabled" }
+  },
+  label: {
+    hover: { displayName: "Hover", className: "button__label--hover" },
+    disabled: { displayName: "Disabled", className: "button__label--disabled" }
+  }
+};
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Button",
+    data: {
+      disabled: "Disabled"
+    },
+    cssProperties: {
+      gap: "Space between text and icon"
+    },
+    cssCustomProperties: {
+      "content-horizontal-alignment": "Alignment",
+      "icon-position": "Icon position"
+    },
+    presets: {
+      baseButton: "Base Button"
+    },
+    iconPosition: {
+      beforeText: "Before text",
+      afterText: "After text",
+      belowText: "Below text",
+      aboveText: "Above text"
+    }
+  },
+  label: {
+    elementDisplayName: "Text",
+    cssProperties: {
+      font: "Typography"
+    }
+  },
+  data: {
+    iconCollapsed: "Display icon"
   }
 };
-const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
-  "menu-item-background",
-  "menu-item-box-shadow",
-  "menu-item-color",
-  "menu-item-text-decoration-line",
-  "menu-item-letter-spacing",
-  "menu-item-text-shadow",
-  "menu-item-text-align",
-  "menu-item-flex",
-  "menu-item-border-width-top",
-  "menu-item-border-width-bottom",
-  "menu-item-border-width-inline-start",
-  "menu-item-border-width-inline-end",
-  "menu-item-border-style-top",
-  "menu-item-border-style-bottom",
-  "menu-item-border-style-inline-start",
-  "menu-item-border-style-inline-end",
-  "menu-item-border-color-top",
-  "menu-item-border-color-bottom",
-  "menu-item-border-color-inline-start",
-  "menu-item-border-color-inline-end",
-  "menu-item-border-radius-start-start",
-  "menu-item-border-radius-start-end",
-  "menu-item-border-radius-end-start",
-  "menu-item-border-radius-end-end",
-  "menu-item-padding-top",
-  "menu-item-padding-bottom",
-  "menu-item-padding-inline-start",
-  "menu-item-padding-inline-end"
-];
-const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
   DesignStates as D,
-  OVERFLOW_BEHAVIOR as O,
-  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
-  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
-  classes as c
+  SEMANTIC_CLASS_NAMES as S,
+  TRANSITION_DURATION as T,
+  TestIds as a,
+  DisplayNames as b
 };

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

@@ -1,59 +1,61 @@
-const TestIds = {
-  buttonContent: "buttonContent",
-  buttonLabel: "stylablebutton-label"
+const DEFAULT_ANIMATION_DURATION = 0.2;
+const AnimatedSvgIds = {
+  animatedSvg: "animatedSvg",
+  animatedTagPath: "animatedPath",
+  animateTagForward: "animateForward",
+  animateTagBackward: "animateBackward"
+};
+var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
+  AnimationDirection2["FORWARD"] = "Forward";
+  AnimationDirection2["BACKWARD"] = "Backward";
+  return AnimationDirection2;
+})(AnimationDirection || {});
+const AnimatedDataAttributes = {
+  [
+    "Forward"
+    /* FORWARD */
+  ]: "data-animated-end-path",
+  [
+    "Backward"
+    /* BACKWARD */
+  ]: "data-animated-start-path"
 };
-const TRANSITION_DURATION = 400;
-const SEMANTIC_CLASS_NAMES = {
-  root: "button",
-  buttonLabel: "button__label"
+const TestIds = {
+  animatedSvg: "animated-svg",
+  animateTagForward: "animate-tag-forward",
+  animateTagBackward: "animate-tag-backward"
 };
 const DesignStates = {
   root: {
-    hover: { displayName: "Hover", className: "button--hover" },
-    disabled: { displayName: "Disabled", className: "button--disabled" }
-  },
-  label: {
-    hover: { displayName: "Hover", className: "button__label--hover" },
-    disabled: { displayName: "Disabled", className: "button__label--disabled" }
+    hover: { displayName: "Hover", className: "animated-icon--hover" },
+    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
+    selected: { displayName: "Selected", className: "animated-icon--selected" }
   }
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "Button",
-    data: {
-      disabled: "Disabled"
+    elementDisplayName: "Animated Icon",
+    customActions: {
+      animatedIcon: {
+        displayName: "Icon"
+      }
     },
-    cssProperties: {
-      gap: "Space between text and icon"
+    data: {
+      duration: "Duration"
     },
     cssCustomProperties: {
-      "content-horizontal-alignment": "Alignment",
-      "icon-position": "Icon position"
-    },
-    presets: {
-      baseButton: "Base Button"
-    },
-    iconPosition: {
-      beforeText: "Before text",
-      afterText: "After text",
-      belowText: "Below text",
-      aboveText: "Above text"
-    }
-  },
-  label: {
-    elementDisplayName: "Text",
-    cssProperties: {
-      font: "Typography"
+      size: "Size",
+      fill: "Color",
+      rotation: "Rotation"
     }
-  },
-  data: {
-    iconCollapsed: "Display icon"
   }
 };
 export {
-  DesignStates as D,
-  SEMANTIC_CLASS_NAMES as S,
-  TRANSITION_DURATION as T,
-  TestIds as a,
-  DisplayNames as b
+  AnimatedSvgIds as A,
+  DEFAULT_ANIMATION_DURATION as D,
+  TestIds as T,
+  AnimatedDataAttributes as a,
+  AnimationDirection as b,
+  DesignStates as c,
+  DisplayNames as d
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2528.0",
+  "version": "1.2530.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "becdd5fff4e65482490358dd76ed274a1fd206d85354caa8cb82ff3e"
+  "falconPackageHash": "3194917ae1c964fd130b27f40399ca257160768db8fcf284ffac3443"
 }