@ironsource/shared-ui 2.1.12-test.71 → 2.1.12-test.73

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

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9cdf3a94_lang.css"; //*');
-const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-9cdf3a94"]]);
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_3dc741c1_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-3dc741c1"]]);
 export {
-  s as default
+  p as default
 };

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

@@ -1,43 +1,43 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9cdf3a94_lang.css"; import { defineComponent as S, ref as w, watch as V, computed as A, openBlock as o, createBlock as f, unref as n, createSlots as F, withCtx as d, createElementVNode as c, normalizeClass as p, createCommentVNode as i, createElementBlock as l, renderSlot as u, createVNode as a, toDisplayString as r, createTextVNode as g, withModifiers as C, Fragment as L, renderList as N } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_3dc741c1_lang.css"; import { defineComponent as A, ref as w, watch as F, computed as L, openBlock as o, createBlock as f, unref as n, createSlots as N, withCtx as s, createElementVNode as c, normalizeClass as v, createCommentVNode as i, createElementBlock as l, renderSlot as u, createVNode as a, toDisplayString as r, createTextVNode as g, withModifiers as C, Fragment as j, renderList as R } from "vue";
 import "../../typography/Heading.vue.js";
-import j from "../../typography/Text.vue.js";
-import R from "../../checkbox/v4/CheckboxV4.vue.js";
+import D from "../../typography/Text.vue.js";
+import q from "../../checkbox/v4/CheckboxV4.vue.js";
 import m from "../../icon/v4/IconV4.vue.js";
-import D from "../../icon/v4/IconFlag.vue.js";
-import { NOOP as q } from "@vue/shared";
-import { optionCommon as G } from "../common/Option.common.js";
+import G from "../../icon/v4/IconFlag.vue.js";
+import { NOOP as I } from "@vue/shared";
+import { optionCommon as H } from "../common/Option.common.js";
 import T from "../../typography/v4/Typography.vue.js";
