@ironsource/shared-ui 2.1.3-rc.2 → 2.1.3-rc.3

package/FieldMaxLength.vue_vue_type_style_index_0_scoped_f3c4001a_lang.css

@@ -0,0 +1 @@
+.max-length[data-v-f3c4001a]{display:flex;justify-content:flex-end;color:var(--text-secondary)}.max-length__divider[data-v-f3c4001a]{margin:0 -3px}

package/TextArea.vue_vue_type_style_index_0_scoped_eb62e4c0_lang.css

@@ -0,0 +1 @@
+.label[data-v-eb62e4c0]{color:#41454d}.disabled[data-v-eb62e4c0]{opacity:70%}.textarea-with-label-container[data-v-eb62e4c0]{display:flex;flex-direction:column}.textarea-with-label-container .label-container[data-v-eb62e4c0]{white-space:nowrap;display:flex;align-items:center;height:24px}.textarea-with-label-container .label-container .label[data-v-eb62e4c0]{margin-bottom:4px}.textarea-with-label-container .textarea[data-v-eb62e4c0]{padding:.5rem 12px;height:96px;border:none;border-radius:.5rem;background:#f1f3f4;color:#53575b;font-family:HelveticaNeue,sans-serif;font-size:.8125rem}.textarea-with-label-container .textarea[data-v-eb62e4c0]:focus{outline:none;background:linear-gradient(0deg,#3083ff 0,#3083ff 2px,#f1f3f4 0)}.textarea-with-label-container .textarea[data-v-eb62e4c0]:disabled{color:#8e959d}.textarea-with-label-container .textarea[data-v-eb62e4c0]::placeholder{color:#8e959d}.textarea-with-label-container .extra-text-container[data-v-eb62e4c0]{line-height:16px;margin-left:4px}.textarea-with-label-container .extra-text-container .error[data-v-eb62e4c0]{color:#da564f}.textarea-with-label-container .extra-text-container .help[data-v-eb62e4c0]{color:#696a6b}

package/TextAreaV4.vue_vue_type_style_index_0_scoped_6e91a617_lang.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-6e91a617],.font-chart-2[data-v-6e91a617],.font-chart-1[data-v-6e91a617]{font-family:Inter,sans-serif;font-weight:700}.font-chip-label[data-v-6e91a617],.font-table-label[data-v-6e91a617],.font-button[data-v-6e91a617],.font-heading-6[data-v-6e91a617],.font-heading-5[data-v-6e91a617],.font-heading-4[data-v-6e91a617],.font-heading-3[data-v-6e91a617],.font-heading-2[data-v-6e91a617],.font-heading-1[data-v-6e91a617],.font-title[data-v-6e91a617]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-6e91a617],.font-input-label[data-v-6e91a617],.font-overline[data-v-6e91a617],.font-subtitle-2[data-v-6e91a617],.font-subtitle-1[data-v-6e91a617]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-6e91a617],.font-body-2[data-v-6e91a617],.textarea[data-v-6e91a617],.font-body-1[data-v-6e91a617]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-6e91a617]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-6e91a617]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-6e91a617]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-6e91a617]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-6e91a617]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-6e91a617]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-6e91a617]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.textarea[data-v-6e91a617],.font-body-1[data-v-6e91a617]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-6e91a617]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-6e91a617]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-6e91a617]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-6e91a617]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-6e91a617]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-6e91a617]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-6e91a617]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-6e91a617]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-6e91a617]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-6e91a617]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-6e91a617],.font-tab-label2[data-v-6e91a617]{font-size:.875rem;line-height:1rem}.font-chip-label[data-v-6e91a617]{font-size:.75rem;line-height:1rem}h1[data-v-6e91a617],h2[data-v-6e91a617],h3[data-v-6e91a617],h4[data-v-6e91a617],h5[data-v-6e91a617],h6[data-v-6e91a617]{margin:0}.textarea-field[data-v-6e91a617]{display:flex;flex-direction:column}.textarea[data-v-6e91a617]{background:var(--default-main);color:var(--text-primary);padding:var(--spacing-125) var(--spacing-100);height:calc(var(--spacing-900) - 1px);width:100%;border:none;border-radius:var(--border-radius-md);outline:1px solid var(--action-outlined-border)}.textarea[data-v-6e91a617]:hover{outline:1px solid var(--action-active)}.textarea[data-v-6e91a617]:focus{outline:2px solid var(--primary-main)}.textarea[data-v-6e91a617]::placeholder{color:var(--text-secondary)}.textarea--disabled[data-v-6e91a617]{color:var(--text-disabled)}.textarea--disabled[data-v-6e91a617]::placeholder{color:var(--text-disabled)}.textarea--disabled[data-v-6e91a617]:hover{outline:1px solid var(--action-outlined-border)}.textarea--variant-success[data-v-6e91a617],.textarea--variant-success[data-v-6e91a617]:hover,.textarea--variant-success[data-v-6e91a617]:focus{outline:2px solid var(--success-dark)}.textarea--variant-error[data-v-6e91a617],.textarea--variant-error[data-v-6e91a617]:hover,.textarea--variant-error[data-v-6e91a617]:focus{outline:2px solid var(--error-main)}.textarea--variant-warning[data-v-6e91a617],.textarea--variant-warning[data-v-6e91a617]:hover,.textarea--variant-warning[data-v-6e91a617]:focus{outline:2px solid var(--warning-dark)}.footer[data-v-6e91a617]{display:flex;justify-content:flex-end;align-items:center;margin:var(--spacing-50) 0}

