@ironsource/shared-ui 2.2.0-rc.20 → 2.2.0-rc.22

package/TagsFieldChip.vue_vue_type_style_index_0_scoped_bdbc1b68_lang.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-bdbc1b68],.font-chart-2[data-v-bdbc1b68],.font-chart-1[data-v-bdbc1b68]{font-family:Inter,sans-serif;font-weight:700}.chip-input-sizer[data-v-bdbc1b68],.chip-input[data-v-bdbc1b68],.font-chip-label[data-v-bdbc1b68],.font-table-label[data-v-bdbc1b68],.font-button[data-v-bdbc1b68],.font-heading-6[data-v-bdbc1b68],.font-heading-5[data-v-bdbc1b68],.font-heading-4[data-v-bdbc1b68],.font-heading-3[data-v-bdbc1b68],.font-heading-2[data-v-bdbc1b68],.font-heading-1[data-v-bdbc1b68],.font-title[data-v-bdbc1b68]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-bdbc1b68],.font-input-label[data-v-bdbc1b68],.font-overline[data-v-bdbc1b68],.font-subtitle-2[data-v-bdbc1b68],.font-subtitle-1[data-v-bdbc1b68]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-bdbc1b68],.font-body-2[data-v-bdbc1b68],.font-body-1[data-v-bdbc1b68]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-bdbc1b68]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-bdbc1b68]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-bdbc1b68]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-bdbc1b68]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-bdbc1b68]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-bdbc1b68]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-bdbc1b68]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-bdbc1b68]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-bdbc1b68]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-bdbc1b68]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-bdbc1b68]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-bdbc1b68]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-bdbc1b68]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-bdbc1b68]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-bdbc1b68]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-bdbc1b68]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-bdbc1b68]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-bdbc1b68]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-bdbc1b68],.font-tab-label2[data-v-bdbc1b68]{font-size:.875rem;line-height:1rem}.chip-input-sizer[data-v-bdbc1b68],.chip-input[data-v-bdbc1b68],.font-chip-label[data-v-bdbc1b68]{font-size:.75rem;line-height:1rem}h1[data-v-bdbc1b68],h2[data-v-bdbc1b68],h3[data-v-bdbc1b68],h4[data-v-bdbc1b68],h5[data-v-bdbc1b68],h6[data-v-bdbc1b68]{margin:0}.rounded-chip[data-v-bdbc1b68]{border-radius:100px}.tags-field-chip--editing[data-v-bdbc1b68]{outline:1px solid var(--outline-color)}.chip-content[data-v-bdbc1b68]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.chip-label[data-v-bdbc1b68]{min-width:.5rem}.chip-label--hidden[data-v-bdbc1b68]{visibility:hidden}.chip-input[data-v-bdbc1b68]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.chip-input[data-v-bdbc1b68]:focus{outline:none}.chip-input-outline[data-v-bdbc1b68]::placeholder{color:var(--action-disabled)}.clear-button[data-v-bdbc1b68]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-bdbc1b68]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-bdbc1b68]{color:var(--error-dark)}.clear-button--invalid[data-v-bdbc1b68]:hover{color:var(--error-darker)}.chip-input-sizer[data-v-bdbc1b68]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}

package/components/dateRange/common/DateRange.common.js

@@ -150,7 +150,7 @@ const pe = (o, y) => {
       const l = C.value.find(
         (h) => h.id === e.preset
       );
-      i.value = l.id, t = !0;
+      i.value = l?.id, t = !!l;
     }
     const a = {
       from: new Date(e.from),

package/components/tagsField/TagsFieldChip.vue.d.ts

@@ -1,29 +1,72 @@
+import { ChipSize, ChipColor, ChipVariant } from '../chip/v4/Chip.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     label: string;
     isInvalid?: boolean;
     testId?: string;
+    size?: ChipSize;
+    rounded?: boolean;
+    disabled?: boolean;
+    removable?: boolean;
+    color?: ChipColor;
+    iconColor?: string;
+    variant?: ChipVariant;
+    placeholder?: string;
 }>, {
     isInvalid: boolean;
     label: string;
     testId: string;
+    size: string;
+    rounded: boolean;
+    disabled: boolean;
+    removable: boolean;
+    color: string;
+    iconColor: string;
+    variant: string;
+    placeholder: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
+    stopEditing: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     label: string;
     isInvalid?: boolean;
     testId?: string;
+    size?: ChipSize;
+    rounded?: boolean;
+    disabled?: boolean;
+    removable?: boolean;
+    color?: ChipColor;
+    iconColor?: string;
+    variant?: ChipVariant;
+    placeholder?: string;
 }>, {
     isInvalid: boolean;
     label: string;
     testId: string;
+    size: string;
+    rounded: boolean;
+    disabled: boolean;
+    removable: boolean;
+    color: string;
+    iconColor: string;
+    variant: string;
+    placeholder: string;
 }>>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
