@weni/unnnic-system 3.9.2 → 3.9.3-alpha.0

package/src/components/Tab/Tab.vue

@@ -9,6 +9,7 @@
           class="tab-head"
           :class="{
             'tab-head--active': localValue === tab,
+            'tab-head--disabled': disabledTabs?.includes(tab),
           }"
           @click="change(tab)"
         >
@@ -20,10 +21,9 @@
             side="bottom"
           >
             <UnnnicIcon
-              icon="info"
+              icon="help"
               :size="size === 'sm' ? 'xs' : 'sm'"
-              filled
-              scheme="neutral-cleanest"
+              scheme="fg-base"
             />
           </UnnnicToolTip>
         </li>
@@ -65,6 +65,13 @@ export default {
     tabs: {
       type: Array,
       default: null,
+      validator: (tabs) => {
+        return tabs.every((tab) => typeof tab === 'string') && tabs.length <= 5;
+      },
+    },
+    disabledTabs: {
+      type: Array,
+      default: null,
     },
   },
   emits: ['change'],
@@ -105,6 +112,10 @@ export default {
       return '';
     },
     change(value) {
+      if (this.disabledTabs?.includes(value)) {
+        return;
+      }
+
       this.localValue = value;
       this.$emit('change', this.localValue);
     },
@@ -119,18 +130,15 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-neutral-cloudy;
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-bold;
-  font-size: $unnnic-font-size-body-lg;
-  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
-  margin-bottom: $unnnic-inset-sm;
-  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  color: $unnnic-color-fg-base;
+  font: $unnnic-font-action;
+  margin-bottom: $unnnic-space-4;
+  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-border-base;
 }
 
 .tab-content {
   display: flex;
-  gap: $unnnic-spacing-sm;
+  gap: $unnnic-space-6;
 
   margin: 0;
   padding: 0;
@@ -139,27 +147,24 @@ export default {
 
 .tab-head {
   display: flex;
-  gap: $unnnic-spacing-xs;
+  gap: $unnnic-space-2;
   align-items: center;
 
   cursor: pointer;
-  margin: $unnnic-spacing-xs $unnnic-spacing-sm;
+  padding: $unnnic-space-2 $unnnic-space-4;
 
   .unnnic-tooltip {
     display: flex;
   }
 
   &:hover {
-    color: $unnnic-color-neutral-black;
+    color: $unnnic-color-fg-emphasized;
   }
 }
 
 .tab-head--active {
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-bold;
-  color: $unnnic-color-neutral-black;
-  font-size: $unnnic-font-size-body-lg;
-  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
+  color: $unnnic-color-fg-emphasized;
+  font: $unnnic-font-action;
   transition: 0.4s;
 
   position: relative;
@@ -168,14 +173,23 @@ export default {
     content: '';
 
     position: absolute;
-    bottom: -$unnnic-spacing-xs;
-    left: -$unnnic-spacing-sm;
+    bottom: 0;
+    left: 0;
 
     display: block;
 
-    width: calc(100% + (#{$unnnic-spacing-sm} * 2));
+    width: 100%;
 
-    border-bottom: $unnnic-border-width-thin solid $unnnic-color-weni-600;
+    border-bottom: $unnnic-border-width-thin solid $unnnic-color-border-active;
+  }
+}
+
+.tab-head--disabled {
+  color: $unnnic-color-fg-muted;
+  cursor: default;
+
+  &:hover {
+    color: $unnnic-color-fg-muted;
   }
 }
 

package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm unnnic-icon__size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
       </li>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

package/src/components/TableNext/__test__/__snapshots__/TableNext.spec.js.snap

@@ -42,7 +42,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
     <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 1 of 1</p>
     <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
         <!--v-if-->
@@ -51,7 +51,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button></div>
   </section>

package/src/components/TableNext/__test__/__snapshots__/TablePagination.spec.js.snap

@@ -5,7 +5,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
   <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 10 of 100</p>
   <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
       <!--v-if-->
@@ -34,7 +34,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button></div>
 </section>"

package/src/components/Tag/DefaultTag.vue

@@ -1,144 +1,88 @@
 <template>
-  <section
-    :class="`unnnic-tag
-        ${!disabled ? `unnnic-tag-scheme--${scheme}` : `unnnic-tag--disabled`}
-        ${clickable ? 'unnnic-tag--clickable' : ''}`"
-  >
+  <section :class="`unnnic-tag unnnic-tag--${size}`">
     <section
       v-if="leftIcon"
       class="unnnic-tag__icon"
     >
       <UnnnicIcon
         :icon="leftIcon"
-        :scheme="scheme"
-        size="sm"
-      />
-    </section>
-    <span
-      :class="`unnnic-tag__label
-      ${disabled ? 'unnnic-tag__label--disabled' : ''}`"
-      >{{ text }}</span
-    >
-    <section
-      v-if="rightIcon || hasCloseIcon"
-      :class="{ 'unnnic-tag__icon': true, clickable: !rightIcon }"
-      @click.stop="hasCloseIcon ? emitClose() : () => {}"
-    >
-      <UnnnicIcon
-        :icon="rightIcon || 'close'"
-        :scheme="rightIcon ? scheme : 'neutral-darkest'"
+        scheme="fg-emphasized"
         size="sm"
       />
     </section>
+    <p :class="`unnnic-tag__label`">{{ text }}</p>
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { color as colors } from '@/assets/tokens/colors.json';
+
 import UnnnicIcon from '../Icon.vue';
 
-export default {
-  name: 'UnnnicTag',
-  components: {
-    UnnnicIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    hasCloseIcon: {
-      type: Boolean,
-      default: false,
-    },
-    scheme: {
-      type: String,
-      default: 'aux-purple',
-    },
-    leftIcon: {
-      type: String,
-      default: null,
-    },
-    rightIcon: {
-      type: String,
-      default: null,
-    },
-  },
-  methods: {
-    closeClicked() {
-      if (!this.closeClicked) return;
-      this.$emit('close-click');
-    },
-    emitClose() {
-      this.$emit('close');
-    },
-  },
-};
+import type { DefaultTagProps } from './types';
+
+const props = withDefaults(defineProps<DefaultTagProps>(), {
+  text: undefined,
+  size: 'medium',
+  scheme: 'aux-purple',
+  leftIcon: undefined,
+});
+
+const COLOR_MAPPING = [
+  { keywords: ['green'], color: colors.green[200].value },
+  { keywords: ['blue'], color: colors.blue[200].value },
+  { keywords: ['purple'], color: colors.purple[200].value },
+  { keywords: ['red', 'pink'], color: colors.red[200].value },
+  { keywords: ['orange'], color: colors.orange[200].value },
+  { keywords: ['yellow'], color: colors.yellow[200].value },
+  { keywords: ['gray'], color: colors.gray[200].value },
+  { keywords: ['teal', 'weni'], color: colors.teal[200].value },
+];
+
+const color = computed(() => {
+  const scheme = props.scheme.toLowerCase();
+
+  const match = COLOR_MAPPING.find(({ keywords }) =>
+    keywords.some((keyword) => scheme.includes(keyword)),
+  );
+
+  return match?.color ?? colors.gray[200].value;
+});
 </script>
 
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
-@each $name, $color in $scheme-colors {
-  .unnnic-tag-scheme--#{$name} {
-    background-color: rgba($color, $unnnic-opacity-level-light);
-    outline-style: solid;
-    outline-color: rgba($color, $unnnic-opacity-level-extra-light);
-    outline-width: $unnnic-border-width-thinner;
-    outline-offset: -$unnnic-border-width-thinner;
-  }
-}
-
 .unnnic-tag {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: $unnnic-space-1;
   border-radius: $unnnic-border-radius-pill;
-  padding: 0 $unnnic-spacing-xs;
+  padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
+  width: fit-content;
 
-  &--disabled {
-    background-color: $unnnic-color-background-sky;
-  }
+  background-color: v-bind(color);
 
-  &--clickable {
-    cursor: pointer;
-
-    @each $name, $color in $scheme-colors {
-      &.unnnic-tag-scheme--#{$name}:hover {
-        outline-style: solid;
-        outline-color: $unnnic-color-neutral-cleanest;
-        outline-width: $unnnic-border-width-thinner;
-        outline-offset: -$unnnic-border-width-thinner;
-      }
-    }
+  &--small {
+    padding: calc($unnnic-space-1 * 0.5) $unnnic-space-3;
   }
 
   &__label {
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-    font-weight: $unnnic-font-weight-regular;
-    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-    padding: $unnnic-spacing-stack-nano;
-    color: $unnnic-color-neutral-darkest;
-
-    &--disabled {
-      color: $unnnic-color-neutral-cloudy;
-    }
+    margin: 0;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font: $unnnic-font-caption-1;
+    color: $unnnic-color-fg-emphasized;
   }
 
   &__icon {
     display: flex;
   }
-
-  .clickable {
-    cursor: pointer;
-  }
 }
 </style>

package/src/components/Tag/Tag.vue

@@ -1,90 +1,43 @@
 <template>
-  <component
-    :is="currentComponent"
-    class="unnnic-tag-content"
-    v-bind="$attrs"
+  <UnnnicChip
+    v-if="type === 'brand' || hasCloseIcon"
+    :text="text"
+    type="multiple"
+    :isSelected="disabled || hasCloseIcon"
+    isClickable
+    @click="hasCloseIcon ? $emit('close') : $emit('click')"
+  />
+
+  <DefaultTag
+    v-else
+    :size="type === 'next' ? 'small' : size"
     :text="text"
-    :disabled="disabled"
-    :hasCloseIcon="hasCloseIcon"
     :scheme="scheme"
-    :count="count"
-    :hasBackButton="hasBackButton"
-    :clickable="clickable"
-    :tooltipText="tooltipText"
-    :enableTooltip="enableTooltip"
     :leftIcon="leftIcon"
-    :rightIcon="rightIcon"
   />
 </template>
 
-<script>
+<script setup lang="ts">
+import UnnnicChip from '../Chip/Chip.vue';
 import DefaultTag from './DefaultTag.vue';
-import IndicatorTag from './IndicatorTag.vue';
-import BrandTag from './BrandTag.vue';
-import TagNext from './TagNext.vue';
+import type { TagProps } from './types';
 
-export default {
+defineOptions({
   name: 'UnnnicTag',
-  props: {
-    type: {
-      type: String,
-      default: 'default',
-      validator(value) {
-        return ['default', 'indicator', 'brand', 'next'].indexOf(value) !== -1;
-      },
-    },
-    text: {
-      type: String,
-      default: null,
-    },
-    tooltipText: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    hasCloseIcon: {
-      type: Boolean,
-      default: false,
-    },
-    scheme: {
-      type: String,
-      default: 'aux-purple',
-    },
-    hasBackButton: {
-      type: Boolean,
-      default: false,
-    },
-    enableTooltip: {
-      type: Boolean,
-      default: false,
-    },
-    leftIcon: {
-      type: String,
-      default: '',
-    },
-    rightIcon: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    currentComponent() {
-      if (this.type === 'indicator') return IndicatorTag;
-      if (this.type === 'brand') return BrandTag;
-      if (this.type === 'next') return TagNext;
-      return DefaultTag;
-    },
-  },
-};
+});
+
+withDefaults(defineProps<TagProps>(), {
+  type: 'default',
+  size: 'medium',
+  text: undefined,
+  disabled: false,
+  scheme: 'aux-purple',
+  leftIcon: '',
+  hasCloseIcon: false,
+});
+
+defineEmits<{
+  close: [];
+  click: [];
+}>();
 </script>

package/src/components/Tag/types.ts

@@ -0,0 +1,19 @@
+export type TagType = 'default' | 'brand' | 'next';
+export type TagSize = 'small' | 'medium';
+
+export interface TagProps {
+  type?: TagType;
+  size?: TagSize;
+  text?: string;
+  disabled?: boolean;
+  scheme?: string;
+  leftIcon?: string;
+  hasCloseIcon?: boolean;
+}
+
+export interface DefaultTagProps {
+  text?: string;
+  size?: TagSize;
+  scheme?: string;
+  leftIcon?: string;
+}

package/src/components/TextArea/TextArea.vue

@@ -4,7 +4,8 @@
     :size="size"
     :disabled="disabled"
     :message="message"
-    :error="errors.join(', ') || type === 'error'"
+    :tooltip="tooltip"
+    :error="computedError"
   >
     <textarea
       ref="textarea"
@@ -18,13 +19,14 @@
       :disabled="disabled"
       :value="modelValue"
       @input="$emit('update:modelValue', fullySanitize($event.target.value))"
-    ></textarea>
+    />
 
     <template
       v-if="maxLength"
       #rightMessage
-      >{{ modelValue.length }}/{{ maxLength }}</template
     >
+      {{ modelValue.length }}/{{ maxLength }}
+    </template>
   </UnnnicFormElement>
 </template>
 
@@ -43,6 +45,14 @@ export default {
       default: 'md',
     },
 
+    resize: {
+      type: String,
+      default: 'vertical',
+      validator(value) {
+        return ['none', 'vertical'].indexOf(value) !== -1;
+      },
+    },
+
     label: {
       type: String,
     },
@@ -76,13 +86,28 @@ export default {
       },
     },
 
+    tooltip: {
+      type: String,
+      default: '',
+    },
+
     errors: {
-      type: Array,
+      type: [Array, null],
       default: () => [],
     },
   },
   emits: ['update:modelValue'],
 
+  computed: {
+    computedError() {
+      if (Array.isArray(this.errors)) {
+        return this.errors.join(', ') || this.type === 'error';
+      }
+
+      return this.errors || this.type === 'error';
+    },
+  },
+
   methods: {
     fullySanitize,
     focus() {
@@ -96,31 +121,35 @@ export default {
 @use '@/assets/scss/unnnic' as *;
 @use '@/components/Input/Input' as *;
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 .unnnic-text-area {
   &__textarea {
     @include input-base;
 
     display: block;
     width: 100%;
-    resize: vertical;
-    box-sizing: border-box;
+
+    resize: v-bind(resize);
 
     scrollbar-width: thin;
 
+    padding: $unnnic-space-3 $unnnic-space-4;
+
     &--size-md {
       @include input-md-font;
 
-      min-height: 6.25 * $unnnic-font-size;
-      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: 90px;
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: 5 * $unnnic-font-size;
-      padding: ($unnnic-spacing-xs)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: $unnnic-space-20;
     }
 
     &.unnnic-text-area__textarea--type-error {

package/src/components/TextArea/__test__/__snapshots__/TextArea.spec.js.snap

@@ -2,8 +2,16 @@
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
-  <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
-  <!--v-if-->
-  <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
+  <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
+    <p data-v-7f222291="" class="unnnic-label__label">Description</p>
+    <!--v-if-->
+  </section><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
+  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
+    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
+      <!--v-if-->
+      <!--v-if-->
+    </section>
+    <p data-v-9f8d6c86="">0/200</p>
+  </section>
 </section>"
 `;