@weni/unnnic-system 3.2.9-alpha.7 → 3.2.9

package/src/components/Input/TextInput.vue

@@ -1,5 +1,11 @@
 <template>
-  <div :class="['text-input', `size--${size}`]">
+  <div
+    :class="[
+      'text-input',
+      `size--${size}`,
+      `text-input--icon-right-size-${iconRightSize}`,
+    ]"
+  >
     <BaseInput
       v-bind="attributes"
       ref="base-input"
@@ -12,9 +18,6 @@
       class="input-itself"
       :hasIconLeft="!!iconLeft"
       :hasIconRight="!!iconRight || allowTogglePassword"
-      :maxlength="maxlength"
-      :readonly="readonly"
-      :forceActiveStatus="forceActiveStatus"
       @focus="onFocus"
       @blur="onBlur"
     />
@@ -23,7 +26,7 @@
       v-if="iconLeft"
       :scheme="iconScheme"
       :icon="iconLeft"
-      size="ant"
+      size="sm"
       :clickable="iconLeftClickable"
       :class="['icon-left', { clickable: iconLeftClickable }]"
       @click="onIconLeftClick"
@@ -33,7 +36,7 @@
       v-if="iconRightSvg"
       :scheme="iconScheme"
       :icon="iconRightSvg"
-      size="ant"
+      :size="iconRightSize"
       :clickable="iconRightClickable || allowTogglePassword"
       :class="[
         'icon-right',
@@ -89,6 +92,10 @@ export default {
       type: Boolean,
       default: null,
     },
