@ironsource/shared-ui 2.1.7-test.3 → 2.1.7-test.4

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

@@ -1,24 +1,27 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9db0f796_lang.css"; import { defineComponent as B, ref as z, computed as N, openBlock as n, createBlock as f, unref as i, withCtx as y, createElementVNode as s, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as c, createVNode as d, createTextVNode as K, toDisplayString as h, withModifiers as V } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_b6a06f00_lang.css"; import { defineComponent as B, ref as z, computed as V, openBlock as n, createBlock as y, unref as i, withCtx as d, createElementVNode as l, normalizeClass as T, createCommentVNode as o, createElementBlock as a, renderSlot as r, createVNode as s, toDisplayString as v, createTextVNode as h, withModifiers as L } from "vue";
 import "../../typography/Heading.vue.js";
-import w from "../../typography/Text.vue.js";
+import N from "../../typography/Text.vue.js";
 import O from "../../checkbox/v4/CheckboxV4.vue.js";
-import T from "../../icon/v4/IconV4.vue.js";
+import g from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
 import { NOOP as P } from "@vue/shared";
 import { optionCommon as S } from "../common/Option.common.js";
-import E from "../../typography/v4/Typography.vue.js";
-import j from "../../tooltip/v4/TooltipV4.vue.js";
-import { isElementTruncated as M } from "../../../utils/text.js";
-const R = {
+import x from "../../typography/v4/Typography.vue.js";
+import E from "../../tooltip/v4/TooltipV4.vue.js";
+import { isElementTruncated as j } from "../../../utils/text.js";
+const M = {
   key: 1,
   class: "image"
-}, A = ["src"], D = {
+}, R = ["src"], A = {
   key: 2,
   class: "start-icon"
-}, q = {
+}, D = { class: "main-text" }, q = {
+  key: 0,
+  class: "caption-text"
+}, F = {
   key: 3,
   class: "end-icon"
-}, F = { key: 0 }, ee = /* @__PURE__ */ B({
+}, G = { key: 0 }, ie = /* @__PURE__ */ B({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -34,90 +37,104 @@ const R = {
     iconType: { default: "regular" },
     endIconKey: { default: null },
     endIconType: { default: "regular" },
-    toolTipPlacement: { default: "right" }
+    toolTipPlacement: { default: "right" },
+    optionTwoLinesVariant: { default: void 0 },
+    optionTwoLinesKey: { default: void 0 }
   },
   setup(e) {
-    const g = e, { selected: r, isMulti: u, id: I, onClick: p, api: b } = S(g), m = z(null), x = N(
-      () => m.value && M(m.value)
-    ), C = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : x.value ? t[g.nameKey] : "", $ = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
-    return (t, a) => (n(), f(i(j), {
-      text: C(e.option),
-      "test-id": $(e.option),
+    const k = e, { selected: u, isMulti: m, id: p, onClick: I, api: b } = S(k), f = z(null), C = V(
+      () => f.value && j(f.value)
+    ), $ = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : C.value ? t[k.nameKey] : "", w = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
+    return (t, c) => (n(), y(i(E), {
+      text: $(e.option),
+      "test-id": w(e.option),
       placement: e.toolTipPlacement,
       class: "tooltip-option"
     }, {
-      default: y(() => [
-        s("div", {
+      default: d(() => [
+        l("div", {
           ref: "el",
-          class: v(["item-container", {
+          class: T(["item-container", {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
-            "item-container--selected": i(r),
-            "item-container--multi": i(u)
+            "item-container--selected": i(u),
+            "item-container--multi": i(m)
           }])
         }, [
-          s("div", {
-            class: v(["item", {
-              "item--multi": i(u),
+          l("div", {
+            class: T(["item", {
+              "item--multi": i(m),
               "item--with-icon": t.$slots["icon-start"] || t.$slots.image
             }])
           }, [
-            i(u) ? (n(), f(i(O), {
+            i(m) ? (n(), y(i(O), {
               key: 0,
-              id: i(I).toString(),
+              id: i(p).toString(),
               tabindex: "-1",
               class: "checkbox",
-              "is-checked": i(r),
+              "is-checked": i(u),
               "is-indeterminate": e.isIndeterminate,
-              onClick: a[0] || (a[0] = (k) => e.disabled ? i(P)() : i(p)(k))
+              onClick: c[0] || (c[0] = (K) => e.disabled ? i(P)() : i(I)(K))
             }, null, 8, ["id", "is-checked", "is-indeterminate"])) : o("", !0),
-            t.$slots.image || e.imageKey ? (n(), l("div", R, [
-              c(t.$slots, "image", {}, () => [
-                e.imageKey ? (n(), l("img", {
+            t.$slots.image || e.imageKey ? (n(), a("div", M, [
+              r(t.$slots, "image", {}, () => [
+                e.imageKey ? (n(), a("img", {
                   key: 0,
                   src: e.option[e.imageKey]
-                }, null, 8, A)) : o("", !0)
+                }, null, 8, R)) : o("", !0)
               ], !0)
             ])) : o("", !0),
-            t.$slots["icon-start"] || e.iconKey ? (n(), l("div", D, [
-              c(t.$slots, "icon-start", {}, () => [
-                d(i(T), {
+            t.$slots["icon-start"] || e.iconKey ? (n(), a("div", A, [
+              r(t.$slots, "icon-start", {}, () => [
+                s(i(g), {
                   type: e.iconType,
                   name: e.option[e.iconKey],
                   size: e.iconType === "regular" ? "20px" : "16px"
                 }, null, 8, ["type", "name", "size"])
               ], !0)
             ])) : o("", !0),
-            s("div", {
+            l("div", {
               ref_key: "textContainerRef",
-              ref: m,
+              ref: f,
               class: "text-container"
             }, [
-              d(i(E), {
+              s(i(x), {
                 class: "option-text",
                 variant: "body2"
               }, {
-                default: y(() => [
-                  c(t.$slots, "default", {}, () => [
-                    K(h(e.option[e.nameKey]), 1)
+                default: d(() => [
+                  r(t.$slots, "default", {}, () => [
+                    l("div", {
+                      class: T(`option-content-${e.optionTwoLinesVariant || "horizontal"}`)
+                    }, [
+                      l("div", D, v(e.option[e.nameKey]), 1),
+                      e.optionTwoLinesKey ? (n(), a("div", q, [
+                        s(i(x), { variant: "caption" }, {
+                          default: d(() => [
+                            h(v(e.option[e.optionTwoLinesKey]), 1)
+                          ]),
+                          _: 1
+                        })
+                      ])) : o("", !0)
+                    ], 2)
                   ], !0)
                 ]),
                 _: 3
               }),
-              e.subtitle ? (n(), f(i(w), {
+              e.subtitle ? (n(), y(i(N), {
                 key: 0,
                 class: "subtitle",
                 size: "xs"
               }, {
-                default: y(() => [
-                  K(h(e.subtitle), 1)
+                default: d(() => [
+                  h(v(e.subtitle), 1)
                 ]),
                 _: 1
               })) : o("", !0)
             ], 512),
-            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (n(), l("div", q, [
-              c(t.$slots, "icon-end", {}, () => [
-                d(i(T), {
+            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (n(), a("div", F, [
+              r(t.$slots, "icon-end", {}, () => [
+                s(i(g), {
                   type: e.endIconType,
                   name: e.option[e.endIconKey],
                   size: e.endIconType === "regular" || e.endIconType === "ab-test" ? "20px" : "16px"
@@ -125,12 +142,12 @@ const R = {
               ], !0)
             ])) : o("", !0)
           ], 2),
-          i(b).clearable && i(r) ? (n(), l("div", F, [
-            s("button", {
+          i(b).clearable && i(u) ? (n(), a("div", G, [
+            l("button", {
               class: "clear-button",
-              onClick: a[1] || (a[1] = V((k) => i(b).clearSelection(), ["prevent", "stop"]))
+              onClick: c[1] || (c[1] = L((K) => i(b).clearSelection(), ["prevent", "stop"]))
             }, [
-              d(i(T), {
+              s(i(g), {
                 name: "close",
                 width: "8",
                 height: "8"
@@ -144,5 +161,5 @@ const R = {
   }
 });
 export {
-  ee as default
+  ie as default
 };

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

@@ -225,6 +225,20 @@ export declare const dropDownStoryArgs: {
             category: string;
         };
     };
+    optionTwoLinesVariant: {
+        options: string[];
+        table: {
+            category: string;
+        };
+    };
+    optionTwoLinesKey: {
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+    };
     valueToCopy: {
         control: {
             type: string;

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

@@ -1039,6 +1039,8 @@ declare const DropdownTypes: () => (({
             disabled: boolean;
             active: boolean;
             endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+            optionTwoLinesVariant: "horizontal" | "vertical";
+            optionTwoLinesKey: string;
             isIndeterminate: boolean;
             subtitle: string;
             selectAllOption: boolean;
@@ -1065,6 +1067,14 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<"fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate">;
                 default: string;
             };
+            optionTwoLinesVariant: {
+                type: import("vue").PropType<"horizontal" | "vertical">;
+                default: any;
+            };
+            optionTwoLinesKey: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             isIndeterminate: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1104,7 +1114,7 @@ declare const DropdownTypes: () => (({
             selectedProp: {
                 type: import("vue").PropType<boolean>;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "option" | "disabled" | "active" | "endIconType" | "isIndeterminate" | "subtitle" | "selectAllOption" | "nameKey" | "imageKey" | "iconKey" | "iconType" | "endIconKey" | "toolTipPlacement">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "option" | "disabled" | "active" | "endIconType" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "isIndeterminate" | "subtitle" | "selectAllOption" | "nameKey" | "imageKey" | "iconKey" | "iconType" | "endIconKey" | "toolTipPlacement">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -1135,6 +1145,14 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<"fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate">;
                 default: string;
             };
+            optionTwoLinesVariant: {
+                type: import("vue").PropType<"horizontal" | "vertical">;
+                default: any;
+            };
+            optionTwoLinesKey: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             isIndeterminate: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1179,6 +1197,8 @@ declare const DropdownTypes: () => (({
             disabled: boolean;
             active: boolean;
             endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+            optionTwoLinesVariant: "horizontal" | "vertical";
+            optionTwoLinesKey: string;
             isIndeterminate: boolean;
             subtitle: string;
             selectAllOption: boolean;
@@ -1225,6 +1245,14 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<"fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate">;
             default: string;
         };
+        optionTwoLinesVariant: {
+            type: import("vue").PropType<"horizontal" | "vertical">;
+            default: any;
+        };
+        optionTwoLinesKey: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
         isIndeterminate: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -1285,6 +1313,14 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<"fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate">;
         default: string;
     };
+    optionTwoLinesVariant: {
+        type: import("vue").PropType<"horizontal" | "vertical">;
+        default: any;
+    };
+    optionTwoLinesKey: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
     isIndeterminate: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -1329,6 +1365,8 @@ declare const DropdownTypes: () => (({
     disabled: boolean;
     active: boolean;
     endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+    optionTwoLinesVariant: "horizontal" | "vertical";
+    optionTwoLinesKey: string;
     isIndeterminate: boolean;
     subtitle: string;
     selectAllOption: boolean;
@@ -1503,6 +1541,8 @@ declare const DropdownTypes: () => (({
             optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
             valueToCopy: string;
             disabledOptionKey: string;
+            optionTwoLinesVariant: "horizontal" | "vertical";
+            optionTwoLinesKey: string;
             fullWidth: boolean;
             optionsListWidth: string;
             statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -1691,6 +1731,14 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            optionTwoLinesVariant: {
+                type: import("vue").PropType<"horizontal" | "vertical">;
+                default: any;
+            };
+            optionTwoLinesKey: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1720,7 +1768,7 @@ declare const DropdownTypes: () => (({
             "onUpdate:isOpen"?: (value: unknown) => any;
             onOpened?: () => any;
             onClosed?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "onClear" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "valueToCopy" | "disabledOptionKey" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "onClear" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "valueToCopy" | "disabledOptionKey" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -1917,6 +1965,14 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            optionTwoLinesVariant: {
+                type: import("vue").PropType<"horizontal" | "vertical">;
+                default: any;
+            };
+            optionTwoLinesKey: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -2001,6 +2057,8 @@ declare const DropdownTypes: () => (({
             optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
             valueToCopy: string;
             disabledOptionKey: string;
+            optionTwoLinesVariant: "horizontal" | "vertical";
+            optionTwoLinesKey: string;
             fullWidth: boolean;
             optionsListWidth: string;
             statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -2209,6 +2267,14 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<string>;
             default: string;
         };
+        optionTwoLinesVariant: {
+            type: import("vue").PropType<"horizontal" | "vertical">;
+            default: any;
+        };
+        optionTwoLinesKey: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
         fullWidth: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -2428,6 +2494,14 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<string>;
         default: string;
     };
+    optionTwoLinesVariant: {
+        type: import("vue").PropType<"horizontal" | "vertical">;
+        default: any;
+    };
+    optionTwoLinesKey: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
     fullWidth: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -2512,6 +2586,8 @@ declare const DropdownTypes: () => (({
     optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     valueToCopy: string;
     disabledOptionKey: string;
+    optionTwoLinesVariant: "horizontal" | "vertical";
+    optionTwoLinesKey: string;
     fullWidth: boolean;
     optionsListWidth: string;
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";

package/components/icon/v4/IconV4.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size?: string;
     height?: string;
     width?: string;
+    platform?: string;
 }>, {
     name: any;
     size: any;
@@ -12,6 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     height: any;
     width: any;
+    platform: any;
 }>, {}, 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<{
     type?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     name?: string;
@@ -19,6 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size?: string;
     height?: string;
     width?: string;
+    platform?: string;
 }>, {
     name: any;
     size: any;
@@ -26,6 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     height: any;
     width: any;
+    platform: any;
 }>>>, {
     name: string;
     type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -33,6 +37,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     height: string;
     width: string;
+    platform: string;
 }>, {
     default?(_: {}): any;
 }>;

package/components/icon/v4/IconV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./IconV4.vue2.js";
-/* empty css             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../IconV4.vue_vue_type_style_index_0_scoped_1eea7671_lang.css"; //*');
-const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-1eea7671"]]);
+/* empty css             */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../IconV4.vue_vue_type_style_index_0_scoped_dc433d48_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-dc433d48"]]);
 export {
-  c as default
+  t as default
 };

package/components/icon/v4/IconV4.vue2.js

@@ -1,7 +1,7 @@
- import "../../../IconV4.vue_vue_type_style_index_0_scoped_1eea7671_lang.css"; import { defineComponent as $, useCssVars as S, unref as a, useSlots as w, computed as o, watch as C, openBlock as u, createElementBlock as f, normalizeClass as _, createCommentVNode as b, renderSlot as z } from "vue";
-import { useStorage as I } from "../../../composables/useStorage.js";
+ import "../../../IconV4.vue_vue_type_style_index_0_scoped_dc433d48_lang.css"; import { defineComponent as S, useCssVars as w, unref as s, useSlots as C, computed as o, watch as _, openBlock as u, createElementBlock as f, normalizeClass as b, createCommentVNode as z, renderSlot as I } from "vue";
+import { useStorage as T } from "../../../composables/useStorage.js";
 import { ASSETS_BASE_URL as U } from "./consts.js";
-const V = ["innerHTML"], B = /* @__PURE__ */ $({
+const V = ["innerHTML"], B = /* @__PURE__ */ S({
   __name: "IconV4",
   props: {
     type: { default: "regular" },
@@ -9,34 +9,37 @@ const V = ["innerHTML"], B = /* @__PURE__ */ $({
     color: { default: null },
     size: { default: null },
     height: { default: null },
-    width: { default: null }
+    width: { default: null },
+    platform: { default: null }
   },
-  setup(c) {
-    const e = c;
-    S((t) => ({
-      "2034b1ce": a(d),
-      "66dae3c2": a(m),
-      "5a4ab638": c.color
+  setup(r) {
+    const e = r;
+    w((t) => ({
+      "3d423be4": s(d),
+      "513646c9": s(m),
+      ad86ac0c: r.color
     }));
-    const s = window.sharedUIRequestCache = window.sharedUIRequestCache || {}, p = w(), d = o(() => e.size || e.width), m = o(() => e.size || e.height), h = o(() => {
+    const a = window.sharedUIRequestCache = window.sharedUIRequestCache || {}, p = C(), d = o(() => e.size || e.width), m = o(() => e.size || e.height), h = o(
+      () => e.platform ? `${e.type}/${e.platform}` : e.type
+    ), y = o(() => {
       if (!e.name)
         return "";
       const t = e.name.split("/");
       return [e.name ? `icon-name--${t.at(-1)}` : ""];
-    }), l = o(() => {
+    }), c = o(() => {
       if (p.default)
         return "";
       if (!e.name)
         return console.error("Please provided icon name"), "";
       const t = e.type === "regular" || e.type === "bold" || e.type === "fill" ? "ph/" : "v4/", n = e.type === "bold" || e.type === "fill" ? `-${e.type}` : "";
-      return `${U}/icons/${t}${e.type}/${e.name}${n}.svg`;
-    }), r = I(`icon-${e.type}--${e.name}`);
+      return `${U}/icons/${t}${h.value}/${e.name}${n}.svg`;
+    }), l = T(`icon-${e.type}--${e.name}`);
     function g(t) {
-      return s[t] || (s[t] = fetch(t).then((n) => n.text()).finally(() => {
-        delete s[t];
+      return a[t] || (a[t] = fetch(t).then((n) => n.text()).finally(() => {
+        delete a[t];
       }).catch((n) => {
         console.error(n);
-      })), s[t];
+      })), a[t];
     }
     function v(t) {
       return t.replace(
@@ -45,21 +48,21 @@ const V = ["innerHTML"], B = /* @__PURE__ */ $({
       );
     }
     function i() {
-      g(l.value).then((t) => {
-        typeof t == "string" && t.startsWith("<svg") && (r.value = t);
+      g(c.value).then((t) => {
+        typeof t == "string" && t.startsWith("<svg") && (l.value = t);
       });
     }
-    !r.value && l.value && i();
-    const y = o(() => v(r.value ?? ""));
-    return C(() => e.name, i), (t, n) => (u(), f("span", {
-      class: _(["icon", a(h)])
+    !l.value && c.value && i();
+    const $ = o(() => v(l.value ?? ""));
+    return _(() => e.name, i), (t, n) => (u(), f("span", {
+      class: b(["icon", s(y)])
     }, [
-      t.$slots.default ? b("", !0) : (u(), f("span", {
+      t.$slots.default ? z("", !0) : (u(), f("span", {
         key: 0,
         class: "icon-wrapper",
-        innerHTML: a(y)
+        innerHTML: s($)
       }, null, 8, V)),
-      z(t.$slots, "default", {}, void 0, !0)
+      I(t.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });

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

@@ -10,6 +10,7 @@ declare const IconTypes: () => ({
             size: string;
             height: string;
             width: string;
+            platform: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             name: {
                 type: import("vue").PropType<string>;
@@ -35,7 +36,11 @@ declare const IconTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: any;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "name" | "type" | "color" | "size" | "height" | "width">;
+            platform: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "name" | "type" | "color" | "size" | "height" | "width" | "platform">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -74,6 +79,10 @@ declare const IconTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            platform: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             name: string;
             type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -81,6 +90,7 @@ declare const IconTypes: () => ({
             size: string;
             height: string;
             width: string;
+            platform: string;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -126,6 +136,10 @@ declare const IconTypes: () => ({
             type: import("vue").PropType<string>;
             default: any;
         };
+        platform: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
     }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
@@ -155,6 +169,10 @@ declare const IconTypes: () => ({
         type: import("vue").PropType<string>;
         default: any;
     };
+    platform: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     name: string;
     type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -162,6 +180,7 @@ declare const IconTypes: () => ({
     size: string;
     height: string;
     width: string;
+    platform: string;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;

package/components/includeExclude/IncludeExclude.vue.js

@@ -1,7 +1,7 @@
-import e from "./IncludeExclude.vue2.js";
-/* empty css                     */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../IncludeExclude.vue_vue_type_style_index_0_scoped_fb054d88_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-fb054d88"]]);
+import c from "./IncludeExclude.vue2.js";
+/* empty css                     */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../IncludeExclude.vue_vue_type_style_index_0_scoped_cc2adbf5_lang.css"; //*');
+const s = /* @__PURE__ */ e(c, [["__scopeId", "data-v-cc2adbf5"]]);
 export {
   s as default
 };