@ironsource/shared-ui 2.2.0-test.23 → 2.2.0-test.25

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 (23) hide show
  1. package/FormCard.vue_vue_type_style_index_0_scoped_98458a8f_lang.css +1 -0
  2. package/OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css +1 -0
  3. package/PopoverV4.vue_vue_type_style_index_0_scoped_9ae00876_lang.css +1 -0
  4. package/Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css +1 -0
  5. package/components/dropdown/v4/OptionV4.vue.js +3 -3
  6. package/components/dropdown/v4/OptionV4.vue2.js +13 -12
  7. package/components/forms/FormCard.vue.js +3 -3
  8. package/components/forms/FormCard.vue2.js +5 -5
  9. package/components/popover/v4/PopoverV4.vue.d.ts +14 -0
  10. package/components/popover/v4/PopoverV4.vue.js +2 -2
  11. package/components/popover/v4/PopoverV4.vue2.js +11 -9
  12. package/components/popover/v4/index.d.ts +41 -1
  13. package/components/tag/Tag.vue.d.ts +14 -0
  14. package/components/tag/Tag.vue.js +3 -3
  15. package/components/tag/Tag.vue2.js +128 -100
  16. package/components/tag/index.d.ts +22 -0
  17. package/index.d.ts +82 -2
  18. package/index.js +1 -1
  19. package/package.json +1 -1
  20. package/FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css +0 -1
  21. package/OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css +0 -1
  22. package/PopoverV4.vue_vue_type_style_index_0_scoped_66694b4e_lang.css +0 -1
  23. package/Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css +0 -1
package/FormCard.vue_vue_type_style_index_0_scoped_98458a8f_lang.css ADDED
@@ -0,0 +1 @@
1
+ .form-card[data-v-98458a8f]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-paper)}.card-header[data-v-98458a8f]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-600);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300);border-bottom:1px solid var(--common-divider)}.card-header .skeleton-header[data-v-98458a8f]{width:220px;height:20px}.card-content[data-v-98458a8f]{padding:var(--spacing-350) var(--spacing-500)}.card-content--no-padding[data-v-98458a8f]{padding:0}.form-actions[data-v-98458a8f]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-98458a8f]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-98458a8f]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-98458a8f]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-98458a8f]{margin-bottom:24px;width:100%;max-width:436px;height:16px}
package/OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css ADDED
@@ -0,0 +1 @@
1
+ .label[data-v-771e1980]{color:#41454d}.item-container[data-v-771e1980]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-771e1980]{cursor:not-allowed;color:var(--text-disabled)}.item-container--disabled .item .start-icon[data-v-771e1980],.item-container--disabled .item .end-icon[data-v-771e1980],.item-container--disabled .item .end-text-icon[data-v-771e1980]{color:var(--text-disabled)}.item-container--disabled .item .image img[data-v-771e1980]{opacity:.5}.item-container[data-v-771e1980]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-771e1980],.item-container[data-v-771e1980]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-771e1980]{background-color:var(--action-selected)}.item-container--filtered-out[data-v-771e1980]{color:var(--text-disabled)}.subtitle[data-v-771e1980]{color:#7b838c;line-height:1rem}.clear-button[data-v-771e1980]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-771e1980]:hover{color:#3083ff}.item[data-v-771e1980]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-771e1980],.item--multi[data-v-771e1980]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-771e1980]{width:20px;height:20px;flex:none}.item .image img[data-v-771e1980]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-771e1980]{width:16px;height:16px}.item .flag img[data-v-771e1980]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-771e1980],.item .end-icon[data-v-771e1980]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-771e1980]{display:inline-flex}.item .option-text[data-v-771e1980]{line-height:1.1875rem}.text-container[data-v-771e1980]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-771e1980]{display:block}.tooltip-option[data-v-771e1980] .container{width:100%}.app-trigger--icon[data-v-771e1980]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-771e1980]{transform:rotate(0)}.option-warning[data-v-771e1980]{display:flex}.option-warning__icon[data-v-771e1980]{color:var(--warning-main)}.option-content[data-v-771e1980]{display:flex}.option-content[data-v-771e1980]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-771e1980]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-771e1980]{flex-direction:column}.option-text .main-text[data-v-771e1980]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-771e1980]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-771e1980]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-771e1980]{color:var(--text-secondary)}.multiline-tooltip[data-v-771e1980]{display:flex;flex-direction:column}
package/PopoverV4.vue_vue_type_style_index_0_scoped_9ae00876_lang.css ADDED
@@ -0,0 +1 @@
1
+ div[data-v-9ae00876]{display:block}
package/Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_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-3a5abbc4],.font-chart-2[data-v-3a5abbc4],.font-chart-1[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-3a5abbc4],.tag-input[data-v-3a5abbc4],.font-chip-label[data-v-3a5abbc4],.font-table-label[data-v-3a5abbc4],.font-button[data-v-3a5abbc4],.font-heading-6[data-v-3a5abbc4],.font-heading-5[data-v-3a5abbc4],.font-heading-4[data-v-3a5abbc4],.font-heading-3[data-v-3a5abbc4],.font-heading-2[data-v-3a5abbc4],.font-heading-1[data-v-3a5abbc4],.font-title[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-3a5abbc4],.font-input-label[data-v-3a5abbc4],.font-overline[data-v-3a5abbc4],.font-subtitle-2[data-v-3a5abbc4],.font-subtitle-1[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-3a5abbc4],.font-body-2[data-v-3a5abbc4],.font-body-1[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-3a5abbc4]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-3a5abbc4]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-3a5abbc4]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-3a5abbc4]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-3a5abbc4]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-3a5abbc4]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-3a5abbc4]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-3a5abbc4]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-3a5abbc4]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-3a5abbc4]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-3a5abbc4]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-3a5abbc4]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-3a5abbc4]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-3a5abbc4]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-3a5abbc4]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-3a5abbc4]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-3a5abbc4]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-3a5abbc4]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-3a5abbc4],.font-tab-label2[data-v-3a5abbc4]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-3a5abbc4],.tag-input[data-v-3a5abbc4],.font-chip-label[data-v-3a5abbc4]{font-size:.75rem;line-height:1rem}h1[data-v-3a5abbc4],h2[data-v-3a5abbc4],h3[data-v-3a5abbc4],h4[data-v-3a5abbc4],h5[data-v-3a5abbc4],h6[data-v-3a5abbc4]{margin:0}.rounded-tag[data-v-3a5abbc4]{border-radius:100px}.tag-editing[data-v-3a5abbc4]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-3a5abbc4]{background-color:var(--action-hover)}.tag-hover-outline[data-v-3a5abbc4]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-3a5abbc4]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-3a5abbc4]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-3a5abbc4]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-3a5abbc4]{margin-right:.25rem}.tag-label[data-v-3a5abbc4]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-3a5abbc4]{color:var(--action-disabled)}.tag-label--hidden[data-v-3a5abbc4]{visibility:hidden}.tag-input[data-v-3a5abbc4]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.tag-input[data-v-3a5abbc4]:focus{outline:none}.tag-input-outline[data-v-3a5abbc4]::placeholder{color:var(--action-disabled)}.clear-button[data-v-3a5abbc4]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-3a5abbc4]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-3a5abbc4]{color:var(--error-dark)}.clear-button--invalid[data-v-3a5abbc4]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-3a5abbc4]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-3a5abbc4]{cursor:text}.empty-tag[data-v-3a5abbc4]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-3a5abbc4]:hover:not(.tag-disabled){outline:1px dashed var(--action-active)}
package/components/dropdown/v4/OptionV4.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./OptionV4.vue2.js";
2
- /* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css"; //*');
4
- const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-752a357d"]]);
2
+ /* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css"; //*');
4
+ const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-771e1980"]]);
5
5
  export {
6
6
  s as default
7
7
  };
package/components/dropdown/v4/OptionV4.vue2.js CHANGED
@@ -1,4 +1,4 @@
1
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css"; import { defineComponent as V, ref as I, watch as F, computed as L, openBlock as i, createBlock as g, unref as n, createSlots as N, withCtx as s, createElementVNode as u, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as r, createVNode as a, toDisplayString as m, createTextVNode as T, withModifiers as O, Fragment as j, renderList as R } from "vue";
1
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css"; import { defineComponent as V, ref as I, watch as F, computed as L, openBlock as i, createBlock as g, unref as n, createSlots as N, withCtx as s, createElementVNode as u, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as r, createVNode as a, toDisplayString as m, createTextVNode as T, withModifiers as O, Fragment as j, renderList as R } from "vue";
2
2
  import "../../typography/Heading.vue.js";
3
3
  import D from "../../typography/Text.vue.js";
4
4
  import q from "../../checkbox/v4/CheckboxV4.vue.js";
@@ -6,7 +6,7 @@ import y from "../../icon/v4/IconV4.vue.js";
6
6
  import G from "../../icon/v4/IconFlag.vue.js";
7
7
  import { NOOP as $ } from "@vue/shared";
8
8
  import { optionCommon as H } from "../common/Option.common.js";
9
- import p from "../../typography/v4/Typography.vue.js";
9
+ import x from "../../typography/v4/Typography.vue.js";
10
10
  import h from "../../tooltip/v4/TooltipV4.vue.js";
11
11
  import { isElementTruncated as J } from "../../../utils/text.js";
12
12
  import { promiseTimeout as Q } from "@vueuse/core";
@@ -71,11 +71,11 @@ const U = { class: "multiline-tooltip" }, W = {
71
71
  setup(e, { emit: M }) {
72
72
  const d = e, { selected: b, id: B, onClick: S, api: K } = H(d), z = (t) => {
73
73
  d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? $() : S(t);
74
- }, x = I(null), w = I(!1), A = (t) => {
74
+ }, p = I(null), w = I(!1), A = (t) => {
75
75
  d.disabled && (t.stopPropagation(), $());
76
76
  };
77
- F([() => d.treeChildShown, x], async () => {
78
- await Q(100), w.value = x.value && J(x.value);
77
+ F([() => d.treeChildShown, p], async () => {
78
+ await Q(100), w.value = p.value && J(p.value);
79
79
  });
80
80
  const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : w.value ? t[d.nameKey] : "", k = L(() => {
81
81
  const t = d.disabled && d.minMaxSelectionTooltipMessage || "", c = P(d.option);
@@ -97,7 +97,8 @@ const U = { class: "multiline-tooltip" }, W = {
97
97
  "item-container--disabled": e.disabled,
98
98
  "item-container--active": e.nameKey ? !1 : e.active,
99
99
  "item-container--selected": n(b),
100
- "item-container--multi": e.isMulti
100
+ "item-container--multi": e.isMulti,
101
+ "item-container--filtered-out": e.option?.filteredOut
101
102
  }]),
102
103
  onClick: A
103
104
  }, [
@@ -145,10 +146,10 @@ const U = { class: "multiline-tooltip" }, W = {
145
146
  ])) : o("", !0),
146
147
  u("div", {
147
148
  ref_key: "textContainerRef",
148
- ref: x,
149
+ ref: p,
149
150
  class: "text-container"
150
151
  }, [
151
- a(n(p), {
152
+ a(n(x), {
152
153
  class: "option-text",
153
154
  variant: "body2"
154
155
  }, {
@@ -166,7 +167,7 @@ const U = { class: "multiline-tooltip" }, W = {
166
167
  }, {
167
168
  default: s(() => [
168
169
  e.option?.conditionalOptions ? (i(), l("div", ee, [
169
- a(n(p), {
170
+ a(n(x), {
170
171
  variant: "body2",
171
172
  class: "conditional-option-label"
172
173
  }, {
@@ -175,7 +176,7 @@ const U = { class: "multiline-tooltip" }, W = {
175
176
  ]),
176
177
  _: 1
177
178
  }),
178
- a(n(p), {
179
+ a(n(x), {
179
180
  variant: "h5",
180
181
  class: "conditional-option-value"
181
182
  }, {
@@ -196,7 +197,7 @@ const U = { class: "multiline-tooltip" }, W = {
196
197
  }, null, 8, ["name"])
197
198
  ])) : o("", !0),
198
199
  e.optionTwoLinesKey ? (i(), l("div", ne, [
199
- a(n(p), { variant: "caption" }, {
200
+ a(n(x), { variant: "caption" }, {
200
201
  default: s(() => [
201
202
  T(m(e.option[e.optionTwoLinesKey]), 1)
202
203
  ]),
@@ -279,7 +280,7 @@ const U = { class: "multiline-tooltip" }, W = {
279
280
  name: "tooltip",
280
281
  fn: s(() => [
281
282
  u("div", U, [
282
- (i(!0), l(j, null, R(n(k), (f) => (i(), g(n(p), {
283
+ (i(!0), l(j, null, R(n(k), (f) => (i(), g(n(x), {
283
284
  key: f,
284
285
  variant: "body2"
285
286
  }, {
package/components/forms/FormCard.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./FormCard.vue2.js";
2
- /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css"; //*');
4
- const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-86feae7b"]]);
2
+ /* empty css */import _ from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../FormCard.vue_vue_type_style_index_0_scoped_98458a8f_lang.css"; //*');
4
+ const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-98458a8f"]]);
5
5
  export {
6
6
  t as default
7
7
  };