-import I 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 J } from "../../../utils/text.js";
+import { promiseTimeout as Q } from "@vueuse/core";
+const U = { class: "multiline-tooltip" }, W = {
   key: 1,
   class: "image"
-}, W = ["src"], X = {
+}, X = ["src"], Y = {
   key: 2,
   class: "flag"
-}, Y = {
+}, Z = {
   key: 3,
   class: "start-icon"
-}, Z = {
+}, _ = {
   key: 0,
   class: "main-text"
-}, _ = {
+}, ee = {
   key: 1,
   class: "main-text"
-}, ee = {
+}, te = {
   key: 2,
   class: "end-text-icon"
-}, te = {
+}, ne = {
   key: 3,
   class: "caption-text"
-}, ne = {
+}, oe = {
   key: 4,
   class: "end-icon"
-}, oe = {
+}, ie = {
   key: 5,
   class: "option-warning"
-}, ie = { key: 6 }, le = ["onClick"], ae = { key: 0 }, pe = /* @__PURE__ */ S({
+}, le = { key: 6 }, ae = ["onClick"], se = { key: 0 }, Ke = /* @__PURE__ */ A({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -66,64 +66,67 @@ const Q = { class: "multiline-tooltip" }, U = {
     isMulti: { type: Boolean, default: !1 }
   },
   emits: ["toggleTreeCollapse"],
-  setup(e, { emit: O }) {
-    const s = e, { selected: K, id: $, onClick: B, api: x } = G(s), z = (t) => {
-      s.stopOptionClickEventPropagation && t.stopPropagation(), s.disabled ? q() : B(t);
-    }, v = w(null), b = w(!1);
-    V([() => s.treeChildShown, v], async () => {
-      await J(100), b.value = v.value && H(v.value);
+  setup(e, { emit: $ }) {
+    const d = e, { selected: K, id: B, onClick: z, api: x } = H(d), M = (t) => {
+      d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? I() : z(t);
+    }, p = w(null), b = w(!1), E = (t) => {
+      d.disabled && (t.stopPropagation(), I());
+    };
+    F([() => d.treeChildShown, p], async () => {
+      await Q(100), b.value = p.value && J(p.value);
     });
-    const M = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : b.value ? t[s.nameKey] : "", h = A(() => M(s.option)), E = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, P = () => {
-      O("toggleTreeCollapse", s.option);
+    const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : b.value ? t[d.nameKey] : "", h = L(() => P(d.option)), S = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, V = () => {
+      $("toggleTreeCollapse", d.option);
     };
-    return (t, k) => (o(), f(n(I), {
+    return (t, k) => (o(), f(n(O), {
       text: n(h),
-      "test-id": E(e.option),
+      "test-id": S(e.option),
       placement: e.toolTipPlacement,
       class: "tooltip-option"
-    }, F({
-      default: d(() => [
+    }, N({
+      default: s(() => [
         c("div", {
           ref: "el",
-          class: p(["item-container", {
+          class: v(["item-container", {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
             "item-container--selected": n(K),
             "item-container--multi": e.isMulti
-          }])
+          }]),
+          onClick: E
         }, [
           c("div", {
-            class: p(["item", {
+            class: v(["item", {
               "item--multi": e.isMulti,
               "item--with-icon": t.$slots["icon-start"] || t.$slots.image
             }])
           }, [
-            e.isMulti || e.selectAllOption ? (o(), f(n(R), {
+            e.isMulti || e.selectAllOption ? (o(), f(n(q), {
               key: 0,
-              id: n($).toString(),
+              id: n(B).toString(),
               tabindex: "-1",
               class: "checkbox",
               "is-checked": n(K),
               "is-indeterminate": e.isIndeterminate,
-              onClick: k[0] || (k[0] = (y) => z(y))
+              onClick: k[0] || (k[0] = (y) => M(y))
             }, null, 8, ["id", "is-checked", "is-indeterminate"])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots.image || e.imageKey) ? (o(), l("div", U, [
+            !e.option?.conditionalOptions && (t.$slots.image || e.imageKey) ? (o(), l("div", W, [
               u(t.$slots, "image", {}, () => [
                 e.imageKey ? (o(), l("img", {
                   key: 0,
                   src: e.option[e.imageKey]
-                }, null, 8, W)) : i("", !0)
+                }, null, 8, X)) : i("", !0)
               ], !0)
             ])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots.flag || e.optionFlagKey) ? (o(), l("div", X, [
+            !e.option?.conditionalOptions && (t.$slots.flag || e.optionFlagKey) ? (o(), l("div", Y, [
               u(t.$slots, "flag", {}, () => [
-                e.optionFlagKey ? (o(), f(n(D), {
+                e.optionFlagKey ? (o(), f(n(G), {
                   key: 0,
                   "country-code": e.option[e.optionFlagKey]
                 }, null, 8, ["country-code"])) : i("", !0)
               ], !0)
             ])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots["icon-start"] || e.iconKey) ? (o(), l("div", Y, [
+            !e.option?.conditionalOptions && (t.$slots["icon-start"] || e.iconKey) ? (o(), l("div", Z, [
               u(t.$slots, "icon-start", {}, () => [
                 a(n(m), {
                   type: e.iconType,
@@ -134,24 +137,24 @@ const Q = { class: "multiline-tooltip" }, U = {
             ])) : i("", !0),
             c("div", {
               ref_key: "textContainerRef",
-              ref: v,
+              ref: p,
               class: "text-container"
             }, [
               a(n(T), {
                 class: "option-text",
                 variant: "body2"
               }, {
-                default: d(() => [
+                default: s(() => [
                   u(t.$slots, "default", {}, () => [
                     c("div", {
-                      class: p(`option-content-${e.optionTwoLinesVariant} option-content`)
+                      class: v(`option-content-${e.optionTwoLinesVariant} option-content`)
                     }, [
-                      e.option?.conditionalOptions ? (o(), l("div", _, [
+                      e.option?.conditionalOptions ? (o(), l("div", ee, [
                         a(n(T), {
                           variant: "body2",
                           class: "conditional-option-label"
                         }, {
-                          default: d(() => [
+                          default: s(() => [
                             g(r(e.option.conditionalName) + ": ", 1)
                           ]),
                           _: 1
@@ -160,22 +163,22 @@ const Q = { class: "multiline-tooltip" }, U = {
                           variant: "h5",
                           class: "conditional-option-value"
                         }, {
-                          default: d(() => [
+                          default: s(() => [
                             g('"' + r(e.option[e.nameKey]) + '"', 1)
                           ]),
                           _: 1
                         })
-                      ])) : (o(), l("div", Z, r(e.option[e.nameKey]), 1)),
-                      e.endTextIconKey && e.option[e.endTextIconKey] ? (o(), l("span", ee, [
+                      ])) : (o(), l("div", _, r(e.option[e.nameKey]), 1)),
+                      e.endTextIconKey && e.option[e.endTextIconKey] ? (o(), l("span", te, [
                         a(n(m), {
                           type: "regular",
                           name: e.option[e.endTextIconKey],
                           size: "16px"
                         }, null, 8, ["name"])
                       ])) : i("", !0),
-                      e.optionTwoLinesKey ? (o(), l("div", te, [
+                      e.optionTwoLinesKey ? (o(), l("div", ne, [
                         a(n(T), { variant: "caption" }, {
-                          default: d(() => [
+                          default: s(() => [
                             g(r(e.option[e.optionTwoLinesKey]), 1)
                           ]),
                           _: 1
@@ -186,18 +189,18 @@ const Q = { class: "multiline-tooltip" }, U = {
                 ]),
                 _: 3
               }),
-              e.subtitle ? (o(), f(n(j), {
+              e.subtitle ? (o(), f(n(D), {
                 key: 0,
                 class: "subtitle",
                 size: "xs"
               }, {
-                default: d(() => [
+                default: s(() => [
                   g(r(e.subtitle), 1)
                 ]),
                 _: 1
               })) : i("", !0)
             ], 512),
-            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (o(), l("div", ne, [
+            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (o(), l("div", oe, [
               u(t.$slots, "icon-end", {}, () => [
                 a(n(m), {
                   type: e.endIconType || "regular",
@@ -206,12 +209,12 @@ const Q = { class: "multiline-tooltip" }, U = {
                 }, null, 8, ["type", "name", "size"])
               ], !0)
             ])) : i("", !0),
-            e.warningKey && e.option?.[e.warningKey] ? (o(), l("div", oe, [
-              a(n(I), {
+            e.warningKey && e.option?.[e.warningKey] ? (o(), l("div", ie, [
+              a(n(O), {
                 text: e.option[e.warningKey],
                 placement: "top"
               }, {
-                default: d(() => [
+                default: s(() => [
                   a(n(m), {
                     class: "option-warning__icon",
                     name: "warning-circle",
@@ -221,22 +224,22 @@ const Q = { class: "multiline-tooltip" }, U = {
                 _: 1
               }, 8, ["text"])
             ])) : i("", !0),
-            t.$slots["option-end"] ? (o(), l("div", ie, [
+            t.$slots["option-end"] ? (o(), l("div", le, [
               u(t.$slots, "option-end", { option: e.option }, void 0, !0)
             ])) : i("", !0),
             e.treeMainOption ? (o(), l("div", {
               key: 7,
               class: "tree-main-arrow-wrapper",
-              onClick: C(P, ["stop"])
+              onClick: C(V, ["stop"])
             }, [
               a(n(m), {
                 name: "caret-down",
                 size: "16px",
-                class: p(`app-trigger--icon ${e.treeMainOptionExpanded && "expanded"}`)
+                class: v(`app-trigger--icon ${e.treeMainOptionExpanded && "expanded"}`)
               }, null, 8, ["class"])
-            ], 8, le)) : i("", !0)
+            ], 8, ae)) : i("", !0)
           ], 2),
-          n(x).clearable && n(K) ? (o(), l("div", ae, [
+          n(x).clearable && n(K) ? (o(), l("div", se, [
             c("button", {
               class: "clear-button",
               onClick: k[1] || (k[1] = C((y) => n(x).clearSelection(), ["prevent", "stop"]))
@@ -254,13 +257,13 @@ const Q = { class: "multiline-tooltip" }, U = {
     }, [
       Array.isArray(n(h)) ? {
         name: "tooltip",
-        fn: d(() => [
-          c("div", Q, [
-            (o(!0), l(L, null, N(n(h), (y) => (o(), f(n(T), {
+        fn: s(() => [
+          c("div", U, [
+            (o(!0), l(j, null, R(n(h), (y) => (o(), f(n(T), {
               key: y,
               variant: "body2"
             }, {
-              default: d(() => [
+              default: s(() => [
                 g(r(y), 1)
               ]),
               _: 2
@@ -273,5 +276,5 @@ const Q = { class: "multiline-tooltip" }, U = {
   }
 });
 export {
-  pe as default
+  Ke as default
 };

package/components/dropdown/v4/index.d.ts

@@ -1679,6 +1679,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    shownValuesCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -1737,6 +1741,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    shownValuesCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
 }>> & {
     onClear?: () => any;
 }, {
@@ -1749,6 +1757,7 @@ declare const DropdownTypes: () => (({
     displayedValue: any;
     cancelAllSelectedDisplay: boolean;
     displayValueInQuotes: boolean;
+    shownValuesCount: number;
 }> | ({
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -1777,6 +1786,8 @@ declare const DropdownTypes: () => (({
             autoSize: boolean;
             disableKeyboardEvents: boolean;
             dynamicFilterMode: boolean;
+            minSelections: number;
+            maxSelections: number;
             isOnTop: boolean;
             triggerLabel: string;
             triggerHelperText: string;
@@ -1784,6 +1795,7 @@ declare const DropdownTypes: () => (({
             triggerFeedbackVariant: "success" | "warning" | "error";
             triggerFeedbackShowIcon: boolean;
             triggerShowAllSelectedText: boolean;
+            triggerShownValuesCount: number;
             predefinedTrigger: "default" | "icon-button" | "chip" | "app";
             inlineSearch: boolean;
             inlineSearchPlaceholder: string;
@@ -1918,6 +1930,14 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            minSelections: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            maxSelections: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             isOnTop: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1946,6 +1966,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            triggerShownValuesCount: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             predefinedTrigger: {
                 type: import("vue").PropType<"default" | "icon-button" | "chip" | "app">;
                 default: "default" | "icon-button" | "chip" | "app";
@@ -2075,7 +2099,7 @@ declare const DropdownTypes: () => (({
             onUnsavedSelectionUpdate?: (value: unknown[]) => any;
             onOpened?: () => any;
             onClosed?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "testId" | "placement" | "disabled" | "distance" | "container" | "popperClass" | "size" | "flip" | "mandatory" | "skidding" | "modelValue" | "selected" | "valueToCopy" | "placeholder" | "multi" | "infiniteLoading" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "dynamicFilterMode" | "isOnTop" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClearSearch" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "optionsEndTextIconKey" | "optionFlagKey" | "optionWarningKey" | "disabledOptionKey" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "groupedOptions" | "comparingKey" | "customNumberOfDisplayedOptions" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation" | "withConditions">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "testId" | "placement" | "disabled" | "distance" | "container" | "popperClass" | "size" | "flip" | "mandatory" | "skidding" | "modelValue" | "selected" | "valueToCopy" | "placeholder" | "multi" | "infiniteLoading" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "dynamicFilterMode" | "minSelections" | "maxSelections" | "isOnTop" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "triggerShownValuesCount" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClearSearch" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "optionsEndTextIconKey" | "optionFlagKey" | "optionWarningKey" | "disabledOptionKey" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "groupedOptions" | "comparingKey" | "customNumberOfDisplayedOptions" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation" | "withConditions">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -2195,6 +2219,14 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            minSelections: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            maxSelections: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             isOnTop: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -2223,6 +2255,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            triggerShownValuesCount: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             predefinedTrigger: {
                 type: import("vue").PropType<"default" | "icon-button" | "chip" | "app">;
                 default: "default" | "icon-button" | "chip" | "app";
@@ -2392,6 +2428,8 @@ declare const DropdownTypes: () => (({
             autoSize: boolean;
             disableKeyboardEvents: boolean;
             dynamicFilterMode: boolean;
+            minSelections: number;
+            maxSelections: number;
             isOnTop: boolean;
             triggerLabel: string;
             triggerHelperText: string;
@@ -2399,6 +2437,7 @@ declare const DropdownTypes: () => (({
             triggerFeedbackVariant: "success" | "warning" | "error";
             triggerFeedbackShowIcon: boolean;
             triggerShowAllSelectedText: boolean;
+            triggerShownValuesCount: number;
             predefinedTrigger: "default" | "icon-button" | "chip" | "app";
             inlineSearch: boolean;
             inlineSearchPlaceholder: string;
@@ -2553,6 +2592,14 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        minSelections: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
+        maxSelections: {
+            type: import("vue").PropType<number>;
+            default: any;
+        };
         isOnTop: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -2581,6 +2628,10 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        triggerShownValuesCount: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
         predefinedTrigger: {
             type: import("vue").PropType<"default" | "icon-button" | "chip" | "app">;
             default: "default" | "icon-button" | "chip" | "app";
@@ -2823,6 +2874,14 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    minSelections: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    maxSelections: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
     isOnTop: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -2851,6 +2910,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    triggerShownValuesCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
     predefinedTrigger: {
         type: import("vue").PropType<"default" | "icon-button" | "chip" | "app">;
         default: "default" | "icon-button" | "chip" | "app";
@@ -3020,6 +3083,8 @@ declare const DropdownTypes: () => (({
     autoSize: boolean;
     disableKeyboardEvents: boolean;
     dynamicFilterMode: boolean;
+    minSelections: number;
+    maxSelections: number;
     isOnTop: boolean;
     triggerLabel: string;
     triggerHelperText: string;
@@ -3027,6 +3092,7 @@ declare const DropdownTypes: () => (({
     triggerFeedbackVariant: "success" | "warning" | "error";
     triggerFeedbackShowIcon: boolean;
     triggerShowAllSelectedText: boolean;
+    triggerShownValuesCount: number;
     predefinedTrigger: "default" | "icon-button" | "chip" | "app";
     inlineSearch: boolean;
     inlineSearchPlaceholder: string;

package/components/switch/v4/SwitchV4.vue.d.ts

@@ -1,25 +1,30 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: unknown[];
     modelValue: unknown;
+    variant: 'primary' | 'default';
     testId?: string;
     iconKey?: string;
 }>, {
     testId: string;
+    variant: string;
     iconKey: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: unknown[];
     modelValue: unknown;
+    variant: 'primary' | 'default';
     testId?: string;
     iconKey?: string;
 }>, {
     testId: string;
+    variant: string;
     iconKey: string;
 }>>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     testId: string;
+    variant: 'primary' | 'default';
     iconKey: string;
 }>;
 export default _default;

package/components/switch/v4/SwitchV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./SwitchV4.vue2.js";
-/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_c2e356f5_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c2e356f5"]]);
+/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_fa120cf6_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-fa120cf6"]]);
 export {
   s as default
 };

package/components/switch/v4/SwitchV4.vue2.js

@@ -1,44 +1,46 @@
- import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_c2e356f5_lang.css"; import { defineComponent as p, ref as k, onMounted as v, openBlock as a, createElementBlock as d, unref as s, Fragment as I, renderList as V, createBlock as h, normalizeClass as B } from "vue";
+ import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_fa120cf6_lang.css"; import { defineComponent as k, ref as h, onMounted as I, openBlock as l, createElementBlock as r, normalizeClass as u, unref as i, Fragment as V, renderList as $, createBlock as B } from "vue";
 import { useVModel as C } from "@vueuse/core";
 import "../../button/v4/ButtonV4.vue.js";
-import $ from "../../button/v4/IconButtonV4.vue.js";
+import w from "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-import { SwitchTestIdModifiers as r } from "../../../testids/index.js";
-const w = ["data-testid"], S = /* @__PURE__ */ p({
+import { SwitchTestIdModifiers as m } from "../../../testids/index.js";
+const y = ["data-testid"], g = /* @__PURE__ */ k({
   __name: "SwitchV4",
   props: {
     options: null,
     modelValue: null,
+    variant: { default: "default" },
     testId: { default: "" },
     iconKey: { default: "icon" }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: m }) {
-    const o = e, n = k(), u = C(o, "modelValue", m);
-    v(() => {
-      n.value = o.options.findIndex(
-        (t) => t === o.modelValue
+  setup(t, { emit: f }) {
+    const a = t, n = h(), v = C(a, "modelValue", f), c = (e) => n.value === e;
+    I(() => {
+      n.value = a.options.findIndex(
+        (e) => e === a.modelValue
       );
     });
-    const f = (t, i) => {
-      n.value = i, u.value = t;
+    const p = (e, s) => {
+      n.value = s, v.value = e;
     };
-    return (t, i) => (a(), d("div", {
-      class: "switch",
-      "data-testid": `${e.testId}-${s(r).WRAPPER}`
+    return (e, s) => (l(), r("div", {
+      class: u(["switch", [`switch--variant-${t.variant}`]]),
+      "data-testid": `${t.testId}-${i(m).WRAPPER}`
     }, [
-      (a(!0), d(I, null, V(e.options, (c, l) => (a(), h(s($), {
-        key: l,
-        class: B(["option", { "option--selected": n.value === l }]),
-        "icon-name": c[e.iconKey],
+      (l(!0), r(V, null, $(t.options, (d, o) => (l(), B(i(w), {
+        key: o,
+        class: u(["option", { "option--selected": c(o) }]),
+        "icon-name": d[t.iconKey],
         size: "small",
-        "data-testid": `${e.testId}-${s(r).BUTTON}`,
-        onClick: (y) => f(c, l)
-      }, null, 8, ["class", "icon-name", "data-testid", "onClick"]))), 128))
-    ], 8, w));
+        color: c(o) ? t.variant : "default",
+        "data-testid": `${t.testId}-${i(m).BUTTON}`,
+        onClick: (M) => p(d, o)
+      }, null, 8, ["class", "icon-name", "color", "data-testid", "onClick"]))), 128))
+    ], 10, y));
   }
 });
 export {
-  S as default
+  g as default
 };

package/components/switch/v4/index.d.ts

@@ -3,6 +3,11 @@ declare const SwitchTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    variant: {
+        type: import("vue").PropType<"default" | "primary">;
+        required: true;
+        default: string;
+    };
     modelValue: {
         type: import("vue").PropType<unknown>;
         required: true;
@@ -22,6 +27,11 @@ declare const SwitchTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    variant: {
+        type: import("vue").PropType<"default" | "primary">;
+        required: true;
+        default: string;
+    };
     modelValue: {
         type: import("vue").PropType<unknown>;
         required: true;
@@ -38,6 +48,7 @@ declare const SwitchTypes: () => import("vue").DefineComponent<{
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     testId: string;
+    variant: "default" | "primary";
     iconKey: string;
 }>[];
 export { default as Switch } from './SwitchV4.vue';