+    iconRightSize: {
+      type: String,
+      default: 'sm',
+    },
     allowTogglePassword: {
       type: Boolean,
       default: null,
@@ -101,22 +108,6 @@ export default {
       type: String,
       default: 'md',
     },
-    maxlength: {
-      type: Number,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    forceActiveStatus: {
-      type: Boolean,
-      default: false,
-    },
   },
   emits: ['icon-left-click', 'icon-right-click'],
   data() {
@@ -127,7 +118,7 @@ export default {
   },
   computed: {
     isDisabled() {
-      return this.$attrs.disabled || this.disabled;
+      return this.$attrs.disabled;
     },
 
     iconRightSvg() {
@@ -140,22 +131,22 @@ export default {
 
     iconScheme() {
       if (this.type === 'error') {
-        return 'fg-critical';
+        return 'aux-red-500';
       }
 
       if (this.isDisabled) {
-        return 'fg-muted';
+        return 'neutral-cleanest';
       }
 
-      if (this.modelValue || this.isFocused || this.forceActiveStatus) {
-        return 'color-gray-700';
+      if (this.modelValue || this.isFocused) {
+        return 'neutral-dark';
       }
 
       if (this.hasCloudyColor) {
-        return 'fg-base';
+        return 'neutral-cloudy';
       }
 
-      return 'fg-base';
+      return 'neutral-cloudy';
     },
 
     attributes() {
@@ -192,10 +183,6 @@ export default {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
-.text-input {
-  position: relative;
-}
-
 .icon {
   &-left,
   &-right {
@@ -206,16 +193,32 @@ export default {
 
   &-left {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: $unnnic-space-4;
+    top: $unnnic-spacing-ant + 0.1875 * $unnnic-font-size;
+    left: $unnnic-inline-sm - $unnnic-border-width-thinner;
   }
 
   &-right {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: $unnnic-space-4;
+    top: $unnnic-spacing-ant + 0.1875 * $unnnic-font-size;
+    right: $unnnic-inline-sm - $unnnic-border-width-thinner;
+  }
+}
+.text-input {
+  position: relative;
+
+  &.size--sm {
+    .icon-left,
+    .icon-right {
+      top: $unnnic-spacing-xs + 0.125 * $unnnic-font-size;
+    }
+  }
+
+  &.size--sm.text-input--icon-right-size-ant .icon-right {
+    top: 0.5625 * $unnnic-font-size;
+  }
+
+  &.size--md.text-input--icon-right-size-ant .icon-right {
+    top: 0.8125 * $unnnic-font-size;
   }
 }
 </style>

package/src/components/Input/__test__/TextInput.spec.js

@@ -74,22 +74,22 @@ describe('TextInput.vue', () => {
 
   test('computes the correct iconScheme based on various states', async () => {
     await wrapper.setProps({ type: 'error' });
-    expect(wrapper.vm.iconScheme).toBe('fg-critical');
+    expect(wrapper.vm.iconScheme).toBe('aux-red-500');
 
     await wrapper.setProps({ type: 'normal' });
     await wrapper.setData({ isDisabled: true });
-    expect(wrapper.vm.iconScheme).toBe('fg-base');
+    expect(wrapper.vm.iconScheme).toBe('neutral-cloudy');
 
     await wrapper.setData({ isDisabled: false });
     await wrapper.setProps({ modelValue: 'text' });
-    expect(wrapper.vm.iconScheme).toBe('color-gray-700');
+    expect(wrapper.vm.iconScheme).toBe('neutral-dark');
 
     await wrapper.setData({ isFocused: true });
-    expect(wrapper.vm.iconScheme).toBe('color-gray-700');
+    expect(wrapper.vm.iconScheme).toBe('neutral-dark');
 
     await wrapper.setProps({ hasCloudyColor: true, modelValue: '' });
     await wrapper.setData({ isFocused: false });
-    expect(wrapper.vm.iconScheme).toBe('fg-base');
+    expect(wrapper.vm.iconScheme).toBe('neutral-cloudy');
   });
 
   test('attributes computed property returns combined attributes and props', () => {

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

@@ -2,17 +2,8 @@
 
 exports[`Input.vue > matches the snapshot 1`] = `
 "<div data-v-d890ad85="" class="unnnic-form md">
-  <section data-v-7f222291="" data-v-d890ad85="" class="unnnic-label unnnic-form__label">
-    <p data-v-7f222291="" class="unnnic-label__label">Sample Label</p>
-    <!--v-if-->
-  </section>
-  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-form-input" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" hascloudycolor="false" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
-  <section data-v-d890ad85="" class="unnnic-form__hints-container">
-    <section data-v-d890ad85="" class="unnnic-form__message-container">
-      <p data-v-d890ad85="" class="unnnic-form__message">Error message</p>
-      <!--v-if-->
-    </section>
-    <!--v-if-->
-  </section>
+  <p data-v-d890ad85="" class="unnnic-form__label">Sample Label</p>
+  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md text-input--icon-right-size-sm unnnic-form-input" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" hascloudycolor="false" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
+  <p data-v-d890ad85="" class="unnnic-form__message">Error message</p>
 </div>"
 `;

package/src/components/Input/__test__/__snapshots__/TextInput.spec.js.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" allowtogglepassword="false" hascloudycolor="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;
+exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md text-input--icon-right-size-sm"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" allowtogglepassword="false" hascloudycolor="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;

package/src/components/Label/Label.vue

@@ -1,65 +1,34 @@
 <template>
-  <section class="unnnic-label">
-    <p class="unnnic-label__label">{{ fullySanitize(props.label) }}</p>
-    <UnnnicToolTip
-      v-if="tooltip"
-      enabled
-      :text="tooltip"
-      :enableHtml="props.useHtmlTooltip"
-    >
-      <UnnnicIcon
-        icon="help"
-        size="sm"
-        scheme="fg-base"
-      />
-    </UnnnicToolTip>
-  </section>
+  <p class="unnnic-label__label">{{ fullySanitize(label) }}</p>
 </template>
 
-<script setup lang="ts">
-import { fullySanitize } from '@/utils/sanitize';
-
-import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-import UnnnicIcon from '../Icon.vue';
-
-defineOptions({
+<script>
+import { fullySanitize } from '../../utils/sanitize';
+export default {
   name: 'UnnnicLabel',
-});
-
-export interface LabelProps {
-  label?: string;
-  tooltip?: string;
-  useHtmlTooltip?: boolean;
-}
-
-const props = withDefaults(defineProps<LabelProps>(), {
-  label: '',
-  tooltip: '',
-  useHtmlTooltip: false,
-});
+  props: {
+    label: {
+      type: String,
+      default: null,
+    },
+  },
+  methods: {
+    fullySanitize,
+  },
+};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use '@/assets/scss/unnnic' as *;
 
-* {
-  box-sizing: border-box;
-  padding: $unnnic-space-0;
-  margin: $unnnic-space-0;
-}
-
 .unnnic-label {
-  display: flex;
-  align-items: center;
-  gap: $unnnic-space-2;
-  color: $unnnic-color-fg-base;
-
   &__label {
-    font: $unnnic-font-body;
-  }
-
-  :deep(.unnnic-tooltip) {
-    display: flex;
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    font-size: $unnnic-font-size-body-gt;
+    color: $unnnic-color-neutral-cloudy;
+    margin: $unnnic-spacing-stack-xs 0;
   }
 }
 </style>

package/src/components/Label/__tests__/Label.spec.js

@@ -24,7 +24,7 @@ describe('Label', () => {
   });
 
   it('applies the correct classes and styles', () => {
-    const label = wrapper.find('.unnnic-label__label');
+    const label = wrapper.findComponent('.unnnic-label__label');
     expect(label.html()).toMatchSnapshot();
   });
 });

package/src/components/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Label > applies the correct classes and styles 1`] = `"<p data-v-7f222291="" class="unnnic-label__label">Label Test</p>"`;
+exports[`Label > applies the correct classes and styles 1`] = `"<p class="unnnic-label__label">Label Test</p>"`;

package/src/components/ModalDialog/ModalDialog.vue

@@ -49,7 +49,6 @@
             data-testid="close-icon"
             icon="close"
             clickable
-            scheme="neutral-cloudy"
             @click="close()"
           />
         </header>

package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap

@@ -11,7 +11,7 @@ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
           <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="test-icon" clickable="false" size="md" scheme="neutral-darkest" data-testid="title-icon" class="unnnic-modal-dialog__container__title-icon"></unnnic-icon-stub>
           <h1 data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-text" data-testid="title-text">Test Title</h1>
         </section>
-        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-cloudy" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-darkest" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
       <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">

package/src/components/Tab/Tab.vue

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

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="material-symbols-rounded unnnic-icon-scheme--fg-base 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 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="material-symbols-rounded unnnic-icon-scheme--neutral-cleanest 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>
       <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--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
         </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
@@ -53,7 +53,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--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
         </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->

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--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
         <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
       </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
@@ -36,7 +36,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--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-dark" data-testid="icon-center" style="visibility: visible;">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-dark" data-testid="icon-center" style="visibility: visible;">
         <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
       </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->

package/src/components/TextArea/TextArea.vue

@@ -18,14 +18,13 @@
       :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>
 
@@ -97,12 +96,6 @@ 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;
@@ -110,21 +103,24 @@ export default {
     display: block;
     width: 100%;
     resize: vertical;
+    box-sizing: border-box;
 
     scrollbar-width: thin;
 
-    padding: $unnnic-space-3 $unnnic-space-4;
-
     &--size-md {
       @include input-md-font;
 
-      min-height: 100px;
+      min-height: 6.25 * $unnnic-font-size;
+      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: $unnnic-space-20;
+      min-height: 5 * $unnnic-font-size;
+      padding: ($unnnic-spacing-xs)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &.unnnic-text-area__textarea--type-error {

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

@@ -3,12 +3,7 @@
 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>
-  <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>
+  <!--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>"
 `;