@wix/editor-react-components 1.2481.0 → 1.2483.0

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

@@ -4,11 +4,11 @@ import React__default, { useRef, useEffect, useMemo, useState, useCallback } fro
 import "react-dom";
 import { c as clsx } from "../chunks/clsx.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
+import { D as DesignStates, a as DEFAULT_PROPS } from "../chunks/constants40.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { a as requireEq, d as requireIsFunction, r as requireIsObject, e as requireIsLength, c as require_isIndex, b as requireIsArrayLike } from "../chunks/isArrayLike.js";
 import { c as require_root, r as require_Symbol, a as require_baseGetTag, b as requireIsObjectLike, d as require_freeGlobal } from "../chunks/isObjectLike.js";
 import { r as requireIsArray } from "../chunks/isArray.js";
-import { D as DEFAULT_PROPS } from "../chunks/constants40.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 var _overArg;
 var hasRequired_overArg;
@@ -2463,7 +2463,8 @@ const AccordionItem = (props) => {
     {
       className: clsx(
         "accordion-item",
-        (_c = elementProps == null ? void 0 : elementProps.accordionItem) == null ? void 0 : _c.className
+        (_c = elementProps == null ? void 0 : elementProps.accordionItem) == null ? void 0 : _c.className,
+        isOpen && DesignStates.accordionItem.selected.className
       ),
       value: item.id,
       children: [
@@ -2473,7 +2474,8 @@ const AccordionItem = (props) => {
             className: clsx(
               "item-title",
               styles["accordion-header"],
-              (_d = elementProps == null ? void 0 : elementProps.itemTitle) == null ? void 0 : _d.className
+              (_d = elementProps == null ? void 0 : elementProps.itemTitle) == null ? void 0 : _d.className,
+              isOpen && DesignStates.itemTitle.selected.className
             ),
             children: [
               /* @__PURE__ */ jsx("span", { className: styles["accordion-item-label"], children: item.name }),

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
-import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants40.js";
+import { D as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants40.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";

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

@@ -6,7 +6,7 @@ import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLoc
 import { createPortal } from "react-dom";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { s as semanticClassNames } from "../chunks/constants38.js";
+import { s as semanticClassNames, D as DesignStates } from "../chunks/constants38.js";
 import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
 import { useService } from "@wix/services-manager-react";
 import { d as defineService } from "../chunks/index8.js";
@@ -1380,7 +1380,8 @@ function BreadcrumbItemComponent({
             className: clsx(
               semanticClassNames.itemLabel,
               styles.label,
-              (_c = elementProps == null ? void 0 : elementProps.item) == null ? void 0 : _c.className
+              (_c = elementProps == null ? void 0 : elementProps.item) == null ? void 0 : _c.className,
+              isCurrent && DesignStates.item.selected.className
             ),
             children: [
               homeIcon2,

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

@@ -4,12 +4,11 @@ import { useService } from "@wix/services-manager-react";
 import { U as UrlDefinition } from "../chunks/index12.js";
 import { d as defineService } from "../chunks/index8.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
-import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, u as useAnimationState, c as ARIA_LABEL_NAMESPACE, t as translationsKeys } from "../chunks/constants27.js";
+import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, c as DesignStates, u as useAnimationState, e as ARIA_LABEL_NAMESPACE, t as translationsKeys } from "../chunks/constants27.js";
 import React__default, { createContext, useContext, useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from "react";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { g as getItemDepthSelector, r as rootItemDepthLevel, s as subItemDepthLevel, a as subSubItemDepthLevel } from "../chunks/utils2.js";
 import { d as debounce } from "../chunks/performanceUtils.js";
-import { f as formatClassNames } from "../chunks/classNames.js";
 import { L as Link } from "../chunks/Link.js";
 import { i as isEmptyObject, a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
@@ -24,7 +23,6 @@ const MenuContext = createContext({
   currentUrl: EMPTY_ANCHOR_URL,
   translations: defaultTranslations,
   menuStyleId: "",
-  customClassNames: [],
   getAnimationPackage: () => MenuAnimationName.None,
   navAriaLabel: "",
   isHamburgerMenuOpened: void 0,
@@ -40,7 +38,6 @@ const MenuContextProvider = ({
   activeAnchor,
   translations,
   menuStyleId,
-  customClassNames,
   getAnimationPackage,
   navAriaLabel,
   isHamburgerMenuOpened,
@@ -65,7 +62,6 @@ const MenuContextProvider = ({
       activeAnchor,
       translations,
       menuStyleId,
-      customClassNames,
       getAnimationPackage,
       navAriaLabel,
       isHamburgerMenuOpened,
@@ -82,7 +78,6 @@ const MenuContextProvider = ({
       activeAnchor,
       translations,
       menuStyleId,
-      customClassNames,
       getAnimationPackage,
       navAriaLabel,
       isHamburgerMenuOpened,
@@ -275,10 +270,10 @@ const useScroll = (ref) => {
     isScrollForwardButtonVisible
   };
 };
-const createSDKAction = (item2, selected2, sdkAction) => sdkAction && ((e) => {
+const createSDKAction = (item2, selected, sdkAction) => sdkAction && ((e) => {
   sdkAction == null ? void 0 : sdkAction(e, {
     ...item2,
-    selected: selected2
+    selected
   });
 });
 const getMenuOrientation = (itemRef) => {
@@ -676,26 +671,6 @@ const isCurrentItem = (item2, currentItem) => {
   }
   return firstLink.href === secondLink.href;
 };
-const menuSemanticClassNames = {
-  root: "menu",
-  item: "menu__item",
-  itemLabel: "menu__item-label",
-  scrollButton: "menu__scroll-button",
-  scrollButtonIcon: "menu__scroll-button-icon",
-  itemIcon: "menu__item-icon"
-};
-const shmSemanticClassNames = {
-  root: "horizontal-menu",
-  menuItemWrapper: "horizontal-menu__item",
-  menuItemLabel: "horizontal-menu__item-label"
-};
-const dropdownSemanticClassNames = {
-  root: "dropdown-menu",
-  dropdownItem: "dropdown-menu__item",
-  dropdownItemLabel: "dropdown-menu__item-label",
-  dropdownSubItem: "dropdown-menu__subitem",
-  dropdownSubItemLabel: "dropdown-menu__subitem-label"
-};
 const DropdownIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -745,10 +720,7 @@ const MenuItemDropdownIcon = ({
         {
           "data-part": MenuParts.DropdownIcon,
           "data-open": isDropdownIconOpen ? "true" : void 0,
-          className: clsx(
-            classes$6.dropdownIcon,
-            formatClassNames(menuSemanticClassNames.itemIcon)
-          )
+          className: classes$6.dropdownIcon
         }
       )
     }
@@ -786,11 +758,6 @@ const MenuItemLabel = (props) => {
     submenuToggleId,
     itemClassName
   } = props;
-  const itemLabelClassNames = clsx(
-    classes$6.label,
-    formatClassNames(shmSemanticClassNames.menuItemLabel),
-    formatClassNames(menuSemanticClassNames.itemLabel)
-  );
   const isCurrentPage = isCurrentItem(item2, currentItem);
   const { label: label2, link } = item2;
   const hasLink = !isEmptyObject(link);
@@ -798,9 +765,8 @@ const MenuItemLabel = (props) => {
   const labelContainerClassNames = clsx(
     selectors.item,
     classes$6.labelContainer,
-    formatClassNames(shmSemanticClassNames.menuItemWrapper),
-    formatClassNames(menuSemanticClassNames.item),
-    itemClassName
+    itemClassName,
+    isCurrentPage && DesignStates.item.selected.className
   );
   const isInteractive = (hasSubItems || hasLink) && !isCurrentPage;
   const isDropdownIconOpen = isOpen && dropdownAnimationState.phase !== AnimationPhase.ExitActive;
@@ -827,7 +793,7 @@ const MenuItemLabel = (props) => {
             ...isCurrentPage && {
               "aria-current": "page"
             },
-            children: /* @__PURE__ */ jsx("div", { className: itemLabelClassNames, "data-part": MenuParts.Label, children: label2 })
+            children: /* @__PURE__ */ jsx("div", { className: classes$6.label, "data-part": MenuParts.Label, children: label2 })
           }
         ),
         hasDropdownMenu && ["default", "srOnly"].map((variant) => {
@@ -1237,9 +1203,8 @@ const list = "list__HKOkk";
 const subList = "subList__uWPaR";
 const listItem = "listItem__nFgdQ";
 const item = "item__nS3PO";
-const selected = "selected__YFkZs";
-const itemLabel = "itemLabel__d2L8o";
 const subItem = "subItem__3ieV0";
+const itemLabel = "itemLabel__d2L8o";
 const subItemLabel = "subItemLabel__v6zMr";
 const styles = {
   root: root$3,
@@ -1247,9 +1212,8 @@ const styles = {
   subList,
   listItem,
   item,
-  selected,
-  itemLabel,
   subItem,
+  itemLabel,
   subItemLabel
 };
 const TestIds = {
@@ -1266,7 +1230,6 @@ const ItemList = ({
   isRootLevel = true,
   partToPreviewStateMap,
   onEscKeyDown,
-  customClassNames = [],
   onItemClick,
   onItemMouseIn,
   onItemMouseOut,
@@ -1276,28 +1239,24 @@ const ItemList = ({
 }) => {
   const subMenuContainerClasses = clsx(
     isRootLevel ? styles.list : styles.subList,
-    classes$6.dropdownMenu,
-    {
-      [formatClassNames(dropdownSemanticClassNames.root, ...customClassNames)]: isRootLevel
-    }
+    classes$6.dropdownMenu
+  );
+  const submenuItemLinkClasses = (isCurrent) => clsx(
+    isRootLevel ? [
+      styles.item,
+      selectors.dropdownItem,
+      dropdownItemClassName,
+      isCurrent && DesignStates.dropdownItem.selected.className
+    ] : [
+      styles.subItem,
+      selectors.dropdownSubItem,
+      dropdownSubItemClassName,
+      isCurrent && DesignStates.dropdownSubItem.selected.className
+    ],
+    INNER_FOCUS_RING_CLASSNAME
   );
-  const submenuItemLinkClasses = (isCurrent) => {
-    return clsx(
-      isRootLevel ? [styles.item, selectors.dropdownItem, dropdownItemClassName] : [styles.subItem, selectors.dropdownSubItem, dropdownSubItemClassName],
-      {
-        [styles.selected]: isCurrent
-      },
-      isRootLevel ? {
-        [formatClassNames(dropdownSemanticClassNames.dropdownItem)]: true
-      } : {
-        [formatClassNames(dropdownSemanticClassNames.dropdownSubItem)]: true
-      },
-      INNER_FOCUS_RING_CLASSNAME
-    );
-  };
   const submenuItemLabelClasses = clsx(
-    isRootLevel ? styles.itemLabel : styles.subItemLabel,
-    isRootLevel ? formatClassNames(dropdownSemanticClassNames.dropdownItemLabel) : formatClassNames(dropdownSemanticClassNames.dropdownSubItemLabel)
+    isRootLevel ? styles.itemLabel : styles.subItemLabel
   );
   return /* @__PURE__ */ jsx(
     "ul",
@@ -1385,7 +1344,6 @@ const Submenu = (props) => {
   const {
     id,
     partToPreviewStateMap,
-    customClassNames = [],
     className,
     onItemClick,
     onItemMouseIn,
@@ -1409,7 +1367,6 @@ const Submenu = (props) => {
           items: item2.items || [],
           currentItem,
           onEscKeyDown,
-          customClassNames,
           onItemClick,
           onItemMouseIn,
           onItemMouseOut,
@@ -1734,10 +1691,6 @@ const classes$3 = {
   visible,
   hidden
 };
-const iconClasses = clsx(
-  classes$3.icon,
-  formatClassNames(menuSemanticClassNames.scrollButtonIcon)
-);
 const ScrollButton = (props) => {
   const {
     className: propClassName,
@@ -1751,7 +1704,6 @@ const ScrollButton = (props) => {
     classes$3.root,
     propClassName,
     isHidden ? classes$3.hidden : classes$3.visible,
-    formatClassNames(menuSemanticClassNames.scrollButton),
     "scroll-button"
   );
   return /* @__PURE__ */ jsx(
@@ -1765,7 +1717,7 @@ const ScrollButton = (props) => {
       "data-hidden": isHidden,
       "data-preview": previewState,
       "data-part": dataPart,
-      children: /* @__PURE__ */ jsx("span", { className: iconClasses, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 12", children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx("span", { className: classes$3.icon, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 12", children: /* @__PURE__ */ jsx(
         "path",
         {
           d: direction === "forward" ? "M6 6L.8 0 0 .7 4.7 6 0 11.3l.8.7z" : "M0 6L5.2 0 6 .7 1.3 6 6 11.3 5.2 12z"
@@ -1839,7 +1791,6 @@ const MenuContent = (props) => {
     currentUrl,
     activeAnchor,
     translations,
-    customClassNames = [],
     getAnimationPackage,
     navAriaLabel,
     a11yProps
@@ -1847,9 +1798,7 @@ const MenuContent = (props) => {
   const rootClassName = clsx(
     classes$4.root,
     navbarClassName,
-    !direction && (directionClassName ?? classes$4.rootDirection),
-    formatClassNames(shmSemanticClassNames.root),
-    formatClassNames(menuSemanticClassNames.root, ...customClassNames)
+    !direction && (directionClassName ?? classes$4.rootDirection)
   );
   const menuContainerRef = React__default.useRef(null);
   const lastValidAnchorMenuItemRef = useRef(

package/dist/site/components/Menu/components/Submenu/types.d.ts

@@ -10,7 +10,6 @@ export type SubmenuPreviewMapperProps = {
 type SubmenuBaseProps = {
     id?: string;
     className?: string;
-    customClassNames?: Array<string>;
     containerRootClassName?: string;
     containerProps?: any;
     onItemClick?: IMenuItemSDKAction;

package/dist/site/components/Menu/contexts/MenuContext.d.ts

@@ -12,7 +12,6 @@ export type MenuContextValue = {
         hamburgerOpenButtonAriaLabel?: string;
         hamburgerCloseButtonAriaLabel?: string;
     };
-    customClassNames?: Array<string>;
     navAriaLabel: string;
     menuStyleId?: string;
     getAnimationPackage: () => MenuAnimationNameType;

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

@@ -395,44 +395,18 @@
   padding-inline-start: var(--dropdown-menu-item-padding-inline-start);
   padding-inline-end: var(--dropdown-menu-item-padding-inline-end);
 }
-.item__nS3PO.selected__YFkZs, .item__nS3PO[data-preview=selected], .item__nS3PO.menu__dropdown-item--selected {
-  font: var(--dropdown-menu-item-selected-font, var(--dropdown-menu-item-font));
-  color: var(--dropdown-menu-item-selected-color, var(--dropdown-menu-item-color));
-  letter-spacing: var(--dropdown-menu-item-selected-letter-spacing, var(--dropdown-menu-item-letter-spacing));
-  line-height: var(--dropdown-menu-item-selected-line-height, var(--dropdown-menu-item-line-height));
+.item__nS3PO.menu__dropdown-item--selected {
   text-decoration-line: var(--dropdown-menu-item-selected-text-decoration, var(--dropdown-menu-item-text-decoration));
-  text-transform: var(--dropdown-menu-item-selected-text-transform, var(--dropdown-menu-item-text-transform));
-  text-shadow: var(--dropdown-menu-item-selected-text-outline, var(--dropdown-menu-item-text-outline)), var(--dropdown-menu-item-selected-text-shadow, var(--dropdown-menu-item-text-shadow));
-  background: var(--dropdown-menu-item-selected-background, var(--dropdown-menu-item-background));
-  border-top: var(--dropdown-menu-item-selected-border-top, var(--dropdown-menu-item-border-top));
-  border-bottom: var(--dropdown-menu-item-selected-border-bottom, var(--dropdown-menu-item-border-bottom));
-  box-shadow: var(--dropdown-menu-item-selected-box-shadow, var(--dropdown-menu-item-box-shadow));
-}
-.item__nS3PO.selected__YFkZs .itemLabel__d2L8o, .item__nS3PO[data-preview=selected] .itemLabel__d2L8o, .item__nS3PO.menu__dropdown-item--selected .itemLabel__d2L8o {
-  background-color: var(--dropdown-menu-item-selected-text-highlight, var(--dropdown-menu-item-text-highlight));
-}
-.item__nS3PO:hover, .item__nS3PO.hover__Uh49s, .item__nS3PO[data-preview=hover], .item__nS3PO.menu__dropdown-item--hover {
-  font: var(--dropdown-menu-item-hover-font, var(--dropdown-menu-item-font));
-  color: var(--dropdown-menu-item-hover-color, var(--dropdown-menu-item-color));
-  letter-spacing: var(--dropdown-menu-item-hover-letter-spacing, var(--dropdown-menu-item-letter-spacing));
-  line-height: var(--dropdown-menu-item-hover-line-height, var(--dropdown-menu-item-line-height));
-  text-decoration-line: var(--dropdown-menu-item-hover-text-decoration, var(--dropdown-menu-item-text-decoration));
-  text-transform: var(--dropdown-menu-item-hover-text-transform, var(--dropdown-menu-item-text-transform));
-  text-shadow: var(--dropdown-menu-item-hover-text-outline, var(--dropdown-menu-item-text-outline)), var(--dropdown-menu-item-hover-text-shadow, var(--dropdown-menu-item-text-shadow));
-  background: var(--dropdown-menu-item-hover-background, var(--dropdown-menu-item-background));
-  border-top: var(--dropdown-menu-item-hover-border-top, var(--dropdown-menu-item-border-top));
-  border-bottom: var(--dropdown-menu-item-hover-border-bottom, var(--dropdown-menu-item-border-bottom));
-  box-shadow: var(--dropdown-menu-item-hover-box-shadow, var(--dropdown-menu-item-box-shadow));
 }
-.item__nS3PO:hover .itemLabel__d2L8o, .item__nS3PO.hover__Uh49s .itemLabel__d2L8o, .item__nS3PO[data-preview=hover] .itemLabel__d2L8o, .item__nS3PO.menu__dropdown-item--hover .itemLabel__d2L8o {
-  background-color: var(--dropdown-menu-item-hover-text-highlight, var(--dropdown-menu-item-text-highlight));
+.item__nS3PO:hover, .item__nS3PO.menu__dropdown-item--hover {
+  text-decoration-line: var(--dropdown-menu-item-hover-text-decoration, var(--dropdown-menu-item-text-decoration));
 }
 @media (forced-colors: active) {
   .item__nS3PO {
     outline: 2px solid ButtonText;
     outline-offset: 0px;
   }
-  .item__nS3PO.selected__YFkZs, .item__nS3PO[data-preview=selected], .item__nS3PO.menu__dropdown-item--selected, .item__nS3PO:hover, .item__nS3PO.hover__Uh49s, .item__nS3PO[data-preview=hover], .item__nS3PO.menu__dropdown-item--hover {
+  .item__nS3PO.menu__dropdown-item--selected, .item__nS3PO:hover, .item__nS3PO.menu__dropdown-item--hover {
     outline: 3px solid Highlight;
     outline-offset: -2px;
   }
@@ -448,44 +422,18 @@
   display: block;
   text-align: var(--dropdown-menu-item-align);
 }
-.subItem__3ieV0.selected__YFkZs, .subItem__3ieV0[data-preview=selected], .subItem__3ieV0.menu__dropdown-sub-item--selected {
-  font: var(--sub-item-selected-font, var(--sub-item-font));
-  color: var(--sub-item-selected-color, var(--sub-item-color));
-  letter-spacing: var(--sub-item-selected-letter-spacing, var(--sub-item-letter-spacing));
-  line-height: var(--sub-item-selected-line-height, var(--sub-item-line-height));
+.subItem__3ieV0.menu__dropdown-sub-item--selected {
   text-decoration-line: var(--sub-item-selected-text-decoration, var(--sub-item-text-decoration));
-  text-transform: var(--sub-item-selected-text-transform, var(--sub-item-text-transform));
-  text-shadow: var(--sub-item-selected-text-outline, var(--sub-item-text-outline)), var(--sub-item-selected-text-shadow, var(--sub-item-text-shadow));
-  background: var(--sub-item-selected-background, var(--sub-item-background));
-  border-top: var(--sub-item-selected-border-top, var(--sub-item-border-top));
-  border-bottom: var(--sub-item-selected-border-bottom, var(--sub-item-border-bottom));
-  box-shadow: var(--sub-item-selected-box-shadow, var(--sub-item-box-shadow));
-}
-.subItem__3ieV0.selected__YFkZs .subItemLabel__v6zMr, .subItem__3ieV0[data-preview=selected] .subItemLabel__v6zMr, .subItem__3ieV0.menu__dropdown-sub-item--selected .subItemLabel__v6zMr {
-  background-color: var(--sub-item-selected-text-highlight, var(--sub-item-text-highlight));
-}
-.subItem__3ieV0:hover, .subItem__3ieV0.hover__Uh49s, .subItem__3ieV0[data-preview=hover], .subItem__3ieV0.menu__dropdown-sub-item--hover {
-  font: var(--sub-item-hover-font, var(--sub-item-font));
-  color: var(--sub-item-hover-color, var(--sub-item-color));
-  letter-spacing: var(--sub-item-hover-letter-spacing, var(--sub-item-letter-spacing));
-  line-height: var(--sub-item-hover-line-height, var(--sub-item-line-height));
-  text-decoration-line: var(--sub-item-hover-text-decoration, var(--sub-item-text-decoration));
-  text-transform: var(--sub-item-hover-text-transform, var(--sub-item-text-transform));
-  text-shadow: var(--sub-item-hover-text-outline, var(--sub-item-text-outline)), var(--sub-item-hover-text-shadow, var(--sub-item-text-shadow));
-  background: var(--sub-item-hover-background, var(--sub-item-background));
-  border-top: var(--sub-item-hover-border-top, var(--sub-item-border-top));
-  border-bottom: var(--sub-item-hover-border-bottom, var(--sub-item-border-bottom));
-  box-shadow: var(--sub-item-hover-box-shadow, var(--sub-item-box-shadow));
 }
-.subItem__3ieV0:hover .subItemLabel__v6zMr, .subItem__3ieV0.hover__Uh49s .subItemLabel__v6zMr, .subItem__3ieV0[data-preview=hover] .subItemLabel__v6zMr, .subItem__3ieV0.menu__dropdown-sub-item--hover .subItemLabel__v6zMr {
-  background-color: var(--sub-item-hover-text-highlight, var(--sub-item-text-highlight));
+.subItem__3ieV0:hover, .subItem__3ieV0.menu__dropdown-sub-item--hover {
+  text-decoration-line: var(--sub-item-hover-text-decoration, var(--sub-item-text-decoration));
 }
 @media (forced-colors: active) {
   .subItem__3ieV0 {
     outline: 2px solid ButtonText;
     outline-offset: 0px;
   }
-  .subItem__3ieV0.selected__YFkZs, .subItem__3ieV0[data-preview=selected], .subItem__3ieV0.menu__dropdown-sub-item--selected, .subItem__3ieV0:hover, .subItem__3ieV0.hover__Uh49s, .subItem__3ieV0[data-preview=hover], .subItem__3ieV0.menu__dropdown-sub-item--hover {
+  .subItem__3ieV0.menu__dropdown-sub-item--selected, .subItem__3ieV0:hover, .subItem__3ieV0.menu__dropdown-sub-item--hover {
     outline: 3px solid Highlight;
     outline-offset: -2px;
   }

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, a as ACTIONS, D as DATA, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
-import { e as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as states, p as presets } from "../chunks/constants27.js";
+import { c as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as states, p as presets } from "../chunks/constants27.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";

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

@@ -1,3 +1,4 @@
+import { Direction } from '@wix/editor-react-types';
 import { CorvidTypes } from '../../../types/vendored/editor-elements-types-corvid';
 import { DefaultCompPlatformProps } from '../../../types/vendored/editor-elements-types-thunderbolt';
 import { IReadOnlyPropSDK } from '../../../common/sdk/props-factories/readOnlyPropsSDKFactory';
@@ -79,6 +80,10 @@ export type ITextInputMapperProps = {
     label?: string;
     placeholder?: string;
     tooltip?: string;
+    description?: string;
+    direction?: Direction;
+    labelDirection?: Direction;
+    inputDirection?: Direction;
     readOnly: boolean;
     required: boolean;
     isDisabled: boolean;

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

@@ -6,6 +6,7 @@ import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
 import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
@@ -475,6 +476,7 @@ const input = "input__fyTfx";
 const hideNumberSpinner = "hideNumberSpinner__nYhia";
 const hasPrefix = "hasPrefix__RXMKp";
 const validationIndication = "validationIndication__GE20D";
+const helperText = "helperText__SfMAH";
 const label = "label__mbGIM";
 const labelRow = "labelRow__tN4T-";
 const tooltipButton = "tooltipButton__7D4vU";
@@ -490,6 +492,7 @@ const style = {
   hideNumberSpinner,
   hasPrefix,
   validationIndication,
+  helperText,
   label,
   labelRow,
   tooltipButton,
@@ -589,6 +592,10 @@ const TextInput = (props, ref) => {
     label: label2,
     tooltip: tooltip2,
     placeholder,
+    description,
+    direction,
+    labelDirection,
+    inputDirection,
     readOnly,
     required,
     isDisabled,
@@ -647,6 +654,13 @@ const TextInput = (props, ref) => {
       setSdkValue(boundValue);
     }
   }, [boundValue]);
+  const defaultValue = props.defaultValue;
+  React.useEffect(() => {
+    if (boundValue === void 0 && defaultValue !== void 0) {
+      setValue(defaultValue);
+      setSdkValue(defaultValue);
+    }
+  }, [defaultValue]);
   const isTextInputAutoFillFixExperimentEnabled = isExperimentOpen(
     "specs.thunderbolt.TextInputAutoFillFix"
   );
@@ -814,10 +828,16 @@ const TextInput = (props, ref) => {
       onMouseLeave(event);
     }
   };
-  const containerClasses = clsx(style.root, selectors.root, className, {
-    [style.hasLabel]: !!label2,
-    [style.validationIndication]: showErrorIndication
-  });
+  const containerClasses = clsx(
+    style.root,
+    selectors.root,
+    className,
+    !direction && directionStyles.fallbackDirection,
+    {
+      [style.hasLabel]: !!label2,
+      [style.validationIndication]: showErrorIndication
+    }
+  );
   const getMaxLength = () => {
     let updatedMaxLength = maxLength === null ? void 0 : maxLength;
     if (activePhoneFormat) {
@@ -830,11 +850,17 @@ const TextInput = (props, ref) => {
     ariaAttributes: { "aria-label": ariaLabel, ...restAriaAttributes }
   } = getAccessibilityAttributes({ ariaAttributes });
   const hasFocus = () => !!inputRef.current && inputRef.current === document.activeElement;
-  const inputClasses = clsx(style.input, HAS_CUSTOM_FOCUS_CLASSNAME, {
-    [style.hideNumberSpinner]: numberSpinnerHidden,
-    [style.hasPrefix]: !!prefix2
-  });
-  const labelClasses = clsx(style.label);
+  const descriptionId = description ? `description_${id}` : void 0;
+  const inputClasses = clsx(
+    style.input,
+    selectors.input,
+    HAS_CUSTOM_FOCUS_CLASSNAME,
+    {
+      [style.hideNumberSpinner]: numberSpinnerHidden,
+      [style.hasPrefix]: !!prefix2
+    }
+  );
+  const labelClasses = clsx(style.label, selectors.label);
   const textFieldProps = {
     value: formattedValue,
     onChange: getOnChangeFn({
@@ -863,13 +889,20 @@ const TextInput = (props, ref) => {
     max: max === null ? void 0 : max,
     className: inputClasses,
     id: `input_${id}`,
+    dir: inputDirection || void 0,
     onFocus,
     onKeyDown: onKeyPress,
     onBlur: _onBlur,
     "aria-invalid": isInvalid,
     ...ariaLabel && { "aria-label": ariaLabel },
     ...!required && { "aria-required": false },
-    ...restAriaAttributes
+    ...restAriaAttributes,
+    ...descriptionId || restAriaAttributes["aria-describedby"] ? {
+      "aria-describedby": [
+        restAriaAttributes["aria-describedby"],
+        descriptionId
+      ].filter(Boolean).join(" ")
+    } : {}
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -878,6 +911,7 @@ const TextInput = (props, ref) => {
       ...getDataAttributes(props),
       ref: contentRef,
       className: containerClasses,
+      dir: direction || void 0,
       "data-testid": dataTestId,
       onClick: _onClick,
       onDoubleClick: _onDblClick,
@@ -886,19 +920,27 @@ const TextInput = (props, ref) => {
       lang: language,
       children: /* @__PURE__ */ jsxs($bcdf0525bf22703d$export$2c73285ae9390cec, { ...textFieldProps, children: [
         (label2 || tooltip2) && /* @__PURE__ */ jsxs("div", { className: style.labelRow, children: [
-          label2 && /* @__PURE__ */ jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: labelClasses, htmlFor: `input_${id}`, children: [
-            label2,
-            required && /* @__PURE__ */ jsx(
-              RequiredIndicator,
-              {
-                className: clsx(
-                  style.requiredIndicator,
-                  selectors.requiredIndicator
-                ),
-                "data-testid": TestIds.requiredIndicator
-              }
-            )
-          ] }),
+          label2 && /* @__PURE__ */ jsxs(
+            $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            {
+              className: labelClasses,
+              htmlFor: `input_${id}`,
+              dir: labelDirection || void 0,
+              children: [
+                label2,
+                required && /* @__PURE__ */ jsx(
+                  RequiredIndicator,
+                  {
+                    className: clsx(
+                      style.requiredIndicator,
+                      selectors.requiredIndicator
+                    ),
+                    "data-testid": TestIds.requiredIndicator
+                  }
+                )
+              ]
+            }
+          ),
           tooltip2 && /* @__PURE__ */ jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, children: [
             /* @__PURE__ */ jsx(
               $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
@@ -913,9 +955,25 @@ const TextInput = (props, ref) => {
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: style.inputWrapper, children: [
-          prefix2 && /* @__PURE__ */ jsx("div", { className: style.prefix, "data-testid": "prefix", children: prefix2 }),
+          prefix2 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(style.prefix, selectors.prefix),
+              "data-testid": "prefix",
+              children: prefix2
+            }
+          ),
           /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { ...inputProps })
         ] }),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: descriptionId,
+            className: clsx(style.helperText, selectors.helperText),
+            "data-testid": "helper-text",
+            children: description
+          }
+        ),
         /* @__PURE__ */ jsx(
           InlineErrorMessage,
           {