@justeattakeaway/pie-textarea 0.12.0 → 0.13.0

package/custom-elements.json

@@ -42,7 +42,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    label: '',\n    value: '',\n    placeholder: '',\n    status: 'default',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    value: '',\n    placeholder: '',\n    status: 'default',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -133,12 +133,6 @@
               "privacy": "public",
               "attribute": "resize"
             },
-            {
-              "kind": "field",
-              "name": "label",
-              "privacy": "public",
-              "attribute": "label"
-            },
             {
               "kind": "field",
               "name": "readonly",
@@ -304,18 +298,6 @@
               "name": "handleKeyDown",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "renderAssistiveText"
@@ -361,10 +343,6 @@
               "name": "resize",
               "fieldName": "resize"
             },
-            {
-              "name": "label",
-              "fieldName": "label"
-            },
             {
               "name": "readonly",
               "fieldName": "readonly"

package/dist/index.d.ts

@@ -35,7 +35,6 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
-    label: string;
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
@@ -80,7 +79,6 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     private handleChange;
     private handleKeyDown;
     disconnectedCallback(): void;
-    renderLabel(label: string): TemplateResult<1> | typeof nothing;
     renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
@@ -149,10 +147,6 @@ export declare interface TextareaProps {
      * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
      */
     required?: boolean;
-    /**
-     * The label text for the textarea field.
-     */
-    label?: string;
     /**
      * The placeholder text to display when the textarea is empty.
      */

package/dist/index.js

@@ -1,73 +1,72 @@
-import { LitElement as L, html as j, nothing as M, unsafeCSS as P } from "lit";
-import { property as l, query as D } from "lit/decorators.js";
+import { LitElement as F, nothing as K, html as R, unsafeCSS as P } from "lit";
+import { property as d, query as q } from "lit/decorators.js";
 import { classMap as G } from "lit/directives/class-map.js";
-import { ifDefined as m } from "lit/directives/if-defined.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
 import { live as H } from "lit/directives/live.js";
 import "@justeattakeaway/pie-assistive-text";
-import "@justeattakeaway/pie-form-label";
-import { FormControlMixin as U, RtlMixin as X, wrapNativeEvent as J, validPropertyValues as C, defineCustomElement as Q } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as U, RtlMixin as X, wrapNativeEvent as J, validPropertyValues as w, defineCustomElement as Q } from "@justeattakeaway/pie-webc-core";
 var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Y(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var V = "Expected a function", q = NaN, Z = "[object Symbol]", ee = /^\s+|\s+$/g, te = /^[-+]0x[0-9a-f]+$/i, ae = /^0b[01]+$/i, re = /^0o[0-7]+$/i, ie = parseInt, oe = typeof T == "object" && T && T.Object === Object && T, ne = typeof self == "object" && self && self.Object === Object && self, se = oe || ne || Function("return this")(), le = Object.prototype, de = le.toString, ce = Math.max, ue = Math.min, w = function() {
+var B = "Expected a function", L = NaN, Z = "[object Symbol]", ee = /^\s+|\s+$/g, te = /^[-+]0x[0-9a-f]+$/i, ae = /^0b[01]+$/i, re = /^0o[0-7]+$/i, ie = parseInt, oe = typeof T == "object" && T && T.Object === Object && T, ne = typeof self == "object" && self && self.Object === Object && self, se = oe || ne || Function("return this")(), le = Object.prototype, de = le.toString, ce = Math.max, ue = Math.min, _ = function() {
   return se.Date.now();
 };
 function pe(e, t, a) {
-  var d, o, p, u, s, h, x = 0, k = !1, v = !1, g = !0;
+  var l, i, p, u, s, h, v = 0, k = !1, f = !1, m = !0;
   if (typeof e != "function")
-    throw new TypeError(V);
-  t = B(t) || 0, S(a) && (k = !!a.leading, v = "maxWait" in a, p = v ? ce(B(a.maxWait) || 0, t) : p, g = "trailing" in a ? !!a.trailing : g);
+    throw new TypeError(B);
+  t = M(t) || 0, S(a) && (k = !!a.leading, f = "maxWait" in a, p = f ? ce(M(a.maxWait) || 0, t) : p, m = "trailing" in a ? !!a.trailing : m);
   function y(r) {
-    var f = d, z = o;
-    return d = o = void 0, x = r, u = e.apply(z, f), u;
+    var x = l, z = i;
+    return l = i = void 0, v = r, u = e.apply(z, x), u;
   }
-  function E(r) {
-    return x = r, s = setTimeout($, t), k ? y(r) : u;
+  function D(r) {
+    return v = r, s = setTimeout($, t), k ? y(r) : u;
   }
-  function A(r) {
-    var f = r - h, z = r - x, R = t - f;
-    return v ? ue(R, p - z) : R;
+  function V(r) {
+    var x = r - h, z = r - v, I = t - x;
+    return f ? ue(I, p - z) : I;
   }
-  function I(r) {
-    var f = r - h, z = r - x;
-    return h === void 0 || f >= t || f < 0 || v && z >= p;
+  function O(r) {
+    var x = r - h, z = r - v;
+    return h === void 0 || x >= t || x < 0 || f && z >= p;
   }
   function $() {
-    var r = w();
-    if (I(r))
-      return F(r);
-    s = setTimeout($, A(r));
+    var r = _();
+    if (O(r))
+      return C(r);
+    s = setTimeout($, V(r));
   }
-  function F(r) {
-    return s = void 0, g && d ? y(r) : (d = o = void 0, u);
+  function C(r) {
+    return s = void 0, m && l ? y(r) : (l = i = void 0, u);
   }
-  function N() {
-    s !== void 0 && clearTimeout(s), x = 0, d = h = o = s = void 0;
+  function A() {
+    s !== void 0 && clearTimeout(s), v = 0, l = h = i = s = void 0;
   }
-  function K() {
-    return s === void 0 ? u : F(w());
+  function N() {
+    return s === void 0 ? u : C(_());
   }
-  function _() {
-    var r = w(), f = I(r);
-    if (d = arguments, o = this, h = r, f) {
+  function E() {
+    var r = _(), x = O(r);
+    if (l = arguments, i = this, h = r, x) {
       if (s === void 0)
-        return E(h);
-      if (v)
+        return D(h);
+      if (f)
         return s = setTimeout($, t), y(h);
     }
     return s === void 0 && (s = setTimeout($, t)), u;
   }
-  return _.cancel = N, _.flush = K, _;
+  return E.cancel = A, E.flush = N, E;
 }
 function he(e, t, a) {
-  var d = !0, o = !0;
+  var l = !0, i = !0;
   if (typeof e != "function")
-    throw new TypeError(V);
-  return S(a) && (d = "leading" in a ? !!a.leading : d, o = "trailing" in a ? !!a.trailing : o), pe(e, t, {
-    leading: d,
+    throw new TypeError(B);
+  return S(a) && (l = "leading" in a ? !!a.leading : l, i = "trailing" in a ? !!a.trailing : i), pe(e, t, {
+    leading: l,
     maxWait: t,
-    trailing: o
+    trailing: i
   });
 }
 function S(e) {
@@ -80,11 +79,11 @@ function fe(e) {
 function xe(e) {
   return typeof e == "symbol" || fe(e) && de.call(e) == Z;
 }
-function B(e) {
+function M(e) {
   if (typeof e == "number")
     return e;
   if (xe(e))
-    return q;
+    return L;
   if (S(e)) {
     var t = typeof e.valueOf == "function" ? e.valueOf() : e;
     e = S(t) ? t + "" : t;
@@ -93,14 +92,13 @@ function B(e) {
     return e === 0 ? e : +e;
   e = e.replace(ee, "");
   var a = ae.test(e);
-  return a || re.test(e) ? ie(e.slice(2), a ? 2 : 8) : te.test(e) ? q : +e;
+  return a || re.test(e) ? ie(e.slice(2), a ? 2 : 8) : te.test(e) ? L : +e;
 }
 var ve = he;
 const ge = /* @__PURE__ */ Y(ve), be = "*,*:after,*:before{box-sizing:inherit}.c-textareaWrapper{--textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--textarea-border-thickness: 1px;--textarea-resize: none;--textarea-padding-inline: var(--dt-spacing-c);--textarea-padding-block: var(--dt-spacing-b);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-interactive-form);--textarea-content-color: var(--dt-color-content-default);--textarea-placeholder-color: var(--dt-color-content-placeholder);--textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));line-height:0;padding:var(--dt-spacing-a);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);border-radius:var(--dt-radius-rounded-c);inline-size:100%}.c-textareaWrapper textarea{font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:var(--textarea-line-height);font-family:var(--dt-font-body-l-family);resize:var(--textarea-resize);border:none;background-color:var(--textarea-background-color);color:var(--textarea-content-color);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);inline-size:100%;padding-block-start:var(--textarea-padding-block);padding-block-end:var(--textarea-padding-block);padding-inline-start:var(--textarea-padding-inline);padding-inline-end:var(--textarea-padding-inline)}.c-textareaWrapper textarea:focus{box-shadow:none;outline:none}.c-textareaWrapper textarea::placeholder{color:var(--textarea-placeholder-color);opacity:1}.c-textareaWrapper.c-textarea--readonly{--textarea-background-color: var(--dt-color-container-subtle);--textarea-border-color: var(--dt-color-interactive-form)}.c-textareaWrapper.c-textarea--disabled{--textarea-background-color: var(--dt-color-disabled-01);--textarea-border-color: var(--dt-color-disabled-01);--textarea-content-color: var(--dt-color-content-disabled);--textarea-placeholder-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper:hover:not(.c-textarea--disabled,.c-textarea--readonly){--textarea-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}}.c-textareaWrapper:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper.c-textarea--large{--textarea-padding-block: var(--dt-spacing-c)}.c-textareaWrapper.c-textarea--small{--textarea-padding-block: var(--dt-spacing-a)}.c-textareaWrapper.c-textarea--resize-manual{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2))}@media (pointer: coarse){.c-textareaWrapper.c-textarea--resize-manual{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-resize: none}}.c-textareaWrapper.c-textarea--resize-auto{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: var(--textarea-height)}.c-textareaWrapper.c-textarea--error{--textarea-border-color: var(--dt-color-support-error)}", me = ["small", "medium", "large"], ye = ["auto", "manual"], ze = ["default", "success", "error"], c = {
   disabled: !1,
   size: "medium",
   resize: "auto",
-  label: "",
   value: "",
   placeholder: "",
   status: "default",
@@ -108,14 +106,14 @@ const ge = /* @__PURE__ */ Y(ve), be = "*,*:after,*:before{box-sizing:inherit}.c
   readonly: !1,
   required: !1
 };
-var ke = Object.defineProperty, n = (e, t, a, d) => {
-  for (var o = void 0, p = e.length - 1, u; p >= 0; p--)
-    (u = e[p]) && (o = u(t, a, o) || o);
-  return o && ke(t, a, o), o;
+var ke = Object.defineProperty, n = (e, t, a, l) => {
+  for (var i = void 0, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (i = u(t, a, i) || i);
+  return i && ke(t, a, i), i;
 };
-const b = "pie-textarea", O = "assistive-text", W = class W extends U(X(L)) {
+const b = "pie-textarea", j = "assistive-text", W = class W extends U(X(F)) {
   constructor() {
-    super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.label = c.label, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this.status = c.status, this._throttledResize = ge(() => {
+    super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this.status = c.status, this._throttledResize = ge(() => {
       this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
     }, 100), this.handleInput = (t, a) => {
       t ? this.value = t.target.value : a && (this.value = a), this._internals.setFormValue(this.value), this.handleResize();
@@ -161,61 +159,56 @@ const b = "pie-textarea", O = "assistive-text", W = class W extends U(X(L)) {
   disconnectedCallback() {
     this._textarea.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", () => this.handleResize());
   }
-  renderLabel(t) {
-    return t != null && t.length ? j`<pie-form-label for="${b}">${t}</pie-form-label>` : M;
-  }
   renderAssistiveText() {
-    return this.assistiveText ? j`
+    return this.assistiveText ? R`
             <pie-assistive-text
-                id="${O}"
-                variant=${m(this.status)}
+                id="${j}"
+                variant=${g(this.status)}
                 data-test-id="pie-textarea-assistive-text">
                 ${this.assistiveText}
             </pie-assistive-text>
-        ` : M;
+        ` : K;
   }
   render() {
     const {
       disabled: t,
       resize: a,
-      size: d,
-      autocomplete: o,
+      size: l,
+      autocomplete: i,
       autoFocus: p,
       name: u,
       readonly: s,
       placeholder: h,
-      value: x,
+      value: v,
       required: k,
-      label: v,
-      status: g,
-      assistiveText: y
-    } = this, E = {
+      status: f,
+      assistiveText: m
+    } = this, y = {
       "c-textareaWrapper": !0,
       "c-textarea--disabled": t,
       "c-textarea--readonly": s,
-      "c-textarea--error": g === "error",
+      "c-textarea--error": f === "error",
       [`c-textarea--resize-${a}`]: !0,
-      [`c-textarea--${d}`]: !0
+      [`c-textarea--${l}`]: !0
     };
-    return j`<div>
-            ${this.renderLabel(v)}
+    return R`<div>
             <div
-                class="${G(E)}"
+                class="${G(y)}"
                 data-test-id="pie-textarea-wrapper">
                 <textarea
                     id="${b}"
                     data-test-id="${b}"
-                    name=${m(u)}
-                    autocomplete=${m(o)}
-                    placeholder=${m(h)}
-                    .value=${H(x)}
+                    name=${g(u)}
+                    autocomplete=${g(i)}
+                    placeholder=${g(h)}
+                    .value=${H(v)}
                     ?autofocus=${p}
                     ?readonly=${s}
                     ?required=${k}
                     ?disabled=${t}
-                    aria-describedby=${m(y ? O : void 0)}
-                    aria-invalid=${g === "error" ? "true" : "false"}
-                    aria-errormessage="${m(g === "error" ? O : void 0)}"
+                    aria-describedby=${g(m ? j : void 0)}
+                    aria-invalid=${f === "error" ? "true" : "false"}
+                    aria-errormessage="${g(f === "error" ? j : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                 ></textarea>
@@ -224,62 +217,59 @@ const b = "pie-textarea", O = "assistive-text", W = class W extends U(X(L)) {
         </div>`;
   }
 };
-W.shadowRootOptions = { ...L.shadowRootOptions, delegatesFocus: !0 }, W.styles = P(be);
-let i = W;
-n([
-  l({ type: String })
-], i.prototype, "value");
+W.shadowRootOptions = { ...F.shadowRootOptions, delegatesFocus: !0 }, W.styles = P(be);
+let o = W;
 n([
-  l({ type: String })
-], i.prototype, "defaultValue");
+  d({ type: String })
+], o.prototype, "value");
 n([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled");
+  d({ type: String })
+], o.prototype, "defaultValue");
 n([
-  l({ type: String }),
-  C(b, me, c.size)
-], i.prototype, "size");
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
 n([
-  l({ type: String }),
-  C(b, ye, c.resize)
-], i.prototype, "resize");
+  d({ type: String }),
+  w(b, me, c.size)
+], o.prototype, "size");
 n([
-  l({ type: String })
-], i.prototype, "label");
+  d({ type: String }),
+  w(b, ye, c.resize)
+], o.prototype, "resize");
 n([
-  l({ type: Boolean })
-], i.prototype, "readonly");
+  d({ type: Boolean })
+], o.prototype, "readonly");
 n([
-  l({ type: Boolean })
-], i.prototype, "autoFocus");
+  d({ type: Boolean })
+], o.prototype, "autoFocus");
 n([
-  l({ type: Boolean })
-], i.prototype, "required");
+  d({ type: Boolean })
+], o.prototype, "required");
 n([
-  l({ type: String }),
-  C(b, ze, c.status)
-], i.prototype, "status");
+  d({ type: String }),
+  w(b, ze, c.status)
+], o.prototype, "status");
 n([
-  l({ type: String })
-], i.prototype, "assistiveText");
+  d({ type: String })
+], o.prototype, "assistiveText");
 n([
-  l({ type: String })
-], i.prototype, "name");
+  d({ type: String })
+], o.prototype, "name");
 n([
-  l({ type: String })
-], i.prototype, "autocomplete");
+  d({ type: String })
+], o.prototype, "autocomplete");
 n([
-  l({ type: String })
-], i.prototype, "placeholder");
+  d({ type: String })
+], o.prototype, "placeholder");
 n([
-  D("textarea")
-], i.prototype, "_textarea");
+  q("textarea")
+], o.prototype, "_textarea");
 n([
-  D("textarea")
-], i.prototype, "focusTarget");
-Q(b, i);
+  q("textarea")
+], o.prototype, "focusTarget");
+Q(b, o);
 export {
-  i as PieTextarea,
+  o as PieTextarea,
   c as defaultProps,
   ye as resizeModes,
   me as sizes,

package/dist/react.d.ts

@@ -38,7 +38,6 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
-    label: string;
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
@@ -83,7 +82,6 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     private handleChange;
     private handleKeyDown;
     disconnectedCallback(): void;
-    renderLabel(label: string): TemplateResult<1> | typeof nothing;
     renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
@@ -159,10 +157,6 @@ export declare interface TextareaProps {
      * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
      */
     required?: boolean;
-    /**
-     * The label text for the textarea field.
-     */
-    label?: string;
     /**
      * The placeholder text to display when the textarea is empty.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-form-label": "0.14.4",
+    "@justeattakeaway/pie-assistive-text": "0.8.0",
     "@justeattakeaway/pie-webc-core": "0.24.2",
     "lodash.throttle": "4.1.1"
   },

package/src/defs.ts

@@ -71,11 +71,6 @@ export interface TextareaProps {
      */
     required?: boolean;
 
-    /**
-    * The label text for the textarea field.
-    */
-    label?: string;
-
     /**
      * The placeholder text to display when the textarea is empty.
      */
@@ -94,7 +89,6 @@ export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
     resize: 'auto',
-    label: '',
     value: '',
     placeholder: '',
     status: 'default',

package/src/index.ts

@@ -8,7 +8,6 @@ import { live } from 'lit/directives/live.js';
 import throttle from 'lodash.throttle';
 
 import '@justeattakeaway/pie-assistive-text';
-import '@justeattakeaway/pie-form-label';
 import {
     validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
 } from '@justeattakeaway/pie-webc-core';
@@ -49,9 +48,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     @validPropertyValues(componentSelector, resizeModes, defaultProps.resize)
     public resize = defaultProps.resize;
 
-    @property({ type: String })
-    public label = defaultProps.label;
-
     @property({ type: Boolean })
     public readonly = defaultProps.readonly;
 
@@ -181,12 +177,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         window.removeEventListener('resize', () => this.handleResize());
     }
 
-    renderLabel (label: string) {
-        return label?.length
-            ? html`<pie-form-label for="${componentSelector}">${label}</pie-form-label>`
-            : nothing;
-    }
-
     renderAssistiveText () {
         if (!this.assistiveText) {
             return nothing;
@@ -214,7 +204,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             placeholder,
             value,
             required,
-            label,
             status,
             assistiveText,
         } = this;
@@ -229,7 +218,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         };
 
         return html`<div>
-            ${this.renderLabel(label)}
             <div
                 class="${classMap(classes)}"
                 data-test-id="pie-textarea-wrapper">