@wix/editor-react-components 1.2355.0 → 1.2357.0

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

@@ -4,7 +4,7 @@ import React__default, { createContext, useEffect, useMemo, useRef, useState, us
 import { c as clsx } from "../chunks/clsx.js";
 import { v as $fe16bffc7a557bf0$export$7f54fc3180508a52, H as $390e54f620492c70$export$b4cc09c592e8fdb8, B as $e8ac3c3f5d4bae7f$export$d6875122194c7b44, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, y as $d27d541f9569d26d$export$45712eceda6fad21, N as $1969ac565cfec8d0$export$de79e2c695e052f3, u as $8f5a2122b0992be3$export$630ff653c5ada6a9, l as $23f2114a1b82827e$export$cd4e5573fbe2b576, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, k as $23f2114a1b82827e$export$4282f70798064fe0, K as $23f2114a1b82827e$export$b4f377a2b6254582, r as $d447af545b77c9f1$export$f21a1ffae260145a, j as $6a20a7989e6c817a$export$98658e8c59125e6a, m as $d447af545b77c9f1$export$b204af158042fbac, A as $390e54f620492c70$export$f680877a34711e37, z as $2c9edc598a03d523$export$420e68273165f4ec, O as $24f9a20f226ad820$export$5165eccb35aaadb5, q as $c4867b2f328c2698$export$e5c5a5f917a5871c, p as $f192c2f16961cbe0$export$80f3e147d781571c, w as $2add3ce32c6007eb$export$fedb369cb70207f1, P as $2b2d34ff061957fb$export$2b85b721e524d74b, Q as $a4e76a5424781910$export$e08e3b67e392101e, c as $3e6197669829fe11$export$40bfa8c7b0832715, R as $d2b4bc8c273e7be6$export$24d547caef80ccd1, E as $e969f22b6713ca4a$export$ae780daf29e6d456, D as $0c4a58759813079a$export$4e328f61c538687f, i as $a049562f99e7db0e$export$f9c6924e160136d1, h as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
 import { a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, k as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7, n as $c7eafbbe1ea5834e$export$535bd6ca7f90a273, c as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a, d as $64fa3d84918910a7$export$fabf2dc03a41866e, o as $f39a9eba43920ace$export$b5d7cc18bb8d2b59, m as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, p as $3ef42575df84b30b$export$9d1611c77c2fe928, q as $64fa3d84918910a7$export$c62b8e45d58ddad9, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/filterDOMProps.js";
-import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, n as $fd2148440a13ec26$export$a763b9476acd3eb, o as $fd2148440a13ec26$export$dad6ae84456c676a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, p as $72abaeab4d80592f$export$9fc1347d4195ccb3, q as $b3526bc71400be8d$export$d39e1813b3bdd0e1, r as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, i as $514c0188e459b4c0$export$9afb8bc826b033ea, s as $d3f049242431219c$export$45fda7c47f93fd48, t as $d3f049242431219c$export$6d3443f2c48bfc20, v as $44f671af83e7d9e0$export$2de4954e8ae13b9f, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, u as useValidatedField, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/useValidatedField.js";
+import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, n as $fd2148440a13ec26$export$a763b9476acd3eb, o as $fd2148440a13ec26$export$dad6ae84456c676a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, p as $72abaeab4d80592f$export$9fc1347d4195ccb3, q as $b3526bc71400be8d$export$d39e1813b3bdd0e1, r as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, i as $514c0188e459b4c0$export$9afb8bc826b033ea, s as $d3f049242431219c$export$45fda7c47f93fd48, t as $d3f049242431219c$export$6d3443f2c48bfc20, u as $44f671af83e7d9e0$export$2de4954e8ae13b9f, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/Tooltip.js";
 import { d as $60f33508b4cd9d3b$export$85fd5fdf27bacc79, e as $ad063034c8620db8$export$ea39ec197993aef0, f as $ad063034c8620db8$export$a5a3b454ada2268e, g as $ad063034c8620db8$export$a2258d9c4118825c, h as $a46cf152bb926da5$export$a9b970dcc4ae71a9, i as $9c268ab73a5d55e5$export$722debc0e56fea39, j as $ad063034c8620db8$export$91b62ebf2ba703ee, k as $ad063034c8620db8$export$629b0a497aa65267, l as $121970af65029459$export$f8aeda7b10753fa1, m as $51a3e22a5186a962$export$c826860796309d1b, n as $3578607fe3d4b096$export$cfa2225e87938781, o as $ad063034c8620db8$export$42c81a444fbfb5d4, p as $ad063034c8620db8$export$d0bdf45af03a6ea3, q as $ad063034c8620db8$export$ccc1b2479e7dd654, r as $600b3cf69ae46262$export$90fc3a17d93f704c, s as $654b97e09f2a30c1$export$4d0f8be8b12a7ef6, t as $6a440d0e2d99dd46$export$4a931266a3838b86, u as $535772f9d2c1f38d$export$c5251b9e124bf29, v as $7541913c0284d84b$export$300019f83c56d282, w as $0014db39426443c5$exports, x as $7541913c0284d84b$export$7b3062cd49e80452, y as $535772f9d2c1f38d$export$20e40289641fbbb6, z as $535772f9d2c1f38d$export$1258395f99bf9cbf, A as $901761b40e390936$export$2bb74740c4e19def, B as $ad063034c8620db8$export$a75f2bff57811055, C as $d07e34cce18680fd$export$93522d1a439f3617, D as $ad063034c8620db8$export$5c333a116e949cdd, E as $ad063034c8620db8$export$f91e89d3d0406102, F as $12a3c853105e5a70$export$ad991b66133851cf, G as $d07e34cce18680fd$export$b4a036af3fc0b032, H as $ad063034c8620db8$export$dbc69fd56b53d5e, I as $ad063034c8620db8$export$2061056d06d7cdf7, J as $ad063034c8620db8$export$ef8b6d9133084f4e, K as $93635573935797de$export$80ee6245ec4f29ec, L as $8b141f2f71e88f85$export$2440da353cedad43, M as $8b141f2f71e88f85$export$f18627323ab57ac0, N as $8b141f2f71e88f85$export$7e319ea407e63bc0, O as $8b141f2f71e88f85$export$c5221a78ef73c5e9, P as $d07e34cce18680fd$export$b21e0b124e224484, Q as $8b141f2f71e88f85$export$80ff8fc0ae339c13, R as $84102b64e5ca022f$export$dd0bbc9b26defe37, S as $ad063034c8620db8$export$a18c89cbd24170ff, T as $58246871e4652552$export$588937bcd60ade55, U as $58246871e4652552$export$6b862160d295c8e, V as $40825cdb76e74f70$export$7b3e670c86da5fe8, W as $ad063034c8620db8$export$aa8b41735afcabd2, X as $2aaf608024c21ca1$export$680ea196effce5f, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f } from "../chunks/DateField.js";
 import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLocalizedStringFormatter.js";
 import { $ as $ea3928288112382f$export$439d29a4e110a164, a as $ea3928288112382f$export$a966af930f325cab } from "../chunks/VisuallyHidden.js";
@@ -16,6 +16,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, D as DesignStates, A as ARIA_LABEL_NAMESPACE, d as defaultValues, S as SelectionModeValues, G as GranularityValues, V as VALUE_MISSING_MESSAGE, a as AriaLabels } from "../chunks/constants34.js";
+import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { I as InfoCircleSmall_default, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 createContext(null);

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

@@ -1,8 +1,9 @@
 import { A11y, Direction } from '@wix/editor-react-types';
 import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { FieldValidationProps } from '../../../utils/validation/types';
 import { RadioButtonsDefaultSelection, RadioButtonsOption } from './constants';
 export type { RadioButtonsOption } from './constants';
-export type RadioButtonsProps = SdkFunctionFocusableProps & {
+export type RadioButtonsProps = SdkFunctionFocusableProps & FieldValidationProps<string> & {
     id: string;
     className: string;
     options: Array<RadioButtonsOption>;

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

@@ -1,15 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useId } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { a as Fieldset, T as Tooltip, R as RadioGroup_RadioGroup_RadioGroup, b as Radio } from "../chunks/index10.js";
-import "react";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { d as defaultValues, a as defaultOptions, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants24.js";
+import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants24.js";
 const root = "root__4SkBh";
 const fieldset = "fieldset__2OxuS";
 const labelRow = "labelRow__xKUgE";
@@ -21,6 +22,7 @@ const option = "option__hEAm9";
 const control = "control__w6l6-";
 const indicator = "indicator__m9-hW";
 const label = "label__bJi-o";
+const errorMessage = "errorMessage__F6jDK";
 const styles = {
   root,
   fieldset,
@@ -32,7 +34,8 @@ const styles = {
   option,
   control,
   indicator,
-  label
+  label,
+  errorMessage
 };
 const noop = () => {
 };
@@ -49,6 +52,10 @@ function RadioButtonsComponent(props) {
     onChange = noop,
     onFocus = noop,
     onBlur = noop,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange,
     wix
   } = props;
   const sourceOptions = Array.isArray(props.options) && props.options.length ? props.options : defaultOptions;
@@ -63,12 +70,37 @@ function RadioButtonsComponent(props) {
   const required = props.required ?? defaultValues.required;
   const disabled = props.disabled ?? defaultValues.disabled;
   const isControlled = props.value !== void 0;
-  const selectionProps = isControlled ? { value: props.value } : {
-    defaultValue: firstSelectedByDefault === "first" ? (_a = options[0]) == null ? void 0 : _a.value : void 0
-  };
+  const defaultSelectedValue = firstSelectedByDefault === "first" ? (_a = options[0]) == null ? void 0 : _a.value : void 0;
+  const selectionProps = isControlled ? { value: props.value } : { defaultValue: defaultSelectedValue };
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultSelectedValue);
+  const currentValue = isControlled ? props.value : uncontrolledValue;
+  const intrinsic = required && !disabled && !readOnly && !currentValue ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: handleValidationBlur
+  } = useValidatedField({
+    value: currentValue ?? "",
+    intrinsic,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange
+  });
+  const isInvalid = showIndication && !validity.valid;
+  const errorId = useId();
   const handleValueChange = (next) => {
+    if (!isControlled) {
+      setUncontrolledValue(next);
+    }
     onChange(next);
   };
+  const handleBlur = (event) => {
+    onBlur(event);
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      handleValidationBlur();
+    }
+  };
   const hasLegend = !!label2;
   const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
@@ -134,11 +166,13 @@ function RadioButtonsComponent(props) {
             disabled,
             readOnly,
             "aria-required": required || void 0,
+            "aria-invalid": isInvalid || void 0,
+            "aria-describedby": isInvalid && validity.validationMessage ? errorId : void 0,
             "aria-label": ariaLabel,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,
-            onBlur,
+            onBlur: handleBlur,
             children: options.map((option2, index) => /* @__PURE__ */ jsxs(
               "label",
               {
@@ -154,6 +188,7 @@ function RadioButtonsComponent(props) {
                       value: option2.value,
                       readOnly,
                       disabled: disabled || !!option2.disabled,
+                      "data-invalid": isInvalid || void 0,
                       className: clsx(
                         styles.control,
                         selectors.radio,
@@ -191,6 +226,18 @@ function RadioButtonsComponent(props) {
               option2.value || index
             ))
           }
+        ),
+        isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: errorId,
+            className: clsx(
+              styles.errorMessage,
+              formatClassNames(semanticClassNames.errorMessage)
+            ),
+            "data-testid": TestIds.errorMessage,
+            children: validity.validationMessage
+          }
         )
       ] })
     }

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

@@ -79,6 +79,7 @@ export declare const defaultValues: {
     readonly readOnly: false;
     readonly disabled: false;
 };
+export declare const VALUE_MISSING_MESSAGE = "This field is required";
 export declare const TestIds: {
     readonly root: "radio-buttons-root";
     readonly group: "radio-buttons-group";
@@ -89,6 +90,7 @@ export declare const TestIds: {
     readonly control: "radio-buttons-control";
     readonly indicator: "radio-buttons-indicator";
     readonly optionLabel: "radio-buttons-option-label";
+    readonly errorMessage: "radio-buttons-error-message";
 };
 export declare const selectors: {
     readonly root: "radio-buttons";
@@ -105,4 +107,5 @@ export declare const semanticClassNames: {
     readonly radio: "radio-buttons__radio";
     readonly indicator: "radio-buttons__indicator";
     readonly label: "radio-buttons__label";
+    readonly errorMessage: "radio-buttons__error-message";
 };

package/dist/site/components/RadioButtons/css.css

@@ -160,6 +160,12 @@
 .label__bJi-o {
   cursor: pointer;
   margin-bottom: 0;
+}
+
+.errorMessage__F6jDK {
+  align-self: var(--alignment, flex-start);
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: var(--errorTextColor, #e62214);
 }.radio-buttons {
   --radiosSpacing: 6px;
   --labelSpacing: 16px;

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

@@ -3,6 +3,7 @@ import { D as DesignStates, c as DisplayNames, d as defaultValues, s as selector
 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";
+import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
   id: "01a3965d-95d7-49e2-903a-3a496de97054",
   type: "wixEditorElements.RadioButtons__DEV__v3",
@@ -119,7 +120,8 @@ const manifest = {
         dataType: DATA.DATA_TYPE.direction
       },
       ...manifestChangeable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
     },
     displayGroups: {
       optionsGroup: {

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

@@ -1,6 +1,7 @@
 import { A11y, Direction } from '@wix/editor-react-types';
 import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
-export type TextBoxProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & {
+import { FieldValidationProps } from '../../../utils/validation/types';
+export type TextBoxProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & FieldValidationProps<string> & {
     id: string;
     className: string;
     value?: string;

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { F as Field, T as Tooltip, I as Input_Input_Input } from "../chunks/index10.js";
-import "react";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
@@ -9,9 +9,11 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { d as defaultValues, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants18.js";
+import { d as defaultValues, s as selectors, T as TestIds, V as VALIDATION_MESSAGES, a as semanticClassNames } from "../chunks/constants18.js";
+import { u as useValidatedField } from "../chunks/useValidatedField.js";
 const root = "root__dlp5n";
 const field = "field__i7dfL";
+const errorMessage = "errorMessage__K0qsG";
 const labelRow = "labelRow__qwrwd";
 const label = "label__GIRwe";
 const description = "description__--0WR";
@@ -21,6 +23,7 @@ const input = "input__JG8Be";
 const styles = {
   root,
   field,
+  errorMessage,
   labelRow,
   label,
   description,
@@ -46,14 +49,61 @@ function TextBoxComponent(props) {
     maxLength,
     direction,
     a11y,
+    fieldValidity,
+    showValidityIndication,
     onChange = noop,
     onFocus = noop,
     onBlur = noop,
+    onValidate,
+    onValidityChange,
     wix
   } = props;
   const isControlled = props.value !== void 0;
   const defaultValue = props.defaultValue ?? defaultValues.defaultValue;
-  const handleValueChange = (next) => onChange(next);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const value = isControlled ? props.value ?? "" : uncontrolledValue;
+  const handleValueChange = (next) => {
+    if (!isControlled) {
+      setUncontrolledValue(next);
+    }
+    onChange(next);
+  };
+  let intrinsic = { valid: true, validationMessage: "" };
+  if (disabled || readOnly) {
+    intrinsic = { valid: true, validationMessage: "" };
+  } else if (required && value.length === 0) {
+    intrinsic = {
+      valid: false,
+      validationMessage: VALIDATION_MESSAGES.valueMissing
+    };
+  } else if (minLength != null && value.length > 0 && value.length < minLength) {
+    intrinsic = {
+      valid: false,
+      validationMessage: VALIDATION_MESSAGES.tooShort(minLength)
+    };
+  } else if (maxLength != null && value.length > maxLength) {
+    intrinsic = {
+      valid: false,
+      validationMessage: VALIDATION_MESSAGES.tooLong(maxLength)
+    };
+  }
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: handleValidationBlur
+  } = useValidatedField({
+    value,
+    intrinsic,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange
+  });
+  const isInvalid = showIndication && !validity.valid;
+  const handleBlur = (event) => {
+    onBlur(event);
+    handleValidationBlur();
+  };
   const hasLabel = !!label2;
   const hasTooltip = !!tooltip2;
   const ariaLabel = !hasLabel ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
@@ -73,80 +123,100 @@ function TextBoxComponent(props) {
       dir: direction,
       lang: environmentService.language,
       "data-testid": TestIds.root,
-      children: /* @__PURE__ */ jsxs(Field.Root, { className: styles.field, disabled, children: [
-        (hasLabel || hasTooltip) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
-          hasLabel && /* @__PURE__ */ jsxs(
-            Field.Label,
-            {
-              className: clsx(
-                styles.label,
-                selectors.label,
-                formatClassNames(semanticClassNames.label)
+      children: /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          className: styles.field,
+          disabled,
+          invalid: isInvalid,
+          children: [
+            (hasLabel || hasTooltip) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
+              hasLabel && /* @__PURE__ */ jsxs(
+                Field.Label,
+                {
+                  className: clsx(
+                    styles.label,
+                    selectors.label,
+                    formatClassNames(semanticClassNames.label)
+                  ),
+                  "data-testid": TestIds.label,
+                  children: [
+                    label2,
+                    required && /* @__PURE__ */ jsx(
+                      RequiredIndicator,
+                      {
+                        className: formatClassNames(
+                          semanticClassNames.requiredIndicator
+                        ),
+                        "data-testid": TestIds.requiredIndicator
+                      }
+                    )
+                  ]
+                }
               ),
-              "data-testid": TestIds.label,
-              children: [
-                label2,
-                required && /* @__PURE__ */ jsx(
-                  RequiredIndicator,
+              hasTooltip && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+                /* @__PURE__ */ jsx(
+                  Tooltip.Trigger,
                   {
-                    className: formatClassNames(
-                      semanticClassNames.requiredIndicator
-                    ),
-                    "data-testid": TestIds.requiredIndicator
+                    type: "button",
+                    className: styles.tooltipButton,
+                    "data-testid": TestIds.tooltipButton,
+                    "aria-label": tooltip2,
+                    children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
                   }
-                )
-              ]
-            }
-          ),
-          hasTooltip && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+                ),
+                /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
+              ] }) })
+            ] }),
             /* @__PURE__ */ jsx(
-              Tooltip.Trigger,
+              Input_Input_Input,
               {
-                type: "button",
-                className: styles.tooltipButton,
-                "data-testid": TestIds.tooltipButton,
-                "aria-label": tooltip2,
-                children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
+                render: /* @__PURE__ */ jsx("textarea", {}),
+                className: clsx(
+                  styles.input,
+                  selectors.input,
+                  formatClassNames(semanticClassNames.input)
+                ),
+                ...isControlled ? { value: props.value } : { defaultValue },
+                onValueChange: handleValueChange,
+                readOnly,
+                required,
+                placeholder,
+                minLength: minLength ?? void 0,
+                maxLength: maxLength ?? void 0,
+                "aria-label": ariaLabel,
+                "data-testid": TestIds.input,
+                onFocus,
+                onBlur: handleBlur
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Input_Input_Input,
-          {
-            render: /* @__PURE__ */ jsx("textarea", {}),
-            className: clsx(
-              styles.input,
-              selectors.input,
-              formatClassNames(semanticClassNames.input)
-            ),
-            ...isControlled ? { value: props.value } : { defaultValue },
-            onValueChange: handleValueChange,
-            readOnly,
-            required,
-            placeholder,
-            minLength: minLength ?? void 0,
-            maxLength: maxLength ?? void 0,
-            "aria-label": ariaLabel,
-            "data-testid": TestIds.input,
-            onFocus,
-            onBlur
-          }
-        ),
-        description2 && /* @__PURE__ */ jsx(
-          Field.Description,
-          {
-            className: clsx(
-              styles.description,
-              selectors.description,
-              formatClassNames(semanticClassNames.description)
+            description2 && /* @__PURE__ */ jsx(
+              Field.Description,
+              {
+                className: clsx(
+                  styles.description,
+                  selectors.description,
+                  formatClassNames(semanticClassNames.description)
+                ),
+                "data-testid": TestIds.description,
+                children: description2
+              }
             ),
-            "data-testid": TestIds.description,
-            children: description2
-          }
-        )
-      ] })
+            isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
+              Field.Error,
+              {
+                match: true,
+                className: clsx(
+                  styles.errorMessage,
+                  formatClassNames(semanticClassNames.errorMessage)
+                ),
+                "data-testid": TestIds.errorMessage,
+                children: validity.validationMessage
+              }
+            )
+          ]
+        }
+      )
     }
   ) });
 }

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

