@ironsource/shared-ui 2.2.0-rc.29 → 2.2.0-rc.30
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.
- package/Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css +1 -0
- package/components/tag/Tag.vue.d.ts +2 -0
- package/components/tag/Tag.vue.js +3 -3
- package/components/tag/Tag.vue2.js +40 -40
- package/components/tag/index.d.ts +2 -0
- package/package.json +1 -1
- package/Tag.vue_vue_type_style_index_0_scoped_4b92d495_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
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}
|
|
@@ -36,6 +36,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
36
36
|
"update:label": (value: string) => void;
|
|
37
37
|
remove: () => void;
|
|
38
38
|
stopEditing: () => void;
|
|
39
|
+
"update:isSelected": (value: boolean) => void;
|
|
39
40
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
40
41
|
label: string;
|
|
41
42
|
isSelected: boolean;
|
|
@@ -73,6 +74,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
73
74
|
onRemove?: () => any;
|
|
74
75
|
"onUpdate:label"?: (value: string) => any;
|
|
75
76
|
onStopEditing?: () => any;
|
|
77
|
+
"onUpdate:isSelected"?: (value: boolean) => any;
|
|
76
78
|
}, {
|
|
77
79
|
label: string;
|
|
78
80
|
testId: string;
|
|
@@ -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.
|
|
4
|
-
const
|
|
3
|
+
// import "../../Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css"; //*');
|
|
4
|
+
const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-78f19cb0"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
c as default
|
|
7
7
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../Tag.
|
|
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
2
|
import D from "../typography/v4/Typography.vue.js";
|
|
3
3
|
import W from "../icon/v4/IconV4.vue.js";
|
|
4
4
|
import "../icon/v4/IconFlag.vue.js";
|
|
@@ -24,33 +24,33 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
24
24
|
maxLength: { default: void 0 },
|
|
25
25
|
maxLengthTooltip: { default: "You have reached the maximum number of characters" }
|
|
26
26
|
},
|
|
27
|
-
emits: ["update:label", "remove", "stopEditing"],
|
|
28
|
-
setup(a, { emit:
|
|
29
|
-
const e = a, r = s(!1), y = s(null), h = s(void 0), k = s(!1), u = s(!1),
|
|
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
30
|
"isTooltipOpen",
|
|
31
|
-
e.maxLength &&
|
|
32
|
-
), e.maxLength &&
|
|
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({
|
|
33
33
|
get: () => e.label,
|
|
34
34
|
set: (n) => {
|
|
35
|
-
|
|
35
|
+
v("update:label", n);
|
|
36
36
|
}
|
|
37
37
|
}), M = s(null), P = () => M.value?.focus(), U = async () => {
|
|
38
|
-
e.disabled || !e.selectable || (e.editable ? (r.value = !0, await
|
|
38
|
+
e.disabled || !e.selectable || (e.editable ? (r.value = !0, await N(), P()) : (i.value = !i.value, v("update:isSelected", i.value)));
|
|
39
39
|
}, Y = () => {
|
|
40
|
-
|
|
40
|
+
v("stopEditing"), x();
|
|
41
41
|
}, x = () => {
|
|
42
|
-
r.value = !1, !
|
|
42
|
+
r.value = !1, !o.value && !e.placeholder && v("remove");
|
|
43
43
|
};
|
|
44
|
-
|
|
45
|
-
() => [
|
|
44
|
+
S(
|
|
45
|
+
() => [o.value, e.placeholder, r.value],
|
|
46
46
|
async () => {
|
|
47
|
-
await
|
|
47
|
+
await N(), r.value && y.value ? h.value = y.value.offsetWidth + "px" : h.value = void 0;
|
|
48
48
|
},
|
|
49
49
|
{ immediate: !0 }
|
|
50
|
-
),
|
|
50
|
+
), S(
|
|
51
51
|
() => e.editable,
|
|
52
52
|
() => {
|
|
53
|
-
e.editable && (
|
|
53
|
+
e.editable && (i.value = !0);
|
|
54
54
|
}
|
|
55
55
|
);
|
|
56
56
|
const B = {
|
|
@@ -86,7 +86,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
86
86
|
if (e.disabled)
|
|
87
87
|
return "var(--action-disabled)";
|
|
88
88
|
const n = e.isInvalid ? "error" : e.color;
|
|
89
|
-
return
|
|
89
|
+
return i.value || !e.selectable ? L[n] : "var(--action-active)";
|
|
90
90
|
}), G = d(() => {
|
|
91
91
|
if (e.editable && e.variant !== "outlined" || !e.selectable) {
|
|
92
92
|
const n = r.value ? B[e.color] : "var(--primary-main-50-p)";
|
|
@@ -95,10 +95,10 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
95
95
|
};
|
|
96
96
|
}
|
|
97
97
|
return u.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
|
|
98
|
-
"--outline-color":
|
|
98
|
+
"--outline-color": i.value ? "var(--primary-main-50-p)" : "var(--action-active)"
|
|
99
99
|
} : {};
|
|
100
100
|
});
|
|
101
|
-
return (n, t) => (
|
|
101
|
+
return (n, t) => (f(), C(l(ee), {
|
|
102
102
|
placement: "top",
|
|
103
103
|
text: a.maxLengthTooltip,
|
|
104
104
|
"is-open": l(I),
|
|
@@ -106,17 +106,17 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
106
106
|
distance: 10,
|
|
107
107
|
skidding: 10
|
|
108
108
|
}, {
|
|
109
|
-
content:
|
|
109
|
+
content: m(() => [
|
|
110
110
|
E("div", ae, [
|
|
111
111
|
w(l(D), { variant: "body2" }, {
|
|
112
|
-
default:
|
|
112
|
+
default: m(() => [
|
|
113
113
|
V(T(a.maxLengthTooltip), 1)
|
|
114
114
|
]),
|
|
115
115
|
_: 1
|
|
116
116
|
})
|
|
117
117
|
])
|
|
118
118
|
]),
|
|
119
|
-
trigger:
|
|
119
|
+
trigger: m(() => [
|
|
120
120
|
w(l(_), {
|
|
121
121
|
class: p({
|
|
122
122
|
"rounded-tag": a.rounded,
|
|
@@ -124,14 +124,14 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
124
124
|
// outlined chips have an outline
|
|
125
125
|
"tag-hover-outline": a.label && u.value && l(g) !== "outlined",
|
|
126
126
|
// outlined chips have an outline
|
|
127
|
-
"unselected-tag-hover-outline": a.label && u.value && l(g) !== "outlined" && !
|
|
127
|
+
"unselected-tag-hover-outline": a.label && u.value && l(g) !== "outlined" && !i.value && !a.editable,
|
|
128
128
|
// for unselected tags that are not editable, we want to show a hover outline
|
|
129
129
|
"tag-disabled": a.disabled,
|
|
130
130
|
"empty-tag": l(z),
|
|
131
|
-
"unselected-tag": !
|
|
131
|
+
"unselected-tag": !i.value && a.selectable && a.label && !u.value,
|
|
132
132
|
"editable-tag": a.editable && !a.disabled
|
|
133
133
|
}),
|
|
134
|
-
label: l(
|
|
134
|
+
label: l(o),
|
|
135
135
|
"test-id": a.testId,
|
|
136
136
|
color: l(F),
|
|
137
137
|
size: a.size,
|
|
@@ -140,11 +140,11 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
140
140
|
style: R(l(G)),
|
|
141
141
|
onMouseover: t[5] || (t[5] = (c) => u.value = !0),
|
|
142
142
|
onMouseleave: t[6] || (t[6] = (c) => u.value = !1),
|
|
143
|
-
onClick:
|
|
143
|
+
onClick: b(U, ["stop"])
|
|
144
144
|
}, {
|
|
145
|
-
default:
|
|
145
|
+
default: m(() => [
|
|
146
146
|
E("div", le, [
|
|
147
|
-
a.iconName ? (
|
|
147
|
+
a.iconName ? (f(), C(l(W), {
|
|
148
148
|
key: 0,
|
|
149
149
|
name: a.iconName,
|
|
150
150
|
size: "16px",
|
|
@@ -152,11 +152,11 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
152
152
|
class: "tag-icon",
|
|
153
153
|
type: a.iconType
|
|
154
154
|
}, null, 8, ["name", "color", "type"])) : $("", !0),
|
|
155
|
-
r.value ? O((
|
|
155
|
+
r.value ? O((f(), H("input", {
|
|
156
156
|
key: 2,
|
|
157
157
|
ref_key: "inputRef",
|
|
158
158
|
ref: M,
|
|
159
|
-
"onUpdate:modelValue": t[0] || (t[0] = (c) => Q(
|
|
159
|
+
"onUpdate:modelValue": t[0] || (t[0] = (c) => Q(o) ? o.value = c : null),
|
|
160
160
|
placeholder: a.placeholder,
|
|
161
161
|
class: p(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
|
|
162
162
|
spellcheck: "false",
|
|
@@ -164,35 +164,35 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
164
164
|
maxlength: a.maxLength,
|
|
165
165
|
onBlur: Y,
|
|
166
166
|
onKeyup: [
|
|
167
|
-
K(
|
|
168
|
-
K(
|
|
167
|
+
K(b(x, ["prevent"]), ["enter"]),
|
|
168
|
+
K(b(x, ["prevent"]), ["esc"])
|
|
169
169
|
]
|
|
170
170
|
}, null, 46, te)), [
|
|
171
171
|
[
|
|
172
172
|
X,
|
|
173
|
-
l(
|
|
173
|
+
l(o),
|
|
174
174
|
void 0,
|
|
175
175
|
{ trim: !0 }
|
|
176
176
|
]
|
|
177
|
-
]) : (
|
|
177
|
+
]) : (f(), C(l(D), {
|
|
178
178
|
key: 1,
|
|
179
179
|
variant: "chipLabel",
|
|
180
180
|
class: p(["tag-label", {
|
|
181
|
-
"tag-label--placeholder": !l(
|
|
181
|
+
"tag-label--placeholder": !l(o) && a.placeholder,
|
|
182
182
|
"tag-label--disabled": a.disabled
|
|
183
183
|
}])
|
|
184
184
|
}, {
|
|
185
|
-
default:
|
|
186
|
-
V(T(l(
|
|
185
|
+
default: m(() => [
|
|
186
|
+
V(T(l(o) || a.placeholder), 1)
|
|
187
187
|
]),
|
|
188
188
|
_: 1
|
|
189
189
|
}, 8, ["class"])),
|
|
190
|
-
r.value ? (
|
|
190
|
+
r.value ? (f(), H("span", {
|
|
191
191
|
key: 3,
|
|
192
192
|
ref_key: "sizerRef",
|
|
193
193
|
ref: y,
|
|
194
194
|
class: "tag-input-sizer"
|
|
195
|
-
}, T(l(
|
|
195
|
+
}, T(l(o) || a.placeholder || ""), 513)) : $("", !0)
|
|
196
196
|
]),
|
|
197
197
|
O(w(l(W), {
|
|
198
198
|
class: p(["clear-button", { "clear-button--invalid": a.isInvalid }]),
|
|
@@ -200,11 +200,11 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
|
|
|
200
200
|
size: "16px",
|
|
201
201
|
type: "fill",
|
|
202
202
|
color: l(q),
|
|
203
|
-
onMousedown: t[1] || (t[1] =
|
|
203
|
+
onMousedown: t[1] || (t[1] = b(() => {
|
|
204
204
|
}, ["prevent"])),
|
|
205
205
|
onMouseover: t[2] || (t[2] = (c) => k.value = !0),
|
|
206
206
|
onMouseleave: t[3] || (t[3] = (c) => k.value = !1),
|
|
207
|
-
onClick: t[4] || (t[4] =
|
|
207
|
+
onClick: t[4] || (t[4] = b((c) => v("remove"), ["stop"]))
|
|
208
208
|
}, null, 8, ["class", "color"]), [
|
|
209
209
|
[Z, a.editable && !l(z) && a.selectable]
|
|
210
210
|
])
|
|
@@ -69,6 +69,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
|
|
|
69
69
|
"update:label": (value: string) => void;
|
|
70
70
|
remove: () => void;
|
|
71
71
|
stopEditing: () => void;
|
|
72
|
+
"update:isSelected": (value: boolean) => void;
|
|
72
73
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
73
74
|
label: {
|
|
74
75
|
type: import("vue").PropType<string>;
|
|
@@ -139,6 +140,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
|
|
|
139
140
|
onRemove?: () => any;
|
|
140
141
|
"onUpdate:label"?: (value: string) => any;
|
|
141
142
|
onStopEditing?: () => any;
|
|
143
|
+
"onUpdate:isSelected"?: (value: boolean) => any;
|
|
142
144
|
}, {
|
|
143
145
|
label: string;
|
|
144
146
|
testId: string;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-4b92d495],.font-chart-2[data-v-4b92d495],.font-chart-1[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-4b92d495],.tag-input[data-v-4b92d495],.font-chip-label[data-v-4b92d495],.font-table-label[data-v-4b92d495],.font-button[data-v-4b92d495],.font-heading-6[data-v-4b92d495],.font-heading-5[data-v-4b92d495],.font-heading-4[data-v-4b92d495],.font-heading-3[data-v-4b92d495],.font-heading-2[data-v-4b92d495],.font-heading-1[data-v-4b92d495],.font-title[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-4b92d495],.font-input-label[data-v-4b92d495],.font-overline[data-v-4b92d495],.font-subtitle-2[data-v-4b92d495],.font-subtitle-1[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-4b92d495],.font-body-2[data-v-4b92d495],.font-body-1[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-4b92d495]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-4b92d495]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-4b92d495]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-4b92d495]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-4b92d495]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-4b92d495]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-4b92d495]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-4b92d495]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-4b92d495]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-4b92d495]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-4b92d495]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-4b92d495]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-4b92d495]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-4b92d495]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-4b92d495]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-4b92d495]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-4b92d495]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-4b92d495]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-4b92d495],.font-tab-label2[data-v-4b92d495]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-4b92d495],.tag-input[data-v-4b92d495],.font-chip-label[data-v-4b92d495]{font-size:.75rem;line-height:1rem}h1[data-v-4b92d495],h2[data-v-4b92d495],h3[data-v-4b92d495],h4[data-v-4b92d495],h5[data-v-4b92d495],h6[data-v-4b92d495]{margin:0}.rounded-tag[data-v-4b92d495]{border-radius:100px}.tag-editing[data-v-4b92d495]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-4b92d495]{background-color:var(--action-hover)}.tag-hover-outline[data-v-4b92d495]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-4b92d495]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-4b92d495]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-4b92d495]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-4b92d495]{margin-right:.25rem}.tag-label[data-v-4b92d495]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-4b92d495]{color:var(--action-disabled)}.tag-label--hidden[data-v-4b92d495]{visibility:hidden}.tag-input[data-v-4b92d495]{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-4b92d495]:focus{outline:none}.tag-input-outline[data-v-4b92d495]::placeholder{color:var(--action-disabled)}.clear-button[data-v-4b92d495]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-4b92d495]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-4b92d495]{color:var(--error-dark)}.clear-button--invalid[data-v-4b92d495]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-4b92d495]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-4b92d495]{cursor:text}.empty-tag[data-v-4b92d495]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-4b92d495]:hover:not(.tag-disabled){outline:1px dashed var(--action-active)}.tag-max-length-tooltip[data-v-4b92d495]{display:flex;width:15.625rem;padding:.25rem}
|