package/components/forms/FormCard.vue2.js CHANGED
@@ -1,4 +1,4 @@
1
- import "../../FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css"; import { defineComponent as B, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as n, unref as e, renderSlot as m, createVNode as a, withCtx as u, createTextVNode as g, toDisplayString as v, createBlock as T, createCommentVNode as C } from "vue";
1
+ import "../../FormCard.vue_vue_type_style_index_0_scoped_98458a8f_lang.css"; import { defineComponent as B, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as n, unref as e, renderSlot as m, createVNode as a, withCtx as u, createTextVNode as g, toDisplayString as v, createBlock as T, createCommentVNode as C } from "vue";
2
2
  import b from "../typography/v4/Typography.vue.js";
3
3
  import k from "../button/v4/ButtonV4.vue.js";
4
4
  import "../button/v4/IconButtonV4.vue.js";
@@ -7,7 +7,7 @@ import "../button/v4/ToggleButtonGroupAB.vue.js";
7
7
  import { FormCardTestIdModifiers as o } from "../../testids/index.js";
8
8
  import { useTestIdAttrs as N } from "../../utils/testIds.js";
9
9
  import i from "../skeleton/v4/SkeletonV4.vue.js";
10
- const p = { class: "form-card" }, h = {
10
+ const h = { class: "form-card" }, p = {
11
11
  key: 1,
12
12
  class: "content-skeleton-container"
13
13
  }, F = /* @__PURE__ */ B({
@@ -27,7 +27,7 @@ const p = { class: "form-card" }, h = {
27
27
  setup(t, { emit: y }) {
28
28
  const l = N(t.testId, o);
29
29
  return (r, s) => (d(), c("div", null, [
30
- f("div", p, [
30
+ f("div", h, [
31
31
  f("header", n({ class: "card-header" }, e(l)[e(o).TITLE]), [
32
32
  t.isLoading ? (d(), T(e(i), {
33
33
  key: 1,
@@ -46,7 +46,7 @@ const p = { class: "form-card" }, h = {
46
46
  f("div", n({
47
47
  class: ["card-content", { "card-content--no-padding": t.noPadding }]
48
48
  }, e(l)[e(o).CONTENT]), [
49
- t.isLoading ? (d(), c("div", h, [
49
+ t.isLoading ? (d(), c("div", p, [
50
50
  a(e(i), {
51
51
  type: "rectangle",
52
52
  size: 20,
@@ -85,7 +85,7 @@ const p = { class: "form-card" }, h = {
85
85
  class: "form-action",
86
86
  loading: t.saveLoading
87
87
  }, e(l)[e(o).SAVE_BUTTON], {
88
- disabled: t.saveDisabled || t.isLoading,
88
+ disabled: t.saveDisabled || t.isLoading || t.saveLoading,
89
89
  onClick: s[1] || (s[1] = (L) => y("save"))
90
90
  }), {
91
91
  default: u(() => [
package/components/popover/v4/PopoverV4.vue.d.ts CHANGED
@@ -7,6 +7,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
7
7
  placement?: Placement;
8
8
  distance?: number;
9
9
  skidding?: number;
10
+ delay?: number | {
11
+ show: number;
12
+ hide: number;
13
+ };
10
14
  testId?: string;
11
15
  popperClass?: string;
12
16
  container?: string;
@@ -18,6 +22,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
18
22
  placement: string;
19
23
  distance: number;
20
24
  skidding: number;
25
+ delay: number;
21
26
  testId: string;
22
27
  popperClass: string;
23
28
  container: string;
@@ -33,6 +38,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
33
38
  placement?: Placement;
34
39
  distance?: number;
35
40
  skidding?: number;
41
+ delay?: number | {
42
+ show: number;
43
+ hide: number;
44
+ };
36
45
  testId?: string;
37
46
  popperClass?: string;
38
47
  container?: string;
@@ -44,6 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
44
53
  placement: string;
45
54
  distance: number;
46
55
  skidding: number;
56
+ delay: number;
47
57
  testId: string;
48
58
  popperClass: string;
49
59
  container: string;
@@ -51,6 +61,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
51
61
  onIsOpen?: (value: boolean) => any;
52
62
  }, {
53
63
  testId: string;
64
+ delay: number | {
65
+ show: number;
66
+ hide: number;
67
+ };
54
68
  placement: Placement;
55
69
  disabled: boolean;
56
70
  distance: number;
package/components/popover/v4/PopoverV4.vue.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import o from "./PopoverV4.vue2.js";
2
2
  /* empty css *//* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../PopoverV4.vue_vue_type_style_index_0_scoped_66694b4e_lang.css"; //*');
3
+ // import "../../../PopoverV4.vue_vue_type_style_index_0_scoped_9ae00876_lang.css"; //*');
4
4
  // import "../../../PopoverV4.vue_vue_type_style_index_1_lang.css"; //');
5
- const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-66694b4e"]]);
5
+ const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9ae00876"]]);
6
6
  export {
7
7
  r as default
8
8
  };
package/components/popover/v4/PopoverV4.vue2.js CHANGED
@@ -1,4 +1,4 @@
1
- import "../../../PopoverV4.vue_vue_type_style_index_0_scoped_66694b4e_lang.css"; import "../../../PopoverV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as k, watch as s, openBlock as p, createBlock as y, unref as a, withCtx as u, createElementBlock as h, renderSlot as g, createCommentVNode as B, createElementVNode as C } from "vue";
1
+ import "../../../PopoverV4.vue_vue_type_style_index_0_scoped_9ae00876_lang.css"; import "../../../PopoverV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as k, watch as s, openBlock as p, createBlock as y, unref as r, withCtx as u, createElementBlock as h, renderSlot as g, createCommentVNode as B, createElementVNode as C } from "vue";
2
2
  import { Dropdown as w } from "floating-vue";
3
3
  import { popoverCommon as $ } from "../common/Popover.common.js";
4
4
  const O = ["data-testid"], H = /* @__PURE__ */ k({
@@ -11,6 +11,7 @@ const O = ["data-testid"], H = /* @__PURE__ */ k({
11
11
  placement: { default: "bottom-start" },
12
12
  distance: { default: 0 },
13
13
  skidding: { default: 0 },
14
+ delay: { default: 0 },
14
15
  testId: { default: "" },
15
16
  popperClass: { default: "" },
16
17
  container: { default: "body" }
@@ -26,24 +27,25 @@ const O = ["data-testid"], H = /* @__PURE__ */ k({
26
27
  d(o);
27
28
  }
28
29
  );
29
- const r = (o) => {
30
+ const a = (o) => {
30
31
  i.trigger === o && (t.value = !t.value);
31
32
  };
32
33
  return f({
33
34
  toggle: d
34
- }), (o, n) => (p(), y(a(w), {
35
+ }), (o, n) => (p(), y(r(w), {
35
36
  theme: "custom-popover",
36
37
  placement: e.placement,
37
- shown: !!a(t),
38
+ shown: !!r(t),
38
39
  triggers: e.trigger === "managed" ? [] : [e.trigger],
39
40
  "auto-hide": e.autoHide,
40
41
  distance: e.distance,
41
42
  skidding: e.skidding,
43
+ delay: e.delay,
42
44
  container: e.container,
43
45
  "popper-class": [e.popperClass, "v4-popover__popper light-theme-v4"]
44
46
  }, {
45
47
  popper: u(() => [
46
- a(t) ? (p(), h("div", {
48
+ r(t) ? (p(), h("div", {
47
49
  key: 0,
48
50
  ref_key: "popup",
49
51
  ref: c,
@@ -57,15 +59,15 @@ const O = ["data-testid"], H = /* @__PURE__ */ k({
57
59
  C("div", {
58
60
  ref_key: "triggerRef",
59
61
  ref: v,
60
- onClick: n[0] || (n[0] = (l) => r("click")),
61
- onMouseenter: n[1] || (n[1] = (l) => r("hover")),
62
- onMouseleave: n[2] || (n[2] = (l) => r("hover"))
62
+ onClick: n[0] || (n[0] = (l) => a("click")),
63
+ onMouseenter: n[1] || (n[1] = (l) => a("hover")),
64
+ onMouseleave: n[2] || (n[2] = (l) => a("hover"))
63
65
  }, [
64
66
  g(o.$slots, "trigger", {}, void 0, !0)
65
67
  ], 544)
66
68
  ]),
67
69
  _: 3
68
- }, 8, ["placement", "shown", "triggers", "auto-hide", "distance", "skidding", "container", "popper-class"]));
70
+ }, 8, ["placement", "shown", "triggers", "auto-hide", "distance", "skidding", "delay", "container", "popper-class"]));
69
71
  }
70
72
  });
71
73
  export {
package/components/popover/v4/index.d.ts CHANGED
@@ -5,6 +5,10 @@ declare const PopoverTypes: () => ({
5
5
  $data: {};
6
6
  $props: Partial<{
7
7
  testId: string;
8
+ delay: number | {
9
+ show: number;
10
+ hide: number;
11
+ };
8
12
  placement: import("floating-vue").Placement;
9
13
  disabled: boolean;
10
14
  distance: number;
@@ -19,6 +23,13 @@ declare const PopoverTypes: () => ({
19
23
  type: import("vue").PropType<string>;
20
24
  default: string;
21
25
  };
26
+ delay: {
27
+ type: import("vue").PropType<number | {
28
+ show: number;
29
+ hide: number;
30
+ }>;
31
+ default: number;
32
+ };
22
33
  placement: {
23
34
  type: import("vue").PropType<import("floating-vue").Placement>;
24
35
  default: string;
@@ -57,7 +68,7 @@ declare const PopoverTypes: () => ({
57
68
  };
58
69
  }>> & {
59
70
  onIsOpen?: (value: boolean) => any;
60
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
71
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "delay" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
61
72
  $attrs: {
62
73
  [x: string]: unknown;
63
74
  };
@@ -76,6 +87,13 @@ declare const PopoverTypes: () => ({
76
87
  type: import("vue").PropType<string>;
77
88
  default: string;
78
89
  };
90
+ delay: {
91
+ type: import("vue").PropType<number | {
92
+ show: number;
93
+ hide: number;
94
+ }>;
95
+ default: number;
96
+ };
79
97
  placement: {
80
98
  type: import("vue").PropType<import("floating-vue").Placement>;
81
99
  default: string;
@@ -120,6 +138,10 @@ declare const PopoverTypes: () => ({
120
138
  isOpen: (value: boolean) => void;
121
139
  }, string, {
122
140
  testId: string;
141
+ delay: number | {
142
+ show: number;
143
+ hide: number;
144
+ };
123
145
  placement: import("floating-vue").Placement;
124
146
  disabled: boolean;
125
147
  distance: number;
@@ -154,6 +176,13 @@ declare const PopoverTypes: () => ({
154
176
  type: import("vue").PropType<string>;
155
177
  default: string;
156
178
  };
179
+ delay: {
180
+ type: import("vue").PropType<number | {
181
+ show: number;
182
+ hide: number;
183
+ }>;
184
+ default: number;
185
+ };
157
186
  placement: {
158
187
  type: import("vue").PropType<import("floating-vue").Placement>;
159
188
  default: string;
@@ -203,6 +232,13 @@ declare const PopoverTypes: () => ({
203
232
  type: import("vue").PropType<string>;
204
233
  default: string;
205
234
  };
235
+ delay: {
236
+ type: import("vue").PropType<number | {
237
+ show: number;
238
+ hide: number;
239
+ }>;
240
+ default: number;
241
+ };
206
242
  placement: {
207
243
  type: import("vue").PropType<import("floating-vue").Placement>;
208
244
  default: string;
@@ -247,6 +283,10 @@ declare const PopoverTypes: () => ({
247
283
  isOpen: (value: boolean) => void;
248
284
  }, string, {
249
285
  testId: string;
286
+ delay: number | {
287
+ show: number;
288
+ hide: number;
289
+ };
250
290
  placement: import("floating-vue").Placement;
251
291
  disabled: boolean;
252
292
  distance: number;
package/components/tag/Tag.vue.d.ts CHANGED
@@ -16,6 +16,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
16
16
  selectable?: boolean;
17
17
  maxLength?: number;
18
18
  maxLengthTooltip?: string;
19
+ validationPattern?: string;
20
+ validationErrorText?: string;
19
21
  }>, {
20
22
  isInvalid: boolean;
21
23
  label: string;
@@ -32,11 +34,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
32
34
  maxLength: any;
33
35
  iconType: string;
34
36
  maxLengthTooltip: string;
37
+ validationPattern: string;
38
+ validationErrorText: string;
35
39
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
36
40
  "update:label": (value: string) => void;
37
41
  remove: () => void;
38
42
  stopEditing: () => void;
39
43
  "update:isSelected": (value: boolean) => void;
44
+ validationError: (value: string) => void;
45
+ validationSuccess: () => void;
40
46
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
41
47
  label: string;
42
48
  isSelected: boolean;
@@ -54,6 +60,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
54
60
  selectable?: boolean;
55
61
  maxLength?: number;
56
62
  maxLengthTooltip?: string;
63
+ validationPattern?: string;
64
+ validationErrorText?: string;
57
65
  }>, {
58
66
  isInvalid: boolean;
59
67
  label: string;
@@ -70,11 +78,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
70
78
  maxLength: any;
71
79
  iconType: string;
72
80
  maxLengthTooltip: string;
81
+ validationPattern: string;
82
+ validationErrorText: string;
73
83
  }>>> & {
74
84
  onRemove?: () => any;
75
85
  "onUpdate:label"?: (value: string) => any;
76
86
  onStopEditing?: () => any;
77
87
  "onUpdate:isSelected"?: (value: boolean) => any;
88
+ onValidationError?: (value: string) => any;
89
+ onValidationSuccess?: () => any;
78
90
  }, {
79
91
  label: string;
80
92
  testId: string;
@@ -91,6 +103,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
91
103
  isInvalid: boolean;
92
104
  selectable: boolean;
93
105
  maxLengthTooltip: string;
106
+ validationPattern: string;
107
+ validationErrorText: string;
94
108
  }>;
95
109
  export default _default;
96
110
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
package/components/tag/Tag.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./Tag.vue2.js";
2
2
  /* empty css */import _ from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css"; //*');
4
- const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-78f19cb0"]]);
3
+ // import "../../Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css"; //*');
4
+ const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-3a5abbc4"]]);
5
5
  export {
6
- c as default
6
+ t as default
7
7
  };
package/components/tag/Tag.vue2.js CHANGED
@@ -1,10 +1,10 @@
1
- import "../../Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css"; import { defineComponent as J, ref as s, computed as d, watch as S, nextTick as N, openBlock as f, createBlock as C, unref as l, withCtx as m, createElementVNode as E, createVNode as w, createTextVNode as V, toDisplayString as T, normalizeClass as p, normalizeStyle as R, withModifiers as b, createCommentVNode as $, withDirectives as O, createElementBlock as H, isRef as Q, withKeys as K, vModelText as X, vShow as Z } from "vue";
2
- import D from "../typography/v4/Typography.vue.js";
3
- import W from "../icon/v4/IconV4.vue.js";
1
+ import "../../Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css"; import { defineComponent as Y, ref as c, computed as d, watch as I, nextTick as R, openBlock as m, createBlock as M, unref as t, withCtx as b, createVNode as z, createTextVNode as P, toDisplayString as S, normalizeClass as h, normalizeStyle as $, withModifiers as g, createElementVNode as Z, createCommentVNode as H, withDirectives as K, createElementBlock as O, isRef as _, withKeys as D, vModelText as ee, vShow as ae } from "vue";
2
+ import W from "../typography/v4/Typography.vue.js";
3
+ import F from "../icon/v4/IconV4.vue.js";
4
4
  import "../icon/v4/IconFlag.vue.js";
5
- import _ from "../chip/v4/ChipV4.vue.js";
6
- import ee from "../popover/v4/PopoverV4.vue.js";
7
- const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, te = ["placeholder", "maxlength", "onKeyup"], se = /* @__PURE__ */ J({
5
+ import te from "../chip/v4/ChipV4.vue.js";
6
+ import le from "../tooltip/v4/TooltipV4.vue.js";
7
+ const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"], ce = /* @__PURE__ */ Y({
8
8
  __name: "Tag",
9
9
  props: {
10
10
  label: { default: "" },
@@ -22,38 +22,66 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
22
22
  editable: { type: Boolean, default: !1 },
23
23
  selectable: { type: Boolean, default: !0 },
24
24
  maxLength: { default: void 0 },
25
- maxLengthTooltip: { default: "You have reached the maximum number of characters" }
25
+ maxLengthTooltip: { default: "Character limit reached" },
26
+ validationPattern: { default: "" },
27
+ validationErrorText: { default: "Invalid format" }
26
28
  },
27
- emits: ["update:label", "remove", "stopEditing", "update:isSelected"],
28
- setup(a, { emit: v }) {
29
- const e = a, r = s(!1), y = s(null), h = s(void 0), k = s(!1), u = s(!1), i = s(e.isSelected || e.editable), z = d(() => !e.label && !r.value && e.placeholder), I = d(() => (console.log(
30
- "isTooltipOpen",
31
- e.maxLength && o.value.length >= e.maxLength && r.value
32
- ), e.maxLength && o.value.length >= e.maxLength && r.value)), g = d(() => e.disabled || !e.selectable || r.value ? "outlined" : u.value ? "filled" : !i.value && !e.editable ? "outlined" : e.variant), F = d(() => e.disabled ? "default" : e.isInvalid ? "error" : i.value || !i.value && e.editable || !e.selectable ? e.color : "default"), o = d({
29
+ emits: ["update:label", "remove", "stopEditing", "update:isSelected", "validationError", "validationSuccess"],
30
+ setup(a, { emit: u }) {
31
+ const e = a, r = c(!1), k = c(null), x = c(void 0), T = c(!1), s = c(!1), o = c(e.isSelected || e.editable), y = d(() => {
32
+ if (!e.validationPattern || !l.value)
33
+ return !0;
34
+ try {
35
+ return new RegExp(e.validationPattern).test(l.value);
36
+ } catch {
37
+ return !0;
38
+ }
39
+ }), v = d(() => !y.value && r.value && l.value), B = d(() => !e.label && !r.value && e.placeholder), w = d(() => e.maxLength && l.value.length >= e.maxLength && r.value), p = d(() => e.disabled || !e.selectable || r.value ? "outlined" : s.value ? "filled" : !o.value && !e.editable ? "outlined" : e.variant), U = d(() => e.disabled ? "default" : e.isInvalid || v.value ? "error" : o.value || !o.value && e.editable || !e.selectable ? e.color : "default"), l = d({
33
40
  get: () => e.label,
34
41
  set: (n) => {
35
- v("update:label", n);
42
+ u("update:label", n);
43
+ }
44
+ });
45
+ I(
46
+ () => [l.value, r.value],
47
+ () => {
48
+ e.validationPattern && r.value && l.value && (y.value ? u("validationSuccess") : u("validationError", e.validationErrorText));
49
+ }
50
+ );
51
+ const L = c(null), C = () => L.value?.focus(), j = () => {
52
+ u("remove");
53
+ }, q = async () => {
54
+ e.disabled || !e.selectable || (e.editable ? (r.value = !0, await R(), C()) : (o.value = !o.value, u("update:isSelected", o.value)));
55
+ }, A = () => {
56
+ if (e.validationPattern && l.value && !y.value) {
57
+ setTimeout(() => {
58
+ C();
59
+ }, 0);
60
+ return;
61
+ }
62
+ E();
63
+ }, E = () => {
64
+ if (e.validationPattern && l.value && !y.value) {
65
+ setTimeout(() => {
66
+ C();
67
+ }, 0);
68
+ return;
36
69
  }
37
- }), M = s(null), P = () => M.value?.focus(), U = async () => {
38
- e.disabled || !e.selectable || (e.editable ? (r.value = !0, await N(), P()) : (i.value = !i.value, v("update:isSelected", i.value)));
39
- }, Y = () => {
40
- v("stopEditing"), x();
41
- }, x = () => {
42
- r.value = !1, !o.value && !e.placeholder && v("remove");
70
+ r.value = !1, !l.value && !e.placeholder && u("remove"), u("stopEditing");
43
71
  };
44
- S(
45
- () => [o.value, e.placeholder, r.value],
72
+ I(
73
+ () => [l.value, e.placeholder, r.value],
46
74
  async () => {
47
- await N(), r.value && y.value ? h.value = y.value.offsetWidth + "px" : h.value = void 0;
75
+ await R(), r.value && k.value ? x.value = k.value.offsetWidth + "px" : x.value = void 0;
48
76
  },
49
77
  { immediate: !0 }
50
- ), S(
78
+ ), I(
51
79
  () => e.editable,
52
80
  () => {
53
- e.editable && (i.value = !0);
81
+ e.editable && (o.value = !0);
54
82
  }
55
83
  );
56
- const B = {
84
+ const V = {
57
85
  default: "var(--default-outlined-border)",
58
86
  primary: "var(--primary-main)",
59
87
  info: "var(--info-dark)",
@@ -61,7 +89,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
61
89
  warning: "var(--warning-main)",
62
90
  success: "var(--success-main)",
63
91
  dark: "var(--common-divider)"
64
- }, L = {
92
+ }, N = {
65
93
  default: "var(--action-active)",
66
94
  primary: "var(--primary-dark)",
67
95
  info: "var(--info-dark)",
@@ -69,7 +97,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
69
97
  warning: "var(--warning-dark)",
70
98
  success: "var(--success-dark)",
71
99
  dark: "var(--common-divider)"
72
- }, j = {
100
+ }, G = {
73
101
  default: "var(--action-active)",
74
102
  primary: "var(--primary-darker)",
75
103
  info: "var(--info-darker)",
@@ -77,145 +105,145 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
77
105
  warning: "var(--warning-darker)",
78
106
  success: "var(--success-darker)",
79
107
  dark: "var(--common-divider)"
80
- }, q = d(() => {
108
+ }, J = d(() => {
81
109
  if (e.disabled)
82
110
  return "var(--action-disabled)";
83
111
  const n = e.isInvalid ? "error" : e.color;
84
- return k.value ? j[n] : L[n];
85
- }), A = d(() => {
112
+ return T.value ? G[n] : N[n];
113
+ }), Q = d(() => {
86
114
  if (e.disabled)
87
115
  return "var(--action-disabled)";
88
116
  const n = e.isInvalid ? "error" : e.color;
89
- return i.value || !e.selectable ? L[n] : "var(--action-active)";
90
- }), G = d(() => {
117
+ return o.value || !e.selectable ? N[n] : "var(--action-active)";
118
+ }), X = d(() => {
91
119
  if (e.editable && e.variant !== "outlined" || !e.selectable) {
92
- const n = r.value ? B[e.color] : "var(--primary-main-50-p)";
120
+ const n = r.value ? V[e.color] : "var(--primary-main-50-p)";
93
121
  return {
94
- "--outline-color": e.isInvalid ? B.error : n
122
+ "--outline-color": e.isInvalid ? V.error : n
95
123
  };
96
124
  }
97
- return u.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
98
- "--outline-color": i.value ? "var(--primary-main-50-p)" : "var(--action-active)"
125
+ return s.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
126
+ "--outline-color": o.value ? "var(--primary-main-50-p)" : "var(--action-active)"
99
127
  } : {};
100
128
  });
101
- return (n, t) => (f(), C(l(ee), {
129
+ return (n, i) => (m(), M(t(le), {
102
130
  placement: "top",
103
- text: a.maxLengthTooltip,
104
- "is-open": l(I),
105
- disabled: !l(I),
131
+ text: t(v) ? a.validationErrorText : a.maxLengthTooltip,
132
+ "is-open": t(w) || t(v),
133
+ shown: t(w) || t(v).length > 0,
134
+ disabled: !t(w) && !t(v),
135
+ trigger: "click",
106
136
  distance: 10,
107
137
  skidding: 10
108
138
  }, {
109
- content: m(() => [
110
- E("div", ae, [
111
- w(l(D), { variant: "body2" }, {
112
- default: m(() => [
113
- V(T(a.maxLengthTooltip), 1)
114
- ]),
115
- _: 1
116
- })
117
- ])
139
+ tooltip: b(() => [
140
+ z(t(W), { variant: "body2" }, {
141
+ default: b(() => [
142
+ P(S(t(v) ? a.validationErrorText : a.maxLengthTooltip), 1)
143
+ ]),
144
+ _: 1
145
+ })
118
146
  ]),
119
- trigger: m(() => [
120
- w(l(_), {
121
- class: p({
147
+ default: b(() => [
148
+ z(t(te), {
149
+ class: h({
122
150
  "rounded-tag": a.rounded,
123
- "tag-editing": r.value && l(g) !== "outlined",
151
+ "tag-editing": r.value && t(p) !== "outlined",
124
152
  // outlined chips have an outline
125
- "tag-hover-outline": a.label && u.value && l(g) !== "outlined",
153
+ "tag-hover-outline": a.label && s.value && t(p) !== "outlined",
126
154
  // outlined chips have an outline
127
- "unselected-tag-hover-outline": a.label && u.value && l(g) !== "outlined" && !i.value && !a.editable,
155
+ "unselected-tag-hover-outline": a.label && s.value && t(p) !== "outlined" && !o.value && !a.editable,
128
156
  // for unselected tags that are not editable, we want to show a hover outline
129
157
  "tag-disabled": a.disabled,
130
- "empty-tag": l(z),
131
- "unselected-tag": !i.value && a.selectable && a.label && !u.value,
158
+ "empty-tag": t(B),
159
+ "unselected-tag": !o.value && a.selectable && a.label && !s.value,
132
160
  "editable-tag": a.editable && !a.disabled
133
161
  }),
134
- label: l(o),
162
+ label: t(l),
135
163
  "test-id": a.testId,
136
- color: l(F),
164
+ color: t(U),
137
165
  size: a.size,
138
- variant: l(g),
166
+ variant: t(p),
139
167
  disabled: a.disabled,
140
- style: R(l(G)),
141
- onMouseover: t[5] || (t[5] = (c) => u.value = !0),
142
- onMouseleave: t[6] || (t[6] = (c) => u.value = !1),
143
- onClick: b(U, ["stop"])
168
+ style: $(t(X)),
169
+ onMouseover: i[4] || (i[4] = (f) => s.value = !0),
170
+ onMouseleave: i[5] || (i[5] = (f) => s.value = !1),
171
+ onClick: g(q, ["stop"])
144
172
  }, {
145
- default: m(() => [
146
- E("div", le, [
147
- a.iconName ? (f(), C(l(W), {
173
+ default: b(() => [
174
+ Z("div", re, [
175
+ a.iconName ? (m(), M(t(F), {
148
176
  key: 0,
149
177
  name: a.iconName,
150
178
  size: "16px",
151
- color: l(A),
179
+ color: t(Q),
152
180
  class: "tag-icon",
153
181
  type: a.iconType
154
- }, null, 8, ["name", "color", "type"])) : $("", !0),
155
- r.value ? O((f(), H("input", {
182
+ }, null, 8, ["name", "color", "type"])) : H("", !0),
183
+ r.value ? K((m(), O("input", {
156
184
  key: 2,
157
185
  ref_key: "inputRef",
158
- ref: M,
159
- "onUpdate:modelValue": t[0] || (t[0] = (c) => Q(o) ? o.value = c : null),
186
+ ref: L,
187
+ "onUpdate:modelValue": i[0] || (i[0] = (f) => _(l) ? l.value = f : null),
160
188
  placeholder: a.placeholder,
161
- class: p(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
189
+ class: h(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
162
190
  spellcheck: "false",
163
- style: R({ width: h.value }),
191
+ style: $({ width: x.value }),
164
192
  maxlength: a.maxLength,
165
- onBlur: Y,
193
+ onBlur: A,
166
194
  onKeyup: [
167
- K(b(x, ["prevent"]), ["enter"]),
168
- K(b(x, ["prevent"]), ["esc"])
195
+ D(g(E, ["prevent"]), ["enter"]),
196
+ D(g(E, ["prevent"]), ["esc"])
169
197
  ]
170
- }, null, 46, te)), [
198
+ }, null, 46, ie)), [
171
199
  [
172
- X,
173
- l(o),
200
+ ee,
201
+ t(l),
174
202
  void 0,
175
203
  { trim: !0 }
176
204
  ]
177
- ]) : (f(), C(l(D), {
205
+ ]) : (m(), M(t(W), {
178
206
  key: 1,
179
207
  variant: "chipLabel",
180
- class: p(["tag-label", {
181
- "tag-label--placeholder": !l(o) && a.placeholder,
208
+ class: h(["tag-label", {
209
+ "tag-label--placeholder": !t(l) && a.placeholder,
182
210
  "tag-label--disabled": a.disabled
183
211
  }])
184
212
  }, {
185
- default: m(() => [
186
- V(T(l(o) || a.placeholder), 1)
213
+ default: b(() => [
214
+ P(S(t(l) || a.placeholder), 1)
187
215
  ]),
188
216
  _: 1
189
217
  }, 8, ["class"])),
190
- r.value ? (f(), H("span", {
218
+ r.value ? (m(), O("span", {
191
219
  key: 3,
192
220
  ref_key: "sizerRef",
193
- ref: y,
221
+ ref: k,
194
222
  class: "tag-input-sizer"
195
- }, T(l(o) || a.placeholder || ""), 513)) : $("", !0)
223
+ }, S(t(l) || a.placeholder || ""), 513)) : H("", !0)
196
224
  ]),
197
- O(w(l(W), {
198
- class: p(["clear-button", { "clear-button--invalid": a.isInvalid }]),
225
+ K(z(t(F), {
226
+ class: h(["clear-button", { "clear-button--invalid": a.isInvalid || t(v) }]),
199
227
  name: "x-circle",
200
228
  size: "16px",
201
229
  type: "fill",
202
- color: l(q),
203
- onMousedown: t[1] || (t[1] = b(() => {
230
+ color: t(J),
231
+ onMousedown: i[1] || (i[1] = g(() => {
204
232
  }, ["prevent"])),
205
- onMouseover: t[2] || (t[2] = (c) => k.value = !0),
206
- onMouseleave: t[3] || (t[3] = (c) => k.value = !1),
207
- onClick: t[4] || (t[4] = b((c) => v("remove"), ["stop"]))
208
- }, null, 8, ["class", "color"]), [
209
- [Z, a.editable && !l(z) && a.selectable]
233
+ onMouseover: i[2] || (i[2] = (f) => T.value = !0),
234
+ onMouseleave: i[3] || (i[3] = (f) => T.value = !1),
235
+ onClick: g(j, ["stop"])
236
+ }, null, 8, ["class", "color", "onClick"]), [
237
+ [ae, a.editable && a.selectable && (r.value || !t(B))]
210
238
  ])
211
239
  ]),
212
240
  _: 1
213
241
  }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"])
214
242
  ]),
215
243
  _: 1
216
- }, 8, ["text", "is-open", "disabled"]));
244
+ }, 8, ["text", "is-open", "shown", "disabled"]));
217
245
  }
218
246
  });
219
247
  export {
220
- se as default
248
+ ce as default
221
249
  };
package/components/tag/index.d.ts CHANGED
@@ -65,11 +65,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
65
65
  type: import("vue").PropType<string>;
66
66
  default: string;
67
67
  };
68
+ validationPattern: {
69
+ type: import("vue").PropType<string>;
70
+ default: string;
71
+ };
72
+ validationErrorText: {
73
+ type: import("vue").PropType<string>;
74
+ default: string;
75
+ };
68
76
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
69
77
  "update:label": (value: string) => void;
70
78
  remove: () => void;
71
79
  stopEditing: () => void;
72
80
  "update:isSelected": (value: boolean) => void;
81
+ validationError: (value: string) => void;
82
+ validationSuccess: () => void;
73
83
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
74
84
  label: {
75
85
  type: import("vue").PropType<string>;
@@ -136,11 +146,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
136
146
  type: import("vue").PropType<string>;
137
147
  default: string;
138
148
  };
149
+ validationPattern: {
150
+ type: import("vue").PropType<string>;
151
+ default: string;
152
+ };
153
+ validationErrorText: {
154
+ type: import("vue").PropType<string>;
155
+ default: string;
156
+ };
139
157
  }>> & {
140
158
  onRemove?: () => any;
141
159
  "onUpdate:label"?: (value: string) => any;
142
160
  onStopEditing?: () => any;
143
161
  "onUpdate:isSelected"?: (value: boolean) => any;
162
+ onValidationError?: (value: string) => any;
163
+ onValidationSuccess?: () => any;
144
164
  }, {
145
165
  label: string;
146
166
  testId: string;
@@ -157,5 +177,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
157
177
  isInvalid: boolean;
158
178
  selectable: boolean;
159
179
  maxLengthTooltip: string;
180
+ validationPattern: string;
181
+ validationErrorText: string;
160
182
  }>[];
161
183
  export { Tag, TagTypes };
package/index.d.ts CHANGED
@@ -29,6 +29,10 @@ declare const _default: {
29
29
  $data: {};
30
30
  $props: Partial<{
31
31
  testId: string;
32
+ delay: number | {
33
+ show: number;
34
+ hide: number;
35
+ };
32
36
  placement: import("floating-vue").Placement;
33
37
  disabled: boolean;
34
38
  distance: number;
@@ -43,6 +47,13 @@ declare const _default: {
43
47
  type: import("vue").PropType<string>;
44
48
  default: string;
45
49
  };
50
+ delay: {
51
+ type: import("vue").PropType<number | {
52
+ show: number;
53
+ hide: number;
54
+ }>;
55
+ default: number;
56
+ };
46
57
  placement: {
47
58
  type: import("vue").PropType<import("floating-vue").Placement>;
48
59
  default: string;
@@ -81,7 +92,7 @@ declare const _default: {
81
92
  };
82
93
  }>> & {
83
94
  onIsOpen?: (value: boolean) => any;
84
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
95
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "delay" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
85
96
  $attrs: {
86
97
  [x: string]: unknown;
87
98
  };
@@ -100,6 +111,13 @@ declare const _default: {
100
111
  type: import("vue").PropType<string>;
101
112
  default: string;
102
113
  };
114
+ delay: {
115
+ type: import("vue").PropType<number | {
116
+ show: number;
117
+ hide: number;
118
+ }>;
119
+ default: number;
120
+ };
103
121
  placement: {
104
122
  type: import("vue").PropType<import("floating-vue").Placement>;
105
123
  default: string;
@@ -144,6 +162,10 @@ declare const _default: {
144
162
  isOpen: (value: boolean) => void;
145
163
  }, string, {
146
164
  testId: string;
165
+ delay: number | {
166
+ show: number;
167
+ hide: number;
168
+ };
147
169
  placement: import("floating-vue").Placement;
148
170
  disabled: boolean;
149
171
  distance: number;
@@ -178,6 +200,13 @@ declare const _default: {
178
200
  type: import("vue").PropType<string>;
179
201
  default: string;
180
202
  };
203
+ delay: {
204
+ type: import("vue").PropType<number | {
205
+ show: number;
206
+ hide: number;
207
+ }>;
208
+ default: number;
209
+ };
181
210
  placement: {
182
211
  type: import("vue").PropType<import("floating-vue").Placement>;
183
212
  default: string;
@@ -227,6 +256,13 @@ declare const _default: {
227
256
  type: import("vue").PropType<string>;
228
257
  default: string;
229
258
  };
259
+ delay: {
260
+ type: import("vue").PropType<number | {
261
+ show: number;
262
+ hide: number;
263
+ }>;
264
+ default: number;
265
+ };
230
266
  placement: {
231
267
  type: import("vue").PropType<import("floating-vue").Placement>;
232
268
  default: string;
@@ -271,6 +307,10 @@ declare const _default: {
271
307
  isOpen: (value: boolean) => void;
272
308
  }, string, {
273
309
  testId: string;
310
+ delay: number | {
311
+ show: number;
312
+ hide: number;
313
+ };
274
314
  placement: import("floating-vue").Placement;
275
315
  disabled: boolean;
276
316
  distance: number;
@@ -292,6 +332,10 @@ declare const _default: {
292
332
  $data: {};
293
333
  $props: Partial<{
294
334
  testId: string;
335
+ delay: number | {
336
+ show: number;
337
+ hide: number;
338
+ };
295
339
  placement: import("floating-vue").Placement;
296
340
  disabled: boolean;
297
341
  distance: number;
@@ -306,6 +350,13 @@ declare const _default: {
306
350
  type: import("vue").PropType<string>;
307
351
  default: string;
308
352
  };
353
+ delay: {
354
+ type: import("vue").PropType<number | {
355
+ show: number;
356
+ hide: number;
357
+ }>;
358
+ default: number;
359
+ };
309
360
  placement: {
310
361
  type: import("vue").PropType<import("floating-vue").Placement>;
311
362
  default: string;
@@ -344,7 +395,7 @@ declare const _default: {
344
395
  };
345
396
  }>> & {
346
397
  onIsOpen?: (value: boolean) => any;
347
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
398
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "delay" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
348
399
  $attrs: {
349
400
  [x: string]: unknown;
350
401
  };
@@ -363,6 +414,13 @@ declare const _default: {
363
414
  type: import("vue").PropType<string>;
364
415
  default: string;
365
416
  };
417
+ delay: {
418
+ type: import("vue").PropType<number | {
419
+ show: number;
420
+ hide: number;
421
+ }>;
422
+ default: number;
423
+ };
366
424
  placement: {
367
425
  type: import("vue").PropType<import("floating-vue").Placement>;
368
426
  default: string;
@@ -407,6 +465,10 @@ declare const _default: {
407
465
  isOpen: (value: boolean) => void;
408
466
  }, string, {
409
467
  testId: string;
468
+ delay: number | {
469
+ show: number;
470
+ hide: number;
471
+ };
410
472
  placement: import("floating-vue").Placement;
411
473
  disabled: boolean;
412
474
  distance: number;
@@ -441,6 +503,13 @@ declare const _default: {
441
503
  type: import("vue").PropType<string>;
442
504
  default: string;
443
505
  };
506
+ delay: {
507
+ type: import("vue").PropType<number | {
508
+ show: number;
509
+ hide: number;
510
+ }>;
511
+ default: number;
512
+ };
444
513
  placement: {
445
514
  type: import("vue").PropType<import("floating-vue").Placement>;
446
515
  default: string;
@@ -490,6 +559,13 @@ declare const _default: {
490
559
  type: import("vue").PropType<string>;
491
560
  default: string;
492
561
  };
562
+ delay: {
563
+ type: import("vue").PropType<number | {
564
+ show: number;
565
+ hide: number;
566
+ }>;
567
+ default: number;
568
+ };
493
569
  placement: {
494
570
  type: import("vue").PropType<import("floating-vue").Placement>;
495
571
  default: string;
@@ -534,6 +610,10 @@ declare const _default: {
534
610
  isOpen: (value: boolean) => void;
535
611
  }, string, {
536
612
  testId: string;
613
+ delay: number | {
614
+ show: number;
615
+ hide: number;
616
+ };
537
617
  placement: import("floating-vue").Placement;
538
618
  disabled: boolean;
539
619
  distance: number;
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import './Heading.vue_vue_type_style_index_0_scoped_19878c4b_lang.css';
1
+ import './Typography.vue_vue_type_style_index_0_scoped_07b259bf_lang.css';
2
2
  import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
3
3
  import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
4
4
  import { MenuItemTypes as ao } from "./components/menuItem/index.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.2.0-test.23",
3
+ "version": "2.2.0-test.25",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"
package/FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css DELETED
@@ -1 +0,0 @@
1
- .form-card[data-v-86feae7b]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-paper)}.card-header[data-v-86feae7b]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-600);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300);border-bottom:1px solid var(--common-divider)}.card-header .skeleton-header[data-v-86feae7b]{width:220px;height:20px}.card-content[data-v-86feae7b]{padding:var(--spacing-350) var(--spacing-500)}.card-content--no-padding[data-v-86feae7b]{padding:0}.form-actions[data-v-86feae7b]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-86feae7b]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-86feae7b]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-86feae7b]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-86feae7b]{margin-bottom:24px;width:100%;max-width:436px;height:16px}
package/OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css DELETED
@@ -1 +0,0 @@
1
- .label[data-v-752a357d]{color:#41454d}.item-container[data-v-752a357d]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-752a357d]{cursor:not-allowed;color:var(--text-disabled)}.item-container--disabled .item .start-icon[data-v-752a357d],.item-container--disabled .item .end-icon[data-v-752a357d],.item-container--disabled .item .end-text-icon[data-v-752a357d]{color:var(--text-disabled)}.item-container--disabled .item .image img[data-v-752a357d]{opacity:.5}.item-container[data-v-752a357d]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-752a357d],.item-container[data-v-752a357d]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-752a357d]{background-color:var(--action-selected)}.subtitle[data-v-752a357d]{color:#7b838c;line-height:1rem}.clear-button[data-v-752a357d]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-752a357d]:hover{color:#3083ff}.item[data-v-752a357d]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-752a357d],.item--multi[data-v-752a357d]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-752a357d]{width:20px;height:20px;flex:none}.item .image img[data-v-752a357d]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-752a357d]{width:16px;height:16px}.item .flag img[data-v-752a357d]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-752a357d],.item .end-icon[data-v-752a357d]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-752a357d]{display:inline-flex}.item .option-text[data-v-752a357d]{line-height:1.1875rem}.text-container[data-v-752a357d]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-752a357d]{display:block}.tooltip-option[data-v-752a357d] .container{width:100%}.app-trigger--icon[data-v-752a357d]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-752a357d]{transform:rotate(0)}.option-warning[data-v-752a357d]{display:flex}.option-warning__icon[data-v-752a357d]{color:var(--warning-main)}.option-content[data-v-752a357d]{display:flex}.option-content[data-v-752a357d]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-752a357d]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-752a357d]{flex-direction:column}.option-text .main-text[data-v-752a357d]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-752a357d]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-752a357d]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-752a357d]{color:var(--text-secondary)}.multiline-tooltip[data-v-752a357d]{display:flex;flex-direction:column}
package/PopoverV4.vue_vue_type_style_index_0_scoped_66694b4e_lang.css DELETED
@@ -1 +0,0 @@
1
- div[data-v-66694b4e]{display:block}
package/Tag.vue_vue_type_style_index_0_scoped_78f19cb0_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-78f19cb0],.font-chart-2[data-v-78f19cb0],.font-chart-1[data-v-78f19cb0]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-78f19cb0],.tag-input[data-v-78f19cb0],.font-chip-label[data-v-78f19cb0],.font-table-label[data-v-78f19cb0],.font-button[data-v-78f19cb0],.font-heading-6[data-v-78f19cb0],.font-heading-5[data-v-78f19cb0],.font-heading-4[data-v-78f19cb0],.font-heading-3[data-v-78f19cb0],.font-heading-2[data-v-78f19cb0],.font-heading-1[data-v-78f19cb0],.font-title[data-v-78f19cb0]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-78f19cb0],.font-input-label[data-v-78f19cb0],.font-overline[data-v-78f19cb0],.font-subtitle-2[data-v-78f19cb0],.font-subtitle-1[data-v-78f19cb0]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-78f19cb0],.font-body-2[data-v-78f19cb0],.font-body-1[data-v-78f19cb0]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-78f19cb0]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-78f19cb0]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-78f19cb0]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-78f19cb0]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-78f19cb0]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-78f19cb0]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-78f19cb0]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-78f19cb0]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-78f19cb0]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-78f19cb0]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-78f19cb0]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-78f19cb0]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-78f19cb0]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-78f19cb0]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-78f19cb0]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-78f19cb0]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-78f19cb0]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-78f19cb0]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-78f19cb0],.font-tab-label2[data-v-78f19cb0]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-78f19cb0],.tag-input[data-v-78f19cb0],.font-chip-label[data-v-78f19cb0]{font-size:.75rem;line-height:1rem}h1[data-v-78f19cb0],h2[data-v-78f19cb0],h3[data-v-78f19cb0],h4[data-v-78f19cb0],h5[data-v-78f19cb0],h6[data-v-78f19cb0]{margin:0}.rounded-tag[data-v-78f19cb0]{border-radius:100px}.tag-editing[data-v-78f19cb0]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-78f19cb0]{background-color:var(--action-hover)}.tag-hover-outline[data-v-78f19cb0]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-78f19cb0]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-78f19cb0]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-78f19cb0]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-78f19cb0]{margin-right:.25rem}.tag-label[data-v-78f19cb0]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-78f19cb0]{color:var(--action-disabled)}.tag-label--hidden[data-v-78f19cb0]{visibility:hidden}.tag-input[data-v-78f19cb0]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.tag-input[data-v-78f19cb0]:focus{outline:none}.tag-input-outline[data-v-78f19cb0]::placeholder{color:var(--action-disabled)}.clear-button[data-v-78f19cb0]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-78f19cb0]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-78f19cb0]{color:var(--error-dark)}.clear-button--invalid[data-v-78f19cb0]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-78f19cb0]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-78f19cb0]{cursor:text}.empty-tag[data-v-78f19cb0]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-78f19cb0]:hover:not(.tag-disabled){outline:1px dashed var(--action-active)}.tag-max-length-tooltip[data-v-78f19cb0]{display:flex;width:15.625rem;padding:.25rem}