@wix/editor-react-components 1.2348.0 → 1.2350.0

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

@@ -1,19 +1,20 @@
 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";
 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 { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dlp5n";
 const field = "field__i7dfL";
 const labelRow = "labelRow__qwrwd";
 const label = "label__GIRwe";
+const description = "description__--0WR";
 const tooltipButton = "tooltipButton__tOobd";
 const tooltip = "tooltip__6OlB9";
 const input = "input__JG8Be";
@@ -22,6 +23,7 @@ const styles = {
   field,
   labelRow,
   label,
+  description,
   tooltipButton,
   tooltip,
   input
@@ -36,6 +38,7 @@ function TextBoxComponent(props) {
     label: label2 = defaultValues.label,
     tooltip: tooltip2 = defaultValues.tooltip,
     placeholder = defaultValues.placeholder,
+    description: description2 = defaultValues.description,
     required = defaultValues.required,
     readOnly = defaultValues.readOnly,
     disabled = defaultValues.disabled,
@@ -48,17 +51,9 @@ function TextBoxComponent(props) {
     onBlur = noop,
     wix
   } = props;
-  const incomingValue = props.value ?? defaultValues.value;
-  const [value, setValue] = useState(incomingValue);
-  const [prevValue, setPrevValue] = useState(incomingValue);
-  if (prevValue !== incomingValue) {
-    setPrevValue(incomingValue);
-    setValue(incomingValue);
-  }
-  const handleValueChange = (next) => {
-    setValue(next);
-    onChange(next);
-  };
+  const isControlled = props.value !== void 0;
+  const defaultValue = props.defaultValue ?? defaultValues.defaultValue;
+  const handleValueChange = (next) => onChange(next);
   const hasLabel = !!label2;
   const hasTooltip = !!tooltip2;
   const ariaLabel = !hasLabel ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
@@ -92,11 +87,12 @@ function TextBoxComponent(props) {
               children: [
                 label2,
                 required && /* @__PURE__ */ jsx(
-                  "span",
+                  RequiredIndicator,
                   {
-                    "data-testid": TestIds.requiredIndicator,
-                    "aria-hidden": "true",
-                    children: " *"
+                    className: formatClassNames(
+                      semanticClassNames.requiredIndicator
+                    ),
+                    "data-testid": TestIds.requiredIndicator
                   }
                 )
               ]
@@ -125,7 +121,7 @@ function TextBoxComponent(props) {
               selectors.input,
               formatClassNames(semanticClassNames.input)
             ),
-            value,
+            ...isControlled ? { value: props.value } : { defaultValue },
             onValueChange: handleValueChange,
             readOnly,
             required,
@@ -137,6 +133,18 @@ function TextBoxComponent(props) {
             onFocus,
             onBlur
           }
+        ),
+        description2 && /* @__PURE__ */ jsx(
+          Field.Description,
+          {
+            className: clsx(
+              styles.description,
+              selectors.description,
+              formatClassNames(semanticClassNames.description)
+            ),
+            "data-testid": TestIds.description,
+            children: description2
+          }
         )
       ] })
     }

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