@@ -75,6 +75,11 @@ export declare const defaultValues: {
     readonly readOnly: false;
     readonly disabled: false;
 };
+export declare const VALIDATION_MESSAGES: {
+    readonly valueMissing: "This field is required";
+    readonly tooShort: (minLength: number) => string;
+    readonly tooLong: (maxLength: number) => string;
+};
 export declare const TestIds: {
     readonly root: "textbox-root";
     readonly input: "textbox-input";
@@ -82,6 +87,7 @@ export declare const TestIds: {
     readonly requiredIndicator: "textbox-required-indicator";
     readonly tooltipButton: "textbox-tooltip-button";
     readonly description: "textbox-description";
+    readonly errorMessage: "textbox-error-message";
 };
 export declare const selectors: {
     readonly root: "textbox";
@@ -95,4 +101,5 @@ export declare const semanticClassNames: {
     readonly label: "textbox__label";
     readonly requiredIndicator: "textbox__required-indicator";
     readonly description: "textbox__description";
+    readonly errorMessage: "textbox__error-message";
 };

package/dist/site/components/TextBox/css.css

@@ -13,6 +13,11 @@
   min-height: 100%;
 }
 
+.errorMessage__K0qsG {
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: var(--errorTextColor, #ff4040);
+}
+
 .root__dlp5n .field__i7dfL {
   gap: 0;
 }
@@ -34,8 +39,8 @@
 .description__--0WR {
   margin: 0;
   margin-block-start: var(--descriptionSpacing, 6px);
-  font: var(--wst-paragraph-3-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
-  color: var(--wst-paragraph-2-color, #2b2b2b);
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: #2b2b2b;
 }
 
 .tooltipButton__tOobd {
@@ -70,9 +75,9 @@
 .tooltip__6OlB9 {
   max-width: 220px;
   padding: 6px 10px;
-  font: var(--wst-paragraph-2-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
-  color: var(--wst-primary-background-color, #fff);
-  background: var(--wst-paragraph-2-color, #2b2b2b);
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: #fff;
+  background: #2b2b2b;
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 }
@@ -114,7 +119,7 @@
 
 .input__JG8Be[data-invalid],
 .input__JG8Be.textbox__input--invalid {
-  --input-border: var(--borderColor, #e62214);
+  --input-border: var(--borderColor, #ff4040);
 }
 
 .input__JG8Be[data-disabled],

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

@@ -3,6 +3,7 @@ import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selector
 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";
+import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
   id: "002d94d7-bec7-4082-8d00-fe4ede12024d",
   type: "wixEditorElements.TextBox__DEV__v3",
@@ -110,7 +111,8 @@ const manifest = {
         dataType: DATA.DATA_TYPE.direction
       },
       ...manifestChangeable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
     },
     cssCustomProperties: {
       gap: {

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

@@ -6,11 +6,12 @@ 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 { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
-import { d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, u as useValidatedField, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/useValidatedField.js";
+import { u as useValidatedField } from "../chunks/useValidatedField.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/index5.js";
 import { c as $3e6197669829fe11$export$40bfa8c7b0832715, d as $d1116acdf220c2da$export$4c014de7c8940b4c, e as $3274bf1495747a7b$export$5add1d006293d136, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, h as $01b77f81d0f07f68$export$75b6ee27786ba447, i as $a049562f99e7db0e$export$f9c6924e160136d1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.js";
+import { d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Tooltip.js";
 import { a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, b as $f39a9eba43920ace$export$86427a43e3e48ebb, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
 import { S as SdkStateDefinition } from "../chunks/index6.js";
 const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);

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

@@ -3,7 +3,7 @@ import { useState, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.js";
 import { $ as $58246871e4652552$export$c9698ec7f05a07e1, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f, c as $40825cdb76e74f70$export$5eaee2322dd727eb } from "../chunks/DateField.js";
-import { u as useValidatedField, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/useValidatedField.js";
+import { $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/Tooltip.js";
 import { $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/filterDOMProps.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
@@ -12,6 +12,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 const getTranslation = (translate, key, translationKeys, defaultTranslations) => {

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

@@ -4,7 +4,7 @@ var __typeError = (msg) => {
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _type, _type2, _type3, _type4;
 import { k as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7, a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666 } from "./filterDOMProps.js";
-import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, m as $fd2148440a13ec26$export$aca958c65c314e6c, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "./useValidatedField.js";
+import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, m as $fd2148440a13ec26$export$aca958c65c314e6c, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "./Tooltip.js";
 import { j as $6a20a7989e6c817a$export$98658e8c59125e6a, k as $23f2114a1b82827e$export$4282f70798064fe0, l as $23f2114a1b82827e$export$cd4e5573fbe2b576, m as $d447af545b77c9f1$export$b204af158042fbac, n as $3b8b240c1bf84ab9$export$bebd5a1431fec25d, o as $3b8b240c1bf84ab9$export$4c063cf1350e6fed, p as $f192c2f16961cbe0$export$80f3e147d781571c, q as $c4867b2f328c2698$export$e5c5a5f917a5871c, r as $d447af545b77c9f1$export$f21a1ffae260145a, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, s as $2add3ce32c6007eb$export$a11b0059900ceec8, t as $2add3ce32c6007eb$export$6446a186d09e379e, u as $8f5a2122b0992be3$export$630ff653c5ada6a9, v as $fe16bffc7a557bf0$export$7f54fc3180508a52, w as $2add3ce32c6007eb$export$fedb369cb70207f1, x as $48a7d519b337145d$export$4eaf04e54aa8eed6, y as $d27d541f9569d26d$export$45712eceda6fad21, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, z as $2c9edc598a03d523$export$420e68273165f4ec, e as $3274bf1495747a7b$export$5add1d006293d136, A as $390e54f620492c70$export$f680877a34711e37, B as $e8ac3c3f5d4bae7f$export$d6875122194c7b44, C as $2add3ce32c6007eb$export$9ac100e40613ea10, c as $3e6197669829fe11$export$40bfa8c7b0832715, i as $a049562f99e7db0e$export$f9c6924e160136d1, h as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, D as $0c4a58759813079a$export$4e328f61c538687f, E as $e969f22b6713ca4a$export$ae780daf29e6d456 } from "./Group.js";
 import React__default, { useRef, useContext, useMemo, useEffect, useState, useCallback, forwardRef, createContext, cloneElement } from "react";
 import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1, a as $cf2482eff2eeeec2$export$87b761675e8eaa10, b as $a747a10fe70a57da$export$c17fa47878dc55b6, c as $b27c684a33948c64$export$2f817fcdc4b89ae0 } from "./useLocalizedStringFormatter.js";