@wix/editor-react-components 1.2290.0 → 1.2292.0

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

@@ -1,6 +1,6 @@
 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-JPMZBG44.js";
 import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants37.js";
-import { m as manifestFocusable, b as manifestMouseHover, c as manifestClickable } from "../chunks/manifestSdkMixins.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";
 const options = [

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

@@ -1,5 +1,5 @@
 import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, E as ELEMENTS, D as DATA, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { b as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants36.js";
 import manifest$1 from "../Image3/manifest.js";
 import { w as withSpec } from "../chunks/manifest.js";

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

@@ -2,7 +2,7 @@ import { L as LAYOUT, a as ACTIONS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { D as DesignStates, a as DisplayNames, h as homepageModeValues, d as defaultStateValues, b as separatorValues, c as componentMetadata, s as semanticClassNames } from "../chunks/constants35.js";
-import { b as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: componentMetadata.id,
   type: componentMetadata.type,

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

@@ -1,6 +1,6 @@
 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-JPMZBG44.js";
 import { D as DesignStates, b as DisplayNames } from "../chunks/constants20.js";
-import { m as manifestFocusable, b as manifestMouseHover, c as manifestClickable } from "../chunks/manifestSdkMixins.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";
 const displayConfig = {

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

@@ -1,7 +1,7 @@
 import { C as CSS_PROPERTIES, E as ELEMENTS, D as DATA, b as DISPLAY_GROUPS, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { D as DisplayNames, d as defaultValues, m as manifestClasses } from "../chunks/constants34.js";
 import { g as getSelector } from "../chunks/manifest.js";
-import { b as manifestMouseHover, c as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "1392cc2d-20e7-411a-8b60-6e0af55b8ece",
   type: "wixEditorElements.CollapsibleText",

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

@@ -2,7 +2,7 @@ import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, N as NativeStateTy
 import { D as DesignStates, f as DisplayNames, d as defaultValues, e as selectors } from "../chunks/constants32.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
-import { m as manifestFocusable, d as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "f49b3649-fff3-42b4-8e18-a3cd2b23c2eb",
   type: "wixEditorElements.Dropdown__DEV__v3",

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

@@ -1,6 +1,6 @@
 import { b as DISPLAY_GROUPS, D as DATA, M as MEDIA, a as ACTIONS, I as INTERACTIONS, A as Archetype, L as LAYOUT } from "../chunks/chunk-JPMZBG44.js";
 import { h as DisplayNames, i as MAP_STYLE_KEYS, j as defaultValues, a as MAX_ZOOM, M as MIN_ZOOM } from "../chunks/consts.js";
-import { b as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "bf8a38af-5784-47d5-92d3-3627a6a60bc6",
   type: "wixEditorElements.GoogleMap",

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

@@ -1,6 +1,6 @@
 var _a, _b;
 import { D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { b as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const DisplayNames = {
   root: {
     elementDisplayName: "HTML Element",

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

@@ -1,6 +1,6 @@
 import { a as ACTIONS, D as DATA, M as MEDIA, N as NativeStateType, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { D as DesignStates, p as presets, c as DisplayNames } from "../chunks/constants29.js";
-import { b as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 const manifest = {

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

@@ -1,7 +1,7 @@
 import { b as DISPLAY_GROUPS, E as ELEMENTS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { g as getSelector } from "../chunks/manifest.js";
 import { e as speedConstraints, f as playButtonDefaults, D as DisplayNames, r as rootDataDefaults, c as showButtonOnHoverDefaults, g as borderDefaultValue, i as initialSize, s as semanticSelectors } from "../chunks/constants27.js";
-import { m as manifestFocusable, b as manifestMouseHover, c as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "13165477-8205-4050-b078-424a1479159e",
   type: "wixEditorElements.Lottie",

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

@@ -2,7 +2,7 @@ import { E as ELEMENTS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeSta
 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/constants26.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
-import { b as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const dropdownItemConfig = {
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
   [ELEMENTS.ELEMENT_TYPE.inlineElement]: {

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

@@ -1,6 +1,6 @@
 import { b as DISPLAY_GROUPS, a as ACTIONS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { D as DESCRIPTIONS, a as DISPLAY_NAMES, s as selectors } from "../chunks/constants25.js";
-import { m as manifestFocusable, b as manifestMouseHover, c as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 import { g as getSelector } from "../chunks/manifest.js";
 const manifest = {
   id: "32d6f6fe-72ef-4490-82aa-d3b13cce6ef1",

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

@@ -1,6 +1,6 @@
 import { C as CSS_PROPERTIES, E as ELEMENTS, a as ACTIONS, D as DATA, N as NativeStateType, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { h as DesignStates, i as DisplayNames, j as DisplayConfig, D as DefaultValues, I as IconPositionOptions, k as PageToShareOptions, m as DefaultButtons, B as ButtonWidthOptions } from "../chunks/constants22.js";
-import { b as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 const presets = {

package/dist/site/components/SiteLogo/panels/customizeLogo/LogoColorPanel.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { SvgInfo } from '../../../SvgImage/SvgImage.types';
 import { Translations } from './translations';
 type LogoColorPanelProps = {
-    resolvedVectorArtData: SvgInfo;
+    resolvedVectorArtData?: SvgInfo | null;
     translations: Translations;
 };
 export declare const LogoColorPanel: React.FC<LogoColorPanelProps>;

package/dist/site/components/SiteLogo/panels/customizeLogo/utils.d.ts

@@ -1,4 +1,5 @@
 import { ElementDataInput, ElementImage, ElementVectorArt } from '@wix/editor';
+import { SvgInfo } from '../../../SvgImage/SvgImage.types';
 import { BUILDER_IMAGE_TYPE } from '../../../Logo/constants';
 export type SelectedLogoMedia = {
     uri?: string;
@@ -21,9 +22,11 @@ type SiteLogoData = {
     svgId: SiteLogoVectorArtData;
     image: SiteLogoImageData;
 };
-export type SiteLogoDataUpdate = ElementDataInput<Pick<SiteLogoData, 'mediaType' | 'svgId'>> | ElementDataInput<Pick<SiteLogoData, 'mediaType' | 'image'>>;
+export type SiteLogoDataUpdate = ElementDataInput<SiteLogoData>;
 export declare const SITE_LOGO_COLOR_STYLE_KEYS: string[];
-export declare const shouldResetSiteLogoColorStyles: (dataUpdate: SiteLogoDataUpdate | undefined) => boolean;
+export declare const getDefaultColorStyles: (resolvedData: SvgInfo) => Record<"svg-color-1" | "svg-color-2" | "svg-color-3" | "svg-color-4" | "svg-color-5" | "svg-color-6" | "svg-color-7" | "svg-color-8", string> | {
+    [x: string]: string;
+};
 export declare const getSelectedLogoUri: (selectedMedia: Array<SelectedLogoMedia> | undefined) => string | undefined;
 export declare const getSiteLogoDataUpdateFromSelectedMedia: (selectedMedia: Array<SelectedLogoMedia> | undefined) => SiteLogoDataUpdate | undefined;
 export declare const getSiteLogoDataUpdateFromLogoMakerUrl: (logoUrl: string | undefined) => SiteLogoDataUpdate | undefined;

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

@@ -1,7 +1,7 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, D as DATA, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { g as getSelector } from "../chunks/manifest.js";
 import { D as DisplayNames, a as semanticClassNames, b as slideshowCssCustomPropertiesDefaults, c as slideshowCssPropertiesDefaults, s as slideshowDataDefaults } from "../chunks/Slideshow.semanticClassNames.js";
-import { b as manifestMouseHover, c as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const navigationButtons = {
   elementType: ELEMENTS.ELEMENT_TYPE.refElement,
   refElement: {

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

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

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

@@ -1,5 +1,5 @@
 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-JPMZBG44.js";
-import { m as manifestFocusable, b as manifestMouseHover, c as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const DesignStates = {
   testCompCard: {
     hover: { displayName: "Hover", className: "test-comp-card--hover" },

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, N as NativeStateType, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { D as DisplayNames, d as defaultValues, b as DesignStates, s as selectors } from "../chunks/constants18.js";
+import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants18.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -76,6 +76,7 @@ export type ITextInputMapperProps = {
     inputType: TextInputType;
     label?: string;
     placeholder?: string;
+    tooltip?: string;
     readOnly: boolean;
     required: boolean;
     isDisabled: boolean;
@@ -85,6 +86,8 @@ export type ITextInputMapperProps = {
     prefix?: string;
     name?: string;
     autoComplete_?: TextInputAutocomplete | null;
+    autocompleteToken?: string;
+    minLength?: number | null;
     maxLength?: number | null;
     min?: number | null;
     max?: number | null;

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

@@ -585,7 +585,9 @@ const TextInput = (props, ref) => {
     pattern,
     autoComplete,
     autoComplete_,
+    autocompleteToken,
     maxLength,
+    minLength,
     min,
     max,
     step,
@@ -624,6 +626,13 @@ const TextInput = (props, ref) => {
   const [shouldShowValidityIndication, setValidityIndication] = React.useState(
     sdkValidityIndication
   );
+  const boundValue = props.value;
+  React.useEffect(() => {
+    if (boundValue !== void 0 && boundValue !== value) {
+      setValue(boundValue);
+      setSdkValue(boundValue);
+    }
+  }, [boundValue]);
   const isTextInputAutoFillFixExperimentEnabled = isExperimentOpen(
     "specs.thunderbolt.TextInputAutoFillFix"
   );
@@ -672,9 +681,10 @@ const TextInput = (props, ref) => {
     };
   });
   const valueChanged = React.useRef();
+  const activePhoneFormat = inputType === "tel" ? phoneFormat : "";
   const formattedValue = React.useMemo(() => {
-    return inputType === "tel" && phoneFormat ? formatPhoneNumber(value, phoneFormat) : value;
-  }, [value, phoneFormat, inputType]);
+    return activePhoneFormat ? formatPhoneNumber(value, activePhoneFormat) : value;
+  }, [value, activePhoneFormat]);
   const handleAutoFillChange = (event) => {
     if (isTextInputAutoFillFixExperimentEnabled && !hasFocus()) {
       onChange({
@@ -688,11 +698,11 @@ const TextInput = (props, ref) => {
     shouldCallOnInput
   }) => (newValue) => {
     let unformattedNumber = newValue;
-    if (phoneFormat) {
+    if (activePhoneFormat) {
       const didDeleteChars = newValue.length < formattedValue.length;
       unformattedNumber = getUnformattedNumber(
         newValue,
-        phoneFormat,
+        activePhoneFormat,
         didDeleteChars
       );
       if (hasNonNumericChar(unformattedNumber)) {
@@ -717,7 +727,7 @@ const TextInput = (props, ref) => {
     }
     if (shouldCallOnInput) {
       const syntheticEvent = {
-        target: { value },
+        target: { value: unformattedNumber },
         type: "input"
       };
       onInput(syntheticEvent);
@@ -771,12 +781,12 @@ const TextInput = (props, ref) => {
   });
   const getMaxLength = () => {
     let updatedMaxLength = maxLength === null ? void 0 : maxLength;
-    if (phoneFormat) {
-      updatedMaxLength = phoneFormat.length;
+    if (activePhoneFormat) {
+      updatedMaxLength = activePhoneFormat.length;
     }
     return updatedMaxLength;
   };
-  const getMinLength = () => phoneFormat ? phoneFormat.length : void 0;
+  const getMinLength = () => activePhoneFormat ? activePhoneFormat.length : minLength ?? void 0;
   const {
     ariaAttributes: { "aria-label": ariaLabel, ...restAriaAttributes }
   } = getAccessibilityAttributes({ ariaAttributes });
@@ -807,7 +817,7 @@ const TextInput = (props, ref) => {
     pattern,
     maxLength: getMaxLength(),
     minLength: getMinLength(),
-    autoComplete: autoComplete ? "on" : autoComplete_ || "off",
+    autoComplete: autoComplete ? autocompleteToken || "on" : autoComplete_ || "off",
     step: step === null ? void 0 : step,
     min: min === null ? void 0 : min,
     max: max === null ? void 0 : max,

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

@@ -0,0 +1,4 @@
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+import { default as TextInput } from './TextInput';
+export default TextInput;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

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

@@ -1,6 +1,26 @@
 export declare const selectors: {
     readonly root: "textInput";
 };
+export declare const DesignStates: {
+    readonly root: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "textInput--hover";
+        };
+        readonly focus: {
+            readonly displayName: "Focus";
+            readonly className: "textInput--focus";
+        };
+        readonly error: {
+            readonly displayName: "Error";
+            readonly className: "textInput--error";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "textInput--disabled";
+        };
+    };
+};
 export declare const DisplayNames: {
     root: {
         elementDisplayName: string;
@@ -20,6 +40,12 @@ export declare const DisplayNames: {
         inputAlign: string;
     };
     data: {
+        value: string;
+        isDisabled: string;
+        name: string;
+        minLength: string;
+        autocompleteToken: string;
+        numberSpinnerHidden: string;
         labelDirection: string;
         inputDirection: string;
         inputType: string;
@@ -30,6 +56,7 @@ export declare const DisplayNames: {
         phoneFormat: string;
         label: string;
         placeholder: string;
+        tooltip: string;
         autoComplete: string;
         readOnly: string;
         required: string;

package/dist/site/components/TextInput/css.css

@@ -103,15 +103,15 @@
   opacity: 0.6;
 }
 .root__zQlRz .input__fyTfx:hover {
-  background-color: #ffffff;
-  border-color: #a3d9f6;
-  border-width: 1px;
+  background-color: var(--hoverBackground, #ffffff);
+  border-color: var(--hoverBorderColor, #a3d9f6);
+  border-width: var(--hoverBorderWidth, 1px);
 }
 .root__zQlRz .input__fyTfx:disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #e3e3e3;
-  border-width: 1px;
+  background-color: var(--disabledBackground, #f5f5f5);
+  color: var(--disabledTextColor, #999);
+  border-color: var(--disabledBorderColor, #e3e3e3);
+  border-width: var(--disabledBorderWidth, 1px);
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -128,9 +128,32 @@
   padding-inline-end: calc(var(--textPaddingInlineEnd) + var(--prefixWidth));
 }
 .root__zQlRz:not(.validation-indication__QMvkt) .input__fyTfx:focus {
-  background-color: #ffffff;
-  border-color: #a3d9f6;
-  border-width: 1px;
+  background-color: var(--focusBackground, #ffffff);
+  border-color: var(--focusBorderColor, #a3d9f6);
+  border-width: var(--focusBorderWidth, 1px);
+}
+.root__zQlRz.textInput--hover .input__fyTfx {
+  background-color: var(--hoverBackground, #ffffff);
+  border-color: var(--hoverBorderColor, #a3d9f6);
+  border-width: var(--hoverBorderWidth, 1px);
+}
+.root__zQlRz.textInput--focus .input__fyTfx {
+  background-color: var(--focusBackground, #ffffff);
+  border-color: var(--focusBorderColor, #a3d9f6);
+  border-width: var(--focusBorderWidth, 1px);
+}
+.root__zQlRz.textInput--error .input__fyTfx {
+  background-color: var(--errorBackground, #ffffff);
+  border-color: var(--errorBorderColor, #e3e3e3);
+  border-width: var(--errorBorderWidth, 1px);
+}
+.root__zQlRz.textInput--disabled .input__fyTfx {
+  background-color: var(--disabledBackground, #f5f5f5);
+  color: var(--disabledTextColor, #999);
+  border-color: var(--disabledBorderColor, #e3e3e3);
+  border-width: var(--disabledBorderWidth, 1px);
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 .root__zQlRz.validation-indication__QMvkt .input__fyTfx:invalid {
   background-color: #ffffff;
@@ -162,7 +185,7 @@
   color: var(--requiredTextColor);
 }
 .root__zQlRz.validationIndication__GE20D .input__fyTfx:invalid {
-  background-color: #ffffff;
-  border-color: #e3e3e3;
-  border-width: 1px;
+  background-color: var(--errorBackground, #ffffff);
+  border-color: var(--errorBorderColor, #e3e3e3);
+  border-width: var(--errorBorderWidth, 1px);
 }

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

@@ -1,6 +1,8 @@
-import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { D as DisplayNames, s as selectors } from "../chunks/constants3.js";
-import { g as getSelector } from "../chunks/manifest.js";
+import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DisplayNames, a as DesignStates, s as selectors } from "../chunks/constants3.js";
+import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
+import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
+import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "b8f7e3d2-4a5c-4e8f-9b2d-1c3e5f7a9b4d",
   type: "wixEditorElements.TextInput",
@@ -24,6 +26,9 @@ const manifest = {
     },
     sdk: {
       url: "./site/components/TextInput/sdk.ts"
+    },
+    editor: {
+      componentUrl: "./site/components/TextInput/component.preview.tsx"
     }
   },
   editorElement: {
@@ -36,7 +41,59 @@ const manifest = {
       disableStretching: false,
       disablePositioning: false
     },
+    states: {
+      hover: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.hover.displayName,
+        className: DesignStates.root.hover.className,
+        pseudoClass: NativeStateType.hover
+      }),
+      focus: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.focus.displayName,
+        className: DesignStates.root.focus.className,
+        pseudoClass: NativeStateType.focus
+      }),
+      error: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.error.displayName,
+        className: DesignStates.root.error.className
+      }),
+      disabled: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.disabled.displayName,
+        className: DesignStates.root.disabled.className,
+        pseudoClass: NativeStateType.disabled,
+        props: { isDisabled: true }
+      })
+    },
     displayGroups: {
+      orderedDataGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "required",
+            "readOnly",
+            "isDisabled",
+            "autoComplete",
+            "numberSpinnerHidden",
+            "inputType",
+            "label",
+            "placeholder",
+            "tooltip",
+            "prefix",
+            "autocompleteToken",
+            "pattern",
+            "minLength",
+            "maxLength",
+            "min",
+            "max",
+            "step",
+            "phoneFormat",
+            "errorMessageType"
+          ]
+        }
+      },
       textPaddingGroup: {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
         padding: {
@@ -310,6 +367,19 @@ const manifest = {
       }
     },
     data: {
+      value: {
+        displayName: DisplayNames.data.value,
+        dataType: DATA.DATA_TYPE.text
+      },
+      isDisabled: {
+        displayName: DisplayNames.data.isDisabled,
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      name: {
+        displayName: DisplayNames.data.name,
+        dataType: DATA.DATA_TYPE.text
+      },
       // Direction properties
       direction: {
         dataType: DATA.DATA_TYPE.direction
@@ -338,6 +408,13 @@ const manifest = {
         }
       },
       // Validation properties
+      minLength: {
+        displayName: DisplayNames.data.minLength,
+        dataType: DATA.DATA_TYPE.number,
+        [DATA.DATA_TYPE.number]: {
+          min: "0"
+        }
+      },
       maxLength: {
         displayName: DisplayNames.data.maxLength,
         dataType: DATA.DATA_TYPE.number
@@ -388,6 +465,13 @@ const manifest = {
           maxLength: 4e3
         }
       },
+      tooltip: {
+        displayName: DisplayNames.data.tooltip,
+        dataType: DATA.DATA_TYPE.text,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 400
+        }
+      },
       // Accessibility
       a11y: {
         dataType: DATA.DATA_TYPE.a11y,
@@ -434,7 +518,22 @@ const manifest = {
       step: {
         displayName: DisplayNames.data.step,
         dataType: DATA.DATA_TYPE.number
-      }
+      },
+      autocompleteToken: {
+        displayName: DisplayNames.data.autocompleteToken,
+        dataType: DATA.DATA_TYPE.text,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 50
+        }
+      },
+      numberSpinnerHidden: {
+        displayName: DisplayNames.data.numberSpinnerHidden,
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      ...manifestChangeable(),
+      ...manifestInputable(),
+      ...manifestFocusable()
     },
     interactions: {
       triggers: [

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

@@ -65,10 +65,10 @@ const semanticClassNames = {
   label: "textbox__label"
 };
 export {
-  DisplayNames as D,
+  DesignStates as D,
   TestIds as T,
   semanticClassNames as a,
-  DesignStates as b,
+  DisplayNames as b,
   defaultValues as d,
   selectors as s
 };

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

@@ -1,6 +1,14 @@
 const selectors = {
   root: "textInput"
 };
+const DesignStates = {
+  root: {
+    hover: { displayName: "Hover", className: "textInput--hover" },
+    focus: { displayName: "Focus", className: "textInput--focus" },
+    error: { displayName: "Error", className: "textInput--error" },
+    disabled: { displayName: "Disabled", className: "textInput--disabled" }
+  }
+};
 const DisplayNames = {
   root: {
     elementDisplayName: "TextInput"
@@ -20,6 +28,12 @@ const DisplayNames = {
     inputAlign: "Input alignment"
   },
   data: {
+    value: "Value",
+    isDisabled: "Disabled",
+    name: "Name",
+    minLength: "Minimum length",
+    autocompleteToken: "Autocomplete type",
+    numberSpinnerHidden: "Hide number spinner",
     labelDirection: "Label direction",
     inputDirection: "Input direction",
     inputType: "Input type",
@@ -30,6 +44,7 @@ const DisplayNames = {
     phoneFormat: "Phone format",
     label: "Label text",
     placeholder: "Placeholder text",
+    tooltip: "Tooltip",
     autoComplete: "Autocomplete",
     readOnly: "Read only",
     required: "Required",
@@ -53,5 +68,6 @@ const DisplayNames = {
 };
 export {
   DisplayNames as D,
+  DesignStates as a,
   selectors as s
 };

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

@@ -86,8 +86,8 @@ function manifestMouseHover(names = {}) {
 }
 export {
   manifestChangeable as a,
-  manifestMouseHover as b,
-  manifestClickable as c,
-  manifestInputable as d,
+  manifestInputable as b,
+  manifestMouseHover as c,
+  manifestClickable as d,
   manifestFocusable as m
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2290.0",
+  "version": "1.2292.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -186,5 +186,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "e0ccca1f91a2c8fd6c427763bf87f3c32fe0126ef0096001c15f1f0d"
+  "falconPackageHash": "0f66f999f586627bef3f3a028f1ef69c894672951f4c4f5f30d83d0f"
 }