@ironsource/shared-ui 2.1.12-rc.9 → 2.1.12-test.2

package/components/dropdown/v4/GroupOption.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/components/dropdown/v4/IconButtonDropdownTrigger.vue.d.ts

@@ -1,14 +1,25 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+import { IconTypes } from '@is-ssp/icon/v4/Icon.types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    iconName?: string;
+    iconType?: IconTypes;
     testId?: string;
 }>, {
+    iconName: string;
+    iconType: string;
     testId: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    iconName?: string;
+    iconType?: IconTypes;
     testId?: string;
 }>, {
+    iconName: string;
+    iconType: string;
     testId: string;
-}>>>, {
+}>>> & Readonly<{}>, {
     testId: string;
-}>;
+    iconName: string;
+    iconType: IconTypes;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/components/dropdown/v4/IconButtonDropdownTrigger.vue.js

@@ -1,7 +1,7 @@
 import o from "./IconButtonDropdownTrigger.vue2.js";
-/* empty css                                */import t from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../IconButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_59fb505a_lang.css"; //*');
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-59fb505a"]]);
+/* empty css                                */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../IconButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_99e51ecc_lang.css"; //*');
+const _ = /* @__PURE__ */ e(o, [["__scopeId", "data-v-99e51ecc"]]);
 export {
-  p as default
+  _ as default
 };

package/components/dropdown/v4/IconButtonDropdownTrigger.vue2.js

@@ -1,21 +1,23 @@
- import "../../../IconButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_59fb505a_lang.css"; import { defineComponent as e, openBlock as r, createBlock as n, unref as p, mergeProps as c } from "vue";
+ import "../../../IconButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_99e51ecc_lang.css"; import { defineComponent as n, openBlock as r, createBlock as p, unref as c, mergeProps as m } from "vue";
 import "../../button/v4/ButtonV4.vue.js";
