@ironsource/shared-ui 2.2.0-rc.4 → 2.2.0-rc.41

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

@@ -1,4 +1,4 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css"; import { defineComponent as V, ref as I, watch as F, computed as L, openBlock as i, createBlock as g, unref as n, createSlots as N, withCtx as s, createElementVNode as u, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as r, createVNode as a, toDisplayString as m, createTextVNode as T, withModifiers as O, Fragment as j, renderList as R } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css"; import { defineComponent as V, ref as I, watch as F, computed as L, openBlock as i, createBlock as g, unref as n, createSlots as N, withCtx as s, createElementVNode as u, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as r, createVNode as a, toDisplayString as m, createTextVNode as T, withModifiers as O, Fragment as j, renderList as R } from "vue";
 import "../../typography/Heading.vue.js";
 import D from "../../typography/Text.vue.js";
 import q from "../../checkbox/v4/CheckboxV4.vue.js";
@@ -6,7 +6,7 @@ import y from "../../icon/v4/IconV4.vue.js";
 import G from "../../icon/v4/IconFlag.vue.js";
 import { NOOP as $ } from "@vue/shared";
 import { optionCommon as H } from "../common/Option.common.js";
-import p from "../../typography/v4/Typography.vue.js";
+import x from "../../typography/v4/Typography.vue.js";
 import h from "../../tooltip/v4/TooltipV4.vue.js";
 import { isElementTruncated as J } from "../../../utils/text.js";
 import { promiseTimeout as Q } from "@vueuse/core";