package/TextField.vue_vue_type_style_index_0_scoped_dca4c102_lang.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-dca4c102],.font-chart-2[data-v-dca4c102],.font-chart-1[data-v-dca4c102]{font-family:Inter,sans-serif;font-weight:700}.font-chip-label[data-v-dca4c102],.font-table-label[data-v-dca4c102],.font-button[data-v-dca4c102],.font-heading-6[data-v-dca4c102],.font-heading-5[data-v-dca4c102],.font-heading-4[data-v-dca4c102],.font-heading-3[data-v-dca4c102],.font-heading-2[data-v-dca4c102],.font-heading-1[data-v-dca4c102],.font-title[data-v-dca4c102]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-dca4c102],.font-input-label[data-v-dca4c102],.font-overline[data-v-dca4c102],.font-subtitle-2[data-v-dca4c102],.font-subtitle-1[data-v-dca4c102]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-dca4c102],.font-body-2[data-v-dca4c102],.input-container .input[data-v-dca4c102],.font-body-1[data-v-dca4c102]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-dca4c102]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-dca4c102]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-dca4c102]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-dca4c102]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-dca4c102]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-dca4c102]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-dca4c102]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.input-container .input[data-v-dca4c102],.font-body-1[data-v-dca4c102]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-dca4c102]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-dca4c102]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-dca4c102]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-dca4c102]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-dca4c102]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-dca4c102]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-dca4c102]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-dca4c102]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-dca4c102]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-dca4c102]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-dca4c102],.font-tab-label2[data-v-dca4c102]{font-size:.875rem;line-height:1rem}.font-chip-label[data-v-dca4c102]{font-size:.75rem;line-height:1rem}h1[data-v-dca4c102],h2[data-v-dca4c102],h3[data-v-dca4c102],h4[data-v-dca4c102],h5[data-v-dca4c102],h6[data-v-dca4c102]{margin:0}.disabled .input[data-v-dca4c102]::placeholder{color:var(--text-disabled)}.disabled .input-container[data-v-dca4c102]{cursor:no-drop;background-color:var(--action-disabled-background)}.disabled .input-container[data-v-dca4c102]:hover{outline:1px solid var(--action-outlined-border);background-color:var(--action-disabled-background)}.input-size-small[data-v-dca4c102]{height:28px}.input-size-medium[data-v-dca4c102]{height:32px}.input-size-large[data-v-dca4c102]{height:40px}.input-with-label-container[data-v-dca4c102]{display:flex;flex-direction:column}.input-container[data-v-dca4c102]{flex-grow:2;display:flex;flex-direction:row;align-items:center;border-radius:var(--border-radius-md);background:var(--default-main);outline:1px solid var(--action-outlined-border);outline-offset:-1px;padding:0 var(--spacing-100)}.input-container[data-v-dca4c102]:hover{outline:1px solid var(--action-active);background-color:var(--action-hover)}.input-container .input[data-v-dca4c102]{padding:0;width:100%;border:none;background:transparent;color:var(--text-primary);line-height:normal}.input-container .input[data-v-dca4c102]:focus{outline:none}.input-container .input[data-v-dca4c102]:disabled{color:var(--text-disabled);cursor:no-drop}.input-container .input.view-only[data-v-dca4c102]{color:var(--text-disabled)}.input-container .input[type=number][data-v-dca4c102]::-webkit-inner-spin-button{opacity:.7;transform:scale(1.1)}.input-container .hide-arrows.input[type=number][data-v-dca4c102]::-webkit-inner-spin-button,.input-container .hide-arrows.input[type=number][data-v-dca4c102]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.input-container .input[type=password][data-v-dca4c102]{letter-spacing:4px}.input-container[data-v-dca4c102] ::placeholder{color:var(--text-secondary);letter-spacing:normal}.input-container .label-inside[data-v-dca4c102]::placeholder{color:var(--text-primary)}.input-container .icon-container[data-v-dca4c102]{display:flex;align-items:center;color:var(--text-secondary)}.input-container .icon-before[data-v-dca4c102]{padding-right:var(--spacing-100)}.input-container .icon-after[data-v-dca4c102]{padding-left:var(--spacing-100)}.prefix-text[data-v-dca4c102]{color:var(--text-secondary, #646464);margin-right:var(--spacing-100)}.suffix-text[data-v-dca4c102]{color:var(--text-secondary, #646464);margin-left:var(--spacing-100)}.focused[data-v-dca4c102],.focused[data-v-dca4c102]:hover{outline:2px solid var(--primary-main);background-color:var(--action-hover)}.error-icon.error-icon[data-v-dca4c102],.error-icon.error-icon[data-v-dca4c102]:hover{color:var(--error-main)}.confirm-icon.confirm-icon[data-v-dca4c102]{padding-left:.25rem}.confirm-icon.confirm-icon[data-v-dca4c102]:hover{color:var(--primary-main)}.label-direction-left[data-v-dca4c102]{flex-direction:row;align-items:center;justify-content:space-between}.apply-button[data-v-dca4c102]{cursor:pointer;color:var(--primary-main);width:var(--spacing-250);height:var(--spacing-250)}.inline-error[data-v-dca4c102]{cursor:pointer;color:var(--error-main);display:flex;justify-content:center;align-items:center}.footer[data-v-dca4c102]{display:flex;justify-content:flex-end;align-items:center;margin:var(--spacing-50) 0}.password-visibility-toggle[data-v-dca4c102]{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.variant-success .input-container[data-v-dca4c102],.variant-success .input-container[data-v-dca4c102]:hover{outline:2px solid var(--success-dark)}.variant-error .input-container[data-v-dca4c102],.variant-error .input-container[data-v-dca4c102]:hover{outline:2px solid var(--error-main)}.variant-warning .input-container[data-v-dca4c102],.variant-warning .input-container[data-v-dca4c102]:hover{outline:2px solid var(--warning-dark)}

package/components/input/v4/TextField.vue.d.ts

@@ -128,13 +128,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hoverHelpTextPlacement: TooltipPositions;
     feedbackText: string;
     feedbackVariant: FeedbackVariant;
+    maxLength: number;
     viewOnly: boolean;
     labelDirection: LabelDirection;
     hideNumberArrows: boolean;
     step: number;
     onlyDigits: boolean;
     suffix: string;
-    maxLength: number;
     showApply: boolean;
     inlineError: boolean;
     inlineErrorText: string;

package/components/input/v4/TextField.vue.js

@@ -1,7 +1,7 @@
 import e from "./TextField.vue2.js";
 /* empty css                */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TextField.vue_vue_type_style_index_0_scoped_473bab9b_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-473bab9b"]]);
+// import "../../../TextField.vue_vue_type_style_index_0_scoped_dca4c102_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-dca4c102"]]);
 export {
-  p as default
+  s as default
 };

package/components/input/v4/TextField.vue2.js

@@ -1,31 +1,29 @@
- import "../../../TextField.vue_vue_type_style_index_0_scoped_473bab9b_lang.css"; import { defineComponent as K, computed as w, ref as G, openBlock as l, createElementBlock as o, mergeProps as y, unref as t, createBlock as u, createCommentVNode as n, createElementVNode as g, normalizeClass as M, renderSlot as F, withCtx as v, createTextVNode as h, toDisplayString as x, withKeys as W, withModifiers as S, createVNode as b, pushScopeId as j, popScopeId as q } from "vue";
-import p from "../../icon/v4/IconV4.vue.js";
-import J from "../../tooltip/v4/TooltipV4.vue.js";
-import T from "../../typography/v4/Typography.vue.js";
+ import "../../../TextField.vue_vue_type_style_index_0_scoped_dca4c102_lang.css"; import { defineComponent as K, computed as h, ref as M, openBlock as l, createElementBlock as r, mergeProps as y, unref as t, createBlock as d, createCommentVNode as n, createElementVNode as L, normalizeClass as G, renderSlot as V, withCtx as b, createTextVNode as C, toDisplayString as E, withKeys as W, withModifiers as F, createVNode as p } from "vue";
+import v from "../../icon/v4/IconV4.vue.js";
+import j from "../../tooltip/v4/TooltipV4.vue.js";
+import $ from "../../typography/v4/Typography.vue.js";
 import { InputTestIdModifiers as f } from "../../../testids/index.js";
-import { inputCommon as Q } from "../common/Input.common.js";
-import U from "../../shared/FieldLabel.vue.js";
-import X from "../../shared/FieldHelpText.vue.js";
-import { useTestIdAttrs as Y } from "../../../utils/testIds.js";
-const Z = (e) => (j("data-v-473bab9b"), e = e(), q(), e), _ = {
+import { inputCommon as q } from "../common/Input.common.js";
+import J from "../../shared/FieldLabel.vue.js";
+import Q from "../../shared/FieldHelpText.vue.js";
+import U from "../../shared/FieldMaxLength.vue.js";
+import { useTestIdAttrs as X } from "../../../utils/testIds.js";
+const Y = {
   key: 0,
   class: "icon-container icon-before"
-}, ee = ["value", "placeholder", "disabled", "type", "step", "maxlength"], te = ["onClick"], le = {
+}, Z = ["value", "placeholder", "disabled", "type", "step", "maxlength"], _ = ["onClick"], ee = {
   key: 3,
   class: "inline-error"
-}, ae = {
+}, te = {
   key: 6,
   class: "icon-container icon-after"
-}, ne = {
+}, le = {
   key: 1,
   class: "footer"
-}, ie = {
-  key: 1,
-  class: "max-length"
-}, oe = /* @__PURE__ */ Z(() => /* @__PURE__ */ g("span", { class: "max-length__divider" }, "/", -1)), de = {
+}, ae = {
   inheritAttrs: !1
-}, xe = /* @__PURE__ */ K({
-  ...de,
+}, ye = /* @__PURE__ */ K({
+  ...ae,
   __name: "TextField",
   props: {
     modelValue: { default: "" },
@@ -55,31 +53,31 @@ const Z = (e) => (j("data-v-473bab9b"), e = e(), q(), e), _ = {
     inlineErrorText: { default: "" }
   },
   emits: ["update:modelValue", "apply"],
-  setup(e, { expose: $, emit: I }) {
-    const s = e, c = Y(s.testId, f), P = () => {
-      s.showApply ? I("apply") : d?.confirmable && O();
-    }, z = () => A.value.focus(), {
-      onConfirm: O,
-      onEnter: B,
-      inputRef: A,
-      isFocused: k,
-      showLabelInside: V,
-      api: d,
-      labelText: D,
-      sizeClass: N,
-      handleInput: C,
-      handleKeypress: E
-    } = Q(s, I), L = w(() => d.value?.value ?? s.modelValue), H = w(() => (L.value || "").length), m = G(!1), R = w(() => m.value && s.type === "password" ? "text" : s.type);
-    return $({
-      manualFocus: z
-    }), (r, a) => (l(), o("div", y({
+  setup(e, { expose: P, emit: k }) {
+    const s = e, c = X(s.testId, f), z = () => {
+      s.showApply ? k("apply") : o?.confirmable && D();
+    }, O = () => T.value.focus(), {
+      onConfirm: D,
+      onEnter: w,
+      inputRef: T,
+      isFocused: x,
+      showLabelInside: g,
+      api: o,
+      labelText: N,
+      sizeClass: S,
+      handleInput: I,
+      handleKeypress: B
+    } = q(s, k), A = h(() => o.value?.value ?? s.modelValue), H = h(() => (A.value || "").length), m = M(!1), R = h(() => m.value && s.type === "password" ? "text" : s.type);
+    return P({
+      manualFocus: O
+    }), (u, a) => (l(), r("div", y({
       class: {
         "input-with-label-container": !0,
         disabled: e.disabled,
         [`variant-${e.feedbackVariant}`]: !0
       }
     }, t(c)[t(f).WRAPPER]), [
-      e.label && e.labelDirection !== "inside" ? (l(), u(U, {
+      e.label && e.labelDirection !== "inside" ? (l(), d(J, {
         key: 0,
         label: e.label,
         mandatory: e.mandatory,
@@ -88,72 +86,72 @@ const Z = (e) => (j("data-v-473bab9b"), e = e(), q(), e), _ = {
         disabled: e.disabled,
         "test-id": e.testId
       }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : n("", !0),
-      g("div", {
-        class: M({
+      L("div", {
+        class: G({
           "input-container": !0,
-          "label-inside": t(V),
-          focused: t(k)
+          "label-inside": t(g),
+          focused: t(x)
         })
       }, [
-        r.$slots.iconBefore ? (l(), o("div", _, [
-          F(r.$slots, "iconBefore", {}, void 0, !0)
+        u.$slots.iconBefore ? (l(), r("div", Y, [
+          V(u.$slots, "iconBefore", {}, void 0, !0)
         ])) : n("", !0),
-        e.prefix ? (l(), u(t(T), {
+        e.prefix ? (l(), d(t($), {
           key: 1,
           class: "prefix-text",
           variant: "body1"
         }, {
-          default: v(() => [
-            h(x(e.prefix), 1)
+          default: b(() => [
+            C(E(e.prefix), 1)
           ]),
           _: 1
         })) : n("", !0),
-        g("input", y({ ...r.$attrs, ...t(c)[t(f).FIELD] }, {
+        L("input", y({ ...u.$attrs, ...t(c)[t(f).FIELD] }, {
           ref_key: "inputRef",
-          ref: A,
-          value: t(L),
-          placeholder: t(D),
+          ref: T,
+          value: t(A),
+          placeholder: t(N),
           disabled: e.disabled || e.viewOnly,
           type: t(R),
           class: ["input", {
-            [t(N)]: !0,
+            [t(S)]: !0,
             "view-only": e.viewOnly,
-            "label-inside": t(V),
+            "label-inside": t(g),
             "hide-arrows": e.hideNumberArrows,
             "input-type": e.type
           }],
           step: e.step,
           maxlength: e.maxLength,
           onInput: a[0] || (a[0] = //@ts-ignore
-          (...i) => t(C) && t(C)(...i)),
-          onFocus: a[1] || (a[1] = (i) => k.value = !0),
-          onBlur: a[2] || (a[2] = (i) => k.value = !1),
-          onKeyup: a[3] || (a[3] = W(S(
+          (...i) => t(I) && t(I)(...i)),
+          onFocus: a[1] || (a[1] = (i) => x.value = !0),
+          onBlur: a[2] || (a[2] = (i) => x.value = !1),
+          onKeyup: a[3] || (a[3] = W(F(
             //@ts-ignore
-            (...i) => t(B) && t(B)(...i),
+            (...i) => t(w) && t(w)(...i),
             ["prevent"]
           ), ["enter"])),
           onKeypress: a[4] || (a[4] = //@ts-ignore
-          (...i) => t(E) && t(E)(...i))
-        }), null, 16, ee),
-        e.showApply || t(d)?.confirmable && !t(d)?.error?.value ? (l(), o("div", {
+          (...i) => t(B) && t(B)(...i))
+        }), null, 16, Z),
+        e.showApply || t(o)?.confirmable && !t(o)?.error?.value ? (l(), r("div", {
           key: 2,
           class: "apply-button",
-          onClick: S(P, ["stop", "prevent"])
+          onClick: F(z, ["stop", "prevent"])
         }, [
-          b(t(p), {
+          p(t(v), {
             name: "check",
             size: "20px"
           })
-        ], 8, te)) : n("", !0),
-        e.inlineError || t(d)?.error?.value ? (l(), o("div", le, [
-          b(t(J), y({
-            disabled: !e.inlineErrorText && !t(d)?.error?.value,
-            text: e.inlineErrorText || t(d)?.error?.value,
+        ], 8, _)) : n("", !0),
+        e.inlineError || t(o)?.error?.value ? (l(), r("div", ee, [
+          p(t(j), y({
+            disabled: !e.inlineErrorText && !t(o)?.error?.value,
+            text: e.inlineErrorText || t(o)?.error?.value,
             "test-id": e.testId
           }, t(c)[t(f).TOOLTIP]), {
-            default: v(() => [
-              b(t(p), {
+            default: b(() => [
+              p(t(v), {
                 name: "warning-circle",
                 size: "16px"
               })
@@ -161,58 +159,53 @@ const Z = (e) => (j("data-v-473bab9b"), e = e(), q(), e), _ = {
             _: 1
           }, 16, ["disabled", "text", "test-id"])
         ])) : n("", !0),
-        e.suffix ? (l(), u(t(T), {
+        e.suffix ? (l(), d(t($), {
           key: 4,
           class: "suffix-text",
           variant: "body1"
         }, {
-          default: v(() => [
-            h(x(e.suffix), 1)
+          default: b(() => [
+            C(E(e.suffix), 1)
           ]),
           _: 1
         })) : n("", !0),
-        e.type === "password" ? (l(), o("div", y({
+        e.type === "password" ? (l(), r("div", y({
           key: 5,
           class: "password-visibility-toggle"
         }, t(c)[t(f).TOGGLE_PASSWORD], {
           onClick: a[5] || (a[5] = (i) => m.value = !m.value)
         }), [
-          m.value ? (l(), u(t(p), {
+          m.value ? (l(), d(t(v), {
             key: 0,
             name: "eye",
             size: "16px"
-          })) : (l(), u(t(p), {
+          })) : (l(), d(t(v), {
             key: 1,
             name: "eye-slash",
             size: "16px"
           }))
         ], 16)) : n("", !0),
-        r.$slots.iconAfter ? (l(), o("div", ae, [
-          F(r.$slots, "iconAfter", {}, void 0, !0)
+        u.$slots.iconAfter ? (l(), r("div", te, [
+          V(u.$slots, "iconAfter", {}, void 0, !0)
         ])) : n("", !0)
       ], 2),
-      e.feedbackText || e.maxLength ? (l(), o("div", ne, [
-        e.feedbackText ? (l(), u(X, {
+      e.feedbackText || e.maxLength ? (l(), r("div", le, [
+        e.feedbackText ? (l(), d(Q, {
           key: 0,
           text: e.feedbackText,
           variant: e.feedbackVariant,
           "show-icon": e.showFeedbackTextIcon,
           "test-id": e.testId
         }, null, 8, ["text", "variant", "show-icon", "test-id"])) : n("", !0),
-        e.maxLength ? (l(), o("div", ie, [
-          b(t(T), { variant: "caption" }, {
-            default: v(() => [
-              h(x(t(H)) + " ", 1),
-              oe,
-              h(" " + x(e.maxLength), 1)
-            ]),
-            _: 1
-          })
-        ])) : n("", !0)
+        e.maxLength ? (l(), d(U, {
+          key: 1,
+          "current-length": t(H),
+          "max-length": e.maxLength
+        }, null, 8, ["current-length", "max-length"])) : n("", !0)
       ])) : n("", !0)
     ], 16));
   }
 });
 export {
-  xe as default
+  ye as default
 };

package/components/input/v4/index.d.ts

@@ -18,13 +18,13 @@ declare const TextFieldTypes: () => ({
             hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
             feedbackText: string;
             feedbackVariant: "success" | "warning" | "error";
+            maxLength: number;
             viewOnly: boolean;
             labelDirection: "top" | "inside";
             hideNumberArrows: boolean;
             step: number;
             onlyDigits: boolean;
             suffix: string;
-            maxLength: number;
             showApply: boolean;
             inlineError: boolean;
             inlineErrorText: string;
@@ -86,6 +86,10 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<"success" | "warning" | "error">;
                 default: any;
             };
+            maxLength: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             viewOnly: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -110,10 +114,6 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            maxLength: {
-                type: import("vue").PropType<number>;
-                default: any;
-            };
             showApply: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -133,7 +133,7 @@ declare const TextFieldTypes: () => ({
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
             onApply?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "disabled" | "size" | "mandatory" | "testId" | "modelValue" | "placeholder" | "autoFocus" | "prefix" | "hoverHelpText" | "hoverHelpTextPlacement" | "feedbackText" | "feedbackVariant" | "viewOnly" | "labelDirection" | "hideNumberArrows" | "step" | "onlyDigits" | "suffix" | "maxLength" | "showApply" | "inlineError" | "inlineErrorText" | "showFeedbackTextIcon">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "disabled" | "size" | "mandatory" | "testId" | "modelValue" | "placeholder" | "autoFocus" | "prefix" | "hoverHelpText" | "hoverHelpTextPlacement" | "feedbackText" | "feedbackVariant" | "maxLength" | "viewOnly" | "labelDirection" | "hideNumberArrows" | "step" | "onlyDigits" | "suffix" | "showApply" | "inlineError" | "inlineErrorText" | "showFeedbackTextIcon">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -204,6 +204,10 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<"success" | "warning" | "error">;
                 default: any;
             };
+            maxLength: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             viewOnly: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -228,10 +232,6 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            maxLength: {
-                type: import("vue").PropType<number>;
-                default: any;
-            };
             showApply: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -271,13 +271,13 @@ declare const TextFieldTypes: () => ({
             hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
             feedbackText: string;
             feedbackVariant: "success" | "warning" | "error";
+            maxLength: number;
             viewOnly: boolean;
             labelDirection: "top" | "inside";
             hideNumberArrows: boolean;
             step: number;
             onlyDigits: boolean;
             suffix: string;
-            maxLength: number;
             showApply: boolean;
             inlineError: boolean;
             inlineErrorText: string;
@@ -359,6 +359,10 @@ declare const TextFieldTypes: () => ({
             type: import("vue").PropType<"success" | "warning" | "error">;
             default: any;
         };
+        maxLength: {
+            type: import("vue").PropType<number>;
+            default: any;
+        };
         viewOnly: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -383,10 +387,6 @@ declare const TextFieldTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
-        maxLength: {
-            type: import("vue").PropType<number>;
-            default: any;
-        };
         showApply: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -469,6 +469,10 @@ declare const TextFieldTypes: () => ({
         type: import("vue").PropType<"success" | "warning" | "error">;
         default: any;
     };
+    maxLength: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
     viewOnly: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -493,10 +497,6 @@ declare const TextFieldTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
-    maxLength: {
-        type: import("vue").PropType<number>;
-        default: any;
-    };
     showApply: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -536,13 +536,13 @@ declare const TextFieldTypes: () => ({
     hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
     feedbackText: string;
     feedbackVariant: "success" | "warning" | "error";
+    maxLength: number;
     viewOnly: boolean;
     labelDirection: "top" | "inside";
     hideNumberArrows: boolean;
     step: number;
     onlyDigits: boolean;
     suffix: string;
-    maxLength: number;
     showApply: boolean;
     inlineError: boolean;
     inlineErrorText: string;

package/components/shared/FieldMaxLength.vue.d.ts

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    currentLength: number;
+    maxLength?: number;
+}>, {
+    currentLength: number;
+    maxLength: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    currentLength: number;
+    maxLength?: number;
+}>, {
+    currentLength: number;
+    maxLength: number;
+}>>>, {
+    currentLength: number;
+    maxLength: number;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/shared/FieldMaxLength.vue.js

@@ -0,0 +1,7 @@
+import e from "./FieldMaxLength.vue2.js";
+/* empty css                     */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../FieldMaxLength.vue_vue_type_style_index_0_scoped_f3c4001a_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-f3c4001a"]]);
+export {
+  a as default
+};

package/components/shared/FieldMaxLength.vue2.js

@@ -0,0 +1,24 @@
+ import "../../FieldMaxLength.vue_vue_type_style_index_0_scoped_f3c4001a_lang.css"; import { defineComponent as n, openBlock as o, createElementBlock as c, createVNode as r, unref as d, withCtx as p, createTextVNode as t, toDisplayString as a, pushScopeId as i, popScopeId as s, createElementVNode as h } from "vue";
+import l from "../typography/v4/Typography.vue.js";
+const m = (e) => (i("data-v-f3c4001a"), e = e(), s(), e), _ = { class: "max-length" }, u = /* @__PURE__ */ m(() => /* @__PURE__ */ h("span", { class: "max-length__divider" }, "/", -1)), v = /* @__PURE__ */ n({
+  __name: "FieldMaxLength",
+  props: {
+    currentLength: { default: 0 },
+    maxLength: { default: 100 }
+  },
+  setup(e) {
+    return (f, g) => (o(), c("div", _, [
+      r(d(l), { variant: "caption" }, {
+        default: p(() => [
+          t(a(e.currentLength) + " ", 1),
+          u,
+          t(" " + a(e.maxLength), 1)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  v as default
+};

package/components/textArea/v3/TextArea.vue.js

@@ -0,0 +1,7 @@
+import e from "./TextArea.vue2.js";
+/* empty css               */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TextArea.vue_vue_type_style_index_0_scoped_eb62e4c0_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-eb62e4c0"]]);
+export {
+  c as default
+};

package/components/textArea/{TextArea.vue2.js → v3/TextArea.vue2.js}

@@ -1,7 +1,7 @@
- import "../../TextArea.vue_vue_type_style_index_0_scoped_889b62ac_lang.css"; import { defineComponent as x, openBlock as d, createElementBlock as l, normalizeClass as s, unref as t, createVNode as i, withCtx as c, createTextVNode as o, toDisplayString as n, createCommentVNode as u, createElementVNode as T } from "vue";
-import "../typography/Heading.vue.js";
-import f from "../typography/Text.vue.js";
-import { TextAreaTestIdModifiers as a } from "../../testids/index.js";
+ import "../../../TextArea.vue_vue_type_style_index_0_scoped_eb62e4c0_lang.css"; import { defineComponent as x, openBlock as d, createElementBlock as l, normalizeClass as s, unref as t, createVNode as i, withCtx as c, createTextVNode as o, toDisplayString as n, createCommentVNode as u, createElementVNode as T } from "vue";
+import "../../typography/Heading.vue.js";
+import f from "../../typography/Text.vue.js";
+import { TextAreaTestIdModifiers as a } from "../../../testids/index.js";
 const h = ["data-testid"], k = ["data-testid"], E = ["value", "placeholder", "disabled", "data-testid"], I = {
   key: 1,
   class: "extra-text-container"