-import m from "../../button/v4/IconButtonV4.vue.js";
+import i from "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-const _ = /* @__PURE__ */ e({
+const y = /* @__PURE__ */ n({
   __name: "IconButtonDropdownTrigger",
   props: {
+    iconName: { default: "dots-three" },
+    iconType: { default: "bold" },
     testId: { default: "" }
   },
-  setup(o) {
-    const t = o;
-    return (s, i) => (r(), n(p(m), c({
-      "icon-name": "dots-three",
-      type: "bold"
-    }, t), null, 16));
+  setup(e) {
+    const t = e;
+    return (o, a) => (r(), p(c(i), m({
+      "icon-name": o.iconName,
+      type: o.iconType
+    }, t), null, 16, ["icon-name", "type"]));
   }
 });
 export {
-  _ as default
+  y as default
 };

package/components/dropdown/v4/OptionV4.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     option?: unknown;
     subtitle?: string;
     disabled?: boolean;
@@ -9,11 +9,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     nameKey?: string;
     imageKey?: string;
     iconKey?: string;
+    warningKey?: string;
     iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endIconKey?: string;
     endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endTextIconKey?: string;
-    toolTipPlacement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    tooltipPlacement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     treeMainOption?: boolean;
     treeMainOptionExpanded?: boolean;
     stopOptionClickEventPropagation?: boolean;
@@ -22,6 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown?: boolean;
     optionFlagKey?: string;
     isMulti?: boolean;
+    minMaxSelectionTooltipMessage?: string;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -32,11 +34,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     nameKey: any;
     imageKey: any;
     iconKey: any;
+    warningKey: any;
     iconType: string;
     endIconKey: any;
     endIconType: string;
     endTextIconKey: any;
-    toolTipPlacement: string;
+    tooltipPlacement: string;
     treeMainOption: boolean;
     treeMainOptionExpanded: boolean;
     stopOptionClickEventPropagation: boolean;
@@ -45,9 +48,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown: boolean;
     optionFlagKey: any;
     isMulti: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    minMaxSelectionTooltipMessage: any;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggleTreeCollapse: (option: unknown) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     option?: unknown;
     subtitle?: string;
     disabled?: boolean;
@@ -58,11 +62,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     nameKey?: string;
     imageKey?: string;
     iconKey?: string;
+    warningKey?: string;
     iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endIconKey?: string;
     endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endTextIconKey?: string;
-    toolTipPlacement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    tooltipPlacement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     treeMainOption?: boolean;
     treeMainOptionExpanded?: boolean;
     stopOptionClickEventPropagation?: boolean;
@@ -71,6 +76,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown?: boolean;
     optionFlagKey?: string;
     isMulti?: boolean;
+    minMaxSelectionTooltipMessage?: string;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -81,11 +87,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     nameKey: any;
     imageKey: any;
     iconKey: any;
+    warningKey: any;
     iconType: string;
     endIconKey: any;
     endIconType: string;
     endTextIconKey: any;
-    toolTipPlacement: string;
+    tooltipPlacement: string;
     treeMainOption: boolean;
     treeMainOptionExpanded: boolean;
     stopOptionClickEventPropagation: boolean;
@@ -94,13 +101,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown: boolean;
     optionFlagKey: any;
     isMulti: boolean;
-}>>> & {
+    minMaxSelectionTooltipMessage: any;
+}>>> & Readonly<{
     onToggleTreeCollapse?: (option: unknown) => any;
-}, {
+}>, {
     option: any;
+    tooltipPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     disabled: boolean;
-    active: boolean;
     endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+    active: boolean;
     optionFlagKey: string;
     optionTwoLinesVariant: "horizontal" | "vertical";
     optionTwoLinesKey: string;
@@ -110,21 +119,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     nameKey: string;
     imageKey: string;
     iconKey: string;
+    warningKey: string;
     iconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endIconKey: string;
     endTextIconKey: string;
-    toolTipPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     treeMainOption: boolean;
     treeMainOptionExpanded: boolean;
     stopOptionClickEventPropagation: boolean;
     treeChildShown: boolean;
     isMulti: boolean;
-}>, {
+    minMaxSelectionTooltipMessage: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     image?(_: {}): any;
     flag?(_: {}): any;
     "icon-start"?(_: {}): any;
     default?(_: {}): any;
     "icon-end"?(_: {}): any;
+    "option-end"?(_: {
+        option: any;
+    }): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/dropdown/v4/OptionV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
 /* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_1e8837dc_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-1e8837dc"]]);
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_7d287ee5_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-7d287ee5"]]);
 export {
   s as default
 };

package/components/dropdown/v4/OptionV4.vue2.js

@@ -1,40 +1,43 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_1e8837dc_lang.css"; import { defineComponent as P, ref as C, watch as S, computed as V, openBlock as o, createBlock as m, unref as n, createSlots as A, withCtx as s, createElementVNode as c, normalizeClass as v, createCommentVNode as i, createElementBlock as l, renderSlot as y, createVNode as a, toDisplayString as u, createTextVNode as f, withModifiers as I, Fragment as F, renderList as L } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_7d287ee5_lang.css"; import { defineComponent as L, ref as w, watch as N, computed as j, openBlock as t, createBlock as y, unref as o, createSlots as R, withCtx as s, createElementVNode as p, normalizeClass as v, createCommentVNode as n, createElementBlock as i, renderSlot as d, createVNode as a, toDisplayString as u, createTextVNode as f, withModifiers as C, Fragment as D, renderList as q } from "vue";
 import "../../typography/Heading.vue.js";
-import N from "../../typography/Text.vue.js";
-import j from "../../checkbox/v4/CheckboxV4.vue.js";
-import T from "../../icon/v4/IconV4.vue.js";
-import R from "../../icon/v4/IconFlag.vue.js";
-import { NOOP as D } from "@vue/shared";
-import { optionCommon as q } from "../common/Option.common.js";
+import G from "../../typography/Text.vue.js";
+import H from "../../checkbox/v4/CheckboxV4.vue.js";
+import m from "../../icon/v4/IconV4.vue.js";
+import J from "../../icon/v4/IconFlag.vue.js";
+import { NOOP as I } from "@vue/shared";
+import { optionCommon as Q } from "../common/Option.common.js";
 import g from "../../typography/v4/Typography.vue.js";
-import G from "../../tooltip/v4/TooltipV4.vue.js";
-import { isElementTruncated as H } from "../../../utils/text.js";
-import { promiseTimeout as J } from "@vueuse/core";
-const Q = { class: "multiline-tooltip" }, U = {
+import O from "../../tooltip/v4/TooltipV4.vue.js";
+import { isElementTruncated as U } from "../../../utils/text.js";
+import { promiseTimeout as W } from "@vueuse/core";
+const X = { class: "multiline-tooltip" }, Y = {
   key: 1,
   class: "image"
-}, W = ["src"], X = {
+}, Z = ["src"], x = {
   key: 2,
   class: "flag"
-}, Y = {
+}, _ = {
   key: 3,
   class: "start-icon"
-}, Z = {
+}, ee = {
   key: 0,
   class: "main-text"
-}, _ = {
+}, oe = {
   key: 1,
   class: "main-text"
-}, ee = {
+}, te = {
   key: 2,
   class: "end-text-icon"
-}, te = {
+}, ne = {
   key: 3,
   class: "caption-text"
-}, ne = {
+}, ie = {
   key: 4,
   class: "end-icon"
-}, oe = ["onClick"], ie = { key: 0 }, pe = /* @__PURE__ */ P({
+}, le = {
+  key: 5,
+  class: "option-warning"
+}, ae = { key: 0 }, ke = /* @__PURE__ */ L({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -47,11 +50,12 @@ const Q = { class: "multiline-tooltip" }, U = {
     nameKey: { default: null },
     imageKey: { default: null },
     iconKey: { default: null },
+    warningKey: { default: null },
     iconType: { default: "regular" },
     endIconKey: { default: null },
     endIconType: { default: "regular" },
     endTextIconKey: { default: null },
-    toolTipPlacement: { default: "right" },
+    tooltipPlacement: { default: "right" },
     treeMainOption: { type: Boolean, default: !1 },
     treeMainOptionExpanded: { type: Boolean, default: !1 },
     stopOptionClickEventPropagation: { type: Boolean, default: !1 },
@@ -59,91 +63,100 @@ const Q = { class: "multiline-tooltip" }, U = {
     optionTwoLinesKey: { default: void 0 },
     treeChildShown: { type: Boolean, default: !1 },
     optionFlagKey: { default: null },
-    isMulti: { type: Boolean, default: !1 }
+    isMulti: { type: Boolean, default: !1 },
+    minMaxSelectionTooltipMessage: { default: null }
   },
   emits: ["toggleTreeCollapse"],
-  setup(e, { emit: O }) {
-    const d = e, { selected: h, id: w, onClick: $, api: K } = q(d), B = (t) => {
-      d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? D() : $(t);
-    }, p = C(null), b = C(!1);
-    S([() => d.treeChildShown, p], async () => {
-      await J(100), b.value = p.value && H(p.value);
+  setup($, { emit: M }) {
+    const l = $, { selected: k, id: B, onClick: S, api: b } = Q(l), z = (e) => {
+      l.stopOptionClickEventPropagation && e.stopPropagation(), l.disabled ? I() : S(e);
+    }, T = w(null), h = w(!1), E = (e) => {
+      l.disabled && (e.stopPropagation(), I());
+    };
+    N([() => l.treeChildShown, T], async () => {
+      await W(100), h.value = T.value && U(T.value);
     });
-    const M = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : b.value ? t[d.nameKey] : "", x = V(() => M(d.option)), z = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, E = () => {
-      O("toggleTreeCollapse", d.option);
+    const P = (e) => e && typeof e == "object" && "optionTooltipText" in e ? (Array.isArray(e.optionTooltipText), e.optionTooltipText) : h.value ? e[l.nameKey] : "", K = j(() => {
+      const e = l.disabled && l.minMaxSelectionTooltipMessage || "", r = P(l.option);
+      return r ? e ? `${r}. ${e}` : r : e;
+    }), V = (e) => e && typeof e == "object" && "optionTooltipTestId" in e ? e.optionTooltipTestId : null, A = M, F = () => {
+      A("toggleTreeCollapse", l.option);
     };
-    return (t, k) => (o(), m(n(G), {
-      text: n(x),
-      "test-id": z(e.option),
-      placement: e.toolTipPlacement,
+    return (e, r) => (t(), y(o(O), {
+      text: K.value,
+      "test-id": V(e.option),
+      placement: e.tooltipPlacement,
       class: "tooltip-option"
-    }, A({
+    }, R({
       default: s(() => [
-        c("div", {
+        p("div", {
           ref: "el",
           class: v(["item-container", {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
-            "item-container--selected": n(h),
+            "item-container--selected": o(k),
             "item-container--multi": e.isMulti
-          }])
+          }]),
+          onClick: E
         }, [
-          c("div", {
+          p("div", {
             class: v(["item", {
               "item--multi": e.isMulti,
-              "item--with-icon": t.$slots["icon-start"] || t.$slots.image
+              "item--with-icon": e.$slots["icon-start"] || e.$slots.image
             }])
           }, [
-            e.isMulti || e.selectAllOption ? (o(), m(n(j), {
+            e.isMulti || e.selectAllOption ? (t(), y(o(H), {
               key: 0,
-              id: n(w).toString(),
+              id: o(B).toString(),
+              disabled: l.disabled,
               tabindex: "-1",
               class: "checkbox",
-              "is-checked": n(h),
+              "is-checked": o(k),
               "is-indeterminate": e.isIndeterminate,
-              onClick: k[0] || (k[0] = (r) => B(r))
-            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots.image || e.imageKey) ? (o(), l("div", U, [
-              y(t.$slots, "image", {}, () => [
-                e.imageKey ? (o(), l("img", {
+              onClick: r[0] || (r[0] = (c) => z(c))
+            }, null, 8, ["id", "disabled", "is-checked", "is-indeterminate"])) : n("", !0),
+            !e.option?.conditionalOptions && (e.$slots.image || e.imageKey) ? (t(), i("div", Y, [
+              d(e.$slots, "image", {}, () => [
+                e.imageKey ? (t(), i("img", {
                   key: 0,
                   src: e.option[e.imageKey]
-                }, null, 8, W)) : i("", !0)
+                }, null, 8, Z)) : n("", !0)
               ], !0)
-            ])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots.flag || e.optionFlagKey) ? (o(), l("div", X, [
-              y(t.$slots, "flag", {}, () => [
-                e.optionFlagKey ? (o(), m(n(R), {
+            ])) : n("", !0),
+            !e.option?.conditionalOptions && (e.$slots.flag || e.optionFlagKey) ? (t(), i("div", x, [
+              d(e.$slots, "flag", {}, () => [
+                e.optionFlagKey ? (t(), y(o(J), {
                   key: 0,
                   "country-code": e.option[e.optionFlagKey]
-                }, null, 8, ["country-code"])) : i("", !0)
+                }, null, 8, ["country-code"])) : n("", !0)
               ], !0)
-            ])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots["icon-start"] || e.iconKey) ? (o(), l("div", Y, [
-              y(t.$slots, "icon-start", {}, () => [
-                a(n(T), {
+            ])) : n("", !0),
+            !e.option?.conditionalOptions && (e.$slots["icon-start"] || e.iconKey) ? (t(), i("div", _, [
+              d(e.$slots, "icon-start", {}, () => [
+                a(o(m), {
                   type: e.iconType,
                   name: e.option[e.iconKey],
+                  color: e.option.disabled ? "var(--text-disabled)" : null,
                   size: e.iconType === "regular" ? "20px" : "16px"
-                }, null, 8, ["type", "name", "size"])
+                }, null, 8, ["type", "name", "color", "size"])
               ], !0)
-            ])) : i("", !0),
-            c("div", {
+            ])) : n("", !0),
+            p("div", {
               ref_key: "textContainerRef",
-              ref: p,
+              ref: T,
               class: "text-container"
             }, [
-              a(n(g), {
+              a(o(g), {
                 class: "option-text",
                 variant: "body2"
               }, {
                 default: s(() => [
-                  y(t.$slots, "default", {}, () => [
-                    c("div", {
+                  d(e.$slots, "default", {}, () => [
+                    p("div", {
                       class: v(`option-content-${e.optionTwoLinesVariant} option-content`)
                     }, [
-                      e.option?.conditionalOptions ? (o(), l("div", _, [
-                        a(n(g), {
+                      e.option?.conditionalOptions ? (t(), i("div", oe, [
+                        a(o(g), {
                           variant: "body2",
                           class: "conditional-option-label"
                         }, {
@@ -152,7 +165,7 @@ const Q = { class: "multiline-tooltip" }, U = {
                           ]),
                           _: 1
                         }),
-                        a(n(g), {
+                        a(o(g), {
                           variant: "h5",
                           class: "conditional-option-value"
                         }, {
@@ -161,28 +174,28 @@ const Q = { class: "multiline-tooltip" }, U = {
                           ]),
                           _: 1
                         })
-                      ])) : (o(), l("div", Z, u(e.option[e.nameKey]), 1)),
-                      e.endTextIconKey && e.option[e.endTextIconKey] ? (o(), l("span", ee, [
-                        a(n(T), {
+                      ])) : (t(), i("div", ee, u(e.option[e.nameKey]), 1)),
+                      e.endTextIconKey && e.option[e.endTextIconKey] ? (t(), i("span", te, [
+                        a(o(m), {
                           type: "regular",
                           name: e.option[e.endTextIconKey],
                           size: "16px"
                         }, null, 8, ["name"])
-                      ])) : i("", !0),
-                      e.optionTwoLinesKey ? (o(), l("div", te, [
-                        a(n(g), { variant: "caption" }, {
+                      ])) : n("", !0),
+                      e.optionTwoLinesKey ? (t(), i("div", ne, [
+                        a(o(g), { variant: "caption" }, {
                           default: s(() => [
                             f(u(e.option[e.optionTwoLinesKey]), 1)
                           ]),
                           _: 1
                         })
-                      ])) : i("", !0)
+                      ])) : n("", !0)
                     ], 2)
                   ], !0)
                 ]),
                 _: 3
               }),
-              e.subtitle ? (o(), m(n(N), {
+              e.subtitle ? (t(), y(o(G), {
                 key: 0,
                 class: "subtitle",
                 size: "xs"
@@ -191,55 +204,74 @@ const Q = { class: "multiline-tooltip" }, U = {
                   f(u(e.subtitle), 1)
                 ]),
                 _: 1
-              })) : i("", !0)
+              })) : n("", !0)
             ], 512),
-            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (o(), l("div", ne, [
-              y(t.$slots, "icon-end", {}, () => [
-                a(n(T), {
+            e.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (t(), i("div", ie, [
+              d(e.$slots, "icon-end", {}, () => [
+                a(o(m), {
                   type: e.endIconType || "regular",
                   name: e.option[e.endIconKey],
                   size: e.endIconType === "regular" || e.endIconType === "ab-test" ? "20px" : "16px"
                 }, null, 8, ["type", "name", "size"])
               ], !0)
-            ])) : i("", !0),
-            e.treeMainOption ? (o(), l("div", {
-              key: 5,
+            ])) : n("", !0),
+            e.warningKey && e.option?.[e.warningKey] ? (t(), i("div", le, [
+              a(o(O), {
+                text: e.option[e.warningKey],
+                placement: "top"
+              }, {
+                default: s(() => [
+                  a(o(m), {
+                    class: "option-warning__icon",
+                    name: "warning-circle",
+                    size: "16px"
+                  })
+                ]),
+                _: 1
+              }, 8, ["text"])
+            ])) : n("", !0),
+            e.$slots["option-end"] ? d(e.$slots, "option-end", {
+              key: 6,
+              option: e.option
+            }, void 0, !0) : n("", !0),
+            e.treeMainOption ? (t(), i("div", {
+              key: 7,
               class: "tree-main-arrow-wrapper",
-              onClick: I(E, ["stop"])
+              onClick: C(F, ["stop"])
             }, [
-              a(n(T), {
+              a(o(m), {
                 name: "caret-down",
                 size: "16px",
                 class: v(`app-trigger--icon ${e.treeMainOptionExpanded && "expanded"}`)
               }, null, 8, ["class"])
-            ], 8, oe)) : i("", !0)
+            ])) : n("", !0)
           ], 2),
-          n(K).clearable && n(h) ? (o(), l("div", ie, [
-            c("button", {
+          o(b).clearable && o(k) ? (t(), i("div", ae, [
+            p("button", {
               class: "clear-button",
-              onClick: k[1] || (k[1] = I((r) => n(K).clearSelection(), ["prevent", "stop"]))
+              onClick: r[1] || (r[1] = C((c) => o(b).clearSelection(), ["prevent", "stop"]))
             }, [
-              a(n(T), {
+              a(o(m), {
                 name: "close",
                 width: "8",
                 height: "8"
               })
             ])
-          ])) : i("", !0)
+          ])) : n("", !0)
         ], 2)
       ]),
       _: 2
     }, [
-      Array.isArray(n(x)) ? {
+      Array.isArray(K.value) ? {
         name: "tooltip",
         fn: s(() => [
-          c("div", Q, [
-            (o(!0), l(F, null, L(n(x), (r) => (o(), m(n(g), {
-              key: r,
+          p("div", X, [
+            (t(!0), i(D, null, q(K.value, (c) => (t(), y(o(g), {
+              key: c,
               variant: "body2"
             }, {
               default: s(() => [
-                f(u(r), 1)
+                f(u(c), 1)
               ]),
               _: 2
             }, 1024))), 128))
@@ -251,5 +283,5 @@ const Q = { class: "multiline-tooltip" }, U = {
   }
 });
 export {
-  pe as default
+  ke as default
 };