@dt-dds/react-text-area 1.0.0-beta.29 → 1.0.0-beta.30

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @dt-ui/react-text-area
 
+## 1.0.0-beta.30
+
+### Minor Changes
+
+- feat: update text area
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-label-field@1.0.0-beta.44
+  - @dt-dds/react-box@1.0.0-beta.19
+
 ## 1.0.0-beta.29
 
 ### Patch Changes

package/README.md

@@ -27,6 +27,8 @@ export const App = () => {
 | `backgroundFill` | `[default, contrast,light]` | `default`        | Styles the input with background color                                                    |
 | `enableResize`   | `boolean`                   | `false`          | Enables the vertical resizing                                                             |
 | `message`        | `string`                    | -                | The message to be displayed below the input field. Useful for hints or to display errors. |
+| `labelVariant`   | `[default, floating]`       | `default`        | Sets the label floating or traditional on top of the input                                |
+| `hasLabel`       | `boolean`                   | `true`           | Show/hide the label                                                                       |
 
 ## Stack
 

package/dist/index.d.mts

@@ -5,6 +5,7 @@ import { ComponentPropsWithoutRef } from 'react';
 
 type TextAreaVariant = 'outlined' | 'bottom-line';
 type TextAreaBackgroundFill = 'default' | 'contrast' | 'light';
+type TextAreaLabelVariant = 'default' | 'floating';
 
 interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, BaseProps {
     label: string;
@@ -16,8 +17,10 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, BaseProps
     backgroundFill?: TextAreaBackgroundFill;
     hasError?: boolean;
     message?: string;
+    labelVariant?: TextAreaLabelVariant;
+    hasLabel?: boolean;
 }
-declare const TextArea: ({ label, dataTestId, name, value, style, variant, backgroundFill, maxLength, enableResize, disabled, required, hasError, message: messageProp, onChange, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+declare const TextArea: ({ label, dataTestId, name, value, style, onChange, maxLength, variant, backgroundFill, enableResize, disabled, required, hasError, hasLabel, message: messageProp, labelVariant, placeholder, readOnly, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { ComponentPropsWithoutRef } from 'react';
 
 type TextAreaVariant = 'outlined' | 'bottom-line';
 type TextAreaBackgroundFill = 'default' | 'contrast' | 'light';
+type TextAreaLabelVariant = 'default' | 'floating';
 
 interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, BaseProps {
     label: string;
@@ -16,8 +17,10 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, BaseProps
     backgroundFill?: TextAreaBackgroundFill;
     hasError?: boolean;
     message?: string;
+    labelVariant?: TextAreaLabelVariant;
+    hasLabel?: boolean;
 }
-declare const TextArea: ({ label, dataTestId, name, value, style, variant, backgroundFill, maxLength, enableResize, disabled, required, hasError, message: messageProp, onChange, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+declare const TextArea: ({ label, dataTestId, name, value, style, onChange, maxLength, variant, backgroundFill, enableResize, disabled, required, hasError, hasLabel, message: messageProp, labelVariant, placeholder, readOnly, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {

package/dist/index.js

@@ -64,9 +64,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/TextArea.tsx
+var import_react_box = require("@dt-dds/react-box");
 var import_react_label_field = require("@dt-dds/react-label-field");
 var import_react_typography = require("@dt-dds/react-typography");
-var import_react = require("react");
+var import_react = require("@emotion/react");
+var import_react2 = require("react");
 
 // src/TextArea.styled.ts
 var import_styled = __toESM(require("@emotion/styled"));
@@ -79,68 +81,55 @@ var getThemedBackgroundFill = (backgroundFill, theme) => ({
 })[backgroundFill] || theme.palette.surface.default;
 
 // src/TextArea.styled.ts
-var TextAreaWrapper = import_styled.default.div`
-  ${({ theme }) => `
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    position: relative;
-    width: 100%;
-    
-    border-style: solid;
-    border-width: 0;
-    border-color: ${theme.palette.border.dark};
-  `}
-`;
-var TextAreaMessageStyled = import_styled.default.div`
-  ${({ theme }) => `padding-left: ${theme.spacing.spacing_50}`};
-`;
-var TextAreaMessages = import_styled.default.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: baseline;
-  width: 100%;
-`;
 var TextAreaStyled = import_styled.default.textarea`
-  ${({ theme, enableResize = false, backgroundFill }) => `
-    ${theme.fontStyles.bodyLgRegular}
+  ${({
+  theme,
+  enableResize,
+  backgroundFill,
+  variant,
+  hasError,
+  isFloatingLabel,
+  hasLabel
+}) => {
+  const borderColor = hasError ? theme.palette.error.default : theme.palette.informative.default;
+  return `
+    ${theme.fontStyles.bodyMdRegular}
 
     background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
-
-    border-style: none;
+    min-height: 100px;
     width: 100%;
-    color: ${theme.palette.content.dark};
-    resize: ${enableResize ? "vertical" : "none"};
     outline: none;
-    padding-right: 10px;
-  `}
-`;
-var ContainerStyled = import_styled.default.div`
-  ${({ theme, variant, hasError = false, backgroundFill }) => {
-  const borderColor = hasError ? theme.palette.error.default : theme.palette.primary.default;
-  return `
-    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
-    position: relative;
-    padding: 25px 0px 0px 10px;
-    width: 100%;
+    color: ${theme.palette.content.default};
+    resize: ${enableResize ? "vertical" : "none"};
+    padding: ${isFloatingLabel && hasLabel ? "24px 12px 12px 12px" : "12px"};
+    border: 0;
+
+    ${!isFloatingLabel && hasLabel && "margin-top: 8px"};
 
     ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
-            border: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
-            &:focus-within, 
-            &:hover { 
+            border: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.medium};
+
+            &:focus-within,
+            &:hover:not([disabled]) { 
               border: 1px solid ${borderColor};
             }
           ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
-            border-bottom: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
-            &:focus-within, 
-            &:hover { 
+            border-bottom: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.medium};
+           
+            &:focus-within,
+            &:hover:not([disabled]) { 
               border-bottom: 1px solid  ${borderColor};
             }
           `};
 
-    ${variant === "outlined" ? "border-width: 1px" : "border-width: 0 0 1px"};
+    &:read-only {
+      color: ${theme.palette.content.light};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: ${theme.palette.content.light};
+    } 
   `;
 }}
 `;
@@ -154,40 +143,47 @@ var TextArea = (_a) => {
     name,
     value,
     style,
+    onChange,
+    maxLength,
     variant = "outlined",
     backgroundFill = "default",
-    maxLength,
     enableResize = false,
     disabled = false,
     required = false,
     hasError = false,
+    hasLabel = true,
     message: messageProp = "",
-    onChange = () => {
-    }
+    labelVariant = "default",
+    placeholder,
+    readOnly
   } = _b, rest = __objRest(_b, [
     "label",
     "dataTestId",
     "name",
     "value",
     "style",
+    "onChange",
+    "maxLength",
     "variant",
     "backgroundFill",
-    "maxLength",
     "enableResize",
     "disabled",
     "required",
     "hasError",
+    "hasLabel",
     "message",
-    "onChange"
+    "labelVariant",
+    "placeholder",
+    "readOnly"
   ]);
-  const [chars, setChars] = (0, import_react.useState)(0);
-  const [activeInput, setActiveInput] = (0, import_react.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react.useState)("");
-  const [hasRequiredError, setHasRequiredError] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  const [chars, setChars] = (0, import_react2.useState)(0);
+  const [isActive, setIsActive] = (0, import_react2.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react2.useState)("");
+  const [hasRequiredError, setHasRequiredError] = (0, import_react2.useState)(false);
+  const theme = (0, import_react.useTheme)();
+  (0, import_react2.useEffect)(() => {
     if (!!value) {
       setInputValue(value);
-      setActiveInput(true);
       setChars(value.length);
       setHasRequiredError(false);
     } else {
@@ -203,93 +199,107 @@ var TextArea = (_a) => {
     }
   };
   const onFocus = (event) => {
-    setActiveInput(true);
+    setIsActive(true);
     if (rest.onFocus) {
       rest.onFocus(event);
     }
   };
   const onBlur = (event) => {
+    setIsActive(false);
     const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
-    if (isEmptyOrOnlySpaces) {
-      setActiveInput(false);
-      if (required) {
-        setHasRequiredError(true);
-      }
+    if (isEmptyOrOnlySpaces && required) {
+      setHasRequiredError(true);
     }
     if (rest.onBlur) {
       rest.onBlur(event);
     }
   };
   const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLocaleLowerCase()}-textarea`;
-  const messageColor = disabled ? "content.light" : "content.medium";
+  const messageColor = disabled || readOnly ? "content.light" : "content.medium";
   const showError = hasError || hasRequiredError;
   const message = messageProp;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TextAreaWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const isFloatingLabel = labelVariant === "floating";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_box.Box, { style: { position: "relative", alignItems: "flex-start" }, children: [
+    hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_label_field.LabelField,
       {
         hasError: showError,
         htmlFor: testId,
-        isActive: activeInput,
-        isDisabled: disabled,
+        isActive: isActive && !readOnly ? true : false,
+        isDisabled: disabled || readOnly,
+        isFloating: isFloatingLabel,
+        isInputFilled: !!chars,
         isRequired: required,
         style: { zIndex: 1 },
         children: label
       }
-    ),
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ContainerStyled,
-      {
+      TextAreaStyled,
+      __spreadValues(__spreadProps(__spreadValues({
         backgroundFill,
-        "data-testid": "textarea-container",
+        "data-error": showError,
+        "data-testid": testId,
+        disabled,
+        enableResize,
         hasError: showError,
-        variant,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          TextAreaStyled,
-          __spreadProps(__spreadValues({
-            backgroundFill,
-            "data-error": showError,
-            disabled,
-            enableResize,
-            id: testId,
-            maxLength,
-            name,
-            style,
-            value: inputValue
-          }, rest), {
-            onBlur,
-            onChange: handleChange,
-            onFocus
-          })
-        )
-      }
+        hasLabel,
+        id: testId,
+        isFloatingLabel,
+        maxLength,
+        name,
+        readOnly,
+        style,
+        value: inputValue,
+        variant
+      }, rest), {
+        onBlur,
+        onChange: handleChange,
+        onFocus
+      }), (!isFloatingLabel || !hasLabel) && {
+        placeholder
+      })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TextAreaMessages, { children: [
-      message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextAreaMessageStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_typography.Typography,
-        {
-          color: showError ? "error.default" : messageColor,
-          element: "span",
-          fontStyles: "bodySmRegular",
-          children: message
-        }
-      ) }) : null,
-      maxLength ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_react_typography.Typography,
-        {
-          color: "content.medium",
-          element: "span",
-          fontStyles: "bodyMdRegular",
-          id: testId,
-          style: { marginLeft: "auto" },
-          children: [
-            chars,
-            " / ",
-            maxLength
-          ]
-        }
-      ) : null
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react_box.Box,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          width: "100%",
+          paddingInline: theme.spacing.spacing_40,
+          gap: theme.spacing.spacing_30,
+          marginTop: 4
+        },
+        children: [
+          message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_typography.Typography,
+            {
+              color: showError ? "error.default" : messageColor,
+              element: "span",
+              fontStyles: "bodySmRegular",
+              children: message
+            }
+          ) : null,
+          maxLength ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_react_typography.Typography,
+            __spreadProps(__spreadValues({
+              color: showError ? "error.default" : messageColor,
+              dataTestId: "char-counter",
+              element: "span",
+              fontStyles: "bodySmRegular",
+              id: testId
+            }, !message && { style: { marginLeft: "auto" } }), {
+              children: [
+                chars,
+                " / ",
+                maxLength
+              ]
+            })
+          ) : null
+        ]
+      }
+    )
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -31,8 +31,10 @@ var __objRest = (source, exclude) => {
 };
 
 // src/TextArea.tsx
+import { Box } from "@dt-dds/react-box";
 import { LabelField } from "@dt-dds/react-label-field";
 import { Typography } from "@dt-dds/react-typography";
+import { useTheme } from "@emotion/react";
 import {
   useEffect,
   useState
@@ -49,68 +51,55 @@ var getThemedBackgroundFill = (backgroundFill, theme) => ({
 })[backgroundFill] || theme.palette.surface.default;
 
 // src/TextArea.styled.ts
-var TextAreaWrapper = styled.div`
-  ${({ theme }) => `
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    position: relative;
-    width: 100%;
-    
-    border-style: solid;
-    border-width: 0;
-    border-color: ${theme.palette.border.dark};
-  `}
-`;
-var TextAreaMessageStyled = styled.div`
-  ${({ theme }) => `padding-left: ${theme.spacing.spacing_50}`};
-`;
-var TextAreaMessages = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: baseline;
-  width: 100%;
-`;
 var TextAreaStyled = styled.textarea`
-  ${({ theme, enableResize = false, backgroundFill }) => `
-    ${theme.fontStyles.bodyLgRegular}
+  ${({
+  theme,
+  enableResize,
+  backgroundFill,
+  variant,
+  hasError,
+  isFloatingLabel,
+  hasLabel
+}) => {
+  const borderColor = hasError ? theme.palette.error.default : theme.palette.informative.default;
+  return `
+    ${theme.fontStyles.bodyMdRegular}
 
     background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
-
-    border-style: none;
+    min-height: 100px;
     width: 100%;
-    color: ${theme.palette.content.dark};
-    resize: ${enableResize ? "vertical" : "none"};
     outline: none;
-    padding-right: 10px;
-  `}
-`;
-var ContainerStyled = styled.div`
-  ${({ theme, variant, hasError = false, backgroundFill }) => {
-  const borderColor = hasError ? theme.palette.error.default : theme.palette.primary.default;
-  return `
-    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
-    position: relative;
-    padding: 25px 0px 0px 10px;
-    width: 100%;
+    color: ${theme.palette.content.default};
+    resize: ${enableResize ? "vertical" : "none"};
+    padding: ${isFloatingLabel && hasLabel ? "24px 12px 12px 12px" : "12px"};
+    border: 0;
+
+    ${!isFloatingLabel && hasLabel && "margin-top: 8px"};
 
     ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
-            border: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
-            &:focus-within, 
-            &:hover { 
+            border: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.medium};
+
+            &:focus-within,
+            &:hover:not([disabled]) { 
               border: 1px solid ${borderColor};
             }
           ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
-            border-bottom: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
-            &:focus-within, 
-            &:hover { 
+            border-bottom: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.medium};
+           
+            &:focus-within,
+            &:hover:not([disabled]) { 
               border-bottom: 1px solid  ${borderColor};
             }
           `};
 
-    ${variant === "outlined" ? "border-width: 1px" : "border-width: 0 0 1px"};
+    &:read-only {
+      color: ${theme.palette.content.light};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: ${theme.palette.content.light};
+    } 
   `;
 }}
 `;
@@ -124,40 +113,47 @@ var TextArea = (_a) => {
     name,
     value,
     style,
+    onChange,
+    maxLength,
     variant = "outlined",
     backgroundFill = "default",
-    maxLength,
     enableResize = false,
     disabled = false,
     required = false,
     hasError = false,
+    hasLabel = true,
     message: messageProp = "",
-    onChange = () => {
-    }
+    labelVariant = "default",
+    placeholder,
+    readOnly
   } = _b, rest = __objRest(_b, [
     "label",
     "dataTestId",
     "name",
     "value",
     "style",
+    "onChange",
+    "maxLength",
     "variant",
     "backgroundFill",
-    "maxLength",
     "enableResize",
     "disabled",
     "required",
     "hasError",
+    "hasLabel",
     "message",
-    "onChange"
+    "labelVariant",
+    "placeholder",
+    "readOnly"
   ]);
   const [chars, setChars] = useState(0);
-  const [activeInput, setActiveInput] = useState(false);
+  const [isActive, setIsActive] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [hasRequiredError, setHasRequiredError] = useState(false);
+  const theme = useTheme();
   useEffect(() => {
     if (!!value) {
       setInputValue(value);
-      setActiveInput(true);
       setChars(value.length);
       setHasRequiredError(false);
     } else {
@@ -173,93 +169,107 @@ var TextArea = (_a) => {
     }
   };
   const onFocus = (event) => {
-    setActiveInput(true);
+    setIsActive(true);
     if (rest.onFocus) {
       rest.onFocus(event);
     }
   };
   const onBlur = (event) => {
+    setIsActive(false);
     const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
-    if (isEmptyOrOnlySpaces) {
-      setActiveInput(false);
-      if (required) {
-        setHasRequiredError(true);
-      }
+    if (isEmptyOrOnlySpaces && required) {
+      setHasRequiredError(true);
     }
     if (rest.onBlur) {
       rest.onBlur(event);
     }
   };
   const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLocaleLowerCase()}-textarea`;
-  const messageColor = disabled ? "content.light" : "content.medium";
+  const messageColor = disabled || readOnly ? "content.light" : "content.medium";
   const showError = hasError || hasRequiredError;
   const message = messageProp;
-  return /* @__PURE__ */ jsxs(TextAreaWrapper, { children: [
-    /* @__PURE__ */ jsx(
+  const isFloatingLabel = labelVariant === "floating";
+  return /* @__PURE__ */ jsxs(Box, { style: { position: "relative", alignItems: "flex-start" }, children: [
+    hasLabel ? /* @__PURE__ */ jsx(
       LabelField,
       {
         hasError: showError,
         htmlFor: testId,
-        isActive: activeInput,
-        isDisabled: disabled,
+        isActive: isActive && !readOnly ? true : false,
+        isDisabled: disabled || readOnly,
+        isFloating: isFloatingLabel,
+        isInputFilled: !!chars,
         isRequired: required,
         style: { zIndex: 1 },
         children: label
       }
-    ),
+    ) : null,
     /* @__PURE__ */ jsx(
-      ContainerStyled,
-      {
+      TextAreaStyled,
+      __spreadValues(__spreadProps(__spreadValues({
         backgroundFill,
-        "data-testid": "textarea-container",
+        "data-error": showError,
+        "data-testid": testId,
+        disabled,
+        enableResize,
         hasError: showError,
-        variant,
-        children: /* @__PURE__ */ jsx(
-          TextAreaStyled,
-          __spreadProps(__spreadValues({
-            backgroundFill,
-            "data-error": showError,
-            disabled,
-            enableResize,
-            id: testId,
-            maxLength,
-            name,
-            style,
-            value: inputValue
-          }, rest), {
-            onBlur,
-            onChange: handleChange,
-            onFocus
-          })
-        )
-      }
+        hasLabel,
+        id: testId,
+        isFloatingLabel,
+        maxLength,
+        name,
+        readOnly,
+        style,
+        value: inputValue,
+        variant
+      }, rest), {
+        onBlur,
+        onChange: handleChange,
+        onFocus
+      }), (!isFloatingLabel || !hasLabel) && {
+        placeholder
+      })
     ),
-    /* @__PURE__ */ jsxs(TextAreaMessages, { children: [
-      message ? /* @__PURE__ */ jsx(TextAreaMessageStyled, { children: /* @__PURE__ */ jsx(
-        Typography,
-        {
-          color: showError ? "error.default" : messageColor,
-          element: "span",
-          fontStyles: "bodySmRegular",
-          children: message
-        }
-      ) }) : null,
-      maxLength ? /* @__PURE__ */ jsxs(
-        Typography,
-        {
-          color: "content.medium",
-          element: "span",
-          fontStyles: "bodyMdRegular",
-          id: testId,
-          style: { marginLeft: "auto" },
-          children: [
-            chars,
-            " / ",
-            maxLength
-          ]
-        }
-      ) : null
-    ] })
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          width: "100%",
+          paddingInline: theme.spacing.spacing_40,
+          gap: theme.spacing.spacing_30,
+          marginTop: 4
+        },
+        children: [
+          message ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              color: showError ? "error.default" : messageColor,
+              element: "span",
+              fontStyles: "bodySmRegular",
+              children: message
+            }
+          ) : null,
+          maxLength ? /* @__PURE__ */ jsxs(
+            Typography,
+            __spreadProps(__spreadValues({
+              color: showError ? "error.default" : messageColor,
+              dataTestId: "char-counter",
+              element: "span",
+              fontStyles: "bodySmRegular",
+              id: testId
+            }, !message && { style: { marginLeft: "auto" } }), {
+              children: [
+                chars,
+                " / ",
+                maxLength
+              ]
+            })
+          ) : null
+        ]
+      }
+    )
   ] });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-text-area",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,9 +20,10 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
+    "@dt-dds/react-box": "1.0.0-beta.19",
     "@dt-dds/react-core": "1.0.0-beta.47",
+    "@dt-dds/react-label-field": "1.0.0-beta.44",
     "@dt-dds/react-typography": "1.0.0-beta.38",
-    "@dt-dds/react-label-field": "1.0.0-beta.43",
     "@dt-dds/themes": "1.0.0-beta.7"
   },
   "devDependencies": {