@@ -71,11 +71,11 @@ const U = { class: "multiline-tooltip" }, W = {
   setup(e, { emit: M }) {
     const d = e, { selected: b, id: B, onClick: S, api: K } = H(d), z = (t) => {
       d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? $() : S(t);
-    }, x = I(null), w = I(!1), A = (t) => {
+    }, p = I(null), w = I(!1), A = (t) => {
       d.disabled && (t.stopPropagation(), $());
     };
-    F([() => d.treeChildShown, x], async () => {
-      await Q(100), w.value = x.value && J(x.value);
+    F([() => d.treeChildShown, p], async () => {
+      await Q(100), w.value = p.value && J(p.value);
     });
     const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : w.value ? t[d.nameKey] : "", k = L(() => {
       const t = d.disabled && d.minMaxSelectionTooltipMessage || "", c = P(d.option);
@@ -97,7 +97,8 @@ const U = { class: "multiline-tooltip" }, W = {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
             "item-container--selected": n(b),
-            "item-container--multi": e.isMulti
+            "item-container--multi": e.isMulti,
+            "item-container--filtered-out": e.option?.filteredOut
           }]),
           onClick: A
         }, [
@@ -145,10 +146,10 @@ const U = { class: "multiline-tooltip" }, W = {
             ])) : o("", !0),
             u("div", {
               ref_key: "textContainerRef",
-              ref: x,
+              ref: p,
               class: "text-container"
             }, [
-              a(n(p), {
+              a(n(x), {
                 class: "option-text",
                 variant: "body2"
               }, {
@@ -166,7 +167,7 @@ const U = { class: "multiline-tooltip" }, W = {
                       }, {
                         default: s(() => [
                           e.option?.conditionalOptions ? (i(), l("div", ee, [
-                            a(n(p), {
+                            a(n(x), {
                               variant: "body2",
                               class: "conditional-option-label"
                             }, {
@@ -175,7 +176,7 @@ const U = { class: "multiline-tooltip" }, W = {
                               ]),
                               _: 1
                             }),
-                            a(n(p), {
+                            a(n(x), {
                               variant: "h5",
                               class: "conditional-option-value"
                             }, {
@@ -196,7 +197,7 @@ const U = { class: "multiline-tooltip" }, W = {
                         }, null, 8, ["name"])
                       ])) : o("", !0),
                       e.optionTwoLinesKey ? (i(), l("div", ne, [
-                        a(n(p), { variant: "caption" }, {
+                        a(n(x), { variant: "caption" }, {
                           default: s(() => [
                             T(m(e.option[e.optionTwoLinesKey]), 1)
                           ]),
@@ -279,7 +280,7 @@ const U = { class: "multiline-tooltip" }, W = {
         name: "tooltip",
         fn: s(() => [
           u("div", U, [
-            (i(!0), l(j, null, R(n(k), (f) => (i(), g(n(p), {
+            (i(!0), l(j, null, R(n(k), (f) => (i(), g(n(x), {
               key: f,
               variant: "body2"
             }, {

package/components/forms/FormCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./FormCard.vue2.js";
-/* empty css               */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css"; //*');
-const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-86feae7b"]]);
+/* empty css               */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../FormCard.vue_vue_type_style_index_0_scoped_98458a8f_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-98458a8f"]]);
 export {
   t as default
 };

package/components/forms/FormCard.vue2.js

@@ -1,4 +1,4 @@
- import "../../FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css"; import { defineComponent as B, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as n, unref as e, renderSlot as m, createVNode as a, withCtx as u, createTextVNode as g, toDisplayString as v, createBlock as T, createCommentVNode as C } from "vue";
+ import "../../FormCard.vue_vue_type_style_index_0_scoped_98458a8f_lang.css"; import { defineComponent as B, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as n, unref as e, renderSlot as m, createVNode as a, withCtx as u, createTextVNode as g, toDisplayString as v, createBlock as T, createCommentVNode as C } from "vue";
 import b from "../typography/v4/Typography.vue.js";
 import k from "../button/v4/ButtonV4.vue.js";
 import "../button/v4/IconButtonV4.vue.js";
@@ -7,7 +7,7 @@ import "../button/v4/ToggleButtonGroupAB.vue.js";
 import { FormCardTestIdModifiers as o } from "../../testids/index.js";
 import { useTestIdAttrs as N } from "../../utils/testIds.js";
 import i from "../skeleton/v4/SkeletonV4.vue.js";
-const p = { class: "form-card" }, h = {
+const h = { class: "form-card" }, p = {
   key: 1,
   class: "content-skeleton-container"
 }, F = /* @__PURE__ */ B({
@@ -27,7 +27,7 @@ const p = { class: "form-card" }, h = {
   setup(t, { emit: y }) {
     const l = N(t.testId, o);
     return (r, s) => (d(), c("div", null, [
-      f("div", p, [
+      f("div", h, [
         f("header", n({ class: "card-header" }, e(l)[e(o).TITLE]), [
           t.isLoading ? (d(), T(e(i), {
             key: 1,
@@ -46,7 +46,7 @@ const p = { class: "form-card" }, h = {
         f("div", n({
           class: ["card-content", { "card-content--no-padding": t.noPadding }]
         }, e(l)[e(o).CONTENT]), [
-          t.isLoading ? (d(), c("div", h, [
+          t.isLoading ? (d(), c("div", p, [
             a(e(i), {
               type: "rectangle",
               size: 20,
@@ -85,7 +85,7 @@ const p = { class: "form-card" }, h = {
             class: "form-action",
             loading: t.saveLoading
           }, e(l)[e(o).SAVE_BUTTON], {
-            disabled: t.saveDisabled || t.isLoading,
+            disabled: t.saveDisabled || t.isLoading || t.saveLoading,
             onClick: s[1] || (s[1] = (L) => y("save"))
           }), {
             default: u(() => [

package/components/helpText/HelpText.vue.d.ts

@@ -0,0 +1,68 @@
+import { TooltipTriggers } from '@/components/tooltip/common/Tooltip.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    variant?: "caption" | "h5" | "body1" | "body2";
+    color?: "default" | "primary" | "secondary";
+    disabled?: boolean;
+    testId?: string;
+    tooltipDisabled?: boolean;
+    tooltipTriggers?: TooltipTriggers[];
+    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";
+}>, {
+    variant: string;
+    color: string;
+    disabled: boolean;
+    testId: string;
+    tooltipDisabled: boolean;
+    tooltipTriggers: () => string[];
+    tooltipPlacement: 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<{
+    variant?: "caption" | "h5" | "body1" | "body2";
+    color?: "default" | "primary" | "secondary";
+    disabled?: boolean;
+    testId?: string;
+    tooltipDisabled?: boolean;
+    tooltipTriggers?: TooltipTriggers[];
+    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";
+}>, {
+    variant: string;
+    color: string;
+    disabled: boolean;
+    testId: string;
+    tooltipDisabled: boolean;
+    tooltipTriggers: () => string[];
+    tooltipPlacement: string;
+}>>>, {
+    testId: string;
+    variant: "caption" | "h5" | "body1" | "body2";
+    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;
+    color: "default" | "primary" | "secondary";
+    tooltipDisabled: boolean;
+    tooltipTriggers: TooltipTriggers[];
+}>, {
+    default?(_: {}): any;
+    tooltip?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/helpText/HelpText.vue.js

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

package/components/helpText/HelpText.vue2.js

@@ -0,0 +1,45 @@
+ import "../../HelpText.vue_vue_type_style_index_0_scoped_641c2356_lang.css"; import { defineComponent as s, openBlock as n, createBlock as p, unref as e, mergeProps as d, withCtx as l, renderSlot as i, createVNode as f } from "vue";
+import u from "../typography/v4/Typography.vue.js";
+import m from "../tooltip/v4/TooltipV4.vue.js";
+import { useTestIdAttrs as c } from "../../utils/testIds.js";
+import { HelpTextTestIdModifiers as a } from "../../testids/index.js";
+const y = /* @__PURE__ */ s({
+  __name: "HelpText",
+  props: {
+    variant: { default: "body1" },
+    color: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    tooltipDisabled: { type: Boolean, default: !1 },
+    tooltipTriggers: { default: () => ["hover"] },
+    tooltipPlacement: { default: "auto" }
+  },
+  setup(t) {
+    const r = c(t.testId, a);
+    return (o, g) => (n(), p(e(m), d({
+      class: ["help-text", [`help-text--${t.color}`, { "help-text--disabled": t.disabled }]],
+      disabled: !o.$slots.tooltip || t.tooltipDisabled,
+      triggers: t.tooltipTriggers,
+      placement: t.tooltipPlacement
+    }, e(r)[e(a).TOOLTIP]), {
+      tooltip: l(() => [
+        i(o.$slots, "tooltip", {}, void 0, !0)
+      ]),
+      default: l(() => [
+        f(e(u), d(e(r)[e(a).TEXT], {
+          class: "underlined",
+          variant: t.variant
+        }), {
+          default: l(() => [
+            i(o.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 16, ["variant"])
+      ]),
+      _: 3
+    }, 16, ["class", "disabled", "triggers", "placement"]));
+  }
+});
+export {
+  y as default
+};

package/components/helpText/index.d.ts

@@ -0,0 +1,190 @@
+declare const HelpTextTypes: () => ({
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            testId: string;
+            variant: "caption" | "h5" | "body1" | "body2";
+            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;
+            color: "default" | "primary" | "secondary";
+            tooltipDisabled: boolean;
+            tooltipTriggers: import("../tooltip/common/Tooltip.types").TooltipTriggers[];
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            variant: {
+                type: import("vue").PropType<"caption" | "h5" | "body1" | "body2">;
+                default: string;
+            };
+            tooltipPlacement: {
+                type: import("vue").PropType<"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">;
+                default: string;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            color: {
+                type: import("vue").PropType<"default" | "primary" | "secondary">;
+                default: string;
+            };
+            tooltipDisabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            tooltipTriggers: {
+                type: import("vue").PropType<import("../tooltip/common/Tooltip.types").TooltipTriggers[]>;
+                default: () => string[];
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "variant" | "tooltipPlacement" | "disabled" | "color" | "tooltipDisabled" | "tooltipTriggers">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            variant: {
+                type: import("vue").PropType<"caption" | "h5" | "body1" | "body2">;
+                default: string;
+            };
+            tooltipPlacement: {
+                type: import("vue").PropType<"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">;
+                default: string;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            color: {
+                type: import("vue").PropType<"default" | "primary" | "secondary">;
+                default: string;
+            };
+            tooltipDisabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            tooltipTriggers: {
+                type: import("vue").PropType<import("../tooltip/common/Tooltip.types").TooltipTriggers[]>;
+                default: () => string[];
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            testId: string;
+            variant: "caption" | "h5" | "body1" | "body2";
+            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;
+            color: "default" | "primary" | "secondary";
+            tooltipDisabled: boolean;
+            tooltipTriggers: import("../tooltip/common/Tooltip.types").TooltipTriggers[];
+        }, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        testId: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        variant: {
+            type: import("vue").PropType<"caption" | "h5" | "body1" | "body2">;
+            default: string;
+        };
+        tooltipPlacement: {
+            type: import("vue").PropType<"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">;
+            default: string;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        color: {
+            type: import("vue").PropType<"default" | "primary" | "secondary">;
+            default: string;
+        };
+        tooltipDisabled: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        tooltipTriggers: {
+            type: import("vue").PropType<import("../tooltip/common/Tooltip.types").TooltipTriggers[]>;
+            default: () => string[];
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"caption" | "h5" | "body1" | "body2">;
+        default: string;
+    };
+    tooltipPlacement: {
+        type: import("vue").PropType<"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">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<"default" | "primary" | "secondary">;
+        default: string;
+    };
+    tooltipDisabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    tooltipTriggers: {
+        type: import("vue").PropType<import("../tooltip/common/Tooltip.types").TooltipTriggers[]>;
+        default: () => string[];
+    };
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    testId: string;
+    variant: "caption" | "h5" | "body1" | "body2";
+    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;
+    color: "default" | "primary" | "secondary";
+    tooltipDisabled: boolean;
+    tooltipTriggers: import("../tooltip/common/Tooltip.types").TooltipTriggers[];
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+        tooltip?(_: {}): any;
+    };
+}))[];
+export { default as HelpText } from './HelpText.vue';
+export { HelpTextTypes };

package/components/helpText/index.js

@@ -0,0 +1,6 @@
+import e from "./HelpText.vue.js";
+const t = () => [e];
+export {
+  e as HelpText,
+  t as HelpTextTypes
+};

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

@@ -6,6 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height?: string;
     width?: string;
     platform?: string;
+    circled?: boolean;
 }>, {
     name: any;
     size: any;
@@ -14,6 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: any;
     width: any;
     platform: any;
+    circled: boolean;
 }>, {}, 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;
@@ -22,6 +24,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height?: string;
     width?: string;
     platform?: string;
+    circled?: boolean;
 }>, {
     name: any;
     size: any;
@@ -30,6 +33,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: any;
     width: any;
     platform: any;
+    circled: boolean;
 }>>>, {
     name: string;
     type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -38,6 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: string;
     width: string;
     platform: string;
+    circled: boolean;
 }>, {
     default?(_: {}): any;
 }>;

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

@@ -1,7 +1,7 @@
 import o from "./IconV4.vue2.js";
 /* 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"]]);
+// import "../../../IconV4.vue_vue_type_style_index_0_scoped_6683c5b5_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-6683c5b5"]]);
 export {
   t as default
 };

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

@@ -1,7 +1,7 @@
- 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__ */ S({
+ import "../../../IconV4.vue_vue_type_style_index_0_scoped_6683c5b5_lang.css"; import { defineComponent as w, useCssVars as C, unref as l, useSlots as b, computed as o, watch as _, openBlock as u, createElementBlock as f, normalizeClass as p, createCommentVNode as z, renderSlot as B } from "vue";
+import { useStorage as I } from "../../../composables/useStorage.js";
+import { ASSETS_BASE_URL as T } from "./consts.js";
+const U = ["innerHTML"], x = /* @__PURE__ */ w({
   __name: "IconV4",
   props: {
     type: { default: "regular" },
@@ -10,62 +10,63 @@ const V = ["innerHTML"], B = /* @__PURE__ */ S({
     size: { default: null },
     height: { default: null },
     width: { default: null },
-    platform: { default: null }
+    platform: { default: null },
+    circled: { type: Boolean, default: !1 }
   },
   setup(r) {
     const e = r;
-    w((t) => ({
-      "3d423be4": s(d),
-      "513646c9": s(m),
-      ad86ac0c: r.color
+    C((t) => ({
+      "9a94b0d2": l(m),
+      eb9f5d14: l(h),
+      "047031a6": r.color
     }));
-    const a = window.sharedUIRequestCache = window.sharedUIRequestCache || {}, p = C(), d = o(() => e.size || e.width), m = o(() => e.size || e.height), h = o(
+    const a = window.sharedUIRequestCache = window.sharedUIRequestCache || {}, d = b(), m = o(() => e.size || e.width), h = o(() => e.size || e.height), y = o(
       () => e.platform ? `${e.type}/${e.platform}` : e.type
-    ), y = o(() => {
+    ), g = o(() => {
       if (!e.name)
         return "";
       const t = e.name.split("/");
       return [e.name ? `icon-name--${t.at(-1)}` : ""];
     }), c = o(() => {
-      if (p.default)
+      if (d.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}${h.value}/${e.name}${n}.svg`;
-    }), l = T(`icon-${e.type}--${e.name}`);
-    function g(t) {
+      return `${T}/icons/${t}${y.value}/${e.name}${n}.svg`;
+    }), s = I(`icon-${e.type}--${e.name}`);
+    function v(t) {
       return a[t] || (a[t] = fetch(t).then((n) => n.text()).finally(() => {
         delete a[t];
       }).catch((n) => {
         console.error(n);
       })), a[t];
     }
-    function v(t) {
+    function $(t) {
       return t.replace(
         /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
         ""
       );
     }
     function i() {
-      g(c.value).then((t) => {
-        typeof t == "string" && t.startsWith("<svg") && (l.value = t);
+      v(c.value).then((t) => {
+        typeof t == "string" && t.startsWith("<svg") && (s.value = t);
       });
     }
-    !l.value && c.value && i();
-    const $ = o(() => v(l.value ?? ""));
+    !s.value && c.value && i();
+    const S = o(() => $(s.value ?? ""));
     return _(() => e.name, i), (t, n) => (u(), f("span", {
-      class: b(["icon", s(y)])
+      class: p(["icon", l(g)])
     }, [
       t.$slots.default ? z("", !0) : (u(), f("span", {
         key: 0,
-        class: "icon-wrapper",
-        innerHTML: s($)
-      }, null, 8, V)),
-      I(t.$slots, "default", {}, void 0, !0)
+        class: p(["icon-wrapper", { "icon-wrapper--circled": r.circled }]),
+        innerHTML: l(S)
+      }, null, 10, U)),
+      B(t.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
 export {
-  B as default
+  x as default
 };