@webitel/ui-sdk 26.2.12 → 26.2.13

package/dist/{vidstack-Bq6c3Bam-BZCmReL3.js → vidstack-Bq6c3Bam-B7cxzEP8.js}

@@ -5,8 +5,8 @@ var ot = (n) => {
 var Xt = (n, t, s) => t in n ? Qt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[t] = s;
 var N = (n, t, s) => Xt(n, typeof t != "symbol" ? t + "" : t, s), X = (n, t, s) => t.has(n) || ot("Cannot " + s);
 var i = (n, t, s) => (X(n, t, "read from private field"), s ? s.call(n) : t.get(n)), d = (n, t, s) => t.has(n) ? ot("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, s), c = (n, t, s, r) => (X(n, t, "write to private field"), r ? r.call(n, s) : t.set(n, s), s), a = (n, t, s) => (X(n, t, "access private method"), s);
-import { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-mdAUQvwW.js";
-import { R as ri } from "./vidstack-DqAw8m9J-DfB8IrWr.js";
+import { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-Bz5xCw3_.js";
+import { R as ri } from "./vidstack-DqAw8m9J-BjxYoxKC.js";
 let q = null, K = [], z = [];
 function ht() {
   return q ?? (q = new AudioContext());

package/dist/{vidstack-D2pY00kU-BYytRjCF.js → vidstack-D2pY00kU-g2aAQYXG.js}

@@ -5,7 +5,7 @@ var w = (t) => {
 var P = (t, e, a) => e in t ? _(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
 var u = (t, e, a) => P(t, typeof e != "symbol" ? e + "" : e, a), C = (t, e, a) => e.has(t) || w("Cannot " + a);
 var c = (t, e, a) => (C(t, e, "read from private field"), a ? a.call(t) : e.get(t)), m = (t, e, a) => e.has(t) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), y = (t, e, a, o) => (C(t, e, "write to private field"), o ? o.call(t, a) : e.set(t, a), a), s = (t, e, a) => (C(t, e, "access private method"), a);
-import { l as b, k as A, V as O, G as D, f as R, o as G } from "./install-mdAUQvwW.js";
+import { l as b, k as A, V as O, G as D, f as R, o as G } from "./install-Bz5xCw3_.js";
 function M() {
   return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
 }
@@ -94,7 +94,7 @@ class F {
   async load(e) {
     if (!c(this, n))
       throw Error("[vidstack] google cast player was not initialized");
-    return new (await import("./vidstack-google-cast-l7o6QV0q.js")).GoogleCastProvider(c(this, n), e);
+    return new (await import("./vidstack-google-cast-BPD9Sm36.js")).GoogleCastProvider(c(this, n), e);
   }
 }
 n = new WeakMap(), r = new WeakSet(), S = async function(e) {

package/dist/{vidstack-DDXt6fpN-BkCEpqiv.js → vidstack-DDXt6fpN-BhyQ95X9.js}

@@ -5,7 +5,7 @@ var g = (s) => {
 var M = (s, t, i) => t in s ? y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
 var c = (s, t, i) => M(s, typeof t != "symbol" ? t + "" : t, i), h = (s, t, i) => t.has(s) || g("Cannot " + i);
 var e = (s, t, i) => (h(s, t, "read from private field"), i ? i.call(s) : t.get(s)), l = (s, t, i) => t.has(s) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, i), p = (s, t, i, a) => (h(s, t, "write to private field"), a ? a.call(s, i) : t.set(s, i), i), u = (s, t, i) => (h(s, t, "access private method"), i);
-import { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-mdAUQvwW.js";
+import { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-Bz5xCw3_.js";
 var r, o, b, m;
 class J {
   constructor(t) {

package/dist/{vidstack-D_-9AA6_-CuVZBenS.js → vidstack-D_-9AA6_-B5H5LlZ_.js}

@@ -1,4 +1,4 @@
-import { c as d, a as i, I as l, e as m } from "./install-mdAUQvwW.js";
+import { c as d, a as i, I as l, e as m } from "./install-Bz5xCw3_.js";
 const p = /* @__PURE__ */ i(
   '<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>'
 );

package/dist/{vidstack-DqAw8m9J-DfB8IrWr.js → vidstack-DqAw8m9J-BjxYoxKC.js}

@@ -3,7 +3,7 @@ var l = (i) => {
 };
 var m = (i, t, s) => t.has(i) || l("Cannot " + s);
 var r = (i, t, s) => (m(i, t, "read from private field"), s ? s.call(i) : t.get(i)), e = (i, t, s) => t.has(i) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), h = (i, t, s, f) => (m(i, t, "write to private field"), f ? f.call(i, s) : t.set(i, s), s), c = (i, t, s) => (m(i, t, "access private method"), s);
-import { m as p, v as u } from "./install-mdAUQvwW.js";
+import { m as p, v as u } from "./install-Bz5xCw3_.js";
 var o, a, n, d;
 class F {
   constructor(t) {

package/dist/{vidstack-audio-zdkPu0oA.js → vidstack-audio-CdaspgKJ.js}

@@ -1,8 +1,8 @@
 var a = Object.defineProperty;
 var o = (i, e, t) => e in i ? a(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var r = (i, e, t) => o(i, typeof e != "symbol" ? e + "" : e, t);
-import { s as p } from "./install-mdAUQvwW.js";
-import { H as d, a as u } from "./vidstack-Bq6c3Bam-BZCmReL3.js";
+import { s as p } from "./install-Bz5xCw3_.js";
+import { H as d, a as u } from "./vidstack-Bq6c3Bam-B7cxzEP8.js";
 class n extends d {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-DTg8gRm7.js → vidstack-dash-CyF2xpLm.js}

@@ -5,9 +5,9 @@ var Y = (n) => {
 var wt = (n, t, e) => t in n ? vt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var I = (n, t, e) => wt(n, typeof t != "symbol" ? t + "" : t, e), b = (n, t, e) => t.has(n) || Y("Cannot " + e);
 var i = (n, t, e) => (b(n, t, "read from private field"), e ? e.call(n) : t.get(n)), f = (n, t, e) => t.has(n) ? Y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, e), p = (n, t, e, r) => (b(n, t, "write to private field"), r ? r.call(n, e) : t.set(n, e), e), h = (n, t, e) => (b(n, t, "access private method"), e);
-import { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-mdAUQvwW.js";
-import { VideoProvider as $t } from "./vidstack-video-C6v9_v4c.js";
-import { R as jt } from "./vidstack-DqAw8m9J-DfB8IrWr.js";
+import { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-Bz5xCw3_.js";
+import { VideoProvider as $t } from "./vidstack-video-CDJVFZPt.js";
+import { R as jt } from "./vidstack-DqAw8m9J-BjxYoxKC.js";
 function W(n) {
   try {
     return new Intl.DisplayNames(navigator.languages, { type: "language" }).of(n) ?? null;

package/dist/{vidstack-google-cast-l7o6QV0q.js → vidstack-google-cast-BPD9Sm36.js}

@@ -5,9 +5,9 @@ var Q = (d) => {
 var vt = (d, t, s) => t in d ? Lt(d, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : d[t] = s;
 var G = (d, t, s) => vt(d, typeof t != "symbol" ? t + "" : t, s), O = (d, t, s) => t.has(d) || Q("Cannot " + s);
 var e = (d, t, s) => (O(d, t, "read from private field"), s ? s.call(d) : t.get(d)), T = (d, t, s) => t.has(d) ? Q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(d) : t.set(d, s), l = (d, t, s, i) => (O(d, t, "write to private field"), i ? i.call(d, s) : t.set(d, s), s), r = (d, t, s) => (O(d, t, "access private method"), s);
-import { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-mdAUQvwW.js";
-import { R as wt } from "./vidstack-DqAw8m9J-DfB8IrWr.js";
-import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-BYytRjCF.js";
+import { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-Bz5xCw3_.js";
+import { R as wt } from "./vidstack-DqAw8m9J-BjxYoxKC.js";
+import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-g2aAQYXG.js";
 var g, _, at;
 class _t {
   constructor(t) {

package/dist/{vidstack-hls-BwVfbStc.js → vidstack-hls-CvrjEqso.js}

@@ -5,9 +5,9 @@ var q = (n) => {
 var ot = (n, t, i) => t in n ? rt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
 var _ = (n, t, i) => ot(n, typeof t != "symbol" ? t + "" : t, i), R = (n, t, i) => t.has(n) || q("Cannot " + i);
 var e = (n, t, i) => (R(n, t, "read from private field"), i ? i.call(n) : t.get(n)), f = (n, t, i) => t.has(n) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i), p = (n, t, i, s) => (R(n, t, "write to private field"), s ? s.call(n, i) : t.set(n, i), i), a = (n, t, i) => (R(n, t, "access private method"), i);
-import { i as ht, b as C, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-mdAUQvwW.js";
-import { VideoProvider as yt } from "./vidstack-video-C6v9_v4c.js";
-import { R as gt } from "./vidstack-DqAw8m9J-DfB8IrWr.js";
+import { i as ht, b as C, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-Bz5xCw3_.js";
+import { VideoProvider as yt } from "./vidstack-video-CDJVFZPt.js";
+import { R as gt } from "./vidstack-DqAw8m9J-BjxYoxKC.js";
 const Lt = (n) => ut(n);
 var T, h, o, D, b, r, E, M, U, F, Q, K, W, B, J, X, Y, z, G, Z, tt;
 class St {

package/dist/{vidstack-video-C6v9_v4c.js → vidstack-video-CDJVFZPt.js}

@@ -5,8 +5,8 @@ var b = (i) => {
 var N = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
 var y = (i, t, e) => N(i, typeof t != "symbol" ? t + "" : t, e), E = (i, t, e) => t.has(i) || b("Cannot " + e);
 var s = (i, t, e) => (E(i, t, "read from private field"), e ? e.call(i) : t.get(i)), r = (i, t, e) => t.has(i) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), c = (i, t, e, n) => (E(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e), p = (i, t, e) => (E(i, t, "access private method"), e);
-import { s as U, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-mdAUQvwW.js";
-import { H as _, a as B } from "./vidstack-Bq6c3Bam-BZCmReL3.js";
+import { s as U, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-Bz5xCw3_.js";
+import { H as _, a as B } from "./vidstack-Bq6c3Bam-B7cxzEP8.js";
 var P, f, k, D, H;
 class G {
   constructor(t, e) {

package/dist/{vidstack-vimeo-Cy5Loo_h.js → vidstack-vimeo-B3AMYq9Z.js}

@@ -5,9 +5,9 @@ var N = (r) => {
 var de = (r, c, e) => c in r ? ue(r, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[c] = e;
 var b = (r, c, e) => de(r, typeof c != "symbol" ? c + "" : c, e), S = (r, c, e) => c.has(r) || N("Cannot " + e);
 var t = (r, c, e) => (S(r, c, "read from private field"), e ? e.call(r) : c.get(r)), f = (r, c, e) => c.has(r) ? N("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(r) : c.set(r, e), u = (r, c, e, i) => (S(r, c, "write to private field"), i ? i.call(r, e) : c.set(r, e), e), o = (r, c, e) => (S(r, c, "access private method"), e);
-import { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-mdAUQvwW.js";
-import { R as me } from "./vidstack-DqAw8m9J-DfB8IrWr.js";
-import { E as we } from "./vidstack-DDXt6fpN-BkCEpqiv.js";
+import { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-Bz5xCw3_.js";
+import { R as me } from "./vidstack-DqAw8m9J-BjxYoxKC.js";
+import { E as we } from "./vidstack-DDXt6fpN-BhyQ95X9.js";
 import { resolveVimeoVideoId as Pe, getVimeoVideoInfo as Te } from "./vidstack-krOAtKMi-B4IZWKdc.js";
 const Ce = [
   "bufferend",

package/dist/{vidstack-youtube-DtQ6OT2A.js → vidstack-youtube-CLo-FbfO.js}

@@ -5,8 +5,8 @@ var B = (r) => {
 var q = (r, n, e) => n in r ? A(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
 var T = (r, n, e) => q(r, typeof n != "symbol" ? n + "" : n, e), M = (r, n, e) => n.has(r) || B("Cannot " + e);
 var s = (r, n, e) => (M(r, n, "read from private field"), e ? e.call(r) : n.get(r)), p = (r, n, e) => n.has(r) ? B("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, e), l = (r, n, e, t) => (M(r, n, "write to private field"), t ? t.call(r, e) : n.set(r, e), e), o = (r, n, e) => (M(r, n, "access private method"), e);
-import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-mdAUQvwW.js";
-import { E as Z } from "./vidstack-DDXt6fpN-BkCEpqiv.js";
+import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-Bz5xCw3_.js";
+import { E as Z } from "./vidstack-DDXt6fpN-BhyQ95X9.js";
 import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
 const b = {
   Ended: 0,

package/dist/{vuex.esm-bundler-HOJpxpZD.js → vuex.esm-bundler-DPqy4wnP.js}

@@ -1,4 +1,4 @@
-import { p as d } from "./install-mdAUQvwW.js";
+import { p as d } from "./install-Bz5xCw3_.js";
 import { inject as lt, effectScope as dt, reactive as vt, watch as J, computed as pt } from "vue";
 function ht() {
   return W().__VUE_DEVTOOLS_GLOBAL_HOOK__;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "26.2.12",
+  "version": "26.2.13",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.105",
-    "@webitel/styleguide": "^26.2.2",
+    "@webitel/styleguide": "^26.2.4",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/components/index.js

@@ -38,18 +38,22 @@ import WtImage from './wt-image/wt-image.vue';
 import WtIndicator from './wt-indicator/wt-indicator.vue';
 import WtInput from './wt-input/wt-input.vue';
 import WtInputInfo from './wt-input-info/wt-input-info.vue';
+import WtInputNumber from './wt-input-number/wt-input-number.vue';
+import WtInputText from './wt-input-text/wt-input-text.vue';
 import WtIntersectionObserver from './wt-intersection-observer/wt-intersection-observer.vue';
 import WtItemLink from './wt-item-link/wt-item-link.vue';
 import WtLabel from './wt-label/wt-label.vue';
 import WtLoadBar from './wt-load-bar/wt-load-bar.vue';
 import WtLoader from './wt-loader/wt-loader.vue';
 import WtLogo from './wt-logo/wt-logo.vue';
+import WtMessage from './wt-message/wt-message.vue';
 import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
 import WtNotification from './wt-notification/wt-notification.vue';
 import WtNotificationsBar from './wt-notifications-bar/wt-notifications-bar.vue';
 import WtPageHeader from './wt-page-header/wt-page-header.vue';
 import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
 import WtPagination from './wt-pagination/wt-pagination.vue';
+import WtPassword from './wt-password/wt-password.vue';
 import WtPlayer from './wt-player/wt-player.vue';
 import WtPopover from './wt-popover/wt-popover.vue';
 import WtPopup from './wt-popup/wt-popup.vue';
@@ -86,6 +90,10 @@ const Components = {
   WtIcon,
   WtIndicator,
   WtInputInfo,
+  WtInputNumber,
+  WtInputText,
+  WtPassword,
+  WtMessage,
   WtButton,
   WtChip,
   WtConfirmDialog,
@@ -189,12 +197,15 @@ export {
   WtIndicator,
   WtInput,
   WtInputInfo,
+  WtInputNumber,
+  WtInputText,
   WtIntersectionObserver,
   WtItemLink,
   WtLabel,
   WtLoadBar,
   WtLoader,
   WtLogo,
+  WtMessage,
   WtNavigationBar,
   WtNavigationMenu,
   WtNotification,
@@ -202,6 +213,7 @@ export {
   WtPageHeader,
   WtPageWrapper,
   WtPagination,
+  WtPassword,
   WtPlayer,
   WtPopover,
   WtPopup,

package/src/components/wt-input-number/wt-input-number.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="wt-input-number">
+    <wt-label
+      v-if="hasLabel"
+      :disabled="disabled"
+      :for="inputId"
+      :invalid="invalid"
+    >
+      <slot
+        name="label"
+        v-bind="{ label }"
+      >
+        {{ requiredLabel }}
+      </slot>
+    </wt-label>
+    <p-input-group>
+      <p-input-group-addon 
+        v-if="$slots.prefix"
+        class="wt-input-number__addon"
+      >
+        <slot name="prefix" />
+      </p-input-group-addon>
+      <p-input-number
+        :id="inputId"
+        ref="inputNumber"
+        v-model="model"
+        :disabled="disabled"
+        :invalid="invalid"
+        :min="min"
+        :max="max"
+        :step="step"
+        :min-fraction-digits="minFractionDigits"
+        :max-fraction-digits="maxFractionDigits"
+        :placeholder="placeholder || label"
+        :show-buttons="showButtons"
+        input-class="wt-input-number__input"
+        v-bind="$attrs"
+        @keyup="handleKeyup"
+      >
+      <template #incrementbuttonicon>
+          <wt-icon
+            :size="ComponentSize.SM"
+            :disabled="disabled"
+            icon="arrow-up"
+          />
+      </template>
+      <template #decrementbuttonicon>
+          <wt-icon
+            :size="ComponentSize.SM"
+            :disabled="disabled"
+            icon="arrow-down"
+          />
+      </template>
+      </p-input-number>
+      <p-input-group-addon 
+        v-if="$slots.suffix"
+        class="wt-input-number__addon"
+      >
+        <slot name="suffix" />
+      </p-input-group-addon>
+    </p-input-group>
+    <wt-message
+      v-if="isValidation && validationText"
+      :color="getMessageColor"
+      :variant="MessageVariant.SIMPLE"
+      :size="ComponentSize.SM"
+    >
+      {{ validationText }}
+    </wt-message>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RegleFieldStatus } from '@regle/core';
+import type { InputNumberProps } from 'primevue';
+import { computed, defineModel, toRefs, useSlots, useTemplateRef } from 'vue';
+
+import { useInputControl } from '../../composables';
+import { ComponentSize, MessageColor,MessageVariant } from '../../enums';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
+
+interface WtInputNumberProps extends /* @vue-ignore */ InputNumberProps {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  minFractionDigits?: number;
+  maxFractionDigits?: number;
+  showButtons?: boolean;
+  v?: Record<string, unknown>;
+  regleValidation?: RegleFieldStatus<number>;
+  customValidators?: unknown[];
+}
+
+const props = withDefaults(defineProps<WtInputNumberProps>(), {
+  label: '',
+  placeholder: '',
+  disabled: false,
+  required: false,
+  min: undefined,
+  max: undefined,
+  step: 1,
+  minFractionDigits: undefined,
+  maxFractionDigits: undefined,
+  showButtons: true,
+  v: null,
+  regleValidation: null,
+  customValidators: () => [],
+});
+
+const model = defineModel<number | null>({ default: null });
+
+const inputNumber = useTemplateRef('inputNumber');
+
+const inputId = `input-number-${Math.random().toString(36).slice(2, 11)}`;
+
+const slots = useSlots();
+
+const { v, customValidators, regleValidation } = toRefs(props);
+
+const {
+  isValidation,
+  invalid,
+  validationText,
+} = useValidation({
+  v,
+  customValidators,
+  regleValidation,
+});
+
+const {
+  focus,
+  handleKeyup
+} = useInputControl(inputNumber);
+
+const hasLabel = computed(() => {
+  return props.label || slots.label;
+});
+
+const requiredLabel = computed(() => {
+  return props.required ? `${props.label}*` : props.label;
+});
+
+const getMessageColor = computed(() => {
+  return invalid.value ? MessageColor.ERROR : MessageColor.SECONDARY;
+});
+
+defineExpose({
+  focus,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../css/styleguide/styleguide' as *;
+
+.wt-input-number__addon {
+  @extend %typo-body-1;
+  @include wt-placeholder;
+}
+
+:deep(.wt-input-number__input) {
+  @extend %typo-body-1;
+  @include wt-placeholder;
+}
+</style>

package/src/components/wt-input-text/wt-input-text.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="wt-input-text">
+    <wt-label
+      v-if="hasLabel"
+      :disabled="disabled"
+      :for="inputId"
+      :invalid="invalid"
+    >
+      <slot
+        name="label"
+        v-bind="{ label }"
+      >
+        {{ requiredLabel }}
+      </slot>
+    </wt-label>
+    <p-input-group>
+      <p-input-group-addon 
+        v-if="$slots.prefix" 
+        class="wt-input-text__addon"
+      >
+        <slot name="prefix" />
+      </p-input-group-addon>
+      <p-input-text
+        :id="inputId"
+        ref="inputText"
+        :model-value="model"
+        :disabled="disabled"
+        :invalid="invalid"
+        :placeholder="placeholder || label"
+        class="wt-input-text__input"
+        v-bind="$attrs"
+        @update:model-value="inputHandler"
+        @keyup="handleKeyup"
+      />
+      <p-input-group-addon 
+        v-if="$slots.suffix"
+        class="wt-input-text__addon"
+      >
+        <slot name="suffix" />
+      </p-input-group-addon>
+    </p-input-group>
+    <wt-message
+      v-if="isValidation && validationText"
+      :color="getMessageColor"
+      :variant="MessageVariant.SIMPLE"
+      :size="ComponentSize.SM"
+    >
+      {{ validationText }}
+    </wt-message>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RegleFieldStatus } from '@regle/core';
+import type { InputTextProps } from 'primevue';
+import { computed, defineModel, toRefs, useSlots, useTemplateRef } from 'vue';
+
+import { useInputControl } from '../../composables';
+import { ComponentSize,MessageColor, MessageVariant } from '../../enums';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
+
+interface WtInputTextProps extends /* @vue-ignore */ InputTextProps {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  preventTrim?: boolean;
+  v?: Record<string, unknown>;
+  regleValidation?: RegleFieldStatus<string>;
+  customValidators?: unknown[];
+}
+
+const props = withDefaults(defineProps<WtInputTextProps>(), {
+  label: '',
+  placeholder: '',
+  disabled: false,
+  required: false,
+  preventTrim: false,
+  v: null,
+  regleValidation: null,
+  customValidators: () => [],
+});
+
+const model = defineModel<string>({ default: '' });
+
+const inputText = useTemplateRef('inputText');
+
+const inputId = `input-text-${Math.random().toString(36).slice(2, 11)}`;
+
+const emit = defineEmits(['update:modelValue']);
+
+const slots = useSlots();
+
+const { v, customValidators, regleValidation } = toRefs(props);
+
+const {
+  isValidation,
+  invalid,
+  validationText,
+} = useValidation({
+  v,
+  customValidators,
+  regleValidation,
+});
+
+const {
+  focus,
+  handleKeyup
+} = useInputControl(inputText);
+
+const hasLabel = computed(() => {
+  return props.label || slots.label;
+});
+
+const requiredLabel = computed(() => {
+  return props.required ? `${props.label}*` : props.label;
+});
+
+const inputHandler = (value) => {
+  const handledValue = props.preventTrim
+    ? value
+    : value.trim();
+  emit('update:modelValue', handledValue);
+}
+
+const getMessageColor = computed(() => {
+  return invalid.value ? MessageColor.ERROR : MessageColor.SECONDARY;
+});
+
+defineExpose({
+  focus,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../css/styleguide/styleguide' as *;
+
+.wt-input-text__addon {
+  @extend %typo-body-1;
+  @include wt-placeholder;
+}
+
+:deep(.wt-input-text__input) {
+  @extend %typo-body-1;
+  @include wt-placeholder;
+}
+</style>

package/src/components/wt-message/wt-message.vue

@@ -0,0 +1,40 @@
+<template>
+  <p-message
+    :severity="color"
+    :variant="variant"
+    :size="primevueSizeMap[size]"
+    v-bind="$attrs"
+  >
+    <slot />
+    <template #closeicon>
+      <wt-icon 
+        icon="close"
+        :size="ComponentSize.SM"
+      />
+    </template>
+  </p-message>
+</template>
+
+<script setup lang="ts">
+import type { MessageProps } from 'primevue';
+
+import { ComponentSize,MessageColor, MessageVariant } from '../../enums';
+
+interface WtMessageProps extends /* @vue-ignore */ MessageProps {
+  color?: MessageColor;
+  variant?: MessageVariant;
+  size?: ComponentSize;
+}
+
+withDefaults(defineProps<WtMessageProps>(), {
+  color: MessageColor.SECONDARY,
+  variant: MessageVariant.FILLED,
+  size: ComponentSize.MD,
+});
+
+const primevueSizeMap = {
+  [ComponentSize.SM]: 'small',
+  [ComponentSize.MD]: 'normal',
+  [ComponentSize.LG]: 'large',
+}
+</script>