@@ -3,6 +3,7 @@ export declare const DisplayNames: {
         elementDisplayName: string;
         data: {
             value: string;
+            defaultValue: string;
             label: string;
             tooltip: string;
             placeholder: string;
@@ -11,10 +12,12 @@ export declare const DisplayNames: {
             disabled: string;
             minLength: string;
             maxLength: string;
+            description: string;
         };
         cssCustomProperties: {
             gap: string;
             labelAlignment: string;
+            descriptionSpacing: string;
         };
     };
     input: {
@@ -23,6 +26,12 @@ export declare const DisplayNames: {
             placeholderTextColor: string;
             borderColor: string;
             borderWidth: string;
+            resize: string;
+        };
+        options: {
+            resizeOff: string;
+            resizeVertical: string;
+            resizeBoth: string;
         };
         displayGroups: {
             borderGroup: string;
@@ -31,32 +40,37 @@ export declare const DisplayNames: {
     label: {
         elementDisplayName: string;
     };
+    description: {
+        elementDisplayName: string;
+    };
 };
 export declare const DesignStates: {
-    readonly root: {
+    readonly input: {
         readonly hover: {
             readonly displayName: "Hover";
-            readonly className: "textbox--hover";
+            readonly className: "textbox__input--hover";
         };
         readonly focus: {
             readonly displayName: "Focus";
-            readonly className: "textbox--focus";
+            readonly className: "textbox__input--focus";
         };
         readonly disabled: {
             readonly displayName: "Disabled";
-            readonly className: "textbox--disabled";
+            readonly className: "textbox__input--disabled";
         };
         readonly invalid: {
             readonly displayName: "Error";
-            readonly className: "textbox--invalid";
+            readonly className: "textbox__input--invalid";
         };
     };
 };
 export declare const defaultValues: {
     readonly value: "";
+    readonly defaultValue: "";
     readonly label: "Label";
     readonly tooltip: "";
     readonly placeholder: "Enter your text here...";
+    readonly description: "";
     readonly required: false;
     readonly readOnly: false;
     readonly disabled: false;
@@ -67,14 +81,18 @@ export declare const TestIds: {
     readonly label: "textbox-label";
     readonly requiredIndicator: "textbox-required-indicator";
     readonly tooltipButton: "textbox-tooltip-button";
+    readonly description: "textbox-description";
 };
 export declare const selectors: {
     readonly root: "textbox";
     readonly input: "textbox__input";
     readonly label: "textbox__label";
+    readonly description: "textbox__description";
 };
 export declare const semanticClassNames: {
     readonly root: "textbox";
     readonly input: "textbox__input";
     readonly label: "textbox__label";
+    readonly requiredIndicator: "textbox__required-indicator";
+    readonly description: "textbox__description";
 };

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

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   max-width: 100%;
 }
 
@@ -10,11 +10,11 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  min-height: 100%;
 }
 
 .root__dlp5n .field__i7dfL {
-  gap: var(--gap, 8px);
+  gap: 0;
 }
 
 .labelRow__qwrwd {
@@ -23,6 +23,7 @@
   align-self: var(--labelAlignment, flex-start);
   gap: 6px;
   max-width: 100%;
+  margin-block-end: var(--gap, 8px);
 }
 
 .label__GIRwe {
@@ -30,6 +31,13 @@
   padding: 0;
 }
 
+.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);
+}
+
 .tooltipButton__tOobd {
   flex: none;
   box-sizing: border-box;
@@ -75,7 +83,7 @@
   width: 100%;
   min-height: 0;
   margin: 0;
-  resize: none;
+  resize: var(--textbox-resize, none);
   border-style: solid;
   border-color: var(--input-border);
   border-width: var(--borderWidth, 1px);
@@ -95,30 +103,24 @@
 }
 
 .input__JG8Be:hover,
-.root__dlp5n.textbox--hover .input__JG8Be {
+.input__JG8Be.textbox__input--hover {
   --input-border: var(--borderColor, #000);
 }
 
 .input__JG8Be:focus,
-.root__dlp5n.textbox--focus .input__JG8Be {
+.input__JG8Be.textbox__input--focus {
   --input-border: var(--borderColor, #116dff);
 }
 
 .input__JG8Be[data-invalid],
-.root__dlp5n.textbox--invalid .input__JG8Be {
+.input__JG8Be.textbox__input--invalid {
   --input-border: var(--borderColor, #e62214);
 }
 
-.input__JG8Be[data-disabled] {
+.input__JG8Be[data-disabled],
+.input__JG8Be.textbox__input--disabled {
   cursor: default;
-  --input-border: var(
-    --borderColor,
-    color-mix(
-      in srgb,
-      var(--wst-system-disabled-color, #939393) 60%,
-      transparent
-    )
-  );
+  opacity: 0.55;
 }.textbox {
   --gap: 8px;
 }
@@ -129,6 +131,14 @@
   background-color: #fff;
   color: #000;
 }
+.requiredIndicator__j5mIH {
+  display: inline-block;
+  width: 0.6em;
+  height: 0.6em;
+  margin-inline-start: 0.2em;
+  vertical-align: super;
+  color: inherit;
+}
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }

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

@@ -1,4 +1,4 @@
-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 { E as ELEMENTS, N as NativeStateType, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.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";
@@ -11,11 +11,11 @@ const manifest = {
     initialSize: {
       width: {
         sizingType: LAYOUT.SIZING_TYPE.pixels,
-        pixels: 280
+        pixels: 400
       },
       height: {
         sizingType: LAYOUT.SIZING_TYPE.pixels,
-        pixels: 100
+        pixels: 200
       }
     }
   },
@@ -25,15 +25,22 @@ const manifest = {
     archetype: Archetype.TextInput,
     layout: {
       resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
-      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
-      disableStretching: false,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      disableStretching: true,
       disablePositioning: false
     },
     data: {
       value: {
         dataType: DATA.DATA_TYPE.text,
         displayName: DisplayNames.root.data.value,
-        defaultValue: defaultValues.value,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 4e3
+        }
+      },
+      defaultValue: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.defaultValue,
+        defaultValue: defaultValues.defaultValue,
         [DATA.DATA_TYPE.text]: {
           maxLength: 4e3
         }
@@ -62,6 +69,14 @@ const manifest = {
           maxLength: 4e3
         }
       },
+      description: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.description,
+        defaultValue: defaultValues.description,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 4e3
+        }
+      },
       minLength: {
         dataType: DATA.DATA_TYPE.number,
         displayName: DisplayNames.root.data.minLength
@@ -97,33 +112,6 @@ const manifest = {
       ...manifestChangeable(),
       ...manifestFocusable()
     },
-    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
-      }),
-      disabled: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.disabled.displayName,
-        className: DesignStates.root.disabled.className,
-        pseudoClass: NativeStateType.disabled,
-        props: { disabled: true }
-      }),
-      invalid: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.invalid.displayName,
-        className: DesignStates.root.invalid.className,
-        pseudoClass: NativeStateType.invalid
-      })
-    },
     cssCustomProperties: {
       gap: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
@@ -133,6 +121,11 @@ const manifest = {
       labelAlignment: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
         displayName: DisplayNames.root.cssCustomProperties.labelAlignment
+      },
+      descriptionSpacing: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DisplayNames.root.cssCustomProperties.descriptionSpacing,
+        defaultValue: "6px"
       }
     },
     elements: {
@@ -167,6 +160,37 @@ const manifest = {
               cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
               displayName: DisplayNames.input.cssCustomProperties.borderWidth,
               defaultValue: "1px"
+            },
+            resize: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+              displayName: DisplayNames.input.cssCustomProperties.resize,
+              defaultValue: "none",
+              customEnum: {
+                cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+                options: [
+                  {
+                    value: "none",
+                    displayName: DisplayNames.input.options.resizeOff,
+                    appliedStyles: [
+                      { property: "--textbox-resize", value: "none" }
+                    ]
+                  },
+                  {
+                    value: "vertical",
+                    displayName: DisplayNames.input.options.resizeVertical,
+                    appliedStyles: [
+                      { property: "--textbox-resize", value: "vertical" }
+                    ]
+                  },
+                  {
+                    value: "both",
+                    displayName: DisplayNames.input.options.resizeBoth,
+                    appliedStyles: [
+                      { property: "--textbox-resize", value: "both" }
+                    ]
+                  }
+                ]
+              }
             }
           },
           displayGroups: {
@@ -178,6 +202,33 @@ const manifest = {
                 width: "borderWidth"
               }
             }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.hover.displayName,