+    onStopEditing?: () => any;
 }, {
     label: string;
     testId: string;
+    variant: ChipVariant;
+    disabled: boolean;
+    color: ChipColor;
+    size: ChipSize;
+    rounded: boolean;
+    placeholder: string;
     isInvalid: boolean;
+    removable: boolean;
+    iconColor: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/tagsField/TagsFieldChip.vue.js

@@ -1,7 +1,7 @@
-import e from "./TagsFieldChip.vue2.js";
-/* empty css                    */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; //*');
-const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-d186b7ef"]]);
+import o from "./TagsFieldChip.vue2.js";
+/* empty css                    */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_bdbc1b68_lang.css"; //*');
+const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-bdbc1b68"]]);
 export {
   t as default
 };

package/components/tagsField/TagsFieldChip.vue2.js

@@ -1,81 +1,125 @@
- import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; import { defineComponent as k, ref as p, computed as x, openBlock as C, createBlock as I, unref as t, normalizeClass as c, withModifiers as s, withCtx as f, createElementVNode as v, createVNode as m, createTextVNode as w, toDisplayString as T, withDirectives as B, isRef as E, withKeys as h, vShow as V, vModelText as K, nextTick as N } from "vue";
-import R from "../typography/v4/Typography.vue.js";
-import z from "../icon/v4/IconV4.vue.js";
+ import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_bdbc1b68_lang.css"; import { defineComponent as M, ref as r, computed as b, watch as N, nextTick as k, openBlock as d, createBlock as g, unref as t, normalizeClass as u, normalizeStyle as C, withModifiers as s, withCtx as w, createElementVNode as S, createTextVNode as K, toDisplayString as z, withDirectives as x, createElementBlock as I, isRef as D, withKeys as B, vModelText as F, createCommentVNode as O, createVNode as W, vShow as L } from "vue";
+import U from "../typography/v4/Typography.vue.js";
+import $ from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import D from "../chip/v4/ChipV4.vue.js";
-const M = { class: "chip-content" }, S = ["onKeyup"], j = /* @__PURE__ */ k({
+import j from "../chip/v4/ChipV4.vue.js";
+const q = { class: "chip-content" }, A = ["placeholder", "onKeyup"], X = /* @__PURE__ */ M({
   __name: "TagsFieldChip",
   props: {
     label: { default: "" },
     isInvalid: { type: Boolean, default: !1 },
-    testId: { default: "" }
+    testId: { default: "" },
+    size: { default: "small" },
+    rounded: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    removable: { type: Boolean, default: !0 },
+    color: { default: "default" },
+    iconColor: { default: "var(--action-active)" },
+    variant: { default: "filled" },
+    placeholder: { default: "" }
   },
-  emits: ["update:label", "remove"],
-  setup(l, { emit: n }) {
-    const b = l, i = p(!1), e = x({
-      get: () => b.label,
-      set: (d) => {
-        n("update:label", d);
+  emits: ["update:label", "remove", "stopEditing"],
+  setup(e, { emit: o }) {
+    const i = e, a = r(!1), l = b({
+      get: () => i.label,
+      set: (h) => {
+        o("update:label", h);
       }
-    }), r = p(null), g = () => r.value?.focus(), y = async () => {
-      i.value = !0, await N(), g();
-    }, o = () => {
-      i.value = !1, e.value || n("remove");
-    };
-    return (d, a) => (C(), I(t(D), {
-      class: c(["tags-field-chip", {
-        "tags-field-chip--editing": i.value,
-        "tags-field-chip--invalid": l.isInvalid
-      }]),
-      label: t(e),
-      "test-id": l.testId,
-      color: l.isInvalid ? "error" : "default",
-      onClick: s(y, ["stop"])
+    }), m = r(null), E = () => m.value?.focus(), R = async () => {
+      i.disabled || (a.value = !0, await k(), E());
+    }, T = () => {
+      o("stopEditing"), c();
+    }, c = () => {
+      a.value = !1, !l.value && !i.placeholder && o("remove");
+    }, v = r(null), f = r(void 0);
+    N(
+      () => [l.value, i.placeholder, a.value],
+      async () => {
+        await k(), a.value && v.value ? f.value = v.value.offsetWidth + "px" : f.value = void 0;
+      },
+      { immediate: !0 }
+    );
+    const p = {
+      default: "var(--default-outlined-border)",
+      primary: "var(--primary-main)",
+      info: "var(--info-dark)",
+      error: "var(--error-main)",
+      warning: "var(--warning-main)",
+      success: "var(--success-main)",
+      dark: "var(--common-divider)"
+    }, V = b(() => a.value && i.variant !== "outlined" ? {
+      "--outline-color": i.isInvalid ? p.error : p[i.color] || "var(--default-outlined-border)"
+    } : {});
+    return (h, n) => (d(), g(t(j), {
+      class: u({
+        "rounded-chip": e.rounded,
+        "tags-field-chip--editing": a.value && e.variant !== "outlined"
+        // outlined chips have an outline
+      }),
+      label: t(l),
+      "test-id": e.testId,
+      color: e.isInvalid ? "error" : e.color,
+      size: e.size,
+      variant: e.variant,
+      disabled: e.disabled,
+      style: C(t(V)),
+      onClick: s(R, ["stop"])
     }, {
-      default: f(() => [
-        v("div", M, [
-          m(t(R), {
-            variant: "chipLabel",
-            class: c(["chip-label", { "chip-label--hidden": i.value }])
-          }, {
-            default: f(() => [
-              w(T(t(e)), 1)
-            ]),
-            _: 1
-          }, 8, ["class"]),
-          B(v("input", {
+      default: w(() => [
+        S("div", q, [
+          a.value ? x((d(), I("input", {
+            key: 1,
             ref_key: "inputRef",
-            ref: r,
-            "onUpdate:modelValue": a[0] || (a[0] = (u) => E(e) ? e.value = u : null),
-            class: "chip-input",
+            ref: m,
+            "onUpdate:modelValue": n[0] || (n[0] = (y) => D(l) ? l.value = y : null),
+            placeholder: e.placeholder,
+            class: u(["chip-input", { "chip-input-outline": e.variant === "outlined" }]),
             spellcheck: "false",
-            onBlur: o,
+            style: C({ width: f.value }),
+            onBlur: T,
             onKeyup: [
-              h(s(o, ["prevent"]), ["enter"]),
-              h(s(o, ["prevent"]), ["esc"])
+              B(s(c, ["prevent"]), ["enter"]),
+              B(s(c, ["prevent"]), ["esc"])
             ]
-          }, null, 40, S), [
-            [V, i.value],
+          }, null, 46, A)), [
             [
-              K,
-              t(e),
+              F,
+              t(l),
               void 0,
               { trim: !0 }
             ]
-          ])
+          ]) : (d(), g(t(U), {
+            key: 0,
+            variant: "chipLabel",
+            class: u(["chip-label", { "chip-label--placeholder": !t(l) && e.placeholder }])
+          }, {
+            default: w(() => [
+              K(z(t(l) || e.placeholder), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])),
+          a.value ? (d(), I("span", {
+            key: 2,
+            ref_key: "sizerRef",
+            ref: v,
+            class: "chip-input-sizer"
+          }, z(t(l) || e.placeholder || ""), 513)) : O("", !0)
         ]),
-        m(t(z), {
-          class: c(["clear-button", { "clear-button--invalid": l.isInvalid }]),
+        x(W(t($), {
+          class: u(["clear-button", { "clear-button--invalid": e.isInvalid }]),
           name: "x-circle",
           size: "16px",
           type: "fill",
-          onClick: a[1] || (a[1] = s((u) => n("remove"), ["stop"]))
-        }, null, 8, ["class"])
+          color: e.isInvalid ? "var(--error-dark)" : e.iconColor,
+          onClick: n[1] || (n[1] = s((y) => o("remove"), ["stop"]))
+        }, null, 8, ["class", "color"]), [
+          [L, e.removable]
+        ])
       ]),
       _: 1
-    }, 8, ["class", "label", "test-id", "color", "onClick"]));
+    }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"]));
   }
 });
 export {
-  j as default
+  X as default
 };

package/components/tagsField/index.d.ts

@@ -1,5 +1,118 @@
 import TagsField from './TagsField.vue';
-declare const TagsFieldTypes: () => import("vue").DefineComponent<{
+import TagsFieldChip from './TagsFieldChip.vue';
+declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"filled" | "outlined">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium">;
+        default: string;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    removable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    iconColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:label": (value: string) => void;
+    remove: () => void;
+    stopEditing: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"filled" | "outlined">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium">;
+        default: string;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    removable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    iconColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    onRemove?: () => any;
+    "onUpdate:label"?: (value: string) => any;
+    onStopEditing?: () => any;
+}, {
+    label: string;
+    testId: string;
+    variant: "filled" | "outlined";
+    disabled: boolean;
+    color: "dark" | "default" | "primary" | "info" | "success" | "warning" | "error";
+    size: "small" | "medium";
+    rounded: boolean;
+    placeholder: string;
+    isInvalid: boolean;
+    removable: boolean;
+    iconColor: string;
+}> | import("vue").DefineComponent<{
     testId: {
         type: import("vue").PropType<string>;
         default: string;
@@ -71,5 +184,5 @@ declare const TagsFieldTypes: () => import("vue").DefineComponent<{
     feedbackText: string;
     feedbackVariant: "success" | "warning" | "error";
     showFeedbackTextIcon: boolean;
-}>[];
-export { TagsField, TagsFieldTypes };
+}>)[];
+export { TagsField, TagsFieldChip, TagsFieldTypes };

package/components/tagsField/index.js

@@ -1,6 +1,8 @@
-import e from "./TagsField.vue.js";
-const s = () => [e];
+import i from "./TagsField.vue.js";
+import o from "./TagsFieldChip.vue.js";
+const r = () => [i, o];
 export {
-  e as TagsField,
-  s as TagsFieldTypes
+  i as TagsField,
+  o as TagsFieldChip,
+  r as TagsFieldTypes
 };

package/index.js

@@ -1,4 +1,4 @@
-import './AppTrigger.vue_vue_type_style_index_0_scoped_121aac8b_lang.css';
+import './Heading.vue_vue_type_style_index_0_scoped_19878c4b_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";
@@ -113,6 +113,7 @@ import { ChartType as ue, TooltipOrder as $e, TrendDirection as Te } from "./com
 import { default as ye } from "./components/columnPicker/ColumnPicker.vue.js";
 import { default as Fe } from "./components/columnConfigurator/ColumnConfigurator.vue.js";
 import { default as Ce } from "./components/tagsField/TagsField.vue.js";
+import { default as Ee } from "./components/tagsField/TagsFieldChip.vue.js";
 const Z = {
   ...e,
   ...t,
@@ -222,6 +223,7 @@ export {
   jr as MultiBar,
   ho as MultiBarTypes,
   Ce as TagsField,
+  Ee as TagsFieldChip,
   ar as TagsFieldTypes,
   Jr as Text,
   $e as TooltipOrder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.2.0-rc.20",
+  "version": "2.2.0-rc.22",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-d186b7ef],.font-chart-2[data-v-d186b7ef],.font-chart-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:700}.chip-input[data-v-d186b7ef],.font-chip-label[data-v-d186b7ef],.font-table-label[data-v-d186b7ef],.font-button[data-v-d186b7ef],.font-heading-6[data-v-d186b7ef],.font-heading-5[data-v-d186b7ef],.font-heading-4[data-v-d186b7ef],.font-heading-3[data-v-d186b7ef],.font-heading-2[data-v-d186b7ef],.font-heading-1[data-v-d186b7ef],.font-title[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-d186b7ef],.font-input-label[data-v-d186b7ef],.font-overline[data-v-d186b7ef],.font-subtitle-2[data-v-d186b7ef],.font-subtitle-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-d186b7ef],.font-body-2[data-v-d186b7ef],.font-body-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-d186b7ef]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-d186b7ef]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-d186b7ef]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-d186b7ef]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-d186b7ef]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-d186b7ef]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-d186b7ef]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-d186b7ef]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-d186b7ef]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-d186b7ef]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-d186b7ef]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-d186b7ef]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-d186b7ef],.font-tab-label2[data-v-d186b7ef]{font-size:.875rem;line-height:1rem}.chip-input[data-v-d186b7ef],.font-chip-label[data-v-d186b7ef]{font-size:.75rem;line-height:1rem}h1[data-v-d186b7ef],h2[data-v-d186b7ef],h3[data-v-d186b7ef],h4[data-v-d186b7ef],h5[data-v-d186b7ef],h6[data-v-d186b7ef]{margin:0}.tags-field-chip[data-v-d186b7ef]{--outline-color: var(--default-outlined-border);border-radius:100px}.tags-field-chip--invalid[data-v-d186b7ef]{--outline-color: var(--error-outlined-border)}.tags-field-chip--editing[data-v-d186b7ef]{outline:1px solid var(--outline-color)}.chip-content[data-v-d186b7ef]{display:flex;position:relative}.chip-label[data-v-d186b7ef]{min-width:.5rem}.chip-label--hidden[data-v-d186b7ef]{visibility:hidden}.chip-input[data-v-d186b7ef]{position:absolute;left:0;top:-.5px;width:100%;height:100%;background:transparent;color:var(--text-primary);line-height:normal;min-width:.5rem;padding:0;border:none}.chip-input[data-v-d186b7ef]:focus{outline:none}.clear-button[data-v-d186b7ef]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-d186b7ef]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-d186b7ef]{color:var(--error-dark)}.clear-button--invalid[data-v-d186b7ef]:hover{color:var(--error-darker)}