@ironsource/shared-ui 2.1.7-test.2 → 2.1.7-test.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/Autocomplete.vue_vue_type_style_index_0_scoped_e361f9fd_lang.css +1 -0
  2. package/TextField.vue_vue_type_style_index_0_scoped_eb472aa3_lang.css +1 -0
  3. package/components/autocomplete/Autocomplete.vue.d.ts +5 -0
  4. package/components/autocomplete/Autocomplete.vue.js +2 -2
  5. package/components/autocomplete/Autocomplete.vue2.js +57 -45
  6. package/components/autocomplete/index.d.ts +20 -1
  7. package/components/input/v4/TextField.vue.js +3 -3
  8. package/components/input/v4/TextField.vue2.js +70 -66
  9. package/package.json +1 -1
  10. package/Autocomplete.vue_vue_type_style_index_0_scoped_a7bfd237_lang.css +0 -1
  11. package/TextField.vue_vue_type_style_index_0_scoped_052b1a0c_lang.css +0 -1
package/Autocomplete.vue_vue_type_style_index_0_scoped_e361f9fd_lang.css ADDED
@@ -0,0 +1 @@
1
+ div[data-v-e361f9fd]{display:block}.autocomplete-dropdown[data-v-e361f9fd]{position:relative}.footer[data-v-e361f9fd]{display:flex;justify-content:flex-end;align-items:center;margin-top:var(--spacing-50)}
package/TextField.vue_vue_type_style_index_0_scoped_eb472aa3_lang.css ADDED
@@ -0,0 +1 @@
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-eb472aa3],.font-chart-2[data-v-eb472aa3],.font-chart-1[data-v-eb472aa3]{font-family:Inter,sans-serif;font-weight:700}.font-chip-label[data-v-eb472aa3],.font-table-label[data-v-eb472aa3],.font-button[data-v-eb472aa3],.font-heading-6[data-v-eb472aa3],.font-heading-5[data-v-eb472aa3],.font-heading-4[data-v-eb472aa3],.font-heading-3[data-v-eb472aa3],.font-heading-2[data-v-eb472aa3],.font-heading-1[data-v-eb472aa3],.font-title[data-v-eb472aa3]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-eb472aa3],.font-input-label[data-v-eb472aa3],.font-overline[data-v-eb472aa3],.font-subtitle-2[data-v-eb472aa3],.font-subtitle-1[data-v-eb472aa3]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-eb472aa3],.font-body-2[data-v-eb472aa3],.input-container .input[data-v-eb472aa3],.font-body-1[data-v-eb472aa3]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-eb472aa3]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-eb472aa3]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-eb472aa3]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-eb472aa3]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-eb472aa3]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-eb472aa3]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-eb472aa3]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.input-container .input[data-v-eb472aa3],.font-body-1[data-v-eb472aa3]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-eb472aa3]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-eb472aa3]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-eb472aa3]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-eb472aa3]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-eb472aa3]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-eb472aa3]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-eb472aa3]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-eb472aa3]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-eb472aa3]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-eb472aa3]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-eb472aa3],.font-tab-label2[data-v-eb472aa3]{font-size:.875rem;line-height:1rem}.font-chip-label[data-v-eb472aa3]{font-size:.75rem;line-height:1rem}h1[data-v-eb472aa3],h2[data-v-eb472aa3],h3[data-v-eb472aa3],h4[data-v-eb472aa3],h5[data-v-eb472aa3],h6[data-v-eb472aa3]{margin:0}.disabled .input[data-v-eb472aa3]::placeholder{color:var(--text-disabled)}.disabled .input-container[data-v-eb472aa3]{cursor:no-drop;background-color:var(--action-disabled-background)}.disabled .input-container[data-v-eb472aa3]:hover{outline:1px solid var(--action-outlined-border);background-color:var(--action-disabled-background)}.input-size-small[data-v-eb472aa3]{height:28px}.input-size-medium[data-v-eb472aa3]{height:32px}.input-size-large[data-v-eb472aa3]{height:40px}.input-with-label-container[data-v-eb472aa3]{display:flex;flex-direction:column}.input-container[data-v-eb472aa3]{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);position:relative;gap:var(--spacing-50)}.input-container[data-v-eb472aa3]:hover{outline:1px solid var(--action-active);background-color:var(--action-hover)}.input-container .input[data-v-eb472aa3]{padding:0;width:100%;border:none;background:transparent;color:var(--text-primary);line-height:normal}.input-container .input[data-v-eb472aa3]:focus{outline:none}.input-container .input[data-v-eb472aa3]:disabled{color:var(--text-disabled);cursor:no-drop}.input-container .input.view-only[data-v-eb472aa3]{color:var(--text-disabled)}.input-container .input[type=number][data-v-eb472aa3]::-webkit-inner-spin-button{opacity:.7;transform:scale(1.1)}.input-container .hide-arrows.input[type=number][data-v-eb472aa3]::-webkit-inner-spin-button,.input-container .hide-arrows.input[type=number][data-v-eb472aa3]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.input-container .input[type=password][data-v-eb472aa3]{letter-spacing:4px}.input-container[data-v-eb472aa3] ::placeholder{color:var(--text-secondary);letter-spacing:normal}.input-container .label-inside[data-v-eb472aa3]::placeholder{color:var(--text-primary)}.input-container .icon-container[data-v-eb472aa3]{display:flex;align-items:center;color:var(--text-secondary)}.input-container .icon-before[data-v-eb472aa3]{padding-right:var(--spacing-50)}.input-container .icon-after[data-v-eb472aa3]{padding-left:var(--spacing-50)}.prefix-text[data-v-eb472aa3]{color:var(--text-secondary, #646464);margin-right:var(--spacing-50)}.suffix-text[data-v-eb472aa3]{color:var(--text-secondary, #646464)}.focused[data-v-eb472aa3],.focused[data-v-eb472aa3]:hover{outline:2px solid var(--primary-main);background-color:var(--action-hover)}.error-icon.error-icon[data-v-eb472aa3],.error-icon.error-icon[data-v-eb472aa3]:hover{color:var(--error-main)}.label-direction-left[data-v-eb472aa3]{flex-direction:row;align-items:center;justify-content:space-between}.apply-button[data-v-eb472aa3]{cursor:pointer;color:var(--primary-main);width:var(--spacing-250);height:var(--spacing-250)}.inline-error[data-v-eb472aa3]{cursor:pointer;color:var(--error-main);display:flex;justify-content:center;align-items:center}.footer[data-v-eb472aa3]{display:flex;justify-content:flex-end;margin-top:var(--spacing-50)}.footer.footer-absolute[data-v-eb472aa3]{position:absolute;bottom:calc(0px - var(--spacing-300))}.password-visibility-toggle[data-v-eb472aa3]{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.variant-success .input-container[data-v-eb472aa3],.variant-success .input-container[data-v-eb472aa3]:hover{outline:2px solid var(--success-dark)}.variant-error .input-container[data-v-eb472aa3],.variant-error .input-container[data-v-eb472aa3]:hover{outline:2px solid var(--error-main)}.variant-warning .input-container[data-v-eb472aa3],.variant-warning .input-container[data-v-eb472aa3]:hover{outline:2px solid var(--warning-dark)}
package/components/autocomplete/Autocomplete.vue.d.ts CHANGED
@@ -14,6 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
14
14
  inlineError?: boolean;
15
15
  inlineErrorText?: string;
16
16
  maxLength?: number;
17
+ maxLengthCounterPosition?: "inside" | "outside";
17
18
  options: unknown[] | {
18
19
  id: string;
19
20
  text: string;
@@ -39,6 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
39
40
  feedbackVariant: any;
40
41
  showFeedbackTextIcon: boolean;
41
42
  maxLength: any;
43
+ maxLengthCounterPosition: string;
42
44
  onSearch: any;
43
45
  optionNameKey: string;
44
46
  optionsListWidth: any;
@@ -61,6 +63,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
61
63
  inlineError?: boolean;
62
64
  inlineErrorText?: string;
63
65
  maxLength?: number;
66
+ maxLengthCounterPosition?: "inside" | "outside";
64
67
  options: unknown[] | {
65
68
  id: string;
66
69
  text: string;
@@ -86,6 +89,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
86
89
  feedbackVariant: any;
87
90
  showFeedbackTextIcon: boolean;
88
91
  maxLength: any;
92
+ maxLengthCounterPosition: string;
89
93
  onSearch: any;
90
94
  optionNameKey: string;
91
95
  optionsListWidth: any;
@@ -104,6 +108,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
104
108
  modelValue: string | number;
105
109
  placeholder: string;
106
110
  labelDirection: "top" | "inside";
111
+ maxLengthCounterPosition: "inside" | "outside";
107
112
  inlineError: boolean;
108
113
  inlineErrorText: string;
109
114
  feedbackText: string;
package/components/autocomplete/Autocomplete.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./Autocomplete.vue2.js";
2
2
  /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../Autocomplete.vue_vue_type_style_index_0_scoped_a7bfd237_lang.css"; //*');
4
- const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a7bfd237"]]);
3
+ // import "../../Autocomplete.vue_vue_type_style_index_0_scoped_e361f9fd_lang.css"; //*');
4
+ const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e361f9fd"]]);
5
5
  export {
6
6
  s as default
7
7
  };
package/components/autocomplete/Autocomplete.vue2.js CHANGED
@@ -1,5 +1,5 @@
1
- import "../../Autocomplete.vue_vue_type_style_index_0_scoped_a7bfd237_lang.css"; import { defineComponent as w, computed as c, ref as m, watchEffect as T, openBlock as r, createElementBlock as h, Fragment as F, createVNode as v, unref as d, withCtx as x, isRef as L, renderSlot as I, normalizeProps as S, guardReactiveProps as B, createBlock as b, createCommentVNode as f } from "vue";
2
- import C from "../dropdown/v4/DropdownV4.vue.js";
1
+ import "../../Autocomplete.vue_vue_type_style_index_0_scoped_e361f9fd_lang.css"; import { defineComponent as F, computed as r, ref as h, watchEffect as C, openBlock as s, createElementBlock as x, Fragment as P, createVNode as v, unref as o, withCtx as p, mergeProps as I, isRef as S, renderSlot as B, normalizeProps as E, guardReactiveProps as z, createBlock as g, createCommentVNode as m } from "vue";
2
+ import H from "../dropdown/v4/DropdownV4.vue.js";
3
3
  import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
4
4
  import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
5
5
  import "../dropdown/v4/ChipDropdownTrigger.vue.js";
@@ -8,14 +8,14 @@ import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
8
8
  import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
9
9
  import "../dropdown/v4/TreeDropdown.vue.js";
10
10
  import "../dropdown/v4/OptionV4.vue.js";
11
- import E from "../input/v4/TextField.vue.js";
12
- import { useVModel as z } from "@vueuse/core";
13
- import H from "../shared/FieldHelpText.vue.js";
14
- import P from "../shared/FieldMaxLength.vue.js";
15
- const N = {
11
+ import N from "../input/v4/TextField.vue.js";
12
+ import { useVModel as O } from "@vueuse/core";
13
+ import D from "../shared/FieldHelpText.vue.js";
14
+ import M from "../shared/FieldMaxLength.vue.js";
15
+ const U = {
16
16
  key: 0,
17
17
  class: "footer"
18
- }, X = /* @__PURE__ */ w({
18
+ }, ee = /* @__PURE__ */ F({
19
19
  __name: "Autocomplete",
20
20
  props: {
21
21
  modelValue: { default: "" },
@@ -33,6 +33,7 @@ const N = {
33
33
  inlineError: { type: Boolean, default: !1 },
34
34
  inlineErrorText: { default: "" },
35
35
  maxLength: { default: null },
36
+ maxLengthCounterPosition: { default: "inside" },
36
37
  options: null,
37
38
  displayValue: null,
38
39
  optionNameKey: { default: "" },
@@ -41,40 +42,51 @@ const N = {
41
42
  testId: { default: "" }
42
43
  },
43
44
  emits: ["update:modelValue"],
44
- setup(e, { emit: p }) {
45
- const a = e, i = z(a, "modelValue", p), g = (l) => {
46
- l !== void 0 && (i.value = a.displayValue(l));
47
- }, k = c(() => (i.value || "").length), y = (l, t) => a.displayValue(l).toLowerCase().replace(/\s+/g, "").includes(t.toLowerCase().replace(/\s+/g, "")), u = c(() => {
48
- const l = i.value.toString();
49
- return (a.options || []).filter(
50
- (t) => a.onSearch !== null ? a.onSearch(t, l) : y(t, l)
45
+ setup(e, { emit: b }) {
46
+ const t = e, d = O(t, "modelValue", b), k = (a) => {
47
+ a !== void 0 && (d.value = t.displayValue(a));
48
+ }, y = r(() => (d.value || "").length), f = r(
49
+ () => t.maxLength && t.maxLengthCounterPosition === "outside"
50
+ ), L = r(() => f.value ? {
51
+ // when counter is shown outside, use native html maxlength attribute (instead of component prop)
52
+ // and render counter separately to avoid space between input and dropdown
53
+ maxlength: t.maxLength
54
+ } : {
55
+ maxLength: t.maxLength,
56
+ maxLengthCounterPosition: t.maxLengthCounterPosition
57
+ }), V = r(
58
+ () => t.feedbackText || f.value
59
+ ), w = (a, l) => t.displayValue(a).toLowerCase().replace(/\s+/g, "").includes(l.toLowerCase().replace(/\s+/g, "")), u = r(() => {
60
+ const a = d.value.toString();
61
+ return (t.options || []).filter(
62
+ (l) => t.onSearch !== null ? t.onSearch(l, a) : w(l, a)
51
63
  );
52
- }), n = m(!1), s = m(!1);
53
- T(() => {
54
- a.disabled ? n.value = !1 : s.value && u.value.length ? n.value = !0 : u.value.length === 0 && (n.value = !1);
64
+ }), n = h(!1), c = h(!1);
65
+ C(() => {
66
+ t.disabled ? n.value = !1 : c.value && u.value.length ? n.value = !0 : u.value.length === 0 && (n.value = !1);
55
67
  });
56
- const V = () => {
57
- a.disabled || !n.value && u.value.length && (n.value = !0);
68
+ const T = () => {
69
+ t.disabled || !n.value && u.value.length && (n.value = !0);
58
70
  };
59
- return (l, t) => (r(), h(F, null, [
60
- v(d(C), {
71
+ return (a, l) => (s(), x(P, null, [
72
+ v(o(H), {
61
73
  "is-open": n.value,
62
- "onUpdate:is-open": t[3] || (t[3] = (o) => n.value = o),
74
+ "onUpdate:is-open": l[3] || (l[3] = (i) => n.value = i),
63
75
  class: "autocomplete-dropdown",
64
76
  "display-value": e.displayValue,
65
- options: d(u),
77
+ options: o(u),
66
78
  "option-name-key": e.optionNameKey,
67
79
  "options-list-width": e.optionsListWidth,
68
80
  disabled: e.disabled,
69
81
  "search-auto-focus": !1,
70
82
  "full-width": !1,
71
83
  "test-id": e.testId,
72
- "onUpdate:selected": g
84
+ "onUpdate:selected": k
73
85
  }, {
74
- "dropdown-trigger": x(() => [
75
- v(d(E), {
76
- modelValue: d(i),
77
- "onUpdate:modelValue": t[0] || (t[0] = (o) => L(i) ? i.value = o : null),
86
+ "dropdown-trigger": p(() => [
87
+ v(o(N), I({
88
+ modelValue: o(d),
89
+ "onUpdate:modelValue": l[0] || (l[0] = (i) => S(d) ? d.value = i : null),
78
90
  class: "autocomplete-field",
79
91
  placeholder: e.placeholder,
80
92
  disabled: e.disabled,
@@ -88,35 +100,35 @@ const N = {
88
100
  "feedback-variant": e.feedbackVariant,
89
101
  "show-feedback-text-icon": e.showFeedbackTextIcon,
90
102
  "inline-error": e.inlineError,
91
- "inline-error-text": e.inlineErrorText,
92
- maxlength: e.maxLength,
93
- onFocusin: t[1] || (t[1] = (o) => s.value = !0),
94
- onFocusout: t[2] || (t[2] = (o) => s.value = !1),
95
- onClick: V
96
- }, null, 8, ["modelValue", "placeholder", "disabled", "size", "label", "label-direction", "mandatory", "hover-help-text", "hover-help-text-placemen", "test-id", "feedback-variant", "show-feedback-text-icon", "inline-error", "inline-error-text", "maxlength"])
103
+ "inline-error-text": e.inlineErrorText
104
+ }, o(L), {
105
+ onFocusin: l[1] || (l[1] = (i) => c.value = !0),
106
+ onFocusout: l[2] || (l[2] = (i) => c.value = !1),
107
+ onClick: T
108
+ }), null, 16, ["modelValue", "placeholder", "disabled", "size", "label", "label-direction", "mandatory", "hover-help-text", "hover-help-text-placemen", "test-id", "feedback-variant", "show-feedback-text-icon", "inline-error", "inline-error-text"])
97
109
  ]),
98
- default: x((o) => [
99
- I(l.$slots, "default", S(B(o)), void 0, !0)
110
+ default: p((i) => [
111
+ B(a.$slots, "default", E(z(i)), void 0, !0)
100
112
  ]),
101
113
  _: 3
102
114
  }, 8, ["is-open", "display-value", "options", "option-name-key", "options-list-width", "disabled", "test-id"]),
103
- e.feedbackText || e.maxLength ? (r(), h("div", N, [
104
- e.feedbackText ? (r(), b(H, {
115
+ o(V) ? (s(), x("div", U, [
116
+ e.feedbackText ? (s(), g(D, {
105
117
  key: 0,
106
118
  text: e.feedbackText,
107
119
  variant: e.feedbackVariant,
108
120
  "show-icon": e.showFeedbackTextIcon,
109
121
  "test-id": e.testId
110
- }, null, 8, ["text", "variant", "show-icon", "test-id"])) : f("", !0),
111
- e.maxLength ? (r(), b(P, {
122
+ }, null, 8, ["text", "variant", "show-icon", "test-id"])) : m("", !0),
123
+ o(f) ? (s(), g(M, {
112
124
  key: 1,
113
- "current-length": d(k),
125
+ "current-length": o(y),
114
126
  "max-length": e.maxLength
115
- }, null, 8, ["current-length", "max-length"])) : f("", !0)
116
- ])) : f("", !0)
127
+ }, null, 8, ["current-length", "max-length"])) : m("", !0)
128
+ ])) : m("", !0)
117
129
  ], 64));
118
130
  }
119
131
  });
120
132
  export {
121
- X as default
133
+ ee as default
122
134
  };
package/components/autocomplete/index.d.ts CHANGED
@@ -15,6 +15,7 @@ declare const AutocompleteTypes: () => ({
15
15
  modelValue: string | number;
16
16
  placeholder: string;
17
17
  labelDirection: "top" | "inside";
18
+ maxLengthCounterPosition: "inside" | "outside";
18
19
  inlineError: boolean;
19
20
  inlineErrorText: string;
20
21
  feedbackText: string;
@@ -75,6 +76,10 @@ declare const AutocompleteTypes: () => ({
75
76
  type: import("vue").PropType<"top" | "inside">;
76
77
  default: string;
77
78
  };
79
+ maxLengthCounterPosition: {
80
+ type: import("vue").PropType<"inside" | "outside">;
81
+ default: string;
82
+ };
78
83
  inlineError: {
79
84
  type: import("vue").PropType<boolean>;
80
85
  default: boolean;
@@ -113,7 +118,7 @@ declare const AutocompleteTypes: () => ({
113
118
  };
114
119
  }>> & {
115
120
  "onUpdate:modelValue"?: (value: string | number) => any;
116
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "labelDirection" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
121
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "labelDirection" | "maxLengthCounterPosition" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
117
122
  $attrs: {
118
123
  [x: string]: unknown;
119
124
  };
@@ -179,6 +184,10 @@ declare const AutocompleteTypes: () => ({
179
184
  type: import("vue").PropType<"top" | "inside">;
180
185
  default: string;
181
186
  };
187
+ maxLengthCounterPosition: {
188
+ type: import("vue").PropType<"inside" | "outside">;
189
+ default: string;
190
+ };
182
191
  inlineError: {
183
192
  type: import("vue").PropType<boolean>;
184
193
  default: boolean;
@@ -231,6 +240,7 @@ declare const AutocompleteTypes: () => ({
231
240
  modelValue: string | number;
232
241
  placeholder: string;
233
242
  labelDirection: "top" | "inside";
243
+ maxLengthCounterPosition: "inside" | "outside";
234
244
  inlineError: boolean;
235
245
  inlineErrorText: string;
236
246
  feedbackText: string;
@@ -311,6 +321,10 @@ declare const AutocompleteTypes: () => ({
311
321
  type: import("vue").PropType<"top" | "inside">;
312
322
  default: string;
313
323
  };
324
+ maxLengthCounterPosition: {
325
+ type: import("vue").PropType<"inside" | "outside">;
326
+ default: string;
327
+ };
314
328
  inlineError: {
315
329
  type: import("vue").PropType<boolean>;
316
330
  default: boolean;
@@ -405,6 +419,10 @@ declare const AutocompleteTypes: () => ({
405
419
  type: import("vue").PropType<"top" | "inside">;
406
420
  default: string;
407
421
  };
422
+ maxLengthCounterPosition: {
423
+ type: import("vue").PropType<"inside" | "outside">;
424
+ default: string;
425
+ };
408
426
  inlineError: {
409
427
  type: import("vue").PropType<boolean>;
410
428
  default: boolean;
@@ -457,6 +475,7 @@ declare const AutocompleteTypes: () => ({
457
475
  modelValue: string | number;
458
476
  placeholder: string;
459
477
  labelDirection: "top" | "inside";
478
+ maxLengthCounterPosition: "inside" | "outside";
460
479
  inlineError: boolean;
461
480
  inlineErrorText: string;
462
481
  feedbackText: string;
package/components/input/v4/TextField.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import e from "./TextField.vue2.js";
2
2
  /* empty css */import o from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../TextField.vue_vue_type_style_index_0_scoped_052b1a0c_lang.css"; //*');
4
- const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-052b1a0c"]]);
3
+ // import "../../../TextField.vue_vue_type_style_index_0_scoped_eb472aa3_lang.css"; //*');
4
+ const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-eb472aa3"]]);
5
5
  export {
6
- c as default
6
+ a as default
7
7
  };
package/components/input/v4/TextField.vue2.js CHANGED
@@ -1,27 +1,27 @@
1
- import "../../../TextField.vue_vue_type_style_index_0_scoped_052b1a0c_lang.css"; import { defineComponent as j, computed as x, ref as q, openBlock as l, createElementBlock as s, mergeProps as f, unref as t, createBlock as o, createCommentVNode as n, createElementVNode as A, normalizeClass as C, renderSlot as E, withCtx as b, createTextVNode as V, toDisplayString as F, withKeys as J, withModifiers as $, normalizeProps as z, createVNode as p } from "vue";
1
+ import "../../../TextField.vue_vue_type_style_index_0_scoped_eb472aa3_lang.css"; import { defineComponent as J, computed as f, ref as Q, openBlock as l, createElementBlock as d, mergeProps as c, unref as t, createBlock as r, createCommentVNode as n, createElementVNode as A, normalizeClass as E, renderSlot as F, withCtx as b, createTextVNode as V, toDisplayString as $, withKeys as U, withModifiers as z, normalizeProps as O, createVNode as p } from "vue";
2
2
  import v from "../../icon/v4/IconV4.vue.js";
3
3
  import "../../icon/v4/IconFlag.vue.js";
4
- import Q from "../../tooltip/v4/TooltipV4.vue.js";
5
- import O from "../../typography/v4/Typography.vue.js";
4
+ import X from "../../tooltip/v4/TooltipV4.vue.js";
5
+ import D from "../../typography/v4/Typography.vue.js";
6
6
  import { InputTestIdModifiers as m } from "../../../testids/index.js";
7
- import { inputCommon as U } from "../common/Input.common.js";
8
- import X from "../../shared/FieldLabel.vue.js";
9
- import Y from "../../shared/FieldHelpText.vue.js";
10
- import D from "../../shared/FieldMaxLength.vue.js";
11
- import { useTestIdAttrs as Z } from "../../../utils/testIds.js";
12
- const _ = {
7
+ import { inputCommon as Y } from "../common/Input.common.js";
8
+ import Z from "../../shared/FieldLabel.vue.js";
9
+ import _ from "../../shared/FieldHelpText.vue.js";
10
+ import N from "../../shared/FieldMaxLength.vue.js";
11
+ import { useTestIdAttrs as ee } from "../../../utils/testIds.js";
12
+ const te = {
13
13
  key: 0,
14
14
  class: "icon-container icon-before"
15
- }, ee = ["maxlength", "value", "placeholder", "disabled", "type", "step"], te = ["onClick"], le = {
15
+ }, le = ["maxlength", "value", "placeholder", "disabled", "type", "step"], ae = ["onClick"], ne = {
16
16
  key: 4,
17
17
  class: "inline-error"
18
- }, ae = {
18
+ }, oe = {
19
19
  key: 7,
20
20
  class: "icon-container icon-after"
21
- }, ne = {
21
+ }, ie = {
22
22
  inheritAttrs: !1
23
- }, ve = /* @__PURE__ */ j({
24
- ...ne,
23
+ }, be = /* @__PURE__ */ J({
24
+ ...ie,
25
25
  __name: "TextField",
26
26
  props: {
27
27
  modelValue: { default: "" },
@@ -54,34 +54,38 @@ const _ = {
54
54
  inlineErrorTextPlacement: { default: "top" }
55
55
  },
56
56
  emits: ["update:modelValue", "apply"],
57
- setup(e, { expose: N, emit: k }) {
58
- const r = e, c = Z(r.testId, m), S = () => {
59
- r.showApply ? k("apply") : d?.confirmable && R();
60
- }, H = () => g.value.focus(), {
61
- onConfirm: R,
57
+ setup(e, { expose: S, emit: k }) {
58
+ const o = e, y = ee(o.testId, m), H = () => {
59
+ o.showApply ? k("apply") : s?.confirmable && K();
60
+ }, R = () => g.value.focus(), {
61
+ onConfirm: K,
62
62
  onEnter: T,
63
63
  inputRef: g,
64
64
  isFocused: h,
65
65
  showLabelInside: w,
66
- api: d,
67
- labelText: K,
68
- sizeClass: M,
66
+ api: s,
67
+ labelText: M,
68
+ sizeClass: G,
69
69
  handleInput: L,
70
70
  handleKeypress: I
71
- } = U(r, k), P = x(() => d.value?.value ?? r.modelValue), G = x(() => (P.value || "").length), B = x(() => ({
72
- currentLength: G.value,
73
- maxLength: r.maxLength
74
- })), y = q(!1), W = x(() => y.value && r.type === "password" ? "text" : r.type);
75
- return N({
76
- manualFocus: H
77
- }), (u, a) => (l(), s("div", f({
71
+ } = Y(o, k), P = f(() => s.value?.value ?? o.modelValue), W = f(() => (P.value || "").length), B = f(() => ({
72
+ currentLength: W.value,
73
+ maxLength: o.maxLength
74
+ })), C = f(
75
+ () => o.maxLength && o.maxLengthCounterPosition === "outside"
76
+ ), j = f(
77
+ () => o.feedbackText || C.value
78
+ ), x = Q(!1), q = f(() => x.value && o.type === "password" ? "text" : o.type);
79
+ return S({
80
+ manualFocus: R
81
+ }), (u, a) => (l(), d("div", c({
78
82
  class: {
79
83
  "input-with-label-container": !0,
80
84
  disabled: e.disabled,
81
85
  [`variant-${e.feedbackVariant}`]: !0
82
86
  }
83
- }, t(c)[t(m).WRAPPER]), [
84
- e.label && e.labelDirection !== "inside" ? (l(), o(X, {
87
+ }, t(y)[t(m).WRAPPER]), [
88
+ e.label && e.labelDirection !== "inside" ? (l(), r(Z, {
85
89
  key: 0,
86
90
  label: e.label,
87
91
  mandatory: e.mandatory,
@@ -91,36 +95,36 @@ const _ = {
91
95
  "test-id": e.testId
92
96
  }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : n("", !0),
93
97
  A("div", {
94
- class: C({
98
+ class: E({
95
99
  "input-container": !0,
96
100
  "label-inside": t(w),
97
101
  focused: t(h)
98
102
  })
99
103
  }, [
100
- u.$slots.iconBefore ? (l(), s("div", _, [
101
- E(u.$slots, "iconBefore", {}, void 0, !0)
104
+ u.$slots.iconBefore ? (l(), d("div", te, [
105
+ F(u.$slots, "iconBefore", {}, void 0, !0)
102
106
  ])) : n("", !0),
103
- e.prefix ? (l(), o(t(O), {
107
+ e.prefix ? (l(), r(t(D), {
104
108
  key: 1,
105
109
  class: "prefix-text",
106
110
  variant: "body1"
107
111
  }, {
108
112
  default: b(() => [
109
- V(F(e.prefix), 1)
113
+ V($(e.prefix), 1)
110
114
  ]),
111
115
  _: 1
112
116
  })) : n("", !0),
113
- A("input", f({
117
+ A("input", c({
114
118
  ref_key: "inputRef",
115
119
  ref: g,
116
120
  maxlength: e.maxLength
117
- }, { ...u.$attrs, ...t(c)[t(m).FIELD] }, {
121
+ }, { ...u.$attrs, ...t(y)[t(m).FIELD] }, {
118
122
  value: t(P),
119
- placeholder: t(K),
123
+ placeholder: t(M),
120
124
  disabled: e.disabled || e.viewOnly,
121
- type: t(W),
125
+ type: t(q),
122
126
  class: ["input", {
123
- [t(M)]: !0,
127
+ [t(G)]: !0,
124
128
  "view-only": e.viewOnly,
125
129
  "label-inside": t(w),
126
130
  "hide-arrows": e.hideNumberArrows,
@@ -131,32 +135,32 @@ const _ = {
131
135
  (...i) => t(L) && t(L)(...i)),
132
136
  onFocus: a[1] || (a[1] = (i) => h.value = !0),
133
137
  onBlur: a[2] || (a[2] = (i) => h.value = !1),
134
- onKeyup: a[3] || (a[3] = J($(
138
+ onKeyup: a[3] || (a[3] = U(z(
135
139
  //@ts-ignore
136
140
  (...i) => t(T) && t(T)(...i),
137
141
  ["prevent"]
138
142
  ), ["enter"])),
139
143
  onKeypress: a[4] || (a[4] = //@ts-ignore
140
144
  (...i) => t(I) && t(I)(...i))
141
- }), null, 16, ee),
142
- e.maxLength && e.maxLengthCounterPosition === "inside" ? (l(), o(D, z(f({ key: 2 }, t(B))), null, 16)) : n("", !0),
143
- e.showApply || t(d)?.confirmable && !t(d)?.error?.value ? (l(), s("div", {
145
+ }), null, 16, le),
146
+ e.maxLength && e.maxLengthCounterPosition === "inside" ? (l(), r(N, O(c({ key: 2 }, t(B))), null, 16)) : n("", !0),
147
+ e.showApply || t(s)?.confirmable && !t(s)?.error?.value ? (l(), d("div", {
144
148
  key: 3,
145
149
  class: "apply-button",
146
- onClick: $(S, ["stop", "prevent"])
150
+ onClick: z(H, ["stop", "prevent"])
147
151
  }, [
148
152
  p(t(v), {
149
153
  name: "check",
150
154
  size: "20px"
151
155
  })
152
- ], 8, te)) : n("", !0),
153
- e.inlineError || t(d)?.error?.value ? (l(), s("div", le, [
154
- p(t(Q), f({
155
- disabled: !e.inlineErrorText && !t(d)?.error?.value,
156
- text: e.inlineErrorText || t(d)?.error?.value,
156
+ ], 8, ae)) : n("", !0),
157
+ e.inlineError || t(s)?.error?.value ? (l(), d("div", ne, [
158
+ p(t(X), c({
159
+ disabled: !e.inlineErrorText && !t(s)?.error?.value,
160
+ text: e.inlineErrorText || t(s)?.error?.value,
157
161
  "test-id": e.testId,
158
162
  placement: e.inlineErrorTextPlacement
159
- }, t(c)[t(m).TOOLTIP]), {
163
+ }, t(y)[t(m).TOOLTIP]), {
160
164
  default: b(() => [
161
165
  p(t(v), {
162
166
  name: "warning-circle",
@@ -166,52 +170,52 @@ const _ = {
166
170
  _: 1
167
171
  }, 16, ["disabled", "text", "test-id", "placement"])
168
172
  ])) : n("", !0),
169
- e.suffix ? (l(), o(t(O), {
173
+ e.suffix ? (l(), r(t(D), {
170
174
  key: 5,
171
175
  class: "suffix-text",
172
176
  variant: "body1"
173
177
  }, {
174
178
  default: b(() => [
175
- V(F(e.suffix), 1)
179
+ V($(e.suffix), 1)
176
180
  ]),
177
181
  _: 1
178
182
  })) : n("", !0),
179
- e.type === "password" ? (l(), s("div", f({
183
+ e.type === "password" ? (l(), d("div", c({
180
184
  key: 6,
181
185
  class: "password-visibility-toggle"
182
- }, t(c)[t(m).TOGGLE_PASSWORD], {
183
- onClick: a[5] || (a[5] = (i) => y.value = !y.value)
186
+ }, t(y)[t(m).TOGGLE_PASSWORD], {
187
+ onClick: a[5] || (a[5] = (i) => x.value = !x.value)
184
188
  }), [
185
- y.value ? (l(), o(t(v), {
189
+ x.value ? (l(), r(t(v), {
186
190
  key: 0,
187
191
  name: "eye",
188
192
  size: "16px"
189
- })) : (l(), o(t(v), {
193
+ })) : (l(), r(t(v), {
190
194
  key: 1,
191
195
  name: "eye-slash",
192
196
  size: "16px"
193
197
  }))
194
198
  ], 16)) : n("", !0),
195
- u.$slots.iconAfter ? (l(), s("div", ae, [
196
- E(u.$slots, "iconAfter", {}, void 0, !0)
199
+ u.$slots.iconAfter ? (l(), d("div", oe, [
200
+ F(u.$slots, "iconAfter", {}, void 0, !0)
197
201
  ])) : n("", !0)
198
202
  ], 2),
199
- e.feedbackText || e.maxLength ? (l(), s("div", {
203
+ t(j) ? (l(), d("div", {
200
204
  key: 1,
201
- class: C(["footer", e.feedbackPositionAbsolute && "footer-absolute"])
205
+ class: E(["footer", e.feedbackPositionAbsolute && "footer-absolute"])
202
206
  }, [
203
- e.feedbackText ? (l(), o(Y, {
207
+ e.feedbackText ? (l(), r(_, {
204
208
  key: 0,
205
209
  text: e.feedbackText,
206
210
  variant: e.feedbackVariant,
207
211
  "show-icon": e.showFeedbackTextIcon,
208
212
  "test-id": e.testId
209
213
  }, null, 8, ["text", "variant", "show-icon", "test-id"])) : n("", !0),
210
- e.maxLength && e.maxLengthCounterPosition === "outside" ? (l(), o(D, z(f({ key: 1 }, t(B))), null, 16)) : n("", !0)
214
+ t(C) ? (l(), r(N, O(c({ key: 1 }, t(B))), null, 16)) : n("", !0)
211
215
  ], 2)) : n("", !0)
212
216
  ], 16));
213
217
  }
214
218
  });
215
219
  export {
216
- ve as default
220
+ be as default
217
221
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.1.7-test.2",
3
+ "version": "2.1.7-test.3",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"
package/Autocomplete.vue_vue_type_style_index_0_scoped_a7bfd237_lang.css DELETED
@@ -1 +0,0 @@
1
- div[data-v-a7bfd237]{display:block}.autocomplete-dropdown[data-v-a7bfd237]{position:relative}.footer[data-v-a7bfd237]{display:flex;justify-content:flex-end;align-items:center;margin-top:var(--spacing-50)}
package/TextField.vue_vue_type_style_index_0_scoped_052b1a0c_lang.css DELETED
@@ -1 +0,0 @@
1
- @import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-052b1a0c],.font-chart-2[data-v-052b1a0c],.font-chart-1[data-v-052b1a0c]{font-family:Inter,sans-serif;font-weight:700}.font-chip-label[data-v-052b1a0c],.font-table-label[data-v-052b1a0c],.font-button[data-v-052b1a0c],.font-heading-6[data-v-052b1a0c],.font-heading-5[data-v-052b1a0c],.font-heading-4[data-v-052b1a0c],.font-heading-3[data-v-052b1a0c],.font-heading-2[data-v-052b1a0c],.font-heading-1[data-v-052b1a0c],.font-title[data-v-052b1a0c]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-052b1a0c],.font-input-label[data-v-052b1a0c],.font-overline[data-v-052b1a0c],.font-subtitle-2[data-v-052b1a0c],.font-subtitle-1[data-v-052b1a0c]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-052b1a0c],.font-body-2[data-v-052b1a0c],.input-container .input[data-v-052b1a0c],.font-body-1[data-v-052b1a0c]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-052b1a0c]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-052b1a0c]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-052b1a0c]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-052b1a0c]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-052b1a0c]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-052b1a0c]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-052b1a0c]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.input-container .input[data-v-052b1a0c],.font-body-1[data-v-052b1a0c]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-052b1a0c]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-052b1a0c]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-052b1a0c]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-052b1a0c]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-052b1a0c]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-052b1a0c]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-052b1a0c]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-052b1a0c]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-052b1a0c]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-052b1a0c]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-052b1a0c],.font-tab-label2[data-v-052b1a0c]{font-size:.875rem;line-height:1rem}.font-chip-label[data-v-052b1a0c]{font-size:.75rem;line-height:1rem}h1[data-v-052b1a0c],h2[data-v-052b1a0c],h3[data-v-052b1a0c],h4[data-v-052b1a0c],h5[data-v-052b1a0c],h6[data-v-052b1a0c]{margin:0}.disabled .input[data-v-052b1a0c]::placeholder{color:var(--text-disabled)}.disabled .input-container[data-v-052b1a0c]{cursor:no-drop;background-color:var(--action-disabled-background)}.disabled .input-container[data-v-052b1a0c]:hover{outline:1px solid var(--action-outlined-border);background-color:var(--action-disabled-background)}.input-size-small[data-v-052b1a0c]{height:28px}.input-size-medium[data-v-052b1a0c]{height:32px}.input-size-large[data-v-052b1a0c]{height:40px}.input-with-label-container[data-v-052b1a0c]{display:flex;flex-direction:column}.input-container[data-v-052b1a0c]{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);position:relative;gap:var(--spacing-50)}.input-container[data-v-052b1a0c]:hover{outline:1px solid var(--action-active);background-color:var(--action-hover)}.input-container .input[data-v-052b1a0c]{padding:0;width:100%;border:none;background:transparent;color:var(--text-primary);line-height:normal}.input-container .input[data-v-052b1a0c]:focus{outline:none}.input-container .input[data-v-052b1a0c]:disabled{color:var(--text-disabled);cursor:no-drop}.input-container .input.view-only[data-v-052b1a0c]{color:var(--text-disabled)}.input-container .input[type=number][data-v-052b1a0c]::-webkit-inner-spin-button{opacity:.7;transform:scale(1.1)}.input-container .hide-arrows.input[type=number][data-v-052b1a0c]::-webkit-inner-spin-button,.input-container .hide-arrows.input[type=number][data-v-052b1a0c]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.input-container .input[type=password][data-v-052b1a0c]{letter-spacing:4px}.input-container[data-v-052b1a0c] ::placeholder{color:var(--text-secondary);letter-spacing:normal}.input-container .label-inside[data-v-052b1a0c]::placeholder{color:var(--text-primary)}.input-container .icon-container[data-v-052b1a0c]{display:flex;align-items:center;color:var(--text-secondary)}.input-container .icon-before[data-v-052b1a0c]{padding-right:var(--spacing-50)}.input-container .icon-after[data-v-052b1a0c]{padding-left:var(--spacing-50)}.prefix-text[data-v-052b1a0c]{color:var(--text-secondary, #646464);margin-right:var(--spacing-50)}.suffix-text[data-v-052b1a0c]{color:var(--text-secondary, #646464)}.focused[data-v-052b1a0c],.focused[data-v-052b1a0c]:hover{outline:2px solid var(--primary-main);background-color:var(--action-hover)}.error-icon.error-icon[data-v-052b1a0c],.error-icon.error-icon[data-v-052b1a0c]:hover{color:var(--error-main)}.label-direction-left[data-v-052b1a0c]{flex-direction:row;align-items:center;justify-content:space-between}.apply-button[data-v-052b1a0c]{cursor:pointer;color:var(--primary-main);width:var(--spacing-250);height:var(--spacing-250)}.inline-error[data-v-052b1a0c]{cursor:pointer;color:var(--error-main);display:flex;justify-content:center;align-items:center}.footer[data-v-052b1a0c]{display:flex;justify-content:flex-end;margin-top:var(--spacing-50)}.footer.footer-absolute[data-v-052b1a0c]{position:absolute;bottom:calc(0px - var(--spacing-300))}.password-visibility-toggle[data-v-052b1a0c]{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.variant-success .input-container[data-v-052b1a0c],.variant-success .input-container[data-v-052b1a0c]:hover{outline:2px solid var(--success-dark)}.variant-error .input-container[data-v-052b1a0c],.variant-error .input-container[data-v-052b1a0c]:hover{outline:2px solid var(--error-main)}.variant-warning .input-container[data-v-052b1a0c],.variant-warning .input-container[data-v-052b1a0c]:hover{outline:2px solid var(--warning-dark)}