+              className: DesignStates.input.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            focus: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.focus.displayName,
+              className: DesignStates.input.focus.className,
+              pseudoClass: NativeStateType.focus
+            }),
+            disabled: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.disabled.displayName,
+              className: DesignStates.input.disabled.className,
+              pseudoClass: NativeStateType.disabled,
+              props: { disabled: true }
+            }),
+            invalid: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.invalid.displayName,
+              className: DesignStates.input.invalid.className,
+              pseudoClass: NativeStateType.invalid
+            })
           }
         }
       },
@@ -195,6 +246,21 @@ const manifest = {
             font: {}
           }
         }
+      },
+      description: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.description.elementDisplayName,
+          selector: getSelector(selectors.description),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            color: {},
+            font: {}
+          }
+        }
       }
     }
   },

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

@@ -5,7 +5,7 @@ import { c as clsx } from "../chunks/clsx.js";
 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 } from "../chunks/RequiredIndicator.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 { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
@@ -13,7 +13,6 @@ 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 { 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";
-import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
 function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {
   let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;

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

@@ -12,9 +12,8 @@ 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 { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
-import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
   const translationKey = translationKeys[key];
   const translated = translate(translationKey);

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

@@ -1,6 +1,9 @@
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "./clsx.js";
-import * as React from "react";
+const InfoCircleSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z M9,15 C12.3137085,15 15,12.3137085 15,9 C15,5.6862915 12.3137085,3 9,3 C5.6862915,3 3,5.6862915 3,9 C3,12.3137085 5.6862915,15 9,15 Z M8,8 L10,8 L10,12 L11,13 L7,13 L8,12 L8,8.85714286 L7,8.85714286 L8,8 Z M9,5 C9.55228475,5 10,5.44771525 10,6 C10,6.55228475 9.55228475,7 9,7 C8.44771525,7 8,6.55228475 8,6 C8,5.44771525 8.44771525,5 9,5 Z" }));
+InfoCircleSmall.displayName = "InfoCircleSmall";
+var InfoCircleSmall_default = InfoCircleSmall;
 const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
 Asterisk.displayName = "Asterisk";
 var Asterisk_default = Asterisk;
@@ -21,5 +24,6 @@ const RequiredIndicator = ({
   }
 );
 export {
+  InfoCircleSmall_default as I,
   RequiredIndicator as R
 };

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

@@ -2,7 +2,8 @@ const DisplayNames = {
   root: {
     elementDisplayName: "Text Box",
     data: {
-      value: "Default text",
+      value: "Value",
+      defaultValue: "Default text",
       label: "Label",
       tooltip: "Tooltip",
       placeholder: "Placeholder",
@@ -10,11 +11,13 @@ const DisplayNames = {
       readOnly: "Read only",
       disabled: "Disabled",
       minLength: "Minimum characters",
-      maxLength: "Maximum characters"
+      maxLength: "Maximum characters",
+      description: "Helper text"
     },
     cssCustomProperties: {
       gap: "Space between label and field",
-      labelAlignment: "Label alignment"
+      labelAlignment: "Label alignment",
+      descriptionSpacing: "Space between field and helper text"
     }
   },
   input: {
@@ -22,7 +25,13 @@ const DisplayNames = {
     cssCustomProperties: {
       placeholderTextColor: "Placeholder text color",
       borderColor: "Border color",
-      borderWidth: "Border width"
+      borderWidth: "Border width",
+      resize: "Resize"
+    },
+    options: {
+      resizeOff: "Off",
+      resizeVertical: "Vertical",
+      resizeBoth: "Both"
     },
     displayGroups: {
       borderGroup: "Border"
@@ -30,21 +39,28 @@ const DisplayNames = {
   },
   label: {
     elementDisplayName: "Label"
+  },
+  description: {
+    elementDisplayName: "Helper text"
   }
 };
 const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "textbox--hover" },
-    focus: { displayName: "Focus", className: "textbox--focus" },
-    disabled: { displayName: "Disabled", className: "textbox--disabled" },
-    invalid: { displayName: "Error", className: "textbox--invalid" }
+  input: {
+    hover: { displayName: "Hover", className: "textbox__input--hover" },
+    focus: { displayName: "Focus", className: "textbox__input--focus" },
+    disabled: {
+      displayName: "Disabled",
+      className: "textbox__input--disabled"
+    },
+    invalid: { displayName: "Error", className: "textbox__input--invalid" }
   }
 };
 const defaultValues = {
-  value: "",
+  defaultValue: "",
   label: "Label",
   tooltip: "",
   placeholder: "Enter your text here...",
+  description: "",
   required: false,
   readOnly: false,
   disabled: false
@@ -54,16 +70,20 @@ const TestIds = {
   input: "textbox-input",
   label: "textbox-label",
   requiredIndicator: "textbox-required-indicator",
-  tooltipButton: "textbox-tooltip-button"
+  tooltipButton: "textbox-tooltip-button",
+  description: "textbox-description"
 };
 const selectors = {
   root: "textbox",
   input: "textbox__input",
-  label: "textbox__label"
+  label: "textbox__label",
+  description: "textbox__description"
 };
 const semanticClassNames = {
   input: "textbox__input",
-  label: "textbox__label"
+  label: "textbox__label",
+  requiredIndicator: "textbox__required-indicator",
+  description: "textbox__description"
 };
 export {
   DesignStates as D,